/* ==========================================================================
   BUZZKILL — "AFTER HOURS" design system
   Palette + type derived from the 2026 can: blackout band, voltage yellow
   gradient, emergency orange / bounce berry spray, sliced logotype.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --blackout:#0A0A0B;
  --asphalt:#141416;
  --steel:#1E1F22;
  --bone:#F6F4EE;
  --paper:#FFFFFF;
  --voltage:#F2E500;
  --orange:#F5821F;
  --berry:#2AA9E0;
  --smoke:rgba(246,244,238,.62);
  --smoke-dim:rgba(246,244,238,.38);
  --hair:rgba(246,244,238,.14);
  --hair-dark:rgba(10,10,11,.14);

  --display:"Anton",Impact,"Haettenschweiler","Arial Narrow Bold",sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --util:"Barlow Condensed","Barlow",system-ui,sans-serif;

  --slant:-7deg;
  --shell:1280px;
  --gutter:clamp(20px,5vw,64px);
  --band:clamp(64px,9vw,132px);   /* vertical section rhythm */
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--blackout);color:var(--bone);
  font-family:var(--body);font-size:clamp(16px,1.05vw,17.5px);line-height:1.6;
  font-weight:500;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--voltage);outline-offset:3px;border-radius:2px}

/* ---------- brand type ---------- */
.d1,.d2,.d3,.d4{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  line-height:.84;letter-spacing:.005em;margin:0;
  transform:skewY(var(--slant)) skewX(-2deg);transform-origin:left center;
}
.d1{font-size:clamp(2.9rem,12.4vw,10.5rem)}
.d2{font-size:clamp(2.6rem,7.6vw,6rem)}
.d3{font-size:clamp(2rem,4.4vw,3.6rem)}
.d4{font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:.92}

/* the slice — the logotype's cut letterforms, rebuilt in CSS */
.slice{position:relative;display:inline-block;color:transparent}
.slice::before,.slice::after{
  content:attr(data-text);position:absolute;left:0;top:0;width:100%;
  color:var(--slice-ink,var(--bone));white-space:nowrap;
}
.slice::before{clip-path:inset(0 -20% 47% -10%)}
.slice::after{clip-path:inset(53% -20% -20% -10%);transform:translateX(-.055em)}
.slice.wrap::before,.slice.wrap::after{white-space:normal}

/* clean lockup — the can's tagline treatment: oblique, no cuts, FASTER underlined */
.lockup{transform:skewX(-9deg);transform-origin:left bottom;line-height:.88;letter-spacing:.008em}
.lockup em{font-style:normal;color:var(--voltage);position:relative;display:inline-block;padding-bottom:.06em}
.lockup em::after{content:"";position:absolute;left:.02em;right:.02em;bottom:0;height:.055em;background:currentColor}

.eyebrow{
  font-family:var(--util);text-transform:uppercase;font-weight:700;
  font-size:clamp(.72rem,1.05vw,.85rem);letter-spacing:.26em;
  color:var(--voltage);margin:0 0 1.1rem;display:block;
}
.eyebrow.dark{color:var(--blackout);opacity:.55}
.lede{font-size:clamp(1.06rem,1.5vw,1.32rem);line-height:1.55;color:var(--smoke);max-width:56ch}
.lede.dark{color:rgba(10,10,11,.72)}
.fine{font-family:var(--util);font-size:.82rem;letter-spacing:.06em;color:var(--smoke-dim);line-height:1.5}
.sup{font-size:.62em;vertical-align:super;opacity:.65;font-family:var(--body)}

/* ---------- layout ---------- */
.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.shell-wide{max-width:1560px;margin-inline:auto;padding-inline:var(--gutter)}
section{position:relative}
.pad{padding-block:var(--band)}
.pad-t{padding-top:var(--band)}
.pad-b{padding-bottom:var(--band)}
.light{background:var(--bone);color:var(--blackout)}
.light .lede{color:rgba(10,10,11,.7)}
.light .fine{color:rgba(10,10,11,.5)}
.dark-panel{background:var(--asphalt)}

/* plus-grid texture lifted from the can */
.plusgrid::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M13 8v10M8 13h10' stroke='%23F2E500' stroke-width='1.4'/%3E%3C/svg%3E");
}
.plusgrid.ink::before{
  opacity:.09;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M13 8v10M8 13h10' stroke='%230A0A0B' stroke-width='1.4'/%3E%3C/svg%3E");
}
.plusgrid > *{position:relative;z-index:1}

/* ---------- spray blob (SVG turbulence edge) ---------- */
.spray{
  display:inline-block;padding:.34em .9em .42em;border-radius:44% 56% 52% 48%/58% 44% 56% 42%;
  filter:url(#sprayEdge);background:var(--orange);color:var(--paper);
  font-family:var(--util);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
}
.spray.berry{background:var(--berry)}
.spray.volt{background:var(--voltage);color:var(--blackout)}
.blot{position:absolute;filter:url(#sprayEdge);border-radius:46% 54% 60% 40%/52% 48% 52% 48%;pointer-events:none;z-index:0}

/* ---------- buttons ---------- */
.btn{
  --btn-bg:var(--voltage);--btn-ink:var(--blackout);
  display:inline-flex;align-items:center;gap:.6em;
  background:var(--btn-bg);color:var(--btn-ink);
  font-family:var(--util);font-weight:700;text-transform:uppercase;
  letter-spacing:.13em;font-size:clamp(.86rem,1.05vw,.96rem);
  padding:1.02em 1.7em .92em;border:0;cursor:pointer;
  clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%);
  transition:transform .25s var(--ease),filter .25s var(--ease);
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn:active{transform:translateY(0)}
.btn.ghost{--btn-bg:transparent;--btn-ink:var(--bone);box-shadow:inset 0 0 0 1.5px var(--hair)}
.btn.ghost:hover{--btn-bg:rgba(246,244,238,.06)}
.light .btn.ghost{--btn-ink:var(--blackout);box-shadow:inset 0 0 0 1.5px rgba(10,10,11,.22)}
.btn.orange{--btn-bg:var(--orange);--btn-ink:var(--paper)}
.btn.ink{--btn-bg:var(--blackout);--btn-ink:var(--bone)}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:80;background:rgba(10,10,11,.72);backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid var(--hair)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:70px}
.nav-logo img{height:39px;width:auto;filter:invert(1)}
.nav-links{display:flex;gap:clamp(1rem,2.4vw,2.1rem);align-items:center}
.nav-links a{
  font-family:var(--util);text-transform:uppercase;font-weight:600;
  letter-spacing:.14em;font-size:.86rem;color:var(--smoke);
  padding:.4rem 0;position:relative;transition:color .2s
}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--voltage);transition:right .3s var(--ease)}
.nav-links a:hover{color:var(--bone)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{right:0}
.nav-links a[aria-current="page"]{color:var(--bone)}
.nav-cta{display:flex;align-items:center;gap:.75rem}
.nav-cta .btn{padding:.72em 1.15em .64em;font-size:.8rem}
.burger{display:none;background:none;border:0;padding:.55rem;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--bone);margin:5px 0;transition:transform .3s var(--ease),opacity .2s}
.nav.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .burger span:nth-child(2){opacity:0}
.nav.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:900px){
  .burger{display:block}
  .nav-links{
    position:fixed;inset:70px 0 auto;flex-direction:column;align-items:flex-start;
    gap:0;background:var(--blackout);padding:1rem var(--gutter) 2rem;
    border-bottom:1px solid var(--hair);
    transform:translateY(-120%);transition:transform .38s var(--ease);
  }
  .nav.open .nav-links{transform:translateY(0)}
  .nav-links a{font-size:1.4rem;padding:.75rem 0;width:100%;border-bottom:1px solid var(--hair)}
  /* keep a persistent buy CTA on phones — hiding it costs conversions */
  .nav-cta .btn{padding:.62em .85em .54em;font-size:.72rem;letter-spacing:.1em}
  .nav-logo img{height:33px}
}

/* ---------- marquee band (the can's top band) ---------- */
.band{background:var(--voltage);border-block:1px solid rgba(10,10,11,.18);overflow:hidden;padding:.8rem 0}
.band-track{display:flex;width:max-content;animation:slide var(--marquee-dur,20s) linear infinite;will-change:transform}
.band-track span{
  font-family:var(--util);font-weight:700;text-transform:uppercase;
  letter-spacing:.2em;font-size:clamp(.78rem,1.1vw,.95rem);
  color:var(--blackout);padding-inline:1.15rem;white-space:nowrap;font-style:italic;
}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- hero ---------- */
.hero{position:relative;min-height:clamp(620px,92svh,940px);display:flex;align-items:center;overflow:hidden;padding-block:clamp(3rem,7vw,5rem)}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 85% at 78% 42%,rgba(242,229,0,.20),transparent 58%),
             radial-gradient(70% 60% at 15% 105%,rgba(245,130,31,.20),transparent 62%);
}
.hero-in{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;width:100%}
.hero-copy{max-width:36ch}
.hero h1{margin:0 0 1.4rem}
.hero .lede{margin:0 0 2rem}
.hero-can{position:relative;justify-self:center}
.hero-can img{
  width:clamp(200px,26vw,330px);
  filter:drop-shadow(0 42px 60px rgba(0,0,0,.65)) drop-shadow(0 0 90px rgba(242,229,0,.18));
  animation:float 7s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-16px) rotate(1deg)}}
.hero-can .blot{width:min(60vw,420px);aspect-ratio:1;background:var(--berry);opacity:.22;left:50%;top:46%;transform:translate(-50%,-50%)}

.statstrip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hair)}
.statstrip div{padding:1.5rem clamp(.8rem,2vw,1.6rem);border-right:1px solid var(--hair)}
.statstrip div:last-child{border-right:0}
.statstrip b{display:block;font-family:var(--display);font-size:clamp(1.5rem,3vw,2.4rem);line-height:1;transform:skewY(-4deg);color:var(--voltage);margin-bottom:.5rem}
.statstrip small{font-family:var(--util);text-transform:uppercase;letter-spacing:.16em;font-size:.74rem;color:var(--smoke-dim)}

@media(max-width:880px){
  .hero-in{grid-template-columns:1fr;text-align:left}
  .hero-can{order:-1;margin-bottom:.5rem}
  .hero-can img{width:min(46vw,230px)}
  .statstrip{grid-template-columns:repeat(2,1fr)}
  .statstrip div:nth-child(2n){border-right:0}
  .statstrip div:nth-child(-n+2){border-bottom:1px solid var(--hair)}
}

/* ---------- clock rail ---------- */
.rail{
  position:fixed;left:clamp(12px,2vw,26px);top:50%;transform:translateY(-50%);
  z-index:60;display:flex;flex-direction:column;gap:.85rem;pointer-events:none;
  opacity:0;transition:opacity .4s;
}
.rail.on{opacity:1}
.rail i{
  font-style:normal;font-family:var(--util);font-weight:700;letter-spacing:.14em;
  font-size:.68rem;text-transform:uppercase;color:var(--smoke-dim);
  writing-mode:vertical-rl;transition:color .3s,transform .3s var(--ease);
  display:flex;align-items:center;gap:.5rem;
}
.rail i::before{content:"";width:1px;height:26px;background:currentColor;opacity:.5}
.rail i.now{color:var(--voltage);transform:scale(1.06)}
@media(max-width:1180px){.rail{display:none}}

/* ---------- acts (timestamped sequence) ---------- */
.act{padding-block:clamp(3rem,6vw,5.5rem);position:relative}

/* ---- the timeline spine: one continuous rail through the whole sequence ---- */
:root{--rail-x:max(var(--gutter), calc(50% - (var(--shell) / 2) + 2px))}
.railed{position:relative}
.railed::before{
  content:"";position:absolute;top:0;bottom:0;left:var(--rail-x);
  width:2px;background:currentColor;opacity:.2;pointer-events:none;
}
/* junction arrow — straddles the seam between one act and the next */
.act.railed::after{
  content:"";position:absolute;bottom:-9px;left:var(--rail-x);
  width:13px;height:13px;border-right:2.5px solid var(--voltage);border-bottom:2.5px solid var(--voltage);
  transform:translateX(-5.5px) rotate(45deg);z-index:3;pointer-events:none;
}
.act.railed:last-of-type::after,.act--dawn.railed::after{display:none}
/* start marker */
.seq-head::after{
  content:"";position:absolute;top:0;left:var(--rail-x);
  width:10px;height:10px;background:var(--voltage);border-radius:50%;
  transform:translateX(-4px);
}
/* end cap — hard-stops the timeline so dawn can't bleed into the next section */
.seq-end{height:12px;background:var(--blackout);position:relative;z-index:2}
.seq-end::before{
  content:"";position:absolute;top:50%;left:var(--rail-x);
  width:12px;height:12px;background:var(--voltage);border-radius:50%;
  transform:translate(-5px,-50%);box-shadow:0 0 0 4px var(--blackout);
}
@media(max-width:860px){
  .railed::before,.act.railed::after,.seq-head::after,.seq-end::before{display:none}
  .seq-end{height:8px}
}
.act--night{background:var(--blackout);border-top:1px solid var(--hair)}
.act--mid{background:#191A1D;border-top:1px solid var(--hair)}
.act--dawn{background:var(--bone);color:var(--blackout)}
.act.act--dawn .act-time{color:var(--orange)}
.act.act--dawn .act-time small{color:rgba(10,10,11,.5)}
.act.act--dawn h3{color:var(--blackout)}
.act.act--dawn p{color:rgba(10,10,11,.74)}
.act.act--dawn .act-note{color:rgba(10,10,11,.58);border-left-color:var(--orange)}
.act-in{display:grid;grid-template-columns:170px 1fr minmax(0,.85fr);gap:clamp(1.4rem,4vw,3.4rem);align-items:start}
.act-time{font-family:var(--display);font-size:clamp(1.6rem,2.5vw,2.2rem);line-height:1;transform:skewY(-6deg);color:var(--voltage)}
.act-time small{display:block;font-family:var(--util);font-size:.72rem;letter-spacing:.2em;color:var(--smoke-dim);margin-top:.85rem;transform:skewY(6deg)}
.act h3{margin:0 0 .9rem}
.act p{margin:0 0 1rem;color:var(--smoke);max-width:46ch}
.act-note{font-family:var(--util);text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;color:var(--smoke-dim);border-left:2px solid var(--orange);padding-left:1rem}
@media(max-width:860px){.act-in{grid-template-columns:1fr}.act-time small{transform:none}}

/* ---------- section head ---------- */
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:clamp(2.2rem,4vw,3.4rem);flex-wrap:wrap}
.head h2{margin:0}
.head .lede{margin:0}

/* ---------- cards ---------- */
.grid{display:grid;gap:clamp(1rem,1.6vw,1.4rem)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{
  background:var(--asphalt);border:1px solid var(--hair);padding:clamp(1.4rem,2.2vw,2rem);
  position:relative;overflow:hidden;transition:border-color .3s,transform .3s var(--ease);
}
.card:hover{border-color:rgba(242,229,0,.42);transform:translateY(-4px)}
.card h4{font-family:var(--util);text-transform:uppercase;letter-spacing:.09em;font-size:1.16rem;font-weight:700;margin:0 0 .55rem}
.card p{margin:0;color:var(--smoke);font-size:.96rem}
.card .tag{font-family:var(--util);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);display:block;margin-bottom:1.1rem}
.light .card{background:var(--paper);border-color:var(--hair-dark)}
.light .card p{color:rgba(10,10,11,.68)}
.light .card:hover{border-color:rgba(10,10,11,.4)}

/* ---------- flavors ---------- */
.flavors{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.6rem)}
.flavor{
  position:relative;overflow:hidden;padding:clamp(2rem,4vw,3.4rem) clamp(1.4rem,3vw,2.6rem) clamp(2rem,3vw,2.6rem);
  text-align:center;border:1px solid var(--hair-dark);background:var(--paper);color:var(--blackout);
}
.flavor .blot{width:86%;aspect-ratio:1;left:7%;top:6%;opacity:.28}
.flavor.o .blot{background:var(--orange)}
.flavor.b .blot{background:var(--berry)}
.flavor img{position:relative;z-index:1;height:clamp(240px,28vw,340px);width:auto;margin:0 auto 2.1rem;filter:drop-shadow(0 12px 16px rgba(0,0,0,.2))}
.flavor h3{position:relative;z-index:1;margin:0 0 .5rem}
.flavor p{position:relative;z-index:1;color:rgba(10,10,11,.66);margin:0 0 1.5rem;font-size:.98rem}
.flavor .btn{position:relative;z-index:1}
@media(max-width:720px){.flavors{grid-template-columns:1fr}}

/* ---------- supplement facts panel ---------- */
.facts{background:var(--paper);color:#000;border:2px solid #000;padding:14px 16px 16px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;max-width:420px}
.facts h3{font-family:Helvetica,Arial,sans-serif;font-weight:800;font-size:1.9rem;margin:0;line-height:1;letter-spacing:-.02em}
.facts .meta{font-size:.78rem;margin:.3rem 0 0}
.facts hr{border:0;border-top:9px solid #000;margin:.45rem 0}
.facts hr.thin{border-top:1px solid #000;margin:0}
.facts hr.mid{border-top:5px solid #000;margin:.2rem 0}
.facts table{width:100%;border-collapse:collapse;font-size:.82rem}
.facts td{padding:2.5px 0;vertical-align:top}
.facts td.dv{text-align:right;font-weight:700;white-space:nowrap}
.facts tr.rule td{border-top:1px solid #000}
.facts .ind{padding-left:14px}
.facts .ind2{padding-left:26px}
.facts b{font-weight:700}
.facts .fnote{font-size:.68rem;line-height:1.35;margin:.5rem 0 0;color:#000;background:none}
.facts .blend{font-size:.78rem;line-height:1.4;margin:.35rem 0 0}

/* ---------- ingredient rows ---------- */
.rowlist{border-top:1px solid var(--hair)}
.light .rowlist{border-color:var(--hair-dark)}
.row{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr) 128px;
  gap:clamp(1rem,3vw,2.4rem);padding:clamp(1.4rem,2.6vw,2rem) 0;
  border-bottom:1px solid var(--hair);align-items:baseline;
}
.light .row{border-color:var(--hair-dark)}
.row h4{margin:0;font-family:var(--util);text-transform:uppercase;letter-spacing:.06em;font-size:clamp(1.2rem,1.9vw,1.6rem);font-weight:700}
.row .latin{display:block;font-family:var(--body);font-style:italic;font-weight:400;font-size:.86rem;letter-spacing:0;text-transform:none;color:var(--smoke-dim);margin-top:.35rem}
.light .row .latin{color:rgba(10,10,11,.5)}
.row p{margin:0;color:var(--smoke)}
.light .row p{color:rgba(10,10,11,.7)}
.row .amt{font-family:var(--util);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.82rem;color:var(--orange);text-align:right}
@media(max-width:800px){.row{grid-template-columns:1fr;gap:.7rem}.row .amt{text-align:left}}

/* ---------- ingredient cards (What's Inside → The Botanicals) ---------- */
.ing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,1.8vw,1.5rem)}
@media(max-width:980px){.ing-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.ing-grid{grid-template-columns:1fr}}
.ing-card{
  --job-color:var(--voltage);
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--asphalt);border-radius:10px;
  border-left:4px solid var(--job-color);
  padding:clamp(1.5rem,2vw,1.9rem) clamp(1.3rem,1.8vw,1.6rem) clamp(1.3rem,1.6vw,1.5rem);
  display:flex;flex-direction:column;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 12px 26px -18px rgba(0,0,0,.65);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-color .3s var(--ease);
}
.ing-card:hover{transform:translateY(-5px);background:var(--steel);box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 20px 34px -18px rgba(0,0,0,.75)}
.ing-card[data-job="liver"]{--job-color:#F5821F}
.ing-card[data-job="anti"]{--job-color:#2AA9E0}
.ing-card[data-job="fuel"]{--job-color:#C8BC00}
.ing-card[data-job="calm"]{--job-color:#9A9A90}
.ing-num{
  position:absolute;top:-.22em;right:.15em;z-index:-1;pointer-events:none;
  font-family:var(--display);font-size:5.2rem;line-height:1;color:var(--bone);opacity:.055;
}
.job-pill{
  align-self:flex-start;display:inline-flex;align-items:center;
  font-family:var(--util);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:.64rem;padding:.32em .75em;border-radius:999px;
  background:var(--job-color);color:var(--blackout);margin-bottom:.9rem;
}
.ing-card h4{margin:0 0 .5rem;font-family:var(--util);text-transform:uppercase;letter-spacing:.05em;font-size:clamp(1.05rem,1.4vw,1.22rem);font-weight:700;line-height:1.15}
.ing-card .latin{display:block;font-family:var(--body);font-style:italic;font-weight:400;font-size:.78rem;letter-spacing:0;text-transform:none;color:var(--smoke-dim);margin-top:.3rem}
.ing-card p{margin:0 0 1rem;color:var(--smoke);font-size:.92rem;line-height:1.5;flex:1}
.ing-card .amt{
  align-self:flex-start;font-family:var(--util);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;font-size:.7rem;color:rgba(246,244,238,.62);
  border-top:1px solid var(--hair);padding-top:.7rem;width:100%;
}

/* ---------- lever cards (four jobs) — alternating blocks on a light ground ---------- */
.levers{display:grid;gap:clamp(.9rem,1.4vw,1.2rem)}
.lever{
  position:relative;display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr) 140px;
  gap:clamp(1rem,3vw,2.4rem);align-items:start;
  padding:clamp(1.5rem,2.8vw,2.2rem) clamp(1.4rem,2.6vw,2.2rem);
  border-left:6px solid var(--job,var(--voltage));
  transition:transform .3s var(--ease);
}
.lever:hover{transform:translateX(5px)}
.lever h4{margin:0;font-family:var(--util);text-transform:uppercase;letter-spacing:.06em;
  font-size:clamp(1.2rem,1.9vw,1.6rem);font-weight:700;line-height:1.05}
.lever .latin{display:block;font-family:var(--body);font-style:italic;font-weight:400;
  font-size:.86rem;letter-spacing:0;text-transform:none;margin-top:.45rem}
.lever p{margin:0}
.lever .amt{font-family:var(--util);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  font-size:.82rem;text-align:right;color:var(--job,var(--voltage))}
.lever.ink{background:var(--blackout);color:var(--bone)}
.lever.ink p{color:var(--smoke)}
.lever.ink .latin{color:var(--smoke-dim)}
.lever.pale{background:var(--paper);color:var(--blackout);box-shadow:inset 0 0 0 1px var(--hair-dark)}
.lever.pale p{color:rgba(10,10,11,.72)}
.lever.pale .latin{color:rgba(10,10,11,.5)}
.lever.pale .amt{color:var(--job-dark,var(--blackout))}
@media(max-width:800px){
  .lever{grid-template-columns:1fr;gap:.7rem}
  .lever .amt{text-align:left}
}

/* ---------- "when to drink it" — three stations ---------- */
.when{position:relative;margin-top:clamp(2.2rem,4.5vw,3.4rem)}
.when-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3.5vw,3rem)}

.moment{
  display:grid;grid-template-rows:auto auto 1fr;
  transition:transform .35s var(--ease);
}
.moment .num{
  font-family:var(--display);font-size:clamp(3.4rem,6.6vw,5.8rem);line-height:.9;
  transform:skewY(-6deg) skewX(-3deg);transform-origin:left bottom;
  color:transparent;-webkit-text-stroke:2px rgba(246,244,238,.26);
  transition:-webkit-text-stroke-color .35s var(--ease),color .35s var(--ease);
  margin:0 0 1.25rem;justify-self:start;
}
/* each station carries its own rule + node — no cross-gap alignment to drift */
.moment .station{
  position:relative;height:0;border-top:2px solid var(--hair);
  margin-bottom:1.5rem;transition:border-color .35s var(--ease);
}
.moment .station::before{
  content:"";position:absolute;left:0;top:-7px;width:12px;height:12px;border-radius:50%;
  background:var(--asphalt);box-shadow:0 0 0 2px var(--hair);
  transition:background .35s var(--ease),box-shadow .35s var(--ease);
}
.moment .tag{
  display:inline-block;justify-self:start;font-family:var(--util);text-transform:uppercase;
  letter-spacing:.22em;font-size:.72rem;font-weight:700;
  color:var(--blackout);background:var(--voltage);padding:.32rem .72rem;margin-bottom:.95rem;
}
.moment h4{
  font-family:var(--util);text-transform:uppercase;letter-spacing:.05em;
  font-size:clamp(1.22rem,1.9vw,1.6rem);font-weight:700;margin:0 0 .7rem;line-height:1.06;
}
.moment p{margin:0;color:var(--smoke);font-size:.98rem;max-width:34ch}
.moment .note{
  display:block;margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--hair);
  font-family:var(--util);text-transform:uppercase;letter-spacing:.14em;
  font-size:.72rem;color:var(--smoke-dim);
}

.moment:hover{transform:translateY(-5px)}
.moment:hover .num{-webkit-text-stroke-color:var(--voltage);color:rgba(242,229,0,.08)}
.moment:hover .station{border-top-color:var(--voltage)}
.moment:hover .station::before{background:var(--voltage);box-shadow:0 0 0 2px var(--voltage),0 0 16px rgba(242,229,0,.45)}

@media(max-width:820px){
  .when-grid{grid-template-columns:1fr;gap:0}
  .moment{grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;
    gap:0 1.3rem;padding:1.7rem 0;border-top:1px solid var(--hair);align-items:start}
  .moment:hover{transform:none}
  .moment .num{grid-column:1;grid-row:1/span 3;font-size:3rem;margin:0;align-self:center}
  .moment .station{display:none}
  .moment .tag{grid-column:2;grid-row:1}
  .moment .body{grid-column:2;grid-row:2}
}

/* ---------- "what it is not" — hard denial cards on the yellow field ---------- */
.nots{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,1.8vw,1.5rem);
  margin-top:clamp(2rem,4vw,3rem)}
.not{
  position:relative;background:var(--blackout);color:var(--bone);
  padding:clamp(1.6rem,2.8vw,2.3rem) clamp(1.5rem,2.6vw,2.1rem);
  display:grid;grid-template-columns:auto 1fr;gap:0 clamp(1.1rem,2vw,1.5rem);
  align-items:start;transition:transform .3s var(--ease);
}
.not:hover{transform:translateY(-4px)}
.not .x{
  grid-row:1/span 2;width:clamp(34px,3.4vw,44px);height:clamp(34px,3.4vw,44px);
  flex:none;position:relative;margin-top:.15em;
}
.not .x::before,.not .x::after{
  content:"";position:absolute;left:50%;top:0;width:4px;height:100%;
  background:var(--voltage);border-radius:1px;
}
.not .x::before{transform:translateX(-50%) rotate(45deg)}
.not .x::after{transform:translateX(-50%) rotate(-45deg)}
.not h4{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.5rem,2.7vw,2.2rem);line-height:.94;letter-spacing:.01em;
  transform:skewX(-6deg);transform-origin:left bottom;margin:0 0 .6rem;
  color:var(--bone);
}
.not p{margin:0;color:var(--smoke);font-size:clamp(.95rem,1.15vw,1.05rem);line-height:1.5}
@media(max-width:760px){
  .nots{grid-template-columns:1fr}
  .not .x{width:30px;height:30px}
}

/* ---------- quote / reviews ---------- */
.txt-link{
  font-family:var(--util);font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:.82rem;color:inherit;
  text-decoration:none;border-bottom:2px solid var(--voltage);
  padding-bottom:.15em;transition:color .25s var(--ease),border-color .25s var(--ease);
  white-space:nowrap;
}
.txt-link:hover{color:var(--orange);border-color:var(--orange)}

.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.3rem,2vw,1.9rem)}
@media(max-width:900px){.quotes{grid-template-columns:1fr}}
@media(min-width:901px){.quotes .quote:nth-child(3n+2){margin-top:-1.1rem}}

.quote{
  --qgrad:linear-gradient(135deg,var(--voltage) 0%,var(--orange) 52%,var(--berry) 100%);
  position:relative;overflow:hidden;isolation:isolate;
  color:var(--blackout);border-radius:8px;border:2px solid transparent;
  background:linear-gradient(var(--bone),var(--bone)) padding-box,var(--qgrad) border-box;
  padding:clamp(1.9rem,2.8vw,2.4rem) clamp(1.6rem,2.4vw,2.1rem) clamp(1.6rem,2.2vw,2rem);
  display:flex;flex-direction:column;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 3px 8px -2px rgba(10,10,11,.16),
    0 16px 28px -18px rgba(10,10,11,.35);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),filter .4s var(--ease);
  transform:perspective(900px) rotateX(0) rotateY(0);
  will-change:transform;
}
.quote::before{
  content:'\201D';position:absolute;top:-.28em;right:.06em;z-index:-1;
  font-family:var(--display);font-size:7.4rem;line-height:1;
  color:var(--blackout);opacity:.055;pointer-events:none;
}
.quote:hover{
  transform:perspective(900px) rotateX(3deg) rotateY(-3deg) translateY(-9px) scale(1.015);
  filter:saturate(1.15);
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 10px 18px -6px rgba(10,10,11,.28),
    0 32px 46px -22px rgba(10,10,11,.45);
}
.quotes .quote:nth-child(3n+3):hover{transform:perspective(900px) rotateX(3deg) rotateY(3deg) translateY(-9px) scale(1.015)}
.quote .stars{display:block;margin:0 0 .9rem;color:var(--orange);font-size:1rem;letter-spacing:.1em}
.quote p{margin:0 0 1.5rem;font-size:clamp(1.1rem,1.5vw,1.26rem);line-height:1.42;font-weight:700;flex:1}
.quote cite{display:flex;align-items:center;gap:.55rem;font-family:var(--util);font-style:normal;text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;color:rgba(10,10,11,.55)}
.quote .check{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:1.25em;height:1.25em;border-radius:50%;
  background:var(--voltage);color:var(--blackout);font-size:.62rem;font-weight:900;
}

.quote-dark{
  color:var(--bone);
  background:linear-gradient(var(--asphalt),var(--asphalt)) padding-box,var(--qgrad) border-box;
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 3px 8px -2px rgba(0,0,0,.5),
    0 16px 28px -18px rgba(0,0,0,.6);
}
.quote-dark:hover{
  box-shadow:
    0 1px 0 rgba(255,255,255,.1) inset,
    0 10px 18px -6px rgba(0,0,0,.6),
    0 32px 46px -22px rgba(0,0,0,.75);
}
.quote-dark::before{color:var(--bone);opacity:.05}
.quote-dark .stars{color:var(--voltage)}
.quote-dark cite{color:rgba(246,244,238,.58)}

@media(prefers-reduced-motion:reduce){
  .quote,.quote:hover{transform:none!important;transition:none!important}
}

/* ---------- guarantee ---------- */
.guarantee{background:var(--voltage);color:var(--blackout);position:relative;overflow:hidden}
.guarantee .btn.ghost{--btn-ink:var(--blackout);box-shadow:inset 0 0 0 1.5px rgba(10,10,11,.4)}
.guarantee .btn.ghost:hover{--btn-bg:rgba(10,10,11,.08)}
.guarantee .g-in{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.guarantee h2{margin:0 0 1.1rem}
.guarantee p{color:rgba(10,10,11,.74);max-width:48ch;margin:0 0 1.6rem}
.gsteps{display:grid;gap:.8rem;counter-reset:g}
.gstep{display:flex;gap:1rem;align-items:flex-start;border-top:1px solid rgba(10,10,11,.2);padding-top:.9rem}
.gstep b{font-family:var(--display);font-size:1.5rem;line-height:1;transform:skewY(-6deg);display:block}
.gstep span{font-family:var(--util);text-transform:uppercase;letter-spacing:.09em;font-size:.92rem;font-weight:600;line-height:1.35}
@media(max-width:800px){.guarantee .g-in{grid-template-columns:1fr}}
.gsteps-2{grid-template-columns:repeat(2,1fr);gap:1rem 2.5rem}
@media(max-width:700px){.gsteps-2{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--hair)}
.light .faq{border-color:var(--hair-dark)}
.faq details{border-bottom:1px solid var(--hair);padding:1.35rem 0}
.light .faq details{border-color:var(--hair-dark)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1.5rem;align-items:baseline;
  font-family:var(--util);text-transform:uppercase;letter-spacing:.05em;font-weight:700;
  font-size:clamp(1.02rem,1.5vw,1.24rem);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--display);font-size:1.5rem;color:var(--voltage);line-height:1;transition:transform .3s var(--ease)}
.light .faq summary::after{color:var(--orange)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:1rem 0 0;color:var(--smoke);max-width:70ch}
.light .faq details p{color:rgba(10,10,11,.7)}

/* ---------- forms ---------- */
.form{display:grid;gap:.9rem;max-width:520px}
.field{display:grid;gap:.4rem}
.field label{font-family:var(--util);text-transform:uppercase;letter-spacing:.16em;font-size:.74rem;color:var(--smoke-dim)}
.light .field label{color:rgba(10,10,11,.55)}
.field input,.field textarea,.field select{
  background:rgba(246,244,238,.05);border:1px solid var(--hair);color:var(--bone);
  padding:.85rem 1rem;font:inherit;font-size:.98rem;border-radius:0;width:100%;
}
.light .field input,.light .field textarea,.light .field select{background:var(--paper);border-color:var(--hair-dark);color:var(--blackout)}
.field textarea{min-height:130px;resize:vertical}
.inline-form{display:flex;gap:.6rem;flex-wrap:wrap;max-width:560px}
.inline-form input{flex:1 1 240px}

/* ---------- signup ---------- */
.signup{background:var(--asphalt);border:1px solid var(--hair);padding:clamp(1.8rem,4vw,3.2rem)}

/* ---------- story timeline ---------- */
.chapters{counter-reset:ch;display:flex;flex-direction:column;gap:clamp(1rem,2.2vw,1.5rem)}
.chapter{
  display:grid;grid-template-columns:110px 1fr;gap:clamp(1.2rem,3vw,2.6rem);
  padding:clamp(1.9rem,3.6vw,2.9rem) clamp(1.6rem,3.4vw,2.6rem);
  border-radius:18px;border:1px solid var(--hair);position:relative;overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
  will-change:transform;
}
.chapter.rv:hover{transform:translateY(-7px) scale(1.008);box-shadow:0 26px 50px -26px rgba(0,0,0,.6);border-color:rgba(246,244,238,.28)}
.chapter:nth-child(odd){background:linear-gradient(152deg,var(--asphalt) 0%,var(--steel) 100%)}
.chapter:nth-child(even){background:linear-gradient(152deg,#ffffff 0%,var(--bone) 100%);color:var(--blackout);border-color:var(--hair-dark)}
.chapter:nth-child(even):hover{border-color:rgba(10,10,11,.3)}
.chapter:nth-child(even) p{color:rgba(10,10,11,.72)}
.chapter .n{font-family:var(--display);font-size:clamp(2rem,4vw,3rem);line-height:1;transform:skewY(-6deg);counter-increment:ch}
.chapter .n::before{content:counter(ch,decimal-leading-zero)}
.chapter:nth-child(4n+1) .n{color:var(--orange)}
.chapter:nth-child(4n+2) .n{color:var(--berry)}
.chapter:nth-child(4n+3) .n{color:var(--voltage)}
.chapter:nth-child(4n) .n{color:var(--orange)}
.chapter h3{margin:0 0 .85rem;transform:none}
.chapter p{margin:0 0 .9rem;max-width:62ch}
@media(max-width:720px){.chapter{grid-template-columns:1fr;gap:.6rem}}
@media(prefers-reduced-motion:reduce){.chapter{transition:none}.chapter:hover{transform:none}}

/* ---------- split feature ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,4rem);align-items:center}
.split.rev > *:first-child{order:2}
@media(max-width:880px){.split{grid-template-columns:1fr}.split.rev > *:first-child{order:0}}
.split-media{position:relative;display:flex;justify-content:center}
.split-media img{
  position:relative;z-index:1;
  filter:drop-shadow(0 34px 48px rgba(0,0,0,.55)) drop-shadow(0 0 70px rgba(242,229,0,.14));
  animation:float 7.5s ease-in-out infinite;
}
.split-media .blot{width:80%;aspect-ratio:1;left:10%;top:10%;background:var(--voltage);opacity:.18}

/* ---------- pack cards ---------- */
.pack{background:var(--asphalt);border:1px solid var(--hair);padding:clamp(1.6rem,2.6vw,2.2rem);display:flex;flex-direction:column;gap:1rem}
.pack.featured{border-color:var(--voltage);box-shadow:0 0 0 1px var(--voltage) inset}
.pack .ribbon{font-family:var(--util);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--blackout);background:var(--voltage);padding:.3rem .7rem;align-self:flex-start}
.pack h3{margin:0}
.pack .price{font-family:var(--display);font-size:clamp(2rem,3.4vw,2.8rem);line-height:1;transform:skewY(-5deg);color:var(--voltage)}
.pack ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;flex:1}
.pack li{font-size:.95rem;color:var(--smoke);padding-left:1.2rem;position:relative}
.pack li::before{content:"+";position:absolute;left:0;color:var(--orange);font-weight:700}

/* ---------- locator ---------- */
.locator{display:grid;grid-template-columns:300px 1fr;gap:clamp(1.4rem,3vw,2.5rem);align-items:start}
@media(max-width:820px){.locator{grid-template-columns:1fr}}
.storelist{display:grid;gap:.65rem;max-height:420px;overflow:auto;padding-right:.5rem}
.store{border:1px solid var(--hair);padding:1rem 1.1rem}
.store b{display:block;font-family:var(--util);text-transform:uppercase;letter-spacing:.06em;font-size:1rem}
.store span{font-size:.88rem;color:var(--smoke-dim)}

/* ---------- footer ---------- */
.foot{background:var(--blackout);border-top:1px solid var(--hair);padding-top:clamp(3rem,6vw,4.5rem)}
.foot-top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(1.6rem,3vw,2.6rem);padding-bottom:3rem}
@media(max-width:900px){.foot-top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-top{grid-template-columns:1fr}}
.foot-logo img{height:34px;width:auto;filter:invert(1);margin-bottom:1.2rem}
.foot h5{font-family:var(--util);text-transform:uppercase;letter-spacing:.2em;font-size:.76rem;color:var(--smoke-dim);margin:0 0 1.1rem;font-weight:700}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.foot a{color:var(--smoke);font-size:.95rem;transition:color .2s}
.foot a:hover{color:var(--voltage)}
.legal{border-top:1px solid var(--hair);padding-block:2rem 2.6rem;display:grid;gap:1.2rem}
.legal p{margin:0;font-family:var(--util);font-size:.8rem;line-height:1.55;color:var(--smoke-dim);max-width:100ch;letter-spacing:.02em}
.legal .bottom{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;align-items:center}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-1{transition-delay:.08s}.rv-2{transition-delay:.16s}.rv-3{transition-delay:.24s}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
}

/* ---------- explainer video (shared with animations.css on how-it-works) ---------- */
.viz-video{margin:0 0 clamp(1.6rem,3vw,2.4rem)}
.viz-video-frame{
  position:relative;aspect-ratio:16/9;width:100%;
  background:#000;border:1px solid var(--hair);overflow:hidden;
}
.light .viz-video-frame{border-color:var(--hair-dark)}
.viz-video-frame iframe,.viz-video-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;object-fit:cover;background:#000}
.viz-video figcaption{
  margin-top:.85rem;font-family:var(--util);text-transform:uppercase;
  letter-spacing:.14em;font-size:.78rem;font-weight:700;color:var(--smoke-dim);
}
.light .viz-video figcaption{color:rgba(10,10,11,.5)}

/* ---------- utilities ---------- */
.hide{display:none}
.mt-s{margin-top:1rem}.mt-m{margin-top:2rem}.mt-l{margin-top:3.2rem}
.mb-m{margin-bottom:2rem}
.center{text-align:center}
.maxw{max-width:62ch}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}