/* finesse · register=brand-extension · A=light-substrate+navy+teal-signal · B=620/400 · C=policy-ledger+wide-table · D=state-only · E=ink-on-cloud-paper · SOUL=7 SPECTACLE=3 DENSITY=8 */
.seo-page {
  background: var(--color-void);
  color: var(--color-ink);
}

.seo-page a {
  color: inherit;
}

.seo-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  min-height: var(--nav-height);
  border-bottom: 1px solid var(--color-line);
  background: var(--color-nav);
  backdrop-filter: blur(18px);
}

.seo-nav-inner,
.seo-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--nav-height);
  gap: 24px;
}

.seo-nav nav,
.seo-footer nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
}

.seo-nav nav a,
.seo-footer nav a {
  color: var(--color-muted);
  font-size: .82rem;
  text-decoration: none;
}

.seo-nav nav a:hover,
.seo-footer nav a:hover {
  color: var(--color-ink);
}

.seo-hero {
  padding: clamp(84px, 12vw, 160px) 0 clamp(70px, 9vw, 120px);
  border-bottom: 1px solid var(--color-line);
  background:
    radial-gradient(circle at 84% 16%, var(--color-signal-soft), transparent 25%),
    linear-gradient(135deg, var(--color-panel-wash), transparent 44%);
}

.seo-category-hero {
  padding-bottom: clamp(56px, 7vw, 96px);
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 42px;
  color: var(--color-dim);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .05em;
}

.breadcrumbs a {
  text-decoration-color: var(--color-signal-line);
  text-underline-offset: 4px;
}

.seo-hero h1 {
  max-width: 980px;
  margin: 12px 0 24px;
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 7vw, 6.6rem);
  font-weight: 520;
  letter-spacing: -.065em;
  line-height: .96;
}

.seo-answer {
  max-width: 760px;
  color: var(--color-muted);
  font-size: clamp(1.05rem, 1.6vw, 1.36rem);
  line-height: 1.75;
}

.seo-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 840px;
  margin-top: 56px;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.seo-metrics div {
  padding: 24px 22px;
  border-right: 1px solid var(--color-line);
}

.seo-metrics div:last-child {
  border-right: 0;
}

.seo-metrics strong,
.seo-metrics span {
  display: block;
}

.seo-metrics strong {
  color: var(--color-signal);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 560;
  letter-spacing: -.04em;
}

.seo-metrics span {
  margin-top: 6px;
  color: var(--color-muted);
  font-size: .82rem;
}

.seo-directory,
.policy-section,
.related-section,
.guide-paper {
  background: var(--color-paper);
  color: var(--color-paper-ink);
}

.seo-directory,
.policy-section,
.related-section,
.seo-boundary,
.verify-section,
.guide-section {
  padding: clamp(68px, 9vw, 120px) 0;
}

.guide-layout {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(38px, 8vw, 120px);
  align-items: start;
}

.guide-copy {
  max-width: 780px;
}

.guide-copy h2,
.guide-checklist h2 {
  margin: 0 0 24px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.4vw, 4rem);
  font-weight: 540;
  letter-spacing: -.045em;
  line-height: 1.03;
}

.guide-copy h3 {
  margin: 34px 0 12px;
  font-size: 1.15rem;
}

.guide-copy p,
.guide-copy li,
.guide-checklist li {
  color: var(--color-paper-muted);
  line-height: 1.8;
}

.guide-copy ul,
.guide-copy ol {
  padding-left: 1.25em;
}

.guide-callout {
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid var(--color-line-paper);
  background: var(--color-surface-wash);
}

.guide-callout strong,
.guide-formula strong {
  display: block;
  margin-bottom: 12px;
  color: var(--color-signal-ink);
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.guide-callout p,
.guide-formula p {
  margin: 0;
  color: var(--color-paper-muted);
  line-height: 1.8;
}

.guide-formula {
  margin-top: 20px;
  padding: 24px;
  border-left: 3px solid var(--color-signal);
  background: var(--color-signal-soft);
}

.guide-dark {
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  background: var(--color-deep);
}

.guide-dark .guide-copy p,
.guide-dark .guide-copy li,
.guide-dark .guide-checklist li {
  color: var(--color-muted);
}

.guide-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 44px;
  border: 1px solid var(--color-line);
  background: var(--color-line);
}

.guide-steps article {
  min-height: 230px;
  padding: 28px;
  background: var(--color-panel);
}

.guide-steps article > span {
  color: var(--color-signal);
  font-family: var(--font-mono);
  font-size: .72rem;
}

.guide-steps h3 {
  margin: 48px 0 12px;
}

.guide-steps p {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.7;
}

.guide-checklist ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: guide-check;
  border-top: 1px solid var(--color-line-paper);
}

.guide-checklist li {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--color-line-paper);
  counter-increment: guide-check;
}

.guide-checklist li::before {
  content: counter(guide-check, decimal-leading-zero);
  color: var(--color-signal-ink);
  font-family: var(--font-mono);
  font-size: .72rem;
}

.seo-directory ol,
.related-links {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-line-paper);
}

.seo-directory li {
  border-bottom: 1px solid var(--color-line-paper);
}

.seo-directory li > a {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) minmax(180px, 280px);
  gap: 28px;
  align-items: center;
  padding: 34px 8px;
  text-decoration: none;
  transition: padding var(--ease-out) .22s, background var(--ease-out) .22s;
}

.seo-directory li > a:hover {
  padding-inline: 18px;
  background: var(--color-surface-wash);
}

.seo-directory li > a > span,
.policy-id,
.related-links a span {
  color: var(--color-signal-ink);
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .07em;
}

.seo-directory h2,
.policy-intro h2,
.boundary-title h2,
.verify-section h2,
.related-section h2,
.seo-two-col h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 540;
  letter-spacing: -.04em;
}

.seo-directory h2 {
  font-size: clamp(1.3rem, 2.4vw, 2rem);
}

.seo-directory p,
.policy-intro p,
.seo-two-col p,
.seo-two-col li,
.verify-section p,
.method-note p {
  color: var(--color-paper-muted);
  line-height: 1.7;
}

.seo-directory p {
  max-width: 700px;
  margin: 9px 0 0;
}

.seo-directory dl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 0;
}

.seo-directory dl div {
  display: grid;
  gap: 4px;
}

.seo-directory dt {
  color: var(--color-paper-muted);
  font-size: .72rem;
}

.seo-directory dd {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 700;
}

.seo-boundary {
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  background: var(--color-deep);
}

.seo-two-col,
.policy-intro,
.boundary-grid,
.verify-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 7vw, 100px);
}

.seo-two-col ol {
  margin: 20px 0 0;
  padding-left: 1.2em;
}

.seo-two-col p,
.seo-two-col li {
  color: var(--color-muted);
}

.policy-intro {
  align-items: end;
  margin-bottom: 38px;
}

.policy-intro h2,
.boundary-title h2,
.verify-section h2,
.related-section > .shell > h2 {
  font-size: clamp(2rem, 4.4vw, 4rem);
  line-height: 1.02;
}

.policy-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-line-paper);
  background: var(--color-surface-wash);
}

.policy-table-wrap table {
  width: 100%;
  min-width: 1040px;
  border-collapse: collapse;
}

.policy-table-wrap caption {
  padding: 16px 18px;
  color: var(--color-paper-muted);
  text-align: left;
  font-size: .8rem;
}

.policy-table-wrap th,
.policy-table-wrap td {
  padding: 17px 16px;
  border-top: 1px solid var(--color-line-paper);
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
}

.policy-table-wrap th {
  color: var(--color-paper-muted);
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.policy-table-wrap td {
  font-size: .88rem;
}

.policy-table-wrap td strong {
  color: var(--color-signal-ink);
  white-space: nowrap;
}

.policy-table-wrap a,
.method-note a {
  text-decoration-color: var(--color-signal);
  text-underline-offset: 4px;
}

.boundary-title {
  max-width: 740px;
  margin-bottom: 42px;
}

.boundary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-line);
  border: 1px solid var(--color-line);
}

.boundary-grid article {
  min-height: 260px;
  padding: 30px;
  background: var(--color-panel);
}

.boundary-grid article > span {
  color: var(--color-signal);
  font-family: var(--font-mono);
  font-size: .72rem;
}

.boundary-grid h3 {
  margin: 52px 0 14px;
  font-size: 1.2rem;
}

.boundary-grid p {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.7;
}

.verify-section {
  background: var(--color-paper-low);
  color: var(--color-paper-ink);
}

.verify-grid {
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: start;
}

.verify-section ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-line-paper);
}

.verify-section li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  padding: 17px 0;
  border-bottom: 1px solid var(--color-line-paper);
}

.verify-section li span {
  color: var(--color-signal-ink);
  font-family: var(--font-mono);
}

.verify-section li p {
  margin: 0;
}

.verify-section .button {
  grid-column: 2;
  justify-self: start;
}

.related-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 34px;
}

.related-links a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 15px;
  border-right: 1px solid var(--color-line-paper);
  border-bottom: 1px solid var(--color-line-paper);
  text-decoration: none;
}

.related-links a:nth-child(3n) {
  border-right: 0;
}

.related-links a:hover {
  background: var(--color-surface-wash);
}

.method-note {
  max-width: 800px;
  margin-top: 46px;
  padding-top: 22px;
  border-top: 1px solid var(--color-line-paper);
}

.seo-footer {
  border-top: 1px solid var(--color-line);
  background: var(--color-void);
}

.seo-footer p {
  color: var(--color-muted);
  font-size: .78rem;
}

@media (max-width: 900px) {
  .seo-directory li > a {
    grid-template-columns: 42px 1fr;
  }

  .seo-directory dl {
    grid-column: 2;
    max-width: 320px;
  }

  .boundary-grid,
  .related-links,
  .guide-steps {
    grid-template-columns: 1fr;
  }

  .related-links a,
  .related-links a:nth-child(3n) {
    border-right: 0;
  }
}

@media (max-width: 700px) {
  .seo-nav nav a:nth-child(2) {
    display: none;
  }

  .seo-nav nav,
  .seo-footer nav {
    gap: 14px;
  }

  .seo-hero h1 {
    font-size: clamp(2.55rem, 13vw, 4rem);
  }

  .seo-metrics,
  .seo-two-col,
  .policy-intro,
  .verify-grid,
  .guide-layout {
    grid-template-columns: 1fr;
  }

  .seo-metrics div {
    border-right: 0;
    border-bottom: 1px solid var(--color-line);
  }

  .seo-metrics div:last-child {
    border-bottom: 0;
  }

  .seo-directory li > a {
    gap: 14px;
    padding-block: 28px;
  }

  .seo-directory dl {
    grid-column: 1 / -1;
    margin-left: 56px;
  }

  .policy-table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .policy-table-wrap table,
  .policy-table-wrap tbody,
  .policy-table-wrap tr,
  .policy-table-wrap caption {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .policy-table-wrap caption {
    padding: 0 0 14px;
  }

  .policy-table-wrap thead {
    display: none;
  }

  .policy-table-wrap tbody {
    display: grid;
    gap: 12px;
  }

  .policy-table-wrap tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 8px;
    border: 1px solid var(--color-line-paper);
    background: var(--color-surface-wash);
  }

  .policy-table-wrap td {
    display: grid;
    gap: 5px;
    padding: 10px;
    border: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .policy-table-wrap td:nth-child(2),
  .policy-table-wrap td:nth-child(5),
  .policy-table-wrap td:nth-child(6) {
    grid-column: 1 / -1;
  }

  .policy-table-wrap td::before {
    content: attr(data-label);
    color: var(--color-paper-muted);
    font-family: var(--font-mono);
    font-size: .66rem;
    letter-spacing: .06em;
  }

  .policy-table-wrap td strong {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .policy-table-wrap td a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .verify-section .button {
    grid-column: auto;
  }

  .seo-footer-inner {
    align-items: flex-start;
    flex-direction: column;
    padding-block: 24px;
  }

  .seo-footer nav {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .seo-directory li > a {
    transition: none;
  }
}
