/* O5 theme. Engine lives in scrollcraft.css and is never edited. Palette: near-black neutral, warm off-white ink, ONE amber accent (from the logo sun). */
/* =====================================================================
   O5 THEME. Deep forest ground, bone ink, ONE amber accent.
   Colours come from the logo (sun peach, capybara brown, leaf green).
   Warm off-black + off-white text = low glare, easy on the eyes.
   ===================================================================== */
:root{
  --sc-canvas:#0B0B0C; --sc-surface:#141415;
  --sc-ink:#F5F4EF;    --sc-ink-soft:#A3A39D;
  --sc-accent:#EDB670; --sc-accent-ink:#1B1409;
  --sc-font-display:"Geist",system-ui,sans-serif;
  --sc-font-text:"Geist",system-ui,sans-serif;
  --sc-shadow-color:0 0% 0%;
  --far:#171A18; --mid:#111412; --ground:#0B0D0C; --front:#070808;
  --r:12px;
}
html{scroll-padding-top:72px}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}

/* ---------- chrome ---------- */
.site-bar{position:fixed;top:0;inset-inline:0;height:64px;z-index:var(--sc-z-chrome);display:flex;align-items:center;justify-content:space-between;padding-inline:var(--sc-gutter);background:color-mix(in oklab,var(--sc-canvas) 88%,transparent);border-bottom:1px solid var(--sc-hairline)}
.site-bar img{height:28px;width:auto}
.cta{display:inline-flex;align-items:center;gap:.6rem;padding:.95rem 1.6rem;background:var(--sc-accent);color:var(--sc-accent-ink);font-weight:600;font-size:var(--sc-t-base);line-height:1.1;text-decoration:none;border-radius:var(--r);white-space:nowrap;box-shadow:var(--sc-e2);transition:transform var(--sc-d-fast) var(--sc-ease-out),background var(--sc-d-fast) var(--sc-ease-out)}
.cta--sm{padding:.6rem 1.05rem;font-size:var(--sc-t-sm)}
.cta:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.cta:hover{background:#F6C98F}}
.cta__arrow{transition:transform var(--sc-d-fast) var(--sc-ease-out)}
@media (hover:hover){.cta:hover .cta__arrow{transform:translateX(3px)}}
.text-link{color:var(--sc-accent);text-underline-offset:.25em}

/* ---------- shared scene (hero + close) ---------- */
.scene{background:var(--sc-canvas)}
.layer{position:absolute;left:0;right:0;pointer-events:none}
.layer>*{display:block}
.sun{position:absolute;right:4vw;bottom:23vh;width:min(46vw,70vh);aspect-ratio:1;pointer-events:none}
.sun i{display:block;width:100%;height:100%;border-radius:50%;background:var(--sc-accent);opacity:.94}
.ridge{width:112%;margin-left:-6%;height:100%}
.far{bottom:24vh;height:34vh;translate:0 25px}
.mid{bottom:15vh;height:30vh;translate:0 50px}
.subject{bottom:0;height:24vh;translate:0 80px}
.subject__ground{position:absolute;left:-5%;right:-5%;top:0;bottom:-340px;background:var(--ground)}
.subject__capy{position:absolute;right:7vw;bottom:calc(100% - 10px);width:clamp(300px,45vw,780px);height:auto;max-width:none}
.front{bottom:0;height:60vh;translate:0 150px}
.front svg{position:absolute;bottom:0;height:100%;width:auto;fill:var(--front);filter:blur(1.5px)}
.front .fl{left:-2vw}
.front .fr{right:-9vw;height:62%;transform:scaleX(-1)}

/* ---------- hero copy ---------- */
.hero__copy{max-width:min(40rem,43vw)}
.hero__copy h1{font-family:var(--sc-font-display);font-weight:600;font-size:clamp(2.2rem,1rem + 4.2vw,5rem);line-height:1.02;letter-spacing:-.04em;text-wrap:balance}
.hero__copy .sc-body{margin-top:var(--sc-5);font-size:var(--sc-t-lg);color:#C8C8C2;max-width:34rem}
.hero__copy .cta{margin-top:var(--sc-6)}
.hero__micro{margin-top:var(--sc-4);font-size:var(--sc-t-sm);color:var(--sc-ink-soft)}

/* ---------- 2. cost ---------- */
.cost{background:var(--sc-canvas)}
.cost__grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.cost h2,.fit h2{font-family:var(--sc-font-display);font-weight:600;font-size:clamp(1.9rem,1rem + 2.7vw,3.5rem);line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.cost__list li{padding-block:var(--sc-6);border-top:1px solid var(--sc-hairline-strong)}
.cost__list li:last-child{border-bottom:1px solid var(--sc-hairline-strong)}
.cost__list h3{font-family:var(--sc-font-display);font-weight:600;font-size:var(--sc-t-xl);letter-spacing:-.02em;line-height:1.1}
.cost__list p{margin-top:var(--sc-2);color:var(--sc-ink-soft);max-width:44ch}
.cost__close{margin-top:var(--sc-8);font-family:var(--sc-font-display);font-size:var(--sc-t-xl);font-weight:500;letter-spacing:-.02em;max-width:26ch;color:var(--sc-accent)}

/* ---------- 3. how (pan) ---------- */
.how__stage{display:flex;align-items:center;background:var(--sc-surface)}
.rail{gap:clamp(2rem,5vw,5rem);padding-inline:var(--sc-gutter);align-items:center;height:100%}
.rail__lead{flex:0 0 min(30rem,80vw)}
.rail__lead h2{font-family:var(--sc-font-display);font-weight:600;font-size:clamp(2.1rem,1.2rem + 3.4vw,4.2rem);line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.step{flex:0 0 min(23rem,78vw)}
.step__art{display:block;width:100%;aspect-ratio:16/10;margin-bottom:var(--sc-5);background:var(--sc-canvas);border-radius:var(--sc-r-lg);border:1px solid var(--sc-hairline);padding:1.4rem;color:var(--sc-accent)}
.step__art svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.step h3{font-family:var(--sc-font-display);font-weight:600;font-size:var(--sc-t-2xl);letter-spacing:-.03em;line-height:1}
.step p{margin-top:var(--sc-3);color:var(--sc-ink-soft)}
.rail__end{flex:0 0 min(24rem,78vw)}
.rail__end p{font-family:var(--sc-font-display);font-size:var(--sc-t-xl);font-weight:500;letter-spacing:-.02em;line-height:1.15}
.rail__end p+p{margin-top:var(--sc-4);font-family:var(--sc-font-text);font-size:var(--sc-t-base);letter-spacing:0;color:var(--sc-ink-soft)}

/* ---------- 4. peak ---------- */
.peak__stage{background:var(--sc-canvas)}
.peak__sun{position:absolute;right:4vw;top:5vh;width:min(34vw,50vh);aspect-ratio:1;border-radius:50%;background:var(--sc-accent);opacity:0;transform:translate3d(0,30%,0) scale(.85);will-change:transform,opacity}
.peak__copy{position:absolute;z-index:var(--sc-z-copy);left:var(--sc-gutter);top:clamp(5.5rem,14vh,9rem);right:var(--sc-gutter);pointer-events:none}
.peak__copy > *{position:absolute;left:0;top:0;max-width:min(40rem,88vw)}
.peak__copy h2{font-family:var(--sc-font-display);font-weight:600;font-size:clamp(2rem,1rem + 3.6vw,4.4rem);line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.peak__copy .final{font-size:clamp(3rem,1rem + 6vw,7rem);color:var(--sc-accent);letter-spacing:-.045em}
.chart{position:absolute;left:var(--sc-gutter);right:var(--sc-gutter);bottom:clamp(4rem,11vh,7rem)}
.chart svg{width:100%;height:auto;max-height:52vh}
.chart .base{stroke:var(--sc-hairline-strong);stroke-width:1.5}
.chart__grey,.chart__amber{fill:none;stroke-linecap:round;stroke-linejoin:round}
.chart__grey{stroke:color-mix(in oklab,var(--sc-ink) 46%,var(--sc-canvas));stroke-width:3.5}
.chart__amber{stroke:var(--sc-accent);stroke-width:6}
.chart__dot{fill:var(--sc-canvas);stroke:var(--sc-accent);stroke-width:4;opacity:0;transition:opacity 260ms var(--sc-ease-out)}
.chart__cap{display:flex;justify-content:space-between;gap:1rem;margin-top:var(--sc-3);font-size:var(--sc-t-xs);color:var(--sc-ink-soft);flex-wrap:wrap}

/* ---------- 5. you vs O5 ---------- */
.split{background:var(--sc-surface)}
.split__grid{display:grid;grid-template-columns:5fr 6fr;gap:clamp(2rem,7vw,7rem);align-items:start}
.split__left{position:sticky;top:6.5rem}
.split h2.split__big{font-family:var(--sc-font-display);font-weight:600;font-size:clamp(4.5rem,2rem + 11vw,11rem);line-height:.9;letter-spacing:-.05em;color:var(--sc-accent);font-variant-numeric:tabular-nums}
.split__big small{font-size:.32em;letter-spacing:-.02em;margin-left:.15em;color:var(--sc-ink)}
.split__left p{margin-top:var(--sc-4);max-width:32ch;color:var(--sc-ink-soft);font-size:var(--sc-t-lg);line-height:1.4}
.split__left .sc-label{margin-bottom:var(--sc-3)}
.split__right .sc-label{margin-bottom:var(--sc-4)}
.split__right li{padding-block:var(--sc-4);border-top:1px solid var(--sc-hairline-strong);font-family:var(--sc-font-display);font-weight:500;font-size:var(--sc-t-xl);letter-spacing:-.02em;line-height:1.1}
.split__right li:last-child{border-bottom:1px solid var(--sc-hairline-strong)}

/* ---------- 6. offer ---------- */
.offer__stage{background:var(--sc-canvas)}
.offer__cues{position:absolute;left:var(--sc-gutter);top:50%;translate:0 -50%;width:min(44rem,88vw);height:22rem}
.offer__cue{position:absolute;left:0;top:0;right:0}
.offer__cue h2{font-family:var(--sc-font-display);font-weight:600;font-size:clamp(2rem,1rem + 3.4vw,4.2rem);line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.offer__cue p{margin-top:var(--sc-4);color:var(--sc-ink-soft);font-size:var(--sc-t-lg);line-height:1.4;max-width:34ch}
.offer__price{font-family:var(--sc-font-display);font-weight:600;font-size:clamp(4.5rem,2rem + 11vw,11rem);line-height:.9;letter-spacing:-.05em;color:var(--sc-accent)}
.offer__price s{font-size:.28em;color:var(--sc-ink-soft);letter-spacing:-.02em;margin-left:.3em;text-decoration-thickness:2px;font-weight:500}
.offer__eg{font-size:var(--sc-t-sm);color:var(--sc-ink-soft);margin-top:var(--sc-4);max-width:44ch}
.offer__cue .cta{margin-top:var(--sc-5)}
.spots{position:absolute;right:var(--sc-gutter);top:50%;translate:0 -50%;text-align:right}
.spots__row{display:flex;gap:var(--sc-3);justify-content:flex-end}
.spots__box{width:clamp(3rem,6vw,5.5rem);aspect-ratio:1;border-radius:var(--r);background:var(--sc-accent);box-shadow:var(--sc-e2)}
.spots p{margin-top:var(--sc-4);color:var(--sc-ink-soft);font-size:var(--sc-t-sm)}
.spots p b{display:block;color:var(--sc-ink);font-family:var(--sc-font-display);font-weight:600;font-size:var(--sc-t-xl);letter-spacing:-.02em}

/* ---------- 7. fit + faq ---------- */
.fit{background:var(--sc-canvas)}
.fit__grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.fit__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem)}
.fit__cols h3{font-size:var(--sc-t-xs);font-family:var(--sc-font-mono);letter-spacing:var(--sc-track-wide);text-transform:uppercase;color:var(--sc-ink-soft);font-weight:500;margin-bottom:var(--sc-3)}
.fit__cols li{padding-block:var(--sc-3);border-top:1px solid var(--sc-hairline-strong)}
.fit__cols li span{display:block;margin-top:.2rem;font-size:var(--sc-t-sm);color:var(--sc-ink-soft)}
.faq{margin-top:var(--sc-10);display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.faq h2{font-size:clamp(1.8rem,1.2rem + 2.4vw,3rem)}
details{border-top:1px solid var(--sc-hairline-strong)}
details:last-child{border-bottom:1px solid var(--sc-hairline-strong)}
summary{list-style:none;cursor:pointer;padding:var(--sc-5) 2.5rem var(--sc-5) 0;font-family:var(--sc-font-display);font-weight:500;font-size:var(--sc-t-lg);letter-spacing:-.015em;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:.2rem;top:50%;translate:0 -50%;font-size:1.8rem;font-weight:400;color:var(--sc-accent);transition:transform var(--sc-d-base) var(--sc-ease-out)}
details[open] summary::after{transform:rotate(45deg)}
details p{padding-bottom:var(--sc-5);color:var(--sc-ink-soft);max-width:52ch}

/* ---------- 8. close ---------- */
.close .sun{bottom:22vh}
.close__inner{position:absolute;z-index:var(--sc-z-copy);left:var(--sc-gutter);bottom:clamp(6rem,17vh,10rem);max-width:min(40rem,54vw)}
.close__inner h2{font-family:var(--sc-font-display);font-weight:600;font-size:clamp(2rem,1rem + 3.4vw,4.4rem);line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
.close__inner .sc-body{margin-top:var(--sc-4);font-size:var(--sc-t-lg);color:#C8C8C2}
.close__inner .cta{margin-top:var(--sc-6)}
.foot{position:absolute;z-index:var(--sc-z-copy);left:var(--sc-gutter);right:var(--sc-gutter);bottom:1.25rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.4rem 1.5rem;font-size:var(--sc-t-xs);color:var(--sc-ink-soft)}
.foot a{color:var(--sc-ink)}

/* ---------- phones ---------- */
@media (max-width:860px){
  .sun{right:-4vw;bottom:auto;top:11svh;width:68vw}
  .far{bottom:44svh;height:20svh}
  .mid{bottom:40svh;height:18svh}
  .subject{height:46svh}
  .subject__capy{right:4vw;width:62vw}
  .front{height:30svh}
  .hero__copy h1{font-size:clamp(2.1rem,1.3rem + 3.6vw,3rem)}
  .hero__copy .sc-body{font-size:var(--sc-t-base);margin-top:var(--sc-3)}
  .cost__grid,.split__grid,.fit__grid,.faq,.fit__cols{grid-template-columns:1fr}
  .split__left{position:static}
  .peak__sun{top:auto;bottom:36vh;width:56vw;right:-8vw}
  .chart svg{max-height:none}
  .offer__cues{top:24%;translate:none;height:20rem}
  .spots{top:auto;bottom:3.5rem;right:auto;left:var(--sc-gutter);text-align:left}
  .spots__row{justify-content:flex-start}
  .close__inner{max-width:none;right:var(--sc-gutter)}
  .close .sun{top:6svh;bottom:auto}
  .close .subject{height:56svh}
  .close .far{bottom:54svh}
  .close .mid{bottom:50svh}
  .close__inner{bottom:4.25rem}
}
@media (max-width:520px){
  .site-bar img{height:24px}
  .cta{padding:.9rem 1.3rem}
  .site-bar .cta--sm{padding:.55rem .95rem}
  .offer__cues{height:23rem}
}
@media (prefers-reduced-motion:reduce){
  .peak__sun{opacity:1;transform:none}
  .chart__dot{opacity:1}
}


/* ---------- v2 additions ---------- */
.skip{position:fixed;left:1rem;top:-4rem;z-index:999;background:var(--sc-accent);color:var(--sc-accent-ink);padding:.6rem 1rem;border-radius:8px;font-weight:600;transition:top .2s}
.skip:focus{top:.75rem}
.site-bar__nav{display:flex;gap:clamp(1rem,2.4vw,2.2rem);margin-left:auto;margin-right:clamp(1rem,2.4vw,2rem)}
.site-bar__nav a{color:var(--sc-ink-soft);font-size:var(--sc-t-sm);text-decoration:none;transition:color .2s}
@media (hover:hover){.site-bar__nav a:hover{color:var(--sc-ink)}}
@media (max-width:860px){.site-bar__nav{display:none}}
.site-bar{backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px)}

/* hero on video */
.hero .sc-copy--center{width:min(60rem,90vw);text-align:center}
.hero__copy{max-width:none}
.hero__copy .sc-body{margin-inline:auto}
.hero .hero__actions{display:flex;justify-content:center;margin-top:var(--sc-6)}
.hero .hero__copy .cta{margin-top:0}
.hero .hero__micro{text-align:center}
.tag{display:inline-block;margin-bottom:var(--sc-4);font-size:var(--sc-t-sm);color:var(--sc-ink-soft);letter-spacing:.01em}

/* statement over video (dawn) */
.dawn__copy{width:min(56rem,88vw);text-align:center}
.dawn__copy h2{font-family:var(--sc-font-display);font-weight:600;font-size:clamp(2.1rem,1rem + 4vw,4.6rem);line-height:1.03;letter-spacing:-.04em;text-wrap:balance}
.dawn__copy p{margin-top:var(--sc-4);color:#C8C8C2;font-size:var(--sc-t-lg)}
.sc-scrim--vig{background:radial-gradient(ellipse at center,rgba(11,11,12,.55),rgba(11,11,12,.15) 70%)}

/* legal strip inside close footer */
.foot{flex-direction:column;align-items:flex-start;gap:.5rem}
.foot__row{display:flex;flex-wrap:wrap;gap:.35rem 1.4rem;align-items:center}
.foot__legal{max-width:70ch;line-height:1.45}
.foot a{text-underline-offset:.2em}

/* cookie notice (only rendered when COOKIE_BANNER = true in config.js) */
.cookie{position:fixed;z-index:var(--sc-z-chrome);left:var(--sc-gutter);right:var(--sc-gutter);bottom:1rem;max-width:34rem;background:var(--sc-surface);border:1px solid var(--sc-hairline-strong);border-radius:14px;padding:1rem 1.1rem;font-size:var(--sc-t-sm);color:var(--sc-ink-soft);box-shadow:var(--sc-e2);display:none}
.cookie.is-on{display:block}
.cookie a{color:var(--sc-ink)}
.cookie__btns{display:flex;gap:.6rem;margin-top:.8rem}
.cookie button{font:inherit;cursor:pointer;border-radius:10px;padding:.5rem .9rem;border:1px solid var(--sc-hairline-strong);background:transparent;color:var(--sc-ink)}
.cookie button.yes{background:var(--sc-accent);color:var(--sc-accent-ink);border-color:transparent;font-weight:600}
:focus-visible{outline:2px solid var(--sc-accent);outline-offset:3px}

/* ---------- v3: phone fixes, speed, no-price offer ---------- */
.offer__price small{font-size:.28em;color:var(--sc-ink-soft);letter-spacing:-.02em;margin-left:.2em;font-weight:500}
.site-bar{padding-left:max(var(--sc-gutter),env(safe-area-inset-left));padding-right:max(var(--sc-gutter),env(safe-area-inset-right))}
@media (max-width:860px){
  /* the engine anchors copy to both gutters on phones, but the centred variant kept its -50% shift, pushing text off the left edge. Re-anchor it properly. */
  .sc-copy--center,.hero .sc-copy--center,.sc-copy--center.dawn__copy{left:var(--sc-gutter);right:var(--sc-gutter);width:auto;translate:0 -50%}
  .hero__copy h1{text-wrap:balance;overflow-wrap:break-word}
  .hero .sc-scrim--vig{background:linear-gradient(to bottom,rgba(11,11,12,.62),rgba(11,11,12,.42) 45%,rgba(11,11,12,.7))}
  .dawn__copy h2{font-size:clamp(2rem,1.2rem + 4vw,3rem)}
  .sc-scrim--vig{background:linear-gradient(to bottom,rgba(11,11,12,.45),rgba(11,11,12,.3) 50%,rgba(11,11,12,.6))}
  .offer__price{font-size:clamp(4rem,2rem + 14vw,7rem)}
  .fit__cols{gap:var(--sc-6)}
  summary{padding-block:var(--sc-4)}
}

/* phones: the three steps stack vertically instead of sliding sideways (no clipped cards, no swipe trap) */
@media (max-width:860px){
  #how{height:auto!important}
  #how [data-sc-stage]{position:sticky!important;top:auto!important;height:auto!important;overflow:visible!important;display:block;padding-block:clamp(4rem,10vh,6rem)}
  #how .rail{display:flex;flex-direction:column;align-items:stretch;gap:clamp(2.5rem,7vh,3.5rem);transform:none!important;height:auto;padding-inline:var(--sc-gutter)}
  #how .rail__lead,#how .step,#how .rail__end{flex:none;width:100%;max-width:34rem}
  #how .step__art{max-width:22rem}
}
@media (max-width:520px){
  .peak__copy .final{font-size:clamp(2.4rem,11vw,3.2rem)}
}

/* ---------- v4: iOS-safe mobile layout ---------- */
@media (max-width:860px){
  .sc-copy--center,.hero .sc-copy--center,.sc-copy--center.dawn__copy{left:var(--sc-gutter)!important;right:var(--sc-gutter)!important;width:auto!important;max-width:none!important;translate:none!important;top:auto!important;bottom:auto!important;margin:0}
  .hero .sc-copy--center{top:18svh!important}
  .dawn__copy.sc-copy--center{top:50%!important;margin-top:-6rem}
  .hero__copy,.hero__copy h1,.hero__copy .sc-body{max-width:100%;box-sizing:border-box}
  .close{display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--sc-gutter) 1rem;box-sizing:border-box}
  .close__inner,.foot{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;width:100%;max-width:none}
  .close__inner{margin-bottom:1.5rem}
  .close__inner h2{font-size:clamp(1.8rem,1.2rem + 3.6vw,2.6rem)}
  .close .subject{height:34svh}
  .close .subject__capy{width:40vw;right:4vw}
  .close .far{bottom:32svh}.close .mid{bottom:29svh}
  .close .sun{top:5svh}
}
@media (max-width:860px){
  .close .subject{top:17svh!important;bottom:auto!important;height:0!important}
  .close .far,.close .mid,.close .front{display:none}
  .close .sc-body{font-size:var(--sc-t-base)}
}