/* ============================================================
   ANGSTIPAN(R) - pharma cosplay landing page
   Palette + type tokens per brand brief
   ============================================================ */

:root{
  /* ---- brand -------------------------------------------------
     These four values drive every colour on the page.
     Change them here and the whole site follows.
     ------------------------------------------------------------ */
  --navy:   #080535;
  --blue:   #0050AC;
  --grey-l: #BCBBBC;
  --teal:   #00A99D;

  /* ---- blue: primary / clinical ---- */
  --blue-deep: color-mix(in srgb, var(--blue) 76%, var(--navy));
  --blue-soft: color-mix(in srgb, var(--blue) 26%, #fff);

  /* ---- teal: the "recovery" register (was the gold) ---- */
  --teal-deep: color-mix(in srgb, var(--teal) 74%, var(--navy));
  --teal-soft: color-mix(in srgb, var(--teal) 26%, #fff);

  /* ---- surfaces ---- */
  --white:      color-mix(in srgb, var(--blue) 2%,  #fff);
  --surface-1:  color-mix(in srgb, var(--blue) 3%,  #fff);
  --surface-2:  color-mix(in srgb, var(--blue) 6%,  #fff);
  --surface-3:  color-mix(in srgb, var(--blue) 11%, #fff);
  --surface-t1: color-mix(in srgb, var(--teal) 6%,  #fff);
  --surface-t2: color-mix(in srgb, var(--teal) 13%, #fff);

  /* ---- lines ---- */
  --line-1: color-mix(in srgb, var(--grey-l) 34%, #fff);
  --line-2: color-mix(in srgb, var(--grey-l) 58%, #fff);
  --line-3: var(--grey-l);

  /* ---- text (all derived from navy; --muted holds 4.9:1 on white) ---- */
  --ink:   var(--navy);
  --ink-2: color-mix(in srgb, var(--navy) 84%, #fff);
  --ink-3: color-mix(in srgb, var(--navy) 70%, #fff);
  --muted: color-mix(in srgb, var(--navy) 58%, #fff);
  --faint: color-mix(in srgb, var(--navy) 40%, #fff);

  /* ---- text on dark panels ---- */
  --on-dark-1: color-mix(in srgb, #fff 90%, var(--blue));
  --on-dark-2: color-mix(in srgb, #fff 70%, var(--blue));
  --on-dark-3: color-mix(in srgb, #fff 50%, var(--blue));

  /* ---- dark surfaces (the trench) ---- */
  --trench:      color-mix(in srgb, var(--navy) 86%, var(--blue));
  --trench-deep: var(--navy);

  /* legacy aliases, still referenced below */
  --grey: var(--muted);
  --sky:  var(--blue-soft);

  --shadow-s: 0 1px 2px rgba(8,5,53,.07), 0 4px 12px rgba(8,5,53,.06);
  --shadow-m: 0 2px 4px rgba(8,5,53,.06), 0 12px 32px rgba(8,5,53,.09);
  --shadow-l: 0 4px 8px rgba(8,5,53,.06), 0 28px 64px rgba(8,5,53,.13);

  --r-s: 10px;
  --r-m: 18px;
  --r-l: 28px;

  --font-head: "Satoshi", "DM Sans", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --tscale: 1.1;          /* global type scale */
  --nav-h: 74px;
  --nav-top: 14px;
  --gutter: clamp(20px, 5vw, 56px);
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:calc(17px * var(--tscale));
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
sup{ font-size:.55em; vertical-align:super; line-height:0; }

::selection{ background:var(--sky); color:var(--ink); }

/* ---------- layout ---------- */
.wrap{ width:min(1416px, 100% - var(--gutter)*2); margin-inline:auto; }
.wrap--narrow{ width:min(984px, 100% - var(--gutter)*2); }
.wrap--split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,72px); align-items:center; }
@media (max-width:860px){ .wrap--split{ grid-template-columns:1fr; } }

.section{ padding:clamp(72px,10vw,132px) 0; position:relative; }
section[id]{ scroll-margin-top:calc(var(--nav-h) + var(--nav-top) + 20px); }

/* ---------- type ---------- */
.kicker{
  font-family:var(--font-head);
  font-size:calc(12px * var(--tscale)); font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue); margin:0 0 14px;
}
.h2{
  font-family:var(--font-head); font-weight:600;
  font-size:calc(clamp(30px,4.4vw,52px) * var(--tscale)); line-height:1.1; letter-spacing:0;
  margin:0 0 22px; color:var(--ink); text-wrap:balance;
}
.h2__soft{ color:var(--grey); font-weight:400; font-size:.55em; line-height:1.35; display:inline-block; margin-top:.55em; letter-spacing:0; }
.lede{ font-size:calc(clamp(16px,1.5vw,19px) * var(--tscale)); color:var(--ink-3); max-width:62ch; margin:0 0 18px; }
.footnote{ font-size:calc(12.5px * var(--tscale)); line-height:1.55; color:var(--grey); margin:26px 0 0; max-width:70ch; }
.muted{ color:var(--grey); }
.microtext{ font-size:calc(11.5px * var(--tscale)); line-height:1.5; color:var(--grey); max-width:52ch; margin:26px auto 0; }

/* ---------- buttons ---------- */
.btn{
  --bg:var(--blue); --fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--font-head); font-weight:500; font-size:calc(15px * var(--tscale)); letter-spacing:.005em;
  padding:.78em 1.5em; border-radius:999px; border:1px solid transparent;
  background:var(--bg); color:var(--fg); text-decoration:none; cursor:pointer;
  transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s, background .3s, color .3s;
  box-shadow:var(--shadow-s);
}
.btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow-m); }
.btn:active{ transform:translateY(0); }
.btn--primary{ background:var(--blue); }
.btn--primary:hover{ background:var(--blue-deep); }
.btn--ghost{ background:#fff; color:var(--blue); border-color:var(--line-2); }
.btn--ghost:hover{ background:var(--surface-1); }
.btn--accent{ background:var(--teal); color:var(--navy); }
.btn--accent:hover{ background:var(--teal-deep); }
.btn--lg{ font-size:calc(16px * var(--tscale)); padding:.95em 1.9em; }

/* ---------- nav ---------- */
/* floating liquid-glass bar: detached pill, refracted background,
   specular top edge and a soft cast shadow */
.nav{
  /* centred with margin, not translateX: a transform here would make the
     nav the containing block for the position:fixed mobile dropdown */
  position:fixed; top:var(--nav-top); left:0; right:0; margin-inline:auto;
  z-index:60; height:var(--nav-h);
  width:min(1416px, calc(100% - var(--gutter) * 2));
  display:flex; align-items:center; gap:22px;
  padding:0 clamp(14px, 2vw, 26px);
  border-radius:999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.34));
  backdrop-filter:saturate(190%) blur(22px);
  -webkit-backdrop-filter:saturate(190%) blur(22px);
  border:1px solid rgba(255,255,255,.62);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(255,255,255,.30),
    0 10px 30px rgba(8,5,53,.10),
    0 2px 6px rgba(8,5,53,.05);
  transition:background .4s, box-shadow .4s, border-color .4s, top .4s;
}
/* the sheen that sells it as glass rather than frosted plastic */
.nav::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(105deg,
    rgba(255,255,255,0) 18%,
    rgba(255,255,255,.34) 42%,
    rgba(255,255,255,0) 62%);
}
.nav > *{ position:relative; z-index:1; }
.nav.is-stuck{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(255,255,255,.30),
    0 14px 38px rgba(8,5,53,.14),
    0 3px 10px rgba(8,5,53,.07);
}
.nav--dark{
  background:linear-gradient(180deg, rgba(8,5,53,.62), rgba(8,5,53,.44));
  border-color:rgba(255,255,255,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 14px 38px rgba(8,5,53,.34) !important;
}
.nav--dark::before{
  background:linear-gradient(105deg,
    rgba(255,255,255,0) 18%,
    rgba(255,255,255,.12) 42%,
    rgba(255,255,255,0) 62%);
}
.nav--dark .brandmark__img--color{ opacity:0; }
.nav--dark .brandmark__img--ko{ opacity:1; }
.nav--dark .nav__links a{ color:var(--on-dark-2); }
.nav--dark .nav__links a:hover{ color:#fff; }
.nav--dark .nav__toggle span{ background:var(--on-dark-1); }
.nav__brand{ display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); }
/* brandmark: colour logo, knockout swaps in over dark panels */
.brandmark{ position:relative; display:block; line-height:0; }
.brandmark__img{ display:block; width:auto; transition:opacity .4s; }
.brandmark__img--ko{ position:absolute; inset:0; opacity:0; }
.brandmark--nav .brandmark__img{ height:30px; }
@media (max-width:520px){ .brandmark--nav .brandmark__img{ height:25px; } }
.nav__links{ display:flex; gap:26px; margin-left:auto; }
.nav__links a{
  font-size:calc(14px * var(--tscale)); color:var(--ink-3); text-decoration:none; white-space:nowrap;
  padding:6px 0; border-bottom:1.5px solid transparent; transition:color .25s, border-color .25s;
}
.nav__links a:hover{ color:var(--blue); border-bottom-color:var(--sky); }
.btn--buy{ position:relative; }
.btn--buy::after{
  content:""; position:absolute; inset:-4px; border-radius:999px;
  box-shadow:0 0 0 0 color-mix(in srgb, var(--blue) 40%, transparent); animation:pulse 3.4s ease-out infinite; pointer-events:none;
}
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--blue) 34%, transparent);} 60%,100%{ box-shadow:0 0 0 14px color-mix(in srgb, var(--blue) 0%, transparent);} }
.nav__toggle{ display:none; }

@media (max-width:940px){
  .nav__links{
    position:fixed; top:calc(var(--nav-h) + var(--nav-top) + 8px);
    left:var(--gutter); right:var(--gutter); flex-direction:column; gap:0;
    background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.74));
    backdrop-filter:saturate(190%) blur(22px);
    -webkit-backdrop-filter:saturate(190%) blur(22px);
    border:1px solid rgba(255,255,255,.62); border-radius:22px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 14px 38px rgba(8,5,53,.14);
    padding:8px 20px 14px;
    transform:translateY(-8px); opacity:0; pointer-events:none; transition:.3s;
  }
  .nav__links.is-open{ transform:none; opacity:1; pointer-events:auto; }
  .nav__links a{ padding:13px 0; border-bottom:1px solid var(--line-1); font-size:calc(16px * var(--tscale)); }
  .btn--buy{ margin-left:auto; font-size:calc(14px * var(--tscale)); padding:.7em 1.15em; }
  .nav__toggle{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:38px; height:38px; border:0; background:none; cursor:pointer; padding:0 0 0 6px;
  }
  .nav__toggle span{ display:block; height:1.6px; width:20px; background:var(--ink); border-radius:2px; transition:.3s; }
  .nav__toggle[aria-expanded="true"] span:first-child{ transform:translateY(3.3px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:last-child{ transform:translateY(-3.3px) rotate(-45deg); }
}

/* ---------- the guide pill ---------- */
.guide{
  --guide-op:.92;
  position:fixed; top:0; left:0; z-index:40; width:clamp(103px,12vw,174px);
  pointer-events:none; opacity:0; will-change:transform;
  filter:drop-shadow(0 10px 22px color-mix(in srgb, var(--blue-deep) 28%, transparent));
}
.guide__fallback{ opacity:var(--guide-op); width:100%; height:auto; }
/* the tablets render into a 2:1 canvas; the pair reads as one object */
/* with WebGL on, the guide keeps its box and its GSAP animation but draws
   nothing: hero-swarm.js reads its rect and renders the tablets there. */
.webgl .guide{ aspect-ratio:2/1; filter:none; }
.webgl .guide__fallback{ display:none; }
@media (max-width:700px){ .guide{ width:100px; } }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center;
  padding:calc(var(--nav-h) + var(--nav-top) + 40px) var(--gutter) 80px; overflow:hidden; text-align:center;
}
.hero__sky{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 80% at 50% 110%, color-mix(in srgb, var(--teal) 42%, transparent) 0%, color-mix(in srgb, var(--teal) 0%, transparent) 58%),
    linear-gradient(178deg,
      color-mix(in srgb, var(--blue) 20%, #fff) 0%,
      color-mix(in srgb, var(--blue) 8%,  #fff) 34%,
      color-mix(in srgb, var(--teal) 7%,  #fff) 70%,
      color-mix(in srgb, var(--teal) 18%, #fff) 100%);
}
.hero__sun{
  position:absolute; left:50%; bottom:-18vh; width:min(78vw,900px); aspect-ratio:1; z-index:0;
  transform:translateX(-50%);
  background:radial-gradient(circle, color-mix(in srgb, var(--teal) 8%, rgba(255,255,255,.95)) 0%, color-mix(in srgb, var(--teal) 30%, transparent) 38%, color-mix(in srgb, var(--teal) 0%, transparent) 68%);
  filter:blur(2px);
}
.hero__inner{ position:relative; z-index:3; max-width:900px; }

.eyebrow{
  font-family:var(--font-head); font-size:calc(clamp(10.5px,1.1vw,12.5px) * var(--tscale)); font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--blue); margin:0 0 22px;
}
.hero__h1{
  font-family:var(--font-head); font-weight:600;
  font-size:calc(clamp(42px,8.2vw,104px) * var(--tscale)); line-height:.98; letter-spacing:0;
  margin:0 0 24px; color:var(--ink); text-wrap:balance;
}
.hero__h1 em{ font-style:normal; color:var(--blue); }
.hero__sub{ font-size:calc(clamp(16px,1.75vw,21px) * var(--tscale)); color:var(--ink-3); max-width:60ch; margin:0 auto; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:36px; }
.hero__cta .btn{ font-size:calc(16px * var(--tscale)); padding:.95em 1.9em; }

.hero__scroll{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:3;
  font-family:var(--font-head); font-size:calc(11px * var(--tscale)); letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:9px;
}
.hero__scroll span{ display:block; width:1px; height:34px; background:linear-gradient(var(--muted),rgba(8,5,53,0)); }

/* pill swarm */
.swarm{ position:absolute; inset:0; z-index:2; pointer-events:none; }
/* the real tablets render here; the DOM swarm above is the no-WebGL fallback */
/* one fixed stage for the whole journey: the hero swarm, the pair that
   converges out of it, and the pair travelling the page as the guide.
   Sits above section backgrounds; the swarm layout keeps clear of the
   centre column so it never covers the headline. */
.swarm__canvas{ position:fixed; inset:0; width:100%; height:100%; z-index:40; pointer-events:none; }
.webgl .swarm{ display:none; }
.swarm .pill{ position:absolute; width:var(--w); will-change:transform; }
.swarm .pill svg{ width:100%; height:auto; filter:drop-shadow(0 12px 24px color-mix(in srgb, var(--blue-deep) 18%, transparent)); }
.swarm .pill__float{ display:block; animation:bob var(--dur) ease-in-out var(--delay) infinite alternate; }
@keyframes bob{ from{ transform:translateY(-9px) rotate(var(--rot)); } to{ transform:translateY(9px) rotate(calc(var(--rot) + 8deg)); } }
@media (prefers-reduced-motion:reduce){ .swarm .pill__float{ animation:none; } }

/* ============================================================
   CONDITION / QUIZ
   ============================================================ */
.condition{ background:linear-gradient(180deg,var(--surface-t2) 0%, var(--white) 22%); }
.quiz{
  margin-top:44px; background:#fff; border:1px solid var(--line-1); border-radius:var(--r-l);
  padding:clamp(24px,3.6vw,44px); box-shadow:var(--shadow-m); max-width:860px;
}
.quiz__title{
  font-family:var(--font-head); font-weight:700; font-size:calc(15px * var(--tscale)); letter-spacing:.02em;
  margin:0 0 18px; padding-bottom:16px; border-bottom:1px solid var(--line-1);
  display:flex; flex-wrap:wrap; gap:10px; align-items:baseline;
}
.quiz__title span{ font-weight:400; font-size:calc(13px * var(--tscale)); color:var(--grey); font-family:var(--font-body); }
.quiz__list{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.quiz__list label{
  display:flex; gap:14px; align-items:flex-start; padding:12px 12px 12px 10px;
  border-radius:var(--r-s); cursor:pointer; transition:background .2s;
}
.quiz__list label:hover{ background:var(--surface-1); }
.quiz__list input{ position:absolute; opacity:0; width:0; height:0; }
.quiz__list .box{
  flex:0 0 auto; width:21px; height:21px; margin-top:1px; border-radius:6px;
  border:1.5px solid var(--line-3); background:#fff; transition:.22s; position:relative;
}
.quiz__list .box::after{
  content:""; position:absolute; left:6.5px; top:2.5px; width:5px; height:10px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg) scale(.4); opacity:0; transition:.22s;
}
.quiz__list input:checked + .box{ background:var(--blue); border-color:var(--blue); }
.quiz__list input:checked + .box::after{ opacity:1; transform:rotate(45deg) scale(1); }
.quiz__list input:focus-visible + .box{ outline:2px solid var(--blue); outline-offset:3px; }
.quiz__list .txt{ font-size:calc(16px * var(--tscale)); color:var(--ink-2); }
.quiz__list input:checked ~ .txt{ color:var(--ink); }
.quiz__result{
  margin-top:22px; padding:18px 20px; border-radius:var(--r-m);
  background:var(--surface-1); border:1px solid var(--line-1); font-size:calc(15px * var(--tscale)); color:var(--ink-3);
  transition:background .4s, border-color .4s;
}
.quiz__result p{ margin:0; }
.quiz__result.is-positive{ background:var(--surface-t1); border-color:var(--teal-soft); }
.quiz__result .cta{ display:inline-block; margin-top:12px; }

/* ============================================================
   photo slots
   ============================================================ */
.shot{
  margin:0; position:relative; border-radius:var(--r-l); overflow:hidden;
  background:linear-gradient(160deg,var(--surface-3),var(--surface-t2)); box-shadow:var(--shadow-l);
}
.shot img{ width:100%; height:100%; object-fit:cover; }
.shot--tall{ aspect-ratio:4/5; }
/* the mechanism film sits bare in the column: no card, no frame, no shadow */
.what__film{
  display:block; width:100%; height:auto; border-radius:0;
  background:none; box-shadow:none;
}
.shot figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:26px 22px 14px;
  font-size:calc(11px * var(--tscale)); color:#fff; letter-spacing:.02em;
  background:linear-gradient(transparent,rgba(8,5,53,.55));
}
.shot.is-empty img{ opacity:0; }
.shot.is-empty::after{
  content:"PHOTO SLOT \a" attr(data-slot);
  white-space:pre; position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:20px;
  font-family:var(--font-head); font-size:calc(11.5px * var(--tscale)); font-weight:500; letter-spacing:.12em;
  color:var(--faint); line-height:2.1;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.5) 0 12px,rgba(255,255,255,.22) 12px 24px);
}
.shot.is-empty figcaption{ display:none; }
.shot--dark{ background:linear-gradient(160deg,var(--trench),var(--trench-deep)); }
.shot--dark.is-empty::after{
  color:var(--on-dark-3);
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 12px,rgba(255,255,255,.02) 12px 24px);
}

/* ============================================================
   WHAT IS
   ============================================================ */
.badges{ list-style:none; display:flex; flex-wrap:wrap; gap:9px; padding:0; margin:28px 0 0; }
.badges li{
  font-family:var(--font-head); font-size:calc(12px * var(--tscale)); font-weight:500; letter-spacing:.04em;
  color:var(--blue); background:var(--surface-2); border:1px solid var(--line-1); border-radius:999px; padding:7px 15px;
}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.how{ background:linear-gradient(180deg,#fff,var(--surface-2)); }
.cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:44px; }
@media (max-width:980px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .cards{ grid-template-columns:1fr; } }
.card{
  background:#fff; border:1px solid var(--line-1); border-radius:var(--r-l);
  padding:30px 26px 28px; box-shadow:var(--shadow-s);
  transition:transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-m); }
.ico{ width:42px; height:42px; fill:none; stroke:var(--blue); stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; margin-bottom:18px; }
.card h3{ font-family:var(--font-head); font-size:calc(19px * var(--tscale)); font-weight:600; letter-spacing:0; margin:0 0 9px; }
.card p{ margin:0; font-size:calc(15px * var(--tscale)); color:var(--ink-3); line-height:1.6; }

/* ============================================================
   BEFORE / AFTER
   ============================================================ */
.ba{ background:var(--surface-2); }
.ba__stage{
  position:relative; margin-top:40px; border-radius:var(--r-l); overflow:hidden;
  aspect-ratio:16/9; box-shadow:var(--shadow-l); user-select:none; touch-action:pan-y;
  background:var(--surface-3); cursor:ew-resize;
}
@media (max-width:640px){ .ba__stage{ aspect-ratio:4/5; } }
.ba__layer{ position:absolute; inset:0; margin:0; border-radius:0; box-shadow:none; }
.ba__before{ clip-path:inset(0 50% 0 0); }
.ba__handle{
  position:absolute; top:0; bottom:0; left:50%; width:3px; margin-left:-1.5px; z-index:5;
  background:rgba(255,255,255,.92); box-shadow:0 0 18px rgba(8,5,53,.35); cursor:ew-resize;
}
.ba__handle:focus-visible{ outline:2px solid var(--teal); outline-offset:4px; }
.ba__grip{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:50px; height:50px; border-radius:50%; background:#fff; box-shadow:var(--shadow-m);
  display:grid; place-items:center;
}
.ba__grip::before, .ba__grip::after{
  content:""; position:absolute; width:0; height:0;
  border-top:5.5px solid transparent; border-bottom:5.5px solid transparent;
}
.ba__grip::before{ border-right:7px solid var(--blue); left:12px; }
.ba__grip::after{ border-left:7px solid var(--blue); right:12px; }
.ba__tag{
  position:absolute; bottom:16px; z-index:4;
  font-family:var(--font-head); font-size:calc(11px * var(--tscale)); font-weight:500; letter-spacing:.11em; text-transform:uppercase;
  padding:7px 13px; border-radius:999px; backdrop-filter:blur(6px);
}
.ba__tag--l{ left:16px; background:rgba(8,5,53,.6); color:var(--on-dark-1); }
.ba__tag--r{ right:16px; background:rgba(255,255,255,.78); color:var(--ink-2); }

/* ============================================================
   THE SPOT
   ============================================================ */
.spot{ height:260vh; position:relative; background:var(--surface-2); }
@media (max-width:700px){ .spot{ height:190vh; } }
.spot__pin{ height:100svh; display:grid; place-items:center; }
.spot__frame{
  position:relative; width:min(560px, calc(100% - var(--gutter)*2)); aspect-ratio:16/9;
  border-radius:var(--r-l); overflow:hidden; background:var(--trench);
  box-shadow:var(--shadow-l); will-change:transform,width,border-radius;
  display:grid; place-items:center;
}
.spot__frame video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.spot__empty{
  position:absolute; inset:0; display:grid; place-items:center; align-content:center; gap:8px;
  text-align:center; padding:24px; color:var(--on-dark-3);
  background:radial-gradient(70% 90% at 50% 40%, var(--trench) 0%, var(--trench-deep) 100%);
}
.spot__frame.has-video .spot__empty{ display:none; }
.spot__pill{ width:64px; opacity:.9; transform:rotate(-20deg); }
.spot__empty p{ margin:6px 0 0; font-family:var(--font-head); font-weight:500; font-size:calc(14px * var(--tscale)); letter-spacing:.06em; color:var(--on-dark-2); }
.spot__empty span{ font-size:calc(11.5px * var(--tscale)); letter-spacing:.02em; }
.spot__empty code{ color:var(--teal); font-size:calc(11.5px * var(--tscale)); }
.spot__play{
  position:absolute; z-index:3; width:74px; height:74px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.94); box-shadow:var(--shadow-m); display:grid; place-items:center;
  transition:transform .35s cubic-bezier(.2,.7,.3,1), opacity .3s;
}
.spot__play svg{ width:30px; height:30px; fill:var(--blue); margin-left:3px; }
.spot__play:hover{ transform:scale(1.07); }
.spot__frame.is-playing .spot__play{ opacity:0; pointer-events:none; }
.spot__frame:not(.has-video) .spot__play{ display:none; }
.spot__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2; margin:0; padding:34px 20px 14px;
  text-align:center; font-size:calc(11px * var(--tscale)); letter-spacing:.11em; text-transform:uppercase; color:var(--on-dark-2);
  background:linear-gradient(transparent,rgba(8,5,53,.6)); pointer-events:none;
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testi{ background:linear-gradient(180deg,var(--surface-2),#fff); overflow:hidden; }
.marquee{ margin:40px 0 8px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.marquee__track{ display:flex; gap:20px; width:max-content; padding:8px var(--gutter); animation:slide 52s linear infinite; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .marquee__track{ animation:none; } .marquee{ overflow-x:auto; } }
.quote{
  flex:0 0 auto; width:min(340px,78vw); margin:0; background:#fff;
  border:1px solid var(--line-1); border-radius:var(--r-l); padding:26px; box-shadow:var(--shadow-s);
}
.stars{ color:var(--teal-deep); letter-spacing:2px; font-size:calc(14px * var(--tscale)); margin-bottom:10px; }
.quote blockquote{ margin:0 0 14px; font-family:var(--font-head); font-size:calc(18px * var(--tscale)); line-height:1.42; font-weight:500; letter-spacing:0; color:var(--ink); }
.quote figcaption{ font-size:calc(13px * var(--tscale)); color:var(--ink-3); font-weight:500; }
.quote figcaption span{ color:var(--grey); font-weight:400; }
.quote figcaption span::before{ content:" \00b7  "; }

/* ============================================================
   DOSING
   ============================================================ */
.dosing{ background:#fff; }
.rx{ margin-top:38px; border:1px solid var(--line-1); border-radius:var(--r-l); overflow:hidden; box-shadow:var(--shadow-m); }
.rx__table{ width:100%; border-collapse:collapse; font-size:calc(15.5px * var(--tscale)); }
.rx__table tr + tr{ border-top:1px solid var(--line-1); }
.rx__table tr:nth-child(odd){ background:var(--surface-1); }
.rx__table th{
  text-align:left; font-family:var(--font-head); font-weight:700; font-size:calc(13px * var(--tscale));
  letter-spacing:.03em; color:var(--ink-3); width:38%; padding:17px 22px; vertical-align:top;
}
.rx__table td{ padding:17px 22px; color:var(--ink-2); vertical-align:top; }
@media (max-width:600px){
  .rx__table, .rx__table tbody, .rx__table tr, .rx__table th, .rx__table td{ display:block; width:auto; }
  .rx__table th{ padding:16px 18px 2px; }
  .rx__table td{ padding:0 18px 16px; }
}
.ca{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:calc(13px * var(--tscale)); word-break:break-all; color:var(--blue-deep); background:var(--surface-2); padding:4px 8px; border-radius:6px; }
.dosing__tag{
  margin:26px 0 0; font-family:var(--font-head); font-weight:500; font-size:calc(clamp(16px,2vw,20px) * var(--tscale));
  color:var(--blue); letter-spacing:0;
}

/* ============================================================
   PRESCRIPTION
   ============================================================ */
.rxfill{ background:linear-gradient(180deg,#fff 0%, var(--surface-t1) 100%); }
.steps{ list-style:none; counter-reset:none; margin:42px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media (max-width:980px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }
.steps li{ background:#fff; border:1px solid var(--line-2); border-radius:var(--r-l); padding:26px; box-shadow:var(--shadow-s); }
.steps__n{
  display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:var(--teal); color:var(--navy); font-family:var(--font-head); font-weight:700; font-size:calc(15px * var(--tscale)); margin-bottom:16px;
}
.steps h3{ font-family:var(--font-head); font-size:calc(18px * var(--tscale)); font-weight:600; margin:0 0 7px; letter-spacing:0; }
.steps p{ margin:0; font-size:calc(15px * var(--tscale)); color:var(--ink-3); }
.rxfill__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }

/* ============================================================
   SUPPORT
   ============================================================ */
.support{ background:var(--surface-t1); text-align:center; }
.support .lede{ margin-inline:auto; }
.support__cta{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:34px; }
.support .footnote{ margin-inline:auto; }

/* ============================================================
   ISI
   ============================================================ */
.isi{ background:#fff; padding-top:clamp(56px,7vw,90px); padding-bottom:clamp(48px,6vw,76px); }
.isi__h{
  font-family:var(--font-head); font-size:calc(13px * var(--tscale)); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 14px;
  padding-bottom:12px; border-bottom:2px solid var(--line-2);
}
.isi__scroller{
  height:210px; overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 86%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 12%,#000 86%,transparent);
}
.isi__scroller:focus-visible{ outline:2px solid var(--blue); outline-offset:6px; }
.isi__track{ will-change:transform; }
.isi__copy p{ font-size:calc(12.5px * var(--tscale)); line-height:1.72; color:var(--grey); margin:0 0 12px; }
.isi__copy p:first-child::before{ content:"IMPORTANT SAFETY INFORMATION: "; font-weight:600; color:var(--ink-3); }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ background:var(--surface-2); border-top:1px solid var(--line-1); padding:52px 0 40px; }
.foot__grid{ display:flex; flex-wrap:wrap; gap:26px 44px; align-items:center; justify-content:space-between; }
.foot__brand{ display:flex; align-items:center; gap:13px; }
.brandmark--foot .brandmark__img{ height:28px; margin-bottom:8px; }
.foot__parent{ margin:0; font-size:calc(12px * var(--tscale)); color:var(--grey); }
.foot__links{ display:flex; flex-wrap:wrap; gap:10px 24px; }
.foot__links a{ font-size:calc(13px * var(--tscale)); color:var(--ink-3); text-decoration:none; border-bottom:1px solid transparent; }
.foot__links a:hover{ color:var(--blue); border-bottom-color:var(--sky); }
.foot__fine{ margin-top:34px; padding-top:26px; border-top:1px solid var(--line-1); }
.foot__fine p{ font-size:calc(11.5px * var(--tscale)); line-height:1.66; color:var(--grey); margin:0 0 10px; max-width:92ch; }
.foot__fine strong{ color:var(--ink-3); font-weight:600; }
.foot__copy{ margin-top:16px !important; }

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:26px; z-index:90; transform:translate(-50%,16px);
  background:var(--ink); color:#fff; font-family:var(--font-head); font-size:calc(14px * var(--tscale));
  padding:12px 22px; border-radius:999px; box-shadow:var(--shadow-l);
  opacity:0; pointer-events:none; transition:.35s cubic-bezier(.2,.7,.3,1);
}
.toast.is-on{ opacity:1; transform:translate(-50%,0); }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); }
.reveal.is-in{ opacity:1; transform:none; transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; } }

/* video-missing state */
.spot__frame.no-video .spot__play{ display:none; }

/* ============================================================
   TICKER CHIPS  ($ANGS / $TTWO wink)
   ============================================================ */
.tick{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.86em; font-weight:600; letter-spacing:.02em; white-space:nowrap;
  color:var(--blue-deep); background:var(--surface-2);
  border:1px solid var(--line-1); border-radius:999px; padding:.15em .55em;
}
/* mid-sentence: monospace only, no pill (chip padding breaks prose rhythm) */
.tick--inline{ background:none; border:0; padding:0; color:inherit; font-weight:600; }
.tickerline{
  font-family:var(--font-head); font-size:calc(12.5px * var(--tscale)); letter-spacing:.04em;
  color:var(--muted); margin:16px 0 0; display:flex; flex-wrap:wrap;
  align-items:center; justify-content:center; gap:8px;
}
.tickerline em{ font-style:normal; color:var(--ink-3); }
.tickerline__sep{ color:var(--line-3); }
.rx__dose{
  margin:0 0 18px; font-family:var(--font-head); font-size:calc(16px * var(--tscale)); color:var(--ink-3);
  background:var(--surface-t1); border-left:3px solid var(--teal);
  border-radius:0 var(--r-s) var(--r-s) 0; padding:14px 18px;
}
.rx__dose strong{ color:var(--ink); }
.foot__tick{ display:inline-flex; align-items:center; }