/* ============================================================
   Rebates-On · @font-face  (paths rewritten to /fonts/ for Astro)
   Two-family system, variable woff2 (weight 400–700). Latin + Latin-Ext.
   Source: rebates-on-design-system/project/tokens/fonts.css
   ============================================================ */

/* — Libre Franklin (UI / body / labels) ————————————————— */
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/libre-franklin-latin.woff2") format('woff2');
  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;
}
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/libre-franklin-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* — Source Serif 4 (display / headings / editorial italic) ——— */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/source-serif-4-latin.woff2") format('woff2');
  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;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/source-serif-4-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   Rebates-On · Color tokens
   A restrained, warm-neutral palette anchored by one confident blue.
   Blue is reserved for action and emphasis — never decoration.
   ============================================================ */
:root {
  /* — Brand blue ————————————————————————————————— */
  --navy:      #164F79;   /* deep brand anchor, chips, dark accents */
  --blue:      #1C7BBF;   /* primary action / link / focus          */
  --blue-2:    #1878B8;   /* primary hover (slightly deeper)        */
  --pale:      #C8E0F0;   /* tints on dark surfaces                  */
  --pale-soft: #EAF3FA;   /* lightest blue wash, hover fills         */

  /* — Ink & text ————————————————————————————————— */
  --ink:   #26251F;       /* headings, strong text, dark sections   */
  --body:  #56524B;       /* default paragraph copy                 */
  --muted: #747065;       /* captions, meta, secondary (AA 4.9:1)   */

  /* — Surfaces & lines ——————————————————————————————— */
  --bg:     #FFFFFF;      /* page base                              */
  --bg-2:   #FAFAF8;      /* alternating warm section               */
  --panel:  #F4F4F1;      /* inset panels, fills                    */
  --line:   #E6E4DF;      /* hairline dividers, card borders        */
  --line-2: #D6D7D7;      /* stronger borders, inputs               */

  /* — Status / data colors (from the platform UI) ——————————
     Used for rebate states, performance deltas and stage badges.   */
  --green:      #1C8A52;  /* positive perf, paid, on-track          */
  --green-soft: #E7F4EC;  /* paid / positive fill                   */
  --red:        #C8443A;  /* negative perf, ineligible, at risk     */
  --red-soft:   #FBECEA;  /* ineligible / negative fill             */
  --amber:      #B07A14;  /* eligible, pending, attention (text)    */
  --amber-soft: #FBF1DC;  /* eligible / pending fill                */
  --approved:      var(--blue);       /* approved, awaiting payment */
  --approved-soft: var(--pale-soft);  /* approved fill              */
  --neutral-soft:  #EFEEEB;           /* not-opted-in / disabled    */

  /* — Semantic aliases ————————————————————————————————
     Prefer these in product & page code over raw values above.     */
  --text-heading:  var(--ink);
  --text-body:     var(--body);
  --text-muted:    var(--muted);
  --text-link:     var(--blue);
  --text-on-ink:   #C9C6BD;       /* body copy on dark sections     */
  --text-on-ink-strong: #FFFFFF;

  --surface-page:   var(--bg);
  --surface-warm:   var(--bg-2);
  --surface-panel:  var(--panel);
  --surface-card:   #FFFFFF;
  --surface-ink:    var(--ink);

  --border-hairline: var(--line);
  --border-strong:   var(--line-2);
  --border-focus:    var(--blue);

  --action-primary:       var(--blue);
  --action-primary-hover: var(--blue-2);
  --action-dark:          var(--ink);
  --action-dark-hover:    #000000;
}
/* ============================================================
   Rebates-On · Typography tokens
   Two families: Source Serif 4 (display) + Libre Franklin (UI/body).
   Headings set tight with slight negative tracking. Italic serif is
   used for warm editorial asides and reader-facing questions.
   ============================================================ */
:root {
  /* — Families ——————————————————————————————————— */
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;   /* display / headings */
  --font-sans:  'Libre Franklin', system-ui, -apple-system, sans-serif; /* UI / body / labels */
  --font-mono:  ui-monospace, Menlo, 'SF Mono', monospace;             /* code, data figures */

  /* Aliases by role */
  --font-display: var(--font-serif);
  --font-heading: var(--font-serif);
  --font-body:    var(--font-sans);
  --font-ui:      var(--font-sans);

  /* Short aliases — some pages/components reference these shorter names
     directly (blog, wiki, legal, contact, chrome). Keep them resolving to
     the canonical families so headings never fall back to a default font. */
  --serif: var(--font-serif);
  --sans:  var(--font-sans);

  /* — Fluid type scale ——————————————————————————————— */
  --fs-display: clamp(38px, 4.6vw, 58px); /* @kind font */ /* hero h1 */
  --fs-h1:      clamp(38px, 4.6vw, 58px); /* @kind font */
  --fs-h2:      clamp(30px, 3.6vw, 48px); /* @kind font */ /* section title */
  --fs-h3:      22px; /* @kind font */ /* card title */
  --fs-h4:      18px; /* @kind font */
  --fs-lead:    clamp(17px, 1.4vw, 20px); /* @kind font */ /* intro paragraph */
  --fs-body:    17px; /* @kind font */ /* default body */
  --fs-sm:      15px; /* @kind font */ /* small / meta */
  --fs-xs:      13px; /* @kind font */
  --fs-eyebrow: 12.5px; /* @kind font */ /* uppercase label */

  /* — Weights ———————————————————————————————————— */
  --fw-regular: 400;  /* @kind font */
  --fw-medium:  500;  /* @kind font */
  --fw-semibold:600;  /* @kind font */
  --fw-bold:    700;  /* @kind font */

  /* — Line heights —————————————————————————————————— */
  --lh-tight:   1.08; /* @kind font */ /* display / headings */
  --lh-snug:    1.2; /* @kind font */
  --lh-body:    1.65; /* @kind font */ /* default copy */
  --lh-lead:    1.6; /* @kind font */

  /* — Tracking ———————————————————————————————————— */
  --tracking-display: -0.018em;  /* @kind font */
  --tracking-heading: -0.015em;  /* @kind font */
  --tracking-eyebrow:  0.12em;  /* @kind font */
}
/* ============================================================
   Rebates-On · Spacing, radius & layout tokens
   Generous vertical rhythm on a 1200px max content width.
   Corners are soft but never pill-round.
   ============================================================ */
:root {
  /* — Spacing scale (4px base) ——————————————————————————— */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 108px;  /* standard section padding (.sec) */

  /* — Radius ————————————————————————————————————— */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* — Layout ————————————————————————————————————— */
  --maxw:   1200px;   /* max content width (.wrap)            */
  --gutter: 40px;     /* side padding (22px on mobile)        */
  --sec-pad:       108px;  /* standard section vertical pad   */
  --sec-pad-tight: 78px;   /* compact section vertical pad    */
}
/* ============================================================
   Rebates-On · Elevation & motion tokens
   Shadows are barely-there and warm-tinted — used only to lift
   floating media, never to outline every card. Cards lean on
   hairline borders instead. Motion is calm: short fades + rises,
   one confident ease, no bounce.
   ============================================================ */
:root {
  /* — Elevation ————————————————————————————————————— */
  --shadow-card:  0 1px 2px rgba(38,37,31,.04);          /* resting card */
  --shadow-pop:   0 18px 40px -24px rgba(38,37,31,.28);  /* menus, popovers */
  --shadow-float: 0 30px 60px -30px rgba(38,37,31,.30);  /* hero media */
  --shadow-focus: 0 0 0 3px rgba(28,123,191,.28);        /* focus ring */

  /* — Motion ————————————————————————————————————— */
  --ease:      cubic-bezier(.22,.61,.36,1); /* @kind other */ /* default ease-out */
  --ease-soft: cubic-bezier(.4,0,.2,1); /* @kind other */
  --dur-fast:  .18s; /* @kind other */
  --dur-base:  .25s; /* @kind other */
  --dur-slow:  .7s; /* @kind other */ /* scroll reveals */

  /* — Focus —————————————————————————————————————— */
  --focus-ring: var(--shadow-focus);
}
/* ============================================================
   Rebates-On · Base reset + brand utility classes
   The reusable layer extracted from the marketing site direction.
   Tokens come from the files imported before this in styles.css.
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  color:var(--text-body);
  background:var(--surface-page);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
h1,h2,h3,h4{font-family:var(--font-serif);color:var(--text-heading);font-weight:var(--fw-semibold);line-height:var(--lh-tight);letter-spacing:var(--tracking-heading)}
p{text-wrap:pretty}

/* ============ LAYOUT PRIMITIVES ============ */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);width:100%}
.sec{padding:var(--sec-pad) 0}
.sec-tight{padding:var(--sec-pad-tight) 0}

.on-warm{background:var(--surface-warm);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.on-ink{background:var(--surface-ink);color:var(--text-on-ink)}
.on-ink h1,.on-ink h2,.on-ink h3,.on-ink h4{color:#fff}
.on-ink .eyebrow{color:var(--pale)}

/* ============ TYPOGRAPHY HELPERS ============ */
.eyebrow{
  display:inline-block;font-family:var(--font-sans);
  font-size:var(--fs-eyebrow);font-weight:var(--fw-semibold);letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;color:var(--blue);margin-bottom:18px;
}
.h1,.display{font-family:var(--font-serif);font-size:var(--fs-display);font-weight:var(--fw-semibold);letter-spacing:var(--tracking-display);color:var(--ink);line-height:1.1}
.h2{font-family:var(--font-serif);font-size:var(--fs-h2);font-weight:var(--fw-semibold);letter-spacing:var(--tracking-heading);color:var(--ink);line-height:var(--lh-tight)}
.h3{font-family:var(--font-serif);font-size:var(--fs-h3);font-weight:var(--fw-semibold);color:var(--ink);line-height:1.15}
.lead{font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--body)}
.center{text-align:center;max-width:760px;margin-left:auto;margin-right:auto}
.serif-italic{font-family:var(--font-serif);font-style:italic}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-sans);font-weight:var(--fw-semibold);font-size:15.5px;
  padding:14px 26px;border-radius:var(--r-sm);
  transition:all var(--dur-base) var(--ease);white-space:nowrap;line-height:1;
}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-2)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000}
.btn-line{background:#fff;color:var(--ink);border:1px solid var(--line-2)}
.btn-line:hover{border-color:var(--ink)}
.btn-lg{padding:17px 32px;font-size:16.5px}
.btn:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:var(--shadow-focus)}

.textlink{
  color:var(--blue);font-weight:var(--fw-semibold);display:inline-flex;align-items:center;gap:7px;
  font-size:var(--fs-sm);transition:gap var(--dur-base) var(--ease);
}
.textlink:hover{gap:12px}

/* ============ CARD ============ */
.card{background:var(--surface-card);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 28px}
.card h3{font-family:var(--font-serif);font-size:20px;font-weight:var(--fw-semibold);margin-bottom:10px}
.card p{font-size:15px;line-height:1.55}

/* ============ DARK FEATURE TILE (inside .on-ink) ============ */
.tile{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);padding:26px 24px;transition:background var(--dur-base),transform var(--dur-base)}
.tile:hover{background:rgba(255,255,255,.09);transform:translateY(-4px)}
.tile .lab{font-family:var(--font-sans);font-weight:var(--fw-semibold);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--pale)}
.tile h3{font-family:var(--font-serif);color:#fff;font-size:20px;margin-top:12px;font-weight:var(--fw-semibold)}

/* ============ CHIP WALL ============ */
.chipwall{display:flex;flex-wrap:wrap;gap:10px}
.chipwall span{font-weight:var(--fw-medium);font-size:15.5px;color:var(--navy);background:var(--bg-2);border:1px solid var(--line);padding:11px 20px;border-radius:var(--r-sm)}

/* ============ QUOTE ============ */
.quote{font-family:var(--font-serif);font-weight:var(--fw-semibold);font-size:clamp(28px,3.4vw,44px);color:var(--ink);letter-spacing:var(--tracking-heading);line-height:1.16;text-wrap:balance}

/* ============ PLACEHOLDER ============ */
.ph{
  background-image:repeating-linear-gradient(45deg,rgba(28,123,191,.10) 0 12px,rgba(28,123,191,.03) 12px 24px);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  color:var(--navy);font-family:var(--font-sans);font-size:12.5px;font-weight:var(--fw-semibold);
  letter-spacing:.03em;text-align:center;padding:18px;border-radius:var(--r-lg);
}

/* ============ REVEAL ANIMATION ============ */
.reveal{opacity:0;transform:translateY(20px);transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.07s}.reveal.d2{transition-delay:.14s}.reveal.d3{transition-delay:.21s}.reveal.d4{transition-delay:.28s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ============================================================
   Rebates-On · Site chrome (header + footer + mobile menu)
   Lifted verbatim from the approved homepage so inner pages
   share identical navigation. Values copied 1:1.
   ============================================================ */

/* ---------- Header / nav ---------- */
.hdr { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.9); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.hdr.scrolled { border-bottom-color: var(--line); }
.nav { display: flex; align-items: center; gap: 34px; height: 72px; }
.brand img { height: 26px; width: auto; }
.navlinks { display: flex; gap: 28px; margin-left: 6px; position: relative; }
.navlinks > a, .has-dd > a { font-weight: 500; font-size: 15px; color: var(--ink); white-space: nowrap; transition: color .18s; }
.navlinks > a:hover { color: var(--blue); }
.navcta { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.navcta .login { font-weight: 600; font-size: 15px; color: var(--ink); }
.navcta .login:hover { color: var(--blue); }
.menubtn { display: none; flex-direction: column; gap: 4px; width: 40px; height: 40px; border: 1px solid var(--line-2); border-radius: 8px; align-items: center; justify-content: center; }
.menubtn span { width: 17px; height: 2px; background: var(--ink); }

/* dropdowns */
.has-dd { position: relative; display: inline-flex; align-items: center; }
.has-dd > a { display: inline-flex; align-items: center; gap: 6px; }
.has-dd > a::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s var(--ease); opacity: .6; }
.has-dd:hover > a { color: var(--blue); }
.has-dd:hover > a::after { transform: rotate(225deg) translateY(0); opacity: .9; }
.dd-panel { position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%) translateY(8px); background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 50px -22px rgba(38,37,31,.32); padding: 10px; display: grid; grid-template-columns: 1fr; gap: 1px; width: 212px; opacity: 0; visibility: hidden; transition: opacity .2s var(--ease), transform .2s var(--ease); z-index: 60; }
.has-dd:hover .dd-panel { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
/* Invisible hover-bridge across the 16px gap between the trigger and the panel.
   It's a descendant of .has-dd, so the cursor crossing it keeps .has-dd:hover
   alive — the menu no longer disappears while you move down to click an item. */
.dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
.dd-panel.dd-mfr { width: 300px; }
.dd-panel a { padding: 9px 12px; border-radius: 8px; font-size: 14.5px; font-weight: 500; color: var(--body); transition: background .16s, color .16s; white-space: normal; line-height: 1.35; display: flex; align-items: center; gap: 12px; }
.dd-panel a:hover { background: var(--pale-soft); color: var(--blue); }
.dd-panel a img { flex: 0 0 auto; width: 30px; height: 22px; object-fit: contain; object-position: left center; }
.dd-panel a.dd-more { color: var(--blue); font-weight: 600; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 11px; border-radius: 0; }
.dd-panel a.dd-more:hover { background: transparent; color: var(--navy); }

/* ---------- Footer ---------- */
.foot { background: var(--ink); color: #9b958a; padding: 62px 0 34px; font-size: 14.5px; }
.foot-top { display: grid; grid-template-columns: 1.5fr .82fr 1.18fr 1fr 1fr; gap: 34px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.1); }
.foot .brand img { height: 24px; filter: brightness(0) invert(1); opacity: .9; margin-bottom: 16px; }
.foot .blurb { max-width: 34ch; line-height: 1.6; }
.foot h2 { color: #fff; font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 15px; }
.foot ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.foot ul a { transition: color .15s; }
.foot ul a:hover { color: #fff; }
.foot-bot { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 24px; font-size: 13px; color: #918c82; }
/* The "Privacy choices" control (PRD O-output/201, R6). A button because it
   performs an action rather than navigating, styled to sit level with the
   links beside it. NOTE: footer CSS is duplicated in the homepage's inline
   <style>, so this rule exists in src/pages/index.astro too. */
.foot-bot .as-link { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: none; }
.foot-bot .as-link:hover { color: #fff; }

/* Follow block. The LinkedIn [in] mark is LinkedIn's official asset, shipped
   unmodified per brand.linkedin.com: white is one of three approved colorways,
   and the mark stays a separate object beside our words, never in a lock-up. */
.foot-social { margin-top: 28px; }
.foot-li { display: inline-flex; align-items: center; gap: 9px; color: #fff; font-weight: 600; transition: opacity .15s; }
.foot-li img { height: 20px; width: auto; display: block; }
.foot-li:hover { opacity: .75; }
.foot-li + .foot-li { margin-left: 20px; }
.foot-social-note { max-width: 34ch; line-height: 1.6; margin-top: 11px; }

/* ---------- Mobile slide-in menu ---------- */
.rmm-ov { position: fixed; inset: 0; z-index: 2000; background: rgba(12,18,24,.5); opacity: 0; visibility: hidden; transition: opacity .25s ease; }
.rmm-ov.open { opacity: 1; visibility: visible; }
.rmm-sheet { position: absolute; top: 0; right: 0; height: 100%; width: min(84vw, 360px); background: #fff; color: var(--ink); transform: translateX(102%); transition: transform .3s cubic-bezier(.22,.61,.36,1); padding: 72px 26px 30px; display: flex; flex-direction: column; box-shadow: -14px 0 44px rgba(0,0,0,.22); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.rmm-ov.open .rmm-sheet { transform: none; }
.rmm-close { position: absolute; top: 16px; right: 16px; width: 42px; height: 42px; border: none; background: transparent; color: var(--ink); font-size: 30px; line-height: 1; cursor: pointer; }
.rmm-links { display: flex; flex-direction: column; }
.rmm-links a { padding: 15px 2px; font-size: 19px; font-weight: 600; color: var(--ink); border-bottom: 1px solid rgba(0,0,0,.09); transition: color .15s; }
.rmm-links a:hover { color: var(--blue); }
.rmm-cta { margin-top: 24px; text-align: center; padding: 15px; border-radius: 11px; background: var(--blue); color: #fff; font-weight: 700; font-size: 16px; }
/* Customer login: hidden from the header bar below 980px, so the drawer is the only
   in-chrome route to the app on a phone. Sits BELOW the CTA and outside .rmm-links,
   because it leaves the site and is not navigation. Values match .navcta .login so the
   same link looks like itself at every width. Duplicated in index.astro (token island). */
.rmm-login { margin-top: 18px; text-align: center; font-size: 15px; font-weight: 600; color: var(--ink); }
.rmm-login:hover { color: var(--blue); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .navlinks, .navcta .login { display: none; }
  .menubtn { display: flex; }
  .foot-top { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 600px) {
  .foot-top { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 400px) {
  .navcta .btn { padding-left: 14px; padding-right: 14px; }
}

/* ============================================================
   Between the Portal and the Check · report layer
   Sits on the site's own tokens, fonts and chrome (above).
   Everything here is visible without JavaScript; report.js only
   adds motion on top (it sets the dimmed / hidden start states).
   ============================================================ */

:root {
  --hdr-h: 72px;
  --paper-fs: 19px;
  --tone-bg: #fff;
  --cream: #FBF8F0;
  --navy-deep: #0E2D47;
  --glow: rgba(200, 224, 240, .55);
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
html { scroll-behavior: auto; }
body { overflow-x: clip; }
::selection { background: rgba(28,123,191,.22); }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: 10px 16px; z-index: 3000; }
.skip-link:focus { left: 0; }
.hdr { position: sticky; }
.hdr .progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.hdr .progress i { display: block; height: 100%; background: var(--blue); transform-origin: 0 50%; transform: scaleX(0); }
.brand img { width: auto; height: 26px; }

a:focus-visible, button:focus-visible { outline: 2px solid transparent; box-shadow: var(--shadow-focus); border-radius: 6px; }
.report a[href^="http"] { color: var(--blue); text-decoration: underline; text-decoration-color: rgba(28,123,191,.35); text-underline-offset: 3px; }
.report a[href^="http"]:hover { text-decoration-color: var(--blue); }

/* ---------------- Chapters & panels ---------------- */
.ch { position: relative; padding: 150px 0 40px; }
.ch:has(> .panel) { padding: 28px 0; }
.panel { --tone-bg: var(--bg-2); background: var(--tone-bg); border-radius: 34px; margin: 0 14px; padding: 130px 0 120px; position: relative; overflow: clip; }
.tone-blue { --tone-bg: #EDF5FB; background: linear-gradient(180deg, #F2F8FC 0%, #E7F1F9 100%); }
.tone-warm { --tone-bg: var(--bg-2); border: 1px solid var(--line); }
.tone-ink { --tone-bg: var(--ink); background: var(--ink); color: var(--text-on-ink); }
.tone-navy { --tone-bg: #123E61; background: radial-gradient(120% 80% at 78% 18%, #1B5B8B 0%, #164F79 36%, #0E2D47 100%); color: #D5E4F0; }
.tone-ink h2, .tone-ink h3, .tone-navy h2, .tone-navy h3 { color: #fff; }
.banks-panel { margin-top: 110px; }

.ch-head { display: flex; flex-direction: column; gap: 18px; margin-bottom: 56px; }
.ch-num { font: 600 13px/1 var(--font-sans); letter-spacing: .16em; color: var(--navy); display: inline-flex; align-items: center; gap: 14px; }
.ch-num::after { content: ""; width: 48px; height: 1px; background: currentColor; opacity: .6; }
.tone-ink .ch-num, .tone-navy .ch-num { color: var(--pale); }
.ch-title { font-size: clamp(38px, 5.2vw, 76px); line-height: 1.02; letter-spacing: -.028em; max-width: 19ch; text-wrap: balance; }

/* ---------------- Paper text ---------------- */
.prose { max-width: 680px; }
.prose p, .steps p, .cond p, .chk-text p, .crit p, .qa dd, .dossier-text p { font-size: var(--paper-fs); line-height: 1.72; }
.prose p + p { margin-top: 1.1em; }
.prose p { color: var(--body); }
.tone-ink .prose p, .tone-ink p { color: var(--text-on-ink); }
.tone-navy .prose p, .tone-navy p { color: #CFDDEA; }
.lead { font-size: 22px !important; line-height: 1.6 !important; color: var(--ink) !important; max-width: 34em; }
.tone-ink .lead, .tone-navy .lead { color: #fff !important; }
.prose .lead { margin-bottom: 0; }
strong { color: var(--ink); font-weight: 650; }
.tone-ink strong, .tone-navy strong { color: #fff; }

.scrub { font: 500 clamp(24px, 2.7vw, 40px)/1.32 var(--font-sans); letter-spacing: -.012em; color: var(--ink); max-width: 25em; margin: 0 0 40px; text-wrap: pretty; }
.tone-ink .scrub, .tone-navy .scrub { color: #fff; }
.scrub .w, .statement .w, .closing .w { display: inline; }

.statement { font: 500 clamp(26px, 3.1vw, 46px)/1.24 var(--font-serif); letter-spacing: -.014em; color: var(--ink); max-width: 24em; margin: 120px 0 64px; text-wrap: pretty; }
.tone-ink .statement, .tone-navy .statement { color: #fff; }

.pull { font: 600 clamp(34px, 5.4vw, 80px)/1.04 var(--font-serif); letter-spacing: -.03em; color: var(--ink); max-width: 17ch; margin: 120px 0; text-wrap: balance; position: relative; padding-top: 34px; }
.pull::before { content: ""; position: absolute; top: 0; left: 0; width: 64px; height: 3px; background: var(--blue); border-radius: 2px; }
.tone-ink .pull, .tone-navy .pull { color: #fff; }
.tone-ink .pull::before, .tone-navy .pull::before { background: var(--pale); }

.note { border-left: 3px solid var(--blue); background: var(--bg-2); border-radius: 0 16px 16px 0; padding: 34px 40px; max-width: 760px; margin: 120px 0 0; }
.note p { font-size: 18px; line-height: 1.7; color: var(--body); }
.note p + p { margin-top: 1em; }
.note-p { font-size: 17px !important; color: #B9B5AB !important; border-top: 1px solid rgba(255,255,255,.14); padding-top: 28px; margin-top: 10px; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; margin: 110px auto 0; }
.split .prose { max-width: 600px; }

/* ---------------- Cover ---------------- */
.cover-stage { min-height: calc(100vh - var(--hdr-h)); min-height: calc(100svh - var(--hdr-h)); display: flex; flex-direction: column; justify-content: center; position: relative; padding: 48px 0 96px; background: radial-gradient(90% 70% at 72% 40%, #EEF5FB 0%, rgba(238,245,251,0) 70%), linear-gradient(180deg, #fff 0%, var(--bg-2) 100%); overflow: hidden; }
.cover-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 32px; align-items: center; }
.cover-eyebrow { margin-bottom: 26px !important; }
.cover-title { font-size: clamp(50px, 7.2vw, 112px); line-height: .96; letter-spacing: -.035em; max-width: 8.4ch; }
.cover-sub { font: italic 400 clamp(20px, 1.9vw, 27px)/1.38 var(--font-serif); color: var(--ink); max-width: 23em; margin-top: 30px; }
.cover-meta { font-size: 14.5px; color: var(--body); margin-top: 34px; }
.cover-meta em { font-style: normal; }
.cover-author { font-size: 15px; color: var(--body); margin-top: 8px; }

.cover-visual { position: relative; height: min(600px, 66vh); perspective: 1500px; }
.cv-scene { position: absolute; inset: 0; transform-style: preserve-3d; }
.obj { position: absolute; will-change: transform; }
.portal-card { left: 0; top: 8%; width: 50%; min-width: 220px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 50px 90px -40px rgba(22,79,121,.42), 0 12px 30px -16px rgba(38,37,31,.22); transform: rotateY(18deg) rotateX(6deg); overflow: hidden; }
.pc-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.pc-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.pc-bar span { margin-left: 10px; font: 600 10.5px/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pc-body { padding: 18px 16px 16px; display: grid; gap: 14px; }
.pc-row { display: grid; grid-template-columns: 70px 1fr; align-items: end; gap: 10px; }
.pc-lab { font: 600 11.5px/1 var(--font-sans); color: var(--ink); padding-bottom: 2px; }
.pc-bars { display: flex; align-items: flex-end; gap: 5px; height: 54px; }
.pc-bars b { flex: 1; height: calc(var(--h) * 100%); background: linear-gradient(180deg, #4C9AD3, var(--blue)); border-radius: 3px 3px 1px 1px; transform-origin: bottom; }
.pc-row:nth-child(2) .pc-bars b { background: linear-gradient(180deg, #8DBFE2, #5DA2D6); }
.pc-status { display: inline-flex; align-items: center; gap: 8px; justify-self: start; font: 600 12px/1 var(--font-sans); color: #157043; background: var(--green-soft); padding: 7px 11px; border-radius: 999px; }
.pc-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(28,138,82,.15); }

.check-card { right: 0; top: 52%; width: 52%; min-width: 230px; aspect-ratio: 2.25; background: var(--cream); border: 1px solid #E8E1CD; border-radius: 8px; box-shadow: 0 46px 80px -40px rgba(38,37,31,.45), 0 10px 26px -14px rgba(38,37,31,.22); transform: rotateY(-16deg) rotateZ(-3deg); padding: 6% 6.5%; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.ck-guilloche { position: absolute; inset: 0; background: repeating-radial-gradient(circle at 12% 120%, rgba(22,79,121,.05) 0 2px, transparent 2px 9px), repeating-radial-gradient(circle at 92% -30%, rgba(176,122,20,.05) 0 2px, transparent 2px 11px); pointer-events: none; }
.ck-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ck-logo { width: 34%; height: 9px; border-radius: 3px; background: rgba(22,79,121,.55); }
.ck-date { width: 22%; height: 1px; background: rgba(38,37,31,.4); }
.ck-line { flex: 1; height: 1px; background: rgba(38,37,31,.4); }
.ck-long { flex: 1; }
.ck-amt { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(38,37,31,.35); border-radius: 4px; padding: 5px 8px; width: 30%; }
.ck-amt em { font: 600 13px/1 var(--font-serif); color: var(--ink); font-style: normal; }
.ck-blur { flex: 1; height: 8px; border-radius: 4px; background: rgba(38,37,31,.25); filter: blur(2px); }
.ck-micr { width: 54%; height: 7px; background: repeating-linear-gradient(90deg, rgba(38,37,31,.55) 0 3px, transparent 3px 5px, rgba(38,37,31,.55) 5px 6px, transparent 6px 10px); opacity: .7; }
.ck-sign { width: 34%; height: auto; }
.ck-sign path { fill: none; stroke: var(--navy); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.cv-gap { position: absolute; left: 30%; right: 30%; top: 47%; height: 20px; }
.cv-line { width: 100%; height: 20px; overflow: visible; }
.cv-line line { stroke: var(--blue); stroke-width: 1.5; stroke-dasharray: 2 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.cv-ticks { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; }
.cv-ticks i { width: 2px; height: 10px; border-radius: 1px; background: var(--line-2); }
.cv-ticks i.on { background: var(--blue); }
.cv-docs { position: absolute; left: 50%; top: 4%; width: 0; height: 0; }
.doc { position: absolute; left: -60px; top: 0; width: 120px; height: 150px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 24px 40px -26px rgba(38,37,31,.4); padding: 14px 12px; display: flex; flex-direction: column; gap: 7px; opacity: 0; }
.doc b { height: 7px; width: 60%; background: var(--navy); opacity: .7; border-radius: 2px; margin-bottom: 4px; }
.doc i { height: 4px; background: var(--line); border-radius: 2px; }
.doc i:nth-child(3) { width: 82%; } .doc i:nth-child(4) { width: 66%; }
.doc span { margin-top: auto; font: 600 10.5px/1.25 var(--font-sans); color: var(--ink); }

.scroll-cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font: 600 11px/1 var(--font-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.scroll-cue i { width: 1px; height: 40px; background: linear-gradient(var(--muted), transparent); }

/* ---------------- Scrolly (picture beside the text; sticky on top on phones) ---------------- */
.scrolly { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: start; margin-top: 40px; }
.scrolly .steps { grid-column: 1; grid-row: 1; padding: 22vh 0 26vh; }
.scrolly .step { max-width: 31em; margin-bottom: 48vh; transition: opacity .5s var(--ease); }
.scrolly .step:last-child { margin-bottom: 0; }
.scrolly[data-scene="market"], .scrolly[data-scene="rules"] { min-height: 200vh; }
.scrolly .graphic { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--hdr-h) + 5vh); height: calc(100vh - var(--hdr-h) - 10vh); display: flex; align-items: center; justify-content: center; }
.scrolly .step p, .scrolly p.step { color: var(--body); }
.tone-navy .scrolly p.step { color: #D5E4F0; }
.tone-ink .scrolly p.step { color: var(--text-on-ink); }
.vis { width: 100%; position: relative; }
.vis svg { display: block; width: 100%; height: auto; overflow: visible; }
.graphic .vis { max-height: 100%; }
.graphic .vis svg { max-height: calc(100vh - var(--hdr-h) - 12vh); }

/* ---------------- 2026 rebuild (pinned, horizontal) ---------------- */
.rebuild { margin-top: 90px; }
.rebuild-pin { height: calc(100vh - var(--hdr-h)); display: flex; flex-direction: column; justify-content: center; gap: 40px; overflow: hidden; }
.rebuild-head { display: flex; align-items: center; gap: 28px; }
.rb-year { font: 600 clamp(54px, 7vw, 104px)/1 var(--font-serif); letter-spacing: -.04em; color: var(--ink); }
.rb-axis { flex: 1; height: 2px; background: var(--line); position: relative; border-radius: 2px; }
.rb-fill { position: absolute; inset: 0; background: var(--blue); transform-origin: 0 50%; transform: scaleX(.02); border-radius: 2px; }
.rb-dot { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; border: 2px solid var(--line-2); transition: background .3s, border-color .3s, transform .3s; }
.rb-dot.on { background: var(--blue); border-color: var(--blue); transform: scale(1.25); }
html.rm .rb-dot { background: var(--blue); border-color: var(--blue); }
.rb-stage .chip.gone { color: var(--muted); border-style: dashed; box-shadow: none; text-decoration: line-through; text-decoration-color: rgba(200,68,58,.7); }
.rebuild-track { display: flex; gap: 28px; padding-left: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); padding-right: 12vw; will-change: transform; }
.rb-card { flex: 0 0 auto; width: min(540px, 84vw); min-height: 410px; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 30px 30px 26px; display: flex; flex-direction: column; box-shadow: 0 30px 60px -44px rgba(22,79,121,.4); }
.rb-when { font: 600 32px/1.05 var(--font-serif); letter-spacing: -.02em; color: var(--ink); }
.rb-who { font: 600 12.5px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-top: 12px; }
.rb-stage { position: relative; flex: 1; margin-top: 24px; min-height: 290px; }
.chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; font: 600 14px/1 var(--font-sans); color: var(--navy); box-shadow: 0 8px 18px -12px rgba(38,37,31,.3); }
.chip.solid { background: var(--blue); border-color: var(--blue); color: #fff; }
.chip.ink { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip .live { width: 8px; height: 8px; border-radius: 50%; background: #3CCB7F; box-shadow: 0 0 0 0 rgba(60,203,127,.6); }
.rb-arrow { position: absolute; height: 2px; background: var(--line-2); transform-origin: 0 50%; }

/* ---------------- Rules (the claim) and lock ---------------- */
.ms { align-items: center; }
.lock-card { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 34px; box-shadow: 0 40px 80px -50px rgba(22,79,121,.45); display: grid; grid-template-columns: 110px 1fr; gap: 22px; align-items: center; }
.lock-quote { font: italic 500 26px/1.25 var(--font-serif) !important; color: var(--ink); margin: 0 !important; padding: 0 !important; max-width: none !important; }
.lock-quote::before { display: none; }

/* ---------------- Banks ---------------- */
.banks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; perspective: 1200px; width: 100%; }
.bank { aspect-ratio: .64; position: relative; }
.bank-inner { position: absolute; inset: 0; transform-style: preserve-3d; }
.bank-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 14px; }
.bank-front { background: #fff; border: 1px solid var(--line); box-shadow: 0 16px 34px -26px rgba(22,79,121,.5); display: flex; flex-direction: column; padding: 10px 10px 9px; }
.bank-name { display: inline-block; overflow-wrap: normal; word-break: keep-all; }
.bank-back { background: linear-gradient(160deg, #1B5B8B, #123E61); transform: rotateY(180deg); display: flex; align-items: center; justify-content: center; text-align: center; padding: 5px; letter-spacing: -.012em; font: 600 clamp(13px, 1.25vw, 19px)/1.15 var(--font-serif); color: #fff; box-shadow: 0 16px 34px -20px rgba(14,45,71,.7); }
.bank-icon { width: 22px; height: 18px; }
.bank-chart { flex: 1; margin: 6px 0; min-height: 0; }
.bank-chart svg { width: 100%; height: 100%; }
.bank-rows { display: grid; gap: 4px; }
.bank-row { display: flex; align-items: center; justify-content: space-between; gap: 4px; font: 600 9.5px/1.1 var(--font-sans); color: var(--muted); letter-spacing: .02em; }
.bank-row b { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; font-size: 10px; flex: 0 0 auto; }
.bank-row .ok { background: var(--green-soft); color: #157043; }
.bank-row .q { background: var(--amber-soft); color: #86590B; }

/* ---------------- Seven mechanisms (stacked cards) ---------------- */
.stack { margin: 70px 0 40px; }
.mech { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; background: linear-gradient(180deg, #313029, #2B2A24); border: 1px solid rgba(255,255,255,.09); border-radius: 26px; padding: 48px; margin-bottom: 7vh; box-shadow: 0 -24px 60px -36px rgba(0,0,0,.7); transform-origin: 50% 0; }
.mech-n { display: block; font: 600 15px/1 var(--font-sans); letter-spacing: .16em; color: var(--pale); margin-bottom: 22px; }
.mech-title { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.12; letter-spacing: -.018em; margin-bottom: 18px; }
.mech-body { font-size: 18px !important; line-height: 1.68 !important; color: var(--text-on-ink); }
.mech-vis { background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 18px; }
@media (min-width: 901px) and (min-height: 700px) {
  .mech { position: sticky; min-height: min(68vh, 620px); margin-bottom: 18vh; }
  .mech:nth-child(1) { top: calc(var(--hdr-h) + 3vh); }
  .mech:nth-child(2) { top: calc(var(--hdr-h) + 3vh + 12px); }
  .mech:nth-child(3) { top: calc(var(--hdr-h) + 3vh + 24px); }
  .mech:nth-child(4) { top: calc(var(--hdr-h) + 3vh + 36px); }
  .mech:nth-child(5) { top: calc(var(--hdr-h) + 3vh + 48px); }
  .mech:nth-child(6) { top: calc(var(--hdr-h) + 3vh + 60px); }
  .mech:nth-child(7) { top: calc(var(--hdr-h) + 3vh + 72px); margin-bottom: 0; }
}

/* ---------------- Dossier (the filings sidebar) ---------------- */
.dossier { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 64px; background: var(--panel); border: 1px solid var(--line); border-radius: 28px; padding: 64px; margin: 150px 0 40px; }
.dossier-vis { position: sticky; top: calc(var(--hdr-h) + 40px); align-self: start; }
.dossier-title { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.1; letter-spacing: -.02em; margin-bottom: 30px; max-width: 18ch; }
.dossier-text p { color: var(--body); }
.dossier-text p + p { margin-top: 1.1em; }
.hl { background-image: linear-gradient(180deg, transparent 56%, rgba(28,123,191,.2) 56%, rgba(28,123,191,.2) 92%, transparent 92%); background-repeat: no-repeat; background-size: 100% 100%; color: var(--ink); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.dossier-close { font: italic 500 24px/1.4 var(--font-serif) !important; color: var(--ink) !important; margin-top: 1.4em !important; }
.morph { margin: 30px 0; }

/* Insight's sentence, rewriting itself */
.mo { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px 24px 22px; box-shadow: 0 24px 50px -36px rgba(38,37,31,.35); }
.mo-years { display: flex; gap: 8px; margin-bottom: 14px; }
.mo-y { font: 600 12px/1 var(--font-sans); letter-spacing: .1em; padding: 7px 11px; border-radius: 999px; background: var(--panel); color: var(--body); transition: background .35s, color .35s; }
.mo-y.on { background: var(--ink); color: #fff; }
.mo-s { font: italic 500 21px/1.42 var(--font-serif) !important; color: var(--ink) !important; margin: 0 !important; }
.mo-del { display: inline-block; max-width: 8em; white-space: nowrap; overflow: hidden; vertical-align: bottom; color: var(--red); background-image: linear-gradient(var(--red), var(--red)); background-repeat: no-repeat; background-position: 0 58%; background-size: 0% 2px; }
.mo-ins { display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: bottom; color: var(--blue); }

/* motion-only states (set when report.js runs with motion allowed) */
html.motion .scrolly .step { opacity: .3; }
html.motion .scrolly .step.is-active { opacity: 1; }
html.rm .rebuild-pin { height: auto; padding: 30px 0; }
html.rm .rebuild-track { flex-wrap: wrap; padding-right: var(--gutter); row-gap: 20px; }
html.rm .doc { opacity: 1; }

/* ---------------- Conditions ---------------- */
.conds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 64px; }
.cond { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 30px; }
.cond p { font-size: 17px !important; color: var(--body); }
.cond p + p { margin-top: .9em; }
.cond-vis { height: 130px; margin-bottom: 22px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; }
.cond-vis svg { height: 100%; }
.conds-end { margin-top: 60px; }

/* ---------------- Checks ---------------- */
.checks { list-style: none; margin: 70px 0 30px; position: relative; }
.chk { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px; padding: 56px 0; border-top: 1px solid var(--line); }
.chk:last-child { border-bottom: 1px solid var(--line); }
.chk-vis { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 16px; align-self: start; position: sticky; top: calc(var(--hdr-h) + 40px); }
.chk-title { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; letter-spacing: -.018em; margin-bottom: 22px; max-width: 24ch; }
.chk-title .n, .crit-title .n { color: var(--blue); margin-right: .25em; }
.chk-text p { color: var(--body); max-width: 36em; }
.chk-text p + p { margin-top: 1em; }
.chk-text p > em:first-child, .note-p > em:first-child { font-style: normal; font: 600 12.5px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--navy); display: block; margin-bottom: 8px; }

/* ---------------- Six criteria ---------------- */
.crit { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 30px 0 0; }
.crit li { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); border-radius: 22px; padding: 30px 28px; }
.crit-vis { height: 96px; margin-bottom: 24px; }
.crit-vis svg { height: 100%; width: auto; }
.crit-title { font-size: 23px; line-height: 1.2; letter-spacing: -.012em; margin-bottom: 14px; }
.crit-title .n { color: var(--pale); }
.crit p { font-size: 16.5px !important; line-height: 1.66 !important; color: var(--text-on-ink); }

/* ---------------- Questions ---------------- */
.qa { margin: 56px 0 40px; border-top: 1px solid var(--line); }
.qa-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 56px; padding: 36px 0; border-bottom: 1px solid var(--line); }
.qa dt { font: 600 clamp(22px, 2vw, 28px)/1.22 var(--font-serif); letter-spacing: -.012em; color: var(--ink); }
.qa dd { color: var(--body); }

/* ---------------- Finale ---------------- */
.finale-split { margin-top: 20px; }
.closing { font: 600 clamp(36px, 5.4vw, 82px)/1.04 var(--font-serif); letter-spacing: -.032em; color: #fff; max-width: 17ch; margin-top: 130px; text-wrap: balance; }

/* ---------------- Sources ---------------- */
.sources { padding-top: 140px; }
.sources .ch-title { font-size: clamp(34px, 4vw, 54px); }
.sources .lead { font-size: 18px !important; color: var(--body) !important; }
.src-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; margin-top: 46px; }
.src-h { font: 600 13px/1 var(--font-sans) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--blue) !important; margin: 0 0 16px; }
.src-list { list-style: none; display: grid; gap: 12px; margin-bottom: 36px; }
.src-list li { font-size: 15px; line-height: 1.6; color: var(--body); padding-left: 18px; position: relative; }
.src-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 1px; background: var(--blue); opacity: .75; }
.src-intro { font-size: 16px; color: var(--body); max-width: 52em; margin-top: 30px; }
.table-wrap { margin: 26px 0 18px; overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; }
.cal-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; }
.cal-table th, .cal-table td { text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.5; color: var(--body); font-weight: 400; }
.cal-table thead th { background: var(--bg-2); font-weight: 600; color: var(--ink); font-size: 13.5px; }
.cal-table tbody tr:last-child th, .cal-table tbody tr:last-child td { border-bottom: 0; }
.cal-table tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }
.cal-table strong { font-weight: 700; }
.src-note { font-size: 15px; color: var(--body); max-width: 60em; line-height: 1.65; }
.colophon { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); display: grid; gap: 10px; max-width: 60em; }
.colophon p { font-size: 15px; line-height: 1.65; color: var(--muted); }
.colophon em { font-style: italic; }

/* ---------------- Closing band ---------------- */
.ctaband { background: var(--ink); color: #fff; text-align: center; padding: 120px 0; margin-top: 120px; }
.ctaband h2 { color: #fff; font-size: clamp(30px, 3.6vw, 48px); max-width: 22ch; margin: 0 auto 36px; text-wrap: balance; }

/* ---------------- Contents pill ---------------- */
.toc { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 400; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.toc-pill { pointer-events: auto; display: inline-flex; align-items: center; gap: 12px; max-width: min(520px, calc(100vw - 32px)); background: rgba(38,37,31,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; border-radius: 999px; padding: 11px 18px 11px 14px; box-shadow: 0 18px 40px -16px rgba(0,0,0,.5); font: 600 13.5px/1 var(--font-sans); opacity: 0; transform: translateY(14px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.toc.show .toc-pill { opacity: 1; transform: none; }
.toc-cur-n { color: var(--pale); letter-spacing: .1em; font-size: 12px; }
.toc-cur-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toc-pill i { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-135deg) translateY(-2px); opacity: .7; flex: 0 0 auto; }
.toc-panel { pointer-events: auto; order: -1; margin-bottom: 10px; width: min(460px, calc(100vw - 32px)); max-height: 62vh; overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 30px 70px -24px rgba(38,37,31,.45); padding: 10px; }
.toc-panel ol { list-style: none; }
.toc-panel a { display: grid; grid-template-columns: 34px 1fr; gap: 8px; padding: 11px 12px; border-radius: 10px; font-size: 14.5px; line-height: 1.35; color: var(--ink); }
.toc-panel a span { color: var(--blue); font-weight: 600; font-size: 12px; letter-spacing: .08em; padding-top: 2px; }
.toc-panel a:hover, .toc-panel a.cur { background: var(--pale-soft); }

/* ---------------- Next button: one tap, the next part ---------------- */
.next-btn { position: fixed; right: 20px; bottom: 20px; z-index: 400; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 52px; height: 52px; padding: 0 19px; border: 0; border-radius: 999px; background: rgba(38,37,31,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; font: 600 11px/1 var(--font-sans); letter-spacing: .18em; text-transform: uppercase; box-shadow: 0 0 0 1px rgba(255,255,255,.22), 0 18px 40px -16px rgba(0,0,0,.55); cursor: pointer; transition: opacity .3s var(--ease), visibility 0s, background .2s; }
.next-btn[hidden] { display: none; }
.next-btn:hover { background: var(--ink); }
.next-btn:focus-visible { border-radius: 999px; }
.next-btn i { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); flex: 0 0 auto; }
.nb-label { display: none; }
.next-btn.done { opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s .3s; }
html.motion .next-btn.wide i { animation: nb-bob 1.8s var(--ease) infinite; }
@keyframes nb-bob { 0%, 100% { transform: translateY(-2px) rotate(45deg); } 50% { transform: translateY(2px) rotate(45deg); } }

/* ---------------- SVG vocabulary used by report.js ---------------- */
.sv-lab { font: 600 12px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; fill: #625E55; }
.sv-txt { font: 500 14px var(--font-sans); fill: var(--ink); }
.sv-val { font: 600 26px var(--font-sans); fill: var(--ink); letter-spacing: -.01em; }
.sv-big { font: 600 64px var(--font-serif); fill: var(--ink); letter-spacing: -.03em; }
.sv-serif { font-family: var(--font-serif); }
.tone-ink .sv-lab, .tone-navy .sv-lab { fill: #A9B9C7; }
.tone-ink .sv-txt, .tone-ink .sv-val, .tone-ink .sv-big, .tone-navy .sv-txt, .tone-navy .sv-val, .tone-navy .sv-big { fill: #fff; }
.tone-ink .sv-lab { fill: #B8B2A5; }

/* ---------------- Responsive ---------------- */
@media (max-width: 1100px) {
  .cover-title { font-size: clamp(46px, 8vw, 84px); }
  .crit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dossier { grid-template-columns: 260px minmax(0, 1fr); gap: 44px; padding: 48px; }
}
@media (max-width: 900px) {
  :root { --paper-fs: 17.5px; }
  .ch { padding: 100px 0 24px; }
  .ch:has(> .panel) { padding: 14px 0; }
  .panel { margin: 0 8px; border-radius: 24px; padding: 84px 0 80px; }
  .ch-head { margin-bottom: 36px; }
  .split { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 70px; }
  .cover-stage { padding: 30px 0 90px; justify-content: flex-start; }
  .cover-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cover-title { font-size: clamp(44px, 12vw, 66px); }
  .cover-sub { margin-top: 18px; }
  .cover-meta { margin-top: 20px; }
  .cover-visual { height: 300px; margin-top: 18px; }
  .portal-card { width: 52%; min-width: 0; top: 0; }
  .pc-body { padding: 12px 10px; gap: 9px; }
  .pc-row { grid-template-columns: 52px 1fr; }
  .pc-bars { height: 34px; }
  .check-card { width: 54%; min-width: 0; top: 50%; }
  .doc { width: 88px; height: 110px; left: -44px; padding: 10px 9px; }
  .doc span { font-size: 10px; }
  .scroll-cue { display: none; }

  .scrolly { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin-top: 10px; }
  .scrolly .graphic { order: -1; position: sticky; top: var(--hdr-h); height: 46vh; height: 46svh; z-index: 2; background: var(--tone-bg); margin: 0 calc(var(--gutter) * -1); padding: 10px var(--gutter); }
  .tone-blue .scrolly .graphic { background: #EDF5FB; }
  .tone-navy .scrolly .graphic { background: #144868; }
  .graphic .vis svg { max-height: calc(46svh - 20px); }
  .scrolly[data-scene="market"], .scrolly[data-scene="rules"] { min-height: 150vh; }
  .scrolly .steps { padding: 6vh 0 8vh; position: relative; z-index: 1; }
  .scrolly .step { margin-bottom: 34vh; }

  .rebuild-pin { gap: 26px; }
  .rb-card { min-height: 390px; padding: 24px 22px; }
  .rb-when { font-size: 26px; }
  .chip { font-size: 12.5px; padding: 8px 12px; }

  .lock-card { grid-template-columns: 76px 1fr; padding: 24px; }
  .lock-quote { font-size: 21px !important; }
  .banks { gap: 7px; }
  .bank-front { padding: 6px 6px 5px; border-radius: 10px; }
  .bank-face { border-radius: 10px; }
  .bank-row span { display: none; }
  .bank-row { justify-content: center; }
  .bank-icon { width: 16px; height: 13px; }
  .bank-back { padding: 2px; letter-spacing: -.02em; }
  .banks { gap: 5px; }

  .mech { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 26px 22px; border-radius: 20px; margin-bottom: 18px; }
  .mech-vis { order: -1; padding: 10px; }
  .mech-body { font-size: 17px !important; }

  .dossier { grid-template-columns: minmax(0, 1fr); padding: 30px 22px; gap: 26px; border-radius: 22px; margin-top: 100px; }
  .dossier-vis { position: relative; top: 0; }
  .conds { grid-template-columns: minmax(0, 1fr); }
  .chk { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 40px 0; }
  .chk-vis { position: relative; top: 0; max-width: 300px; }
  .crit { grid-template-columns: minmax(0, 1fr); }
  .qa-item { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 28px 0; }
  .src-cols { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cal-table { min-width: 0; table-layout: fixed; font-size: 13px; }
  .cal-table th, .cal-table td { padding: 10px 8px; }
  .cal-table thead th { font-size: 12px; }
  .cal-table th:nth-child(1) { width: 26%; } .cal-table th:nth-child(2) { width: 38%; }
  .cal-table tbody th { white-space: normal; }
  .statement { margin: 80px 0 48px; }
  .pull { margin: 80px 0; }
  .note { padding: 26px 24px; margin-top: 80px; }
  .closing { margin-top: 90px; }
  .ctaband { padding: 90px 0; margin-top: 80px; }
  /* the contents pill moves left so the next button has the right corner; on phones the button says Scroll until the reader starts */
  .toc { bottom: 14px; left: 14px; transform: none; align-items: flex-start; }
  .toc-pill { max-width: calc(100vw - 90px); }
  .next-btn { right: 14px; bottom: 14px; min-width: 48px; height: 48px; padding: 0 17px; }
  .next-btn.wide .nb-label { display: inline; }
}
@media (max-width: 600px) {
  :root { --gutter: 18px; }
  .wrap { padding: 0 var(--gutter); }
  .lead { font-size: 19px !important; }
}

/* ---------------- Reduced motion: the whole paper, still ---------------- */
@media (prefers-reduced-motion: reduce) {
  .scroll-cue i { display: none; }
  .toc-pill { transition: none; }
  .next-btn, .next-btn.done { transition: none; }
}