/* ═══════════════════════════════════════════════════════════════
   LaunchPad — styles.css
   Design system matching the inline styles on secondary pages.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --canvas:oklch(97.4% 0.004 265);
  --canvas-2:oklch(94.2% 0.007 265);
  --surface:oklch(99.4% 0.002 265);
  --ink:oklch(19% 0.022 265);
  --ink-2:oklch(43% 0.018 265);
  --ink-3:oklch(59% 0.014 265);
  --rule:oklch(89% 0.008 265);
  --rule-2:oklch(82% 0.011 265);
  --lime:oklch(88.5% 0.195 122);
  --lime-deep:oklch(76% 0.19 128);
  --lime-soft:oklch(95.5% 0.075 122);
  --on-lime:oklch(21% 0.06 128);
  --alert:oklch(62% 0.24 28);
  --disp:"Bricolage Grotesque",sans-serif;
  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --ease:cubic-bezier(0.22,1,0.36,1);
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-6:24px; --sp-8:32px; --sp-12:48px; --sp-16:64px; --sp-24:96px;
}

/* ── reset ── */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4{margin:0;font-family:var(--disp);font-weight:800;letter-spacing:-.035em;line-height:1.12;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--ink);text-underline-offset:3px}
img{max-width:100%;height:auto}

/* ── layout ── */
.wrap{width:min(1160px,100% - 40px);margin-inline:auto}
.narrow{width:min(730px,100% - 40px);margin-inline:auto}

/* ── typography ── */
.eyebrow{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3)}
.display{font-size:clamp(2.6rem,6vw,4.2rem);letter-spacing:-.045em;line-height:1.04}
.hl{background-image:linear-gradient(var(--lime),var(--lime));background-repeat:no-repeat;background-size:100% 40%;background-position:0 84%;padding:0 .06em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.lede{font-size:1.15rem;color:var(--ink-2);margin-top:20px;max-width:58ch}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── nav ── */
.nav{border-bottom:1px solid var(--rule);background:var(--canvas);position:sticky;top:0;z-index:20;transition:box-shadow .3s var(--ease)}
.nav.stuck{box-shadow:0 1px 12px rgba(0,0,0,.06)}
.nav-in{display:flex;align-items:center;height:68px;gap:24px}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:800;letter-spacing:-.04em;font-size:1.14rem;text-decoration:none;color:var(--ink)}
.nav-links{display:flex;align-items:center;gap:22px;margin-left:auto}
.nav-links a{text-decoration:none;color:var(--ink-2);font-size:.92rem;font-weight:500}
.nav-links a:hover{color:var(--ink)}
.nav-links a:last-child{margin-left:4px}
@media(max-width:840px){.nav-links a:not(.btn){display:none}}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font:600 .96rem/1 var(--sans);padding:16px 24px;border-radius:10px;border:1.5px solid transparent;cursor:pointer;text-decoration:none;min-height:50px;transition:all .16s var(--ease)}
.btn-primary{background:var(--ink);color:var(--canvas);border-color:var(--ink)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-lime{background:var(--lime);color:var(--on-lime);border-color:var(--lime)}
.btn-lime:hover{background:var(--lime-deep);transform:translateY(-1px)}
.btn-ghost{border-color:var(--rule-2);color:var(--ink)}
.btn-ghost:hover{background:var(--surface);border-color:var(--ink-3)}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--lime-deep);outline-offset:3px}
.sr:focus{position:absolute;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;top:10px;left:10px;z-index:1000;background:var(--lime);color:var(--on-lime);padding:8px 12px;border-radius:4px;font:600 .9rem var(--sans)}
.textbtn{background:none;border:none;color:var(--ink-2);font:500 .9rem/1 var(--sans);cursor:pointer;padding:8px 4px;transition:color .15s}
.textbtn:hover{color:var(--ink)}

/* ── hero ── */
.hero{padding:var(--sp-16) 0 var(--sp-24)}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
@media(max-width:920px){.hero-grid{grid-template-columns:1fr;gap:40px}}

/* ── tag ── */
.tag{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:600;color:var(--ink-2);background:var(--surface);border:1px solid var(--rule);border-radius:999px;padding:7px 14px}
.pip{width:7px;height:7px;border-radius:50%;background:var(--lime-deep);display:inline-block;animation:pulse-soft 2.4s ease-in-out infinite}
@keyframes pulse-soft{0%,100%{opacity:1}50%{opacity:.35}}

/* ── hero facts ── */
.hero-facts{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:28px}
.fact{font-size:.84rem;color:var(--ink-3);font-weight:500}
.fact::before{content:"✓ ";color:var(--lime-deep);font-weight:700}

/* ── demo phone ── */
.demo{
  border-radius:18px;
  background:var(--surface);
  border:1px solid var(--rule-2);
  box-shadow:0 8px 40px rgba(0,0,0,.06);
  overflow:hidden;
  font-size:.92rem;
}
.demo-bar{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--rule);background:var(--canvas-2)}
.lights{display:flex;gap:7px}
.lights i{width:11px;height:11px;border-radius:50%;display:block}
.lights i:nth-child(1){background:oklch(70% 0.19 22)}
.lights i:nth-child(2){background:oklch(78% 0.16 68)}
.lights i:nth-child(3){background:oklch(72% 0.17 142)}
.tmr{margin-left:auto;font-variant-numeric:tabular-nums;font-size:.82rem;color:var(--ink-3);font-weight:500}
.ttl{font-size:.82rem;color:var(--ink-3);font-weight:600}

/* ── demo body states ── */
.demo-body{padding:28px 24px;min-height:340px;display:flex;flex-direction:column}
.ask{font-family:var(--disp);font-size:1.4rem;font-weight:700;letter-spacing:-.025em;margin-bottom:16px}
.inrow{display:flex;gap:8px;margin-bottom:14px}
.inrow input{
  flex:1;
  font:inherit;
  padding:14px 16px;
  border:1.5px solid var(--rule-2);
  border-radius:10px;
  background:var(--canvas);
  color:var(--ink);
  transition:border-color .2s;
}
.inrow input:focus{outline:none;border-color:var(--ink-3)}
.hint{font-size:.82rem;color:var(--ink-3);margin-top:14px;line-height:1.5}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.chip{
  font:500 .82rem/1 var(--sans);
  padding:8px 14px;
  border:1px solid var(--rule-2);
  border-radius:999px;
  background:var(--canvas);
  color:var(--ink-2);
  cursor:pointer;
  transition:all .15s;
}
.chip:hover{border-color:var(--ink-3);color:var(--ink)}
.resume{display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid var(--lime);border-radius:10px;background:var(--lime-soft);margin-bottom:14px}
.resume span{font-size:.86rem;color:var(--ink-2)}
.resume b{color:var(--ink)}
.resume button{font:600 .84rem/1 var(--sans);background:var(--ink);color:var(--canvas);border:none;border-radius:8px;padding:8px 14px;cursor:pointer;margin-left:auto}

/* ── thinking animation ── */
.thinking{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;flex:1}
.bars{display:flex;gap:5px}
.bars i{width:5px;height:26px;border-radius:3px;background:var(--lime-deep);animation:bars 1s ease-in-out infinite;animation-delay:calc(var(--n)*.12s)}
@keyframes bars{0%,100%{height:8px;opacity:.3}50%{height:26px;opacity:1}}
.lbl{font-size:.86rem;color:var(--ink-3)}

/* ── step display ── */
.stepwrap{display:flex;flex-direction:column;flex:1}
.prog{display:flex;gap:5px;margin-bottom:18px}
.prog i{flex:1;height:5px;border-radius:3px;background:var(--rule-2);transition:background .3s}
.prog i.done{background:var(--lime-deep)}
.prog i.now{background:var(--lime)}
.stepmeta{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.of{font-size:.84rem;color:var(--ink-3);font-weight:600}
.est{font-size:.84rem;color:var(--ink-3)}
.steptext{font-size:1.25rem;font-family:var(--disp);font-weight:700;letter-spacing:-.02em;line-height:1.3;flex:1;display:flex;align-items:center}
.stepbtns{display:flex;align-items:center;gap:12px;margin-top:24px}

/* ── done screen ── */
.done-screen{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1;justify-content:center;padding:20px 0}
.done-mark{font-size:3rem;line-height:1;margin-bottom:16px}
.done-screen h3{font-size:1.6rem;letter-spacing:-.03em}
.done-stats{display:flex;gap:32px;margin-top:28px}
.done-stats div{display:flex;flex-direction:column;align-items:center}
.done-stats span{font-family:var(--disp);font-size:2rem;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.done-stats small{font-size:.8rem;color:var(--ink-3);margin-top:4px}

/* ── dark section ── */
.dark{background:var(--ink);color:var(--canvas);padding:var(--sp-16) 0}
.dark h2{color:var(--canvas)}
.dark .eyebrow{color:rgba(255,255,255,.4)}
.sec-head{margin-bottom:var(--sp-12)}
.sec-head h2{font-size:clamp(1.6rem,3.2vw,2.4rem);margin-top:10px}
.sec-head p{font-size:1.06rem;color:var(--ink-2);margin-top:14px;max-width:52ch}
.dark .sec-head p{color:rgba(255,255,255,.6)}

/* ── recognition grid ── */
.recog{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:920px){.recog{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.recog{grid-template-columns:1fr}}
.recog>div{padding:24px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.03)}
.recog p{font-size:1.02rem;color:rgba(255,255,255,.85);line-height:1.5}
.recog small{display:block;margin-top:12px;color:rgba(255,255,255,.45);font-size:.88rem}
.recog-foot{margin-top:var(--sp-12)}
.recog-foot p{font-size:.9rem;color:rgba(255,255,255,.45);max-width:72ch;line-height:1.6}
.recog-foot b{color:rgba(255,255,255,.7)}

/* ── screen shots ── */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:var(--sp-8)}
@media(max-width:920px){.shots{grid-template-columns:1fr;max-width:400px;margin-inline:auto}}
.shot h3{font-size:1.05rem;margin-top:16px;margin-bottom:4px}
.shot p{font-size:.9rem;color:var(--ink-2)}

/* ── mini phone ── */
.mini-phone{
  background:var(--ink);
  border-radius:28px;
  padding:12px;
  aspect-ratio:9/17;
  max-width:240px;
  margin-inline:auto;
  box-shadow:0 12px 40px rgba(0,0,0,.1);
}
.mini-screen{
  background:var(--canvas);
  border-radius:18px;
  height:100%;
  padding:16px 14px;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
}
.isl{height:32px;width:100%;border-radius:999px;background:var(--ink);margin-bottom:14px}
.sb{display:flex;justify-content:space-between;font-size:.72rem;color:var(--ink-2);font-weight:600;margin-bottom:14px}
.mp-title{font-family:var(--disp);font-size:1.1rem;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.mp-sub{font-size:.8rem;color:var(--ink-3);margin-top:4px}
.mp-field{
  margin-top:20px;
  padding:12px 14px;
  border:1.5px solid var(--rule-2);
  border-radius:10px;
  font-size:.88rem;
  color:var(--ink);
  display:flex;
  align-items:center;
}
.mp-caret{display:inline-block;width:2px;height:16px;background:var(--ink-3);margin-left:2px;animation:blink 1s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.mp-cta{
  margin-top:auto;
  background:var(--lime);
  color:var(--on-lime);
  text-align:center;
  padding:12px;
  border-radius:10px;
  font-weight:700;
  font-size:.88rem;
}
.mp-prog{display:flex;gap:4px}
.mp-prog i{flex:1;height:5px;border-radius:3px;background:var(--rule-2)}
.mp-prog i.d{background:var(--lime-deep)}
.mp-prog i.n{background:var(--lime)}
.mp-of{font-size:.78rem;color:var(--ink-3);font-weight:600}
.mp-step{font-family:var(--disp);font-size:.96rem;font-weight:700;line-height:1.3;margin-top:8px}
.mp-est{font-size:.76rem;color:var(--ink-3);margin-top:4px}
.mp-burst{font-size:2.4rem;text-align:center;margin:20px 0}

/* ── features (band) ── */
.band{background:var(--canvas-2);padding:var(--sp-16) 0}
.fx{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:var(--sp-8)}
@media(max-width:920px){.fx{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.fx{grid-template-columns:1fr}}
.fx article{padding:28px 24px;border:1px solid var(--rule);border-radius:14px;background:var(--surface)}
.fx .n{font-family:var(--disp);font-size:1.6rem;font-weight:800;color:var(--ink-3);letter-spacing:-.02em;display:block;margin-bottom:12px}
.fx h3{font-size:1.1rem;margin-bottom:8px}
.fx p{font-size:.92rem;color:var(--ink-2);line-height:1.55}

/* ── pricing ── */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:680px;margin-top:var(--sp-8)}
@media(max-width:640px){.plans{grid-template-columns:1fr}}
.plan{border:1.5px solid var(--rule-2);border-radius:16px;padding:32px 28px}
.plan.pro{border-color:var(--ink);border-width:2px;position:relative}
.badge{position:absolute;top:-13px;left:28px;background:var(--lime);color:var(--on-lime);font-size:.74rem;font-weight:700;padding:5px 12px;border-radius:999px}
.pn{font-family:var(--disp);font-size:1.2rem;font-weight:800;letter-spacing:-.02em}
.pp{font-family:var(--disp);font-size:2.4rem;font-weight:800;letter-spacing:-.04em;margin-top:8px}
.pp small{font-size:1rem;font-weight:500;color:var(--ink-3)}
.pnote{font-size:.84rem;color:var(--ink-3);margin-top:6px}
.plan ul{list-style:none;padding:0;margin:20px 0 24px;display:flex;flex-direction:column;gap:10px}
.plan li{font-size:.9rem;color:var(--ink-2);padding-left:24px;position:relative}
.plan li::before{content:"";position:absolute;left:0;top:6px;width:14px;height:14px;border-radius:50%;background:var(--lime-soft);border:1.5px solid var(--lime-deep)}
.plan li.no{color:var(--ink-3);text-decoration:line-through;opacity:.5}
.plan li.no::before{background:transparent;border-color:var(--rule-2)}
.plan li b{color:var(--ink)}
.pricefoot{margin-top:var(--sp-8);font-size:.9rem;color:var(--ink-3);max-width:68ch;line-height:1.6}

/* ── FAQ ── */
.faqgroup{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);margin-top:40px;margin-bottom:12px}
.faqgroup:first-child{margin-top:0}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;padding:16px 0;font-family:var(--disp);font-weight:700;font-size:1rem;list-style:none;display:flex;align-items:center;justify-content:space-between;letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.3rem;color:var(--ink-3);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 16px;max-width:72ch}
.faq .a p{font-size:.94rem;color:var(--ink-2);line-height:1.6}
.faq .a p+p{margin-top:10px}
.faq .a a{color:var(--ink);text-decoration:underline}

/* ── CTA / waitlist ── */
.cta{text-align:center}
.cta h2{font-size:clamp(1.8rem,3.6vw,2.8rem);max-width:20ch;margin-inline:auto}
.wl{display:flex;gap:8px;max-width:420px;margin:32px auto 0}
.wl input{
  flex:1;
  font:inherit;
  padding:16px 18px;
  border:1.5px solid rgba(255,255,255,.15);
  border-radius:10px;
  background:rgba(255,255,255,.05);
  color:var(--canvas);
  transition:border-color .2s;
}
.wl input::placeholder{color:rgba(255,255,255,.35)}
.wl input:focus{outline:none;border-color:var(--lime)}
.counter{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-size:.88rem;color:rgba(255,255,255,.5)}
.counter b{color:var(--canvas)}
.counter .pip{background:var(--lime)}
.formnote{font-size:.82rem;color:rgba(255,255,255,.4);margin-top:14px}
.formnote a{color:rgba(255,255,255,.6);text-decoration:underline}
.formok{display:none;margin-top:28px;padding:24px;border:1px solid var(--lime);border-radius:12px;background:rgba(74,222,128,.08)}
.formok b{font-family:var(--disp);font-size:1.1rem;display:block;margin-bottom:6px}
.formok p{font-size:.9rem;color:rgba(255,255,255,.6)}
.formerr{margin-top:14px;padding:14px 18px;border:1px solid #f87171;border-radius:12px;background:rgba(248,113,113,.08);color:#fca5a5;font-size:.9rem}
.formerr a{color:#fecaca;text-decoration:underline}
.stores{display:flex;gap:20px;justify-content:center;margin-top:32px;font-size:.84rem;color:rgba(255,255,255,.35)}

/* ── breadcrumb (also inline in header, kept here for safety) ── */

/* ── footer ── */
footer{border-top:1px solid var(--rule);background:var(--canvas-2);padding:48px 0 32px;margin-top:64px}
.fgrid{display:grid;grid-template-columns:2fr repeat(4,1fr);gap:24px}
@media(max-width:920px){.fgrid{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:560px){.fgrid{grid-template-columns:1fr}}
.fcol h3{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);margin-bottom:14px}
.fcol a{display:block;font-size:.88rem;color:var(--ink-2);text-decoration:none;margin-bottom:8px}
.fcol a:hover{color:var(--ink)}
.fbottom{display:flex;flex-wrap:wrap;gap:16px 28px;font-size:.85rem;color:var(--ink-3);align-items:center;margin-top:40px;padding-top:24px;border-top:1px solid var(--rule)}
.fbottom a{color:var(--ink-2);text-decoration:none}

/* ── SEO hidden content ── */
.sr{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ── reduced motion ── */
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---------- featured-on badge marquee ---------- */
.badge-marquee{overflow:hidden;position:relative;margin-bottom:var(--sp-8);-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.badge-track{display:flex;align-items:center;width:max-content;animation:badge-marquee 42s linear infinite}
.badge-set{display:flex;align-items:center;gap:18px;padding-right:18px;flex-shrink:0}
@keyframes badge-marquee{to{transform:translateX(-50%)}}
.badge-marquee:hover .badge-track,.badge-marquee:focus-within .badge-track{animation-play-state:paused}
.badge-card{display:flex;align-items:center;justify-content:center;height:78px;min-width:192px;padding:13px 20px;background:var(--surface);border:1px solid var(--rule);border-radius:12px;text-decoration:none;transition:transform .16s var(--ease),box-shadow .16s var(--ease),border-color .16s var(--ease)}
.badge-card img{display:block;height:42px;width:auto;max-width:221px;opacity:.85;filter:grayscale(.4) contrast(.92);transition:opacity .16s var(--ease),filter .16s var(--ease)}
.badge-card:hover{transform:translateY(-2px);border-color:var(--lime-deep);box-shadow:0 6px 18px rgba(0,0,0,.08)}
.badge-card:hover img{opacity:1;filter:none}
.badge-card:focus-visible{outline:2px solid var(--lime-deep);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.badge-track{animation:none}.badge-marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none;padding-bottom:8px}}