/*
 * Homepage scroll experience. Linked only by layouts/home.html.erb, after the
 * Tailwind bundle; every rule here is unlayered so it wins over Tailwind's
 * layered preflight without !important. Stage choreography lives in
 * app/javascript/home.js.
 */
:root{
  color-scheme:dark;
  --void:#040807; --deep:#08110E; --ink:#EAF2EE; --mute:#90A69D; --faint:rgba(234,242,238,.1);
  --em:#0F7A55; --em-hi:#38D9A3; --skin:#0F7A55;
  --glass:rgba(12,22,19,.58); --glass-line:rgba(234,242,238,.09);
  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gut:clamp(1.25rem,5vw,5.5rem);
  --nav-h:4.25rem;
}
*,*::before,*::after{box-sizing:border-box}
/* Third-party iframes (Freshdesk chat) render light documents. If the iframe
   inherits the page's dark scheme, Chrome paints an opaque white canvas behind
   it to avoid a scheme mismatch, which shows as a white box around the launcher. */
iframe{color-scheme:light}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--void);color:var(--ink);font:400 1.0625rem/1.6 var(--body);overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--em-hi);outline-offset:3px;border-radius:6px}
.skip{position:fixed;left:1rem;top:-4rem;z-index:100;background:var(--ink);color:var(--void);padding:.6rem 1rem;border-radius:8px}
.skip:focus{top:1rem}

/* stage layers */
.wash,#film,#gl,.geo{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
.wash{z-index:0;background:
  radial-gradient(120% 55% at 50% 112%,color-mix(in srgb,var(--skin) 20%,transparent),transparent 62%),
  var(--void)}
#film{z-index:0;opacity:0;transition:opacity .6s}
#film.on{opacity:1}
#gl{z-index:1;display:block}
.geo{z-index:2}
.no-gl .wash{background:
  radial-gradient(46% 42% at 72% 42%,color-mix(in srgb,var(--skin) 42%,transparent),transparent 70%),
  radial-gradient(120% 55% at 50% 112%,color-mix(in srgb,var(--skin) 20%,transparent),transparent 62%),var(--void)}
main,footer{position:relative;z-index:3}

/* nav */
.nav{position:fixed;z-index:20;inset:0 0 auto 0;height:var(--nav-h);display:flex;align-items:center;gap:2rem;padding:0 var(--gut);
  background:linear-gradient(to bottom,rgba(4,8,7,.82),rgba(4,8,7,0));}
.nav::after{content:"";position:absolute;inset:0;z-index:-1;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  mask:linear-gradient(to bottom,#000 40%,transparent);-webkit-mask:linear-gradient(to bottom,#000 40%,transparent)}
.logo{display:flex;align-items:center;color:var(--ink);text-decoration:none}
.logo svg{height:1.75rem;width:auto}
.nav nav{display:flex;gap:1.6rem;margin-left:auto}
.nav nav a,.nav .signin{background:none;border:0;padding:0;cursor:pointer;font-size:.92rem;color:var(--mute);text-decoration:none;transition:color .2s}
.nav nav a:hover,.nav .signin:hover{color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:1.25rem}
.nav-cta form{display:contents}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--glass-line);color:var(--ink);font:500 .9rem var(--body);padding:.5rem .9rem;border-radius:99px}

.btn{border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-height:3.4rem;padding:0 1.9rem;border-radius:99px;
  font:600 1.02rem/1 var(--body);text-decoration:none;color:#04110C;background:var(--em-hi);
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 14px 50px -12px color-mix(in srgb,var(--skin) 85%,transparent);
  transition:transform .2s,background .2s}
.btn:hover{transform:translateY(-1px);background:#5AE6B6}
.btn.sm{min-height:2.5rem;padding:0 1.15rem;font-size:.9rem;box-shadow:none}

/* sections */
.sec{position:relative;padding:0 var(--gut)}
.sec>.pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;align-items:center;padding-top:var(--nav-h)}
.col{width:min(35rem,100%)}
.L{justify-self:start}.R{justify-self:end}.C{justify-self:center;text-align:center}
h1,h2{font-family:var(--display);font-weight:500;letter-spacing:-.038em;line-height:.98;margin:0;text-wrap:balance;font-variation-settings:"opsz" 96}
h1{font-size:clamp(2.7rem,6.1vw,5.9rem)}
h2{font-size:clamp(2.2rem,4.5vw,4.2rem)}
.lede{color:var(--mute);font-size:clamp(1.05rem,1.25vw,1.22rem);max-width:31rem;margin:1.6rem 0 0}
.C .lede{margin-inline:auto}
.fade{opacity:0;transition:opacity 1s ease}
.in .fade{opacity:1}

/* 0 hero */
#s0{height:125vh}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin-top:2.4rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:2rem 0 0}
.chips li{font-size:.86rem;color:var(--ink);padding:.42rem .85rem;border-radius:99px;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hint{position:absolute;left:var(--gut);bottom:2rem;font-size:.8rem;color:var(--mute);display:flex;align-items:center;gap:.7rem}
.hint::before{content:"";width:1px;height:2.6rem;background:linear-gradient(var(--em-hi),transparent)}

/* 1 problem */
#s1{height:230vh}
.opts{margin:2.4rem 0 0;padding:0;list-style:none;display:grid;gap:1.1rem}
.opts li{padding-left:1.2rem;border-left:1px solid var(--faint);color:var(--mute);opacity:.35;transition:opacity .5s,border-color .5s,color .5s}
.opts li.on{opacity:1;color:var(--ink);border-color:var(--em-hi)}
.opts b{display:block;font:500 1.35rem/1.2 var(--display);letter-spacing:-.02em;color:inherit}
.fixed-it{margin-top:2rem;font:500 1.6rem/1.1 var(--display);letter-spacing:-.025em;color:var(--em-hi);opacity:0;transition:opacity .6s}
.fixed-it.on{opacity:1}

/* 2 tailor-made */
#s2{height:420vh}
#s2 h2{font-size:clamp(1.9rem,3.2vw,3rem)}
.wheel{position:relative;height:clamp(13rem,34vh,19rem);margin-top:2.2rem;overflow:hidden;
  mask:linear-gradient(transparent,#000 32%,#000 68%,transparent);-webkit-mask:linear-gradient(transparent,#000 32%,#000 68%,transparent)}
.wheel ol{--i:0;--h:clamp(3.4rem,8vh,4.8rem);list-style:none;margin:0;padding:0;position:absolute;left:0;right:0;top:calc(50% - var(--h)/2);
  transform:translateY(calc(var(--i)*var(--h)*-1));transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.wheel li{height:var(--h);display:flex;align-items:baseline;gap:1rem;opacity:.16;transition:opacity .4s}
.wheel li.on{opacity:1}
.wheel li b{font:500 clamp(2.2rem,4.6vw,3.9rem)/1 var(--display);letter-spacing:-.04em}
.wheel li.on b{color:color-mix(in srgb,var(--skin) 45%,#fff)}
.wheel li span{font-size:.95rem;color:var(--mute);opacity:0;transition:opacity .4s}
.wheel li.on span{opacity:1}

/* 3 thirty minutes */
#s3{height:420vh}
.timer{display:flex;align-items:baseline;gap:.8rem;margin-top:1.8rem;font-family:var(--display);font-variant-numeric:tabular-nums;letter-spacing:-.05em}
.timer output{font-size:clamp(4rem,9vw,8.2rem);font-weight:300;line-height:.9}
.timer small{font-size:1.05rem;color:var(--mute);letter-spacing:0}
.bar{height:2px;background:var(--faint);margin:1.4rem 0 1.6rem;display:grid;grid-template-columns:5fr 10fr 10fr 5fr;gap:3px}
.bar i{background:var(--faint);transform-origin:left;position:relative;overflow:hidden}
.bar i::after{content:"";position:absolute;inset:0;background:var(--em-hi);transform:scaleX(var(--f,0));transform-origin:left}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:.2rem}
.steps li{display:grid;grid-template-columns:4.2rem 1fr;gap:0 1rem;padding:.55rem 0;opacity:.32;transition:opacity .4s}
.steps li.on{opacity:1}
.steps time{font:500 .95rem/1.5 var(--display);color:var(--em-hi);font-variant-numeric:tabular-nums}
.steps b{font:500 1.12rem/1.35 var(--display);letter-spacing:-.015em}
.steps p{grid-column:2;margin:.15rem 0 0;font-size:.93rem;color:var(--mute);max-height:0;overflow:hidden;transition:max-height .5s}
.steps li.on p{max-height:4.5rem}

/* 4 everything included */
#s4{height:230vh}
#s4 .pin{grid-template-rows:auto 1fr auto;align-items:start;padding-bottom:5vh}
#s4 .col{width:min(52rem,100%);padding-top:5vh}
#s4 h2{font-size:clamp(2rem,3.6vw,3.4rem)}
.mods{grid-row:3;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;width:min(68rem,100%);justify-self:center}
.mods li{padding-top:1rem;border-top:1px solid var(--faint);opacity:.3;transition:opacity .5s,border-color .5s}
.mods li.on{opacity:1;border-color:var(--em-hi)}
.mods b{display:block;font:500 1.1rem/1.3 var(--display)}
.mods span{font-size:.9rem;color:var(--mute)}

/* 5 AI */
#s5{height:320vh}
.chat{margin-top:2rem;display:grid;gap:.7rem;font-size:.97rem}
.msg{padding:.9rem 1.1rem;border-radius:18px;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);max-width:30rem}
.msg.me{justify-self:end;background:color-mix(in srgb,var(--em) 38%,rgba(12,22,19,.6));border-bottom-right-radius:6px;min-height:3.2rem}
.msg.me .off{opacity:0}
.msg.me .caret{display:inline-block;width:2px;height:1.05em;background:var(--em-hi);vertical-align:-.15em;margin-left:1px}
.call,.msg.ai{opacity:0;transform:translateY(6px);transition:opacity .45s,transform .45s}
.call.on,.msg.ai.on{opacity:1;transform:none}
.call{display:flex;align-items:center;gap:.6rem;font-size:.88rem;color:var(--mute);padding-left:.4rem}
.call::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--em-hi);box-shadow:0 0 12px var(--em-hi)}
.call code{font:500 .85rem ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink)}
.msg.ai{border-bottom-left-radius:6px}
.more{display:inline-block;text-decoration:underline;margin-top:1.6rem;font-size:.95rem;color:var(--em-hi);text-underline-offset:4px}

/* 6 global */
#s6{height:280vh}
.facts{display:flex;gap:2.2rem;margin:2rem 0 0;padding:0;list-style:none}
.facts b{display:block;font:400 2.3rem/1 var(--display);letter-spacing:-.04em}
.facts span{font-size:.88rem;color:var(--mute)}
.city{position:absolute;left:0;top:0;opacity:0;transition:opacity .5s;white-space:nowrap;padding-left:.9rem;font-size:.84rem;line-height:1.25}
.city::before{content:"";position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--skin) 45%,transparent),0 0 22px var(--skin)}
.city[data-c="2"]{padding:0 .9rem 0 0;text-align:right}.city[data-c="2"]::before{left:auto;right:-4px}
.city b{display:block;font:500 1rem var(--display)}
.city span{color:var(--mute)}

/* 7 the number */
#s7{height:260vh}
#s7 .pin{--r:0;--q:0}
.numlead{font:400 clamp(1.05rem,1.5vw,1.35rem) var(--body);color:var(--mute);margin:0;opacity:calc(var(--r)*1)}
.num{margin:.1em 0 0;font:300 clamp(6.6rem,25vw,23rem)/.84 var(--display);letter-spacing:calc(-.065em + (1 - var(--r))*.05em);font-variation-settings:"opsz" 96;
  opacity:var(--r);transform:scale(calc(1.22 - var(--r)*.22));
  background:linear-gradient(180deg,#fff 18%,color-mix(in srgb,var(--em-hi) 80%,#fff) 58%,var(--em) 105%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 calc(var(--r)*70px) color-mix(in srgb,var(--em) 70%,transparent))}
.num span{font-size:.5em;letter-spacing:-.02em;margin-left:.04em}
.terms{display:flex;justify-content:center;gap:clamp(1.2rem,4vw,3.5rem);list-style:none;padding:0;margin:clamp(5rem,17vh,10rem) 0 0;opacity:var(--q);font:500 clamp(1rem,1.5vw,1.3rem) var(--display)}
.gate{margin:1.2rem auto 0;font-size:.85rem;color:var(--mute);opacity:var(--q);max-width:26rem}

/* 8 CTA + FAQ */
#s8{padding-top:22vh;padding-bottom:6rem}
#s8 .col{width:min(46rem,100%);margin-inline:auto}
#s8 h2{font-size:clamp(3rem,8vw,7.2rem)}
#s8 .btn{margin-top:2.4rem}
.faq{width:min(46rem,100%);margin:clamp(7rem,20vh,12rem) auto 0;padding:clamp(1.5rem,4vw,3rem);border-radius:28px;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
.faq h3{font:500 clamp(1.6rem,2.6vw,2.2rem)/1.05 var(--display);letter-spacing:-.03em;margin:0 0 1.2rem}
details{border-top:1px solid var(--faint)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;padding:1.15rem 0;font:500 1.08rem/1.35 var(--display)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--em-hi);font-weight:400;transition:transform .25s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:0 0 1.3rem;color:var(--mute);max-width:38rem}
.help{margin:1.5rem 0 0;padding-top:1.4rem;border-top:1px solid var(--faint);color:var(--mute);font-size:.95rem}
.help a{color:var(--em-hi);text-decoration:underline}

footer{padding:3.5rem var(--gut) 2.5rem;background:linear-gradient(transparent,rgba(4,8,7,.92) 30%);color:var(--mute);font-size:.9rem}
.foot{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:2rem;max-width:72rem;margin:0 auto}
.foot h4{margin:0 0 .8rem;font:500 .95rem var(--display);color:var(--ink)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.foot p{margin:1rem 0 0;max-width:22rem}
.foot a{text-decoration:none}.foot a:hover{color:var(--ink)}
.legal{max-width:72rem;margin:2.5rem auto 0;padding-top:1.4rem;border-top:1px solid var(--faint);display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between}
.legal nav{display:flex;gap:1.2rem}

/* loader */
#loader{position:fixed;inset:0;z-index:50;background:var(--void);display:grid;place-items:center;transition:opacity .9s ease .25s,visibility 0s 1.2s}
#loader output{font:300 clamp(7rem,26vw,20rem)/1 var(--display);letter-spacing:-.06em;font-variant-numeric:tabular-nums;color:var(--ink);transition:transform 1.15s cubic-bezier(.7,0,.2,1),opacity .9s ease .2s;will-change:transform}
#loader p{position:absolute;left:var(--gut);bottom:2rem;margin:0;font-size:.85rem;color:var(--mute)}
#loader .ln{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--em-hi);transform-origin:left;transform:scaleX(var(--p,0))}
.ready #loader{opacity:0;visibility:hidden}
.ready #loader output{transform:scale(16);opacity:0;color:var(--em-hi)}

/* mobile */
@media (max-width:820px){
  .nav nav,.nav-cta{display:none}
  .burger{display:block}
  .nav.open{height:auto;flex-wrap:wrap;padding-bottom:1.5rem;background:rgba(4,8,7,.96)}
  .nav.open nav,.nav.open .nav-cta{display:flex;flex-direction:column;align-items:flex-start;width:100%;margin:0;gap:1rem}
  .nav.open nav{padding-top:1rem}.nav.open nav a{font-size:1.1rem;color:var(--ink)}
  .sec>.pin{align-items:end;padding-bottom:6vh}
  .sec>.pin::before{content:"";position:absolute;inset:38% calc(var(--gut)*-1) 0;z-index:-1;background:linear-gradient(to top,rgba(4,8,7,.94) 45%,rgba(4,8,7,.6) 78%,transparent)}
  .L,.R,.C{justify-self:stretch}
  .hint{display:none}
  .lede{margin-top:1rem}
  .hero-cta{margin-top:1.5rem}.chips{margin-top:1.2rem}
  .opts{margin-top:1.4rem;gap:.8rem}.opts b{font-size:1.15rem}.opts li{font-size:.93rem}
  .wheel{height:9.5rem;margin-top:1rem}.wheel li span{display:none}
  .timer{margin-top:1rem}.bar{margin:1rem 0}.steps li{padding:.3rem 0}.steps p{font-size:.88rem}
  #s4 .pin{grid-template-rows:auto 1fr auto;align-items:start;padding-bottom:4vh}
  #s4 .pin::before{inset:70% calc(var(--gut)*-1) 0}
  #s4 .col{padding-top:2vh}#s4 .lede{display:none}
  .mods{grid-template-columns:1fr 1fr;gap:.8rem 1.2rem}.mods span{display:none}
  h2{font-size:clamp(1.9rem,8vw,2.6rem)}
  #s5 .lede{display:none}
  .chat{margin-top:1.1rem;font-size:.9rem}.msg{padding:.7rem .9rem}.more{margin-top:1rem}
  .facts{gap:1.4rem;margin-top:1.2rem}.facts b{font-size:1.8rem}
  #s7 .pin{align-items:center}#s7 .pin::before{display:none}
  .terms{flex-direction:column;gap:.4rem;align-items:center}
  .foot{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation:none!important}
  .ready #loader output{transform:none}
}