/* ── PLUM DESIGN SYSTEM — TOKENS ─────────────────────────────────────
   Newsreader (serif display) + Figtree (humanist sans) — see note below
   Tokens: plum-design.md
   ──────────────────────────────────────────────────────────────────── */

/* FONTS

   Display serif: GT Alpina (Grilli Type), self-hosted from the licensed
   webfont builds. Only Light (300) and Light Italic (300) were supplied as
   woff2/woff, so those are the only two faces served. Regular (400) and Bold
   (700) arrived as desktop ttf/otf only and are deliberately NOT used: the
   desktop licence does not cover webfont delivery. The display rules use 300
   as a result — see the note in the README about restoring 400.

   Body sans: Figtree (SIL OFL 1.1), standing in for Passenger Sans, which is
   commercial and has no webfont licence confirmed. Variable, so one file per
   subset covers 400-700.

   latin-ext is required for Figtree because the page uses the rupee sign
   (U+20B9) throughout. GT Alpina ships a full 1281-glyph charset unsubsetted.
   Nothing is loaded from a third-party host.
   ──────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'GT Alpina';
  /* supplied as woff only; woff2 would save ~19KB if the foundry has it */
  src: url('fonts/GT-Alpina-Standard-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GT Alpina';
  src: url('fonts/GT-Alpina-Standard-Light.woff2') format('woff2'),
       url('fonts/GT-Alpina-Standard-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GT Alpina';
  src: url('fonts/GT-Alpina-Standard-Light-Italic.woff2') format('woff2'),
       url('fonts/GT-Alpina-Standard-Light-Italic.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
/* Passenger Sans — brand sans, licensed webfont (woff) builds.

   The web kit supplies Regular, Bold and Black. It does NOT include Medium,
   so the eight rules at font-weight: 500 resolve up to Bold (600) by CSS
   weight matching. The kit's "Bold" is usWeightClass 600, i.e. it fills the
   Semibold slot the design was drawn against. */
@font-face {
  font-family: 'Passenger Sans';
  src: url('fonts/PassengerSans-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Passenger Sans';
  src: url('fonts/PassengerSans-Bold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Passenger Sans';
  src: url('fonts/PassengerSans-Black.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Rupee sign. No Passenger Sans file supplied - web or desktop, any weight -
   contains U+20B9, and the page uses it 103 times. Rather than let all of
   them fall back to whatever system font the visitor happens to have, this
   face pins U+20B9 to Figtree. It is listed FIRST in --font-sans: a face is
   only eligible for codepoints inside its unicode-range, so every other
   character falls straight through to Passenger Sans. Figtree is variable, so
   the rupee sign tracks the surrounding weight instead of being stuck at one.

   If a Passenger Sans build with U+20B9 ever arrives, delete this block and
   drop 'Plum Rupee' from the token below. */
@font-face {
  font-family: 'Plum Rupee';
  src: url('fonts/Figtree-Variable-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+20B9;
}

/* Figtree also stays as the fallback behind Passenger Sans. */
@font-face {
  font-family: 'Figtree';
  src: url('fonts/Figtree-Variable-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── TOKENS ─────────────────────────────────────────────────────────── */
:root {
  /* Surfaces.
     --cream-deep was #F5EEE0, 10.5% darker than the page cream. Across its 15
     uses — every table's zebra striping and first column, plus card hovers —
     that much separation read as beige panels rather than a quiet tint, and
     flattened the whole page. Now 5.3% down: still a clearly trackable stripe,
     roughly half the weight. --cream-warm (#EDE3D0, one use, .stat-box) was
     duller still and moved by the same proportion. Text contrast improves
     slightly on both — ink goes 14.24:1 to 15.02:1 on the striping. */
  --cream:          #FFFAF2;
  --cream-deep:     #FAF4EA;   /* table striping, first columns, card hovers */
  --cream-warm:     #F6EFE2;   /* .stat-box only */

  /* Brand red */
  --plum-red:       #FF4052;
  --plum-red-deep:  #D9283A;
  --plum-red-press: #B8202F;

  /* Severity scale */
  --sev-blush:      #FFE7EA;
  --sev-pink:       #FFD9DC;
  --sev-coral:      #FF9FA8;

  /* Foreground */
  --fg-1:           #3A0E2B;
  --fg-2:           #6B3A58;
  --fg-muted:       #9B7A8A;
  --fg-on-red:      #FFFAF2;

  /* Rules */
  --line-lav:       #C7B1C0;
  --line-lav-2:     #DDD0D8;

  /* Legacy aliases used throughout content (map to system) */
  --ink:            var(--fg-1);
  --ink-mid:        var(--fg-2);
  --ink-muted:      var(--fg-muted);
  --surface:        var(--cream);
  --white:          #FFFAF2;
  --rule:           var(--line-lav-2);

  /* Accent colours — mapped to severity scale for data components */
  --accent-teal:         #0F6E56;
  --accent-teal-light:   #E6F5EF;
  --accent-teal-mid:     #1D9E75;
  --accent-coral:        var(--plum-red);
  --accent-coral-light:  var(--sev-blush);
  --accent-blue:         #185FA5;
  --accent-blue-light:   #E6F1FB;
  --accent-amber:        #BA7517;
  --accent-amber-light:  #FAEEDA;
  --accent-purple:       #534AB7;
  --accent-purple-light: #EEEDFE;
  --mandatory-border:    var(--plum-red);
  --recommended-bg:      #E6F5EF;

  /* Typography */
  --font-display:   'GT Alpina', Georgia, serif;
  --font-sans:      'Plum Rupee', 'Passenger Sans', 'Figtree', system-ui, sans-serif;

  /* Shadows */
  --shadow-cta:     0 4px 24px rgba(58,14,43,.10);
  --shadow-hover:   0 8px 32px rgba(58,14,43,.13);

  /* Radius */
  --r-card:         7px;
}

/* ── RESET ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: 17.5px;
  line-height: 1.75;
  color: var(--fg-1);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

/* ── NAV ─────────────────────────────────────────────────────────────── */
/* The guide's own mini-header (.nav-top / .nav-logo / .nav-cta) was replaced
   by the site navbar lifted from plumhq.com, so its rules are gone. They had
   to go rather than merely stop matching: .nav-logo is the one class name the
   two share, and `.nav-logo svg { color: var(--plum-red) }` was repainting
   Webflow's logo red-on-red against the masthead, making it invisible. */

/* ── SECTION NAV (sticky TOC) ────────────────────────────────────────── */
/* ── LAYOUT: sticky TOC rail + reading column ────────────────────────── */
.layout {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
  align-items: start;
}

.toc-bar {
  position: sticky;
  top: 0;
  align-self: start;
  /* min == max so the dividing rule reads as a full-height column edge
     rather than stopping wherever the list happens to end */
  min-height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 40px 0 32px;
  border-right: 1px solid var(--line-lav-2);
}
.toc-inner { padding-right: 20px; }

.toc-heading {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 12px;
  padding-left: 13px;
}

.toc-bar ul { list-style: none; }
.toc-bar li { margin: 0; }

.toc-bar a {
  display: block;
  padding: 7px 12px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  text-decoration: none;
  color: var(--fg-2);
  border-left: 2px solid transparent;
  transition: color .15s, border-color .15s, background-color .15s;
}
.toc-bar a:hover {
  color: var(--fg-1);
  border-left-color: var(--line-lav);
  background: rgba(58, 14, 43, .035);
}
/* current section, set by the observer in index.astro */
.toc-bar a[aria-current="true"] {
  color: var(--plum-red-deep);
  border-left-color: var(--plum-red);
  font-weight: 600;
}

/* Nested levels. Each step indents and steps down in size/weight, so depth
   reads at a glance without needing bullets or connector lines. The border-left
   stays on the link (not the list) so the active marker lines up across levels. */
.toc-bar ul ul { margin: 2px 0 4px; }
.toc-bar ul ul a {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 24px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--fg-muted);
}
.toc-bar ul ul ul a {
  padding-left: 36px;
  font-size: 12px;
}
.toc-bar ul ul a:hover { color: var(--fg-1); }

/* A sub-entry being read also marks its parents, so the reader can see which
   top-level section they are inside without hunting. */
.toc-bar a[data-ancestor] {
  color: var(--fg-1);
  border-left-color: var(--line-lav);
}

/* anchor jumps must clear the sticky rail */
section[id],
.toc-bar ~ .page-body h2[id],
.toc-bar ~ .page-body h3[id] { scroll-margin-top: 24px; }

/* ── HERO — full-bleed red ───────────────────────────────────────────── */
.masthead {
  background: var(--plum-red);
  /* The imported navbar is position:fixed, so the masthead has to reserve its
     height or the nav sits on top of the first line of content. The old flat
     clamp() resolved to 48px on a 420px viewport against a ~50px nav, which is
     what put the logo over the eyebrow — and over the h1 once the eyebrow was
     removed. --chrome-nav-h is measured at runtime by the nav script (76px
     until it reports), the same value the sticky TOC rail clears itself by. */
  padding: calc(var(--chrome-nav-h) + clamp(24px,4vw,40px))
           clamp(20px,5vw,64px)
           clamp(48px,6vw,72px);
}
.masthead-inner { max-width: 820px; margin: 0 auto; }

.masthead h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 6vw, 62px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--fg-on-red);
  margin-bottom: 20px;
}
.masthead h1 em {
  font-style: italic;
  font-weight: 300;
}

.masthead-sub {
  font-family: var(--font-sans);
  font-size: clamp(14px,1.8vw,16px);
  line-height: 1.65;
  color: var(--fg-on-red);
  opacity: .72;
  max-width: 560px;
  margin-bottom: 32px;
}

.masthead-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,250,242,.2);
}
.masthead-meta span {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--fg-on-red);
  opacity: .55;
  background: rgba(255,250,242,.08);
  border: 0.5px solid rgba(255,250,242,.2);
  padding: 4px 10px;
}
/* Remove old pseudo-element dot */
.masthead-meta span::before { display: none; }

/* ── ARROW-TIPPED RULE ───────────────────────────────────────────────── */
.rule-section {
  display: flex;
  align-items: center;
  margin: 64px 0 0;
  user-select: none;
}
.rule-line { flex: 1; height: 1px; background: var(--plum-red); }
.rule-arr-l { width:0; height:0; border-top:4px solid transparent; border-bottom:4px solid transparent; border-right:6px solid var(--plum-red); }
.rule-arr-r { width:0; height:0; border-top:4px solid transparent; border-bottom:4px solid transparent; border-left:6px solid var(--plum-red); }

/* ── LAYOUT ──────────────────────────────────────────────────────────── */
.page-body {
  min-width: 0;
  padding: 48px 0 80px;
}

/* Prose measure. Body copy is capped near 70 characters for comfortable
   reading, while tables, card grids and callouts keep the full column. */
.page-body p:not([class]),
.section-intro,
.callout > div,
.outside-item-value,
.intro-card-value { max-width: 68ch; }

/* ── SECTION HEADER ──────────────────────────────────────────────────── */
section { margin-bottom: 0; }

.section-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--plum-red);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-label span { display: none; } /* remove old teal line */

section { padding-top: 48px; }

h2 {
  text-wrap: balance;
  font-family: var(--font-display);
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: 1.15;
  color: var(--fg-1);
  margin-bottom: 10px;
}

.section-intro {
  text-wrap: pretty;
  font-family: var(--font-sans);
  font-size: 17.5px;
  line-height: 1.78;
  color: var(--fg-2);
  max-width: 620px;
  margin-bottom: 28px;
}

/* ── INTRO STRIP CARDS ───────────────────────────────────────────────── */
.intro-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-lav);
  border: 1px solid var(--line-lav);
  border-radius: var(--r-card);
  overflow: hidden;
  margin-bottom: 40px;
}
.intro-card {
  background: var(--cream);
  padding: 16px 18px;
  transition: background .15s;
}
.intro-card:hover { background: var(--cream-deep); }
.intro-card-label {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 6px;
}
.intro-card-value {
  font-family: var(--font-sans);
  font-size: 15.5px;
  font-weight: 500;
  color: var(--fg-1);
  line-height: 1.45;
}

/* ── LEGEND ──────────────────────────────────────────────────────────── */
.legend { display: flex; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.legend-item {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-sans);
  font-size: 13.5px; color: var(--fg-muted);
}
.legend-dot { width: 8px; height: 8px; border-radius: 2px; }

/* ── CALLOUTS ────────────────────────────────────────────────────────── */
.callout {
  border-radius: var(--r-card);
  padding: 16px 20px;
  margin: 20px 0;
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.7;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.callout-icon { font-size: 15px; flex-shrink: 0; margin-top: 2px; }
.callout strong { font-weight: 600; }

.callout-teal  { background: var(--accent-teal-light); border-left: 2px solid var(--accent-teal); color: #084F3C; }
.callout-amber { background: var(--accent-amber-light); border-left: 2px solid var(--accent-amber); color: #633806; }
.callout-coral { background: var(--sev-blush); border-left: 2px solid var(--plum-red); color: #8B1C26; }
.callout-blue  { background: var(--accent-blue-light); border-left: 2px solid var(--accent-blue); color: #0D3A6A; }

/* ── POLICY CARDS ────────────────────────────────────────────────────── */
.policy-card {
  background: var(--cream);
  border: 1px solid var(--line-lav);
  border-radius: var(--r-card);
  margin-bottom: 12px;
  overflow: hidden;
  transition: box-shadow .2s;
}
.policy-card:hover { box-shadow: var(--shadow-hover); }

.policy-card-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px 14px;
}
.policy-icon {
  width: 36px; height: 36px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0; /* hide emoji */
  flex-shrink: 0;
  border: 1px solid var(--line-lav);
}
.policy-icon.teal   { background: var(--accent-teal-light); }
.policy-icon.coral  { background: var(--sev-blush); }
.policy-icon.blue   { background: var(--accent-blue-light); }
.policy-icon.amber  { background: var(--accent-amber-light); }
.policy-icon.purple { background: var(--accent-purple-light); }

/* Replace emoji with coloured dot */
.policy-icon::after {
  content: '';
  display: block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--plum-red);
}

.policy-title-block { flex: 1; }
.policy-name {
  font-family: var(--font-display);
  font-size: 20.5px;
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--fg-1);
  margin-bottom: 4px;
}
.policy-tagline {
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--fg-muted);
}

.policy-badges { display: flex; gap: 5px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }

/* Severity chips — uppercase sans, 0.5px red border, no rounding */
.badge {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 0;
}
.badge-mandatory   { background: var(--sev-blush);  color: var(--plum-red);   border: 0.5px solid var(--plum-red); }
.badge-recommended { background: var(--accent-teal-light); color: var(--accent-teal); border: 0.5px solid var(--accent-teal); }
.badge-sector      { background: var(--accent-purple-light); color: var(--accent-purple); border: 0.5px solid var(--accent-purple); }
.badge-gc          { background: var(--accent-blue-light); color: var(--accent-blue); border: 0.5px solid var(--accent-blue); }

.policy-body {
  padding: 0 20px 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.policy-field label {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--fg-muted); margin-bottom: 5px;
}
.policy-field p {
  font-family: var(--font-sans);
  font-size: 15px; color: var(--fg-1); line-height: 1.6;
}
.policy-field.full { grid-column: 1 / -1; }
.policy-divider { margin: 0 20px 14px; height: 0.5px; background: var(--line-lav); }

.trigger-tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  background: var(--cream-deep);
  border: 0.5px solid var(--line-lav);
  padding: 2px 8px;
  margin: 2px 2px 2px 0;
  color: var(--fg-2);
}

/* ── TABLES ──────────────────────────────────────────────────────────── */
/* shared table base */
.statutory-table,
.data-table,
.bench-table,
.city-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 13.5px;
  background: var(--cream);
  border: 1px solid var(--line-lav);
  border-radius: var(--r-card);
  overflow: hidden;
}

/* dark aubergine headers */
.statutory-table thead th,
.city-table thead th {
  background: var(--fg-1);
  color: rgba(255,250,242,.72);
  padding: 10px 13px;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.statutory-table td,
.city-table td {
  padding: 12px 14px;
  border-bottom: 0.5px solid var(--line-lav-2);
  color: var(--fg-1);
  vertical-align: top;
  line-height: 1.6;
  font-size: 14.5px;
}
.statutory-table tr:last-child td,
.city-table tr:last-child td { border-bottom: none; }
.statutory-table tr:nth-child(even) td { background: var(--cream-deep); }
.city-table tr:nth-child(even) td { background: var(--cream-deep); }

.dot-mandatory   { color: var(--plum-red); font-weight: 600; }
.dot-recommended { color: var(--accent-teal); font-weight: 600; }

/* data-table (global benchmark) */
.data-table th {
  padding: 10px 13px;
  text-align: left;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  border-bottom: 0.5px solid var(--line-lav);
}
.data-table th.col-dim   { background: var(--cream-deep); color: var(--fg-muted); }
.data-table th.col-india { background: var(--fg-1); color: rgba(255,250,242,.72); }
.data-table th.col-global{ background: var(--accent-teal); color: #fff; }
.data-table td {
  padding: 12px 14px;
  border-bottom: 0.5px solid var(--line-lav-2);
  color: var(--fg-1); vertical-align: top; line-height: 1.6; font-size: 14.5px;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table td.col-india  { background: var(--cream-deep); }
.data-table td.col-global { background: var(--accent-teal-light); font-weight: 500; color: #084F3C; }

/* bench-table */
.bench-table th {
  padding: 11px 13px;
  text-align: left;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 0.5px solid var(--line-lav);
}
.bench-table th:first-child { background: var(--cream-deep); color: var(--fg-muted); width: 22%; }
.bench-table th.b1 { background: #EBF4FF; color: var(--accent-blue); }
.bench-table th.b2 { background: var(--accent-teal-light); color: var(--accent-teal); }
.bench-table th.b3 { background: var(--accent-amber-light); color: var(--accent-amber); }
.bench-table th.b4 { background: var(--accent-purple-light); color: var(--accent-purple); }
.bench-table td {
  padding: 11px 13px;
  border-bottom: 0.5px solid var(--line-lav-2);
  color: var(--fg-1); vertical-align: top; line-height: 1.6;
  font-size: 14.5px;
}
.bench-table tr:last-child td { border-bottom: none; }
.bench-table td:first-child { font-weight: 600; font-size: 13.5px; color: var(--fg-2); background: var(--cream-deep); }

/* city bar */
.city-bar {
  display: inline-block; height: 6px;
  background: var(--plum-red); opacity: .55;
  border-radius: 1px; vertical-align: middle; margin-right: 6px;
}

/* ── CLAIMS CARDS ────────────────────────────────────────────────────── */
.claims-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px;
}
.claims-card {
  background: var(--cream);
  border: 1px solid var(--line-lav);
  border-radius: var(--r-card);
  padding: 16px 18px;
}
.claims-card h4 {
  font-family: var(--font-sans);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-muted); margin-bottom: 12px;
}
.claims-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0; border-bottom: 0.5px solid var(--line-lav-2); font-size: 14.5px;
}
.claims-row:last-child { border-bottom: none; }
.claims-label { flex: 1; color: var(--fg-2); font-family: var(--font-sans); }
.claims-pct { font-weight: 600; font-size: 13.5px; color: var(--fg-1); min-width: 34px; text-align: right; }
.claims-amt { font-size: 11px; color: var(--fg-muted); min-width: 68px; text-align: right; }
.claims-bar-wrap { width: 56px; height: 5px; background: var(--line-lav-2); flex-shrink: 0; }
.claims-bar-fill { height: 100%; background: var(--plum-red); opacity: .65; }

/* ── STAT ROW ────────────────────────────────────────────────────────── */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px;
  background: var(--line-lav);
  border: 1px solid var(--line-lav);
  border-radius: var(--r-card);
  overflow: hidden;
  margin: 20px 0;
}
.stat-box {
  background: var(--cream-warm);
  padding: 18px 14px;
  text-align: center;
}
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(26px,3.5vw,34px);
  font-weight: 400;
  letter-spacing: -.03em;
  color: var(--fg-1);
  line-height: 1;
  margin-bottom: 6px;
}
.stat-label {
  font-family: var(--font-sans);
  font-size: 13px; color: var(--fg-muted); line-height: 1.5;
}

/* ── CHECKLIST GRID ──────────────────────────────────────────────────── */
.checklist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--line-lav);
  border: 1px solid var(--line-lav);
  border-radius: var(--r-card);
  overflow: hidden;
}
.checklist-block {
  background: var(--cream);
  padding: 18px 20px;
}
.checklist-block h3 {
  font-family: var(--font-sans);
  font-size: 12.5px; font-weight: 600;
  color: var(--fg-1); margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.phase-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.phase-dot.p1 { background: var(--plum-red); }
.phase-dot.p2 { background: var(--accent-teal); }
.phase-dot.p3 { background: var(--accent-blue); }
.checklist-block ul { list-style: none; }
.checklist-block li {
  font-family: var(--font-sans);
  font-size: 14.5px; color: var(--fg-2);
  padding: 7px 0; border-bottom: 0.5px solid var(--line-lav-2);
  display: flex; align-items: baseline; gap: 7px; line-height: 1.55;
}
.checklist-block li:last-child { border-bottom: none; }
.checklist-block li::before {
  content: '—';
  font-size: 10px; color: var(--plum-red); flex-shrink: 0;
}

/* ── PULL QUOTE ──────────────────────────────────────────────────────── */
.pull-quote {
  border-left: 2px solid var(--plum-red);
  padding: 16px 20px;
  margin: 28px 0;
  font-family: var(--font-display);
  font-size: clamp(19px, 2.6vw, 26px);
  font-style: italic;
  font-weight: 300;
  color: var(--fg-1);
  line-height: 1.45;
  background: var(--cream-deep);
  border-radius: 0 var(--r-card) var(--r-card) 0;
}

/* ── PERSONA STRIP ───────────────────────────────────────────────────── */
.persona-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--line-lav);
  border: 1px solid var(--line-lav);
  border-radius: var(--r-card);
  overflow: hidden;
  margin: 24px 0;
}
.persona-card {
  background: var(--cream);
  padding: 18px 18px 16px;
}
.persona-card::before { display: none; }
.persona-emoji { display: none; } /* no emoji per design spec */
.persona-name {
  font-family: var(--font-display);
  font-size: 16.5px; font-weight: 400;
  color: var(--fg-1); margin-bottom: 2px;
}
.persona-role {
  font-family: var(--font-sans);
  font-size: 12.5px; color: var(--fg-muted); margin-bottom: 12px;
  font-weight: 500; letter-spacing: .03em;
}
.persona-needs { list-style: none; }
.persona-needs li {
  font-family: var(--font-sans);
  font-size: 14.5px; color: var(--fg-2);
  padding: 6px 0; border-bottom: 0.5px solid var(--line-lav-2);
  display: flex; gap: 6px; align-items: baseline; line-height: 1.55;
}
.persona-needs li:last-child { border-bottom: none; }
.persona-needs li::before { content: '—'; font-size: 10px; color: var(--plum-red); flex-shrink: 0; }

/* ── BENEFIT DIMENSION CARDS ─────────────────────────────────────────── */
.benefit-dimension {
  background: var(--cream);
  border: 1px solid var(--line-lav);
  border-radius: var(--r-card);
  margin-bottom: 12px;
  overflow: hidden;
  transition: box-shadow .2s;
}
.benefit-dimension:hover { box-shadow: var(--shadow-hover); }

.bd-head {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 20px 14px;
}
.bd-icon {
  width: 36px; height: 36px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0; /* suppress emoji */
  border: 1px solid var(--line-lav);
  flex-shrink: 0;
}
.bd-icon::after {
  content: '';
  display: block; width: 10px; height: 10px;
  border-radius: 50%; background: var(--plum-red);
}
.bd-title {
  font-family: var(--font-display);
  font-size: 20.5px; font-weight: 400;
  letter-spacing: -.02em; color: var(--fg-1);
}
.bd-sub {
  font-family: var(--font-sans);
  font-size: 12px; color: var(--fg-muted); margin-top: 2px;
}
.bd-plum-badge {
  font-family: var(--font-sans);
  font-size: 10px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 2px 8px;
  background: var(--sev-blush);
  color: var(--plum-red);
  border: 0.5px solid var(--plum-red);
  white-space: nowrap;
  border-radius: 0;
}
.bd-body {
  border-top: 0.5px solid var(--line-lav);
  padding: 16px 20px 18px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.bd-col h4 {
  font-family: var(--font-sans);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-muted); margin-bottom: 10px;
}
.bd-stat-row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 5px 0; border-bottom: 0.5px solid var(--line-lav-2); font-size: 13.5px;
}
.bd-stat-row:last-child { border-bottom: none; }
.bd-stat-num {
  font-family: var(--font-display);
  font-size: 28px; color: var(--fg-1); line-height: 1; flex-shrink: 0;
  letter-spacing: -.02em;
}
.bd-stat-label {
  font-family: var(--font-sans);
  font-size: 13.5px; color: var(--fg-muted); line-height: 1.5;
}
.bd-check-list { list-style: none; }
.bd-check-list li {
  font-family: var(--font-sans);
  font-size: 14.5px; color: var(--fg-2);
  padding: 7px 0; border-bottom: 0.5px solid var(--line-lav-2);
  display: flex; gap: 7px; align-items: baseline; line-height: 1.55;
}
.bd-check-list li:last-child { border-bottom: none; }
.bd-check-list li::before { content: '—'; font-size: 10px; color: var(--plum-red); flex-shrink: 0; }
.bd-check-list li.checked::before { content: '+'; color: var(--accent-teal); font-weight: 700; }

/* adoption bar */
.adoption-bar-wrap { background: var(--line-lav-2); height: 6px; margin: 5px 0 2px; }
.adoption-bar { height: 100%; background: var(--plum-red); opacity: .7; }
.adoption-label { font-size: 11px; color: var(--fg-muted); }

/* ── OUTSIDE-LANE BLOCK ──────────────────────────────────────────────── */
.outside-lane {
  background: var(--fg-1);
  border-radius: var(--r-card);
  padding: 24px 26px;
  margin-top: 8px;
}
.outside-lane h3 {
  font-family: var(--font-display);
  font-size: 20.5px; font-weight: 400; letter-spacing: -.02em;
  color: var(--cream); margin-bottom: 8px;
}
.outside-lane > p {
  font-family: var(--font-sans);
  font-size: 13.5px; color: rgba(255,250,242,.5);
  line-height: 1.65; margin-bottom: 18px;
}
.outside-grid {
  display: grid;
  /* Fixed at three columns so the six items read as two even rows. auto-fit
     with minmax(180px,1fr) let the count float with the container — at the
     article width it landed on four, leaving a row of four and a row of two. */
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.08);
}
.outside-item {
  background: rgba(255,250,242,.04);
  border: none;
  padding: 14px 16px;
}
.outside-item-label {
  font-family: var(--font-sans);
  font-size: 10px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255,250,242,.4); margin-bottom: 5px;
}
.outside-item-value {
  font-family: var(--font-sans);
  font-size: 14.5px; color: rgba(255,250,242,.72); line-height: 1.6;
}

/* ── FOOTER ──────────────────────────────────────────────────────────── */
.page-footer {
  background: var(--fg-1);
  padding: 32px clamp(20px,5vw,64px);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 64px;
  border-top: 2px solid var(--plum-red);
}
.footer-logo svg { height: 24px; width: auto; margin-bottom: 10px; display: block; color: #fff; opacity: .8; }
.footer-brand {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 400;
  color: rgba(255,250,242,.5);
  margin-bottom: 4px; letter-spacing: -.01em;
}
.page-footer > div:first-child > div:not(.footer-brand) {
  font-family: var(--font-sans);
  font-size: 12px; color: rgba(255,250,242,.35); line-height: 1.65;
}
.page-footer > div:last-child {
  font-family: var(--font-sans);
  font-size: 11.5px; color: rgba(255,250,242,.3);
  line-height: 1.6; max-width: 420px; text-align: right;
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .policy-body, .claims-grid, .bd-body { grid-template-columns: 1fr; }
  .policy-badges { justify-content: flex-start; margin-top: 6px; }
  .policy-card-head { flex-wrap: wrap; }
  .bench-table { font-size: 11.5px; }
  .bench-table th, .bench-table td { padding: 8px; }
  .outside-grid { grid-template-columns: 1fr; }
  .page-footer > div:last-child { text-align: left; }
  .persona-strip { grid-template-columns: 1fr; }
  .checklist-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .stat-row { grid-template-columns: 1fr 1fr; }
  .intro-strip { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* ── MOBILE: table scroll wrappers ─────────────────────────────────── */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 8px; }
.table-scroll .statutory-table,
.table-scroll .data-table,
.table-scroll .bench-table,
.table-scroll .city-table { min-width: 560px; }

/* improved mobile responsive rules */
@media (max-width: 640px) {
  /* same nav reservation as the base rule — a flat 40px top sat under the
     70px fixed navbar, which is what overlapped the logo. */
  .masthead { padding: calc(var(--chrome-nav-h) + 20px) 20px 36px; }
  .policy-body, .claims-grid, .bd-body { grid-template-columns: 1fr; }
  .policy-card-head { flex-wrap: wrap; }
  .policy-badges { justify-content: flex-start; margin-top: 8px; }
  .bench-table, .bench-table th, .bench-table td { font-size: 13.5px; }
  .bench-table th, .bench-table td { padding: 9px 10px; }
  .outside-grid { grid-template-columns: 1fr; }
  .page-footer { flex-direction: column; padding: 28px 20px; }
  .page-footer > div:last-child { text-align: left; }
  .persona-strip { grid-template-columns: 1fr; }
  .checklist-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .intro-strip { grid-template-columns: 1fr 1fr; }
  h2 { font-size: clamp(22px, 6vw, 30px) !important; }
  .rule-section { margin: 40px 0 0; }
  .claims-grid { grid-template-columns: 1fr; }
  .section-label { font-size: 11px; }
}



/* ── DEEP-DIVE ACCORDION SECTIONS ───────────────────────────────────── */

/* Section accordion — distinct from the existing broker questions accordion */
.deep-accordion {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--line-lav);
  border-radius: var(--r-card);
  overflow: hidden;
  margin-top: 28px;
}
.deep-accordion details {
  border-bottom: 1px solid var(--line-lav);
  background: var(--cream);
}
.deep-accordion details:last-child { border-bottom: none; }
.deep-accordion details[open] { background: var(--cream-deep); }

.deep-accordion summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  gap: 16px;
  transition: color .15s;
}
.deep-accordion summary::-webkit-details-marker { display: none; }
.deep-accordion summary:hover { color: var(--plum-red); }

.acc-summary-inner { flex: 1; }
.acc-summary-label {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--plum-red);
  margin-bottom: 4px;
}
.acc-summary-title {
  font-family: var(--font-display);
  font-size: clamp(17px, 2.2vw, 22px);
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--fg-1);
  line-height: 1.25;
}
.acc-summary-sub {
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--fg-muted);
  margin-top: 3px;
  line-height: 1.4;
}
.deep-acc-indicator {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border: 1px solid var(--plum-red);
  color: var(--plum-red);
  font-size: 18px;
  font-weight: 300;
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease-out, background .15s;
  border-radius: 0;
  line-height: 1;
}
/* Child combinators, not descendants: Part 2's "How to buy a group health
   policy" panel contains its own accordion, and as a descendant selector this
   rule matched every indicator inside an open panel — so all four nested
   summaries rendered the rotated "close" glyph while still closed. Each
   indicator must answer to its own <details> only. */
.deep-accordion details[open] > summary > .deep-acc-indicator {
  transform: rotate(45deg);
  background: var(--plum-red);
  color: var(--fg-on-red);
}

.deep-acc-body {
  padding: 24px 24px 28px;
  border-top: 0.5px solid var(--line-lav);
}

/* Body prose inside deep accordion */
.deep-acc-body p {
  font-family: var(--font-sans);
  font-size: 15.5px;
  color: var(--fg-2);
  line-height: 1.75;
  margin-bottom: 16px;
  max-width: 680px;
}
.deep-acc-body p:last-child { margin-bottom: 0; }
.deep-acc-body p strong { color: var(--fg-1); font-weight: 600; }

/* Two-column grid inside accordion body */
.acc-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line-lav);
  border: 1px solid var(--line-lav);
  border-radius: var(--r-card);
  overflow: hidden;
  margin: 20px 0;
}
.acc-grid-cell {
  background: var(--cream);
  padding: 18px 20px;
}
.acc-grid-cell h4 {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 10px;
}
.acc-grid-cell p {
  font-family: var(--font-sans);
  font-size: 14.5px;
  color: var(--fg-1);
  line-height: 1.6;
  margin-bottom: 0 !important;
}

/* Tax table inside accordion */
.tax-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 14px;
  background: var(--cream);
  border: 1px solid var(--line-lav);
  border-radius: var(--r-card);
  overflow: hidden;
  margin: 20px 0;
}
.tax-table thead th {
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  border-bottom: 0.5px solid var(--line-lav);
}
.tax-table thead th:first-child { background: var(--cream-deep); color: var(--fg-muted); width: 24%; }
.tax-table thead th.th-employer { background: var(--fg-1); color: rgba(255,250,242,.75); }
.tax-table thead th.th-old { background: var(--accent-amber-light); color: var(--accent-amber); }
.tax-table thead th.th-new { background: var(--sev-blush); color: var(--plum-red); }
.tax-table tbody td {
  padding: 11px 14px;
  border-bottom: 0.5px solid var(--line-lav-2);
  color: var(--fg-1);
  vertical-align: top;
  line-height: 1.55;
  font-size: 14px;
}
.tax-table tbody tr:last-child td { border-bottom: none; }
.tax-table tbody td:first-child { font-weight: 600; background: var(--cream-deep); color: var(--fg-2); }
.tax-table tbody tr:nth-child(even) td:not(:first-child) { background: rgba(255,250,242,.6); }
.tax-exempt { color: var(--accent-teal); font-weight: 600; }
.tax-taxable { color: var(--plum-red); font-weight: 600; }
.tax-partial { color: var(--accent-amber); font-weight: 600; }

/* Regime callout */
.regime-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line-lav);
  border: 1px solid var(--line-lav);
  border-radius: var(--r-card);
  overflow: hidden;
  margin: 16px 0 20px;
}
.regime-card { padding: 18px 20px; }
.regime-card.old { background: var(--accent-amber-light); }
.regime-card.new { background: var(--sev-blush); }
.regime-label {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.regime-card.old .regime-label { color: var(--accent-amber); }
.regime-card.new .regime-label { color: var(--plum-red); }
.regime-card p {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.65;
  margin-bottom: 0 !important;
}
.regime-card.old p { color: #5C3A00; }
.regime-card.new p { color: #7A1020; }

/* Leave table */
.leave-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 14px;
  background: var(--cream);
  border: 1px solid var(--line-lav);
  border-radius: var(--r-card);
  overflow: hidden;
  margin: 20px 0;
}
.leave-table thead th {
  background: var(--fg-1);
  color: rgba(255,250,242,.75);
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.leave-table tbody td {
  padding: 11px 14px;
  border-bottom: 0.5px solid var(--line-lav-2);
  color: var(--fg-1);
  vertical-align: top;
  line-height: 1.55;
}
.leave-table tbody tr:last-child td { border-bottom: none; }
.leave-table tbody td:first-child { font-weight: 600; color: var(--fg-2); background: var(--cream-deep); width: 22%; }
.leave-table tbody tr:nth-child(even) td:not(:first-child) { background: var(--cream-deep); }

/* Allowance cards */
.allowance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--line-lav);
  border: 1px solid var(--line-lav);
  border-radius: var(--r-card);
  overflow: hidden;
  margin: 20px 0;
}
.allowance-card { background: var(--cream); padding: 18px 18px 16px; }
.allowance-card:hover { background: var(--cream-deep); }
.allowance-name {
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--fg-1);
  margin-bottom: 4px;
}
.allowance-abbr {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--plum-red);
  margin-bottom: 10px;
}
.allowance-rows { list-style: none; }
.allowance-rows li {
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--fg-2);
  padding: 5px 0;
  border-bottom: 0.5px solid var(--line-lav-2);
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.allowance-rows li:last-child { border-bottom: none; }
.allowance-rows .row-key {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

@media (max-width: 640px) {
  .acc-grid-2 { grid-template-columns: 1fr; }
  .regime-split { grid-template-columns: 1fr; }
  .allowance-grid { grid-template-columns: 1fr 1fr; }
  .tax-table { font-size: 12px; }
  .tax-table th, .tax-table td { padding: 9px 10px; }
  .deep-acc-body p { font-size: 14.5px; }
}

/* ── TOC RAIL: collapse below the two-column threshold ───────────────────
   Under 1024px the rail becomes a horizontal scroller pinned under the nav,
   which is the behaviour the page had before the rail existed. */
@media (max-width: 1024px) {
  .layout {
    display: block;
    padding: 0 clamp(16px, 5vw, 48px);
  }
  .toc-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: 0;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0;
    margin: 0 calc(-1 * clamp(16px, 5vw, 48px));
    background: var(--cream);
    border-right: 0;
    border-bottom: 1px solid var(--line-lav);
  }
  .toc-inner {
    display: flex;
    align-items: center;
    padding: 0 clamp(16px, 5vw, 48px);
  }
  .toc-heading { display: none; }
  .toc-bar > .toc-inner > ul { display: flex; white-space: nowrap; }
  /* 23 entries in a horizontal scroller is unusable, so nested levels go —
     except .toc-chapters, whose entries are whole sections (Parts 2A-2D) rather
     than headings inside one. Hiding those would drop Global Benchmark, Claims
     Reality and Maternity from the mobile rail, which are in it today, and
     never add Buying GHI. Keeping them puts the count at 16 against 15 before
     the restructure. Anything deeper is still desktop-only.

     They flatten into the SAME row rather than forming a second tier: nesting
     them visually made the rail two rows tall with the lower one offset under
     its parent, which cost vertical space and read as a stray fragment. On a
     horizontal scroller a flat row of peers is what works. */
  .toc-bar ul ul { display: none; }
  .toc-bar > .toc-inner > ul > li { display: flex; align-items: stretch; }
  .toc-bar > .toc-inner > ul > li > ul.toc-chapters { display: flex; margin: 0; }
  .toc-bar ul.toc-chapters ul { display: none; }
  /* undo the desktop indent/de-emphasis so they read as peers here */
  .toc-bar ul.toc-chapters a {
    padding: 13px 13px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--fg-2);
  }
  .toc-bar ul.toc-chapters a[aria-current="true"] { color: var(--plum-red); }
  .toc-bar a {
    padding: 13px 13px;
    font-size: 12.5px;
    border-left: 0;
    border-bottom: 2px solid transparent;
  }
  .toc-bar a:hover {
    background: none;
    border-left-color: transparent;
    border-bottom-color: var(--line-lav);
  }
  .toc-bar a[aria-current="true"] {
    border-left-color: transparent;
    border-bottom-color: var(--plum-red);
  }
  .page-body { padding-top: 36px; }
  section[id], h2[id], h3[id] { scroll-margin-top: 60px; }
}


/* ── COLOPHON ────────────────────────────────────────────────────────────
   The guide's own footer was replaced by the site footer lifted from
   plumhq.com, which carries no room for the sources list or the regulatory
   disclaimer. Both are substantive, so they moved here, at the end of the
   article where they still read as part of the document. */
.guide-colophon {
  margin-top: 72px;
  padding-top: 24px;
  border-top: 1px solid var(--line-lav);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.7;
  color: var(--fg-muted);
}
.guide-colophon p { max-width: 78ch; margin-bottom: 8px; }
.guide-colophon strong { color: var(--fg-2); font-weight: 600; }
.guide-colophon-sources { font-size: 12px; line-height: 1.65; }

/* ── STICKY RAIL vs THE SITE NAVBAR ──────────────────────────────────────
   The lifted navbar is sticky, so the TOC rail cannot pin to top: 0 or it
   sits underneath it. --chrome-nav-h is measured at runtime by the script in
   index.astro and written onto :root; the fallback covers the pre-script
   frame and the case where the navbar is not sticky. */
:root { --chrome-nav-h: 76px; }
@media (min-width: 1025px) {
  .toc-bar {
    top: var(--chrome-nav-h);
    min-height: calc(100vh - var(--chrome-nav-h));
    max-height: calc(100vh - var(--chrome-nav-h));
  }
  section[id], h2[id], h3[id] {
    scroll-margin-top: calc(var(--chrome-nav-h) + 16px);
  }
}
@media (max-width: 1024px) {
  .toc-bar { top: var(--chrome-nav-h); }
  section[id], h2[id], h3[id] {
    scroll-margin-top: calc(var(--chrome-nav-h) + 60px);
  }
}


/* ── SITE NAVBAR: the states Webflow's scroll interaction would have driven ──
   .nav is position:fixed and .nav-bg (its background layer) ships at
   opacity:0, faded in by a Webflow IX2 interaction on scroll. That runtime is
   not bundled here, so the states are declared explicitly and the class is
   toggled by the script in index.astro.

   Webflow's own --_colors---nav--* variables are referenced by the extracted
   rules but defined in index.css, which was not among the files available.
   They are defined here from the guide's palette so the two agree. */
.navbar {
  --_colors---nav--nav-dark: #2B0A20;   /* darker than --fg-1, for light text */
  --_colors---nav--nav-white: var(--cream);
}

/* Over the red masthead: transparent bar, light logo and light links. */
.nav-logo svg { color: var(--fg-on-red); }
.navbar:not(.nav--scrolled) .nav-menu a,
.navbar:not(.nav--scrolled) .nav-item,
.navbar:not(.nav--scrolled) .w-dropdown-toggle { color: var(--fg-on-red); }

/* Past the masthead: the solid background Webflow fades in, so light text
   keeps working once the cream article is behind the bar. */
.navbar.nav--scrolled .nav-bg,
/* also while the mobile panel is open, or the bar stays transparent at the top
   of the page and the masthead text shows through behind the logo */
.navbar.nav--menu-open .nav-bg { opacity: 1; }

/* ...and while a dropdown is open over the masthead. The panel paints itself
   var(--_colors---nav--nav-dark) and .nav-bg uses the same variable, so
   switching it on makes the bar and the panel one continuous block instead of
   a red strip above a dark purple sheet.

   Keyed off :has(:hover) rather than a class because at this width the panel
   is opened by CSS hover alone — the inline <style> in the head does
   .nav-item:hover .nav-item-dropdown { display: block } — so there is no
   JS state to hook. Same min-width as that rule, so the two cannot disagree;
   below it the panel is a tap-driven accordion inside the open menu, which
   .nav--menu-open already covers. */
@media (min-width: 992px) {
  .navbar:has(.nav-item:hover) .nav-bg { opacity: 1; }
}
.nav-bg { transition: opacity .22s ease; }
.navbar.nav--scrolled .nav-menu a,
.navbar.nav--scrolled .nav-item,
.navbar.nav--scrolled .w-dropdown-toggle { color: var(--fg-on-red); }

@media (prefers-reduced-motion: reduce) { .nav-bg { transition: none; } }


/* ── MOBILE NAV PANEL ────────────────────────────────────────────────────
   Plum's .nav-menu is display:none below the breakpoint and revealed by a
   Webflow IX2 slide-in that is not bundled here, so the open state is defined
   explicitly. The burger is .nav-hamburger, not Webflow's .w-nav-button. */
@media (max-width: 991px) {
  .navbar.nav--menu-open .nav-menu {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    position: fixed;
    top: var(--chrome-nav-h);
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--chrome-nav-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px clamp(16px, 5vw, 32px) 40px;
    background: var(--_colors---nav--nav-dark, #2B0A20);
    z-index: 999999998;
  }
  .navbar.nav--menu-open .nav-menu a,
  .navbar.nav--menu-open .nav-menu .w-dropdown-toggle { color: var(--fg-on-red); }
  .navbar.nav--menu-open .nav-menu .w-dropdown,
  .navbar.nav--menu-open .nav-menu .w-dropdown-toggle { width: 100%; }

  /* burger -> X */
  .nav-hamburger { cursor: pointer; }
  .nav-hamburger-line { transition: transform .18s ease, opacity .18s ease; }
  .navbar.nav--menu-open .nav-hamburger-line._1 { transform: translateY(5px) rotate(45deg); }
  .navbar.nav--menu-open .nav-hamburger-line._2 { opacity: 0; }
  .navbar.nav--menu-open .nav-hamburger-line._3 { transform: translateY(-5px) rotate(-45deg); }
}
@media (prefers-reduced-motion: reduce) { .nav-hamburger-line { transition: none; } }

/* ── BACK TO TOP ─────────────────────────────────────────────────────────
   The guide is one very long scroll, and below 1024px the TOC rail collapses
   to a horizontal scroller showing only top-level entries, so there is no
   quick route back to the section list on a phone.

   z-index sits above the article but nowhere near .nav's 999999999, so the
   navbar and its dropdowns always win. The bottom-right corner is otherwise
   unoccupied — nothing else in the page is fixed to the bottom. */
.to-top {
  position: fixed;
  right: clamp(16px, 2.5vw, 32px);
  bottom: clamp(16px, 2.5vw, 32px);
  z-index: 60;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line-lav);
  border-radius: 50%;
  background: var(--cream);
  color: var(--fg-1);
  cursor: pointer;
  box-shadow: 0 2px 12px rgb(58 14 43 / 16%);
  /* Hidden until the reader is past the masthead. visibility, not just
     opacity, so it is not a click target or a tab stop while invisible. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s,
              background-color .16s ease, color .16s ease, border-color .16s ease;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top svg { width: 18px; height: 18px; display: block; }
.to-top:hover {
  background: var(--plum-red);
  border-color: var(--plum-red);
  color: var(--fg-on-red);
}
.to-top:focus-visible { outline: 2px solid var(--plum-red); outline-offset: 3px; }
.to-top:active { transform: translateY(1px); }

/* The mobile nav panel is fixed and can fill the viewport, so the button
   would otherwise float on top of the open menu. .navbar and .to-top are
   both direct children of <body>. */
.navbar.nav--menu-open ~ .to-top { display: none; }

@media (prefers-reduced-motion: reduce) {
  .to-top { transition: none; }
  .to-top:active { transform: none; }
}