/* ═══════════════════════════════════════════════════════════════
   NutraSafe flagship homepage · 2026-09-07
   Loads AFTER css/home-2026.css and overrides it.
   home-2026.css keeps the topbar, the footer, .btn and the megamenu.
   Everything between them is defined here.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --ink:#15191B;
  --ink-2:#1E2427;          /* raised surface on the dark ground */
  --ink-3:#2A3236;          /* hairline on the dark ground */
  --on-ink:#F4F6F6;
  --on-ink-soft:#A4AFB2;

  --paper:#FBFCFC;
  --cream:#F6F1E7;          /* printed-packaging surface */
  --cream-line:#E3DACB;

  --teal:#0E9C82;
  --teal-lift:#18C7A4;      /* teal that survives the dark ground */
  --coral:#E8624A;
  --coral-lift:#FF7B62;
  --amber:#E0A33A;
  --amber-lift:#F5BC57;

  --display:"Bricolage Grotesque","Plus Jakarta Sans",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* Fluid display scale. One ramp, used everywhere, so the page has a
   consistent sense of scale instead of eleven arbitrary heading sizes. */
:root{
  --t-hero:clamp(2.35rem,1.2rem + 3.2vw,3.75rem);
  --t-xl:clamp(2rem,1.15rem + 3.1vw,3.6rem);
  --t-lg:clamp(1.5rem,1.1rem + 1.5vw,2.25rem);
  --t-md:clamp(1.15rem,1rem + .55vw,1.4rem);
  --t-lede:clamp(1.02rem,.96rem + .42vw,1.22rem);
}

h1,h2,h3,.display{font-family:var(--display);font-weight:800;letter-spacing:-.028em;line-height:1.02}
h3{font-weight:700;letter-spacing:-.018em;line-height:1.15}

.shell{max-width:1240px;margin:0 auto;padding:0 26px}

/* ── Orchestrated reveal ───────────────────────────────────────
   One mechanism for the whole page: a section gets .seq, its
   children stagger off --i. No per-section bespoke animation. */
/* Every hidden-by-default state is gated on .js-anim, which the page adds
   in the head. With no JS, or if the observer never fires, the page renders
   fully visible rather than blank. */
.js-anim .seq [data-r]{opacity:0;transform:translateY(18px);
  transition:opacity .72s var(--ease-out),transform .72s var(--ease-out);
  transition-delay:calc(var(--i,0) * 90ms)}
.js-anim .seq.in [data-r]{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .js-anim .seq [data-r]{opacity:1!important;transform:none!important;transition:none!important}
  .js-anim .nut__fill{animation:none!important}
}

/* ═══════════════════ HERO ═══════════════════ */
.hero-f{
  position:relative;background:var(--ink);color:var(--on-ink);
  padding:clamp(48px,5.5vw,84px) 0 clamp(76px,6.5vw,104px);
  overflow:hidden;isolation:isolate;
}
/* A single warm light source behind the type, so the dark ground has
   depth rather than reading as a flat black box. */
.hero-f::before{
  content:"";position:absolute;inset:-30% -10% auto -25%;height:120%;
  background:radial-gradient(58% 52% at 22% 34%,rgba(14,156,130,.20),transparent 68%),
             radial-gradient(46% 44% at 82% 8%,rgba(224,163,58,.14),transparent 70%);
  z-index:-1;pointer-events:none;
}
.hero-f__grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(34px,4.4vw,68px);align-items:center}

.hero-f__rating{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;
  color:var(--on-ink-soft);border:1px solid var(--ink-3);border-radius:999px;padding:7px 14px 7px 11px;margin-bottom:22px}
.hero-f__rating b{color:var(--on-ink);font-weight:700}

.hero-f h1{font-size:var(--t-hero);margin:0 0 22px}
.hero-f h1 > span{display:block;text-wrap:balance}
.hero-f h1 .l2{display:block;color:var(--on-ink)}
/* The hook gets the only accent on the page's largest type. */
.hero-f h1 .hook{position:relative;white-space:nowrap}
.hero-f h1 .hook::after{
  content:"";position:absolute;left:-.04em;right:-.04em;bottom:.02em;height:.13em;
  background:var(--teal-lift);border-radius:99px;opacity:.85;transform-origin:left}
.js-anim .hero-f h1 .hook::after{transform:scaleX(0);transition:transform .9s var(--ease-out) .55s}
.js-anim .hero-f.in h1 .hook::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.hero-f h1 .hook::after{transform:scaleX(1);transition:none}}

.hero-f__lede{font-size:var(--t-lede);line-height:1.55;color:var(--on-ink-soft);max-width:38em;margin:0 0 30px}
.hero-f__lede b{color:var(--on-ink);font-weight:600}

.hero-f__ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero-f .btn--ink{background:var(--on-ink);color:var(--ink)}
.hero-f .btn--ink:hover{box-shadow:0 18px 44px rgba(0,0,0,.45)}
.hero-f .btn--ghost{background:transparent;color:var(--on-ink);border-color:var(--ink-3)}
.hero-f .btn--ghost:hover{border-color:var(--on-ink-soft);background:rgba(255,255,255,.04)}
.hero-f__note{margin-top:16px;font-size:13.5px;color:var(--on-ink-soft)}
.hero-f__note a{color:var(--on-ink);border-bottom:1px solid var(--ink-3)}
.hero-f__note a:hover{border-color:var(--on-ink)}

/* ── The hero artefact: photograph, label, verdict ───────────── */
.stage{position:relative}
.stage__photo{position:relative;border-radius:22px;overflow:hidden;
  box-shadow:0 40px 90px rgba(0,0,0,.5);aspect-ratio:4/3.3}
.stage__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 54%;display:block}
.stage__photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(184deg,transparent 34%,rgba(12,15,16,.42) 78%,rgba(12,15,16,.72))}

/* The printed label. Deliberately not UI: cream stock, mono type. */
.lbl{position:absolute;left:-5%;right:7%;bottom:33%;z-index:2;
  background:var(--cream);color:#241F17;border-radius:13px;
  padding:14px 16px 15px;box-shadow:0 22px 48px rgba(0,0,0,.42);
  transform:rotate(-1.15deg)}
.lbl__cap{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:#8B8271;margin-bottom:7px}
.lbl__body{font-family:var(--mono);font-size:12.4px;line-height:1.62;letter-spacing:-.005em}
.lbl mark{background:none;color:inherit;position:relative;padding:1px 3px;border-radius:4px;font-weight:700}
.lbl mark::before{content:"";position:absolute;inset:0;background:var(--amber);opacity:.42;border-radius:4px;transform-origin:left}
.js-anim .lbl mark::before{transform:scaleX(0);transition:transform .5s var(--ease-out) 1.05s}
.js-anim .hero-f.in .lbl mark::before{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.lbl mark::before{transform:scaleX(1);transition:none}}

/* The verdict. This is the app's answer, and it overlaps the label
   so the two read as one move rather than two cards. */
.vd{position:absolute;right:-4%;bottom:-11%;width:min(332px,72%);z-index:3;
  background:#fff;color:var(--ink);border-radius:16px;padding:16px 17px 15px;
  box-shadow:0 30px 70px rgba(0,0,0,.5)}
.js-anim .vd{opacity:0;transform:translateY(22px) scale(.97);
  transition:opacity .7s var(--ease-out) 1.35s,transform .7s var(--ease-out) 1.35s}
.js-anim .hero-f.in .vd{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.vd{opacity:1;transform:none;transition:none}}
.vd__top{display:flex;align-items:center;gap:7px;margin-bottom:9px;flex-wrap:wrap}
.vd__e{font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--coral)}
.vd__meta{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:#8A9296}
.vd__sev{margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;font-weight:700;
  color:var(--coral);background:rgba(232,98,74,.11);border-radius:99px;padding:3px 8px}
.vd h3{font-size:19px;margin:0 0 6px}
.vd p{font-size:13.6px;line-height:1.5;color:#454E52;margin:0}
.vd__src{margin-top:11px;padding-top:10px;border-top:1px solid #EFF1F1;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#9AA2A6}

/* ═══════════════════ QUOTE TICKER ═══════════════════ */
.said{background:var(--ink);color:var(--on-ink-soft);border-top:1px solid var(--ink-3);padding:18px 0 22px}
.said__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 26px;
  font-size:14px;text-align:center}
.said__row q{color:var(--on-ink);font-weight:600;font-style:normal}
.said__row q::before,.said__row q::after{content:"\201C"}
.said__row q::after{content:"\201D"}
.said__row span{font-size:12.5px}
.said__stars{flex:0 0 auto}

/* ═══════════════════ SECTION FURNITURE ═══════════════════ */
.sec{padding:clamp(72px,8.5vw,132px) 0}
.sec--paper{background:var(--paper)}
.sec--ink{background:var(--ink);color:var(--on-ink)}
.sec--ink p{color:var(--on-ink-soft)}

.eyebrow{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal);display:flex;align-items:center;gap:10px;margin-bottom:18px;
  background:none;border:0;padding:0;border-radius:0}
.eyebrow::after{content:"";flex:1;height:1px;background:currentColor;opacity:.28;max-width:56px}
.sec--ink .eyebrow{color:var(--teal-lift)}

.sec__head{max-width:22ch}
.sec__head h2{font-size:var(--t-xl);margin:0}
.sec__head--wide{max-width:30ch}

/* ═══════════════════ 01 · THE ARGUMENT ═══════════════════ */
.arg__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,80px);align-items:center}
.arg__lead{font-family:var(--display);font-weight:700;font-size:var(--t-lg);line-height:1.22;
  letter-spacing:-.022em;margin:0 0 22px}
.arg__lead em{font-style:normal;color:var(--teal)}
.arg p{font-size:var(--t-lede);line-height:1.62;color:#454E52;margin:0 0 16px;max-width:44ch}
.arg strong{font-weight:700;color:var(--ink)}
.arg__rule{margin:26px 0 0;padding-top:22px;border-top:1px solid #E7EAEA;font-size:14.5px;color:#6B7478;max-width:44ch}

/* the pack figure, given real scale this time */
.packfig{background:var(--cream);border:1px solid var(--cream-line);border-radius:20px;overflow:hidden}
.packfig__cap{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:#8B8271;padding:22px 26px 0}
.packfig__body{padding:14px 26px 24px;font-family:var(--mono);font-size:15.5px;line-height:1.8;color:#241F17}
.packfig__body mark{background:rgba(224,163,58,.4);border-radius:4px;padding:1px 4px;font-weight:700;color:inherit}
.packfig__foot{background:#fff;border-top:1px solid var(--cream-line);padding:22px 26px 24px;
  font-size:15px;line-height:1.62;color:#454E52}
.packfig__foot b{color:var(--ink)}

/* ═══════════════════ 02 · SCAN → VERDICT (big, dark) ═══════════════════ */
.show{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,78px);align-items:center}
.show--flip .show__copy{order:2}
.show__copy p{font-size:var(--t-lede);line-height:1.62;margin:18px 0 0;max-width:42ch}
.sec--ink .show__copy p{color:var(--on-ink-soft)}
.show__phone{margin-inline:auto;max-width:330px;width:100%;
  filter:drop-shadow(0 40px 70px rgba(0,0,0,.45))}
.sec--paper .show__phone{filter:drop-shadow(0 30px 60px rgba(21,25,27,.18))}
.show__phone img{display:block;width:100%}

/* Facts lifted out of the screenshot so they are readable at any width. */
.facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.fact{display:inline-flex;align-items:baseline;gap:7px;border:1px solid var(--ink-3);border-radius:999px;
  padding:8px 14px;font-size:13px;color:var(--on-ink-soft)}
.fact b{font-family:var(--mono);font-weight:700;color:var(--on-ink);font-size:13.5px}
.fact.is-bad b{color:var(--coral-lift)}
.fact.is-warn b{color:var(--amber-lift)}

/* ═══════════════════ 03 · ADDITIVES (the readable cards) ═══════════════════ */
.adds{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(32px,4.6vw,66px);align-items:center}
.sev{margin:26px 0 0}
.seq .sev__fill{animation-play-state:paused}
.seq.in .sev__fill{animation-play-state:running}
@keyframes sevIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.sev__key{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:#6B7478}
.sev__key i{display:inline-flex;align-items:center;gap:6px;font-style:normal}
.sev__key b{width:7px;height:7px;border-radius:99px;display:inline-block}

.acards{display:grid;gap:10px}
.acard{background:#fff;border:1px solid #E7EAEA;border-radius:14px;padding:14px 16px 14px 18px;
  position:relative;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.acard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--rail,#CBD2D4)}
.acard:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(21,25,27,.09)}
.acard--high{--rail:var(--coral)}
.acard--mod{--rail:var(--amber)}
.acard--low{--rail:#8CC96B}
.acard--none{--rail:#CBD2D4}
.acard__top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.acard__e{font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--rail)}
.acard__meta{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:#9AA2A6}
.acard h3{font-size:16.5px;margin:0}
.acard p{font-size:13.6px;line-height:1.5;color:#5C6569;margin:5px 0 0}
.acard__q{font-size:13px;color:#8A9296;margin-top:4px}

/* ═══════════════════ 04 · PAIR (vitamins + reactions) ═══════════════════ */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,34px)}
.tile{border-radius:24px;padding:clamp(26px,3vw,38px);display:flex;flex-direction:column;
  border:1px solid transparent;min-height:100%;box-shadow:none;transition:none}
.tile:hover{transform:none;box-shadow:none}
.tile--paper{background:#fff;border-color:#E7EAEA}
.tile--teal{background:var(--teal);color:#fff}
.tile.tile--teal p{color:rgba(255,255,255,.9)}
.tile--cream{background:var(--cream);border-color:var(--cream-line)}
.tile h3{font-size:var(--t-lg);margin:0 0 14px}
.tile p{font-size:15.5px;line-height:1.6;color:#5C6569;margin:0 0 12px}
.tile__art{margin-top:auto;padding-top:26px}

/* nutrient bars */
.nut{display:grid;gap:9px}
.nut__row{display:grid;grid-template-columns:88px 1fr 42px;align-items:center;gap:11px;font-size:13px}
.nut__name{color:rgba(255,255,255,.9);font-weight:600}
.nut__track{display:block;height:9px;background:rgba(255,255,255,.24);border-radius:99px;overflow:hidden}
.nut__fill{display:block;height:100%;background:#fff;border-radius:99px;transform-origin:left}
.js-anim .nut__fill{animation:sevIn .9s var(--ease-out) both;animation-delay:calc(var(--i,0)*70ms)}
.js-anim .seq .nut__fill{animation-play-state:paused}
.js-anim .seq.in .nut__fill{animation-play-state:running}
.nut__pct{font-family:var(--mono);font-size:12.5px;text-align:right;color:#fff;font-weight:700}

/* reaction dot grid */
.days2{display:grid;gap:9px}
.d2row{display:grid;grid-template-columns:74px 1fr;align-items:center;gap:12px;font-size:13px;font-weight:600}
.d2dots{display:flex;gap:6px}
.d2d{width:17px;height:17px;border-radius:99px;background:#E3E8E9;flex:0 0 auto}
.d2d.off{background:#F2B8AC}
.d2d.good{background:#A9DED0}
.d2d.has{box-shadow:inset 0 0 0 2.5px var(--ink)}
.d2key{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:#6B7478;margin-top:12px}
.d2key i{display:inline-flex;align-items:center;gap:6px;font-style:normal}
.d2key b{width:11px;height:11px;border-radius:99px;display:inline-block}
.tile__verdict{margin-top:14px;font-size:13.5px;line-height:1.5;color:#5C6569}
.tile__verdict b{color:var(--ink)}

/* ═══════════════════ 05 · STRIP (workouts / fasting / coach) ═══════════════════ */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,28px)}
.scard{background:var(--ink-2);border:1px solid var(--ink-3);border-radius:22px;padding:28px 26px 26px;
  display:flex;flex-direction:column;transition:transform .3s var(--ease),border-color .3s var(--ease)}
.scard:hover{transform:translateY(-4px);border-color:#3C464B}
.scard h3{font-size:21px;margin:0 0 10px;color:var(--on-ink)}
.scard p{font-size:14.5px;line-height:1.58;color:var(--on-ink-soft);margin:0}
.scard__note{font-size:12px;color:#7C868A;margin-top:12px}
.show__cap{font-family:var(--mono);font-size:10px;line-height:1.7;letter-spacing:.1em;text-transform:uppercase;color:#7C868A;text-align:center;margin-top:16px}
.pcard__amt small{font-family:var(--body,inherit);font-size:.34em;font-weight:600;letter-spacing:0;color:#8A9296}
.pcard--pro .pcard__amt small{color:var(--on-ink-soft)}
.scard__n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--teal-lift);margin-bottom:16px}

/* fasting window bar */
.win2{position:relative;margin-top:auto;height:32px;border-radius:8px;overflow:hidden;background:var(--ink-3);margin-top:20px;
  display:flex;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.win2 span{display:flex;align-items:center;justify-content:center;color:var(--on-ink-soft)}
.win2 .eat{background:var(--teal);color:#fff;font-weight:700}
/* markers sit on the real segment boundaries (noon and 8pm), not on thirds */
.win2t{position:relative;height:13px;font-family:var(--mono);font-size:10px;color:#7C868A;margin-top:6px}
.win2t span{position:absolute;top:0;white-space:nowrap}
.win2t .t0{left:0}
.win2t .t1{left:50%;transform:translateX(-50%)}
.win2t .t2{left:83.333%;transform:translateX(-50%)}

/* lift row */
.lift{margin-top:auto;padding-top:20px;display:grid;gap:7px}
.liftrow{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:baseline;
  font-family:var(--mono);font-size:12.5px;color:var(--on-ink-soft);
  border-bottom:1px solid var(--ink-3);padding-bottom:6px}
.liftrow b{color:var(--on-ink)}
.liftrow.is-pr b{color:var(--teal-lift)}

/* coach bubble */
.bub{margin-top:auto;padding-top:20px;display:grid;gap:8px}
.bub p{border-radius:14px;padding:11px 13px;font-size:13.5px;line-height:1.45;margin:0}
.bub .you{background:var(--ink-3);color:var(--on-ink);justify-self:end;border-bottom-right-radius:5px;max-width:86%}
.bub .ns{background:var(--teal);color:#fff;justify-self:start;border-bottom-left-radius:5px;max-width:94%}

/* ═══════════════════ 06 · GRID (everything else) ═══════════════════ */
.grid6{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,20px)}
.gcard{background:#fff;border:1px solid #E7EAEA;border-radius:20px;padding:26px 24px 24px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.gcard:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(21,25,27,.09)}
.gcard h3{font-size:17px;margin:0 0 8px}
.gcard p{font-size:14px;line-height:1.55;color:#5C6569;margin:0}
.gcard__i{width:36px;height:36px;border-radius:11px;background:var(--teal-tint);color:var(--teal);
  display:grid;place-items:center;margin-bottom:16px}
.gcard__i svg{width:19px;height:19px}
.gcard--coral .gcard__i{background:rgba(232,98,74,.1);color:var(--coral)}
.gcard--cream{background:var(--cream);border-color:var(--cream-line)}
.gcard--cream .gcard__i{background:#fff;color:#8B7A55}

/* ═══════════════════ 07 · PRICING ═══════════════════ */
.price{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,28px);align-items:stretch;max-width:none;margin:0}
.pcard{border-radius:24px;padding:clamp(28px,3.2vw,40px);display:flex;flex-direction:column}
.pcard--free{background:#fff;border:1px solid #E7EAEA}
.pcard--pro{background:var(--ink);color:var(--on-ink);position:relative;overflow:hidden}
.pcard--pro::before{content:"";position:absolute;inset:auto -20% -60% -20%;height:80%;
  background:radial-gradient(50% 60% at 50% 100%,rgba(14,156,130,.35),transparent 70%);pointer-events:none}
.pcard__k{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:#8A9296;margin-bottom:14px}
.pcard--pro .pcard__k{color:var(--teal-lift)}
.pcard__amt{font-family:var(--display);font-weight:800;font-size:clamp(2.1rem,1.5rem + 2vw,3rem);
  letter-spacing:-.03em;line-height:1;margin-bottom:6px}
.pcard__sub{font-size:14px;color:#8A9296;margin-bottom:22px}
.pcard--pro .pcard__sub{color:var(--on-ink-soft)}
.plist{display:grid;gap:9px;margin:0 0 26px;list-style:none;font-size:14.6px;line-height:1.45}
.plist li{display:grid;grid-template-columns:18px 1fr;gap:9px;color:#454E52}
.pcard--pro .plist li{color:var(--on-ink-soft)}
.plist svg{width:15px;height:15px;margin-top:3px;color:var(--teal)}
.pcard--pro .plist svg{color:var(--teal-lift)}
.pcard .btn{margin-top:auto;align-self:flex-start}
.pcard--pro .btn--ink{background:var(--on-ink);color:var(--ink)}
.pcard__fine{margin-top:14px;font-size:12.5px;color:#9AA2A6}

/* ═══════════════════ FAQ ═══════════════════ */
.faq-f__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 26px;margin-top:38px}
.qa{border-top:1px solid #E7EAEA;padding:20px 0}
.qa h3{font-size:16.5px;margin:0 0 8px}
.qa p{font-size:14.6px;line-height:1.6;color:#5C6569;margin:0}
.faq-f__more{margin-top:34px;padding-top:24px;border-top:1px solid #E7EAEA;font-size:14.5px;
  line-height:1.6;color:#5C6569}
.faq-f__more a{color:var(--teal);border-bottom:1px solid rgba(14,156,130,.35)}

/* ═══════════════════ FINALE ═══════════════════ */
.fin{background:var(--ink);color:var(--on-ink);padding:clamp(80px,9vw,140px) 0;text-align:center;
  position:relative;overflow:hidden;isolation:isolate}
.fin::before{content:"";position:absolute;inset:auto -10% -55% -10%;height:90%;z-index:-1;
  background:radial-gradient(46% 58% at 50% 100%,rgba(14,156,130,.3),transparent 70%)}
.fin h2{font-size:var(--t-xl);max-width:16ch;margin:0 auto 26px}
.fin__ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.fin .btn--ink{background:var(--on-ink);color:var(--ink)}
.fin .btn--ghost{background:transparent;color:var(--on-ink);border-color:var(--ink-3)}
.fin__note{margin-top:18px;font-size:13.5px;color:var(--on-ink-soft)}

/* ═══════════════════ RESPONSIVE ═══════════════════
   Composed for the phone, not narrowed from the desktop. */
@media (max-width:1080px){
  .adds{grid-template-columns:1fr}
  .faq-f__grid{gap:0 26px}
}
@media (max-width:900px){
  .hero-f__grid{grid-template-columns:1fr;gap:clamp(52px,9vw,70px)}
  .arg__grid,.show,.pair,.price{grid-template-columns:1fr;gap:34px}
  .show--flip .show__copy{order:0}
  .show__phone{max-width:290px}
  .strip,.grid6{grid-template-columns:1fr 1fr}
  .faq-f__grid{grid-template-columns:1fr}
}
@media (max-width:700px){
  .shell{padding:0 20px}
  /* the primary CTA never wraps; shrink the whole set instead */
  .btn{font-size:13.5px;padding:12px 17px;white-space:nowrap}
  .pcard{padding:24px 20px 22px}
  .hero-f{padding:38px 0 clamp(72px,16vw,96px)}
  .hero-f h1{letter-spacing:-.032em}
  /* Keep photo + label + verdict as ONE composition on the phone.
     The 2026-09-06 fault was the phone art breaking out of the frame;
     everything here is positioned against the photo, never the page. */
  .stage{padding-bottom:72px}
  .stage__photo{aspect-ratio:4/4.1;border-radius:18px}
    /* On the phone the label sits at the TOP of the photo and the verdict
     overlaps the bottom, so the two can never collide however long the
     text runs, and it still reads pack-then-verdict down the screen. */
  .lbl{left:8px;right:10%;top:6%;bottom:auto;padding:11px 13px 12px}
  .lbl__body{font-size:11px;line-height:1.55}
  .vd{right:6px;left:auto;bottom:0;width:min(310px,88%);padding:14px 15px 13px}
  .vd h3{font-size:17.5px}
  .vd p{font-size:12.8px}
  .strip,.grid6{grid-template-columns:1fr}
  .said{padding:16px 0 18px}
  .said__row{gap:4px 12px;font-size:13px}
  .said__row q{font-size:13px}
  .nut__row{grid-template-columns:76px 1fr 38px}
}
@media (max-width:420px){
  .lbl{right:14%}
  .lbl__body{font-size:10.4px}
  .vd{width:min(290px,92%)}
}

/* ── Shared section heading + lede classes (replace inline styles) ── */
.sec-h2{font-size:var(--t-xl);margin:0}
.sec-h2--wide{max-width:26ch}
.sec-h2--gap{margin-bottom:38px}
.arg .sec-h2{margin-bottom:24px}
.sec--ink .sec-h2{color:var(--on-ink)}
.lede-p{font-size:var(--t-lede);line-height:1.62;color:#454E52;margin:0;max-width:40ch}
.sev__note{font-size:13.5px;color:#6B7478;margin-top:12px}
.show__cta{margin-top:30px}
.sec--ink .show__cta .btn--ghost{background:transparent;color:var(--on-ink);border-color:var(--ink-3)}
.sec--ink .show__cta .btn--ghost:hover{border-color:var(--on-ink-soft);background:rgba(255,255,255,.04)}