/* OGOFX homepage stylesheet. Built from build/system and build/sections.
   Order: tokens, base, sections 01-08, integration fixes. */


/* =====================================================================
   Design tokens
   ===================================================================== */

/* =====================================================================
   OGOFX design tokens — v3 "Emerald & Champagne"
   Evergreen depth, bone-paper light, champagne for action.
   There is NO blue anywhere in this system: not in links, focus rings,
   charts, gradients, shadows or meta colours.
   Every section stylesheet reads from these. Do not hard-code hex
   values in section CSS; add a token here if one is missing.

   Breakpoints (mobile-first, use min-width media queries):
     --bp-sm   480px   large phones
     --bp-md   768px   tablets portrait
     --bp-lg  1024px   tablets landscape / small laptops (desktop menu)
     --bp-xl  1280px   desktop
     --bp-2xl 1440px   wide desktop (container stops growing at 1240px)
   CSS custom properties can't be used inside @media, so write the px
   values literally:  @media (min-width: 768px) { ... }
   ===================================================================== */

:root {
  /* ---------- Palette (named) ---------- */
  /* Dark family — evergreen, never a tinted black */
  --c-deep:       #0A1A15;   /* footer, utility risk bar, deepest dark     */
  --c-evergreen:  #0E2620;   /* dark section base, header                  */
  --c-forest:     #15342C;   /* raised panel on dark                       */
  --c-forest-2:   #1C4137;   /* hover / second raise on dark               */
  --c-moss:       #2F5648;   /* lines on dark that must be visible         */

  /* Light family — bone paper, warm but never cream-yellow */
  --c-ivory:      #FBF9F4;   /* raised panels on bone, menu panels         */
  --c-bone:       #F5F2EA;   /* page background, light sections            */
  --c-linen:      #EDE7DA;   /* alt light section                          */
  --c-sand:       #E4DDCD;   /* inset wells on linen, table stripes        */
  --c-hairline:   #DAD2C1;   /* default line on light                      */
  --c-rule:       #B9AE96;   /* strong line on light / input borders       */

  /* Text */
  --c-ink:        #0F1F1A;   /* primary text on light   (15.3:1 on bone)   */
  --c-ink-2:      #3A4A44;   /* secondary text on light (8.4:1)            */
  --c-ink-3:      #56645E;   /* muted text on light     (5.6:1, 4.6 on sand) */
  --c-pearl:      #F3EFE5;   /* primary text on dark    (13.9:1 on evergreen) */
  --c-sage:       #B9C4BC;   /* secondary text on dark  (8.9:1)            */
  --c-lichen:     #93A69D;   /* muted text on dark      (6.2:1; 5.3 on forest) */

  /* Brand */
  --c-champagne:      #C9A961; /* THE action colour: primary button fill (ink text 7.6:1), links + focus on dark (7.1:1) */
  --c-champagne-300:  #D9BF84; /* hover on primary, buy price on dark (8.9:1)           */
  --c-champagne-050:  #F3EAD5; /* recommended-plan tint, selected row on light          */
  --c-bronze:         #755A1A; /* champagne when it must be TEXT on light: links, buy price (5.8:1 on bone) */
  --c-bronze-700:     #5E4712; /* link hover on light                                    */
  --c-jade:           #2E8A68; /* decorative jade (chart strokes on light, icon detail)  — not for text */

  /* Market semantics — light surfaces */
  --c-sell:  #B23048;   /* bid / sell, garnet-rose (5.5:1 on bone)   */
  --c-buy:   #755A1A;   /* ask / buy, bronze       (5.8:1 on bone)   */
  --c-up:    #0A6B4B;   /* positive change, jade   (5.8:1 on bone)   */
  --c-down:  #B23048;   /* negative change                           */
  --c-sell-tint: #F6E3E3;
  --c-buy-tint:  #F3EAD5;
  /* Market semantics — dark surfaces */
  --c-sell-on-dark: #F2949A;  /* 7.2:1 on evergreen */
  --c-buy-on-dark:  #D9BF84;  /* 8.9:1 on evergreen */
  --c-up-on-dark:   #66D3A6;  /* 8.7:1 on evergreen */
  --c-down-on-dark: #F2949A;

  /* Placeholder (must be replaced before launch) */
  --c-todo-bg:   #FFF1B8;
  --c-todo-line: #B58900;
  --c-todo-ink:  #3D2E00;

  /* ---------- Semantic surface roles ---------- */
  --surface-page:        var(--c-bone);
  --surface-alt:         var(--c-linen);
  --surface-raised:      var(--c-ivory);
  --surface-inset:       var(--c-sand);
  --surface-dark:        var(--c-evergreen);
  --surface-dark-raised: var(--c-forest);
  --surface-deepest:     var(--c-deep);

  /* ---------- Type families ---------- */
  /* One family, many weights: Hanken Grotesk carries hero, headings, UI,
     body and numbers (tabular figures for every number). Headings are
     set heavy with tight tracking; body is 400. --font-display is kept
     as an alias so existing section CSS keeps working. */
  --font-sans:    "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: var(--font-sans);

  /* ---------- Type scale (fluid; 360px -> 1440px) ---------- */
  --fs-2xs:  0.75rem;                                           /* 12  legal floor             */
  --fs-xs:   0.8125rem;                                         /* 13  captions, table meta    */
  --fs-sm:   0.9375rem;                                         /* 15  UI, buttons, nav        */
  --fs-base: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);          /* 16 -> 17 body               */
  --fs-md:   clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);           /* 17 -> 20 lead               */
  --fs-lg:   clamp(1.1875rem, 1.08rem + 0.45vw, 1.4375rem);     /* 19 -> 23 h4 / card title    */
  --fs-xl:   clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);         /* 22 -> 30 h3                 */
  --fs-2xl:  clamp(1.875rem, 1.4rem + 2.1vw, 3.25rem);          /* 30 -> 52 h2 section title   */
  --fs-3xl:  clamp(2.25rem, 1.6rem + 3vw, 4rem);                /* 36 -> 64 h1                 */
  --fs-4xl:  clamp(2.5rem, 1.4rem + 4.4vw, 4.75rem);            /* 40 -> 76 hero display       */

  --fw-display: 760;  /* hero */
  --fw-heading: 680;  /* h1-h2 */
  --fw-title:   620;  /* h3-h4, card titles */

  --lh-tight: 1;      /* display */
  --lh-snug:  1.12;   /* headings */
  --lh-ui:    1.35;   /* buttons, labels */
  --lh-body:  1.6;    /* paragraphs */

  --tr-display: -0.042em;
  --tr-heading: -0.03em;
  --tr-title:   -0.016em;
  --tr-ui:      0.005em;
  --tr-caps:    0.08em;   /* ONLY for the OGOFX wordmark and 3-letter currency codes */

  --measure:      66ch;   /* body copy */
  --measure-lead: 54ch;
  --measure-head: 20ch;

  /* ---------- Spacing (4px base) ---------- */
  --sp-1:  0.25rem;  /*   4 */
  --sp-2:  0.5rem;   /*   8 */
  --sp-3:  0.75rem;  /*  12 */
  --sp-4:  1rem;     /*  16 */
  --sp-5:  1.5rem;   /*  24 */
  --sp-6:  2rem;     /*  32 */
  --sp-7:  3rem;     /*  48 */
  --sp-8:  4rem;     /*  64 */
  --sp-9:  6rem;     /*  96 */
  --sp-10: 8rem;     /* 128 */

  --section-y:    clamp(4.5rem, 2.6rem + 8vw, 9.5rem);   /* 72 -> 152 vertical padding of a section */
  --section-y-sm: clamp(3rem, 2rem + 4vw, 5.5rem);        /* compact bands (risk, CTA) */
  --head-gap:     clamp(2rem, 1.4rem + 2.4vw, 4rem);      /* section heading -> content */

  /* ---------- Layout ---------- */
  --container:      1240px;
  --container-wide: 1400px;
  --container-text: 760px;
  --gutter:         clamp(1rem, 0.4rem + 2.7vw, 2.5rem); /* 16 -> 40 */
  --grid-gap:       clamp(1rem, 0.6rem + 1.6vw, 2rem);
  --header-h:       72px;
  --header-h-compact: 64px;

  /* ---------- Radii (hierarchy-aware) ---------- */
  --r-xs:   4px;     /* badges, todo, tiny chips      */
  --r-sm:   8px;     /* inputs, notes, menu rows      */
  --r-md:   14px;    /* cards / tiles, menu panels    */
  --r-lg:   22px;    /* major panels                  */
  --r-xl:   32px;    /* one hero-scale surface per page at most */
  --r-pill: 999px;   /* buttons, segmented control, chips */

  /* ---------- Elevation ---------- */
  /* Shadows are tinted with evergreen, layered, used sparingly. */
  --shadow-1: 0 1px 2px rgba(14, 38, 32, 0.07), 0 1px 1px rgba(14, 38, 32, 0.04);
  --shadow-2: 0 2px 4px rgba(14, 38, 32, 0.06), 0 8px 24px -6px rgba(14, 38, 32, 0.14);
  --shadow-3: 0 4px 8px rgba(14, 38, 32, 0.07), 0 24px 56px -16px rgba(14, 38, 32, 0.32);
  --shadow-dark: 0 1px 0 rgba(243, 239, 229, 0.06) inset, 0 30px 60px -20px rgba(3, 12, 10, 0.72);
  --shadow-menu: 0 1px 0 rgba(255, 252, 244, 0.6) inset, 0 2px 6px rgba(10, 26, 21, 0.10), 0 28px 60px -18px rgba(10, 26, 21, 0.45);

  /* lines */
  --line:         1px solid var(--c-hairline);
  --line-strong:  1px solid var(--c-rule);
  --line-dark:    1px solid rgba(243, 239, 229, 0.12);
  --line-dark-strong: 1px solid var(--c-moss);

  /* ---------- Motion ---------- */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 600ms;
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-std:    cubic-bezier(0.2, 0, 0, 1);

  /* ---------- Z-index ---------- */
  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  50;
  --z-header:  100;
  --z-drawer:  200;
  --z-skip:    1000;

  /* ---------- Focus (never blue) ---------- */
  --focus-ring: 0 0 0 2px var(--c-bone), 0 0 0 4px var(--c-bronze);          /* light */
  --focus-ring-dark: 0 0 0 2px var(--c-evergreen), 0 0 0 4px var(--c-champagne); /* dark */
}


/* =====================================================================
   Base: reset, type, layout, components, shell
   ===================================================================== */

/* =====================================================================
   OGOFX base v3 — reset, typography, layout primitives, components,
   risk components, utility risk bar, header + mega menu, mobile drawer,
   footer. Requires tokens.css first.
   Sections must NOT restyle these globally; scope overrides under the
   section root class (.s-hero .btn { ... }).
   ===================================================================== */

/* ---------- 1. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
  overflow-x: clip;
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; }
ul[role="list"], ol[role="list"], .list-reset { list-style: none; }
img, svg, video, picture { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
table { border-collapse: collapse; border-spacing: 0; }
summary { cursor: pointer; }
[hidden] { display: none !important; }

/* ---------- 2. Context colours ----------
   Components read these variables, so they work on light AND dark.
   A section switches context with .section--dark / .on-dark.       */
:root, .on-light {
  --fg:    var(--c-ink);
  --fg-2:  var(--c-ink-2);
  --fg-3:  var(--c-ink-3);
  --bg:    var(--c-bone);
  --bg-raised: var(--c-ivory);
  --bg-inset:  var(--c-linen);
  --line-c:    var(--c-hairline);
  --line-c-strong: var(--c-rule);
  --link:  var(--c-bronze);
  --link-hover: var(--c-bronze-700);
  --accent: var(--c-bronze);          /* accent that must read as text or a thin line */
  --accent-fill: var(--c-champagne);  /* accent used as a fill (dot, bar, button)     */
  --sell:  var(--c-sell);
  --buy:   var(--c-buy);
  --up:    var(--c-up);
  --down:  var(--c-down);
  --ring:  var(--focus-ring);
  --accent-detail: var(--c-bronze);
  --risk-accent: var(--c-bronze);
}
.section--alt { --bg: var(--c-linen); --bg-raised: var(--c-ivory); --bg-inset: var(--c-sand); }
.on-dark, .section--dark, .section--deep, .risk-bar, .site-header, .site-drawer, .site-footer {
  --fg:    var(--c-pearl);
  --fg-2:  var(--c-sage);
  --fg-3:  var(--c-lichen);
  --bg:    var(--c-evergreen);
  --bg-raised: var(--c-forest);
  --bg-inset:  var(--c-forest);
  --line-c:    rgba(243, 239, 229, 0.12);
  --line-c-strong: var(--c-moss);
  --link:  var(--c-champagne);
  --link-hover: var(--c-champagne-300);
  --accent: var(--c-champagne);
  --accent-fill: var(--c-champagne);
  --sell:  var(--c-sell-on-dark);
  --buy:   var(--c-buy-on-dark);
  --up:    var(--c-up-on-dark);
  --down:  var(--c-down-on-dark);
  --ring:  var(--focus-ring-dark);
  --accent-detail: var(--c-champagne);
  --risk-accent: var(--c-champagne);
  color-scheme: dark;
}
.section--deep, .site-footer, .risk-bar { --bg: var(--c-deep); --bg-raised: var(--c-evergreen); --bg-inset: var(--c-evergreen); }

/* ---------- 3. Body + typography ---------- */
body {
  min-height: 100vh;
  background: var(--c-bone);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-variant-numeric: lining-nums tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.has-drawer { overflow: hidden; }

/* One family: headings are heavy grotesk with tight tracking. */
h1, h2, h3, .t-display, .t-h1, .t-h2, .t-h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-heading);
  color: var(--fg);
  text-wrap: balance;
}
h4, h5, h6, .t-h4 { font-family: var(--font-sans); font-weight: var(--fw-title); color: var(--fg); }

.t-display { font-size: var(--fs-4xl); line-height: var(--lh-tight); letter-spacing: var(--tr-display); font-weight: var(--fw-display); }
.t-h1      { font-size: var(--fs-3xl); line-height: 1.02; letter-spacing: var(--tr-display); font-weight: var(--fw-heading); }
.t-h2      { font-size: var(--fs-2xl); line-height: 1.04; letter-spacing: var(--tr-heading); }
.t-h3      { font-size: var(--fs-xl);  line-height: var(--lh-snug); letter-spacing: -0.022em; font-weight: var(--fw-title); }
.t-h4      { font-size: var(--fs-lg);  line-height: 1.25; letter-spacing: var(--tr-title); }
.t-lead    { font-size: var(--fs-md);  line-height: 1.55; color: var(--fg-2); max-width: var(--measure-lead); text-wrap: pretty; }
.t-body    { font-size: var(--fs-base); color: var(--fg-2); max-width: var(--measure); text-wrap: pretty; }
.t-small   { font-size: var(--fs-sm); line-height: 1.5; color: var(--fg-2); }
.t-fine    { font-size: var(--fs-xs); line-height: 1.55; color: var(--fg-3); }
.t-label   { font-size: var(--fs-sm); font-weight: 600; line-height: var(--lh-ui); color: var(--fg); letter-spacing: var(--tr-ui); }
.t-meta    { font-size: var(--fs-xs); font-weight: 500; line-height: var(--lh-ui); color: var(--fg-3); }
.t-num     { font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; }
.t-muted   { color: var(--fg-3); }
.t-center  { text-align: center; }
.t-balance { text-wrap: balance; }

p { text-wrap: pretty; }
strong, b { font-weight: 650; }
::selection { background: var(--c-champagne); color: var(--c-ink); }

/* ---------- 4. Links ---------- */
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--link-hover); }
.link {
  color: var(--link);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  transition: text-decoration-color var(--dur-1) var(--ease-std), color var(--dur-1) var(--ease-std);
}
.link:hover { text-decoration-color: currentColor; }
.link--quiet { color: var(--fg); font-weight: 500; }
.link--quiet:hover { color: var(--link); }
.link .icon { display: inline-block; vertical-align: -0.18em; margin-left: 0.2em; }

/* ---------- 5. Focus, skip link, utilities ---------- */
:focus { outline: none; }
:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); border-radius: var(--r-xs); }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { box-shadow: var(--ring); }
input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: var(--ring); }

.skip-link {
  position: fixed;
  left: var(--sp-4);
  top: var(--sp-3);
  z-index: var(--z-skip);
  padding: 12px 18px;
  border-radius: var(--r-pill);
  background: var(--c-champagne);
  color: var(--c-ink);
  font-weight: 650;
  font-size: var(--fs-sm);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur-2) var(--ease-out);
}
.skip-link:focus, .skip-link:focus-visible { transform: none; box-shadow: 0 0 0 2px var(--c-evergreen), 0 0 0 4px var(--c-champagne); }

.visually-hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important; border: 0 !important;
}

/* Placeholder content the company must supply before launch */
.todo {
  display: inline;
  padding: 0.05em 0.35em;
  border-radius: var(--r-xs);
  background: var(--c-todo-bg);
  color: var(--c-todo-ink);
  box-shadow: inset 0 0 0 1px var(--c-todo-line);
  font-weight: 500;
  font-style: normal;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- 6. Layout primitives ---------- */
.wrap {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide { max-width: calc(var(--container-wide) + 2 * var(--gutter)); }
.wrap--text { max-width: calc(var(--container-text) + 2 * var(--gutter)); }

.section { position: relative; padding-block: var(--section-y); background: var(--bg); color: var(--fg); }
.section--alt  { background: var(--c-linen); }
.section--dark { background: var(--c-evergreen); }
.section--deep { background: var(--c-deep); }
.section--tight { padding-block: var(--section-y-sm); }
/* two bone sections in a row get a hairline instead of a gap of nothing */
.section:not(.section--dark):not(.section--deep):not(.section--alt) + .section:not(.section--dark):not(.section--deep):not(.section--alt) { border-top: var(--line); }

.section-head { display: grid; gap: var(--sp-4); margin-bottom: var(--head-gap); max-width: 46rem; }
.section-head > h2, .section-head .section-head__title { font-size: var(--fs-2xl); line-height: 1.04; letter-spacing: var(--tr-heading); }
.section-head p { font-size: var(--fs-md); line-height: 1.55; color: var(--fg-2); max-width: var(--measure-lead); }
.section-head--center { margin-inline: auto; text-align: center; justify-items: center; }
@media (min-width: 1024px) {
  .section-head--split { max-width: none; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: var(--grid-gap); }
  .section-head--split p { justify-self: end; }
}

.stack   { display: flex; flex-direction: column; gap: var(--stack-gap, var(--sp-4)); }
.stack-sm { --stack-gap: var(--sp-2); }
.stack-lg { --stack-gap: var(--sp-6); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--sp-3)); }

.grid   { display: grid; gap: var(--grid-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

.rule { height: 0; border: 0; border-top: 1px solid var(--line-c); margin: 0; }

/* ---------- 7. Icons ---------- */
.icon { width: 1.25rem; height: 1.25rem; flex: none; color: inherit; overflow: visible; }
.icon--xs { width: 0.875rem; height: 0.875rem; }
.icon--sm { width: 1rem; height: 1rem; }
.icon--md { width: 1.5rem; height: 1.5rem; }
.icon--lg { width: 2rem; height: 2rem; }
.icon--xl { width: 2.5rem; height: 2.5rem; }
.icon-frame {
  display: inline-grid; place-items: center;
  width: 3rem; height: 3rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-c-strong);
  color: var(--accent);
  background: var(--bg-raised);
}
.icon-frame .icon { width: 1.375rem; height: 1.375rem; }

/* ---------- 8. Buttons ---------- */
.btn {
  --btn-h: 48px;
  --btn-px: 22px;
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--btn-h);
  padding: 0 var(--btn-px);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 650;
  line-height: 1;
  letter-spacing: var(--tr-ui);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-1) var(--ease-std), border-color var(--dur-1) var(--ease-std), color var(--dur-1) var(--ease-std), transform var(--dur-2) var(--ease-out);
}
.btn:hover { color: var(--btn-fg); }
.btn:active { transform: translateY(1px); }
.btn .icon { width: 1.125rem; height: 1.125rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

/* champagne: the one action colour. Dark ink text on gold (7.6:1). */
.btn--primary {
  --btn-bg: var(--c-champagne); --btn-fg: var(--c-ink); --btn-bd: var(--c-champagne);
  box-shadow: 0 1px 0 rgba(255, 250, 235, 0.35) inset, 0 1px 2px rgba(14, 38, 32, 0.2);
}
.btn--primary:hover { --btn-bg: var(--c-champagne-300); --btn-bd: var(--c-champagne-300); --btn-fg: var(--c-ink); }

.btn--secondary { --btn-bg: transparent; --btn-fg: var(--fg); --btn-bd: var(--line-c-strong); }
.btn--secondary:hover { --btn-bd: var(--fg); }

.btn--ghost { --btn-fg: var(--fg); --btn-px: 14px; }
.btn--ghost:hover { --btn-bg: color-mix(in srgb, var(--fg) 8%, transparent); }

/* evergreen button for bone sections where a second solid action is needed */
.btn--dark { --btn-bg: var(--c-evergreen); --btn-fg: var(--c-pearl); --btn-bd: var(--c-evergreen); }
.btn--dark:hover { --btn-bg: var(--c-forest); --btn-bd: var(--c-forest); --btn-fg: var(--c-pearl); }

/* ivory button for dark panels where champagne would compete */
.btn--light { --btn-bg: var(--c-ivory); --btn-fg: var(--c-ink); --btn-bd: var(--c-ivory); }
.btn--light:hover { --btn-bg: var(--c-linen); --btn-bd: var(--c-linen); --btn-fg: var(--c-ink); }

.on-dark .btn--secondary, .section--dark .btn--secondary, .section--deep .btn--secondary, .site-header .btn--secondary, .site-drawer .btn--secondary {
  --btn-bd: rgba(243, 239, 229, 0.34);
}
.on-dark .btn--secondary:hover, .section--dark .btn--secondary:hover, .section--deep .btn--secondary:hover, .site-header .btn--secondary:hover, .site-drawer .btn--secondary:hover { --btn-bd: var(--c-pearl); }

.btn--sm { --btn-h: 44px; --btn-px: 18px; }
.btn--lg { --btn-h: 56px; --btn-px: 28px; font-size: var(--fs-base); }
.btn--block { width: 100%; }
.btn--icon { --btn-px: 0; width: var(--btn-h); }

/* ---------- 9. Segmented control + chips ---------- */
.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--bg-inset);
  box-shadow: inset 0 0 0 1px var(--line-c);
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.segmented::-webkit-scrollbar { display: none; }
.segmented > button, .segmented > a {
  flex: none;
  min-height: 40px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  color: var(--fg-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 40px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-2) var(--ease-std), color var(--dur-1) var(--ease-std), box-shadow var(--dur-2) var(--ease-std);
}
.segmented > :hover { color: var(--fg); }
.segmented > [aria-selected="true"], .segmented > [aria-pressed="true"], .segmented > [aria-current="true"] {
  background: var(--bg-raised);
  color: var(--fg);
  box-shadow: 0 0 0 1px var(--line-c), var(--shadow-1);
}
.on-dark .segmented > [aria-selected="true"], .section--dark .segmented > [aria-selected="true"],
.on-dark .segmented > [aria-pressed="true"], .section--dark .segmented > [aria-pressed="true"] { background: var(--c-forest-2); }
@media (pointer: coarse) { .segmented > button, .segmented > a { min-height: 44px; line-height: 44px; } }

.chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 32px; padding: 0 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-c-strong);
  color: var(--fg-2);
  font-size: var(--fs-xs); font-weight: 500;
  white-space: nowrap;
}
.chip .icon { width: 0.9rem; height: 0.9rem; }

/* ---------- 10. Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 3px 8px;
  border-radius: var(--r-xs);
  background: var(--bg-inset);
  color: var(--fg-2);
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.35;
  white-space: nowrap;
}
.badge--brand { background: var(--c-champagne-050); color: var(--c-bronze-700); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-champagne) 55%, transparent); }
.badge--up    { background: color-mix(in srgb, var(--up) 14%, transparent); color: var(--up); }
.badge--down  { background: color-mix(in srgb, var(--down) 14%, transparent); color: var(--down); }
.badge--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--line-c-strong); }
.badge--sample { background: transparent; box-shadow: inset 0 0 0 1px var(--line-c-strong); color: var(--fg-3); font-weight: 500; }
.badge--sample::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-fill); }
.on-dark .badge--brand, .section--dark .badge--brand { background: color-mix(in srgb, var(--c-champagne) 16%, transparent); color: var(--c-champagne-300); box-shadow: none; }

/* ---------- 11. Prices ---------- */
/* <span class="px px--buy"><span class="px__pre">1.08</span><span class="px__big">42</span><span class="px__pip">4</span></span>
   Sell = garnet-rose, Buy = bronze (light) / champagne (dark), Up = jade, Down = garnet-rose.
   Colour is never the only cue: always label Sell/Buy or show a sign. */
.px { display: inline-flex; align-items: baseline; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; line-height: 1; white-space: nowrap; color: var(--fg); }
.px__pre { font-size: 0.62em; font-weight: 500; letter-spacing: -0.01em; }
.px__big { font-size: 1em; font-weight: 650; letter-spacing: -0.02em; }
.px__pip { align-self: flex-start; font-size: 0.48em; font-weight: 600; margin-top: 0.06em; margin-left: 0.06em; }
.px--sell { color: var(--sell); }
.px--buy  { color: var(--buy); }
.is-up    { color: var(--up); }
.is-down  { color: var(--down); }
.tick-up, .tick-down { transition: background-color var(--dur-4) var(--ease-out); }
.tick-up   { background-color: color-mix(in srgb, var(--up) 16%, transparent); }
.tick-down { background-color: color-mix(in srgb, var(--down) 16%, transparent); }

/* ---------- 12. Forms ---------- */
.field { display: grid; gap: 6px; }
.field__label { font-size: var(--fs-sm); font-weight: 600; color: var(--fg); }
.field__hint { font-size: var(--fs-xs); color: var(--fg-3); }
.input, .select {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-c-strong);
  background: var(--bg-raised);
  color: var(--fg);
  font-size: var(--fs-base);
  transition: border-color var(--dur-1) var(--ease-std);
}
.input::placeholder { color: var(--fg-3); }
.input:hover, .select:hover { border-color: var(--fg-3); }
.input:focus-visible, .select:focus-visible { border-color: var(--accent); }

/* ---------- 13. Tables ---------- */
.table { width: 100%; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.table th, .table td { padding: 14px 16px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line-c); }
.table thead th { padding-block: 10px; font-size: var(--fs-xs); font-weight: 500; color: var(--fg-3); border-bottom-color: var(--line-c-strong); white-space: nowrap; }
.table tbody th { font-weight: 600; color: var(--fg); }
.table td { color: var(--fg-2); }
.table .num { text-align: right; }
.table td.px--sell, .table .px--sell { color: var(--sell); }
.table td.px--buy, .table .px--buy { color: var(--buy); }
.table td.is-up, .table .is-up { color: var(--up); }
.table td.is-down, .table .is-down { color: var(--down); }
.table .t-strong { color: var(--fg); font-weight: 600; }
.table tbody tr:last-child > * { border-bottom: 0; }
.table--hover tbody tr { transition: background-color var(--dur-1) var(--ease-std); }
.table--hover tbody tr:hover { background: color-mix(in srgb, var(--fg) 3%, transparent); }
.table--compact th, .table--compact td { padding: 10px 12px; }
.table-frame { border: 1px solid var(--line-c); border-radius: var(--r-md); background: var(--bg-raised); overflow-x: auto; overscroll-behavior-x: contain; }
.table-frame .table th:first-child, .table-frame .table td:first-child { padding-left: 20px; }
.table-frame .table th:last-child, .table-frame .table td:last-child { padding-right: 20px; }
@media (max-width: 599px) {
  .table { font-size: var(--fs-xs); }
  .table th, .table td { padding: 12px 8px; }
  .table-frame .table th:first-child, .table-frame .table td:first-child { padding-left: 14px; }
  .table-frame .table th:last-child, .table-frame .table td:last-child { padding-right: 14px; }
  .hide-sm { display: none !important; }
}

/* ---------- 14. Notes ---------- */
.note {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  background: var(--bg-inset);
  color: var(--fg-2);
  font-size: var(--fs-xs); line-height: 1.55;
}
.note .icon { width: 1rem; height: 1rem; margin-top: 0.15em; color: var(--fg-3); }
.note strong { color: var(--fg); }

/* =====================================================================
   15. RISK COMPONENTS
   Risk wording is never small grey text. It is set in --fg, at 13px
   minimum, with a champagne/bronze rule that reads as "important",
   not as an error (red is reserved for sell / down prices).

   .risk-note   inline risk warning for any section
                <p class="risk-note">{i-warning}<span><strong>Risk warning.</strong> CFDs are...</span></p>
                modifiers: --compact (13px, tighter), --band (full-width strip, no radius)
   .terms-note  promo terms next to every offer
                <p class="terms-note">{i-info}<span><strong>Terms apply.</strong> Eligibility... <a href="#">Full terms</a></span></p>
   ===================================================================== */
.risk-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 16px 18px 16px 16px;
  border: 1px solid var(--line-c-strong);
  border-left: 3px solid var(--risk-accent);
  border-radius: var(--r-sm);
  background: var(--bg-raised);
  color: var(--fg);
  font-size: var(--fs-sm);
  line-height: 1.55;
  max-width: 72ch;
}
.risk-note > .icon { width: 1.25rem; height: 1.25rem; margin-top: 0.1em; color: var(--risk-accent); }
.risk-note strong { font-weight: 700; color: var(--fg); }
.risk-note a { color: var(--link); font-weight: 600; }
.risk-note--compact { padding: 12px 14px 12px 12px; gap: 10px; font-size: var(--fs-xs); }
.risk-note--compact > .icon { width: 1.0625rem; height: 1.0625rem; }
.risk-note--band { max-width: none; border-radius: 0; border-inline: 0; border-left: 0; border-top: 2px solid var(--risk-accent); }

.terms-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--bg-inset);
  box-shadow: inset 0 0 0 1px var(--line-c);
  color: var(--fg-2);
  font-size: var(--fs-xs);
  line-height: 1.5;
}
.terms-note > .icon { width: 1rem; height: 1rem; margin-top: 0.12em; color: var(--accent); }
.terms-note strong { color: var(--fg); font-weight: 650; }
.terms-note a { color: var(--link); font-weight: 600; }

/* =====================================================================
   16. UTILITY RISK BAR (above the header, scrolls away)
   ===================================================================== */
.risk-bar {
  position: relative;
  z-index: calc(var(--z-header) + 1);
  background: var(--c-deep);
  color: var(--c-pearl);
  border-bottom: 1px solid rgba(201, 169, 97, 0.28);
  font-size: var(--fs-xs);
  line-height: 1.5;
}
.risk-bar__inner { display: flex; align-items: center; gap: var(--sp-5); padding-block: 9px; }
.risk-bar__text { display: flex; gap: 10px; align-items: flex-start; min-width: 0; flex: 1; }
.risk-bar__icon { width: 1rem; height: 1rem; margin-top: 0.1em; color: var(--c-champagne); }
.risk-bar__text strong { color: var(--c-champagne-300); font-weight: 700; }
.risk-bar__text a { color: var(--c-pearl); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(201, 169, 97, 0.7); white-space: nowrap; }
.risk-bar__text a:hover { color: var(--c-champagne-300); }
.risk-bar__links { display: none; gap: var(--sp-2); flex: none; }
.risk-bar__links a {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 0 8px;
  color: var(--c-sage); text-decoration: none; font-weight: 500;
  border-radius: var(--r-xs);
}
.risk-bar__links a:hover { color: var(--c-pearl); }
.risk-bar__links .icon { color: var(--c-lichen); }
@media (min-width: 1024px) {
  .risk-bar__links { display: flex; }
  .risk-bar__inner { padding-block: 8px; }
}

/* =====================================================================
   17. SITE HEADER + MEGA MENU (desktop, 1024px and up)
   ===================================================================== */
.site-header {
  --mega-gap: 10px;
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--c-evergreen);
  color: var(--fg);
  border-bottom: 1px solid rgba(243, 239, 229, 0.08);
  transition: background-color var(--dur-3) var(--ease-std), border-color var(--dur-3) var(--ease-std);
}
.site-header[data-scrolled="true"] {
  background: rgba(14, 38, 32, 0.9);
  border-bottom-color: rgba(243, 239, 229, 0.1);
  -webkit-backdrop-filter: saturate(130%) blur(14px);
  backdrop-filter: saturate(130%) blur(14px);
}
.site-header.is-open, .site-header.has-mega { background: var(--c-evergreen); }
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  height: var(--header-h);
  transition: height var(--dur-3) var(--ease-std);
}
.site-header[data-scrolled="true"] .site-header__inner { height: var(--header-h-compact); }

/* Brand */
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  color: var(--c-pearl);
  text-decoration: none;
  flex: none;
}
.brand:hover { color: var(--c-ivory); }
.brand__mark { width: 34px; height: 22px; overflow: visible; }
.brand__ring { fill: none; stroke: currentColor; stroke-width: 1.6; }
.brand__lens { fill: var(--c-champagne); }
.brand__word {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1;
  margin-right: -0.16em;
}
.brand__word span { color: var(--c-champagne); font-weight: 500; }
.brand--on-light { color: var(--c-ink); }
.brand--on-light .brand__word span { color: var(--c-bronze); }
.brand--on-light .brand__lens { fill: var(--c-champagne); }

/* top bar */
.mega { display: none; }
.mega__bar { display: flex; align-items: center; gap: 2px; list-style: none; }
.mega__item { position: relative; }
.mega__trigger {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px;
  padding: 0 12px 0 14px;
  border-radius: var(--r-pill);
  color: var(--c-sage);
  font-size: var(--fs-sm);
  font-weight: 560;
  letter-spacing: 0.002em;
  white-space: nowrap;
  transition: color var(--dur-1) var(--ease-std), background-color var(--dur-1) var(--ease-std);
}
.mega__chev { width: 0.875rem; height: 0.875rem; color: var(--c-lichen); transition: transform var(--dur-2) var(--ease-out), color var(--dur-1); }
.mega__trigger:hover { color: var(--c-pearl); }
.mega__trigger[aria-expanded="true"] { color: var(--c-pearl); background: rgba(243, 239, 229, 0.07); }
.mega__trigger[aria-expanded="true"] .mega__chev { transform: rotate(180deg); color: var(--c-champagne); }

/* the panel: an ivory card floating just under the header */
.mega__panel {
  position: absolute;
  left: -8px;
  top: calc(100% + (var(--header-h) - 44px) / 2 + var(--mega-gap));
  width: 392px;
  padding: 8px;
  border-radius: var(--r-md);
  background: var(--c-ivory);
  color: var(--c-ink);
  box-shadow: var(--shadow-menu);
  --fg: var(--c-ink); --fg-2: var(--c-ink-2); --fg-3: var(--c-ink-3);
  --bg-inset: var(--c-linen); --line-c: var(--c-hairline);
  --link: var(--c-bronze); --accent: var(--c-bronze); --ring: 0 0 0 2px var(--c-ivory), 0 0 0 4px var(--c-bronze);
  color-scheme: light;
  animation: mega-in var(--dur-2) var(--ease-out);
}
.site-header[data-scrolled="true"] .mega__panel { top: calc(100% + (var(--header-h-compact) - 44px) / 2 + var(--mega-gap)); }
/* hover bridge across the gap between trigger and panel */
.mega__panel::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: calc((var(--header-h) - 44px) / 2 + var(--mega-gap)); }
.mega__item:last-child .mega__panel { left: auto; right: -8px; }
.mega__panel:has(.mega__flyout:not([hidden])) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
@keyframes mega-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.mega__list { list-style: none; display: grid; gap: 2px; }
.mega__link {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 14px;
  width: 100%;
  min-height: 60px;
  padding: 10px 12px 10px 10px;
  border-radius: var(--r-sm);
  color: var(--c-ink);
  text-decoration: none;
  text-align: left;
  transition: background-color var(--dur-1) var(--ease-std);
}
.mega__link:hover, .mega__link--sub[aria-expanded="true"] { background: var(--c-linen); color: var(--c-ink); }
.mega__link--sub[aria-expanded="true"] { background: var(--c-champagne-050); }
.mega__icon {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-hairline);
  background: var(--c-bone);
  color: var(--c-evergreen);
  transition: border-color var(--dur-1), background-color var(--dur-1), color var(--dur-1);
}
.mega__icon .icon { width: 1.25rem; height: 1.25rem; }
.mega__link:hover .mega__icon, .mega__link--sub[aria-expanded="true"] .mega__icon { border-color: color-mix(in srgb, var(--c-champagne) 70%, transparent); background: var(--c-ivory); color: var(--c-bronze); }
.mega__text { display: grid; gap: 2px; min-width: 0; }
.mega__title { font-size: var(--fs-sm); font-weight: 650; line-height: 1.3; letter-spacing: -0.005em; color: var(--c-ink); }
.mega__desc { font-size: var(--fs-xs); line-height: 1.4; color: var(--c-ink-3); }
.mega__caret { width: 1rem; height: 1rem; color: var(--c-ink-3); transition: transform var(--dur-2) var(--ease-out), color var(--dur-1); }
.mega__link--sub:hover .mega__caret, .mega__link--sub[aria-expanded="true"] .mega__caret { color: var(--c-bronze); transform: translateX(2px); }

/* nested flyout: joins the panel on its right edge */
.mega__flyout {
  position: absolute;
  top: 0;
  left: calc(100% - 1px);
  width: 312px;
  min-height: 100%;
  padding: 8px;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--c-ivory);
  border-left: 1px solid var(--c-hairline);
  box-shadow: var(--shadow-menu);
  clip-path: inset(-80px -80px -80px 0);
  animation: fly-in var(--dur-2) var(--ease-out);
}
@keyframes fly-in { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
.mega__flyout-head { padding: 10px 12px 8px; font-size: var(--fs-xs); font-weight: 600; color: var(--c-ink-3); }
.mega__link--flat { min-height: 56px; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; padding-left: 12px; }
.mega__icon--flat { width: 24px; height: 24px; border: 0; background: none; color: var(--c-bronze); }
.mega__link--flat:hover .mega__icon--flat { background: none; }

/* panel footnote (Promotions) */
.terms-note--menu { margin: 6px 4px 4px; }

/* actions */
.site-header__actions { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.site-header__login { display: none; }
.site-header.is-open .site-header__cta { visibility: hidden; }

.menu-toggle {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px;
  margin-right: -10px;
  border-radius: var(--r-pill);
  color: var(--c-pearl);
}
.menu-toggle:hover { background: rgba(243, 239, 229, 0.07); }
.menu-toggle .icon { width: 1.5rem; height: 1.5rem; }
.menu-toggle .icon--close { display: none; }
.menu-toggle[aria-expanded="true"] .icon--open { display: none; }
.menu-toggle[aria-expanded="true"] .icon--close { display: block; }

@media (max-width: 379px) {
  .site-header__inner { gap: var(--sp-3); }
  .site-header__cta { --btn-px: 14px; }
}
@media (min-width: 560px) {
  .site-header__login { display: inline-flex; }
}
@media (min-width: 1024px) {
  .mega { display: block; margin-left: var(--sp-4); }
  .menu-toggle { display: none; }
  .site-drawer { display: none !important; }
}
@media (min-width: 1024px) and (max-width: 1179px) {
  .site-header__inner { gap: var(--sp-3); }
  .mega { margin-left: 0; }
  .mega__trigger { padding: 0 8px 0 10px; }
  .site-header__login { --btn-px: 10px; }
}
@media (min-width: 1280px) {
  .mega__trigger { padding: 0 14px 0 16px; }
}

/* =====================================================================
   18. MOBILE DRAWER (under 1024px)
   Full height below the header. Accordion groups mirror the mega menu;
   nested entries are sub-accordions. Actions stick to the bottom.
   ===================================================================== */
.site-drawer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  top: var(--drawer-top, var(--header-h));
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  background: var(--c-evergreen);
  color: var(--fg);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.site-drawer.is-open { opacity: 1; transform: none; }
.site-drawer__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-2) var(--gutter) var(--sp-6);
}

.dnav__groups { list-style: none; }
.dnav__group { border-bottom: 1px solid rgba(243, 239, 229, 0.1); }
.dnav__h { font: inherit; }
.dnav__trigger {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  width: 100%;
  min-height: 64px;
  color: var(--c-pearl);
  font-size: 1.375rem;
  font-weight: 680;
  letter-spacing: -0.025em;
  text-align: left;
}
.dnav__chev { width: 1.25rem; height: 1.25rem; color: var(--c-lichen); transition: transform var(--dur-3) var(--ease-out), color var(--dur-1); }
.dnav__trigger[aria-expanded="true"] { color: var(--c-champagne-300); }
.dnav__trigger[aria-expanded="true"] .dnav__chev { transform: rotate(180deg); color: var(--c-champagne); }
.dnav__panel { padding-bottom: var(--sp-4); animation: dnav-in var(--dur-3) var(--ease-out); }
@keyframes dnav-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.dnav__list { list-style: none; display: grid; gap: 2px; }
.dnav__link {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 14px;
  width: 100%;
  min-height: 60px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  color: var(--c-pearl);
  text-decoration: none;
  text-align: left;
}
.dnav__link:hover, .dnav__link:active { background: rgba(243, 239, 229, 0.05); color: var(--c-pearl); }
.dnav__link--sub[aria-expanded="true"] { background: var(--c-forest); }
.dnav__icon { width: 1.375rem; height: 1.375rem; color: var(--c-champagne); }
.dnav__text { display: grid; gap: 2px; min-width: 0; }
.dnav__title { font-size: 1rem; font-weight: 640; line-height: 1.3; }
.dnav__desc { font-size: var(--fs-xs); line-height: 1.4; color: var(--c-sage); }
.dnav__caret { width: 1.125rem; height: 1.125rem; color: var(--c-lichen); transition: transform var(--dur-3) var(--ease-out); }
.dnav__link--sub[aria-expanded="true"] .dnav__caret { transform: rotate(180deg); color: var(--c-champagne); }
.dnav__sub {
  list-style: none;
  display: grid;
  margin: 4px 0 8px 23px;
  padding-left: 14px;
  border-left: 1px solid var(--c-moss);
  animation: dnav-in var(--dur-3) var(--ease-out);
}
.dnav__sublink {
  display: flex; align-items: center; gap: 12px;
  min-height: 48px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  color: var(--c-pearl);
  font-size: var(--fs-sm);
  font-weight: 560;
  text-decoration: none;
}
.dnav__sublink:hover { background: rgba(243, 239, 229, 0.05); color: var(--c-pearl); }
.dnav__subicon { width: 1.125rem; height: 1.125rem; color: var(--c-lichen); }
.dnav__panel .terms-note { margin: 8px 0 4px; --bg-inset: var(--c-forest); }

.site-drawer__util { list-style: none; display: grid; gap: 2px; margin: var(--sp-5) 0 var(--sp-5); }
.site-drawer__util a {
  display: flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 0 12px;
  color: var(--c-sage); text-decoration: none; font-size: var(--fs-sm); font-weight: 500;
  border-radius: var(--r-sm);
}
.site-drawer__util a:hover { color: var(--c-pearl); background: rgba(243, 239, 229, 0.05); }
.site-drawer__util .icon { color: var(--c-lichen); }
.site-drawer .risk-note { --bg-raised: var(--c-forest); max-width: none; }

.site-drawer__actions {
  flex: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: var(--c-deep);
  border-top: 1px solid rgba(201, 169, 97, 0.24);
}
.site-drawer__actions .btn { --btn-h: 50px; padding-inline: 10px; }
@media (min-width: 600px) {
  .site-drawer__scroll, .site-drawer__actions { padding-inline: max(var(--gutter), calc((100vw - 640px) / 2)); }
}

/* =====================================================================
   19. SITE FOOTER
   ===================================================================== */
.site-footer {
  background: var(--c-deep);
  color: var(--fg-2);
  font-size: var(--fs-sm);
  padding-top: clamp(4rem, 3rem + 4vw, 6.5rem);
  padding-bottom: var(--sp-6);
}
.site-footer a { color: var(--c-sage); text-decoration: none; }
.site-footer a:hover { color: var(--c-pearl); text-decoration: underline; text-decoration-color: rgba(201, 169, 97, 0.6); }

.site-footer__top { display: grid; gap: var(--sp-8) var(--grid-gap); padding-bottom: clamp(3rem, 2rem + 3vw, 4.5rem); }
.site-footer__brand { display: grid; gap: var(--sp-5); align-content: start; max-width: 24rem; }
.site-footer__statement {
  font-size: var(--fs-lg);
  line-height: 1.25;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--c-pearl);
  text-wrap: balance;
}
.site-footer__contact { display: grid; gap: var(--sp-2); }
.site-footer__contact a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--c-pearl); }
.site-footer__contact .icon { width: 1.125rem; height: 1.125rem; color: var(--c-champagne); }
.site-footer__contact p { display: flex; align-items: center; gap: 10px; color: var(--c-sage); }

.site-footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-7) var(--grid-gap); }
.site-footer__pair { display: grid; gap: var(--sp-7); align-content: start; }
.site-footer__col h2 {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--c-pearl);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid rgba(201, 169, 97, 0.3);
}
.site-footer__col ul { list-style: none; display: grid; }
.site-footer__col a { display: inline-flex; align-items: center; min-height: 44px; line-height: 1.35; }
@media (pointer: fine) { .site-footer__col a { min-height: 36px; } }

/* full risk disclosure: the most prominent block in the footer */
.site-footer__risk {
  display: grid;
  gap: var(--sp-4) var(--grid-gap);
  padding: var(--sp-6) var(--sp-5);
  border-radius: var(--r-md);
  background: var(--c-evergreen);
  border: 1px solid rgba(201, 169, 97, 0.32);
  border-top: 3px solid var(--c-champagne);
}
.site-footer__risk-title {
  align-self: start;
  display: flex; align-items: center; gap: 10px;
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-pearl);
}
.site-footer__risk-title .icon { color: var(--c-champagne); }
.site-footer__risk-body { display: grid; gap: var(--sp-3); max-width: 80ch; }
.site-footer__risk-body p { font-size: var(--fs-sm); line-height: 1.65; color: var(--c-sage); }
.site-footer__risk-body .site-footer__risk-lead { font-size: var(--fs-base); line-height: 1.6; font-weight: 560; color: var(--c-pearl); }
.site-footer__risk a { color: var(--c-champagne-300); text-decoration: underline; text-decoration-color: rgba(201, 169, 97, 0.5); }

.site-footer__legal { display: grid; gap: var(--sp-5); padding: var(--sp-7) 0 var(--sp-6); font-size: var(--fs-xs); line-height: 1.65; color: var(--c-sage); }
.site-footer__legal > p { max-width: 90ch; }
.site-footer__reg { display: grid; gap: var(--sp-4) var(--grid-gap); grid-template-columns: minmax(0, 1fr); }
.site-footer__reg > div { display: grid; align-content: start; gap: 4px; padding-top: var(--sp-3); border-top: 1px solid rgba(243, 239, 229, 0.1); }
.site-footer__reg dt { font-size: var(--fs-xs); font-weight: 600; color: var(--c-lichen); }
.site-footer__reg dd { font-size: var(--fs-sm); line-height: 1.5; color: var(--c-pearl); }

.site-footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6);
  justify-content: space-between; align-items: center;
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(243, 239, 229, 0.1);
  font-size: var(--fs-xs);
  color: var(--c-lichen);
}

@media (max-width: 767px) {
  .site-footer__col[aria-labelledby="ft-legal"] { grid-column: 1 / -1; }
  .site-footer__col[aria-labelledby="ft-legal"] ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--grid-gap); }
}
@media (min-width: 600px) {
  .site-footer__reg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .site-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer__risk { padding: var(--sp-7) var(--sp-7); grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1024px) {
  .site-footer__top { grid-template-columns: minmax(0, 3.2fr) minmax(0, 8.8fr); }
  .site-footer__cols { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .site-footer__risk { grid-template-columns: minmax(0, 3.2fr) minmax(0, 8.8fr); }
  .site-footer__reg { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- 20. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 21. Forced colours ---------- */
@media (forced-colors: active) {
  .btn, .segmented > button, .badge, .todo, .mega__panel, .mega__flyout, .risk-note, .terms-note { border: 1px solid CanvasText; }
  :focus-visible { outline: 2px solid Highlight; }
}


/* =====================================================================
   Section 01-hero
   ===================================================================== */

/* =====================================================================
   01 HERO (#top) — .s-hero
   Copy + live sample quote terminal, then the short CFD risk band.
   Everything is scoped under .s-hero. Tokens only, no hex.
   ===================================================================== */

.s-hero {
  --hero-seam: color-mix(in srgb, var(--c-sage) 12%, transparent);
  --hero-well: color-mix(in srgb, var(--c-deep) 55%, var(--c-forest));
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(2.5rem, 1rem + 5vw, 6rem);
  padding-bottom: 0;
}

/* ---------- light: evergreen depth, a low jade glow, champagne from above ---------- */
.s-hero__light {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(46% 42% at 74% 46%, color-mix(in srgb, var(--c-jade) 15%, transparent), transparent 72%),
    radial-gradient(60% 30% at 70% 0%, color-mix(in srgb, var(--c-champagne) 8%, transparent), transparent 70%),
    linear-gradient(180deg, var(--c-evergreen) 0%, color-mix(in srgb, var(--c-deep) 55%, var(--c-evergreen)) 100%);
}

/* ---------- signature: engraved guilloche rosette behind the terminal ---------- */
.s-hero__rosette {
  position: absolute;
  z-index: 0;
  right: -40%;
  top: -12%;
  width: 88%;
  max-width: none;
  height: auto;
  aspect-ratio: 1;
  pointer-events: none;
  overflow: visible;
  fill: none;
  stroke: var(--c-champagne);
  stroke-width: 0.75;
  opacity: 0.4;
  -webkit-mask-image: radial-gradient(closest-side, black 70%, transparent 100%);
  mask-image: radial-gradient(closest-side, black 70%, transparent 100%);
}
.s-hero__rosette path, .s-hero__rosette circle { vector-effect: non-scaling-stroke; }

/* ---------- stage layout ---------- */
.s-hero__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(3rem, 2rem + 3vw, 4.5rem);
  padding-bottom: clamp(3.5rem, 2rem + 5vw, 7rem);
}
.s-hero__copy { min-width: 0; display: flex; flex-direction: column; }
/* the hero headline is set in a heavy grotesk: firmer than the serif on dark */
.s-hero__title {
  font-family: var(--font-sans);
  font-weight: var(--fw-display);
  font-size: clamp(2.5rem, 1.4rem + 4.2vw, 4.75rem);
  line-height: 0.98;
  letter-spacing: var(--tr-display);
  text-wrap: balance;
  max-width: 13ch;
  color: var(--fg);
}
.s-hero__lead { margin-top: var(--sp-5); max-width: 34rem; }

.s-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

/* key facts: three figures on hairlines */
.s-hero__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(2.5rem, 1.6rem + 2.4vw, 3.5rem);
  border-top: 1px solid color-mix(in srgb, var(--c-champagne) 45%, transparent);
  max-width: 34rem;
}
.s-hero__fact {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 4px;
  padding: var(--sp-4) var(--sp-4) 0;
  border-left: 1px solid var(--line-c);
  min-width: 0;
}
.s-hero__fact:first-child { padding-left: 0; border-left: 0; }
.s-hero__fact dt { font-size: var(--fs-xs); color: var(--fg-3); line-height: 1.35; }
.s-hero__fact dd {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--fg);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.s-hero__fact dd span { font-size: var(--fs-xs); font-weight: 500; color: var(--fg-2); letter-spacing: 0; }

.s-hero__reg {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--fg-3);
}
.s-hero__reg .icon { margin-top: 0.15em; color: var(--c-champagne); }

/* =====================================================================
   The terminal — a layered object, lit from above
   ===================================================================== */
.s-hero__device {
  position: relative;
  min-width: 0;
  margin: 0;
}

.s-hero__terminal {
  position: relative;
  z-index: 1;
  padding: 8px;
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--c-forest-2) 70%, var(--c-forest)) 0%, var(--c-forest) 38%);
  border: 1px solid color-mix(in srgb, var(--c-champagne) 30%, transparent);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--c-ivory) 10%, transparent) inset,
    0 40px 80px -30px color-mix(in srgb, var(--c-deep) 90%, transparent),
    0 0 0 1px color-mix(in srgb, var(--c-deep) 40%, transparent);
}
/* light catching the top bevel */
.s-hero__terminal::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 14%;
  right: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c-champagne-300) 80%, transparent), transparent);
  pointer-events: none;
}

/* header bar */
.s-hero__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 10px 12px 14px;
}
.s-hero__inst { display: flex; align-items: baseline; gap: var(--sp-3); min-width: 0; }
.s-hero__inst-sym {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--fg);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.s-hero__inst-name {
  font-size: var(--fs-xs);
  color: var(--fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* quote: two wells meeting on a seam, the spread sitting on the seam */
.s-hero__quote {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  container-type: inline-size;
}
.s-hero__side {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
  padding: 16px 18px 20px;
  background: var(--hero-well);
  transition: background-color var(--dur-4) var(--ease-out);
}
.s-hero__side--sell { border-radius: var(--r-md) 4px 4px var(--r-md); }
.s-hero__side--buy  { border-radius: 4px var(--r-md) var(--r-md) 4px; align-items: flex-end; text-align: right; }
.s-hero__side-label { font-size: var(--fs-xs); font-weight: 500; color: var(--fg-2); line-height: 1; }
.s-hero__price {
  font-size: clamp(2rem, 11.5cqi, 4.25rem);
  line-height: 0.9;
}
.s-hero__price .px__pre { font-weight: 450; opacity: 0.86; }
.s-hero__price .px__big { font-weight: 600; letter-spacing: -0.035em; }
.s-hero__price .px__pip { font-weight: 600; margin-top: 0.02em; }
.s-hero__price[data-long] { font-size: clamp(1.5rem, 8.4cqi, 3.25rem); }

.s-hero__side.tick-up   { background-color: color-mix(in srgb, var(--up) 6%, var(--hero-well)); }
.s-hero__side.tick-down { background-color: color-mix(in srgb, var(--down) 6%, var(--hero-well)); }

.s-hero__spread {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 64px;
  padding: 9px 12px 8px;
  border-radius: var(--r-sm);
  background: var(--c-forest);
  border: 1px solid var(--c-moss);
  line-height: 1;
}
.s-hero__spread::before {         /* the brass detail */
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 20px;
  height: 1px;
  transform: translateX(-50%);
  background: var(--c-champagne);
}
.s-hero__spread-val { font-size: var(--fs-sm); font-weight: 600; color: var(--fg); }
.s-hero__spread-unit { font-size: var(--fs-2xs); color: var(--fg-3); }

/* chart */
.s-hero__chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 18px 12px 8px;
  font-size: var(--fs-xs);
}
.s-hero__chg { font-weight: 600; }
.s-hero__chg:not(.is-up):not(.is-down) { color: var(--fg-2); }
.s-hero__range { display: flex; gap: var(--sp-4); color: var(--fg-3); white-space: nowrap; }
.s-hero__range-v { color: var(--fg-2); font-weight: 500; }

.s-hero__chart {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  height: clamp(124px, 9rem + 3vw, 196px);
  margin: 0 4px;
  border-top: 1px solid var(--hero-seam);
  border-bottom: 1px solid var(--hero-seam);
}
.s-hero__plot {
  position: relative;
  min-width: 0;
  background-image: linear-gradient(to bottom, var(--hero-seam) 1px, transparent 1px);
  background-size: 100% 25%;
  background-position: 0 -1px;
}
.s-hero__svg { position: absolute; inset: 10% 0 10% 0; width: 100%; height: 80%; overflow: visible; }
.s-hero__stop-a { stop-color: var(--c-champagne); stop-opacity: 0.26; }
.s-hero__stop-b { stop-color: var(--c-champagne); stop-opacity: 0; }
.s-hero__line {
  fill: none;
  stroke: var(--c-champagne);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.s-hero__level {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(10% + var(--hero-y, 50%) * 0.8);
  border-top: 1px dashed color-mix(in srgb, var(--c-sage) 34%, transparent);
  transition: top var(--dur-3) var(--ease-std);
}
.s-hero__dot {
  position: absolute;
  right: 0;
  top: calc(10% + var(--hero-y, 50%) * 0.8);
  width: 9px;
  height: 9px;
  margin: -4.5px -4.5px 0 0;
  border-radius: 50%;
  background: var(--c-pearl);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-champagne) 22%, transparent);
  transition: top var(--dur-3) var(--ease-std);
}
.s-hero__axis { position: relative; width: 84px; border-left: 1px solid var(--hero-seam); }
.s-hero__tag {
  position: absolute;
  left: 8px;
  top: calc(10% + var(--hero-y, 50%) * 0.8);
  transform: translateY(-50%);
  padding: 4px 7px;
  border-radius: var(--r-xs);
  background: var(--c-pearl);
  color: var(--c-ink);
  font-size: var(--fs-2xs);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition: top var(--dur-3) var(--ease-std);
}

/* watchlist */
.s-hero__watch { padding: 14px 4px 4px; }
.s-hero__watch-head,
.s-hero__row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.8fr);
  align-items: center;
  column-gap: var(--sp-3);
  padding-inline: 10px;
}
.s-hero__watch-head { padding-block: 0 8px; font-size: var(--fs-2xs); color: var(--fg-3); }
.s-hero__watch-head > :not(:first-child) { text-align: right; }
.s-hero__rows { display: grid; gap: 2px; }
.s-hero__row {
  position: relative;
  width: 100%;
  min-height: 48px;
  border-radius: var(--r-sm);
  text-align: left;
  font-size: var(--fs-sm);
  color: var(--fg-2);
  transition: background-color var(--dur-1) var(--ease-std);
}
.s-hero__row:hover { background: color-mix(in srgb, var(--c-pearl) 4%, transparent); }
.s-hero__row[aria-pressed="true"] { background: var(--c-forest-2); color: var(--fg); }
.s-hero__row[aria-pressed="true"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: 2px;
  background: var(--c-champagne);
}
.s-hero__row-sym { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-weight: 600; color: var(--fg); line-height: 1.25; }
.s-hero__row-name { font-size: var(--fs-2xs); font-weight: 400; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-hero__row-v { text-align: right; white-space: nowrap; font-weight: 500; }
.s-hero__row-v.is-sell { color: var(--sell); }
.s-hero__row-v.is-buy  { color: var(--buy); }
.s-hero__row-chg { font-size: var(--fs-xs); }
.s-hero__row-chg:not(.is-up):not(.is-down) { color: var(--fg-3); }
.s-hero__row-v [data-v], .s-hero__row-v[data-v] { border-radius: var(--r-xs); padding: 2px 4px; margin: -2px -4px; }
/* rows: a quiet brightening instead of a tinted box */
.s-hero__row .tick-up, .s-hero__row .tick-down { background-color: transparent; color: var(--fg); transition: color var(--dur-4) var(--ease-out); }

.s-hero__foot {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 12px 12px 6px;
  border-top: 1px solid var(--hero-seam);
  margin: 10px 2px 0;
  font-size: var(--fs-2xs);
  color: var(--fg-3);
}
.s-hero__clock { white-space: nowrap; }

/* ---------- risk band: set in full-strength text behind a champagne rule ---------- */
.s-hero__risk {
  position: relative;
  z-index: 1;
  background: var(--c-deep);
  border-top: 2px solid var(--c-champagne);
}
.s-hero__risk-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3);
  padding-block: var(--sp-5) var(--sp-6);
}
.s-hero__risk-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--fg);
  line-height: 1.3;
}
.s-hero__risk-title .icon { color: var(--c-champagne); }
.s-hero__risk-title strong { font-weight: 700; }
.s-hero__risk-text { max-width: 72ch; font-size: var(--fs-sm); line-height: 1.6; color: var(--fg); }
.s-hero__risk-text strong { font-weight: 650; }
.s-hero__risk-link { justify-self: start; font-size: var(--fs-sm); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
@media (min-width: 1024px) {
  .s-hero__risk-inner {
    grid-template-columns: 13rem minmax(0, 1fr) auto;
    column-gap: var(--sp-7);
    align-items: start;
    padding-block: var(--sp-6);
  }
  .s-hero__risk-title { padding-top: 0.15em; }
  .s-hero__risk-link { align-self: center; white-space: nowrap; }
}

/* ---------- single load moment ---------- */
@media (prefers-reduced-motion: no-preference) {
  .s-hero__device { animation: s-hero-rise calc(var(--dur-4) * 1.6) var(--ease-out) both 120ms; }
  .s-hero__line { stroke-dasharray: 100; animation: s-hero-draw calc(var(--dur-4) * 2.4) var(--ease-in-out) both 420ms; }
  .s-hero__area { animation: s-hero-fade var(--dur-4) var(--ease-out) both 1300ms; }
  .s-hero__dot, .s-hero__tag, .s-hero__level { animation: s-hero-fade var(--dur-3) var(--ease-out) both 1600ms; }
}
@keyframes s-hero-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes s-hero-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes s-hero-fade { from { opacity: 0; } to { opacity: 1; } }

/* =====================================================================
   Responsive
   ===================================================================== */

/* tablets: the key facts read as a short spec sheet */
@media (min-width: 768px) and (max-width: 1023px) {
  .s-hero__facts { grid-template-columns: minmax(0, 1fr); }
  .s-hero__fact {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-4);
    padding: 14px 0;
    border-left: 0;
    border-bottom: 1px solid var(--line-c);
  }
  .s-hero__fact:first-child { padding-left: 0; }
  .s-hero__fact dt { font-size: var(--fs-sm); color: var(--fg-2); }
  .s-hero__fact dd { font-size: var(--fs-base); text-align: right; }
}

/* phones and small tablets: headline, then the live quote, then the actions.
   The copy column dissolves so its children can interleave with the terminal. */
@media (max-width: 767px) {
  .s-hero { padding-top: var(--sp-7); }
  .s-hero__stage { gap: 0; padding-bottom: var(--sp-7); }
  .s-hero__copy { display: contents; }
  .s-hero__title { order: 1; font-size: clamp(2.375rem, 1.2rem + 6vw, 3.25rem); max-width: 12ch; }
  .s-hero__lead { order: 2; margin-top: var(--sp-4); font-size: var(--fs-base); line-height: 1.55; color: var(--fg-2); }
  .s-hero__device { order: 3; margin-top: var(--sp-6); }
  .s-hero__actions { order: 4; margin-top: var(--sp-6); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .s-hero__actions .btn { width: 100%; min-height: 50px; padding-inline: 12px; font-size: 0.9375rem; }
  .s-hero__facts { order: 5; margin-top: var(--sp-6); max-width: none; }
  .s-hero__reg { order: 6; margin-top: var(--sp-5); }

  /* key facts: one compact strip of three */
  .s-hero__fact { padding: 12px 10px 0; }
  .s-hero__fact dt { font-size: var(--fs-2xs); }
  .s-hero__fact dd { font-size: var(--fs-base); }

  /* terminal: shorter chart, watchlist becomes a swipeable rail */
  .s-hero__chart { height: 104px; }
  .s-hero__chart-head { padding: 12px 10px 6px; }
  .s-hero__watch { padding: 10px 0 2px; }
  .s-hero__watch-head { display: none; }
  .s-hero__rows {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 2px 4px 4px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, black 82%, transparent);
    mask-image: linear-gradient(90deg, black 82%, transparent);
  }
  .s-hero__rows::-webkit-scrollbar { display: none; }
  .s-hero__row {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: baseline;
    gap: 4px 14px;
    width: auto;
    min-width: 132px;
    min-height: 0;
    padding: 10px 12px;
    border: 1px solid var(--hero-seam);
    scroll-snap-align: start;
  }
  .s-hero__row[aria-pressed="true"] { border-color: color-mix(in srgb, var(--c-champagne) 45%, transparent); }
  .s-hero__row[aria-pressed="true"]::before { display: none; }
  .s-hero__row-sym { grid-column: 1; grid-row: 1; font-size: var(--fs-xs); }
  .s-hero__row-name { display: none; }
  .s-hero__row-chg { grid-column: 2; grid-row: 1; display: block; font-size: var(--fs-2xs); }
  .s-hero__row-v.is-sell { grid-column: 1 / -1; grid-row: 2; text-align: left; font-size: var(--fs-sm); color: var(--fg); }
  .s-hero__row-v.is-buy { display: none; }
  .s-hero__foot { padding: 10px 10px 4px; margin-top: 8px; }
}

/* very narrow phones: actions stack */
@media (max-width: 359px) {
  .s-hero__actions { grid-template-columns: minmax(0, 1fr); }
}

/* phones: the terminal sheds detail */
@media (max-width: 479px) {
  .s-hero__price { font-size: clamp(2rem, 13cqi, 3rem); }
  .s-hero__price[data-long] { font-size: clamp(1.375rem, 9cqi, 2.25rem); }
  .s-hero__device { margin-inline: calc(var(--gutter) * -0.5); }
  .s-hero__rosette { width: 110%; right: -46%; top: -22%; }
  .s-hero__inst-name { display: none; }
  .s-hero__side { padding: 14px 14px 18px; }
  .s-hero__spread { min-width: 56px; padding: 8px 10px 7px; bottom: 12px; }
  .s-hero__range > :last-child { display: none; }
  .s-hero__axis { width: 70px; }
  .s-hero__row { font-size: var(--fs-xs); }
  .s-hero__foot { flex-direction: column; gap: 2px; }
}

@media (min-width: 480px) and (max-width: 767px) {
  .s-hero__actions .btn { flex: 1 1 auto; }
}

/* tablets: copy keeps a measured column, terminal centred beneath */
@media (min-width: 768px) {
  .s-hero__title { max-width: 14ch; }
  .s-hero__device { max-width: 640px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .s-hero__stage { gap: var(--sp-8); }
  .s-hero__copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--grid-gap); }
  .s-hero__title { grid-column: 1 / -1; max-width: 15ch; }
  .s-hero__lead { grid-column: 1; grid-row: 2; }
  .s-hero__facts { grid-column: 2; grid-row: 2; align-self: start; margin-top: 0.4rem; }
  .s-hero__actions { grid-column: 1 / -1; grid-row: 3; }
  .s-hero__reg { grid-column: 1 / -1; }
  .s-hero__device { max-width: none; }
}

/* desktop: two columns, terminal on the light */
@media (min-width: 1024px) {
  .s-hero__stage {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
    column-gap: clamp(3rem, -1rem + 5vw, 6rem);
  }
  .s-hero__title { max-width: 11ch; }
  .s-hero__device { max-width: none; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .s-hero__stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); column-gap: var(--sp-7); }
  .s-hero__title { font-size: clamp(2.75rem, 0.5rem + 4.4vw, 3.75rem); }
  .s-hero__fact { padding-inline: var(--sp-3) 0; }
  .s-hero__fact dd { font-size: var(--fs-base); }
}
@media (min-width: 1280px) {
  .s-hero__terminal { padding: 10px; }
  .s-hero__side { padding: 20px 22px 26px; }
}

@media (forced-colors: active) {
  .s-hero__terminal, .s-hero__side, .s-hero__row { border: 1px solid CanvasText; }
  .s-hero__line { stroke: CanvasText; }
}


/* =====================================================================
   Section 02-markets
   ===================================================================== */

/* =====================================================================
   OGOFX — Markets section (#markets, .s-markets). Bone surface.
   Every selector is scoped under .s-markets. Tokens only.
   The asset-class index is the tab list: four index tabs sit on top of
   the price ledger like the tabs of a bound ledger, the selected one
   joined to the sheet below. Desktop/tablet: instrument table.
   Under 768px: compact two-line rows, first five rows + "Show all".
   ===================================================================== */

.s-markets { --mk-pad: 24px; }
.s-markets .s-markets__head p { max-width: 44ch; }

/* ---------- index tabs ---------- */
.s-markets .s-markets__tabs {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.s-markets .s-markets__tab {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name icon"
    "fig  fig"
    "text text";
  align-content: start;
  min-width: 0;
  min-height: 44px;
  margin-bottom: -1px;
  padding: 20px var(--mk-pad) 22px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: var(--r-md) var(--r-md) 0 0;
  color: var(--fg-2);
  text-align: left;
  transition: background-color var(--dur-2) var(--ease-std), color var(--dur-1) var(--ease-std);
}
/* hairline divider between unselected neighbours */
.s-markets .s-markets__tab + .s-markets__tab::after {
  content: "";
  position: absolute;
  left: -1px;
  top: 22px;
  bottom: 22px;
  width: 1px;
  background: var(--line-c);
}
.s-markets .s-markets__tab[aria-selected="true"]::after,
.s-markets .s-markets__tab[aria-selected="true"] + .s-markets__tab::after { display: none; }
.s-markets .s-markets__tab:hover { color: var(--fg); background: color-mix(in srgb, var(--c-linen) 60%, transparent); }
.s-markets .s-markets__tab[aria-selected="true"] {
  border-color: var(--line-c);
  background: var(--bg-raised);
  color: var(--fg);
  padding-bottom: 23px;
}
/* champagne index mark on the selected tab */
.s-markets .s-markets__tab::before {
  content: "";
  position: absolute;
  top: -1px;
  left: var(--mk-pad);
  width: 32px;
  height: 3px;
  border-radius: 0 0 2px 2px;
  background: var(--accent-fill);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-3) var(--ease-out);
}
.s-markets .s-markets__tab[aria-selected="true"]::before { transform: none; }
.s-markets .s-markets__tab:focus-visible { z-index: 2; }

.s-markets .s-markets__tab-icon { grid-area: icon; color: var(--fg-3); }
.s-markets .s-markets__tab[aria-selected="true"] .s-markets__tab-icon { color: var(--accent); }
.s-markets .s-markets__tab-name { grid-area: name; font-size: var(--fs-base); font-weight: 650; line-height: var(--lh-ui, 1.3); }
.s-markets .s-markets__tab-fig {
  grid-area: fig;
  margin: 18px 0 6px;
  font-size: var(--fs-lg);
  font-weight: 680;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.s-markets .s-markets__tab-text { grid-area: text; max-width: 24ch; color: var(--fg-3); font-size: var(--fs-xs); line-height: 1.45; }
.s-markets .s-markets__tab[aria-selected="true"] .s-markets__tab-text { color: var(--fg-2); }

/* ---------- the ledger sheet ---------- */
.s-markets .s-markets__frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-c);
  border-radius: var(--r-md);
  background: var(--bg-raised);
  box-shadow: var(--shadow-1);
}
.s-markets .s-markets__frame[data-cat="forex"]  { border-top-left-radius: 0; }
.s-markets .s-markets__frame[data-cat="energy"] { border-top-right-radius: 0; }

.s-markets .s-markets__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  padding: 16px var(--mk-pad);
  border-bottom: 1px solid var(--line-c);
}
.s-markets .s-markets__clock { white-space: nowrap; color: var(--fg-3); }
.s-markets .s-markets__clock time { color: var(--fg-2); }
.s-markets .s-markets__note { margin: 0 0 0 auto; color: var(--fg-2); }

/* ---------- table ---------- */
.s-markets .s-markets__table { table-layout: fixed; }
.s-markets .s-markets__table th:first-child,
.s-markets .s-markets__table td:first-child { padding-left: var(--mk-pad); }
.s-markets .s-markets__table th:last-child,
.s-markets .s-markets__table td:last-child { padding-right: var(--mk-pad); }
.s-markets .s-markets__table thead th { padding-block: 12px; }
.s-markets .s-markets__table .s-markets__c-name  { width: auto; }
.s-markets .s-markets__table .s-markets__c-sell,
.s-markets .s-markets__table .s-markets__c-buy   { width: 16%; }
.s-markets .s-markets__table .s-markets__c-spread { width: 12%; }
.s-markets .s-markets__table .s-markets__c-chg   { width: 11%; }
.s-markets .s-markets__table .s-markets__c-spark { width: 184px; padding-left: var(--sp-6); }

.s-markets .s-markets__table tbody th,
.s-markets .s-markets__table tbody td { padding-block: 17px; }
.s-markets .s-markets__row { transition: background-color var(--dur-1) var(--ease-std); }
.s-markets .s-markets__row:nth-last-child(1 of :not([hidden])) > * { border-bottom: 0; }
.s-markets .s-markets__row:hover { background: color-mix(in srgb, var(--c-champagne-050) 55%, transparent); }

.s-markets .s-markets__sym {
  display: block;
  color: var(--fg);
  font-size: var(--fs-base);
  font-weight: 650;
  line-height: 1.3;
}
.s-markets .s-markets__desc {
  display: block;
  margin-top: 2px;
  color: var(--fg-3);
  font-size: var(--fs-xs);
  font-weight: 400;
  line-height: 1.4;
}

/* quote: the dealer-board split price in a flashable well */
.s-markets .s-markets__q {
  display: inline-block;
  margin-right: -8px;
  padding: 6px 8px;
  border-radius: var(--r-xs);
  font-size: 1.3125rem; /* drives .px em sizes: 21px big figures */
  line-height: 1;
}
.s-markets .s-markets__q .px__pip { margin-left: 0.08em; }

.s-markets .s-markets__spread { color: var(--fg); font-weight: 500; white-space: nowrap; }
.s-markets .s-markets__spread-k {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.s-markets .s-markets__unit { color: var(--fg-3); font-size: var(--fs-xs); font-weight: 400; }
.s-markets .s-markets__chg { font-weight: 600; white-space: nowrap; }

/* sparkline */
.s-markets .s-markets__spark { display: block; width: 112px; height: 32px; overflow: visible; }
.s-markets .s-markets__spark-open {
  stroke: var(--line-c-strong);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  vector-effect: non-scaling-stroke;
}
.s-markets .s-markets__spark-line {
  fill: none;
  stroke: var(--trend, var(--fg-3));
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.s-markets .s-markets__spark-area { fill: var(--trend, var(--fg-3)); opacity: 0.08; stroke: none; }
.s-markets .s-markets__spark-dot { fill: var(--trend, var(--fg-3)); stroke: var(--bg-raised); stroke-width: 1.5; }
.s-markets .s-markets__spark[data-trend="up"]   { --trend: var(--up); }
.s-markets .s-markets__spark[data-trend="down"] { --trend: var(--down); }

/* ---------- sheet footer ---------- */
.s-markets .s-markets__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-6);
  padding: var(--sp-4) var(--mk-pad);
  border-top: 1px solid var(--line-c);
  background: var(--bg-inset);
}
.s-markets .s-markets__foot p { max-width: 70ch; margin: 0; color: var(--fg-2); }
.s-markets .s-markets__more .icon { transition: transform var(--dur-2) var(--ease-std); }
.s-markets .s-markets__more[aria-expanded="true"] .icon { transform: rotate(180deg); }

/* ---------- 768–1023: tighter ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .s-markets { --mk-pad: 16px; }
  .s-markets .s-markets__tab { padding-top: 18px; padding-bottom: 18px; }
  .s-markets .s-markets__tab[aria-selected="true"] { padding-bottom: 19px; }
  .s-markets .s-markets__tab-fig { margin-top: 14px; font-size: var(--fs-base); }
  .s-markets .s-markets__table th,
  .s-markets .s-markets__table td { padding-inline: 10px; }
  .s-markets .s-markets__table .s-markets__c-sell,
  .s-markets .s-markets__table .s-markets__c-buy { width: 17%; }
  .s-markets .s-markets__table .s-markets__c-spread { width: 13%; }
  .s-markets .s-markets__table .s-markets__c-chg { width: 12%; }
  .s-markets .s-markets__table .s-markets__c-spark { width: 96px; padding-left: var(--sp-3); }
  .s-markets .s-markets__spark { width: 72px; height: 24px; }
  .s-markets .s-markets__q { font-size: 1.1875rem; }
  .s-markets .s-markets__desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .s-markets .s-markets__note { flex-basis: 100%; margin-left: 0; }
}

@media (min-width: 768px) {
  .s-markets .s-markets__more { display: none; }
}

/* ---------- under 768px: compact ledger ---------- */
@media (max-width: 767px) {
  .s-markets { --mk-pad: 14px; --mk-q: 80px; }

  /* tabs: icon and name, stacked and centred */
  .s-markets .s-markets__tab {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "icon" "name";
    justify-items: center;
    row-gap: 4px;
    padding: 12px 2px 11px;
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    text-align: center;
  }
  .s-markets .s-markets__tab[aria-selected="true"] { padding-bottom: 12px; }
  .s-markets .s-markets__tab + .s-markets__tab::after { top: 14px; bottom: 14px; }
  .s-markets .s-markets__tab::before { left: 50%; width: 24px; margin-left: -12px; transform-origin: center; }
  .s-markets .s-markets__tab-name { font-size: var(--fs-sm); }
  .s-markets .s-markets__tab-fig { display: none; }
  .s-markets .s-markets__tab-text { display: none; }
  .s-markets .s-markets__frame { border-radius: var(--r-sm); }
  .s-markets .s-markets__frame[data-cat="forex"]  { border-top-left-radius: 0; }
  .s-markets .s-markets__frame[data-cat="energy"] { border-top-right-radius: 0; }

  .s-markets .s-markets__bar { padding-block: 12px; }
  .s-markets .s-markets__clock { margin-left: auto; }
  .s-markets .s-markets__note { flex-basis: 100%; margin: 0; }

  /* table as a grid of two-line rows; Sell and Buy headers stay visible */
  .s-markets .s-markets__table,
  .s-markets .s-markets__table thead,
  .s-markets .s-markets__table tbody { display: block; width: 100%; }
  .s-markets .s-markets__table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--mk-q) var(--mk-q);
    column-gap: 10px;
    align-items: center;
    padding: 0 var(--mk-pad);
  }
  .s-markets .s-markets__table thead tr { padding-block: 8px; background: var(--bg-inset); border-bottom: 1px solid var(--line-c); }
  .s-markets .s-markets__table thead tr > th { width: auto; padding: 0; border: 0; font-size: var(--fs-2xs); }
  .s-markets .s-markets__table thead tr > th.num { text-align: right; }
  .s-markets .s-markets__table thead tr > .s-markets__c-name { grid-column: 1; width: auto; }
  .s-markets .s-markets__table thead tr > .s-markets__c-sell { grid-column: 2; width: auto; }
  .s-markets .s-markets__table thead tr > .s-markets__c-buy  { grid-column: 3; width: auto; }
  .s-markets .s-markets__table th:first-child,
  .s-markets .s-markets__table td:first-child,
  .s-markets .s-markets__table th:last-child,
  .s-markets .s-markets__table td:last-child { padding-inline: 0; }
  .s-markets .s-markets__table thead .s-markets__c-spread,
  .s-markets .s-markets__table thead .s-markets__c-chg,
  .s-markets .s-markets__table thead .s-markets__c-spark { display: none; }

  .s-markets .s-markets__row {
    grid-template-rows: auto auto;
    row-gap: 6px;
    padding-block: 13px 12px;
    border-bottom: 1px solid var(--line-c);
  }
  .s-markets .s-markets__row:nth-last-child(1 of :not([hidden])) { border-bottom: 0; }
.s-markets .s-markets__row:hover { background: transparent; }
  .s-markets .s-markets__table .s-markets__row > th,
  .s-markets .s-markets__table .s-markets__row > td {
    width: auto;
    min-width: 0;
    padding: 0;
    border: 0;
  }
  .s-markets .s-markets__table .s-markets__row > .s-markets__c-name { grid-column: 1; grid-row: 1; }
  .s-markets .s-markets__desc { display: none; }
  .s-markets .s-markets__table .s-markets__row > .s-markets__c-sell { grid-column: 2; grid-row: 1; }
  .s-markets .s-markets__table .s-markets__row > .s-markets__c-buy  { grid-column: 3; grid-row: 1; }
  .s-markets .s-markets__q { margin-right: -6px; padding: 4px 6px; font-size: 1.125rem; }

  .s-markets .s-markets__table .s-markets__row > .s-markets__c-chg { grid-column: 1; grid-row: 2; text-align: left; }
  .s-markets .s-markets__chg { font-size: var(--fs-xs); }
  .s-markets .s-markets__table .s-markets__row > .s-markets__c-spark { grid-column: 1; grid-row: 2; justify-self: end; }
  .s-markets .s-markets__spark { width: 52px; height: 16px; }
  .s-markets .s-markets__table .s-markets__row > .s-markets__c-spread { grid-column: 2 / 4; grid-row: 2; text-align: right; }
  .s-markets .s-markets__spread { color: var(--fg-3); font-size: var(--fs-xs); font-weight: 500; }
  .s-markets .s-markets__spread-k { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .s-markets .s-markets__unit { font-size: inherit; }

  .s-markets .s-markets__frame:not(.is-expanded) .s-markets__row.is-extra { display: none; }
  .s-markets .s-markets__frame:not(.is-expanded) .s-markets__row:nth-last-child(1 of :not(.is-extra):not([hidden])) { border-bottom: 0; }

  .s-markets .s-markets__foot { flex-direction: column; align-items: stretch; padding: var(--sp-4) var(--mk-pad); }
  .s-markets .s-markets__more { width: 100%; order: -1; }
}

@media (max-width: 374px) {
  .s-markets { --mk-q: 74px; --mk-pad: 12px; }
  .s-markets .s-markets__table tr { column-gap: 8px; }
  .s-markets .s-markets__q { font-size: 1.0625rem; }
  .s-markets .s-markets__tab-name { font-size: 0.875rem; }
}

@media (prefers-reduced-motion: reduce) {
  .s-markets .s-markets__tab,
  .s-markets .s-markets__tab::before,
  .s-markets .s-markets__row,
  .s-markets .s-markets__more .icon { transition: none; }
}


/* =====================================================================
   Section 03-accounts
   ===================================================================== */

/* =====================================================================
   03 Accounts: .s-accounts (linen surface, section--alt)
   One ledger: tier heads are the table's column heads, so the headline
   price and the precise specs read as one instrument. The recommended
   Raw column is the section's one bold move: an evergreen head with a
   champagne cap, running down the ledger as a champagne-tinted lane.
   Specs are grouped (What you pay / Account terms). The demo account is
   docked to the foot of the ledger. Below: a worked cost example.
   Under 768px the ledger becomes one tier at a time (JS adds
   .is-enhanced and reveals the switcher).
   ===================================================================== */

.s-accounts {
  --acc-lane: var(--c-champagne-050);
  --acc-label-w: 25%;
  --acc-pad-x: clamp(1rem, 0.4rem + 1.5vw, 2rem);
}

/* ---------- Ledger frame ---------- */
.s-accounts .s-accounts__ledger {
  position: relative;
  border: 1px solid var(--line-c);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}

.s-accounts .s-accounts__table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.s-accounts .s-accounts__table > thead > tr > :first-child,
.s-accounts .s-accounts__table > tbody > tr > th:not([colspan]) { width: var(--acc-label-w); }

/* ---------- Corner ---------- */
.s-accounts .s-accounts__corner {
  vertical-align: bottom;
  padding: var(--sp-7) var(--acc-pad-x) var(--sp-6);
  border-bottom: 1px solid var(--line-c-strong);
}
.s-accounts .s-accounts__corner-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-title);
  letter-spacing: var(--tr-title);
  line-height: 1.2;
  color: var(--fg);
}
.s-accounts .s-accounts__corner-text {
  margin-top: var(--sp-3);
  max-width: 24ch;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--fg-3);
}

/* ---------- Tier heads ---------- */
.s-accounts .s-accounts__tier {
  position: relative;
  vertical-align: top;
  text-align: left;
  font-weight: 400;
  padding: var(--sp-7) var(--acc-pad-x) var(--sp-6);
  border-bottom: 1px solid var(--line-c-strong);
  border-left: 1px solid var(--line-c);
}
.s-accounts .s-accounts__name {
  font-size: var(--fs-xl);
  font-weight: var(--fw-heading);
  line-height: 1.05;
  letter-spacing: -0.028em;
  color: var(--fg);
}
.s-accounts .s-accounts__for {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--fg-2);
}
.s-accounts .s-accounts__price {
  display: flex;
  align-items: baseline;
  gap: 0.3em;
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-c);
  color: var(--fg);
  line-height: 0.9;
}
.s-accounts .s-accounts__figure {
  font-size: clamp(2.5rem, 1.7rem + 2vw, 3.75rem);
  font-weight: 740;
  letter-spacing: -0.05em;
}
.s-accounts .s-accounts__unit {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--fg-2);
}
.s-accounts .s-accounts__price-note {
  margin-top: var(--sp-3);
  min-height: 2.9em;              /* keeps the CTAs level when the note wraps */
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--fg-3);
}
.s-accounts .s-accounts__cta { margin-top: var(--sp-5); }

/* Recommended tier: evergreen head, champagne cap, champagne lane below */
.s-accounts .s-accounts__tier--pick {
  background: var(--c-evergreen);
  color: var(--fg);
  border-left-color: var(--c-evergreen);
  border-bottom-color: var(--c-evergreen);
}
.s-accounts .s-accounts__tier--pick::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--c-champagne);
}
.s-accounts .s-accounts__tier--pick + .s-accounts__tier { border-left-color: var(--c-evergreen); }
.s-accounts .s-accounts__badge {
  position: absolute;
  top: var(--sp-5);
  right: var(--acc-pad-x);
}
.s-accounts tbody td[data-tier="raw"] {
  background: var(--acc-lane);
  border-left-color: color-mix(in srgb, var(--c-champagne) 45%, var(--line-c));
}
.s-accounts tbody td[data-tier="raw"] + td { border-left-color: color-mix(in srgb, var(--c-champagne) 45%, var(--line-c)); }
.s-accounts .s-accounts__group-row + tr td[data-tier="raw"] { border-top: 0; }

/* ---------- Group rows ---------- */
.s-accounts .s-accounts__table .s-accounts__group-row > th {
  padding: var(--sp-6) var(--acc-pad-x) var(--sp-3);
  text-align: left;
  font-weight: 400;
  border-bottom: 1px solid var(--line-c-strong);
  background: var(--bg-raised);
}
.s-accounts .s-accounts__group:first-of-type .s-accounts__group-row > th { padding-top: var(--sp-5); }
.s-accounts .s-accounts__group-name {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--fg);
}
.s-accounts .s-accounts__group-name .icon { color: var(--accent); }

/* ---------- Spec rows ---------- */
.s-accounts .s-accounts__table tbody tr:not(.s-accounts__group-row) > th,
.s-accounts .s-accounts__table tbody td {
  padding: 18px var(--acc-pad-x);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--line-c);
}
.s-accounts .s-accounts__table tbody th { font-weight: 400; }
.s-accounts .s-accounts__table tbody td {
  border-left: 1px solid var(--line-c);
  font-size: var(--fs-base);
  font-weight: 560;
  color: var(--fg);
}
.s-accounts .s-accounts__label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: var(--lh-ui);
  color: var(--fg);
}
.s-accounts .s-accounts__hint {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--fg-3);
}
.s-accounts .s-accounts__none { color: var(--fg-3); font-weight: 400; }
.s-accounts .s-accounts__yes { display: inline-flex; align-items: center; gap: 0.45em; }
.s-accounts .s-accounts__yes .icon { color: var(--up); }

/* Shared row (spans all tiers) */
.s-accounts .s-accounts__table tbody .s-accounts__shared > * { border-bottom: 0; }
.s-accounts .s-accounts__table tbody .s-accounts__shared td { background: transparent; font-size: var(--fs-sm); font-weight: 500; color: var(--fg-2); }
.s-accounts .s-accounts__shared-list { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); }
.s-accounts .s-accounts__shared-list > span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.s-accounts .s-accounts__shared-list .icon { color: var(--accent); }

/* ---------- Demo dock ---------- */
.s-accounts .s-accounts__demo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-4) var(--sp-5);
  align-items: center;
  padding: var(--sp-5) var(--acc-pad-x);
  border-top: 1px solid var(--line-c-strong);
  background: var(--bg-inset);
}
.s-accounts .s-accounts__demo-icon { background: var(--bg-raised); }
.s-accounts .s-accounts__demo-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-title);
  letter-spacing: var(--tr-title);
  line-height: 1.2;
  color: var(--fg);
}
.s-accounts .s-accounts__demo-text {
  margin-top: var(--sp-1);
  max-width: 78ch;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--fg-2);
}
.s-accounts .s-accounts__demo-cta { grid-column: 1 / -1; justify-self: start; }

/* ---------- Worked cost example ---------- */
.s-accounts .s-accounts__cost {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--sp-9);
}
.s-accounts .s-accounts__cost-intro { display: grid; gap: var(--sp-4); align-content: start; }
.s-accounts .s-accounts__cost-intro .t-small { max-width: 44ch; }
.s-accounts .s-accounts__lots { margin-top: var(--sp-2); }

.s-accounts .s-accounts__cost-chart { min-width: 0; }
.s-accounts .s-accounts__cost-size { margin-bottom: var(--sp-4); }
.s-accounts .s-accounts__bars { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line-c-strong); }
.s-accounts .s-accounts__bar-row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) 7.5rem;
  align-items: center;
  gap: var(--sp-5);
  min-height: 76px;
  border-bottom: 1px solid var(--line-c);
}
.s-accounts .s-accounts__bar-name { font-size: var(--fs-sm); font-weight: 650; color: var(--fg); }
.s-accounts .s-accounts__bar-track {
  position: relative;
  height: 12px;
  border-radius: var(--r-pill);
  background: var(--bg-inset);
  overflow: hidden;
}
.s-accounts .s-accounts__bar {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: var(--r-pill);
}
/* Proportions are constant across trade sizes (10 : 7 : 5) */
.s-accounts [data-cost-tier="standard"] .s-accounts__bar { width: 100%; }
.s-accounts [data-cost-tier="raw"] .s-accounts__bar      { width: 70%; }
.s-accounts [data-cost-tier="pro"] .s-accounts__bar      { width: 50%; }
.s-accounts .s-accounts__bar--spread     { background: var(--c-evergreen); }
.s-accounts .s-accounts__bar--commission { background: var(--c-bronze); }
.s-accounts .s-accounts__bar-row--pick .s-accounts__bar-name { color: var(--accent); }

.s-accounts .s-accounts__bar-value { display: grid; justify-items: end; gap: 2px; text-align: right; }
.s-accounts [data-cost-total] {
  font-size: var(--fs-lg);
  font-weight: 680;
  letter-spacing: -0.02em;
  color: var(--fg);
  line-height: 1.1;
}
.s-accounts .s-accounts__bar-split { font-size: var(--fs-xs); color: var(--fg-3); }

.s-accounts .s-accounts__legend { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-4); }
.s-accounts .s-accounts__key { display: inline-flex; align-items: center; gap: var(--sp-2); }
.s-accounts .s-accounts__key::before { content: ""; width: 16px; height: 8px; border-radius: var(--r-pill); }
.s-accounts .s-accounts__key--spread::before     { background: var(--c-evergreen); }
.s-accounts .s-accounts__key--commission::before { background: var(--c-bronze); }

.s-accounts.is-ticking [data-cost-total] { animation: s-accounts-settle var(--dur-3) var(--ease-out); }
@keyframes s-accounts-settle { from { opacity: 0.35; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* ---------- Footnotes ---------- */
.s-accounts .s-accounts__foot {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line-c);
}
.s-accounts .s-accounts__risk { max-width: none; align-self: start; }
.s-accounts .s-accounts__fine { max-width: 72ch; align-self: center; }

/* ---------- Switcher (phones only) ---------- */
.s-accounts .s-accounts__switch { margin-bottom: var(--sp-5); }
.s-accounts .s-accounts__switch .segmented { display: flex; width: 100%; }
.s-accounts .s-accounts__switch .segmented > button { flex: 1 1 0; min-height: 44px; line-height: 44px; }

/* =====================================================================
   Breakpoints
   ===================================================================== */
@media (min-width: 768px) {
  .s-accounts .s-accounts__switch { display: none; }
  .s-accounts .s-accounts__demo { grid-template-columns: auto minmax(0, 1fr) auto; }
  .s-accounts .s-accounts__demo-cta { grid-column: auto; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .s-accounts { --acc-label-w: 24%; }
  .s-accounts .s-accounts__corner-text { display: none; }
  .s-accounts .s-accounts__corner-title { font-size: var(--fs-base); }
  .s-accounts .s-accounts__badge { position: static; display: inline-flex; margin-bottom: var(--sp-3); }
  .s-accounts .s-accounts__tier:not(.s-accounts__tier--pick) { padding-top: calc(var(--sp-7) + 1.6rem + var(--sp-3)); }
  .s-accounts .s-accounts__for { min-height: 2.9em; }
  .s-accounts .s-accounts__tier .btn { --btn-px: 12px; }
  .s-accounts .s-accounts__table tbody td { font-size: var(--fs-sm); }
  .s-accounts .s-accounts__table tbody td[data-tier] { overflow-wrap: anywhere; }
}

@media (min-width: 1024px) {
  .s-accounts .s-accounts__cost {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--sp-8);
  }
  .s-accounts .s-accounts__foot { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-7); }
}

@media (min-width: 1280px) {
  .s-accounts .s-accounts__cost { gap: var(--sp-9); }
}

/* ---------- Phones: no-JS fallback keeps the table, just tighter ---------- */
@media (max-width: 767px) {
  .s-accounts { --acc-pad-x: 12px; --acc-label-w: 30%; }
  .s-accounts .s-accounts__corner-text { display: none; }
  .s-accounts .s-accounts__corner-title { font-size: var(--fs-sm); }
  .s-accounts .s-accounts__tier { padding-top: var(--sp-6); }
  .s-accounts .s-accounts__badge { position: static; display: inline-flex; margin-bottom: var(--sp-2); }
  .s-accounts .s-accounts__tier .btn { --btn-px: 8px; font-size: var(--fs-xs); }
  .s-accounts .s-accounts__table tbody td { font-size: var(--fs-xs); overflow-wrap: anywhere; }
  .s-accounts .s-accounts__cost { margin-top: var(--sp-8); }
  .s-accounts .s-accounts__bar-row { grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: var(--sp-4); }
  .s-accounts .s-accounts__lots .segmented { display: flex; width: 100%; }
  .s-accounts .s-accounts__lots .segmented > button { flex: 1 1 0; padding-inline: 8px; min-height: 44px; }
  .s-accounts .s-accounts__demo { padding: var(--sp-5) 20px var(--sp-5); gap: var(--sp-3) var(--sp-4); }
  .s-accounts .s-accounts__demo-copy { display: contents; }
  .s-accounts .s-accounts__demo-icon { width: 2.75rem; height: 2.75rem; }
  .s-accounts .s-accounts__demo-text { grid-column: 1 / -1; margin-top: 0; }
  .s-accounts .s-accounts__demo-cta { justify-self: stretch; margin-top: var(--sp-2); }
}

/* ---------- Phones, enhanced: one tier at a time ---------- */
@media (max-width: 767px) {
  .s-accounts.is-enhanced .s-accounts__table,
  .s-accounts.is-enhanced .s-accounts__table thead,
  .s-accounts.is-enhanced .s-accounts__table tbody { display: block; }
  .s-accounts.is-enhanced .s-accounts__table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .s-accounts.is-enhanced .s-accounts__table thead tr,
  .s-accounts.is-enhanced .s-accounts__table tr.s-accounts__group-row,
  .s-accounts.is-enhanced .s-accounts__table tr.s-accounts__shared { grid-template-columns: minmax(0, 1fr); }
  .s-accounts.is-enhanced .s-accounts__corner { display: none; }
  .s-accounts.is-enhanced [data-tier] { display: none; }
  .s-accounts.is-enhanced [data-acc-tier="standard"] [data-tier="standard"],
  .s-accounts.is-enhanced [data-acc-tier="raw"] [data-tier="raw"],
  .s-accounts.is-enhanced [data-acc-tier="pro"] [data-tier="pro"] { display: block; }
  .s-accounts.is-enhanced tbody [data-tier] { border-left: 0; background: transparent; }
  .s-accounts.is-enhanced .s-accounts__table > thead > tr > :first-child,
  .s-accounts.is-enhanced .s-accounts__table > tbody > tr > th:not([colspan]) { width: auto; }

  .s-accounts.is-enhanced .s-accounts__tier { padding: var(--sp-6) 20px var(--sp-5); border-left: 0; }
  .s-accounts.is-enhanced .s-accounts__badge { position: absolute; top: var(--sp-6); right: 20px; margin: 0; }
  .s-accounts.is-enhanced .s-accounts__name { font-size: var(--fs-2xl); }
  .s-accounts.is-enhanced .s-accounts__price { margin-top: var(--sp-5); padding-top: var(--sp-4); }
  .s-accounts.is-enhanced .s-accounts__price-note { min-height: 0; }
  .s-accounts.is-enhanced .s-accounts__tier .btn { --btn-px: 22px; --btn-h: 52px; font-size: var(--fs-sm); }

  .s-accounts.is-enhanced .s-accounts__table .s-accounts__group-row > th { padding: var(--sp-5) 20px var(--sp-3); }
  .s-accounts.is-enhanced .s-accounts__table tbody tr:not(.s-accounts__group-row) > th,
  .s-accounts.is-enhanced .s-accounts__table tbody td { padding: 14px 20px; }
  .s-accounts.is-enhanced .s-accounts__table tbody td {
    padding-left: var(--sp-3);
    text-align: right;
    font-size: var(--fs-sm);
    max-width: 9.5rem;
  }
  .s-accounts.is-enhanced .s-accounts__yes { justify-content: flex-end; }
  .s-accounts.is-enhanced .s-accounts__table tbody .s-accounts__shared th { border-bottom: 0; padding-bottom: 6px; }
  .s-accounts.is-enhanced .s-accounts__table tbody .s-accounts__shared td { padding-left: 20px; padding-bottom: var(--sp-5); text-align: left; max-width: none; }
  .s-accounts .s-accounts__shared-list { gap: var(--sp-3) var(--sp-5); }

  .s-accounts.is-enhanced .s-accounts__tier { animation: s-accounts-swap var(--dur-3) var(--ease-out); }
}
@keyframes s-accounts-swap { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 379px) {
  .s-accounts.is-enhanced .s-accounts__table tbody td { max-width: 8.5rem; }
  .s-accounts .s-accounts__bar-row { grid-template-columns: 4rem minmax(0, 1fr) auto; gap: var(--sp-3); }
}

@media (prefers-reduced-motion: reduce) {
  .s-accounts.is-ticking [data-cost-total],
  .s-accounts.is-enhanced .s-accounts__tier { animation: none; }
}

@media (forced-colors: active) {
  .s-accounts .s-accounts__bar, .s-accounts .s-accounts__key::before { background: CanvasText; }
  .s-accounts .s-accounts__tier--pick { border: 2px solid Highlight; }
  .s-accounts .s-accounts__tier--pick::before { background: Highlight; }
}


/* =====================================================================
   Section 04-platforms
   ===================================================================== */

/* =====================================================================
   04 — Platforms (#platforms) · dark section
   Every selector is scoped to .s-platforms.
   Device mockups are pure HTML/CSS/SVG. Inside each device screen, 1em
   is derived from the device width with container query units, so the
   whole UI scales as one drawing at any viewport width.
   ===================================================================== */

/* ---------- Layout ---------- */
.s-platforms__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "tabs" "stage" "panels";
  gap: var(--sp-6);
}
.s-platforms__tabs   { grid-area: tabs; }
.s-platforms__stage  { grid-area: stage; }
.s-platforms__panels { grid-area: panels; min-width: 0; }

.s-platforms .s-platforms__tabs { width: 100%; justify-content: stretch; }
.s-platforms .s-platforms__tabs > button {
  flex: 1 1 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 14px;
}
.s-platforms .s-platforms__tabs .icon { color: var(--fg-3); transition: color var(--dur-1) var(--ease-std); }
.s-platforms .s-platforms__tabs > [aria-selected="true"] .icon { color: var(--fg); }

@media (max-width: 419px) {
  .s-platforms .s-platforms__tabs > button { padding: 0 8px; }
  .s-platforms .s-platforms__tabs .icon { display: none; }
}
@media (min-width: 768px) {
  .s-platforms .s-platforms__tabs { width: fit-content; }
  .s-platforms .s-platforms__tabs > button { flex: none; padding: 0 20px; }
}

@media (min-width: 1280px) {
  .s-platforms__layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "tabs stage" "panels stage";
    column-gap: clamp(2.5rem, 1rem + 3vw, 5rem);
    row-gap: var(--sp-7);
    align-items: start;
  }
}

/* ---------- Panels (copy) ---------- */
.s-platforms__panel { display: grid; gap: var(--sp-5); align-content: start; }
.s-platforms__panel + .s-platforms__panel { margin-top: var(--sp-8); }
.s-platforms__panel[hidden] + .s-platforms__panel,
.s-platforms__panels.is-tabbed .s-platforms__panel { margin-top: 0; }
.s-platforms__panel:focus-visible { border-radius: var(--r-sm); }
.s-platforms__panel .t-body { max-width: 46ch; }
.s-platforms__panels.is-tabbed .s-platforms__panel:not([hidden]) { animation: s-platforms-in var(--dur-3) var(--ease-out); }
@keyframes s-platforms-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.s-platforms__features { list-style: none; border-top: 1px solid var(--line-c); }
.s-platforms__features li {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--line-c);
}
.s-platforms__features .icon { margin-top: 1px; color: var(--c-champagne); }
.s-platforms__features div { display: grid; gap: 2px; }
.s-platforms__features .t-small { color: var(--fg-2); }

.s-platforms__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); }
@media (max-width: 479px) {
  .s-platforms__actions .btn { flex: 1 1 10rem; }
}

.s-platforms__foot {
  display: grid; gap: var(--sp-3);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-c);
}
.s-platforms__foot .t-fine { max-width: 52ch; }

/* ---------- Stage ---------- */
.s-platforms__stage { margin: 0; display: grid; gap: var(--sp-4); min-width: 0; }
.s-platforms__devices {
  position: relative;
  aspect-ratio: 10 / 7.4;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-c);
  background:
    radial-gradient(120% 90% at 78% 6%, color-mix(in srgb, var(--c-champagne) 11%, transparent), transparent 58%),
    radial-gradient(80% 60% at 10% 100%, color-mix(in srgb, var(--c-deep) 70%, transparent), transparent 70%),
    var(--c-forest);
  box-shadow: var(--shadow-dark);
  overflow: hidden;
  isolation: isolate;
}
.s-platforms__caption { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }

/* tablets and small laptops: wide stage, copy in two columns underneath */
@media (min-width: 768px) and (max-width: 1279px) {
  .s-platforms__devices { aspect-ratio: 16 / 10; }
  .s-platforms__laptop { left: 8%; top: 12%; width: 64%; }
  .s-platforms__phone { right: 9%; bottom: 7%; width: 21%; }
  .s-platforms__panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--grid-gap);
    row-gap: var(--sp-5);
  }
  .s-platforms__panel > h3, .s-platforms__panel > .t-body, .s-platforms__panel > .s-platforms__actions { grid-column: 1; }
  .s-platforms__panel > .s-platforms__features { grid-column: 2; grid-row: 1 / span 3; }
  .s-platforms__panel > .t-body { max-width: 40ch; }
  .s-platforms__panel > .s-platforms__actions { align-self: start; }
  .s-platforms__foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--grid-gap); align-items: start; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .s-platforms__laptop { left: 11%; top: 13%; width: 60%; }
  .s-platforms__phone { right: 11%; width: 19.5%; }
}
@media (min-width: 1280px) {
  .s-platforms__devices { aspect-ratio: 10 / 7.5; }
  .s-platforms__laptop { left: 6%; top: 13%; width: 76%; }
  .s-platforms__phone { right: 5.5%; bottom: 5.5%; width: 26%; }
  .s-platforms__stage { position: sticky; top: calc(var(--header-h) + var(--sp-6)); }
}

/* ---------- Laptop ---------- */
.s-platforms__laptop {
  position: absolute;
  left: 7%; top: 9.5%;
  width: 72%;
  container-type: inline-size;
  transition: opacity var(--dur-3) var(--ease-std), transform var(--dur-3) var(--ease-out), filter var(--dur-3) var(--ease-std);
  transform-origin: 50% 100%;
}
.s-platforms__lid {
  padding: 1.7cqw 1.7cqw 2.2cqw;
  border-radius: 2.6cqw 2.6cqw 0.8cqw 0.8cqw;
  background: var(--c-deep);
  box-shadow: 0 0 0 1px var(--c-moss), 0 0 0 0.5cqw color-mix(in srgb, var(--c-moss) 35%, transparent);
}
/* a fine brass horizon the laptop rests on */
.s-platforms__laptop::after {
  content: "";
  position: absolute;
  left: -14%; right: -60%; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c-champagne) 50%, transparent) 25%, color-mix(in srgb, var(--c-champagne) 50%, transparent) 55%, transparent 85%);
  z-index: -1;
}
.s-platforms__base {
  position: relative;
  height: 2.6cqw;
  margin-inline: -6.5%;
  border-radius: 0 0 2.4cqw 2.4cqw / 0 0 2cqw 2cqw;
  background: linear-gradient(180deg, var(--c-moss), var(--c-forest-2) 45%, var(--c-deep));
  box-shadow: 0 2.4cqw 3.6cqw -1.6cqw rgba(3, 12, 10, 0.9);
}
.s-platforms__base::before {
  content: "";
  position: absolute; left: 50%; top: 0;
  width: 15%; height: 38%;
  transform: translateX(-50%);
  border-radius: 0 0 1.2cqw 1.2cqw;
  background: var(--c-deep);
  opacity: 0.6;
}

/* screen is drawn on a 64em x 40em grid */
.s-platforms__screen {
  --scr-line: color-mix(in srgb, var(--c-sage) 12%, transparent);
  font-size: calc(96.6cqw / 64);
  height: 40em;
  display: grid;
  grid-template-rows: 2.5em 2.3em minmax(0, 1fr) 3em;
  border-radius: 0.5em;
  overflow: hidden;
  background: var(--c-evergreen);
  color: var(--c-sage);
  font-family: var(--font-sans);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.s-platforms__screen i { font-style: normal; }

.s-platforms__chrome {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.1em;
  background: var(--c-deep);
  border-bottom: 1px solid var(--scr-line);
  font-size: 1.05em;
  color: var(--c-pearl);
}
.s-platforms__chrome-app, .s-platforms__chrome-web { display: flex; align-items: center; gap: 0.7em; }
.s-platforms__chrome-dim { color: var(--c-lichen); }
.s-platforms__app-mark { width: 0.9em; height: 0.9em; border-radius: 0.2em; background: var(--c-bronze); box-shadow: inset 0 0 0 0.18em var(--c-evergreen), 0 0 0 0.09em var(--c-bronze); }
.s-platforms__dots { display: flex; gap: 0.45em; }
.s-platforms__dots i { width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--c-moss); }
.s-platforms__address {
  display: flex; align-items: center; gap: 0.5em;
  height: 1.7em; padding: 0 1em 0 0.7em; margin-left: 1em;
  min-width: 20em;
  border-radius: 0.85em;
  background: var(--c-forest);
  color: var(--c-sage);
}
.s-platforms__address .icon { width: 0.9em; height: 0.9em; color: var(--c-up-on-dark); }
.s-platforms__winctl { display: flex; gap: 1.1em; align-items: center; }
.s-platforms__winctl i { width: 0.8em; height: 0.8em; border: 0.1em solid var(--c-lichen); border-radius: 0.1em; }
.s-platforms__winctl i:first-child { height: 0; border-width: 0.1em 0 0; }

/* the two chromes swap with the view */
.s-platforms__chrome-web { display: none; }
.s-platforms__stage[data-view="web"] .s-platforms__chrome-app { display: none; }
.s-platforms__stage[data-view="web"] .s-platforms__chrome-web { display: flex; }
.s-platforms__stage[data-view="web"] .s-platforms__winctl { display: none; }

.s-platforms__toolbar {
  display: flex; align-items: center; gap: 1.6em;
  padding: 0 1.1em;
  border-bottom: 1px solid var(--scr-line);
  font-size: 0.95em;
}
.s-platforms__tb-sym { color: var(--c-pearl); font-weight: 600; }
.s-platforms__tb-tf { display: flex; gap: 0.3em; }
.s-platforms__tb-tf i { padding: 0.35em 0.55em; border-radius: 0.3em; color: var(--c-lichen); }
.s-platforms__tb-tf i.is-on { background: var(--c-forest-2); color: var(--c-pearl); }
.s-platforms__tb-tools { display: flex; gap: 0.6em; margin-left: auto; }
.s-platforms__tb-tools i { width: 1.1em; height: 1.1em; border-radius: 0.25em; border: 0.1em solid var(--c-moss); }

.s-platforms__body { display: grid; grid-template-columns: 16em minmax(0, 1fr); min-height: 0; }
.s-platforms__watch { border-right: 1px solid var(--scr-line); padding: 0.5em 0; font-size: 0.95em; overflow: hidden; }
.s-platforms__watch-head, .s-platforms__watch-row {
  display: grid; grid-template-columns: minmax(0, 1.15fr) 1fr 1fr;
  gap: 0.4em; align-items: center;
  padding: 0 0.9em; height: 2.4em;
}
.s-platforms__watch-head { color: var(--c-lichen); height: 2em; }
.s-platforms__watch-head span:not(:first-child), .s-platforms__watch-row span:not(:first-child) { text-align: right; }
.s-platforms__watch-row { color: var(--c-pearl); border-top: 1px solid var(--scr-line); transition: background-color var(--dur-4) var(--ease-out); }
.s-platforms__watch-row span:first-child { white-space: nowrap; overflow: hidden; text-overflow: clip; }
.s-platforms__watch-row.is-on { background: color-mix(in srgb, var(--c-champagne) 9%, transparent); box-shadow: inset 0.18em 0 0 var(--c-champagne); }
.s-platforms__sell { color: var(--c-sell-on-dark); }
.s-platforms__buy  { color: var(--c-buy-on-dark); }
.s-platforms__watch-row.is-flash-up   { background: color-mix(in srgb, var(--c-up-on-dark) 14%, transparent); transition-duration: 0ms; }
.s-platforms__watch-row.is-flash-down { background: color-mix(in srgb, var(--c-down-on-dark) 14%, transparent); transition-duration: 0ms; }

.s-platforms__chart { position: relative; min-width: 0; }
.s-platforms__chart svg { width: 100%; height: 100%; }
.s-platforms__grid line { stroke: var(--scr-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.s-platforms__grid text { fill: var(--c-lichen); font-size: 9.5px; font-family: var(--font-sans); }
.s-platforms__bar-up   { fill: var(--c-up-on-dark); }
.s-platforms__bar-down { fill: var(--c-down-on-dark); }
.s-platforms__wick-up   { stroke: var(--c-up-on-dark); stroke-width: 1; vector-effect: non-scaling-stroke; }
.s-platforms__wick-down { stroke: var(--c-down-on-dark); stroke-width: 1; vector-effect: non-scaling-stroke; }
.s-platforms__lastline { stroke: var(--c-buy-on-dark); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; opacity: 0.8; }
.s-platforms__lasttag { fill: var(--c-buy-on-dark); }
.s-platforms__lasttext { fill: var(--c-evergreen); font-size: 10px; font-weight: 700; font-family: var(--font-sans); }

.s-platforms__ticket {
  display: flex; align-items: center; gap: 0.6em;
  padding: 0 1.1em;
  border-top: 1px solid var(--scr-line);
  background: var(--c-deep);
}
.s-platforms__order {
  display: flex; align-items: baseline; gap: 0.6em;
  height: 2em; padding: 0 0.9em;
  border-radius: 0.35em;
  line-height: 2em;
  font-size: 0.95em;
}
.s-platforms__order b { font-weight: 600; }
.s-platforms__order--sell { background: color-mix(in srgb, var(--c-sell-on-dark) 16%, transparent); color: var(--c-sell-on-dark); }
.s-platforms__order--buy  { background: color-mix(in srgb, var(--c-buy-on-dark) 16%, transparent); color: var(--c-buy-on-dark); }
.s-platforms__lots { padding: 0 0.8em; height: 2em; line-height: 2em; border-radius: 0.35em; box-shadow: inset 0 0 0 1px var(--c-moss); color: var(--c-pearl); font-size: 0.95em; }
.s-platforms__ticket-note { margin-left: auto; color: var(--c-lichen); font-size: 0.9em; }

/* ---------- Phone ---------- */
.s-platforms__phone {
  position: absolute;
  right: 6.5%; bottom: 7%;
  width: 25.5%;
  container-type: inline-size;
  transition: opacity var(--dur-3) var(--ease-std), transform var(--dur-3) var(--ease-out), filter var(--dur-3) var(--ease-std);
  transform-origin: 50% 100%;
}
.s-platforms__phone-body {
  padding: 3.6cqw;
  border-radius: 15cqw;
  background: var(--c-deep);
  box-shadow:
    0 0 0 1px var(--c-moss),
    inset 0 0 0 1.2cqw color-mix(in srgb, var(--c-forest-2) 70%, transparent),
    -4cqw 12cqw 22cqw -4cqw rgba(3, 12, 10, 0.9);
}
/* phone screen is drawn on a 24em x 50em grid */
.s-platforms__phone-screen {
  font-size: calc(92.8cqw / 24);
  height: 50em;
  display: flex; flex-direction: column;
  border-radius: 3em;
  overflow: hidden;
  background: var(--c-evergreen);
  color: var(--c-sage);
  font-family: var(--font-sans);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.s-platforms__phone-screen i { font-style: normal; }
.s-platforms__ph-status { display: flex; justify-content: space-between; align-items: center; padding: 1.6em 2em 0.6em; font-size: 1.05em; font-weight: 600; color: var(--c-pearl); }
.s-platforms__ph-bars { display: flex; gap: 0.2em; align-items: flex-end; }
.s-platforms__ph-bars i { width: 0.3em; background: var(--c-pearl); border-radius: 0.1em; }
.s-platforms__ph-bars i:nth-child(1) { height: 0.45em; }
.s-platforms__ph-bars i:nth-child(2) { height: 0.7em; }
.s-platforms__ph-bars i:nth-child(3) { height: 0.95em; }

.s-platforms__ph-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 1.4em 1.6em 1em; }
.s-platforms__ph-head div { display: grid; gap: 0.35em; }
.s-platforms__ph-head b { color: var(--c-pearl); font-size: 1.6em; font-weight: 600; letter-spacing: 0.01em; }
.s-platforms__ph-head span { font-size: 1em; color: var(--c-lichen); }
.s-platforms__ph-chg { padding: 0.35em 0.6em; border-radius: 0.4em; font-size: 1em; font-weight: 600; }
.s-platforms__ph-chg.is-up   { color: var(--c-up-on-dark);   background: color-mix(in srgb, var(--c-up-on-dark) 14%, transparent); }
.s-platforms__ph-chg.is-down { color: var(--c-down-on-dark); background: color-mix(in srgb, var(--c-down-on-dark) 14%, transparent); }

.s-platforms__ph-quote { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em; padding: 0 1.6em; }
.s-platforms__ph-side { display: grid; gap: 0.5em; padding: 0.9em 1em 1em; border-radius: 1em; }
.s-platforms__ph-side > span:first-child { font-size: 0.95em; font-weight: 600; }
.s-platforms__ph-side .px { font-size: 2.3em; }
.s-platforms__ph-side--sell { background: color-mix(in srgb, var(--c-sell-on-dark) 13%, transparent); color: var(--c-sell-on-dark); }
.s-platforms__ph-side--buy  { background: color-mix(in srgb, var(--c-buy-on-dark) 13%, transparent); color: var(--c-buy-on-dark); justify-items: end; }
.s-platforms__ph-side--sell .px { color: var(--c-sell-on-dark); }
.s-platforms__ph-side--buy .px  { color: var(--c-buy-on-dark); }

.s-platforms__ph-chart { height: 15em; margin-top: 1.4em; }
.s-platforms__ph-chart svg { width: 100%; height: 100%; }
.s-platforms__stop-a { stop-color: var(--c-buy-on-dark); stop-opacity: 0.32; }
.s-platforms__stop-b { stop-color: var(--c-buy-on-dark); stop-opacity: 0; }
.s-platforms__ph-area { fill: url(#pl-ph-fill); }
.s-platforms__ph-line { fill: none; stroke: var(--c-buy-on-dark); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.s-platforms__ph-dot { fill: var(--c-buy-on-dark); stroke: var(--c-evergreen); stroke-width: 2; vector-effect: non-scaling-stroke; }

.s-platforms__ph-range { display: flex; justify-content: space-between; padding: 0.9em 1.6em; font-size: 0.95em; color: var(--c-lichen); }
.s-platforms__ph-range i { padding: 0.35em 0.7em; border-radius: 0.5em; }
.s-platforms__ph-range i.is-on { background: var(--c-forest-2); color: var(--c-pearl); font-weight: 600; }

.s-platforms__ph-alert {
  display: flex; align-items: center; gap: 0.7em;
  margin: 0.6em 1.6em 0; padding: 1em 1.1em;
  border-radius: 1em;
  background: var(--c-forest);
  box-shadow: inset 0 0 0 1px var(--scr-line, color-mix(in srgb, var(--c-sage) 12%, transparent));
  font-size: 0.95em;
}
.s-platforms__ph-alert .icon { width: 1.3em; height: 1.3em; color: var(--c-champagne); }
.s-platforms__ph-alert b { color: var(--c-pearl); font-weight: 600; }

.s-platforms__ph-list { margin: 1em 1.6em 0; }
.s-platforms__ph-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 1em; align-items: center;
  height: 3em;
  border-top: 1px solid color-mix(in srgb, var(--c-sage) 12%, transparent);
  font-size: 0.95em; color: var(--c-pearl);
  transition: background-color var(--dur-4) var(--ease-out);
}
.s-platforms__ph-row.is-flash-up   { background: color-mix(in srgb, var(--c-up-on-dark) 12%, transparent); transition-duration: 0ms; }
.s-platforms__ph-row.is-flash-down { background: color-mix(in srgb, var(--c-down-on-dark) 12%, transparent); transition-duration: 0ms; }
.s-platforms__ph-nav {
  display: flex; justify-content: space-around; align-items: center;
  margin-top: auto; padding: 1.2em 1em 2em;
  border-top: 1px solid color-mix(in srgb, var(--c-sage) 12%, transparent);
  color: var(--c-lichen);
}
.s-platforms__ph-nav .icon { width: 1.7em; height: 1.7em; }
.s-platforms__ph-nav .icon.is-on { color: var(--c-champagne); }

/* ---------- View states (answer the tab change) ---------- */
.s-platforms__stage[data-view="desktop"] .s-platforms__phone,
.s-platforms__stage[data-view="web"] .s-platforms__phone { transform: translateY(2%) scale(0.95); filter: brightness(0.72) saturate(0.75); }
.s-platforms__stage[data-view="mobile"] .s-platforms__laptop { transform: scale(0.97); filter: brightness(0.55) saturate(0.6); }
.s-platforms__stage[data-view="mobile"] .s-platforms__phone { transform: translateY(-3%) scale(1.05); }

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
  .s-platforms__devices { aspect-ratio: 10 / 8; }
  .s-platforms__laptop { left: 5%; top: 14%; width: 78%; }
  .s-platforms__phone  { right: 4.5%; bottom: 6%; width: 27%; }
  .s-platforms__panel + .s-platforms__panel { margin-top: var(--sp-7); }
}

/* Phones: two devices side by side were too small to read. Under 560px the
   stage shows only the device for the chosen tab, at a legible size.
   (Moved here from build/integration.css.) */
@media (max-width: 559px) {
  .s-platforms__devices { aspect-ratio: 10 / 7.6; }
  .s-platforms__laptop { left: 4%; top: 10%; width: 92%; }
  .s-platforms__phone { left: 50%; right: auto; top: 5%; bottom: auto; width: 34%; margin-left: -17%; }
  .s-platforms__stage[data-view="desktop"] .s-platforms__phone,
  .s-platforms__stage[data-view="web"] .s-platforms__phone,
  .s-platforms__stage[data-view="mobile"] .s-platforms__laptop {
    opacity: 0;
    visibility: hidden;
    transform: none;
    filter: none;
  }
  .s-platforms__stage[data-view="mobile"] .s-platforms__phone { transform: none; }
  .s-platforms__laptop::after { display: none; }
}
@media (max-width: 559px) and (prefers-reduced-motion: no-preference) {
  .s-platforms__laptop, .s-platforms__phone { transition: opacity var(--dur-3) var(--ease-std), visibility 0s linear var(--dur-3); }
  .s-platforms__stage[data-view="mobile"] .s-platforms__phone,
  .s-platforms__stage[data-view="desktop"] .s-platforms__laptop,
  .s-platforms__stage[data-view="web"] .s-platforms__laptop { transition-delay: 0s; }
}

/* ---------- Comparison matrix ----------
   The column of the platform chosen in the tabs is lit, so the table
   answers the tab change too. */
.s-platforms__compare {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-8);
  padding-top: var(--sp-7);
  border-top: 1px solid var(--line-c);
}
.s-platforms__compare-head { display: grid; gap: var(--sp-2); }
.s-platforms__compare-head .t-small { color: var(--fg-2); max-width: 52ch; }
.s-platforms__matrix { min-width: 0; }
.s-platforms__table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: var(--fs-sm); }
.s-platforms__table th, .s-platforms__table td { padding: 0 var(--sp-2); height: 56px; border-bottom: 1px solid var(--line-c); vertical-align: middle; }
.s-platforms__table tbody th { padding-left: 0; text-align: left; font-weight: 500; color: var(--fg); line-height: var(--lh-ui); }
.s-platforms__table tbody tr:last-child > * { border-bottom: 0; }
.s-platforms__table thead > tr > * { height: auto; padding-block: 0 var(--sp-4); border-bottom-color: var(--line-c-strong); }
.s-platforms__table thead th { text-align: center; font-size: var(--fs-xs); font-weight: 600; color: var(--fg-2); }
.s-platforms__table thead th .icon { display: block; margin: 0 auto 6px; color: var(--fg-3); }
.s-platforms__table td { text-align: center; color: var(--c-pearl); }
.s-platforms__table td.is-no { color: var(--c-lichen); }
.s-platforms__table td .icon { vertical-align: middle; }
.s-platforms__table [data-pl-col] { transition: background-color var(--dur-2) var(--ease-std), color var(--dur-2) var(--ease-std); }
.s-platforms__table thead [data-pl-col], .s-platforms__table tbody [data-pl-col] { width: 22%; }

.s-platforms[data-pl-view="desktop"] .s-platforms__table [data-pl-col="desktop"],
.s-platforms[data-pl-view="web"] .s-platforms__table [data-pl-col="web"],
.s-platforms[data-pl-view="mobile"] .s-platforms__table [data-pl-col="mobile"] {
  background: color-mix(in srgb, var(--c-champagne) 8%, transparent);
}
.s-platforms[data-pl-view="desktop"] .s-platforms__table td[data-pl-col="desktop"]:not(.is-no),
.s-platforms[data-pl-view="web"] .s-platforms__table td[data-pl-col="web"]:not(.is-no),
.s-platforms[data-pl-view="mobile"] .s-platforms__table td[data-pl-col="mobile"]:not(.is-no),
.s-platforms[data-pl-view="desktop"] .s-platforms__table th[data-pl-col="desktop"],
.s-platforms[data-pl-view="web"] .s-platforms__table th[data-pl-col="web"],
.s-platforms[data-pl-view="mobile"] .s-platforms__table th[data-pl-col="mobile"] { color: var(--c-champagne); }
.s-platforms[data-pl-view="desktop"] .s-platforms__table th[data-pl-col="desktop"] .icon,
.s-platforms[data-pl-view="web"] .s-platforms__table th[data-pl-col="web"] .icon,
.s-platforms[data-pl-view="mobile"] .s-platforms__table th[data-pl-col="mobile"] .icon { color: var(--c-champagne); }
.s-platforms[data-pl-view="desktop"] .s-platforms__table thead th[data-pl-col="desktop"],
.s-platforms[data-pl-view="web"] .s-platforms__table thead th[data-pl-col="web"],
.s-platforms[data-pl-view="mobile"] .s-platforms__table thead th[data-pl-col="mobile"] {
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  box-shadow: inset 0 2px 0 var(--c-champagne);
}
.s-platforms__table thead [data-pl-col] { padding-top: var(--sp-4); }

@media (min-width: 1024px) {
  .s-platforms__compare { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 1rem + 3vw, 5rem); align-items: start; }
  .s-platforms__table { font-size: var(--fs-base); }
  .s-platforms__table thead th { font-size: var(--fs-sm); }
}
@media (max-width: 479px) {
  .s-platforms__table thead [data-pl-col], .s-platforms__table tbody [data-pl-col] { width: 19%; }
  .s-platforms__table th, .s-platforms__table td { padding-inline: 4px; }
  .s-platforms__table tbody th { font-size: var(--fs-xs); padding-right: var(--sp-2); }
  .s-platforms__hide-xs { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .s-platforms__table [data-pl-col] { transition: none; }
}


/* =====================================================================
   Section 05-promotions
   ===================================================================== */

/* =====================================================================
   05 PROMOTIONS  (#promotions, bone surface)
   One featured offer drawn as a ticket (evergreen, perforated stub),
   then a ledger of the other offers in shared columns. Every offer
   carries its own .terms-note; the section opens with a .risk-note.
   ===================================================================== */

.s-promotions { --pr-pad: clamp(1.25rem, 0.7rem + 2.4vw, 3rem); --pr-notch: 15px; }

.s-promotions .s-promotions__risk { max-width: none; margin-bottom: var(--sp-6); }

/* ---------- shared offer header (icon + title) ---------- */
.s-promotions__offer-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
}
.s-promotions .s-promotions__mark { flex: none; }

/* ---------- featured ticket ---------- */
.s-promotions__ticket {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--c-evergreen);
  color: var(--fg);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  margin-bottom: var(--sp-6);
}
.s-promotions__ticket-main {
  display: grid;
  gap: var(--sp-5);
  align-content: start;
  padding: var(--pr-pad);
}
.s-promotions__ticket-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-title);
  letter-spacing: -0.022em;
  line-height: 1.1;
}
.s-promotions__status {
  margin-top: 6px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--fg-2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.s-promotions__status::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-fill);
}
.s-promotions__desc { color: var(--fg-2); max-width: 60ch; line-height: 1.6; }

/* key terms of the featured offer */
.s-promotions__terms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2) var(--sp-4);
}
@media (min-width: 1280px) { .s-promotions__terms { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--sp-5); } }
.s-promotions__terms > div {
  padding: 12px 0 2px;
  border-top: 1px solid var(--line-c-strong);
}
.s-promotions__terms dt,
.s-promotions__cells dt {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--fg-3);
  line-height: 1.4;
}
.s-promotions__terms dd,
.s-promotions__cells dd {
  margin: 4px 0 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--fg);
  line-height: 1.45;
}
.s-promotions .s-promotions__actions { --cluster-gap: var(--sp-3); }
.s-promotions__ticket .terms-note { max-width: 72ch; }

/* stub: the perforated value panel */
.s-promotions__stub {
  position: relative;
  order: -1;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: var(--pr-pad);
  padding-bottom: calc(var(--pr-pad) + 4px);
  background: var(--c-forest);
  border-bottom: 2px dashed var(--c-moss);
}
.s-promotions__stub::before,
.s-promotions__stub::after {
  content: "";
  position: absolute;
  width: calc(var(--pr-notch) * 2);
  height: calc(var(--pr-notch) * 2);
  border-radius: 50%;
  background: var(--bg, var(--c-bone));
  bottom: calc(var(--pr-notch) * -1 - 1px);
}
.s-promotions__stub::before { left: calc(var(--pr-notch) * -1); }
.s-promotions__stub::after { right: calc(var(--pr-notch) * -1); }

.s-promotions__stub-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent);
}
.s-promotions__stub-value {
  font-size: clamp(3.25rem, 2.2rem + 4.2vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--c-pearl);
  margin-block: 4px 6px;
}
.s-promotions__stub-sub { font-size: var(--fs-base); color: var(--fg); font-weight: 500; line-height: 1.5; }
.s-promotions__stub-ref {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-c);
  font-size: var(--fs-xs);
  color: var(--fg-2);
}

@media (min-width: 900px) {
  .s-promotions__ticket { grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem); }
  .s-promotions__stub {
    order: 0;
    border-bottom: 0;
    border-left: 2px dashed var(--c-moss);
    padding-bottom: var(--pr-pad);
  }
  .s-promotions__stub::before,
  .s-promotions__stub::after { left: calc(var(--pr-notch) * -1 - 1px); right: auto; }
  .s-promotions__stub::before { top: calc(var(--pr-notch) * -1); bottom: auto; }
  .s-promotions__stub::after { bottom: calc(var(--pr-notch) * -1); }
}

/* ---------- ledger of other offers ---------- */
.s-promotions__ledger {
  background: var(--bg-raised);
  border: 1px solid var(--line-c);
  border-radius: var(--r-md);
}
.s-promotions__ledger-head { display: none; }
.s-promotions__rows { list-style: none; margin: 0; padding: 0; }
.s-promotions__row + .s-promotions__row { border-top: 1px solid var(--line-c); }
.s-promotions__row > article {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5) clamp(1rem, 0.6rem + 1.6vw, 1.75rem);
}
.s-promotions__row-grid { display: grid; gap: var(--sp-4); }
.s-promotions__row-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-title);
  letter-spacing: var(--tr-title);
  line-height: 1.2;
}
.s-promotions__row-desc {
  margin-top: 6px;
  font-size: var(--fs-sm);
  color: var(--fg-2);
  line-height: 1.55;
  max-width: 46ch;
}
.s-promotions__cells {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3) var(--sp-4);
  margin: 0;
  padding: var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--bg-inset);
}
.s-promotions__reward dd { font-weight: 700; }

@media (min-width: 768px) and (max-width: 1199.98px) {
  .s-promotions__row-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--sp-5); align-items: start; }
}

@media (min-width: 1200px) {
  .s-promotions__ledger {
    --pr-cols: minmax(0, 4.4fr) minmax(0, 1.5fr) minmax(0, 1.4fr) minmax(0, 1.5fr) minmax(0, 1.6fr);
    --pr-gap: var(--sp-5);
    --pr-x: var(--sp-6);
  }
  .s-promotions__ledger-head {
    display: grid;
    grid-template-columns: var(--pr-cols);
    gap: var(--pr-gap);
    padding: var(--sp-4) var(--pr-x) var(--sp-3);
    border-bottom: 1px solid var(--line-c-strong);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--fg-3);
  }
  .s-promotions__row > article { padding: var(--sp-5) var(--pr-x) var(--sp-5); gap: var(--sp-4); }
  .s-promotions__row-grid {
    grid-template-columns: var(--pr-cols);
    gap: var(--pr-gap);
    align-items: start;
  }
  .s-promotions__cells { display: contents; }
  .s-promotions__cells > div { padding-top: 6px; }
  .s-promotions__cells dt {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .s-promotions__cells dd { margin: 0; }
  .s-promotions__reward dd { font-size: var(--fs-base); }
  /* terms align with the offer text, past the icon frame */
  .s-promotions__row .terms-note { margin-left: calc(3rem + var(--sp-4)); }
}

/* ---------- section foot ---------- */
.s-promotions__foot {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-c);
}
.s-promotions__foot > p { font-size: var(--fs-sm); color: var(--fg-2); max-width: 62ch; line-height: 1.55; }
.s-promotions .s-promotions__foot-links { --cluster-gap: var(--sp-2) var(--sp-6); }
.s-promotions__foot-links .link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: var(--fs-sm);
}
.s-promotions__foot-links .link .icon { margin: 0; }
@media (min-width: 1024px) {
  .s-promotions__foot { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-6); }
}


/* =====================================================================
   Section 06-why
   ===================================================================== */

/* =====================================================================
   06 — Why OGOFX + Safety of funds  (.s-why, #why, linen surface)
   Part 1: four trading terms as a rate card. A heavy ink rule on top,
           hairline columns, a dotted-leader spec line at the foot of
           each term. On phones it collapses to a tight list.
   Part 2: the section's one moment: an evergreen "vault" panel with
           the facts on the left and a custody diagram on the right
           (deposit -> client money account, walled off from the
           operating account, under the regulator). Full-bleed on phones.
   Every selector is scoped under .s-why. Tokens only, no hex.
   ===================================================================== */

/* ---------- Heading ---------- */
.s-why__head {
  display: grid;
  gap: var(--sp-4);
  margin-bottom: var(--head-gap);
}
.s-why__h2 { max-width: 18ch; }
.s-why__head-side { display: grid; gap: var(--sp-3); align-content: end; }
.s-why__head-side .t-lead { max-width: 40ch; }
.s-why__head-link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* ---------- Part 1: rate-card ledger ---------- */
.s-why__ledger {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 2px solid var(--fg);
}
.s-why__item {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  column-gap: var(--sp-4);
  row-gap: var(--sp-1);
  align-content: start;
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--line-c-strong);
  min-width: 0;
}
.s-why__icon { grid-column: 1; grid-row: 1 / span 2; color: var(--accent); margin-top: 1px; }
.s-why__title {
  grid-column: 2;
  font-size: var(--fs-lg);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--fg);
}
.s-why__text {
  grid-column: 2;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 44ch;
}
.s-why__spec {
  grid-column: 2;
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  line-height: var(--lh-ui);
}
.s-why__spec dt {
  display: flex;
  align-items: baseline;
  flex: 1 1 auto;
  gap: var(--sp-3);
  min-width: 0;
  color: var(--fg-3);
  font-weight: 500;
  white-space: nowrap;
}
/* dotted leader, as on a printed rate card */
.s-why__spec dt::after {
  content: "";
  flex: 1 1 auto;
  min-width: var(--sp-4);
  border-bottom: 1px dotted var(--line-c-strong);
  transform: translateY(-0.25em);
}
.s-why__spec dd {
  flex: none;
  color: var(--fg);
  font-weight: 650;
  text-align: right;
}

/* ---------- Part 2: the vault panel ---------- */
.s-why__safety {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
  margin-top: clamp(3.5rem, 2.4rem + 4.5vw, 6.5rem);
  margin-inline: calc(-1 * var(--gutter));
  padding: var(--sp-7) var(--gutter);
  background: var(--bg);
  color: var(--fg);
  scroll-margin-top: calc(var(--header-h) + 16px);
  position: relative;
  isolation: isolate;
}
/* a single champagne hairline inset along the top edge: the panel's signature */
.s-why__safety::before {
  content: "";
  position: absolute;
  inset: 0 var(--gutter) auto;
  height: 2px;
  background: var(--accent-fill);
}
.s-why__safety-copy { display: grid; gap: var(--sp-3); align-content: start; min-width: 0; }
.s-why__safety-title { color: var(--fg); }
.s-why__safety-lead {
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--fg-2);
  max-width: 38ch;
}

.s-why__facts { list-style: none; display: grid; margin-top: var(--sp-4); }
.s-why__fact {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  column-gap: var(--sp-4);
  row-gap: 2px;
  align-content: start;
  padding-block: var(--sp-4);
  border-top: 1px solid var(--line-c);
}
.s-why__fact:last-child { border-bottom: 1px solid var(--line-c); }
.s-why__fact-icon { grid-row: 1 / span 2; color: var(--accent); margin-top: 1px; }
.s-why__fact-title {
  font-size: var(--fs-sm);
  font-weight: 650;
  line-height: var(--lh-ui);
  color: var(--fg);
}
.s-why__fact-text {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 46ch;
}
.s-why__caveat {
  margin-top: var(--sp-3);
  padding-left: var(--sp-4);
  border-left: 2px solid var(--accent-fill);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.55;
  color: var(--fg);
  max-width: 50ch;
}

/* ---------- Custody diagram ---------- */
.s-why__map {
  display: grid;
  gap: var(--sp-5);
  align-content: start;
  min-width: 0;
  padding: clamp(1rem, 0.6rem + 1.8vw, 2rem);
  border: 1px solid var(--line-c);
  border-radius: var(--r-md);
  background: var(--bg-raised);
}

/* regulator: a dimension line spanning the whole arrangement */
.s-why__map-reg {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--fg-2);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: var(--lh-ui);
}
.s-why__map-reg > span { flex: 0 1 auto; min-width: 0; }
.s-why__map-reg .icon { flex: none; color: var(--accent); }

.s-why__map-body { display: grid; grid-template-columns: minmax(0, 1fr); }

.s-why__node {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--sp-3);
  row-gap: 2px;
  align-content: start;
  padding: var(--sp-4);
  border-radius: var(--r-sm);
  min-width: 0;
}
.s-why__node .icon { grid-row: span 2; align-self: start; margin-top: 1px; }
.s-why__node-name {
  font-size: var(--fs-sm);
  font-weight: 650;
  line-height: var(--lh-ui);
  color: var(--fg);
}
.s-why__node-sub {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--fg-3);
}
.s-why__node--you {
  background: var(--c-forest-2);
  color: var(--fg-2);
}
.s-why__node--client {
  background: var(--c-evergreen);
  box-shadow: inset 0 0 0 1px var(--accent-fill), var(--shadow-dark);
  color: var(--accent);
}
.s-why__node--client .s-why__node-sub { color: var(--fg-2); }
.s-why__node--company {
  border: 1px dashed var(--line-c-strong);
  color: var(--fg-3);
}
.s-why__node--company .s-why__node-name { color: var(--fg-2); font-weight: 500; }

/* deposit flow: champagne hairline + chevron */
.s-why__flow {
  display: grid;
  justify-items: start;
  padding-left: calc(var(--sp-4) + 0.75rem - 0.5px);
  color: var(--accent);
}
.s-why__flow-line { width: 1px; height: var(--sp-5); background: currentColor; }
.s-why__flow-head { width: 1rem; height: 1rem; margin-top: -9px; margin-left: calc(-0.5rem + 0.5px); }

/* client vs company, with the wall between them */
.s-why__vault { display: grid; grid-template-columns: minmax(0, 1fr); }
.s-why__wall {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  color: var(--fg-3);
  font-size: var(--fs-xs);
  font-weight: 500;
  white-space: nowrap;
}
.s-why__wall::before,
.s-why__wall::after {
  content: "";
  flex: 1;
  border-top: 1px dashed var(--line-c-strong);
}

.s-why__map-cap {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-c);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--fg-2);
}
.s-why__map-cap .link { font-weight: 600; }

/* ---------- phones: tighter ledger rhythm ---------- */
@media (max-width: 479px) {
  .s-why__item { padding-block: var(--sp-4) var(--sp-5); }
  .s-why__map-reg { padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line-c); }
  .s-why__map { gap: var(--sp-4); }
}

/* ---------- 480+: vault side by side, regulator as a dimension line ---------- */
@media (min-width: 480px) {
  .s-why__map-reg > span { text-align: center; }
  .s-why__map-reg::before,
  .s-why__map-reg::after {
    content: "";
    flex: 1 1 var(--sp-5);
    min-width: var(--sp-4);
    height: 10px;
    border-top: 1px solid var(--line-c-strong);
    align-self: flex-end;
    transform: translateY(-0.2em);
  }
  .s-why__map-reg::before { order: -1; border-left: 1px solid var(--line-c-strong); }
  .s-why__map-reg::after  { border-right: 1px solid var(--line-c-strong); }

  .s-why__vault {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
  }
  .s-why__wall { flex-direction: column; padding: 0 var(--sp-3); }
  .s-why__wall span { writing-mode: vertical-rl; transform: rotate(180deg); padding-block: var(--sp-1); }
  .s-why__wall::before,
  .s-why__wall::after { border-top: 0; border-left: 1px dashed var(--line-c-strong); width: 0; }
  .s-why__node { grid-template-columns: minmax(0, 1fr); }
  .s-why__node .icon { grid-row: auto; margin-bottom: var(--sp-3); }
  .s-why__node--you { max-width: calc(50% - 1.5rem); grid-template-columns: auto minmax(0, 1fr); }
  .s-why__node--you .icon { grid-row: span 2; margin-bottom: 0; }
}

/* ---------- 768+: ledger 2x2, panel becomes a rounded vault ---------- */
@media (min-width: 768px) {
  .s-why__head {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--grid-gap);
    align-items: end;
  }
  .s-why__ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-7); }
  .s-why__item { padding-block: var(--sp-6); }
  .s-why__safety {
    margin-inline: 0;
    padding: clamp(2.5rem, 1.5rem + 2.6vw, 4.5rem);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-3);
  }
  .s-why__safety::before { inset: 0 var(--sp-8) auto; }
  .s-why__node { padding: var(--sp-5); }
  .s-why__flow { padding-left: calc(var(--sp-5) + 0.75rem - 0.5px); }
  .s-why__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sp-5); }
  .s-why__fact { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-2); border-bottom: 1px solid var(--line-c); }
  .s-why__fact-icon { grid-row: auto; margin-bottom: var(--sp-1); }
}

/* ---------- 1024+: four-column rate card, vault splits copy | diagram ---------- */
@media (min-width: 1024px) {
  .s-why__ledger { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; }
  .s-why__item {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    row-gap: var(--sp-2);
    padding: var(--sp-6) var(--sp-5) var(--sp-5);
    border-bottom: 0;
    border-left: 1px solid var(--line-c-strong);
  }
  .s-why__item:first-child { border-left: 0; padding-left: 0; }
  .s-why__item:last-child { padding-right: 0; }
  .s-why__icon, .s-why__title, .s-why__text, .s-why__spec { grid-column: 1; }
  .s-why__icon { grid-row: auto; margin: 0 0 var(--sp-4); }
  .s-why__text { align-self: start; }
  .s-why__spec { margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: 1px solid var(--line-c); }
  .s-why__spec dt::after { display: none; }

  .s-why__safety {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--sp-8);
    align-items: center;
  }
  .s-why__facts { grid-template-columns: minmax(0, 1fr); }
  .s-why__fact { grid-template-columns: 1.25rem minmax(0, 1fr); row-gap: 2px; border-bottom: 0; }
  .s-why__fact:last-child { border-bottom: 1px solid var(--line-c); }
  .s-why__fact-icon { grid-row: 1 / span 2; margin-bottom: 0; }
}

@media (min-width: 1280px) {
  .s-why__item { padding-inline: var(--sp-6); }
}


/* =====================================================================
   Section 07-start
   ===================================================================== */

/* =====================================================================
   07 Get started (#start). Surface: bone (default section).
   Three-step sequence on one hairline rail: heavy bronze numerals are
   the section's single bold moment. Then funding methods.
   Every selector is scoped under .s-start.
   ===================================================================== */

/* ---------- Steps ---------- */
.s-start .s-start__steps {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  counter-reset: none;
}

.s-start .s-start__step {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  column-gap: var(--sp-4);
  min-width: 0;
}

/* marker = heavy grotesk numeral + the rail that joins it to the next step */
.s-start .s-start__marker {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.s-start .s-start__num {
  display: block;
  font-family: var(--font-sans);
  font-size: 3rem;
  font-weight: var(--fw-display);
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 0.86;
  letter-spacing: -0.06em;
  color: var(--accent);
}
.s-start .s-start__rail {
  position: relative;
  flex: 1;
  width: 1px;
  margin-block: var(--sp-4) var(--sp-3);
  background: var(--line-c-strong);
}
/* the rail ends in a small terminal on the last step */
.s-start .s-start__step:last-child .s-start__rail {
  flex: 0 0 var(--sp-7);
}
.s-start .s-start__step:last-child .s-start__rail::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-fill);
  box-shadow: 0 0 0 4px var(--bg);
  transform: translate(-50%, 50%);
}

.s-start .s-start__body {
  min-width: 0;
  padding-top: 0.3rem;
  padding-bottom: var(--sp-7);
}
.s-start .s-start__step:last-child .s-start__body { padding-bottom: 0; }

.s-start .s-start__title {
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-title);
  font-weight: var(--fw-title);
}
.s-start .s-start__text {
  margin-top: var(--sp-3);
  max-width: 38ch;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

.s-start .s-start__needs {
  list-style: none;
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-c);
  max-width: 38ch;
}
.s-start .s-start__needs li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--fg);
}
.s-start .s-start__needs .icon {
  margin-top: 0.15em;
  color: var(--accent);
}

/* time estimate: a quiet ivory chip, so it reads as a fact, not body copy */
.s-start .s-start__time {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  width: fit-content;
  max-width: 100%;
  margin-top: var(--sp-5);
  padding: 7px 14px 7px 10px;
  border-radius: var(--r-pill);
  background: var(--bg-raised);
  box-shadow: inset 0 0 0 1px var(--line-c);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.45;
  color: var(--fg-2);
}
.s-start .s-start__time .icon { margin-top: 0.1em; color: var(--accent); }

/* ---------- Call to action ---------- */
.s-start .s-start__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-6);
  margin-top: var(--sp-7);
  padding-left: calc(3.5rem + var(--sp-4));
}
.s-start .s-start__cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.s-start .s-start__cta-note { max-width: 46ch; color: var(--fg-2); }

/* ---------- Funding ---------- */
.s-start .s-start__funding {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
  margin-top: var(--sp-9);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--line-c-strong);
}
.s-start .s-start__funding-intro { min-width: 0; }
.s-start .s-start__funding-intro .t-body { margin-top: var(--sp-4); max-width: 46ch; }

.s-start .s-start__facts {
  display: grid;
  margin-top: var(--sp-6);
  max-width: 28rem;
}
.s-start .s-start__facts > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-1) var(--sp-4);
  padding-block: var(--sp-3);
  border-top: 1px solid var(--line-c);
}
.s-start .s-start__facts > div:last-child { border-bottom: 1px solid var(--line-c); }
.s-start .s-start__facts dt { font-size: var(--fs-sm); color: var(--fg-3); }
.s-start .s-start__facts dd { font-size: var(--fs-sm); font-weight: 600; color: var(--fg); text-align: right; }

.s-start .s-start__methods { min-width: 0; display: grid; gap: var(--sp-4); }
.s-start .s-start__table tbody th,
.s-start .s-start__table tbody td { padding-block: 18px; }
.s-start .s-start__table td { white-space: nowrap; }
.s-start .s-start__method {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.s-start .s-start__method .icon-frame { flex: none; }
.s-start .s-start__method-text { display: grid; gap: 2px; min-width: 0; }
.s-start .s-start__method-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.3;
  color: var(--fg);
}
.s-start .s-start__method-sub {
  font-size: var(--fs-xs);
  font-weight: 400;
  line-height: 1.4;
  color: var(--fg-3);
}
.s-start .s-start__note { background: var(--bg-inset); }

/* ---------- Phones ---------- */
@media (max-width: 599px) {
  .s-start .s-start__step { grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: var(--sp-3); }
  .s-start .s-start__num { font-size: 2.75rem; }
  .s-start .s-start__cta { padding-left: 0; }
  .s-start .s-start__funding { margin-top: var(--sp-8); padding-top: var(--sp-7); }
  .s-start .s-start__cta-actions { width: 100%; }
  .s-start .s-start__cta-actions .btn { flex: 1 1 100%; }
  .s-start .s-start__table tbody th,
  .s-start .s-start__table tbody td { padding-block: 14px; }
  .s-start .s-start__method { gap: 10px; }
  .s-start .s-start__method .icon-frame { width: 2.25rem; height: 2.25rem; }
  .s-start .s-start__method .icon-frame .icon { width: 1.125rem; height: 1.125rem; }
  .s-start .s-start__method-name { font-size: var(--fs-xs); }

  /* Phones: each method becomes a block with three labelled figures, so the
     fees column stays visible instead of being dropped. */
  .s-start .s-start__table thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .s-start .s-start__table,
  .s-start .s-start__table tbody { display: block; }
  .s-start .s-start__table tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-3) var(--sp-3);
    padding: 16px;
    border-bottom: 1px solid var(--line-c);
  }
  .s-start .s-start__table tbody tr:last-child { border-bottom: 0; }
  .s-start .s-start__table tbody th,
  .s-start .s-start__table tbody td { display: block; padding: 0; border: 0; white-space: normal; }
  .s-start .s-start__table tbody th,
  .s-start .s-start__table tbody th:first-child { grid-column: 1 / -1; padding-left: 0; }
  .s-start .s-start__table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--fg-3);
  }
}

/* ---------- Tablet: steps stay vertical, detail sits in two columns ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .s-start .s-start__step { grid-template-columns: 4rem minmax(0, 1fr); column-gap: var(--sp-5); }
  .s-start .s-start__num { font-size: 3.5rem; }
  .s-start .s-start__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--sp-7);
    align-content: start;
  }
  .s-start .s-start__title,
  .s-start .s-start__text { grid-column: 1 / -1; }
  .s-start .s-start__text { max-width: 52ch; }
  .s-start .s-start__needs { grid-column: 1; }
  .s-start .s-start__time {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
    margin-top: var(--sp-5);
  }
  .s-start .s-start__cta { padding-left: calc(4rem + var(--sp-5)); }
}

/* ---------- Desktop: one horizontal rail across the three steps ---------- */
@media (min-width: 1024px) {
  .s-start .s-start__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s-start .s-start__step {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }
  .s-start .s-start__marker {
    flex-direction: row;
    align-items: center;
  }
  .s-start .s-start__num {
    font-size: clamp(4.5rem, 1.8rem + 4.2vw, 6.5rem);
    min-width: 0.7em;
  }
  .s-start .s-start__rail {
    flex: 1;
    width: auto;
    height: 1px;
    margin: 0 0 0 var(--sp-5);
  }
  .s-start .s-start__step:last-child .s-start__rail { flex: 1; }
  .s-start .s-start__step:last-child .s-start__rail::after {
    left: auto;
    right: 0;
    bottom: 50%;
    transform: translate(50%, 50%);
  }
  /* subgrid keeps titles, copy, checklists and times on shared baselines */
  .s-start .s-start__steps { grid-template-rows: auto auto auto auto auto; }
  .s-start .s-start__step {
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .s-start .s-start__body { display: contents; }
  .s-start .s-start__title { margin-top: var(--sp-6); }
  .s-start .s-start__body > * { margin-right: var(--sp-7); }
  .s-start .s-start__needs { align-self: start; }
  .s-start .s-start__step:last-child .s-start__body > * { margin-right: 0; }
  .s-start .s-start__cta {
    margin-top: var(--sp-8);
    padding-left: 0;
  }
  .s-start .s-start__funding {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--sp-8);
    align-items: start;
  }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .s-start .s-start__body > * { margin-right: var(--sp-6); }
  .s-start .s-start__funding { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: var(--sp-7); }
}


/* =====================================================================
   Section 08-faq
   ===================================================================== */

/* =====================================================================
   07 FAQ + final call to action  (.s-faq, #faq)
   Surface: linen (.section--alt); the closing panel is evergreen (.on-dark) and
   is the single use of --r-xl on the page.
   Every selector is scoped under .s-faq.
   ===================================================================== */

/* ---------- Layout: heading column + question column ---------- */
.s-faq__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-7);
}

.s-faq__head {
  display: grid;
  align-content: start;
  gap: var(--sp-4);
  max-width: 34rem;
}
.s-faq__title {
  font-size: var(--fs-2xl);
  line-height: 1.1;
  letter-spacing: var(--tr-heading);
  max-width: 14ch;
}
.s-faq__intro {
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 38ch;
  text-wrap: pretty;
}

/* Support contact under the heading */
.s-faq__help {
  display: grid;
  gap: var(--sp-1);
  margin-top: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-c);
  font-size: var(--fs-sm);
}
.s-faq__help-title {
  font-weight: 600;
  color: var(--fg);
  margin-bottom: var(--sp-1);
}
.s-faq__help-link,
.s-faq__help-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  width: fit-content;
  color: var(--fg-2);
}
.s-faq__help-link {
  color: var(--link);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--link) 35%, transparent);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur-1) var(--ease-std);
}
.s-faq__help-link:hover { color: var(--link-hover); text-decoration-color: currentColor; }
.s-faq__help-link .icon,
.s-faq__help-meta .icon { width: 1.125rem; height: 1.125rem; color: var(--accent); }
.s-faq__help-meta { min-height: 32px; }

/* ---------- Accordion ---------- */
.s-faq__list {
  min-width: 0;
  border-bottom: 1px solid var(--line-c);
}
.s-faq__item { border-top: 1px solid var(--line-c); }
.s-faq__item:first-child { border-top-color: var(--line-c-strong); }

.s-faq__q {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 44px;
  padding-block: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: 580;
  line-height: 1.28;
  letter-spacing: -0.014em;
  -webkit-tap-highlight-color: transparent;
}
.s-faq__q::-webkit-details-marker { display: none; }
.s-faq__q::marker { content: ""; }
.s-faq__q-text { min-width: 0; text-wrap: pretty; transition: color var(--dur-1) var(--ease-std); }
.s-faq__q:hover .s-faq__q-text { color: var(--link); }
.s-faq__q:focus-visible { border-radius: var(--r-sm); }

/* the toggle: hairline circle, plus / minus from the sprite */
.s-faq__toggle {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-c-strong);
  color: var(--fg);
  transition: border-color var(--dur-2) var(--ease-std), background-color var(--dur-2) var(--ease-std), color var(--dur-2) var(--ease-std), transform var(--dur-3) var(--ease-out);
}
.s-faq__toggle .icon { grid-area: 1 / 1; transition: opacity var(--dur-2) var(--ease-std), transform var(--dur-3) var(--ease-out); }
.s-faq__minus { opacity: 0; transform: rotate(-90deg); }
.s-faq__q:hover .s-faq__toggle { border-color: var(--fg); }
.s-faq__item[open]:not(.is-closing) > .s-faq__q .s-faq__toggle {
  background: var(--c-evergreen);
  border-color: var(--c-evergreen);
  color: var(--c-champagne);
}
.s-faq__item[open]:not(.is-closing) > .s-faq__q .s-faq__plus { opacity: 0; transform: rotate(90deg); }
.s-faq__item[open]:not(.is-closing) > .s-faq__q .s-faq__minus { opacity: 1; transform: none; }

/* answer */
.s-faq__a {
  display: grid;
  gap: var(--sp-4);
  padding-right: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--fg-2);
  max-width: 62ch;
}
.s-faq__a p { text-wrap: pretty; }
/* bottom space as a margin (not padding) so the height animation can reach 0 */
.s-faq__a > :last-child { margin-bottom: var(--sp-6); }
.s-faq__a .link { font-weight: 600; }

/* JS sets this while animating height */
.s-faq__item.is-animating > .s-faq__a { overflow: hidden; }

/* figures inside an answer (minimum deposits) */
.s-faq__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line-c);
  border-radius: var(--r-sm);
  background: var(--bg-inset);
}
.s-faq__facts > div {
  display: grid;
  gap: 2px;
  padding: 12px 16px;
  min-width: 0;
}
.s-faq__facts > div + div { border-left: 1px solid var(--line-c); }
.s-faq__facts dt { font-size: var(--fs-xs); font-weight: 500; color: var(--fg-3); }
.s-faq__facts dd {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--fg);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.01em;
}

.s-faq__docs { display: grid; gap: var(--sp-3); list-style: none; }
.s-faq__docs li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.s-faq__docs .icon { margin-top: 0.3em; color: var(--fg-3); }

/* ---------- Final call to action (evergreen panel) ---------- */
.s-faq__cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-7);
  margin-top: clamp(4.5rem, 2.5rem + 6vw, 8rem);
  padding: clamp(2.5rem, 1.6rem + 4vw, 5.5rem) clamp(1.5rem, 0.6rem + 4vw, 5.5rem) clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  border-radius: var(--r-xl);
  background: var(--c-evergreen);
  color: var(--fg);
  box-shadow: var(--shadow-3);
}
/* oversized line-drawn brand mark, cropped by the panel */
.s-faq__cta-mark {
  position: absolute;
  z-index: -1;
  width: 520px;
  max-width: none;
  height: auto;
  right: -172px;
  top: -213px;
  overflow: visible;
  pointer-events: none;
}
.s-faq__cta-mark circle {
  fill: none;
  stroke: var(--c-moss);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.s-faq__cta-lens {
  fill: none;
  stroke: var(--c-champagne);
  stroke-opacity: 0.6;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.s-faq__cta-body { display: grid; gap: var(--sp-5); align-content: start; min-width: 0; }
.s-faq__cta-title {
  font-size: var(--fs-3xl);
  line-height: 1.02;
  letter-spacing: var(--tr-display);
  font-weight: 720;
  color: var(--fg);
  max-width: 15ch;
}
.s-faq__cta-text {
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 44ch;
  text-wrap: pretty;
}
.s-faq__cta-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}
.s-faq__cta-actions .btn { width: 100%; }

.s-faq__cta-facts {
  display: grid;
  align-content: end;
  min-width: 0;
  border-top: 1px solid var(--line-c-strong);
}
.s-faq__cta-facts > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--line-c);
}
.s-faq__cta-facts dt { font-size: var(--fs-sm); color: var(--fg-3); }
.s-faq__cta-facts dd {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--fg);
  text-align: right;
  font-variant-numeric: lining-nums tabular-nums;
}

/* the finale's risk line: a full .risk-note on forest, never small grey text */
.s-faq .s-faq__cta-risk {
  grid-column: 1 / -1;
  max-width: none;
  background: color-mix(in srgb, var(--c-deep) 55%, var(--c-evergreen));
  border-color: var(--c-moss);
  border-left-color: var(--risk-accent);
}
.s-faq .s-faq__cta-risk > span { max-width: 92ch; }

/* ---------- 480+ : buttons side by side ---------- */
@media (min-width: 480px) {
  .s-faq__cta-actions { flex-direction: row; flex-wrap: wrap; }
  .s-faq__cta-actions .btn { width: auto; }
}

/* ---------- 768+ ---------- */
@media (min-width: 768px) {
  .s-faq__a { padding-right: var(--sp-8); }
  .s-faq__cta-mark { width: 760px; right: -214px; top: -333px; }
  .s-faq__cta-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 0;
  }
  .s-faq__cta-facts > div {
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--sp-1);
    padding: var(--sp-4) var(--sp-5) 0 0;
    border-bottom: 0;
    border-top: 1px solid var(--line-c-strong);
  }
  .s-faq__cta-facts > div + div { padding-left: var(--sp-5); border-left: 1px solid var(--line-c); }
  .s-faq__cta-facts dd { text-align: left; font-size: var(--fs-base); }
}

/* ---------- 1024+ : two columns, sticky heading ---------- */
@media (min-width: 1024px) {
  .s-faq__layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--grid-gap);
    align-items: start;
  }
  .s-faq__head {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-7));
    padding-right: var(--sp-7);
  }
  .s-faq__list { max-width: 46rem; justify-self: end; width: 100%; }

  .s-faq__cta {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--sp-8);
    row-gap: var(--sp-8);
  }
  .s-faq__cta-mark { width: 900px; right: -270px; top: -360px; }
  .s-faq__cta-facts { grid-template-columns: minmax(0, 1fr); align-self: end; }
  .s-faq__cta-facts > div {
    flex-direction: row;
    justify-content: space-between;
    padding: var(--sp-4) 0;
    border-top: 0;
    border-bottom: 1px solid var(--line-c);
  }
  .s-faq__cta-facts > div:first-child { border-top: 1px solid var(--line-c-strong); }
  .s-faq__cta-facts > div + div { padding-left: 0; border-left: 0; }
  .s-faq__cta-facts dd { text-align: right; }
}

@media (min-width: 1280px) {
  .s-faq__cta-mark { right: -210px; }
}

@media (min-width: 1440px) {
  .s-faq__cta-mark { width: 960px; right: -220px; top: -390px; }
}

/* ---------- small phones: deposit figures stack tighter ---------- */
@media (max-width: 419px) {
  .s-faq__facts > div { padding: 10px 12px; }
  .s-faq__facts dd { font-size: var(--fs-base); }
  .s-faq__toggle { width: 36px; height: 36px; }
  .s-faq__q { gap: var(--sp-4); }
}

@media (prefers-reduced-motion: reduce) {
  .s-faq__toggle, .s-faq__toggle .icon { transition: none; }
}

@media (forced-colors: active) {
  .s-faq__toggle { border-color: ButtonText; }
  .s-faq__item[open]:not(.is-closing) > .s-faq__q .s-faq__toggle { background: ButtonText; color: ButtonFace; }
  .s-faq__cta { border: 1px solid CanvasText; }
}


/* =====================================================================
   Integration: page-level rhythm and seams
   ===================================================================== */

/* Page-level fixes made when the sections were assembled. Each rule is
   scoped to one section root, like the section files themselves.
   v3: the v2 overrides for #why (ivory safety panel), #accounts (ink-3
   spread bars) and #platforms (phone stage) were removed: each section
   now owns that styling and the old rules undid the v3 designs. */

/* Keep the overscroll area below the footer in the footer colour. */
html { background: var(--c-deep); }

/* Hero facts at 1024-1279: keep the number and its unit on one line. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .s-hero .s-hero__fact dd { white-space: nowrap; }
  .s-hero .s-hero__fact dd span { display: inline; }
}