/* ============================================================
   Military Benefits Tracker — mbtracker.app
   Design language: pay-ledger precision. Ink, gold, tabular figures.
   Type: one neo-grotesque family across the whole site. Hierarchy comes
   from weight, size, and tracking, never from a second typeface.
   Marketing pages run dark ink; guide articles run light paper.
   ============================================================ */

/* ---------- Font ------------------------------------------------
   Republic (Typewolf SOTD) is set in Neue Haas Unica, a licensed
   Monotype face. It stays first in the stack so a local or Adobe
   Fonts copy wins when present. What we ship is Switzer (Fontshare,
   free for commercial use): the same Swiss neo-grotesque bones,
   slightly narrower than Helvetica, warm the way Unica is. */

@font-face {
  font-family: "Switzer";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/switzer-400.woff2") format("woff2");
}
@font-face {
  font-family: "Switzer";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/switzer-400i.woff2") format("woff2");
}
@font-face {
  font-family: "Switzer";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/switzer-500.woff2") format("woff2");
}
@font-face {
  font-family: "Switzer";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/switzer-500i.woff2") format("woff2");
}
@font-face {
  font-family: "Switzer";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/switzer-600.woff2") format("woff2");
}
@font-face {
  font-family: "Switzer";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/switzer-700.woff2") format("woff2");
}

/* ---------- Tokens ---------- */

:root {
  --ink-0: #0a0d13;
  --ink-1: #0e1219;
  --ink-2: #141926;
  --line-d: rgba(233, 237, 243, 0.12);
  --line-d-strong: rgba(233, 237, 243, 0.25);
  --text-d: #e9edf3;
  --text-d-soft: #98a1b3;

  --paper: #f7f8fa;
  --paper-2: #eef0f4;
  --line-l: #d9dde4;
  --text-l: #171c26;
  --text-l-soft: #4d5666;

  --gold: #c9a35c;
  --gold-hover: #d9b671;
  --gold-deep: #8f6f2d;

  --font-sans: "Neue Haas Unica", "Switzer", "Helvetica Neue", Arial, sans-serif;
  --font-text: var(--font-sans);
  --font-display: var(--font-sans);
  --font-mono: var(--font-sans);

  --wrap: 1200px;
  --r: 4px;
}

/* ---------- Reset & base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.58;
  letter-spacing: -0.011em;
  background: var(--ink-0);
  color: var(--text-d);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.page-light {
  background: var(--ink-0);
  color: var(--text-d);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
}

::selection {
  background: var(--gold);
  color: #0a0d13;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: #0a0d13;
  padding: 0.6rem 1rem;
  z-index: 100;
  font-weight: 600;
}

.skip-link:focus {
  left: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Type scale ---------- */

/* Headings run sentence case with negative tracking. Uppercase is reserved
   for the small tracked labels below, which give the page its instrument
   texture now that there is no second typeface doing that job. */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.03;
}

.fig {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.mono-label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 1.7rem;
  border-radius: var(--r);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn-gold {
  background: var(--gold);
  color: #0a0d13;
}

.btn-gold:hover {
  background: var(--gold-hover);
  color: #0a0d13;
}

.btn-ghost {
  background: transparent;
  color: var(--text-d);
  border-color: var(--line-d-strong);
}

.btn-ghost:hover {
  border-color: var(--text-d);
}

.page-light .btn-ghost {
  color: var(--text-d);
  border-color: var(--line-d-strong);
}

.page-light .btn-ghost:hover {
  border-color: var(--text-d);
}

.btn-sm {
  padding: 0.5rem 1.05rem;
  font-size: 0.92rem;
}

/* Official App Store badge artwork (Apple App Store Marketing Guidelines):
   never recoloured, angled, or animated; kept above the 40px onscreen minimum
   with clear space of at least one-quarter the badge height around it. */
.badge-link {
  display: inline-block;
  line-height: 0;
  margin: 0;
  border-radius: 0;
}

/* Specificity here intentionally beats .article-body img / .article-cta img,
   which would otherwise crop and round the badge artwork. */
.badge-link img.app-store-badge {
  width: 162px;
  height: 48px;
  max-width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: none;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 13, 19, 0.9);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line-d);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  min-height: 62px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--text-d);
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.brand img {
  width: 30px;
  height: 30px;
  border-radius: 7px;
}

.site-nav {
  margin-left: auto;
}

.site-nav ul {
  display: flex;
  gap: 0.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

.site-nav a {
  display: block;
  padding: 0.45rem 0.7rem;
  color: var(--text-d-soft);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
}

.site-nav a:hover {
  color: var(--text-d);
}

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--line-d-strong);
  border-radius: var(--r);
  padding: 0.45rem 0.75rem;
  color: var(--text-d);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}

@media (max-width: 880px) {
  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ink-0);
    border-bottom: 1px solid var(--line-d);
    padding: 0.4rem 24px 1rem;
  }

  .site-nav.open {
    display: block;
  }

  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-nav a {
    padding: 0.75rem 0.3rem;
    font-size: 1.02rem;
    border-bottom: 1px solid var(--line-d);
  }

  .site-header .header-cta {
    display: none;
  }

  /* Wide neo-grotesque caps need to come down a step so the wordmark still
     shares one line with the menu button on a 360px screen. */
  .brand {
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
}

/* ---------- Hero ---------- */

.hero {
  border-bottom: 1px solid var(--line-d);
  overflow: hidden;
}

.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 2rem;
  align-items: end;
}

.hero-copy {
  padding: 4.2rem 0 4.6rem;
}

.hero h1 {
  font-weight: 500;
  font-size: clamp(2.35rem, 4.5vw, 3.7rem);
  line-height: 1.03;
  letter-spacing: -0.034em;
  margin: 0 0 1.3rem;
}

.hero h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--gold);
}

.hero .lede {
  font-size: 1.14rem;
  line-height: 1.55;
  color: var(--text-d-soft);
  max-width: 30rem;
  margin: 0 0 2rem;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  margin: 0 0 0.4rem;
}

.badge-link-hero {
  position: relative;
  z-index: 1;
  padding: 1.4rem 1.5rem 1.4rem 0;
}

.badge-link-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -0.4rem 1.2rem -0.4rem -1.1rem;
  background:
    radial-gradient(ellipse 70% 80% at 38% 50%, rgba(201, 163, 92, 0.42), transparent 72%);
  pointer-events: none;
}

.badge-link-hero img.app-store-badge {
  width: min(300px, 86vw);
  height: auto;
  aspect-ratio: 135 / 40;
}

@media (prefers-reduced-motion: no-preference) {
  .badge-link-hero::before {
    animation: badge-aura 3.6s ease-in-out infinite;
  }

  @keyframes badge-aura {
    0%,
    100% {
      opacity: 0.72;
      transform: scale(1);
    }
    50% {
      opacity: 1;
      transform: scale(1.06);
    }
  }
}

/* What using the app changes: the month you already know, then the
   year on one screen plus credits that expire if nobody dates them.
   Same sample figures as the ledger. Not a savings claim. */
.shift {
  margin-top: 0.2rem;
  max-width: 28rem;
}

.shift-tag {
  margin: 0 0 0.2rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.shift-num {
  margin: 0;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.038em;
  line-height: 0.95;
}

.shift-num span {
  font-size: 0.42em;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--text-d-soft);
  margin-left: 0.2em;
}

.shift-was {
  opacity: 0.4;
}

.shift-was .shift-tag {
  color: var(--text-d-soft);
}

.shift-was .shift-num {
  font-size: 1.55rem;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(233, 237, 243, 0.35);
}

.shift-now {
  position: relative;
  margin-top: 1.05rem;
  padding-top: 1.05rem;
}

.shift-now::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4.5rem;
  height: 1px;
  background: var(--gold);
}

.shift-now .shift-tag {
  color: var(--gold);
}

.shift-num-lg {
  font-size: clamp(2.7rem, 7vw, 3.55rem);
}

.shift-extra {
  margin: 0.55rem 0 0;
  font-size: 1.02rem;
  line-height: 1.35;
  color: var(--text-d);
}

.shift-extra b {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.shift-note {
  margin: 0.85rem 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-d-soft);
}

.shift-note a {
  color: var(--text-d);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  .shift-now {
    animation: shift-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.12s;
  }

  .shift-now::before {
    transform-origin: left center;
    animation: shift-rule 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  @keyframes shift-in {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes shift-rule {
    from {
      transform: scaleX(0);
    }
    to {
      transform: scaleX(1);
    }
  }
}

.hero-shot {
  align-self: end;
  display: flex;
  justify-content: center;
}

.hero-shot img {
  width: min(330px, 80%);
  margin-bottom: -70px;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.55));
}

@media (max-width: 880px) {
  .hero .wrap {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .hero-copy {
    padding: 3rem 0 2.6rem;
  }

  .hero-shot img {
    width: min(280px, 74vw);
    margin-bottom: -56px;
  }
}

/* ---------- Ledger (sample figures) ---------- */

.ledger-section {
  background: var(--ink-1);
  border-bottom: 1px solid var(--line-d);
  padding: 4.6rem 0 4.2rem;
}

.section-h {
  font-weight: 500;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.07;
  letter-spacing: -0.028em;
  margin: 0 0 0.8rem;
}

.section-sub {
  color: var(--text-d-soft);
  max-width: 42rem;
  margin: 0 0 2.6rem;
}

.page-light .section-sub {
  color: var(--text-d-soft);
}

.ledger {
  border-top: 2px solid var(--gold);
  margin: 0;
}

.ledger-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem 2rem;
  align-items: baseline;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line-d);
}

.ledger-row dt {
  margin: 0;
}

.ledger-row dt .what {
  display: block;
  font-weight: 500;
  letter-spacing: -0.014em;
  font-size: 1.05rem;
}

.ledger-row dt .who {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-d-soft);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-top: 0.25rem;
}

.ledger-row dd {
  margin: 0;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.028em;
  font-size: clamp(1.45rem, 3.1vw, 2.15rem);
  color: var(--text-d);
}

.ledger-row dd .unit {
  font-size: 0.6em;
  color: var(--text-d-soft);
  font-weight: 400;
}

.ledger-note {
  margin: 1.3rem 0 0;
  font-size: 0.85rem;
  color: var(--text-d-soft);
  max-width: 46rem;
}

/* ---------- Tools index ---------- */

.tools-section {
  padding: 4.6rem 0;
  border-bottom: 1px solid var(--line-d);
}

.tools-index {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 4rem;
  border-top: 1px solid var(--line-d-strong);
}

.tools-index li {
  break-inside: avoid;
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 0 0.4rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line-d);
}

.tools-index .n {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  padding-top: 0.42rem;
}

.tools-index h3 {
  margin: 0 0 0.25rem;
  font-weight: 500;
  letter-spacing: -0.016em;
  font-size: 1.06rem;
}

.tools-index p {
  margin: 0;
  grid-column: 2;
  color: var(--text-d-soft);
  font-size: 0.94rem;
}

@media (max-width: 760px) {
  .tools-index {
    columns: 1;
  }
}

/* ---------- Feature splits ---------- */

.feature-section {
  padding: 4.6rem 0;
  border-bottom: 1px solid var(--line-d);
}

.feature-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
}

.feature-split.media-left .feature-media {
  order: -1;
}

.feature-split h2 {
  font-weight: 500;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.07;
  letter-spacing: -0.028em;
  margin: 0 0 1rem;
}

.feature-split .body {
  color: var(--text-d-soft);
  margin: 0 0 1.4rem;
  max-width: 32rem;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.8rem;
  border-top: 1px solid var(--line-d-strong);
  max-width: 32rem;
}

.feature-list li {
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--line-d);
  font-size: 0.98rem;
}

.feature-note {
  font-size: 0.83rem;
  color: var(--text-d-soft);
  margin: 1rem 0 0;
  max-width: 32rem;
}

.feature-media {
  display: flex;
  justify-content: center;
}

.feature-media img {
  width: min(300px, 74vw);
  filter: drop-shadow(0 26px 44px rgba(0, 0, 0, 0.5));
}

.text-link {
  color: var(--gold);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

.text-link:hover {
  color: var(--gold-hover);
}

@media (max-width: 880px) {
  .feature-split {
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }

  .feature-split.media-left .feature-media {
    order: 0;
  }
}

/* ---------- Stat pair (VA + TSP) ---------- */

.statpair-section {
  background: var(--ink-1);
  border-bottom: 1px solid var(--line-d);
  padding: 4.6rem 0;
}

.stat-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 2px solid var(--gold);
}

.stat-cell {
  padding: 2.2rem 2.6rem 2.4rem 0;
}

.stat-cell + .stat-cell {
  border-left: 1px solid var(--line-d);
  padding-left: 2.6rem;
  padding-right: 0;
}

.stat-cell .big {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.034em;
  font-size: clamp(2.2rem, 4.8vw, 3.4rem);
  line-height: 1.1;
  color: var(--text-d);
  display: block;
}

.stat-cell .big .dim {
  color: var(--text-d-soft);
  font-weight: 400;
}

.stat-cell h3 {
  font-weight: 500;
  letter-spacing: -0.018em;
  font-size: 1.15rem;
  margin: 0.7rem 0 0.5rem;
}

.stat-cell p {
  color: var(--text-d-soft);
  font-size: 0.96rem;
  margin: 0 0 1.1rem;
  max-width: 26rem;
}

@media (max-width: 760px) {
  .stat-pair {
    grid-template-columns: 1fr;
  }

  .stat-cell {
    padding: 2rem 0;
  }

  .stat-cell + .stat-cell {
    border-left: 0;
    border-top: 1px solid var(--line-d);
    padding-left: 0;
  }
}

/* ---------- Map band ---------- */

.map-band {
  border-bottom: 1px solid var(--line-d);
  padding: 4.6rem 0 0;
  text-align: center;
  overflow: hidden;
}

.map-band .section-sub {
  margin-left: auto;
  margin-right: auto;
}

.map-band .band-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 2.6rem;
  align-items: center;
  text-align: left;
}

.map-band .band-device img {
  width: min(300px, 78vw);
  margin-bottom: -80px;
  filter: drop-shadow(0 26px 44px rgba(0, 0, 0, 0.5));
}

.band-facts {
  list-style: none;
  margin: 0;
  padding: 0;
}

.band-facts li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line-d);
  font-size: 0.97rem;
}

.band-facts .mono-label {
  color: var(--gold);
  display: block;
  margin-bottom: 0.1rem;
}

@media (max-width: 880px) {
  .map-band .band-cols {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }

  .map-band .band-device {
    order: 1;
    display: flex;
    justify-content: center;
  }

  .map-band .band-device img {
    margin-bottom: -60px;
  }
}

/* ---------- Compare (Free vs Pro) ---------- */

.pricing-section {
  background: var(--ink-1);
  border-bottom: 1px solid var(--line-d);
  padding: 4.6rem 0;
}

.compare-wrap {
  overflow-x: auto;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 2px solid var(--gold);
}

.compare-table th,
.compare-table td {
  padding: 0.8rem 1rem 0.8rem 0;
  text-align: left;
  border-bottom: 1px solid var(--line-d);
  font-size: 0.97rem;
}

.compare-table thead th {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.76rem;
  color: var(--text-d);
}

.compare-table th:nth-child(2),
.compare-table th:nth-child(3),
.compare-table td:nth-child(2),
.compare-table td:nth-child(3) {
  text-align: center;
  width: 5.5rem;
  font-variant-numeric: tabular-nums;
}

.compare-table .yes {
  color: var(--text-d);
  font-weight: 600;
}

.compare-table .no {
  color: var(--text-d-soft);
}

.pricing-note {
  font-size: 0.84rem;
  color: var(--text-d-soft);
  margin: 1.4rem 0 0;
  max-width: 52rem;
}

.pricing-note a {
  color: var(--gold);
}

/* ---------- Guides index (TOC style) ---------- */

.guides-section {
  padding: 4.6rem 0;
  border-bottom: 1px solid var(--line-d);
}

.toc-guides {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 4rem;
  border-top: 1px solid var(--line-d-strong);
}

.toc-guides a {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: baseline;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--line-d);
  text-decoration: none;
  color: var(--text-d);
}

.toc-guides a .cat {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-d-soft);
}

.toc-guides a .t {
  font-weight: 500;
  letter-spacing: -0.016em;
  font-size: 1.02rem;
  line-height: 1.22;
}

.toc-guides a .arrow {
  color: var(--gold);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.toc-guides a:hover .t {
  color: var(--gold);
}

.toc-guides a:hover .arrow {
  opacity: 1;
}

@media (max-width: 880px) {
  .toc-guides {
    grid-template-columns: 1fr;
  }

  .toc-guides a {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .toc-guides a .cat {
    grid-column: 1 / -1;
  }
}

/* ---------- FAQ ---------- */

.faq-section {
  padding: 4.6rem 0;
  border-bottom: 1px solid var(--line-d);
}

.faq-list {
  max-width: 52rem;
  border-top: 1px solid var(--line-d-strong);
}

.faq-list details {
  border-bottom: 1px solid var(--line-d);
}

.faq-list summary {
  padding: 1.05rem 2.2rem 1.05rem 0;
  font-weight: 500;
  letter-spacing: -0.016em;
  font-size: 1.04rem;
  cursor: pointer;
  list-style: none;
  position: relative;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 0.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--gold);
}

.faq-list details[open] summary::after {
  content: "-";
}

.faq-list .faq-body {
  padding: 0 0 1.2rem;
  color: var(--text-d-soft);
  font-size: 0.97rem;
  max-width: 46rem;
}

.faq-list .faq-body p {
  margin-top: 0;
}

.faq-list .faq-body a {
  color: var(--gold);
}

/* ---------- Final CTA ---------- */

.final-cta {
  text-align: center;
  padding: 5.5rem 0;
  border-bottom: 1px solid var(--line-d);
}

.final-cta h2 {
  font-weight: 500;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  line-height: 1.03;
  letter-spacing: -0.032em;
  margin: 0 0 1rem;
}

.final-cta h2 em {
  font-style: normal;
  color: var(--gold);
}

.final-cta p {
  color: var(--text-d-soft);
  max-width: 34rem;
  margin: 0 auto 2rem;
}

/* Light pages close with the same ink block the footer uses. */
.page-light .final-cta {
  background: var(--ink-0);
  color: var(--text-d);
  border-bottom: 1px solid var(--line-d);
}

.page-light .final-cta p {
  color: var(--text-d-soft);
}

.final-cta .app-badge-icon {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  margin: 0 auto 1.3rem;
}

/* ---------- Disclaimer band ---------- */

.disclaimer-band {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line-d);
}

.disclaimer-band p {
  margin: 0.25rem 0;
  max-width: 62rem;
  font-size: 0.8rem;
  color: var(--text-d-soft);
}

/* ---------- Footer ---------- */

.site-footer {
  padding: 3.5rem 0 2.5rem;
  font-size: 0.92rem;
  color: var(--text-d-soft);
}

.page-light .site-footer {
  background: var(--ink-0);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.site-footer h3 {
  color: var(--text-d);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  margin: 0 0 0.9rem;
}

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer li {
  margin-bottom: 0.5rem;
}

.site-footer a {
  color: var(--text-d-soft);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--text-d);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text-d);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.95rem;
  margin-bottom: 0.9rem;
}

.footer-brand img {
  width: 30px;
  height: 30px;
  border-radius: 7px;
}

.footer-legal {
  border-top: 1px solid var(--line-d);
  padding-top: 1.5rem;
  font-size: 0.78rem;
  color: #78808f;
}

.footer-legal p {
  margin: 0.35rem 0;
  max-width: 64rem;
}

@media (max-width: 880px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Light pages: guides hub + articles
   ============================================================ */

.page-light a {
  color: var(--text-d);
}

.hub-header {
  padding: 3.4rem 0 2.8rem;
  border-bottom: 1px solid var(--line-d);
}

.hub-header h1 {
  font-weight: 500;
  font-size: clamp(2.1rem, 4.4vw, 3.2rem);
  line-height: 1.04;
  letter-spacing: -0.032em;
  margin: 0.8rem 0 0.7rem;
  color: var(--text-d);
}

.hub-header p {
  color: var(--text-d-soft);
  max-width: 44rem;
  margin: 0;
}

.breadcrumbs {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-d-soft);
  margin: 1.6rem 0 0;
}

.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0;
  margin: 0;
}

.breadcrumbs li + li::before {
  content: "/";
  margin-right: 0.4rem;
  color: var(--text-d-soft);
}

.breadcrumbs a {
  color: var(--text-d-soft);
}

.page-light .section {
  padding: 3.6rem 0;
}

.page-light .section h2 {
  font-weight: 500;
  font-size: clamp(1.55rem, 2.8vw, 2.1rem);
  line-height: 1.08;
  letter-spacing: -0.026em;
  margin: 0 0 1.6rem;
  color: var(--text-d);
}

.page-light .section-alt {
  background: var(--ink-1);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

@media (max-width: 960px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .grid-3 {
    grid-template-columns: 1fr;
  }
}

.guide-card {
  display: flex;
  flex-direction: column;
  background: var(--ink-1);
  border: 1px solid var(--line-d);
  border-radius: var(--r);
  padding: 1.25rem 1.3rem;
  text-decoration: none;
  color: var(--text-d);
  transition: border-color 0.15s ease;
}

.guide-card:hover {
  border-color: var(--gold-deep);
  color: var(--text-d);
}

.guide-card .cat {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 0.5rem;
}

.guide-card h3 {
  margin: 0 0 0.4rem;
  font-weight: 500;
  letter-spacing: -0.018em;
  font-size: 1.06rem;
  line-height: 1.2;
}

.guide-card p {
  margin: 0 0 0.9rem;
  font-size: 0.92rem;
  color: var(--text-d-soft);
  flex-grow: 1;
}

.guide-card .more {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-d);
}

/* ---------- Article pages ---------- */

.article-header {
  padding: 0.5rem 0 2rem;
}

.article-header h1 {
  font-weight: 500;
  font-size: clamp(1.95rem, 3.9vw, 2.85rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 0.9rem 0 0.7rem;
  color: var(--text-d);
}

.article-meta {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-d-soft);
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 3rem;
  padding-bottom: 3.5rem;
}

.article-body {
  max-width: 44rem;
}

.article-body h2 {
  font-weight: 500;
  font-size: 1.45rem;
  line-height: 1.16;
  letter-spacing: -0.024em;
  margin: 2.4rem 0 0.8rem;
  color: var(--text-d);
}

.article-body h3 {
  font-weight: 500;
  letter-spacing: -0.014em;
  font-size: 1.09rem;
  margin: 1.8rem 0 0.5rem;
  color: var(--text-d);
}

.article-body p,
.article-body li {
  color: var(--text-d-soft);
}

.article-body img {
  margin: 1.8rem auto;
  width: min(270px, 74%);
  filter: drop-shadow(0 18px 32px rgba(20, 25, 38, 0.22));
}

.article-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  margin: 1.2rem 0;
  font-variant-numeric: tabular-nums;
}

.article-body th,
.article-body td {
  border-bottom: 1px solid var(--line-d);
  padding: 0.55rem 0.8rem 0.55rem 0;
  text-align: left;
}

.article-body thead th {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-d-soft);
  border-bottom: 2px solid var(--gold);
}

.callout {
  border-left: 3px solid var(--gold);
  background: var(--ink-1);
  padding: 1rem 1.2rem;
  margin: 1.4rem 0;
  font-size: 0.94rem;
}

.callout.green {
  border-left-color: var(--gold);
}

.callout p {
  margin: 0.3rem 0;
}

.article-cta {
  background: var(--ink-0);
  color: var(--text-d);
  padding: 1.7rem 1.8rem;
  margin: 2.4rem 0;
  display: flex;
  gap: 1.2rem;
  align-items: center;
  flex-wrap: wrap;
  border-radius: var(--r);
}

.article-cta img {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  filter: none;
  margin: 0;
}

.article-cta .cta-copy {
  flex: 1 1 240px;
}

.article-cta h3 {
  color: var(--text-d);
  font-weight: 500;
  letter-spacing: -0.018em;
  font-size: 1.12rem;
  margin: 0 0 0.3rem;
}

.article-cta p {
  color: var(--text-d-soft);
  margin: 0;
  font-size: 0.9rem;
}

.article-aside {
  font-size: 0.92rem;
}

.aside-box {
  border: 1px solid var(--line-d);
  border-radius: var(--r);
  padding: 1.2rem 1.3rem;
  margin-bottom: 1.4rem;
  background: var(--ink-1);
  position: sticky;
  top: 84px;
}

.aside-box h2 {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  color: var(--text-d-soft);
  margin: 0 0 0.8rem;
}

.aside-box ol,
.aside-box ul {
  padding-left: 1.1rem;
  margin: 0;
}

.aside-box li {
  margin-bottom: 0.45rem;
}

.sources-list {
  font-size: 0.9rem;
  color: var(--text-d-soft);
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.2rem;
}

@media (max-width: 960px) {
  .article-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .article-aside {
    order: -1;
  }

  .aside-box {
    position: static;
  }

  .related-grid {
    grid-template-columns: 1fr;
  }
}

.article-disclaimer {
  font-size: 0.82rem;
  color: var(--text-d-soft);
  border-top: 1px solid var(--line-d);
  margin-top: 2.6rem;
  padding-top: 1.2rem;
}

/* ---------- Reveal motion ---------- */

/* Hidden state only applies once JS has tagged the root, so content
   is never invisible without JS. */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  html.js .reveal.in {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}