/* ==========================================================================
   VyFans — "THE SPLIT" design system
   The packaging's hard orange/blue divide is the structural language of the
   whole site. Orange = drive/energy. Blue = clarity/control. The line between
   them is where the brand lives.
   ========================================================================== */

/* --- 1. Tokens --------------------------------------------------------- */
:root{
  /* Brand — sampled directly from the pack artwork */
  --orange:      #F39315;
  --orange-hot:  #FF7A00;
  --orange-deep: #C9700A;
  --orange-soft: #FFE7C6;

  --blue:        #1F8ACB;
  --blue-lt:     #4FB2EC;
  --blue-deep:   #0E5F94;
  --blue-soft:   #DCEEFA;

  --ink:         #071626;
  --ink-2:       #0E2439;
  --ink-3:       #17344F;
  --slate:       #4D6577;   /* darkened from #5A7A93 to pass WCAG AA on the paper backgrounds */
  --mist:        #9FB6C7;

  --paper:       #F5F8FB;
  --paper-2:     #EAF1F7;
  --white:       #FFFFFF;

  --ok:          #17B26A;
  --warn:        #E8452C;

  /* Type */
  --f-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-mono:    'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Space */
  --gut: clamp(20px, 4vw, 56px);
  --sec: clamp(64px, 9vw, 140px);
  --max: 1280px;
  --max-narrow: 880px;

  /* Form */
  --r-sm: 8px;
  --r:    16px;
  --r-lg: 28px;
  --r-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(7,22,38,.08);
  --shadow:    0 12px 32px rgba(7,22,38,.12);
  --shadow-lg: 0 32px 80px rgba(7,22,38,.22);
  --glow-o:    0 0 80px rgba(243,147,21,.45);
  --glow-b:    0 0 80px rgba(31,138,203,.40);

  --ease: cubic-bezier(.2,.7,.3,1);
  --nav-h: 72px;
}

/* --- 2. Reset ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 20px)}
body{
  font-family:var(--f-body);
  font-size:17px; line-height:1.6;
  color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{display:block; max-width:100%; height:auto}
button,input,select,textarea{font:inherit; color:inherit}
button{background:none; border:0; cursor:pointer}
a{color:inherit; text-decoration:none}
ul,ol{list-style:none}
table{border-collapse:collapse; width:100%}
:focus-visible{outline:3px solid var(--orange); outline-offset:3px; border-radius:4px}
body.no-scroll{overflow:hidden}

/* --- 3. Typography ----------------------------------------------------- */
.display,h1,h2,h3,.h1,.h2,.h3{
  font-family:var(--f-display);
  font-weight:800;
  line-height:.94;
  letter-spacing:-.025em;
  text-wrap:balance;
}
h1,.h1{font-size:clamp(2.9rem, 7.4vw, 6.4rem); font-stretch:112%}
h2,.h2{font-size:clamp(2.2rem, 5.2vw, 4.2rem); font-stretch:110%}
h3,.h3{font-size:clamp(1.3rem, 2.3vw, 1.85rem); letter-spacing:-.015em}
h4,.h4{font-family:var(--f-display); font-weight:700; font-size:1.1rem; line-height:1.25}

.italic{font-style:italic}
.o{color:var(--orange)}
.b{color:var(--blue)}
.lt{color:var(--blue-lt)}

/* Outlined display text — echoes the pack's knockout type */
.stroke{
  color:transparent;
  -webkit-text-stroke:2px currentColor;
  paint-order:stroke fill;
}
.on-dark .stroke{-webkit-text-stroke-color:rgba(255,255,255,.55)}

.eyebrow{
  font-family:var(--f-mono);
  font-size:.72rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--blue);
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{
  content:''; width:26px; height:3px; background:var(--orange); flex:none;
}
.on-dark .eyebrow{color:var(--orange)}
.on-dark .eyebrow::before{background:var(--blue-lt)}
.eyebrow.center{justify-content:center}

.lead{font-size:clamp(1.05rem,1.6vw,1.28rem); line-height:1.62; color:var(--ink-3)}
.on-dark .lead{color:var(--mist)}
.muted{color:var(--slate)}
.on-dark .muted{color:var(--mist)}
.mono{font-family:var(--f-mono); font-size:.8rem; letter-spacing:.06em}

/* --- 4. Layout --------------------------------------------------------- */
.wrap{width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut)}
.wrap-narrow{width:100%; max-width:var(--max-narrow); margin-inline:auto; padding-inline:var(--gut)}
.section{padding-block:var(--sec); position:relative}
.section-sm{padding-block:clamp(44px,6vw,80px)}
.center{text-align:center}
.center .eyebrow{justify-content:center}
.grid{display:grid; gap:clamp(18px,2.4vw,32px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.stack{display:flex; flex-direction:column}
.row{display:flex; align-items:center}
.gap-s{gap:10px} .gap{gap:18px}
.mt-s{margin-top:12px} .mt{margin-top:24px} .mt-l{margin-top:44px} .mt-xl{margin-top:72px}
.sec-head{max-width:760px; margin-bottom:clamp(36px,5vw,64px)}
.sec-head.center{margin-inline:auto}
.sec-head .eyebrow{margin-bottom:18px}
.sec-head .lead{margin-top:20px}

/* Dark surfaces */
.on-dark{background:var(--ink); color:var(--white)}
.on-dark h1,.on-dark h2,.on-dark h3{color:var(--white)}

/* --- 5. Texture: the pack's dot-scatter halftone ------------------------ */
.dots{position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(currentColor 1.4px, transparent 1.5px);
  background-size:16px 16px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);
  mask-image:linear-gradient(180deg,#000,transparent 70%);
}
.grain{position:absolute; inset:0; pointer-events:none; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- 6. Buttons -------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--f-display); font-weight:800; font-size:.95rem;
  letter-spacing:.06em; text-transform:uppercase;
  padding:17px 34px; border-radius:var(--r-pill);
  border:2px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s, color .2s, border-color .2s;
  position:relative; isolation:isolate;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn svg{width:18px; height:18px; flex:none}

.btn-primary{
  background:linear-gradient(100deg,var(--orange-hot),var(--orange));
  color:#fff; box-shadow:0 10px 26px rgba(243,147,21,.42);
}
.btn-primary:hover{transform:translateY(-3px); box-shadow:0 18px 40px rgba(243,147,21,.55)}

.btn-ghost{background:transparent; border-color:currentColor; color:var(--ink)}
.btn-ghost:hover{background:var(--ink); color:#fff; border-color:var(--ink); transform:translateY(-3px)}
.on-dark .btn-ghost,.gate .btn-ghost,.hero .btn-ghost,.foot .btn-ghost{color:#fff; border-color:rgba(255,255,255,.4)}
.on-dark .btn-ghost:hover,.gate .btn-ghost:hover,.hero .btn-ghost:hover,.foot .btn-ghost:hover{background:#fff; color:var(--ink); border-color:#fff}

.btn-white{background:#fff; color:var(--ink); box-shadow:var(--shadow)}
.btn-white:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}

.btn-lg{padding:21px 44px; font-size:1.05rem}
.btn-sm{padding:12px 22px; font-size:.82rem}
.btn-block{width:100%}
.btn[disabled],.btn.is-busy{opacity:.55; pointer-events:none}
/* Sold-out CTA: visibly inert, and not gradient-loud like an active buy button. */
.btn.is-disabled{
  pointer-events:none; cursor:not-allowed; opacity:1;
  background:var(--paper-2) !important; color:var(--slate) !important;
  box-shadow:none !important; transform:none !important; filter:grayscale(1);
}

/* --- 7. Chips & badges ------------------------------------------------- */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-mono); font-size:.7rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  padding:9px 16px; border-radius:var(--r-pill);
  background:var(--white); border:1.5px solid var(--paper-2); color:var(--ink-3);
}
.on-dark .chip{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16); color:#fff}
.chip svg{width:14px; height:14px; color:var(--orange)}

.badge{
  display:inline-block; font-family:var(--f-display); font-weight:800;
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  padding:7px 14px; border-radius:var(--r-pill);
  background:var(--orange); color:#fff;
}
.badge-blue{background:var(--blue)}
.badge-ink{background:var(--ink)}

/* --- 8. Announce bar + marquee ----------------------------------------- */
.announce{
  background:var(--ink); color:#fff; overflow:hidden;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  padding:9px 0; position:relative; z-index:60;
}
.marquee{display:flex; width:max-content; animation:slide 34s linear infinite}
.marquee:hover{animation-play-state:paused}
.marquee span{padding-inline:26px; display:inline-flex; align-items:center; gap:26px; white-space:nowrap}
.marquee span::after{content:''; width:6px; height:6px; border-radius:50%; background:var(--orange); flex:none}
@keyframes slide{to{transform:translateX(-50%)}}

/* Big statement marquee — the pack's FOCUS/ENERGY/MOOD strip, blown up */
.band{
  background:var(--orange); color:var(--ink);
  padding:22px 0; overflow:hidden; position:relative;
  border-block:3px solid var(--ink);
}
.band .marquee{animation-duration:28s}
.band .marquee span{
  font-family:var(--f-display); font-weight:900; font-style:italic;
  font-size:clamp(1.5rem,3.4vw,2.6rem); font-stretch:112%;
  letter-spacing:-.01em; text-transform:uppercase; padding-inline:22px; gap:22px;
}
.band .marquee span::after{width:12px; height:12px; background:var(--ink); border-radius:0; transform:rotate(45deg)}
.band-blue{background:var(--blue); color:#fff}
.band-blue .marquee span::after{background:#fff}

/* --- 9. Nav ------------------------------------------------------------ */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.86); backdrop-filter:blur(16px) saturate(1.6);
  border-bottom:1px solid rgba(7,22,38,.08);
  transition:box-shadow .25s, background .25s;
}
.nav.scrolled{box-shadow:0 6px 28px rgba(7,22,38,.10)}
.nav-in{display:flex; align-items:center; gap:clamp(16px,3vw,44px); height:var(--nav-h)}
.nav-logo{flex:none; display:flex; align-items:center}
.nav-logo img{height:34px; width:auto}
.nav-links{display:flex; align-items:center; gap:clamp(16px,2.4vw,34px); margin-inline:auto}
.nav-links a{
  font-family:var(--f-display); font-weight:700; font-size:.92rem;
  letter-spacing:.02em; padding:6px 0; position:relative; color:var(--ink-2);
  transition:color .2s;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; height:3px; width:0;
  background:var(--orange); border-radius:2px; transition:width .25s var(--ease);
}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-links a.active{color:var(--ink)}
.nav-actions{display:flex; align-items:center; gap:10px; flex:none}

.icon-btn{
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; position:relative;
  transition:background .2s, transform .2s;
}
.icon-btn:hover{background:var(--paper-2); transform:translateY(-2px)}
.icon-btn svg{width:21px; height:21px; stroke-width:2}
.cart-count{
  position:absolute; top:2px; right:2px; min-width:19px; height:19px; padding:0 5px;
  border-radius:var(--r-pill); background:var(--orange); color:#fff;
  font-family:var(--f-mono); font-size:.64rem; font-weight:700;
  display:grid; place-items:center; border:2px solid #fff;
  transform:scale(0); transition:transform .3s var(--ease);
}
.cart-count.on{transform:scale(1)}
.nav-burger{display:none}

/* Mobile nav */
.mnav{
  position:fixed; inset:0; z-index:70; background:var(--ink); color:#fff;
  padding:26px var(--gut); display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .4s var(--ease); visibility:hidden;
}
.mnav.open{transform:none; visibility:visible}
.mnav-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:44px}
.mnav-top img{height:32px}
.mnav a{font-family:var(--f-display); font-weight:800; font-size:2rem; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.1)}
.mnav .btn{margin-top:32px}

/* --- 10. Hero ---------------------------------------------------------- */
.hero{
  position:relative; overflow:hidden; background:var(--ink); color:#fff;
  padding-top:clamp(48px,7vw,86px); padding-bottom:0;
}
/* The Split: an orange wedge cutting across the dark field */
.hero::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(900px 620px at 78% 14%, rgba(243,147,21,.30), transparent 62%),
    radial-gradient(760px 620px at 8% 82%, rgba(31,138,203,.34), transparent 64%);
}
.hero-wedge{
  position:absolute; right:-6%; top:-14%; width:64%; height:132%;
  background:linear-gradient(168deg,var(--orange-hot),var(--orange) 46%, transparent 47%);
  clip-path:polygon(28% 0, 100% 0, 100% 100%, 0 100%);
  opacity:.17; pointer-events:none;
}
.hero-in{position:relative; z-index:2; display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,4vw,56px); align-items:center}
.hero-copy{padding-bottom:clamp(56px,7vw,96px)}
.hero h1{margin-block:22px 0}
.hero h1 .line{display:block}
.hero-sub{margin-top:26px; max-width:50ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:38px}
.hero-chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:34px}

/* Product stage */
.hero-stage{position:relative; align-self:end; display:grid; place-items:center; padding-bottom:clamp(24px,4vw,48px)}
.hero-glow{
  position:absolute; width:min(560px,86%); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(243,147,21,.55), rgba(31,138,203,.22) 46%, transparent 68%);
  filter:blur(28px); animation:pulse 5.5s ease-in-out infinite;
}
@keyframes pulse{0%,100%{transform:scale(1); opacity:.85} 50%{transform:scale(1.09); opacity:1}}
.hero-pack{
  position:relative; z-index:2; width:min(400px,84%);
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.55));
  animation:float 6.5s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1.6deg)} 50%{transform:translateY(-20px) rotate(1.6deg)}}

.hero-cap{position:absolute; width:64px; z-index:3; filter:drop-shadow(0 14px 22px rgba(0,0,0,.45)); opacity:.95}
.hero-cap.c1{top:8%;  left:2%;  animation:float 7.5s ease-in-out infinite; transform:rotate(-28deg)}
.hero-cap.c2{bottom:16%; right:1%; animation:float 8.5s ease-in-out .8s infinite; transform:rotate(34deg); width:52px}

/* Ratings inline */
.stars{display:inline-flex; gap:2px; color:var(--orange)}
.stars svg{width:17px; height:17px; fill:currentColor}
.rating-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:.9rem}

/* --- 11. Split divider device ------------------------------------------ */
.split-card{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  background:var(--white); box-shadow:var(--shadow);
}
.split-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:6px;
  background:linear-gradient(90deg,var(--orange),var(--blue));
}

/* --- 12. Triad cards (Focus / Energy / Mood) --------------------------- */
.triad{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px)}
.tcard{
  position:relative; overflow:hidden; padding:38px 32px 34px;
  border-radius:var(--r-lg); background:var(--white);
  border:2px solid var(--paper-2);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.tcard:hover{transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:transparent}
.tcard::after{
  content:''; position:absolute; left:0; bottom:0; height:6px; width:100%;
  background:var(--accent,var(--orange)); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.tcard:hover::after{transform:scaleX(1)}
.tcard .num{
  font-family:var(--f-display); font-weight:900; font-style:italic;
  font-size:4.4rem; line-height:.8; color:var(--accent,var(--orange)); opacity:.18;
  position:absolute; top:18px; right:22px;
}
.tcard .ico{
  width:56px; height:56px; border-radius:16px; display:grid; place-items:center;
  background:var(--accent-soft,var(--orange-soft)); color:var(--accent,var(--orange)); margin-bottom:22px;
}
.tcard .ico svg{width:28px; height:28px; stroke-width:2}
.tcard h3{margin-bottom:12px}
.tcard p{color:var(--slate); font-size:.98rem}

/* --- 13. The No-Crash Curve (signature section) ------------------------ */
.curve-sec{background:var(--ink); color:#fff; position:relative; overflow:hidden}
.curve-sec .dots{color:rgba(255,255,255,.14); opacity:.6}
.curve-wrap{
  position:relative; margin-top:clamp(30px,4vw,52px);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12); border-radius:var(--r-lg);
  padding:clamp(22px,3vw,40px);
}
.curve-legend{display:flex; flex-wrap:wrap; gap:24px; margin-bottom:26px}
.curve-legend div{display:flex; align-items:center; gap:10px; font-family:var(--f-mono); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase}
.curve-legend i{width:26px; height:5px; border-radius:3px; display:block}
.curve-svg{width:100%; height:auto; overflow:visible}
.curve-svg .grid-l{stroke:rgba(255,255,255,.10); stroke-width:1}
.curve-svg .axis-t{fill:rgba(255,255,255,.45); font-family:var(--f-mono); font-size:11px; letter-spacing:.08em}
.curve-svg .path-vy,.curve-svg .path-ed{
  fill:none; stroke-width:4; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1600; stroke-dashoffset:1600;
  transition:stroke-dashoffset 2.4s var(--ease);
}
.curve-svg.drawn .path-vy,.curve-svg.drawn .path-ed{stroke-dashoffset:0}
.curve-svg .path-ed{transition-delay:.35s}
.curve-note{
  position:absolute; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; padding:7px 13px; border-radius:var(--r-pill);
  opacity:0; transform:translateY(8px); transition:opacity .5s 2s, transform .5s 2s;
}
.curve-svg.drawn ~ .curve-note{opacity:1; transform:none}
.note-vy{background:rgba(243,147,21,.16); color:var(--orange); border:1px solid rgba(243,147,21,.4)}
.note-ed{background:rgba(232,69,44,.14); color:#FF8A73; border:1px solid rgba(232,69,44,.4)}

/* --- 14. Kick-in timeline ---------------------------------------------- */
.timeline{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,26px); margin-top:clamp(34px,4vw,56px)}
.timeline::before{
  content:''; position:absolute; left:8%; right:8%; top:31px; height:4px; border-radius:2px;
  background:linear-gradient(90deg,var(--orange),var(--blue));
}
.tstep{position:relative; text-align:center}
.tstep .dot{
  width:62px; height:62px; border-radius:50%; margin:0 auto 20px;
  display:grid; place-items:center; position:relative; z-index:2;
  background:var(--white); border:4px solid var(--orange);
  font-family:var(--f-display); font-weight:900; font-size:1.05rem; color:var(--ink);
  box-shadow:0 8px 20px rgba(7,22,38,.14);
}
.tstep:nth-child(3) .dot{border-color:#7B9BC0}
.tstep:nth-child(4) .dot{border-color:var(--blue)}
.tstep h4{margin-bottom:8px}
.tstep p{font-size:.92rem; color:var(--slate)}

/* --- 15. Two-column media grid (about / contact) ----------------------- */
.ing-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,3.4vw,48px); align-items:start}

/* --- 16. Comparison table ---------------------------------------------- */
.compare-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:clamp(28px,3.5vw,48px)}
.compare{min-width:660px; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); background:#fff}
.compare th,.compare td{padding:18px 20px; text-align:center; border-bottom:1px solid var(--paper-2)}
.compare thead th{
  font-family:var(--f-display); font-weight:800; font-size:.94rem;
  letter-spacing:.04em; text-transform:uppercase;
  background:var(--paper); color:var(--ink-3); padding-block:22px;
}
.compare tbody th{
  text-align:left; font-family:var(--f-body); font-weight:600; font-size:.95rem;
  color:var(--ink-2); background:var(--paper);
}
.compare .col-vy{background:var(--orange); color:#fff; position:relative}
.compare thead .col-vy{background:var(--orange); color:#fff; font-size:1.02rem}
.compare tbody .col-vy{background:rgba(243,147,21,.10); font-weight:700; color:var(--orange-deep)}
.compare tr:last-child th,.compare tr:last-child td{border-bottom:0}
.tick{display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--ok); color:#fff}
.cross{display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#E9EDF2; color:var(--slate)}
.tick svg,.cross svg{width:15px; height:15px; stroke-width:3}

/* --- 17. Buy block / bundle tiers -------------------------------------- */
.buy-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px); align-items:start}
.buy-media{position:relative; border-radius:var(--r-lg); overflow:hidden; background:linear-gradient(160deg,var(--orange) 0 48%, var(--blue) 48% 100%); padding:clamp(28px,4vw,52px); display:grid; place-items:center}
.buy-media img{width:min(340px,80%); filter:drop-shadow(0 28px 44px rgba(0,0,0,.35))}
.buy-media .dots{color:rgba(255,255,255,.4)}

.tiers{display:grid; gap:14px; margin-top:26px}
.tier{
  position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center;
  padding:20px 22px; border-radius:var(--r); cursor:pointer;
  background:var(--white); border:2px solid var(--paper-2);
  transition:border-color .2s, box-shadow .2s, transform .2s var(--ease);
}
.tier:hover{transform:translateY(-2px); box-shadow:var(--shadow-sm)}
.tier.sel{border-color:var(--orange); box-shadow:0 0 0 4px rgba(243,147,21,.14)}
.tier input{position:absolute; opacity:0; pointer-events:none}
.tier .radio{width:23px; height:23px; border-radius:50%; border:2.5px solid var(--paper-2); display:grid; place-items:center; transition:border-color .2s}
.tier.sel .radio{border-color:var(--orange)}
.tier .radio::after{content:''; width:11px; height:11px; border-radius:50%; background:var(--orange); transform:scale(0); transition:transform .2s var(--ease)}
.tier.sel .radio::after{transform:scale(1)}
.tier .t-name{font-family:var(--f-display); font-weight:800; font-size:1.06rem}
.tier .t-sub{font-size:.83rem; color:var(--slate); margin-top:2px}
.tier .t-price{text-align:right}
.tier .t-now{font-family:var(--f-display); font-weight:900; font-size:1.32rem}
.tier .t-was{font-size:.82rem; color:var(--slate); text-decoration:line-through}
.tier .t-flag{
  position:absolute; top:-11px; right:18px;
  font-family:var(--f-display); font-weight:800; font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase;
  padding:5px 12px; border-radius:var(--r-pill); background:var(--ink); color:#fff;
}
.tier.best .t-flag{background:var(--orange)}

/* Purchase mode toggle */
.pmode{display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:6px; background:var(--paper-2); border-radius:var(--r-pill); margin-top:8px}
.pmode button{
  padding:12px; border-radius:var(--r-pill); font-family:var(--f-display); font-weight:700;
  font-size:.85rem; color:var(--slate); transition:background .2s, color .2s, box-shadow .2s;
}
.pmode button.on{background:#fff; color:var(--ink); box-shadow:var(--shadow-sm)}
.pmode button span{display:block; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.08em; color:var(--orange); margin-top:2px}

.buy-price{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-block:6px 4px}
.buy-price .now{font-family:var(--f-display); font-weight:900; font-size:clamp(2.2rem,4vw,3rem); line-height:1}
.buy-price .was{font-size:1.05rem; color:var(--slate); text-decoration:line-through}
.buy-price .save{font-family:var(--f-mono); font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:6px 12px; border-radius:var(--r-pill); background:var(--ok); color:#fff}

.qty{display:inline-flex; align-items:center; border:2px solid var(--paper-2); border-radius:var(--r-pill); overflow:hidden}
.qty button{width:44px; height:48px; display:grid; place-items:center; font-size:1.2rem; color:var(--ink-3); transition:background .2s}
.qty button:hover{background:var(--paper-2)}
.qty input{width:52px; height:48px; text-align:center; border:0; font-family:var(--f-display); font-weight:800; background:transparent; -moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}

.trust-list{display:grid; gap:12px; margin-top:26px}
.trust-list li{display:flex; align-items:flex-start; gap:12px; font-size:.94rem; color:var(--ink-3)}
.trust-list svg{width:20px; height:20px; color:var(--ok); flex:none; margin-top:2px; stroke-width:2.5}

/* --- 18. Reviews -------------------------------------------------------- */

/* --- 19. FAQ ------------------------------------------------------------ */
.faq{display:grid; gap:12px; max-width:860px; margin-inline:auto}
.faq details{
  background:var(--white); border:2px solid var(--paper-2); border-radius:var(--r);
  overflow:hidden; transition:border-color .2s, box-shadow .2s;
}
.faq details[open]{border-color:var(--orange); box-shadow:var(--shadow-sm)}
.faq summary{
  list-style:none; cursor:pointer; padding:22px 26px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  font-family:var(--f-display); font-weight:700; font-size:1.06rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:''; width:13px; height:13px; flex:none;
  border-right:3px solid var(--orange); border-bottom:3px solid var(--orange);
  transform:rotate(45deg) translateY(-3px); transition:transform .25s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq .a{padding:0 26px 24px; color:var(--slate); font-size:.98rem}

/* --- 20. Newsletter / CTA banner --------------------------------------- */
.cta-band{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  background:linear-gradient(115deg,var(--orange-hot),var(--orange) 42%, var(--blue) 100%);
  color:#fff; padding:clamp(38px,5.5vw,72px) clamp(26px,4vw,64px);
}
.cta-band .dots{color:rgba(255,255,255,.55)}
.cta-band h2{max-width:16ch}
.nl-form{display:flex; gap:10px; flex-wrap:wrap; margin-top:28px; max-width:520px}
.nl-form input{
  flex:1 1 240px; padding:17px 22px; border-radius:var(--r-pill);
  border:2px solid rgba(255,255,255,.35); background:rgba(255,255,255,.14); color:#fff;
}
.nl-form input::placeholder{color:rgba(255,255,255,.7)}
.nl-form input:focus{outline:none; border-color:#fff; background:rgba(255,255,255,.22)}

/* --- 21. Forms ---------------------------------------------------------- */
.field{display:flex; flex-direction:column; gap:8px}
.field label{font-family:var(--f-display); font-weight:700; font-size:.85rem; letter-spacing:.02em}
.field .hint{font-size:.78rem; color:var(--slate)}
.input,.field input,.field select,.field textarea{
  width:100%; padding:15px 18px; border-radius:var(--r-sm);
  border:2px solid var(--paper-2); background:#fff; transition:border-color .2s, box-shadow .2s;
}
.input:focus,.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--orange); box-shadow:0 0 0 4px rgba(243,147,21,.14);
}
.field textarea{min-height:150px; resize:vertical}
.field.err input,.field.err textarea,.field.err select{border-color:var(--warn)}
.field .msg{font-size:.8rem; color:var(--warn); display:none}
.field.err .msg{display:block}

.note{padding:16px 20px; border-radius:var(--r-sm); font-size:.92rem; display:none}
.note.on{display:block}
.note-ok{background:rgba(23,178,106,.10); color:#0B7A46; border:1px solid rgba(23,178,106,.3)}
.note-bad{background:rgba(232,69,44,.08); color:#B32A17; border:1px solid rgba(232,69,44,.3)}

/* --- 22. Cart drawer ---------------------------------------------------- */
.scrim{position:fixed; inset:0; background:rgba(7,22,38,.6); backdrop-filter:blur(3px); opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; z-index:80}
.scrim.on{opacity:1; visibility:visible}
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(440px,100%); z-index:90;
  background:var(--white); display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .4s var(--ease); box-shadow:var(--shadow-lg);
}
.drawer.on{transform:none}
.drawer-top{display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--paper-2)}
.drawer-top h3{font-size:1.25rem}
.drawer-body{flex:1; overflow-y:auto; padding:20px 24px}
.drawer-foot{padding:22px 24px; padding-bottom:calc(22px + env(safe-area-inset-bottom)); border-top:1px solid var(--paper-2); background:var(--paper)}
.ci{display:grid; grid-template-columns:78px 1fr auto; gap:14px; padding:16px 0; border-bottom:1px solid var(--paper-2)}
.ci-img{width:78px; height:78px; border-radius:var(--r-sm); background:linear-gradient(150deg,var(--orange) 0 48%, var(--blue) 48% 100%); display:grid; place-items:center; overflow:hidden}
.ci-img img{width:78%}
.ci-name{font-family:var(--f-display); font-weight:800; font-size:.98rem; line-height:1.2}
.ci-var{font-family:var(--f-mono); font-size:.7rem; color:var(--slate); margin-top:4px; letter-spacing:.05em}
.ci-price{font-family:var(--f-display); font-weight:800; text-align:right; white-space:nowrap}
.ci-rm{font-size:.76rem; color:var(--slate); text-decoration:underline; margin-top:auto; text-align:right}
.ci-rm:hover{color:var(--warn)}
.ci-qty{display:inline-flex; align-items:center; gap:2px; margin-top:8px; border:1.5px solid var(--paper-2); border-radius:var(--r-pill)}
.ci-qty button{width:40px; height:40px; display:grid; place-items:center; font-size:1.05rem; color:var(--slate)}
.ci-qty span{min-width:26px; text-align:center; font-family:var(--f-mono); font-size:.82rem; font-weight:700}
.sum-row{display:flex; justify-content:space-between; padding:7px 0; font-size:.94rem}
.sum-row.total{font-family:var(--f-display); font-weight:900; font-size:1.3rem; padding-top:14px; margin-top:8px; border-top:2px solid var(--ink)}
.empty-cart{text-align:center; padding:56px 20px; color:var(--slate)}
.empty-cart img{width:88px; margin:0 auto 22px; opacity:.35}

/* --- 23. Age gate ------------------------------------------------------- */
.gate{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:var(--ink); padding:24px; opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s;
}
.gate.on{opacity:1; visibility:visible}
.gate-box{
  max-width:460px; width:100%; text-align:center; color:#fff; position:relative; z-index:2;
}
.gate-box img{height:46px; margin:0 auto 30px}
.gate-box h2{font-size:clamp(1.9rem,4.4vw,2.7rem); margin-bottom:16px}
.gate-box p{color:var(--mist); margin-bottom:30px}
.gate-btns{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.gate-deny{margin-top:26px; font-size:.9rem; color:var(--mist); display:none}
.gate.denied .gate-btns,.gate.denied .gate-box>p{display:none}
.gate.denied .gate-deny{display:block}

/* --- 24. Footer --------------------------------------------------------- */
.foot{background:var(--ink); color:var(--mist); padding-top:clamp(56px,7vw,90px); position:relative; overflow:hidden}
.foot a{color:var(--mist); transition:color .2s}
.foot a:hover{color:var(--orange)}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:clamp(24px,3vw,48px); padding-bottom:52px}
.foot-logo{height:38px; margin-bottom:20px}
.foot h5{font-family:var(--f-display); font-weight:800; font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:#fff; margin-bottom:20px}
.foot ul{display:grid; gap:11px; font-size:.93rem}
.socials{display:flex; gap:10px; margin-top:22px}
.socials a{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.07); transition:background .2s, transform .2s}
.socials a:hover{background:var(--orange); color:#fff; transform:translateY(-3px)}
.socials svg{width:18px; height:18px}
.foot-bottom{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-bottom:32px; font-size:.82rem}
.disclaimer{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r); padding:20px 24px; font-size:.78rem; line-height:1.65; margin-bottom:30px;
}
.disclaimer strong{color:#fff}

/* --- 25. Page header (inner pages) -------------------------------------- */
.phead{
  background:var(--ink); color:#fff; padding-block:clamp(52px,7vw,92px);
  position:relative; overflow:hidden;
}
.phead::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(700px 480px at 82% 20%, rgba(243,147,21,.28), transparent 62%),
             radial-gradient(620px 460px at 6% 88%, rgba(31,138,203,.30), transparent 64%);
}
.phead-in{position:relative; z-index:2}
.crumbs{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mist); margin-bottom:18px}
.crumbs a:hover{color:var(--orange)}

/* --- 26. Product page --------------------------------------------------- */
.pdp{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px); align-items:start}
.pdp-gallery{position:sticky; top:calc(var(--nav-h) + 24px)}
.pdp-main{
  border-radius:var(--r-lg); overflow:hidden; position:relative;
  background:linear-gradient(160deg,var(--orange) 0 48%, var(--blue) 48% 100%);
  display:grid; place-items:center; padding:clamp(28px,4vw,56px); aspect-ratio:4/5;
}
.pdp-main img{width:min(78%,340px); filter:drop-shadow(0 28px 44px rgba(0,0,0,.35))}
.pdp-main .dots{color:rgba(255,255,255,.4)}
.pdp-thumbs{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:12px}
.pdp-thumb{
  aspect-ratio:1; border-radius:var(--r-sm); overflow:hidden; cursor:pointer;
  background:var(--paper-2); display:grid; place-items:center; padding:10px;
  border:2px solid transparent; transition:border-color .2s;
}
.pdp-thumb.on{border-color:var(--orange)}
.pdp-thumb img{max-height:100%; width:auto}
.pdp-info h1{font-size:clamp(2rem,3.8vw,3.1rem)}
.pdp-sku{font-family:var(--f-mono); font-size:.74rem; letter-spacing:.12em; color:var(--slate); text-transform:uppercase}

/* Sticky mobile buy bar */
.buybar{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  background:rgba(255,255,255,.95); backdrop-filter:blur(14px);
  border-top:1px solid var(--paper-2);
  padding:12px var(--gut); padding-bottom:calc(12px + env(safe-area-inset-bottom));
  display:none; align-items:center; gap:14px;
  transform:translateY(100%); transition:transform .3s var(--ease);
  box-shadow:0 -6px 24px rgba(7,22,38,.1);
}
.buybar.on{transform:none}
.buybar .bb-price{font-family:var(--f-display); font-weight:900; font-size:1.2rem}
.buybar .btn{flex:1}

/* --- 27. Shop grid ------------------------------------------------------ */
.shop-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,30px)}
.pcard{
  background:#fff; border-radius:var(--r-lg); overflow:hidden; border:2px solid var(--paper-2);
  display:flex; flex-direction:column;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.pcard:hover{transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:transparent}
.pcard-img{
  position:relative; aspect-ratio:1; display:grid; place-items:center; padding:30px;
  background:linear-gradient(160deg,var(--orange) 0 48%, var(--blue) 48% 100%);
}
.pcard-img img{width:min(70%,220px); filter:drop-shadow(0 18px 28px rgba(0,0,0,.3)); transition:transform .4s var(--ease)}
.pcard:hover .pcard-img img{transform:scale(1.06) rotate(-2deg)}
.pcard-img .badge{position:absolute; top:16px; left:16px}
.pcard-body{padding:24px; display:flex; flex-direction:column; gap:10px; flex:1}
.pcard h3{font-size:1.18rem}
.pcard .pc-desc{font-size:.9rem; color:var(--slate); flex:1}
.pcard .pc-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:6px}
.pcard .pc-price{font-family:var(--f-display); font-weight:900; font-size:1.35rem}

/* --- 28. Blog ----------------------------------------------------------- */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,30px)}
.bcard{background:#fff; border-radius:var(--r-lg); overflow:hidden; border:2px solid var(--paper-2); display:flex; flex-direction:column; transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.bcard:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
.bcard-img{aspect-ratio:16/10; position:relative; overflow:hidden; background:var(--ink)}
.bcard-img img{width:100%; height:100%; object-fit:cover; opacity:.85; transition:transform .5s var(--ease)}
.bcard:hover .bcard-img img{transform:scale(1.06)}
.bcard-img .badge{position:absolute; top:14px; left:14px}
.bcard-body{padding:24px; display:flex; flex-direction:column; gap:10px; flex:1}
.bcard h3{font-size:1.14rem}
.bcard p{font-size:.92rem; color:var(--slate); flex:1}
.bcard .b-meta{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--slate)}

/* --- 29. Reveal animation ----------------------------------------------- */
.rv{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.rv.in{opacity:1; transform:none}
.rv-d1{transition-delay:.08s} .rv-d2{transition-delay:.16s} .rv-d3{transition-delay:.24s}
.rv-d4{transition-delay:.32s} .rv-d5{transition-delay:.4s} .rv-d6{transition-delay:.48s}

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

/* --- 30. Responsive ----------------------------------------------------- */
@media (max-width:1040px){
  .hero-in{grid-template-columns:1fr; text-align:center}
  .hero-copy{padding-bottom:0; order:1}
  .hero-stage{order:2; padding-block:20px 40px}
  .hero .eyebrow,.hero-cta,.hero-chips,.hero .rating-row{justify-content:center}
  .hero-sub{margin-inline:auto}
  .ing-grid,.buy-grid,.pdp{grid-template-columns:1fr}
  .pdp-gallery{position:static}
  .foot-grid{grid-template-columns:1fr 1fr}
  .g4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .nav-links{display:none}
  .nav-burger{display:grid}
  .triad,.shop-grid,.blog-grid{grid-template-columns:1fr}
  .timeline{grid-template-columns:repeat(2,1fr); gap:32px}
  .timeline::before{display:none}
  .buybar{display:flex}
  body.has-buybar{padding-bottom:78px}
}
@media (max-width:560px){
  :root{--nav-h:64px}
  .g2,.g4{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .btn{padding:15px 26px; font-size:.88rem}
  .btn-lg{padding:18px 32px; font-size:.96rem}
  .hero-cta .btn{width:100%}
  .tier{grid-template-columns:auto 1fr; row-gap:6px}
  .tier .t-price{grid-column:2; text-align:left}
}

/* --- 31. Print ---------------------------------------------------------- */
@media print{
  .nav,.announce,.band,.foot,.buybar,.drawer,.scrim,.gate{display:none !important}
  body{background:#fff}
}

/* --- 32. Editorial ------------------------------------------------------ */
/* Branded card art for journal entries that have no photograph — the split
   gradient plus an oversized category word, so the grid stays on-brand
   instead of reaching for mismatched stock. */
.bcard-art{
  aspect-ratio:16/10; position:relative; overflow:hidden;
  background:linear-gradient(150deg,var(--orange) 0 48%, var(--blue) 48% 100%);
  display:grid; place-items:center;
}
.bcard-art .dots{color:rgba(255,255,255,.45)}
.bcard-art span{
  position:relative; z-index:2;
  font-family:var(--f-display); font-weight:900; font-style:italic;
  font-size:clamp(1.6rem,3.4vw,2.4rem); letter-spacing:-.02em;
  color:#fff; text-transform:uppercase; text-align:center; line-height:.95;
  padding-inline:18px; text-shadow:0 4px 16px rgba(0,0,0,.28);
}
.bcard-art.b2{background:linear-gradient(150deg,var(--blue) 0 48%, var(--ink) 48% 100%)}
.bcard-art.b3{background:linear-gradient(150deg,var(--ink) 0 48%, var(--orange) 48% 100%)}
.bcard-art.b4{background:linear-gradient(150deg,var(--orange-hot) 0 48%, var(--blue-deep) 48% 100%)}
.bcard-art.b5{background:linear-gradient(150deg,var(--blue-deep) 0 48%, var(--orange) 48% 100%)}

/* Long-form article body */
.article{max-width:760px; margin-inline:auto}
.article > * + *{margin-top:1.15em}
.article h2{font-size:clamp(1.7rem,3.2vw,2.4rem); margin-top:1.8em}
.article h3{font-size:clamp(1.2rem,2vw,1.5rem); margin-top:1.6em}
.article p{font-size:1.06rem; line-height:1.72; color:var(--ink-2)}
.article ul{display:grid; gap:12px; padding-left:4px}
.article li{display:flex; gap:12px; align-items:flex-start; font-size:1.02rem; color:var(--ink-2)}
.article li::before{content:''; width:8px; height:8px; margin-top:9px; flex:none; border-radius:2px; background:var(--orange); transform:rotate(45deg)}
.article blockquote{
  border-left:5px solid var(--orange); padding:6px 0 6px 24px; margin-block:1.6em;
  font-family:var(--f-display); font-weight:700; font-size:clamp(1.2rem,2.2vw,1.55rem);
  line-height:1.3; letter-spacing:-.015em;
}
.article .kicker{font-family:var(--f-mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--slate)}
.article-hero{aspect-ratio:21/9; border-radius:var(--r-lg); overflow:hidden; margin-bottom:clamp(28px,4vw,48px)}
.article-hero img{width:100%; height:100%; object-fit:cover}
.share{display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding-top:28px; margin-top:36px; border-top:2px solid var(--paper-2)}

/* --- 33. Checkout ------------------------------------------------------- */
.co{display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(28px,4vw,56px); align-items:start}
.co-panel{background:#fff; border:2px solid var(--paper-2); border-radius:var(--r-lg); padding:clamp(24px,3vw,38px)}
.co-panel + .co-panel{margin-top:18px}
.co-panel h3{display:flex; align-items:center; gap:12px; margin-bottom:22px}
.co-step{
  width:30px; height:30px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--orange); color:#fff; font-family:var(--f-mono); font-size:.82rem; font-weight:700;
}
.co-sum{position:sticky; top:calc(var(--nav-h) + 24px); background:var(--ink); color:#fff; border-radius:var(--r-lg); padding:clamp(24px,3vw,34px); overflow:hidden}
.co-sum h3{color:#fff; margin-bottom:20px}
.co-sum .dots{color:rgba(255,255,255,.14)}
.co-line{display:grid; grid-template-columns:56px 1fr auto; gap:14px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.12)}
.co-line-img{width:56px; height:56px; border-radius:10px; background:linear-gradient(150deg,var(--orange) 0 48%, var(--blue) 48% 100%); display:grid; place-items:center; overflow:hidden}
.co-line-img img{width:76%}
.co-line-n{font-family:var(--f-display); font-weight:800; font-size:.92rem; line-height:1.2}
.co-line-v{font-family:var(--f-mono); font-size:.68rem; color:var(--mist); margin-top:3px; letter-spacing:.05em}
.co-line-p{font-family:var(--f-display); font-weight:800; font-size:.94rem; white-space:nowrap}
.co-sum .sum-row{color:var(--mist)}
.co-sum .sum-row.total{color:#fff; border-top-color:rgba(255,255,255,.35)}
.ship-opts{display:grid; gap:12px}
.ship-opt{
  display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center;
  padding:18px 20px; border-radius:var(--r); cursor:pointer;
  background:#fff; border:2px solid var(--paper-2); transition:border-color .2s, box-shadow .2s;
}
.ship-opt.sel{border-color:var(--orange); box-shadow:0 0 0 4px rgba(243,147,21,.14)}
.ship-opt input{position:absolute; opacity:0; pointer-events:none}
.ship-opt .radio{width:22px; height:22px; border-radius:50%; border:2.5px solid var(--paper-2); display:grid; place-items:center}
.ship-opt.sel .radio{border-color:var(--orange)}
.ship-opt .radio::after{content:''; width:10px; height:10px; border-radius:50%; background:var(--orange); transform:scale(0); transition:transform .2s var(--ease)}
.ship-opt.sel .radio::after{transform:scale(1)}
.ship-opt .s-name{font-family:var(--f-display); font-weight:700; font-size:.98rem}
.ship-opt .s-sub{font-size:.83rem; color:var(--slate)}
.ship-opt .s-price{font-family:var(--f-display); font-weight:800}
.secure-note{display:flex; align-items:center; gap:10px; margin-top:18px; font-size:.84rem; color:var(--slate)}
.secure-note svg{width:18px; height:18px; color:var(--ok); flex:none}
.pay-marks{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px}
.pay-marks span{
  font-family:var(--f-mono); font-size:.64rem; letter-spacing:.1em; padding:7px 11px;
  border-radius:6px; background:var(--paper-2); color:var(--ink-3); font-weight:700;
}
@media (max-width:1040px){ .co{grid-template-columns:1fr} .co-sum{position:static; order:-1} }

/* ==========================================================================
   34. ENERGY PASS
   The brand's whole promise is drive, so the interface should feel like it is
   moving even when it is standing still. Everything here is decorative and
   every piece of it is switched off by prefers-reduced-motion.
   ========================================================================== */

/* --- Scroll progress: the split, drawn across the top of the page -------- */
.progress{
  position:fixed; top:0; left:0; height:4px; width:0; z-index:100;
  background:linear-gradient(90deg,var(--orange),var(--orange-hot) 40%,var(--blue));
  box-shadow:0 0 16px rgba(243,147,21,.75);
  transition:width .08s linear;
}

/* --- Buttons: a shine sweep and a live pulse ---------------------------- */
.btn{overflow:hidden}
.btn-primary::after,.btn-white::after{
  content:''; position:absolute; top:-10%; bottom:-10%; width:42%; left:-60%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg); pointer-events:none;
}
.btn-primary:hover::after,.btn-white:hover::after{animation:shine .75s var(--ease)}
@keyframes shine{from{left:-60%} to{left:130%}}

.btn-pulse{animation:cta-pulse 2.6s ease-in-out infinite}
@keyframes cta-pulse{
  0%,100%{box-shadow:0 10px 26px rgba(243,147,21,.42), 0 0 0 0 rgba(243,147,21,.55)}
  60%    {box-shadow:0 10px 26px rgba(243,147,21,.42), 0 0 0 18px rgba(243,147,21,0)}
}

/* --- Hero: drifting light behind the pack ------------------------------- */
.orb{position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; opacity:.55}
.orb-1{width:520px; height:520px; background:var(--orange); top:-12%; right:4%;  animation:drift-a 17s ease-in-out infinite}
.orb-2{width:460px; height:460px; background:var(--blue);   bottom:-18%; left:-6%; animation:drift-b 21s ease-in-out infinite}
.orb-3{width:300px; height:300px; background:var(--orange-hot); top:44%; left:38%; opacity:.3; animation:drift-a 25s ease-in-out 2s infinite}
@keyframes drift-a{0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(-70px,60px,0) scale(1.16)}}
@keyframes drift-b{0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(80px,-50px,0) scale(1.12)}}

/* --- Angled section edges ------------------------------------------------ */
.cut-top   {clip-path:polygon(0 46px, 100% 0, 100% 100%, 0 100%); margin-top:-24px}
.cut-bottom{clip-path:polygon(0 0, 100% 0, 100% calc(100% - 46px), 0 100%)}
@media (max-width:700px){
  .cut-top,.cut-bottom{clip-path:none; margin-block:0}
}

/* --- Live stat strip ----------------------------------------------------- */
.stats{
  position:relative; overflow:hidden;
  background:var(--ink); color:#fff;
  padding-block:clamp(48px,7vw,86px);
}
.stats .dots{color:rgba(255,255,255,.18)}
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,3vw,40px); position:relative; z-index:2}
.stat{text-align:center; position:relative}
.stat + .stat::before{
  content:''; position:absolute; left:calc(-1 * clamp(9px,1.5vw,20px)); top:12%; bottom:12%;
  width:2px; background:linear-gradient(180deg,transparent,rgba(255,255,255,.22),transparent);
}
.stat .n{
  font-family:var(--f-display); font-weight:900; font-style:italic;
  font-size:clamp(2.6rem,6vw,4.6rem); line-height:.9; letter-spacing:-.035em;
  background:linear-gradient(120deg,var(--orange),#FFC46B 45%,var(--blue-lt));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat .n small{font-size:.42em; font-style:normal; letter-spacing:0}
.stat .l{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--mist); margin-top:14px;
}
@media (max-width:700px){
  .stat-grid{grid-template-columns:repeat(2,1fr); gap:34px}
  .stat + .stat::before{display:none}
}

/* --- Livelier hovers ----------------------------------------------------- */
.tcard:hover{transform:translateY(-10px) rotate(-.7deg)}
.pcard:hover{transform:translateY(-10px) rotate(.5deg)}
.bcard:hover{transform:translateY(-8px) rotate(.4deg)}
.tcard,.pcard,.bcard{will-change:transform}

/* Icon tiles kick when their card is hovered */
.tcard .ico{transition:transform .35s var(--ease), background .3s}
.tcard:hover .ico{transform:rotate(-8deg) scale(1.1)}

/* --- Headline word stagger ---------------------------------------------- */
.kin span{display:inline-block; opacity:0; transform:translateY(.5em) rotate(2deg);
  transition:opacity .55s var(--ease), transform .55s var(--ease)}
.kin.in span{opacity:1; transform:none}

/* --- Marquee: a touch faster, and it leans ------------------------------ */
.band{transform:rotate(-1.1deg); margin-block:14px; width:104%; margin-left:-2%}
.band .marquee{animation-duration:24s}
.band-blue{transform:rotate(1.1deg)}
@media (max-width:700px){ .band{transform:none; width:100%; margin-left:0} .band-blue{transform:none} }

/* --- Glow pulse on the hero pack ---------------------------------------- */
.hero-glow{animation-duration:4.4s}

/* --- 35. Small-screen corrections --------------------------------------- */
@media (max-width:620px){
  /* The burger and the bag already cover intent; the third button just
     squeezes the logo. */
  .nav-buy{display:none}
  /* The wedge is a diagonal cut on wide screens. At phone width the clip
     leaves a stray horizontal bar, so drop it and keep the gradient orbs. */
  .hero-wedge{display:none}
  .hero-chips{gap:8px}
  .hero-chips .chip{font-size:.62rem; padding:8px 13px}
  .hero{padding-top:34px}
  /* On a phone the hero stacks, so an orb parked at the top paints a brown
     bar under the nav. Move the light down behind the pack where it belongs. */
  .orb-1{width:320px; height:320px; top:auto; bottom:26%; right:-20%; opacity:.34}
  .orb-2{width:290px; height:290px; bottom:2%;  left:-26%;  opacity:.30}
  .orb-3{display:none}
  /* Same reason: pull the base gradients away from the top edge. */
  .hero::before{
    background:
      radial-gradient(560px 460px at 86% 62%, rgba(243,147,21,.26), transparent 62%),
      radial-gradient(500px 420px at 4% 88%, rgba(31,138,203,.30), transparent 64%);
  }
}
@media (max-width:420px){
  .nav-logo img{height:28px}
  .hero-chips .chip{font-size:.58rem; padding:7px 11px}
}

/* --- Sold-out tiers ------------------------------------------------------- */
.tier.out{opacity:.45; cursor:not-allowed; filter:grayscale(.6)}
.tier.out:hover{transform:none; box-shadow:none}

/* --- Skip to content (keyboard a11y) -------------------------------------- */
.skip-link{
  position:absolute; left:12px; top:-48px; z-index:1000;
  background:var(--ink); color:#fff; padding:10px 16px; border-radius:8px;
  font-weight:600; text-decoration:none; transition:top .15s ease;
}
.skip-link:focus{ top:12px; outline:2px solid var(--orange); outline-offset:2px; }
#main:focus{ outline:none; }

/* Visually hidden but available to screen readers */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* --- Touch devices: no stuck hover-lift after a tap ----------------------- */
@media (hover: none){
  .btn-primary:hover, .btn-ghost:hover, .btn-white:hover,
  .icon-btn:hover, .socials a:hover, .tcard:hover, .pcard:hover,
  .bcard:hover, .tier:hover{
    transform:none;
  }
  .pcard:hover .pcard-img img{ transform:none; }
}

/* Out-of-stock badge in the product SKU line */
.pdp-sku [data-stock-label].is-out{color:var(--warn); font-weight:700}

/* --- Checkout: multi-column form rows + order-summary save badge ---------- */
.co-2col{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.co-3col{display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px}
@media (max-width:560px){ .co-2col,.co-3col{grid-template-columns:1fr} }
.co-line-save{
  display:inline-block; margin-top:5px; font-family:var(--f-mono); font-size:.62rem;
  font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  background:var(--ok); color:#fff; padding:2px 7px; border-radius:var(--r-pill);
}
.co-line-was{font-size:.75rem; color:var(--mist); text-decoration:line-through; margin-right:6px}

/* Password show/hide toggle on the account page (matches the admin panel). */
.pw-wrap{position:relative; display:block; width:100%}
.pw-wrap input{width:100%; padding-right:70px}
.pw-toggle{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:none; border:0; padding:6px 8px; border-radius:var(--r-sm);
  font:600 .82rem/1 var(--f-body); letter-spacing:.02em; color:var(--slate); cursor:pointer;
}
.pw-toggle:hover{color:var(--ink)}
.pw-toggle:focus-visible{outline:2px solid var(--blue); outline-offset:2px}