/* BuilderCult Launchpad · buildercult.com · v2
   Calm Slush: paper and sky, 1px black outlines, 20px cards, sun as the one action colour.
   Inter does the talking (800 for headings, sentence case); Anton only in the logo and inside the
   product's own UI. The story runs in four pinned scenes built from Launchpad's real screens
   (flow/flow.css); site.js drives them from scroll and turns them into a still page for reduced motion. */

:root{
  --ink:#000; --paper:#fff; --sky:#dceeff; --concrete:#cccccc; --mist:#f2f2ef;
  --blue:#4da2ff; --mint:#55db9c; --lav:#e9ccff; --ember:#fb4903; --sun:#ffd731; --violet:#5c4ade;
  --cream:#f3efe6; --muted:#4b4b4b; --ink2:#1a1a1a;
  --disp:'Anton',Impact,'Arial Narrow',sans-serif;
  --ui:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mark:'Permanent Marker',cursive;
  --pill:1600px; --r-card:20px;
  --gut:16px; --max:1200px; --nav-h:60px;
}
@media (min-width:700px){:root{--gut:28px}}
@media (min-width:1100px){:root{--gut:40px}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:70px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--ui);font-weight:400;font-size:17px;line-height:1.5;letter-spacing:-.011em;overflow-x:clip;-webkit-font-smoothing:antialiased}
img,video,svg,canvas{display:block;max-width:100%}
a{color:inherit}
button,input{font:inherit;color:inherit}
h1,h2,h3{margin:0}
p{margin:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.wrap{max-width:var(--max);margin:0 auto;position:relative;z-index:2}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.band.dark :focus-visible,.film :focus-visible,.foot :focus-visible,.nav.dark :focus-visible{outline-color:var(--sun)}
h1,h2,h3{text-wrap:balance}
p,summary{text-wrap:pretty}

/* ── type ── */
h1,h2{font-family:var(--disp);font-weight:400;text-transform:uppercase;letter-spacing:.015em;line-height:.98;color:var(--ink2)}
h1{font-size:clamp(40px,6.4vw,96px)}
h2{font-size:clamp(32px,4.2vw,64px)}
.label{display:inline-flex;align-items:center;gap:9px;margin:0 0 14px;font-weight:600;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.label .num{display:inline-grid;place-items:center;width:24px;height:24px;border:1px solid var(--ink);border-radius:50%;background:var(--sun);font-size:12px;letter-spacing:0}
.lede,.beat{font-size:clamp(16px,1.25vw,18px);line-height:1.5;color:var(--muted)}
.fine{font-size:13px;margin:12px 0 0;color:var(--muted)}

/* ── buttons · the sun pill with the black outline, as on Speedrun ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:11px 22px;border:1px solid var(--ink);border-radius:var(--pill);
  background:var(--paper);color:var(--ink);font-weight:700;font-size:14.5px;letter-spacing:-.005em;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .12s,box-shadow .12s,background .15s}
.btn.sun{background:var(--sun);box-shadow:0 3px 0 var(--ink)}
.btn.sun:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--ink)}
.btn.sun:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.btn.big{min-height:58px;padding:16px 30px;font-size:16px}
.btn[disabled]{opacity:.6;cursor:progress}

/* ── the lockup · Buildercult in marker over LAUNCHPAD, slanted, electric blue with speed trails ── */
.lockup{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1;user-select:none;text-decoration:none;--bc:15px;--lp:30px}
.lockup .bc{font-family:var(--mark);font-size:var(--bc);letter-spacing:.02em;color:var(--ink);transform:rotate(-2deg);margin-left:.1em}
.lockup .lpw{position:relative;font-family:var(--disp);font-style:italic;text-transform:uppercase;font-size:var(--lp);letter-spacing:-.02em;color:var(--sun);transform:skewX(-12deg);margin-top:.02em;margin-left:.22em;
  -webkit-text-stroke:.035em #000;paint-order:stroke fill;
  text-shadow:.05em .05em 0 #000,-.16em 0 0 rgba(255,215,49,.55),-.32em 0 0 rgba(255,215,49,.28),-.48em 0 0 rgba(255,215,49,.12)}
.lockup .lpw::after{content:'';position:absolute;left:.04em;right:-.08em;bottom:-.08em;height:.08em;background:var(--sun);border:1px solid #000;clip-path:polygon(0 0,100% 0,97% 100%,3% 100%)}
.on-dark .lockup .lpw,.foot .lockup .lpw{-webkit-text-stroke:0;text-shadow:-.12em 0 0 rgba(255,215,49,.42),-.24em 0 0 rgba(255,215,49,.22),-.36em 0 0 rgba(255,215,49,.1)}
.foot .lockup .lpw::after{border:0}
.lockup.sm{--bc:12px;--lp:23px}
/* at nav size the trails and the offset shadow smear into the letters: a clean outline only */
.lockup.sm .lpw{-webkit-text-stroke:.075em #000;text-shadow:none}
.lockup.sm .lpw::after{height:.075em;bottom:-.1em}
.nav.dark .lockup.sm .lpw{-webkit-text-stroke:0;text-shadow:none}
.lockup.big{--bc:clamp(17px,1.6vw,24px);--lp:clamp(44px,4.6vw,68px)}
.foot .lockup .bc{color:var(--cream)}
.lockup.foot-mark{--bc:clamp(18px,2.2vw,30px);--lp:clamp(54px,8vw,120px)}

/* ── nav · slim, plain links, one CTA ── */
.nav{position:fixed;left:0;right:0;top:0;z-index:50;height:var(--nav-h);background:transparent;border-bottom:1px solid transparent;transition:background .25s,border-color .25s}
.nav.solid{background:rgba(255,255,255,.94);border-bottom-color:rgba(0,0,0,.12);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.nav-in{display:flex;align-items:center;gap:28px;height:100%;max-width:calc(var(--max) + 2*var(--gut));margin:0 auto;padding:0 var(--gut)}
.links{display:none;gap:26px;margin-left:auto}
.links a{font-weight:500;font-size:15px;text-decoration:none;color:#222;padding:6px 0;border-bottom:1.5px solid transparent;transition:border-color .15s}
.links a:hover,.links a.on{border-bottom-color:var(--ink)}
.nav .cta{display:none;min-height:40px;padding:8px 18px;font-size:14px}
.plus{margin-left:auto;width:44px;height:44px;border:1px solid var(--ink);border-radius:50%;background:var(--paper);position:relative;cursor:pointer;flex:none}
.plus span{position:absolute;left:50%;top:50%;width:15px;height:1.5px;margin:-1px 0 0 -7.5px;background:var(--ink);transition:transform .25s}
.plus span+span{transform:rotate(90deg)}
.plus[aria-expanded="true"] span{transform:rotate(45deg)}.plus[aria-expanded="true"] span+span{transform:rotate(135deg)}
.menu{position:absolute;top:calc(100% + 6px);left:var(--gut);right:var(--gut);display:grid;gap:2px;padding:10px;border:1px solid var(--ink);border-radius:var(--r-card);background:var(--paper)}
.menu[hidden]{display:none}
.menu{box-shadow:0 18px 40px rgba(0,0,0,.18)}
.menu a:not(.btn){display:flex;align-items:center;min-height:48px;padding:0 12px;border-radius:12px;font-weight:600;font-size:16px;text-decoration:none;color:var(--ink)}
.menu a:not(.btn):hover{background:var(--mist)}
.menu a:not(.btn).on{background:var(--sky)}
.menu a:not(.btn):focus-visible{outline-offset:-2px}
.menu .btn{margin-top:8px;min-height:50px}
.nav.open{background:rgba(255,255,255,.97)}.nav.open.dark{background:rgba(11,11,15,.94)}
.nav.dark{background:rgba(11,11,15,.82);border-bottom-color:rgba(255,255,255,.08)}
.nav.dark .links a{color:#e9e6de}.nav.dark .links a:hover,.nav.dark .links a.on{border-bottom-color:var(--sun)}
.nav.dark .lockup .bc{color:var(--cream)}
.nav.dark .lockup .lpw{-webkit-text-stroke:0;text-shadow:-.12em 0 0 rgba(255,215,49,.42),-.24em 0 0 rgba(255,215,49,.22),-.36em 0 0 rgba(255,215,49,.1)}
.nav.dark .lockup .lpw::after{border:0}
.nav.dark .plus{background:transparent;border-color:#e9e6de}.nav.dark .plus span{background:#e9e6de}
@media (min-width:980px){.links{display:flex}.nav .cta{display:inline-flex}.plus,.menu{display:none!important}}

/* ── hero · exactly one screen ── */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;background:var(--sky);padding:calc(var(--nav-h) + 12px) var(--gut) 28px;overflow:clip}
.hero-grid{display:grid;gap:28px;align-items:center;width:100%;max-width:var(--max);margin:0 auto}
@media (min-width:980px){.hero-grid{grid-template-columns:1.05fr .95fr;gap:40px}}
.hero-mark{position:relative;display:inline-block;margin-bottom:22px}
.hero-mark .rocket{position:absolute;right:-58px;top:-12px;width:56px;height:auto;transform:rotate(18deg)}
.hero h1{white-space:nowrap}
.hero .sub{max-width:520px;margin-top:16px;font-size:clamp(16px,1.35vw,19px);line-height:1.5;color:var(--muted)}
.join{position:relative;display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;max-width:520px}
.join input[type=email]{flex:1 1 220px;min-width:0;min-height:50px;padding:12px 20px;border:1px solid var(--ink);border-radius:var(--pill);background:var(--paper);font-size:16px}
.join input[type=email]::placeholder{color:#6b6b6b}
.join input[type=email]{transition:box-shadow .15s}
.join input[type=email]:focus{outline:none;box-shadow:0 0 0 3px var(--sun),0 0 0 4px var(--ink)}
.btn:focus-visible{outline-offset:3px}
.join .btn{min-height:50px;flex:0 0 auto}
@media (max-width:440px){.join .btn{flex:1 1 100%}}
.join-msg{flex:1 1 100%;margin:4px 0 0 6px;min-height:1.2em;font-size:14px;font-weight:600}
.join-msg:empty{display:none}
.join-msg.err{color:#b32900}
.join.done input,.join.done .btn{display:none}
.join.done .join-msg{display:inline-flex;margin:0;padding:13px 20px;border:1px solid var(--ink);border-radius:var(--pill);background:var(--mint);font-size:15px}
.hero-phones{position:relative;height:min(64vh,560px);min-height:360px}
.hero-phones .pp{position:absolute;top:50%;left:50%;--w:clamp(150px,13.5vw,220px)}
.hero-phones .p1{transform:translate(-112%,-46%) rotate(-9deg)}
.hero-phones .p2{transform:translate(-50%,-52%) rotate(2deg);z-index:2}
.hero-phones .p3{transform:translate(12%,-42%) rotate(10deg)}
.hero-phones .pp .phone{--w:inherit}
@media (max-width:979px){
  .hero{justify-content:flex-start;padding-top:calc(var(--nav-h) + 22px);padding-bottom:0}
  .hero-mark{margin-bottom:16px}.hero-mark .rocket{width:44px;right:-48px}
  .hero-phones{height:300px;min-height:0;margin:6px calc(var(--gut)*-1) 0;overflow:hidden}
  .hero-phones .pp{top:22px;--w:min(36vw,170px)}
  .hero-phones .p1{transform:translate(-112%,0) rotate(-9deg)}.hero-phones .p2{transform:translate(-50%,-14px) rotate(2deg)}.hero-phones .p3{transform:translate(12%,8px) rotate(10deg)}
}
/* tablets (portrait): the copy and the fan sit centred in the screen, the phones bigger */
@media (min-width:700px) and (max-width:979px){
  .hero{justify-content:center;padding-bottom:28px}
  .hero-copy{max-width:600px}
  .hero-phones{height:min(44vh,440px)}
  .hero-phones .pp{--w:min(25vw,210px)}
}
.scroll-cue{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:none;align-items:center;gap:10px;font-size:13px;font-weight:600;text-decoration:none;color:#222}
.scroll-cue i{width:18px;height:28px;border:1.5px solid #222;border-radius:10px;position:relative}
.scroll-cue i::after{content:'';position:absolute;left:50%;top:5px;width:3px;height:6px;margin-left:-1.5px;border-radius:2px;background:#222;animation:cue 1.6s ease-in-out infinite}
@keyframes cue{50%{transform:translateY(7px);opacity:.3}}
@media (min-width:980px) and (min-height:760px){.scroll-cue{display:inline-flex}}

/* ── phone mockup ── */
.phone{--w:240px;width:var(--w);aspect-ratio:780/1688;border:1px solid var(--ink);border-radius:calc(var(--w)*.17);background:var(--ink);padding:calc(var(--w)*.035);position:relative;flex:none}
.phone .scr{position:relative;width:100%;height:100%;border-radius:calc(var(--w)*.14);overflow:hidden;background:#111;transform:translateZ(0)}
.phone video,.phone .scr img{width:100%;height:100%;object-fit:cover}
.phone .notch{position:absolute;top:calc(var(--w)*.055);left:50%;width:30%;height:calc(var(--w)*.075);margin-left:-15%;border-radius:var(--pill);background:var(--ink);z-index:2}

/* ── MCP · one line ── */
.mcp{padding:30px var(--gut);background:var(--mist);border-top:1px solid #e3e3e0;border-bottom:1px solid #e3e3e0}
.mcp-in{max-width:var(--max);margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px}
.mcp p{font-size:17px;max-width:680px}.mcp p b{font-weight:700}
.agents-row{display:flex;gap:8px;flex-wrap:wrap}
.agents-row span{padding:8px 14px;border:1px solid var(--ink);border-radius:var(--pill);background:var(--paper);font-weight:600;font-size:13.5px}

/* ── bands ── */
.band{position:relative;padding:clamp(80px,9vw,140px) var(--gut);overflow:clip}
.band.sky{background:var(--sky)}.band.white{background:var(--paper)}
.band.dark{background:#000;color:var(--cream)}
.gen-wrap{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.gen-wrap video{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s}
.gen-wrap video.on{opacity:1}.gen-wrap.dim video.on{opacity:.3}
.ribbon{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}

/* reveals (IntersectionObserver adds .in) */
.fade-up{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.fade-up.in{opacity:1;transform:none}
.line{display:block;overflow:hidden;padding-bottom:.04em}
.line>span{display:inline-block;transform:translateY(105%);transition:transform 1s cubic-bezier(.16,1,.3,1)}
[data-reveal].in .line>span{transform:none}
[data-reveal].in .line:nth-child(2)>span{transition-delay:.08s}[data-reveal].in .line:nth-child(3)>span{transition-delay:.16s}

/* ── speedrun · kept from v1 ── */
.speedrun{padding-top:clamp(100px,12vw,180px);padding-bottom:clamp(100px,12vw,180px)}
.sr-grid{display:grid;justify-items:center;text-align:center}
.lockup.srl{align-items:center;--bc:clamp(22px,3.2vw,40px);--sr:clamp(70px,15vw,220px)}
.lockup.srl .bc{color:var(--cream)}
.lockup .sr{position:relative;font-family:var(--disp);font-style:italic;text-transform:uppercase;font-size:var(--sr);letter-spacing:-.03em;color:var(--sun);transform:skewX(-14deg);margin-top:.02em;margin-left:.06em;
  text-shadow:-.12em 0 0 rgba(255,215,49,.42),-.24em 0 0 rgba(255,215,49,.22),-.36em 0 0 rgba(255,215,49,.10)}
.lockup .sr::after{content:'';position:absolute;left:.04em;right:-.1em;bottom:-.08em;height:.09em;background:var(--sun);clip-path:polygon(0 0,100% 0,96% 100%,4% 100%)}
.sr-head{margin:56px 0 0;font-family:var(--disp);font-weight:400;text-transform:uppercase;line-height:.86;font-size:clamp(36px,5.4vw,86px);max-width:1200px;color:var(--cream);letter-spacing:0}
.sr-body{max-width:640px;margin:28px auto 0;font-size:clamp(17px,1.5vw,21px);color:#cfcabe}
.perks{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:44px 0}
.perk{display:grid;justify-items:center;padding:18px 28px;border:1px solid var(--cream);border-radius:40px;min-width:200px}
.perk b{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:clamp(40px,4.4vw,64px);line-height:.95;color:var(--sun)}
.perk span{font-weight:700;font-size:12px;letter-spacing:.032em;text-transform:uppercase}
.speedrun .btn.sun{box-shadow:none}
.trails{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.trails i{position:absolute;left:0;height:2px;width:38%;background:var(--sun);opacity:.55;border-radius:2px;transform:translateX(-40vw);animation:trail 2.4s cubic-bezier(.55,0,1,.45) infinite}
.trails i:nth-child(1){top:18%}.trails i:nth-child(2){top:34%;height:3px;animation-delay:.7s;animation-duration:2.9s}.trails i:nth-child(3){top:61%;animation-delay:1.3s}.trails i:nth-child(4){top:77%;height:4px;animation-delay:.3s;animation-duration:3.3s}.trails i:nth-child(5){top:88%;animation-delay:1.9s}
@keyframes trail{0%{transform:translateX(-40vw)}60%,100%{transform:translateX(150vw)}}
@media (max-width:700px){.sr-head{font-size:clamp(30px,8.4vw,44px);line-height:.92}}

/* ── early access ── */
.early{text-align:center;--rib:clamp(140px,20vw,260px);padding-bottom:calc(var(--rib) + 8px)}
.early .ribbon{top:auto;bottom:0;height:var(--rib)}
.early-inner{display:grid;justify-items:center}
.early h2{font-size:clamp(36px,5vw,72px)}
.countdown{display:flex;gap:10px;margin:32px 0 8px}
.countdown div{display:grid;justify-items:center;min-width:92px;padding:12px 16px;border:1px solid var(--ink);border-radius:var(--r-card);background:var(--paper)}
.countdown b{font-weight:800;font-size:clamp(32px,3.6vw,48px);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.countdown span{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.join.big{max-width:620px;width:100%;margin-left:auto;margin-right:auto;justify-content:center}
.join.big input[type=email]{min-height:58px;font-size:17px}
.join.big .btn{min-height:58px;padding:14px 28px;font-size:16px}

/* ── faq ── */
.faq-grid{display:grid;gap:36px}
@media (min-width:980px){.faq-grid{grid-template-columns:.8fr 1.2fr;align-items:start}.faq-grid h2{position:sticky;top:110px}}
.faq h2{font-size:clamp(32px,4vw,56px)}
.qa{display:grid;gap:8px}
.qa details{border:1px solid var(--ink);border-radius:var(--r-card);background:var(--paper);transition:background .2s}
.qa details[open]{background:var(--sky)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px;font-weight:600;font-size:17px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:'+';flex:none;display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--ink);border-radius:50%;background:var(--paper);font-size:19px;line-height:1;transition:transform .25s}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa p{padding:0 20px 20px;max-width:680px;font-size:16px;color:#222}

/* ── footer ── */
.foot{background:#000;color:var(--cream);padding:64px var(--gut) 28px}
.foot-top{display:grid;gap:40px}
@media (min-width:900px){.foot-top{grid-template-columns:1.4fr 1fr;align-items:end}}
.foot-links{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.foot-links div{display:grid;gap:8px;align-content:start}
.foot-links b{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--sun)}
.foot-links a{text-decoration:none;font-size:15px;display:inline-flex;align-items:center;min-height:32px}
@media (max-width:699px){.foot-links div{gap:0}.foot-links a{min-height:44px}}.foot-links a:hover{text-decoration:underline}
.foot-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:52px;padding-top:18px;border-top:1px solid #333;font-size:13px;color:#a9a497}

/* still mode (prefers-reduced-motion) */
.still .fade-up{opacity:1;transform:none}
.still .line>span{transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .gen-wrap{display:none}
}