/* ─────────────────────────────────────────────────────────────────────────
   Supplements page — the in-app design system, ported verbatim.

   This is deliberately a SEPARATE stylesheet, and every rule is scoped under
   .supp, because it is a different design language from the rest of the site
   (dark clay/teal, Instrument Serif) and must not leak into any other page.
   main.css is untouched.

   Colours and type are the constants from the in-app launch page:
   app/lib/features/supplements/supp_launch_page.dart
   ───────────────────────────────────────────────────────────────────────── */

.supp{
  --sd-dark:#171511; --sd-deep:#0F0D0A; --sd-card:#201D17;
  --sd-light:#F0EEE6; --sd-mid:#EAE5DA; --sd-surface:#FAF9F5; --sd-cream:#FBF7F0;
  --sd-ink:#1A1915; --sd-muted:#5F5D57; --sd-hair:#DCD6C9;
  --sd-clay:#D97757; --sd-clay-deep:#A44A2A; --sd-teal:#0B6252;
  --sd-clay-dk:#E9A987; --sd-teal-dk:#5AC4A6; --sd-teal-tint:#DCEFE9;

  --sd-serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sd-sans:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --sd-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --sd-shell:1080px;
  --sd-gut:clamp(20px,5vw,48px);
  --sd-pad:clamp(56px,8vw,78px);

  font-family:var(--sd-sans);
  color:var(--sd-ink);
  background:var(--sd-surface);
}

/* ---- bands: the light/dark alternation the in-app page uses ---- */
.supp-band{width:100%;padding:var(--sd-pad) var(--sd-gut)}
.supp-band__in{max-width:var(--sd-shell);margin:0 auto}
.supp-band--light{background:var(--sd-light)}
.supp-band--surface{background:var(--sd-surface)}
.supp-band--dark{background:var(--sd-dark);color:var(--sd-cream)}
.supp-band--deep{background:var(--sd-deep);color:var(--sd-cream)}
.supp-band--card{background:var(--sd-card);color:var(--sd-cream)}
.supp-band--card .supp-body,.supp-band--card .supp-lede{color:#C3BEB3}

/* ---- hero: background film over the whole first section ----
   Mirrors the site's own .hero--video treatment (main.css): the film is
   absolutely positioned behind the content with a gradient scrim over it, and
   the reduced-motion decision lives in the <source> media query so no video is
   even requested when motion is unwanted. Scrim is dark here rather than paper,
   because this page's hero band is dark. */
.supp-hero{position:relative;overflow:hidden;display:flex;flex-direction:column;
  justify-content:center;min-height:86vh;min-height:86svh;padding-block:0}
.supp-hero .supp-band__in{position:relative;z-index:1;padding-block:clamp(40px,8vw,72px)}
.supp-hero-media{position:absolute;inset:0;z-index:0;pointer-events:none}
.supp-hero-media video{width:100%;height:100%;object-fit:cover;object-position:center;
  transform:scale(1.06);display:block}
.supp-hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(23,21,17,.72) 0%,rgba(23,21,17,.80) 46%,rgba(23,21,17,.94) 100%)}
@media(max-width:760px){
  .supp-hero{min-height:auto;padding-block:clamp(56px,12vw,84px)}
  .supp-hero-media::after{background:linear-gradient(180deg,rgba(23,21,17,.78) 0%,rgba(23,21,17,.88) 55%,rgba(23,21,17,.96) 100%)}
}

/* ---- type ---- */
.supp-eyebrow{
  font-family:var(--sd-mono);font-weight:700;
  font-size:clamp(11px,1.5vw,12px);letter-spacing:.2em;text-transform:uppercase;
  color:var(--sd-clay-deep);margin:0 0 18px
}
.supp-band--dark .supp-eyebrow,.supp-band--deep .supp-eyebrow,
.supp-band--card .supp-eyebrow{color:var(--sd-clay-dk)}
.supp-eyebrow--teal{color:var(--sd-teal)}
.supp-band--dark .supp-eyebrow--teal{color:var(--sd-teal-dk)}

.supp h1,.supp h2,.supp h3{font-family:var(--sd-serif);font-weight:520;
  letter-spacing:-.022em;line-height:1.06;margin:0;color:var(--sd-ink)}
/* main.css sets a global near-black heading colour that inheritance cannot beat,
   so the on-dark variant must be stated explicitly or headings vanish. */
.supp-band--dark h1,.supp-band--dark h2,.supp-band--dark h3,
.supp-band--deep h1,.supp-band--deep h2,.supp-band--deep h3,
.supp-band--card h1,.supp-band--card h2,.supp-band--card h3{color:var(--sd-cream)}
.supp h2{margin-bottom:18px}
.supp h1{margin-bottom:6px}
.supp h1{font-size:clamp(38px,7.2vw,72px)}
.supp h2{font-size:clamp(28px,4.6vw,46px)}
.supp h3{font-size:clamp(19px,2.4vw,24px);line-height:1.12}
.supp .supp-em{font-style:italic;color:var(--sd-clay)}
.supp-band--light .supp-em,.supp-band--surface .supp-em{color:var(--sd-clay-deep)}

.supp p{font-family:var(--sd-sans);margin:0}
.supp-lede{font-size:clamp(16px,2.1vw,19px);line-height:1.55;color:var(--sd-muted);
  max-width:56ch;margin-top:20px}
.supp-band--dark .supp-lede,.supp-band--deep .supp-lede,
.supp-band--card .supp-lede{color:#B9B4A9}
.supp-body{font-size:16px;line-height:1.6;color:var(--sd-muted);max-width:58ch;margin-top:16px}
.supp-band--dark .supp-body,.supp-band--deep .supp-body{color:#C3BEB3}

/* ---- CTA ---- */
.supp-cta{display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sd-sans);font-size:15px;font-weight:600;text-decoration:none;
  padding:15px 26px;border-radius:999px;transition:transform .18s ease,background .18s ease}
.supp-cta--onDark{background:var(--sd-clay);color:#1A1512}
.supp-cta--onDark:hover{background:var(--sd-clay-dk);transform:translateY(-1px)}
.supp-cta--onLight{background:var(--sd-ink);color:var(--sd-cream)}
.supp-cta--onLight:hover{background:#000;transform:translateY(-1px)}
.supp-cta:focus-visible{outline:2px solid var(--sd-teal-dk);outline-offset:3px}

/* ---- media: 16:9 locked so nothing shifts when a film starts ---- */
.supp-media{position:relative;margin-top:clamp(28px,4vw,44px);border-radius:14px;
  overflow:hidden;background:var(--sd-card);border:1px solid rgba(0,0,0,.08)}

/* iOS renders its own media-control pseudo-elements regardless of the
   `controls` attribute — most visibly the large start-playback button over the
   poster. Scoped to .js so a visitor without JavaScript keeps real, working
   native controls; only once the enhancement runs is WebKit's chrome removed. */
.js .supp-video::-webkit-media-controls,
.js .supp-video::-webkit-media-controls-enclosure,
.js .supp-video::-webkit-media-controls-panel,
.js .supp-video::-webkit-media-controls-panel-container,
.js .supp-video::-webkit-media-controls-overlay-play-button,
.js .supp-video::-webkit-media-controls-start-playback-button{
  display:none !important;-webkit-appearance:none;appearance:none;
  opacity:0;pointer-events:none;height:0;width:0}

/* Sound toggle. Replaces the native control bar once JS runs; the markup keeps
   `controls` so a no-JS visitor still has a way to play. Only control we keep:
   these are muted ambient loops, and prefers-reduced-motion stops them outright. */
.supp-sound{position:absolute;right:12px;bottom:12px;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;border-radius:999px;cursor:pointer;
  color:var(--sd-cream);background:rgba(15,13,10,.62);
  border:1px solid rgba(251,247,240,.22);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .18s ease,transform .18s ease}
.supp-sound:hover{background:rgba(15,13,10,.82);transform:translateY(-1px)}
.supp-sound:focus-visible{outline:2px solid var(--sd-teal-dk);outline-offset:3px}
.supp-sound svg{width:20px;height:20px;display:block;fill:none;
  stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.supp-sound .supp-sound__off{display:none}
.supp-sound[aria-pressed="true"] .supp-sound__on{display:none}
.supp-sound[aria-pressed="true"] .supp-sound__off{display:block}
@media(prefers-reduced-motion:reduce){.supp-sound{transition:none}}
.supp-band--dark .supp-media,.supp-band--card .supp-media{border-color:rgba(255,255,255,.08)}
.supp-media .supp-body{color:#C3BEB3;padding:20px}
.supp-video{display:block;width:100%;aspect-ratio:16/9;height:auto;
  object-fit:cover;background:var(--sd-card)}
.supp-figure{margin:clamp(28px,4vw,44px) 0 0}
.supp-figure img{display:block;width:100%;height:auto;border-radius:14px}

/* ---- pillar grid (six reasons) ---- */
.supp-grid{display:grid;gap:1px;background:var(--sd-hair);
  border:1px solid var(--sd-hair);border-radius:14px;overflow:hidden;
  margin-top:clamp(30px,4vw,46px);grid-template-columns:1fr}
@media(min-width:640px){.supp-grid{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.supp-grid{grid-template-columns:repeat(3,1fr)}}
.supp-cell{background:var(--sd-surface);padding:26px 24px}
.supp-cell h3{margin-bottom:10px}
.supp-cell p{font-size:15.5px;line-height:1.55;color:var(--sd-muted)}

/* ---- split rows ---- */
.supp-split{display:grid;gap:clamp(26px,4vw,52px);grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.supp-split{grid-template-columns:1fr 1fr}
  .supp-split--flip .supp-split__media{order:-1}}
.supp-split+.supp-split{margin-top:clamp(52px,7vw,84px)}
.supp-split__media .supp-media{margin-top:0}

/* ---- chips ---- */
.supp-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;padding:0;list-style:none}
.supp-chip{font-family:var(--sd-mono);font-size:11px;font-weight:700;letter-spacing:.06em;
  padding:9px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.16);
  color:var(--sd-teal-dk);background:rgba(255,255,255,.04)}
.supp-band--light .supp-chip,.supp-band--surface .supp-chip{
  color:var(--sd-teal);border-color:var(--sd-hair);background:var(--sd-teal-tint)}

/* ---- stat pairs (retention, economics) ---- */
.supp-stats{margin-top:clamp(30px,4vw,44px);border-top:1px solid rgba(255,255,255,.14)}
.supp-band--light .supp-stats,.supp-band--surface .supp-stats{border-top-color:var(--sd-hair)}
.supp-stat{display:flex;align-items:baseline;gap:clamp(14px,3vw,30px);
  padding:20px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.supp-band--light .supp-stat,.supp-band--surface .supp-stat{border-bottom-color:var(--sd-hair)}
.supp-stat__n{font-family:var(--sd-mono);font-weight:500;
  font-size:clamp(24px,4.6vw,38px);min-width:5.5ch;font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,.42)}
.supp-band--light .supp-stat__n,.supp-band--surface .supp-stat__n{color:var(--sd-muted)}
.supp-stat__l{font-size:15.5px;line-height:1.5;color:#B9B4A9}
.supp-band--light .supp-stat__l,.supp-band--surface .supp-stat__l{color:var(--sd-muted)}
.supp-stat--win .supp-stat__n{color:var(--sd-clay-dk)}
.supp-band--light .supp-stat--win .supp-stat__n{color:var(--sd-clay-deep)}
.supp-stat--win .supp-stat__l{color:var(--sd-cream)}
.supp-band--light .supp-stat--win .supp-stat__l{color:var(--sd-ink)}

/* ---- transparency list ---- */
.supp-list{margin-top:clamp(28px,4vw,42px);padding:0;list-style:none;
  border-top:1px solid var(--sd-hair)}
.supp-list li{padding:20px 0;border-bottom:1px solid var(--sd-hair)}
.supp-list h3{font-size:clamp(17px,2vw,20px);margin-bottom:6px}
.supp-list p{font-size:15.5px;line-height:1.55;color:var(--sd-muted)}

.supp-fine{font-family:var(--sd-mono);font-size:11px;letter-spacing:.06em;
  color:var(--sd-muted);margin-top:22px;line-height:1.7}
.supp-band--dark .supp-fine,.supp-band--deep .supp-fine{color:#8B867C}

@media(prefers-reduced-motion:reduce){.supp-cta{transition:none}}

/* ---- hero copy over moving footage ----
   Must sit at the end: the band-level colour rules above use the same
   specificity, so this is decided on source order. The muted tokens fall to
   3.5:1 and below against a near-white frame under the lightest scrim. */
.supp-hero .supp-lede{color:#EDE9E0}
.supp-hero .supp-fine{color:#CFC9BF}