.resources-page .seo-hero {
  grid-template-columns: minmax(0, 1fr) minmax(230px, .65fr);
}

.resource-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 40px;
}

.resource-card {
  display: flex;
  min-height: 250px;
  flex-direction: column;
  padding: 25px;
  border: 1px solid var(--seo-line);
  background: rgba(255, 255, 255, .52);
  color: var(--seo-ink);
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.resource-card:hover,
.resource-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--seo-blue);
  box-shadow: 0 14px 30px rgba(38, 51, 48, .1);
}

.resource-card span {
  color: var(--seo-blue);
  font: 700 9px DM Sans, sans-serif;
  letter-spacing: 1.3px;
}

.resource-card h2 {
  margin: 27px 0 10px;
  font: 600 23px / 1.13 Manrope, sans-serif;
  letter-spacing: -0.8px;
}

.resource-card p {
  margin: 0;
  color: var(--seo-muted);
  font: 400 13px / 1.65 DM Sans, sans-serif;
}

.resource-card b {
  margin-top: auto;
  padding-top: 22px;
  color: var(--seo-blue);
  font: 700 11px DM Sans, sans-serif;
}

.pyq-track-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 40px;
}

.pyq-downloads-only {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(34px, 6vw, 82px) 0;
}

.pyq-downloads-only .pyq-track-grid { margin-top: 0; }

.pyq-track-card {
  display: flex;
  min-height: 268px;
  flex-direction: column;
  padding: 29px;
  border: 1px solid var(--seo-line);
  background: rgba(255,255,255,.56);
  color: var(--seo-ink);
  text-decoration: none;
}

.pyq-track-card>span {
  color: var(--seo-blue);
  font: 700 9px DM Sans, sans-serif;
  letter-spacing: 1.3px;
}

.pyq-track-card h2 {
  max-width: 430px;
  margin: 38px 0 12px;
  font: 600 clamp(26px, 3vw, 37px) / 1.08 Manrope, sans-serif;
  letter-spacing: -1.5px;
}

.pyq-track-card p {
  max-width: 430px;
  margin: 0;
  color: var(--seo-muted);
  font: 400 13px / 1.65 DM Sans, sans-serif;
}

.pyq-track-card b {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--seo-line);
  color: var(--seo-blue);
  font: 700 11px DM Sans, sans-serif;
}

.pyq-track-card.is-ready {
  border-color: var(--seo-blue);
  background: #173f39;
  color: #fff;
  transition: transform .2s ease, box-shadow .2s ease;
}

.pyq-track-card.is-ready>span,.pyq-track-card.is-ready b { color: #d5efb9; }
.pyq-track-card.is-ready p { color: rgba(255,255,255,.75); }
.pyq-track-card.is-ready b { border-color: rgba(255,255,255,.22); }
.pyq-track-card.is-ready:hover,.pyq-track-card.is-ready:focus-visible { transform: translateY(-4px); box-shadow: 0 17px 30px rgba(23,63,57,.2); }
.pyq-track-card.is-coming { background: #f4f1e8; }
.pyq-track-card.is-coming b { color: #7c7667; }

.resource-article {
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(58px, 8vw, 100px) clamp(24px, 7vw, 110px);
}

.resource-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
  color: var(--seo-muted);
  font: 600 10px DM Sans, sans-serif;
}

.resource-breadcrumbs a {
  color: inherit;
}

.resource-article h1 {
  max-width: 830px;
  margin: 0;
  font: 600 clamp(39px, 6vw, 68px) / 1.02 Manrope, sans-serif;
  letter-spacing: -2.8px;
}

.resource-article .seo-lead {
  max-width: 760px;
}

.resource-content {
  margin-top: 48px;
  padding-top: 8px;
  border-top: 1px solid var(--seo-line);
}

.resource-content section {
  padding: 29px 0;
  border-bottom: 1px solid var(--seo-line);
}

.resource-content h2 {
  margin: 0 0 13px;
  font: 600 clamp(24px, 3vw, 34px) / 1.15 Manrope, sans-serif;
  letter-spacing: -1px;
}

.resource-content p,
.resource-content li {
  max-width: 790px;
  color: #4f5c58;
  font: 400 15px / 1.76 DM Sans, sans-serif;
}

.resource-content p {
  margin: 0 0 14px;
}

.resource-content ul,
.resource-content ol {
  margin: 14px 0;
  padding-left: 22px;
}

.resource-content li + li {
  margin-top: 7px;
}

.resource-note {
  margin: 38px 0 0;
  padding: 22px;
  background: #e5eee3;
  color: #37534e;
  font: 500 13px / 1.65 DM Sans, sans-serif;
}

.resource-related {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.resource-related a {
  padding: 14px;
  border: 1px solid var(--seo-line);
  color: var(--seo-ink);
  font: 600 12px / 1.4 DM Sans, sans-serif;
  text-decoration: none;
}

.resource-related a:hover {
  border-color: var(--seo-blue);
  color: var(--seo-blue);
}

@media (max-width: 760px) {
  .resource-grid,
  .resource-related,
  .pyq-track-grid {
    grid-template-columns: 1fr;
  }

  .resource-article h1 {
    letter-spacing: -1.6px;
  }
}