: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(56% 0.19 28);
  --sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-6:24px;--sp-8:32px;--sp-12:48px;--sp-16:64px;--sp-24:96px;
  --ease:cubic-bezier(0.22,1,0.36,1);
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --disp:"Bricolage Grotesque","Instrument Sans",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);
  font-family:"Instrument Sans",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:17px;line-height:1.58;-webkit-font-smoothing:antialiased;font-optical-sizing:auto}
h1,h2,h3,h4{margin:0;font-family:var(--disp);font-weight:800;letter-spacing:-.035em;line-height:1.04;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:inherit}
.wrap{width:min(1160px,100% - 40px);margin-inline:auto}
.narrow{width:min(740px,100% - 40px);margin-inline:auto}
.eyebrow{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.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}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:600 .96rem/1 "Instrument Sans",sans-serif;letter-spacing:-.01em;
  padding:16px 24px;border-radius:10px;border:1.5px solid transparent;cursor:pointer;text-decoration:none;min-height:50px;
  transition:transform .14s var(--ease),background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease)}
.btn-primary{background:var(--ink);color:var(--canvas);border-color:var(--ink)}
.btn-primary:hover{background:oklch(28% 0.028 265);transform:translateY(-1px)}
.btn-lime{background:var(--lime);color:var(--on-lime);border-color:var(--lime)}
.btn-lime:hover{background:var(--lime-deep);border-color:var(--lime-deep);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn-ghost:hover{background:var(--surface);border-color:var(--ink-3);transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.btn:focus-visible,a:focus-visible,input:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--lime-deep);outline-offset:3px;border-radius:8px}

.nav{position:sticky;top:0;z-index:60;background:oklch(97.4% 0.004 265/.88);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .2s var(--ease)}
.nav.stuck{border-bottom-color:var(--rule)}
.nav-in{display:flex;align-items:center;gap:var(--sp-8);height:68px}
.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}
.nav-links{display:flex;gap:26px;margin-left:auto;align-items:center}
.nav-links a{text-decoration:none;font-size:.92rem;font-weight:500;color:var(--ink-2);transition:color .15s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav .btn{padding:11px 18px;min-height:42px;font-size:.88rem}
@media(max-width:900px){.nav-links a:not(.btn){display:none}}

/* hero */
.hero{padding:var(--sp-16) 0 var(--sp-12)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:var(--sp-16);align-items:center}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr;gap:var(--sp-12)}}
.tag{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);
  border:1.5px solid var(--rule-2);border-radius:100px;padding:7px 14px;background:var(--surface)}
.pip{width:7px;height:7px;border-radius:50%;background:var(--lime-deep)}
h1.display{font-size:clamp(2.7rem,6.6vw,4.4rem);letter-spacing:-.045em;margin:22px 0 0;max-width:13ch}
.lede{font-size:1.17rem;color:var(--ink-2);max-width:50ch;margin-top:22px;line-height:1.6}
.hero-facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.fact{font-size:.8rem;font-weight:600;color:var(--ink-2);background:var(--surface);border:1px solid var(--rule);border-radius:7px;padding:8px 12px}

/* demo */
.demo{background:var(--surface);border:1.5px solid var(--ink);border-radius:18px;overflow:hidden;
  box-shadow:0 30px 60px -40px oklch(19% 0.04 265/.55)}
.demo-bar{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1.5px solid var(--rule);background:var(--canvas-2)}
.demo-bar .lights{display:flex;gap:6px}
.demo-bar .lights i{width:9px;height:9px;border-radius:50%;background:var(--rule-2)}
.demo-bar .ttl{font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.demo-bar .tmr{margin-left:auto;font:600 .78rem ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink-3);font-variant-numeric:tabular-nums}
.demo-body{padding:30px 28px 28px;min-height:412px;display:flex;flex-direction:column}
@media(max-width:520px){.demo-body{padding:24px 20px;min-height:440px}}
.ask{font-family:var(--disp);font-size:1.42rem;font-weight:700;letter-spacing:-.032em;line-height:1.18}
.inrow{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
#taskIn{flex:1;min-width:220px;border:1.5px solid var(--rule-2);border-radius:11px;padding:16px;font:500 1.02rem "Instrument Sans",sans-serif;
  background:var(--canvas);color:var(--ink);min-height:54px;transition:border-color .18s var(--ease)}
#taskIn::placeholder{color:var(--ink-3);font-weight:400}
#taskIn:focus{border-color:var(--ink);outline:none}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chip{border:1.5px solid var(--rule);background:var(--canvas);border-radius:100px;padding:9px 15px;font:500 .86rem "Instrument Sans",sans-serif;color:var(--ink-2);cursor:pointer;
  transition:all .16s var(--ease)}
.chip:hover{border-color:var(--ink);color:var(--ink);background:var(--lime-soft);transform:translateY(-1px)}
.hint{margin-top:auto;padding-top:22px;font-size:.83rem;color:var(--ink-3);border-top:1px dashed var(--rule-2)}
.hint b{color:var(--ink-2);font-weight:600}
.resume{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--lime-soft);border:1.5px solid var(--lime-deep);border-radius:11px;padding:13px 15px;margin-top:18px;font-size:.9rem}
.resume b{font-weight:700}
.resume button{margin-left:auto;background:var(--ink);color:var(--canvas);border:0;border-radius:7px;padding:9px 14px;font:600 .82rem "Instrument Sans",sans-serif;cursor:pointer;min-height:38px}
.thinking{display:flex;flex-direction:column;gap:14px;justify-content:center;flex:1;align-items:center;text-align:center}
.thinking .lbl{font-size:.9rem;color:var(--ink-3);font-weight:500}
.bars{display:flex;gap:6px;align-items:flex-end;height:34px}
.bars i{width:7px;background:var(--lime-deep);border-radius:3px;animation:bob 1s infinite var(--ease-out);animation-delay:calc(var(--n)*100ms);height:12px}
@keyframes bob{0%,100%{height:12px;opacity:.5}50%{height:32px;opacity:1}}

.stepwrap{display:flex;flex-direction:column;flex:1;animation:fade .35s var(--ease-out)}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.prog{display:flex;gap:5px}
.prog i{flex:1;height:5px;border-radius:3px;background:var(--rule);transition:background-color .3s var(--ease)}
.prog i.done{background:var(--lime-deep)}
.prog i.now{background:var(--ink)}
.stepmeta{display:flex;align-items:center;justify-content:space-between;margin-top:16px}
.stepmeta .of{font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.stepmeta .est{font-size:.76rem;font-weight:600;color:var(--on-lime);background:var(--lime);border-radius:6px;padding:5px 10px}
.steptext{font-family:var(--disp);font-size:clamp(1.5rem,3.4vw,2.05rem);font-weight:700;letter-spacing:-.035em;line-height:1.16;margin-top:26px;flex:1;display:flex;align-items:center}
.stepbtns{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap;align-items:center}
.stepbtns .btn-lime{flex:1;min-width:160px}
.textbtn{background:none;border:0;color:var(--ink-3);font:500 .86rem "Instrument Sans",sans-serif;cursor:pointer;padding:8px 6px;text-decoration:underline;text-underline-offset:3px}
.textbtn:hover{color:var(--ink)}

.done-screen{display:flex;flex-direction:column;justify-content:center;flex:1;text-align:left;animation:fade .4s var(--ease-out)}
.done-mark{width:56px;height:56px;border-radius:14px;background:var(--lime);display:grid;place-items:center;font-size:1.6rem;margin-bottom:22px}
.done-screen h3{font-size:clamp(1.7rem,4vw,2.3rem)}
.done-stats{display:flex;gap:28px;margin-top:24px;flex-wrap:wrap}
.done-stats div span{display:block;font:700 1.7rem/1 var(--disp);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.done-stats div small{font-size:.76rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);display:block;margin-top:7px}

section{padding:var(--sp-24) 0}
@media(max-width:700px){section{padding:var(--sp-16) 0}}
.band{background:var(--canvas-2);border-block:1px solid var(--rule)}
.dark{background:var(--ink);color:var(--canvas)}
.sec-head{max-width:46ch;margin-bottom:var(--sp-12)}
.sec-head h2{font-size:clamp(2rem,4.2vw,3rem);letter-spacing:-.042em;margin-top:14px}
.sec-head p{color:var(--ink-2);margin-top:16px;font-size:1.06rem}
.dark .sec-head p{color:oklch(78% 0.014 265)}
.dark .eyebrow{color:oklch(72% 0.06 122)}

/* recognition */
.recog{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:0 var(--sp-12)}
.recog div{padding:22px 0;border-top:1px solid oklch(38% 0.02 265)}
.recog p{font-size:1.06rem;line-height:1.5;color:var(--canvas);font-weight:500}
.recog small{display:block;margin-top:10px;color:oklch(72% 0.014 265);font-size:.9rem}
.recog-foot{margin-top:var(--sp-12);padding-top:var(--sp-6);border-top:1px solid oklch(38% 0.02 265);max-width:64ch}
.recog-foot p{color:oklch(80% 0.014 265);font-size:1.02rem}
.recog-foot b{color:var(--canvas)}

/* shots */
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-8);align-items:start}
.shot{text-align:left}
.mini-phone{width:100%;max-width:262px;background:var(--ink);border-radius:34px;padding:7px;margin-bottom:18px;box-shadow:0 26px 46px -34px oklch(19% 0.04 265/.6)}
.mini-screen{background:var(--canvas);border-radius:28px;height:466px;display:flex;flex-direction:column;padding:26px 20px 20px;position:relative;overflow:hidden}
.mini-screen .isl{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:70px;height:19px;background:var(--ink);border-radius:100px}
.mini-screen .sb{display:flex;justify-content:space-between;font:600 .66rem ui-monospace,Menlo,monospace;color:var(--ink-2);margin-bottom:20px}
.mp-title{font-family:var(--disp);font-size:1.28rem;font-weight:800;letter-spacing:-.035em;line-height:1.12}
.mp-sub{font-size:.82rem;color:var(--ink-3);margin-top:8px}
.mp-field{margin-top:18px;border:1.5px solid var(--rule-2);border-radius:10px;padding:13px;font-size:.86rem;color:var(--ink);background:var(--surface)}
.mp-caret{display:inline-block;width:2px;height:1em;background:var(--ink);vertical-align:-2px;animation:blink 1.1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.mp-cta{margin-top:auto;background:var(--lime);color:var(--on-lime);border-radius:10px;padding:14px;text-align:center;font-weight:700;font-size:.9rem}
.mp-prog{display:flex;gap:4px;margin-bottom:16px}
.mp-prog i{flex:1;height:4px;border-radius:2px;background:var(--rule)}
.mp-prog i.d{background:var(--lime-deep)}
.mp-prog i.n{background:var(--ink)}
.mp-of{font-size:.68rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.mp-step{font-family:var(--disp);font-size:1.42rem;font-weight:700;letter-spacing:-.035em;line-height:1.15;margin-top:auto;margin-bottom:auto}
.mp-est{align-self:flex-start;font-size:.7rem;font-weight:700;background:var(--lime);color:var(--on-lime);padding:4px 9px;border-radius:5px;margin-top:12px}
.mp-burst{font-size:2.6rem;margin-bottom:14px}
.shot h4{font-size:1.06rem;letter-spacing:-.025em}
.shot p{font-size:.92rem;color:var(--ink-2);margin-top:7px;max-width:34ch}

/* features */
.fx{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:14px;overflow:hidden}
.fx article{background:var(--surface);padding:30px 26px}
.fx .n{font:700 .72rem "Instrument Sans",sans-serif;letter-spacing:.14em;color:var(--lime-deep)}
.fx h3{font-size:1.26rem;margin-top:13px;letter-spacing:-.03em}
.fx p{color:var(--ink-2);margin-top:10px;font-size:.96rem}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--sp-6);align-items:stretch}
.plan{background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:32px 28px;display:flex;flex-direction:column}
.plan.pro{border:1.5px solid var(--ink);position:relative}
.plan .pn{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.plan .pp{font-family:var(--disp);font-size:2.7rem;font-weight:800;letter-spacing:-.05em;margin-top:16px;line-height:1;font-variant-numeric:tabular-nums}
.plan .pp small{font-family:"Instrument Sans",sans-serif;font-size:.92rem;font-weight:500;letter-spacing:-.01em;color:var(--ink-3)}
.plan .pnote{font-size:.85rem;color:var(--ink-3);margin-top:9px}
.plan ul{list-style:none;padding:0;margin:26px 0 30px;display:flex;flex-direction:column;gap:12px}
.plan li{display:flex;gap:10px;font-size:.94rem;color:var(--ink-2);line-height:1.45}
.plan li::before{content:"✓";color:var(--lime-deep);font-weight:800;flex:none}
.plan li.no{color:var(--ink-3)}
.plan li.no::before{content:"—";color:var(--ink-3)}
.plan li b{color:var(--ink);font-weight:600}
.plan .btn{margin-top:auto;width:100%}
.badge{position:absolute;top:-12px;right:26px;background:var(--lime);color:var(--on-lime);font:700 .66rem "Instrument Sans",sans-serif;letter-spacing:.11em;text-transform:uppercase;padding:7px 12px;border-radius:6px}
.pricefoot{margin-top:var(--sp-6);font-size:.9rem;color:var(--ink-3);max-width:66ch}

/* faq */
.faq{border-top:1px solid var(--rule-2)}
.faq details{border-bottom:1px solid var(--rule);padding:4px 0}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font-family:var(--disp);font-size:1.1rem;font-weight:700;letter-spacing:-.028em;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:1.5rem;font-weight:400;color:var(--ink-3);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq .a{padding:0 60px 24px 0;color:var(--ink-2);font-size:1rem}
.faq .a p+p{margin-top:12px}
.faq .a a{color:var(--ink);text-underline-offset:3px}
.faqgroup{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:var(--sp-8) 0 4px}
.faqgroup:first-of-type{margin-top:0}

/* cta */
.cta h2{font-size:clamp(2.2rem,5.2vw,3.5rem);letter-spacing:-.045em;color:var(--canvas);max-width:16ch}
.cta p{color:oklch(79% 0.014 265);margin-top:18px;font-size:1.08rem;max-width:48ch}
.wl{display:flex;gap:10px;margin-top:30px;max-width:520px;flex-wrap:wrap}
.wl input{flex:1;min-width:230px;background:oklch(26% 0.022 265);border:1.5px solid oklch(36% 0.02 265);border-radius:10px;padding:16px;color:var(--canvas);font:400 .98rem "Instrument Sans",sans-serif;min-height:50px}
.wl input::placeholder{color:oklch(63% 0.014 265)}
.wl input:focus{border-color:var(--lime);outline:none}
.counter{margin-top:22px;font-size:.88rem;color:oklch(82% 0.014 265);display:flex;align-items:center;gap:9px}
.counter b{color:var(--lime);font-weight:700}
.counter .pip{background:var(--lime);box-shadow:0 0 0 3px oklch(88.5% 0.195 122/.2);animation:pulse 2.4s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px oklch(88.5% 0.195 122/0)}}
.formnote{font-size:.82rem;color:oklch(70% 0.014 265);margin-top:18px}
.formnote a{color:oklch(84% 0.014 265)}
.formok{display:none;margin-top:26px;border:1.5px solid var(--lime);border-radius:12px;padding:20px;max-width:520px;background:oklch(26% 0.05 128)}
.formok b{color:var(--canvas);display:block}
.formok p{color:oklch(85% 0.04 128);font-size:.92rem;margin-top:5px}
.formerr{display:none;margin-top:12px;color:oklch(78% 0.14 30);font-size:.88rem;font-weight:500}

footer{border-top:1px solid var(--rule);background:var(--canvas-2);padding:var(--sp-12) 0 var(--sp-8)}
.fgrid{display:flex;flex-wrap:wrap;gap:var(--sp-8) var(--sp-16);justify-content:space-between;align-items:flex-start}
.fcol h5{margin:0 0 12px;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-family:"Instrument Sans",sans-serif}
.fcol a{display:block;text-decoration:none;color:var(--ink-2);font-size:.92rem;padding:5px 0}
.fcol a:hover{color:var(--ink)}
.fbottom{margin-top:var(--sp-12);padding-top:var(--sp-6);border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.82rem;color:var(--ink-3)}
.stores{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.stores span{border:1.5px solid var(--rule-2);border-radius:9px;padding:10px 15px;font-size:.82rem;font-weight:600;color:var(--ink-2)}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto}}