/* Circadian Signal — homepage styles (css/home.css)
   Homepage only. Other pages still use style.css / pages.css.
   Layout: calm, product-led single column of full-width bands. Light bands for reading,
   solid deep teal (--deep) for the hero, the formula, and the closing CTA, with amber as the single warm accent.
   Contrast: Cream text on --deep is ~5.7:1 (WCAG AA). The amber announcement bar uses Ink text (5.9:1). */
:root{
  --teal:#3FA79C;
  --amber:#D98F3B;
  --cream:#EDEEEA;
  --ink:#1C2430;
  --graphite:#59636E;
  --paper:#F7F8F6;
  --white:#FFFFFF;
  --line:#DDE1DE;
  --teal-ink:#23675F;       /* teal for text/links on light ground: 6.4:1 on white */
  --amber-ink:#8A5418;      /* amber for small text on light ground: 5.9:1 on white */

  --deep:#23675F;           /* solid band colour for hero, formula and closing CTA */

  --f-display:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --f-body:'Inter',ui-sans-serif,system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  --r-card:20px;
  --r-pill:999px;
  --gutter:max(16px,env(safe-area-inset-left,0px));
  --gutter-r:max(16px,env(safe-area-inset-right,0px));
  --shadow:0 1px 2px rgba(28,36,48,.05),0 12px 32px -18px rgba(28,36,48,.25);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--f-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--f-display);font-weight:500;letter-spacing:-.02em;line-height:1.05;margin:0;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--teal-ink);outline-offset:3px;border-radius:6px}
.on-grad :focus-visible{outline-color:var(--cream)}
.nowrap{white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--cream);padding:10px 16px;border-radius:8px;z-index:100}
.skip:focus{left:12px}
[hidden]{display:none!important}

.wrap{max-width:1180px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter-r)}
.band{padding-block:clamp(72px,10vw,128px)}
.band-tight{padding-block:clamp(48px,7vw,88px)}
.on-grad{background:var(--deep);color:var(--cream)}
.on-grad h1,.on-grad h2,.on-grad h3{color:var(--cream)}
.kicker{display:inline-block;font:500 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--teal-ink)}
.on-grad .kicker{color:var(--cream);opacity:.9}
.h2{font-size:clamp(34px,5.2vw,60px)}
.head{max-width:720px;display:grid;gap:18px;margin-bottom:clamp(36px,5vw,64px)}
.head p{color:var(--graphite);font-size:18px;max-width:58ch}
.on-grad .head p{color:var(--cream)}
.center{margin-inline:auto;text-align:center;justify-items:center}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 30px;border-radius:var(--r-pill);border:0;cursor:pointer;
  font:600 16px/1 var(--f-body);letter-spacing:.01em;text-decoration:none;transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease}
.btn-ink{background:var(--ink);color:var(--cream)}
.btn-ink:hover{background:#0F151E;transform:translateY(-1px);box-shadow:0 10px 24px -12px rgba(28,36,48,.6)}
.btn-cream{background:var(--cream);color:var(--ink)}
.btn-cream:hover{background:#fff;transform:translateY(-1px)}
.btn:disabled{opacity:.6;cursor:wait;transform:none}
.btn svg{width:18px;height:18px;flex:none}

/* ---------- Dial (signature 24-hour dial with amber marker) ---------- */
.dial{width:44px;height:44px;flex:none}
.dial .face{fill:none;stroke:currentColor;stroke-width:1.5;opacity:.55}
.dial .tick{stroke:currentColor;stroke-width:1.5;opacity:.55}
.dial .hand{stroke:var(--amber);stroke-width:2.5;stroke-linecap:round}
.dial .dot{fill:var(--amber)}

/* ---------- Announcement + header ---------- */
.announce{background:var(--amber);color:var(--ink);text-align:center;
  font:500 13px/1.3 var(--f-body);letter-spacing:.02em;padding:9px var(--gutter-r) 9px var(--gutter)}
.announce b{font-family:var(--f-mono);font-weight:600;letter-spacing:.06em}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--paper)}
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(247,248,246,.88);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s}
.site-head.scrolled{border-bottom-color:var(--line)}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logo-mark{width:30px;height:30px}
.logo-mark circle{fill:none;stroke:currentColor;stroke-width:2.4}
.logo-mark path{fill:none;stroke:var(--teal);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.logo-text{font:500 18px/1 var(--f-display);letter-spacing:-.01em;white-space:nowrap}
.nav-links{display:flex;gap:28px}
.nav-links a{font-size:15px;color:var(--graphite);text-decoration:none}
.nav-links a:hover{color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:10px}
.currency-select{appearance:none;-webkit-appearance:none;border:1px solid var(--line);background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2359636E' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center;
  color:var(--ink);font:500 14px/1 var(--f-body);height:40px;padding:0 28px 0 12px;border-radius:var(--r-pill);cursor:pointer}
.btn-shop{min-height:42px;padding:0 22px;font-size:15px}
.menu-toggle{display:none;width:42px;height:42px;border:0;background:none;cursor:pointer;align-items:center;justify-content:center;border-radius:50%}
@media (max-width:1080px){
  .nav-links{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);flex-direction:column;gap:0;border-bottom:1px solid var(--line);
    padding:8px var(--gutter-r) 16px var(--gutter)}
  .nav-links.mobile-open{display:flex}
  .nav-links a{padding:14px 0;font-size:17px;color:var(--ink);border-bottom:1px solid var(--line)}
  .menu-toggle{display:inline-flex}
}
@media (max-width:440px){ .nav{gap:8px} .nav-cta{gap:6px} .logo{gap:8px} .logo-mark{width:26px;height:26px} .logo-text{font-size:15.5px} .currency-select{height:38px;font-size:13px;padding:0 22px 0 9px;background-position:right 8px center} .btn-shop{min-height:38px;padding:0 14px;font-size:14px} .menu-toggle{width:36px} }
@media (max-width:360px){ .logo-text{display:none} }

/* ---------- Hero: full-bleed plinth image. The image's left ~45% is empty dark backdrop, so on desktop the copy and
   buy card sit there and the product stays clear on the right. Below 1024px the image becomes a product crop on top
   and everything stacks under it on Ink, which matches the photo's dark backdrop. ---------- */
.hero{position:relative;overflow:hidden;background:var(--ink);color:var(--cream)}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:78% 50%}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(28,36,48,.55) 0,rgba(28,36,48,.3) 38%,rgba(28,36,48,0) 58%)}
.hero-inner{position:relative;display:flex;align-items:center;min-height:min(56.5vw,900px);padding-block:clamp(32px,3.5vw,56px)}
.hero-col{width:min(47%,560px);display:grid;gap:18px}
.hero-copy{display:grid;gap:14px}
.hero .kicker{color:var(--cream);opacity:.9}
.hero h1{font-size:clamp(32px,3.15vw,46px);line-height:1.05;letter-spacing:-.03em;color:var(--cream)}
.hero .lead{font-size:clamp(15.5px,1.15vw,17px);line-height:1.55;color:var(--cream)}
.hero .lead-beats{display:block;font:500 clamp(19px,1.6vw,23px)/1.3 var(--f-display);letter-spacing:-.01em;margin-bottom:6px}
.hero .lead b{font-weight:600}
.launch-pill{justify-self:start;background:var(--amber);color:var(--ink);border-radius:var(--r-pill);padding:8px 15px;font:500 14px/1.35 var(--f-body)}
.launch-pill b{font-family:var(--f-mono);font-weight:600;letter-spacing:.04em}
.trust-row{display:flex;flex-wrap:wrap;gap:10px 20px;font-size:14px;color:var(--cream)}
.trust-row li{display:flex;align-items:center;gap:8px}
.trust-row svg{width:16px;height:16px;flex:none}

/* Buy card */
.buy-card{background:var(--white);color:var(--ink);border-radius:var(--r-card);padding:16px;display:grid;gap:10px;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.buy-card-title{font:500 19px/1.25 var(--f-display);letter-spacing:-.01em}
.buy-card-title span{font:400 14px/1 var(--f-body);color:var(--graphite);letter-spacing:0}
.plan,.addon{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;text-align:left;background:var(--white);border:1.5px solid var(--line);border-radius:14px;padding:9px 14px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.plan-only{grid-template-columns:minmax(0,1fr) auto;cursor:default;border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.plan-text{display:grid;gap:2px;min-width:0}
.plan-name{font-weight:600;font-size:15px;line-height:1.25}
.plan-sub{font-size:13px;color:var(--graphite);line-height:1.35}
.plan-price{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.plan-price b{font:500 19px/1 var(--f-mono)}
.plan-price s{font:400 14px/1 var(--f-mono);color:var(--graphite)}
.addon{border-style:dashed}
.addon:has(input:checked){border-style:solid;border-color:var(--ink)}
.addon input{width:20px;height:20px;margin:0;accent-color:var(--ink)}
.addon-price{font:500 15px/1 var(--f-mono)}
.buy-cta{width:100%;min-height:54px;font-size:17px}
.buy-cta .p{font-family:var(--f-mono);font-weight:500}
.buy-anchor{margin:0;font-size:14px;line-height:1.45;color:var(--graphite)}
.buy-anchor b{font-family:var(--f-mono);font-weight:500;color:var(--ink)}
.buy-anchor a{color:var(--teal-ink);font-weight:600;text-underline-offset:3px;white-space:nowrap}
.buy-note{text-align:center;font-size:13.5px;color:var(--graphite);line-height:1.4}
.batch-badge{justify-self:start;background:var(--ink);color:var(--cream);border-radius:var(--r-pill);padding:6px 12px;font:500 12px/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.plan-bonus{border-style:dashed;box-shadow:none;border-color:var(--line)}
.plan-bonus .plan-price b{color:var(--amber-ink)}
.buy-promise{display:flex;gap:8px;font-size:14px;line-height:1.45;color:var(--ink);font-weight:500}
.buy-promise::before{content:"✓";color:var(--amber-ink);font-weight:700}
.hero-stars{justify-self:start;color:var(--cream);font-size:14px;text-decoration:none;opacity:.95}
.hero-stars:hover{text-decoration:underline}
.hero-stars-icons{color:var(--amber);letter-spacing:2px}
.buy-card .short{display:none}

@media (max-width:1023px){
  .hero-media{position:relative;aspect-ratio:16/9}
  .hero-media img{object-position:76% 50%}
  .hero-media::after{background:linear-gradient(0deg,var(--ink) 0,rgba(28,36,48,0) 22%)}
  .hero-inner{display:block;min-height:0;padding-block:8px 48px}
  .hero-col{width:auto;max-width:640px}
}
/* Phones: headline, promise, price and Order Now on the first screen. The photo is cropped short,
   the launch pill is dropped (the announcement bar and the plan row already carry FIRST15),
   and the free-guide row moves below the button and the refund promise. */
@media (max-width:640px){
  .hero-media{aspect-ratio:2/1}
  .hero-media img{object-position:50% 40%}
  .hero-inner{padding-block:0 40px}
  .hero-col{gap:14px}
  .hero-copy{gap:10px}
  .hero h1{font-size:30px}
  .hero .lead-beats{font-size:19px;margin-bottom:4px}
  .launch-pill,.hero .kicker,.buy-card .long{display:none}
  .buy-card .short{display:inline}
  .buy-card{padding:14px}
  .buy-card .batch-badge{order:0}
  .buy-card .plan{order:1}
  .buy-card .buy-anchor{order:1}
  .buy-card .buy-cta{order:2}
  .buy-card .buy-promise{order:3}
  .buy-card .plan-bonus{order:4}
  .buy-card .buy-note{order:5}
  .plan,.addon{padding:12px;gap:10px}
}
@media (max-width:380px){
  .plan-price s{display:none}
}

/* ---------- Mechanism grid. .has-video adds a 9:16 video column on the left (not used yet). ---------- */
.mech{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.mech.has-video{grid-template-columns:minmax(0,.75fr) repeat(3,minmax(0,1fr))}
.mech-video{margin:0;border-radius:var(--r-card);overflow:hidden;aspect-ratio:9/16;background:var(--ink)}
.mech-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:26px 24px 28px;display:grid;gap:12px;align-content:start}
.mech-fig{font:500 clamp(30px,3.2vw,40px)/1 var(--f-mono);letter-spacing:-.03em;color:var(--teal-ink)}
.mech-fig small{font-size:.45em;letter-spacing:0;margin-left:.06em}
.mech-fig .plus{font-size:.6em;color:var(--graphite);margin:0 .1em}
.mech-card h3{font-size:22px;line-height:1.15;letter-spacing:-.01em}
.mech-card h3 span{display:block;font:500 12px/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--graphite);margin-top:6px}
.mech-card p:last-child{color:var(--graphite);font-size:16px}
@media (max-width:860px){ .mech,.mech.has-video{grid-template-columns:1fr} .mech-video{max-width:360px} }

/* ---------- Founders ---------- */
.founders{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,6vw,80px);align-items:center}
.founders-photo{margin:0;display:grid;gap:12px}
.founders-photo img{border-radius:24px;aspect-ratio:1/1;object-fit:cover;width:100%}
.founders-photo figcaption{font:500 13px/1.3 var(--f-mono);letter-spacing:.06em;color:var(--graphite)}
.founders-body{display:grid;gap:18px;max-width:60ch}
.founders-body p{color:var(--graphite)}
.founders-body .founders-lede{font:500 clamp(20px,2vw,24px)/1.35 var(--f-display);color:var(--ink)}
.founders-sign{font:500 20px/1 var(--f-display);color:var(--ink)!important}
@media (max-width:860px){ .founders{grid-template-columns:1fr} }

/* ---------- How it works: 3 steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:step}
.step{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:30px 28px 32px;display:grid;gap:14px;align-content:start;position:relative}
.step-top{display:flex;align-items:center;justify-content:space-between;color:var(--ink)}
.step-time{font:500 14px/1 var(--f-mono);color:var(--graphite);letter-spacing:.04em}
.step h3{font-size:28px}
.step p{color:var(--graphite);font-size:16.5px}
.steps-line{display:flex;align-items:center;gap:10px;margin-top:28px;color:var(--graphite);font-size:15px;justify-content:center;text-align:center}
@media (max-width:860px){ .steps{grid-template-columns:1fr} }

/* ---------- Benefit tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.tile{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:26px 24px 28px;display:grid;gap:14px;align-content:start}
.tile-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(63,167,156,.14);color:var(--teal-ink)}
.tile-icon svg{width:26px;height:26px}
.tile h3{font-size:21px;line-height:1.15;letter-spacing:-.01em}
.tile p{font-size:15px;color:var(--graphite)}
.tile .src{font:500 12px/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--teal-ink)}
.dual{margin-top:16px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center;background:var(--ink);color:var(--cream);border-radius:var(--r-card);padding:24px 28px}
.dual-badge{font:500 13px/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(237,238,234,.35);border-radius:var(--r-pill);padding:10px 16px;white-space:nowrap}
.dual p{font-size:16px}
.dual strong{font-weight:600}
@media (max-width:1000px){ .tiles{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .tiles{grid-template-columns:1fr} .dual{grid-template-columns:1fr} .dual-badge{justify-self:start;white-space:normal} }

/* ---------- Why this formula ---------- */
.formula{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(36px,6vw,80px);align-items:center}
.stat{display:grid;gap:10px}
.stat-num{font:400 clamp(96px,17vw,212px)/.86 var(--f-mono);letter-spacing:-.06em;color:var(--cream)}
.stat-num small{font-size:.32em;letter-spacing:-.02em;margin-left:.08em}
.stat-label{font:500 clamp(20px,2.2vw,26px)/1.25 var(--f-display);max-width:22ch}
.formula-copy{display:grid;gap:16px;margin-top:28px;max-width:52ch}
.formula-copy p{color:var(--cream)}
.supports{display:grid;gap:10px;margin-top:4px}
.supports li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;padding-bottom:10px;border-bottom:1px solid rgba(237,238,234,.2);color:var(--cream)}
.supports b{font-weight:500}
.supports span{font:400 12.5px/1.6 var(--f-mono);opacity:.8}
.panel{background:rgba(237,238,234,.08);border:1px solid rgba(237,238,234,.28);border-radius:var(--r-card);padding:8px 26px;backdrop-filter:blur(2px)}
.panel-head{display:flex;justify-content:space-between;font:500 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;padding:18px 0 14px;border-bottom:1px solid rgba(237,238,234,.4)}
.panel dl{margin:0}
.panel .row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px solid rgba(237,238,234,.18)}
.panel .row:last-child{border-bottom:0}
.panel dt{font-size:17px}
.panel dt small{display:block;font-size:13px;opacity:.85}
.panel dd{margin:0;font:500 22px/1 var(--f-mono);font-variant-numeric:tabular-nums}
.panel .row.lead-row dd{color:var(--cream)}
.panel-foot{font-size:13px;padding:14px 0 18px;border-top:1px solid rgba(237,238,234,.4)}
.panel-foot a{color:var(--cream)}
@media (max-width:900px){ .formula{grid-template-columns:1fr} }

/* ---------- Accordions (FAQ) ---------- */
.acc{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;font-weight:500}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";width:10px;height:10px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .2s;flex:none}
.acc[open] summary::after{transform:rotate(-135deg)}
.acc p{padding:0 0 18px;color:var(--graphite);font-size:15.5px}

/* ---------- Tastes like ---------- */
.flavours{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.flavour{display:grid;justify-items:center;text-align:center;gap:12px;padding:36px 20px 32px;border-radius:var(--r-card);background:var(--white);border:1px solid var(--line)}
.flavour .fruit{width:84px;height:84px;color:var(--teal-ink)}
.flavour h3{font-size:24px}
.flavour p{color:var(--graphite);font-size:15.5px;max-width:28ch}
.flavours-note{margin-top:22px;text-align:center;color:var(--graphite);font-size:15px}
@media (max-width:760px){ .flavours{grid-template-columns:1fr} .flavour{grid-template-columns:auto minmax(0,1fr);justify-items:start;text-align:left;padding:22px;column-gap:20px} .flavour .fruit{grid-row:span 2;width:64px;height:64px} }

/* ---------- Compare ---------- */
.tabs{display:inline-flex;background:var(--white);border:1px solid var(--line);border-radius:var(--r-pill);padding:4px;gap:4px;margin-bottom:24px}
.tabs button{border:0;background:none;border-radius:var(--r-pill);padding:10px 20px;cursor:pointer;font-weight:500;font-size:15px;color:var(--graphite)}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--cream)}
.table-wrap{overflow-x:auto;border-radius:var(--r-card);background:var(--white);border:1px solid var(--line)}
.compare{width:100%;border-collapse:collapse;min-width:520px}
.compare th,.compare td{padding:18px 22px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);font-size:15.5px}
.compare tr:last-child td,.compare tr:last-child th{border-bottom:0}
.compare thead th{font:500 13px/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}
.compare thead th.us{color:var(--ink)}
.compare tbody th{font-weight:500;width:28%;color:var(--ink)}
.compare td.us{background:rgba(63,167,156,.08);font-weight:500}
.compare td:not(.us){color:var(--graphite)}
.compare-foot{margin-top:14px;font-size:13px;color:var(--graphite)}

/* What people spend (#spend) */
.spend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.spend-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:24px;display:grid;gap:8px;align-content:start}
.spend-card h3{font:500 18px/1.3 var(--f-display);margin:0;color:var(--ink)}
.spend-card p{margin:0;color:var(--graphite);font-size:15.5px}
.spend-card .spend-price{font:500 clamp(28px,3vw,36px)/1.1 var(--f-mono);letter-spacing:-.03em;color:var(--ink);margin-top:6px}
.spend-card .spend-sub{font:500 13px/1.3 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--graphite)}
.spend-card.us{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal);background:rgba(63,167,156,.06)}
.spend-card.us p:not(.spend-price):not(.spend-sub){color:var(--ink)}
.spend-card .btn{justify-self:start;margin-top:8px}
@media (max-width:860px){ .spend{grid-template-columns:1fr} }

/* ---------- How to use ---------- */
.use{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.use li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:24px}
.use .fig{font:500 34px/1 var(--f-mono);letter-spacing:-.03em;color:var(--ink);min-width:3.2ch}
.use .fig small{font-size:15px;letter-spacing:0;color:var(--graphite)}
.use p{font-size:15.5px;color:var(--graphite)}
.use h3{font-size:19px;margin-bottom:4px;letter-spacing:-.01em}
@media (max-width:860px){ .use{grid-template-columns:1fr} }

/* ---------- Reviews (placeholder slots) ---------- */
.reviews-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.review{margin:0;background:var(--white);border-radius:var(--r-card);padding:26px;display:grid;gap:14px;border:1px solid var(--line)}
.review-stars{color:var(--amber-ink);letter-spacing:2px}
.review-title{font:500 19px/1.25 var(--f-display);letter-spacing:-.01em}
.review blockquote{margin:0;font-size:15.5px;color:var(--graphite)}
.review figcaption{font-size:14px;color:var(--graphite)}
.review.slot{border:2px dashed #B9C1BD;background:repeating-linear-gradient(135deg,var(--white) 0 14px,var(--paper) 14px 28px);color:var(--graphite)}
.slot-label{justify-self:start;font:600 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;background:var(--ink);color:var(--cream);border-radius:6px;padding:7px 9px}
@media (max-width:1000px){ .reviews-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .reviews-grid{grid-template-columns:1fr} }

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,6vw,80px);align-items:start}
.faq .head{position:sticky;top:110px}
.faq-list{border-top:1px solid var(--line)}
.faq-list .acc summary{font:500 18px/1.35 var(--f-display);padding:22px 0;letter-spacing:-.005em}
.faq-list .acc p{font-size:16px;max-width:62ch}
@media (max-width:860px){ .faq{grid-template-columns:1fr} .faq .head{position:static} }

/* ---------- Contact ---------- */
.contact{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,6vw,80px);align-items:start}
.contact .head{margin-bottom:0}
.contact-alt a,.contact-fine a{color:var(--teal-ink);font-weight:600;text-underline-offset:3px}
.contact-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(20px,3vw,32px);display:grid;gap:16px}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.contact-card label{display:grid;gap:6px;font-weight:500;font-size:15px;color:var(--ink)}
.contact-card input,.contact-card select,.contact-card textarea{font:400 16px/1.4 var(--f-body);color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-height:50px;width:100%}
.contact-card select{appearance:none;-webkit-appearance:none;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2359636E' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center;padding-right:36px}
.contact-card textarea{min-height:150px;resize:vertical}
.contact-card input:focus,.contact-card select:focus,.contact-card textarea:focus{outline:2px solid var(--teal-ink);outline-offset:1px;border-color:transparent}
.contact-card .btn{justify-self:start}
.contact-card .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{font-size:15px}
.form-status:empty{display:none}
.form-status.ok{color:var(--teal-ink);font-weight:500}
.form-status.err{color:#A4372A}
.form-status a{color:inherit;font-weight:600}
.contact-fine{font-size:13px;color:var(--graphite)}
@media (max-width:860px){ .contact{grid-template-columns:1fr} }
@media (max-width:560px){ .field-row{grid-template-columns:1fr} .contact-card .btn{justify-self:stretch} }

/* ---------- Closing CTA ---------- */
.closing{text-align:center}
.closing .inner{display:grid;justify-items:center;gap:22px;max-width:760px;margin-inline:auto}
.closing h2{font-size:clamp(40px,6.4vw,76px)}
.closing p{font-size:18px}
.closing .p{font-family:var(--f-mono)}
.closing p.closing-promise{font-size:15px;opacity:.9}

/* ---------- Guide signup (secondary) + footer ---------- */
.guide{background:var(--white);border-top:1px solid var(--line)}
.guide .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 48px;align-items:center;padding-block:36px}
.guide h2{font-size:22px;letter-spacing:-.01em}
.guide p{color:var(--graphite);font-size:15px;margin-top:4px}
.guide form{display:flex;flex-wrap:wrap;gap:10px}
.guide input{flex:1 1 220px;min-width:0;min-height:50px;padding:0 18px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--paper);font:16px var(--f-body);color:var(--ink)}
.guide button{min-height:50px;padding:0 22px;border:1px solid var(--ink);background:transparent;color:var(--ink);border-radius:var(--r-pill);font-weight:600;cursor:pointer}
.guide button:hover{background:var(--ink);color:var(--cream)}
.guide .guide-buy{display:inline-flex;align-items:center;gap:.3em;min-height:50px;padding:0 22px;border:1px solid var(--ink);color:var(--ink);border-radius:var(--r-pill);font-weight:600;text-decoration:none}
.guide .guide-buy:hover{background:var(--ink);color:var(--cream)}
.guide-actions{display:grid;gap:10px}
.guide .cs-msg{flex-basis:100%;margin:0;font-size:14px;min-height:1em}
.guide .cs-msg-err{color:#A4372A}
.guide .guide-or,.guide .guide-fine{margin:0;font-size:14px}
.guide .guide-or a,.guide .guide-fine a{color:var(--teal-ink);font-weight:600;text-underline-offset:3px}
.guide .guide-fine{font-size:13px}
.guide .cs-msg{flex-basis:100%;font-size:14px;min-height:1em}
.guide .cs-msg-err{color:#A3361F}
.guide .fine{font-size:13px;color:var(--graphite);flex-basis:100%}
.guide [data-signup-done] a{color:var(--teal-ink);font-weight:600}
@media (max-width:760px){ .guide .wrap{grid-template-columns:1fr} }

footer{background:var(--ink);color:var(--cream);padding-block:64px 40px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:36px}
footer .logo{color:var(--cream)}
footer .logo-mark path{stroke:var(--amber)}
.foot-brand p{margin-top:16px;font-size:15px;max-width:36ch;opacity:.85}
.foot-col{display:grid;gap:10px;align-content:start}
.foot-h{font:500 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;opacity:.7;margin-bottom:6px}
.foot-col a{text-decoration:none;font-size:15px;opacity:.9}
.foot-col a:hover{opacity:1;text-decoration:underline}
.foot-bottom{margin-top:48px;padding-top:24px;border-top:1px solid rgba(237,238,234,.18);display:grid;gap:10px;font-size:13px;opacity:.85}
@media (max-width:860px){ .foot-grid{grid-template-columns:1fr 1fr} .foot-brand{grid-column:1/-1} }

/* ---------- Sticky mobile buy bar ---------- */
.sticky-buy{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;align-items:center;justify-content:space-between;gap:14px;
  background:rgba(255,255,255,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);
  padding:12px var(--gutter-r) calc(12px + env(safe-area-inset-bottom,0px)) var(--gutter);transform:translateY(110%);transition:transform .3s ease}
.sticky-buy.show{transform:none}
.sticky-buy-label{display:grid;font-size:13px;color:var(--graphite);line-height:1.3}
.sticky-buy-label b{font:500 16px/1.2 var(--f-display);color:var(--ink)}
.sticky-buy-label .p{font-family:var(--f-mono);color:var(--ink)}
.sticky-buy .btn{min-height:48px;padding:0 24px}
@media (max-width:1023px){ .sticky-buy{display:flex} }

/* WhatsApp chat button. Sits above the sticky buy bar on smaller screens; icon only on phones. */
.wa-fab{position:fixed;right:var(--gutter-r);bottom:max(20px,env(safe-area-inset-bottom,0px));z-index:45;display:flex;align-items:center;gap:10px;
  background:#1F7A4D;color:#fff;text-decoration:none;border-radius:var(--r-pill);padding:12px 18px 12px 14px;font:500 15px/1 var(--f-body);box-shadow:var(--shadow)}
.wa-fab[hidden]{display:none}
.wa-fab svg{width:24px;height:24px;flex:none}
.wa-fab:hover{background:#18633E}
/* Phones and tablets: show it only while the sticky buy bar is up, so it never covers the hero Reserve button */
@media (max-width:1023px){ .wa-fab{bottom:calc(88px + env(safe-area-inset-bottom,0px))} .sticky-buy:not(.show) ~ .wa-fab{display:none} }
@media (max-width:640px){ .wa-fab{padding:13px} .wa-fab span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} }

/* ---------- Scroll reveal: content is visible at rest; JS adds .pre only when motion is allowed ---------- */
.reveal.pre{opacity:0;transform:translateY(18px)}
.reveal{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.reveal.pre{opacity:1;transform:none;transition:none}
  .btn,.sticky-buy{transition:none}
}