/*
 * Product landing page, served at / to visitors without a session. The design is
 * docs/design/homepage.html; this is its stylesheet with two changes: --ink-3 is the darker value
 * from app.css (the design's #8a857c fails 4.5:1 on white), and the vignettes' starting states only
 * apply once home.js has run (html.js), so without JavaScript every drawing is shown finished.
 */
@font-face{font-family:"Bricolage Grotesque";src:url("fonts/bricolage-grotesque.woff2") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Figtree";src:url("fonts/figtree.woff2") format("woff2");font-weight:300 900;font-display:swap}

/* Product tokens, same as app.css */
:root{
  --canvas:#f5f3ef;--surface:#fff;--surface-2:#ece9e3;--ink:#151412;--ink-2:#4d4a44;--ink-3:#6b665e;--line:#dcd8d0;--line-2:#c9c4ba;
  --accent:#156b4a;--accent-ink:#fff;--accent-soft:#e3efe8;--ph:#fff1a8;--danger:#b3261e;--danger-soft:#f9e3e1;
  /* Tokens a trade theme also sets (apps/web/src/ui/examples/showcase.json): button hover, accent as text, text on ink, the call vignette, a search link. */
  --accent-hover:#115a3e;--accent-text:#156b4a;--on-ink:#fff;--on-ink-2:#c9c4ba;--calling:#9ad0b6;--link:#1a4fa8;--h1-weight:560;
  --r-1:4px;--r-2:8px;--r-3:12px;--shadow-float:0 8px 24px rgb(20 20 18/.10),0 1px 2px rgb(20 20 18/.08);
  --font-display:"Bricolage Grotesque","Inter Tight",system-ui,sans-serif;--font-ui:"Figtree","Inter",system-ui,sans-serif;
  --gutter:20px;--section:64px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--canvas);color:var(--ink);font:17px/1.55 var(--font-ui);-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
h1,h2,h3,p,ul,dl,dd,figure{margin:0}
ul[class]{padding:0;list-style:none}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.025em;line-height:1.05}
h1{font-size:clamp(38px,9.5vw,76px);font-weight:var(--h1-weight);letter-spacing:-.035em;line-height:1}
h2{font-size:clamp(30px,6vw,48px);letter-spacing:-.03em;margin-bottom:14px}
h3{font-size:21px;letter-spacing:-.01em;margin-bottom:4px}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gutter)}
section{padding:var(--section) 0;border-top:1px solid var(--line);scroll-margin-top:8px}
.lead{font-size:20px;line-height:1.45;color:var(--ink-2);max-width:56ch}
.muted{color:var(--ink-3)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:var(--r-2);border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font:600 16px/1 var(--font-ui);text-decoration:none;cursor:pointer;transition:background-color .15s,border-color .15s}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn.quiet{border-color:transparent;background:transparent}
.btn.quiet:hover{background:var(--surface-2)}
.btn.sm{min-height:40px;padding:0 14px;font-size:15px}
@media (pointer:coarse){.btn.sm{min-height:44px}}
mark.ph{background:var(--ph);padding:0 4px;border-radius:2px;color:#151412}

/* ---------- Header ---------- */
.hd{background:var(--canvas)}
.hd .wrap{display:flex;align-items:center;gap:20px;min-height:64px}
.brand{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:700;font-size:22px;letter-spacing:-.02em;text-decoration:none;display:flex;align-items:center;gap:9px}
.brand i{width:12px;height:12px;background:var(--accent);border-radius:2px;flex:none}
.hd nav{display:none;gap:4px;font-weight:600;font-size:15px}
.hd nav a{text-decoration:none;padding:8px 10px;border-radius:var(--r-1)}
.hd nav a:hover{background:var(--surface-2)}
.hd .sp{flex:1}
.hd .login{display:none}

/* ---------- Hero ---------- */
.hero{border-top:0;padding:40px 0 56px}
.hero .wrap{display:grid;gap:36px}
.hero p.lead{margin:20px 0 26px}
.prompt{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-3);box-shadow:var(--shadow-float);max-width:640px}
.prompt:has(textarea:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.prompt textarea{display:block;width:100%;border:0;background:transparent;padding:16px 16px 4px;font:17px/1.5 var(--font-ui);min-height:170px;resize:none;color:inherit}
.prompt textarea:focus-visible{outline:0}
.prompt textarea::placeholder{color:var(--ink-3);opacity:1}
.prompt .bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 10px 10px}
.prompt .bar .sp{flex:1}
/* The prompt is the intake: attach buttons with a file count, homepage/whole-site switch, a refusal above it. */
.attach:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.attach[data-count]::after{content:attr(data-count);margin-left:2px;padding:1px 6px;border-radius:var(--r-1);background:var(--accent-soft);color:var(--accent-text);font-size:13px}
.seg{position:relative;display:inline-flex;gap:2px;padding:3px;margin:0;border:0;border-radius:var(--r-2);background:var(--surface-2);min-width:0}
.seg label{display:inline-flex;align-items:center;min-height:36px;margin:0;padding:0 12px;border-radius:6px;color:var(--ink-2);font:600 14px/1 var(--font-ui);white-space:nowrap;cursor:pointer}
.seg input:checked+label{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.seg input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.seg input:focus-visible+label{outline:2px solid var(--ink);outline-offset:2px}
@media (pointer:coarse){.seg label{min-height:44px}}
@media (max-width:40rem){.prompt .bar .seg{order:3;width:100%}.prompt .bar .seg label{flex:1;justify-content:center}.prompt .bar .btn.primary{order:4;width:100%}}
/* Turnstile (bot check without an account): flexible width, at least 300 px; inside the box at 360 px. */
.prompt .bot{padding:4px 10px 0}
.hero .note{max-width:640px;margin:0 0 12px;padding:12px 14px;border-radius:var(--r-2);background:var(--surface-2);color:var(--ink-2);font-size:15px}
.hero .note.bad{max-width:640px;margin:0 0 12px;padding:12px 14px;border-radius:var(--r-2);background:var(--danger-soft);color:#7a1a14;font-size:15px}
.under{font-size:15px;color:var(--ink-3);margin-top:12px}
.phone{width:300px;max-width:100%;aspect-ratio:300/620;border:1px solid var(--line-2);border-radius:22px;overflow:hidden;background:#fff;box-shadow:var(--shadow-float);position:relative;justify-self:center}
.phone iframe{width:360px;height:744px;border:0;transform:scale(.8333);transform-origin:0 0;display:block}
/* ---------- Hero demo: description → build → phone → computer, the same rendered example resized live ---------- */
.demo{margin:0;min-width:0}
.demo-stage{position:relative;height:var(--stage-h,600px)}
.demo-device{position:absolute;left:50%;top:50%;width:var(--pw,280px);height:var(--ph,560px);transform:translate(-50%,-50%);display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1px solid var(--line-2);border-radius:26px;box-shadow:var(--shadow-float);transition:width 1.5s cubic-bezier(.65,0,.35,1),height 1.5s cubic-bezier(.65,0,.35,1),border-radius 1.5s,opacity .5s,transform .5s}
.demo-chrome{flex:none;display:flex;align-items:center;gap:6px;height:0;padding:0 12px;overflow:hidden;background:var(--surface-2);transition:height 1.5s cubic-bezier(.65,0,.35,1)}
.demo-chrome i{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.demo-screen{position:relative;flex:1;min-height:0;overflow:hidden}
.demo-screen iframe{display:block;border:0;width:360px;height:calc(var(--ph,560px) / var(--ps,.7778));transform:scale(var(--ps,.7778));transform-origin:0 0;transition:width 1.5s cubic-bezier(.65,0,.35,1),height 1.5s cubic-bezier(.65,0,.35,1),transform 1.5s cubic-bezier(.65,0,.35,1)}
.demo[data-step=desk] .demo-device{width:var(--dw,100%);height:var(--dh,340px);border-radius:10px}
.demo[data-step=desk] .demo-chrome{height:24px}
.demo[data-step=desk] .demo-screen iframe{width:1280px;height:calc((var(--dh,340px) - 24px) / var(--ds,.4));transform:scale(var(--ds,.4))}
.demo[data-step=type] .demo-device,.demo[data-step=build] .demo-device{opacity:0;transform:translate(-50%,-46%) scale(.96)}
.demo-prompt{position:absolute;left:0;right:0;top:50%;padding:16px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-3);box-shadow:var(--shadow-float);opacity:0;visibility:hidden;transform:translateY(-50%);transition:top .7s cubic-bezier(.65,0,.35,1),opacity .4s,visibility .4s}
.demo[data-step=type] .demo-prompt,.demo[data-step=build] .demo-prompt{opacity:1;visibility:visible}
.demo[data-step=build] .demo-prompt{top:24%}
.demo-text{min-height:6.2em;margin:0;font-size:16px;line-height:1.55;color:var(--ink)}
.demo[data-step=type] .demo-text::after{content:"";display:inline-block;width:2px;height:1.1em;margin-left:1px;vertical-align:-.2em;background:var(--ink);animation:caret .8s step-end infinite}
.demo-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px}
.demo-chip{padding:6px 10px;border:1px solid var(--line-2);border-radius:var(--r-2);font-size:14px;font-weight:600}
.demo-go{padding:9px 18px;border-radius:var(--r-2);background:var(--accent);color:var(--accent-ink);font-weight:600;font-size:15px;transition:transform .15s,background .15s}
.demo[data-step=build] .demo-go{transform:scale(.95);background:var(--accent-hover)}
.demo-steps{position:absolute;left:0;right:0;top:52%;display:grid;gap:8px;margin:0;padding:0;list-style:none;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.demo[data-step=build] .demo-steps{opacity:1;visibility:visible}
.demo-steps li{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--r-2);background:var(--surface);font-size:15px;color:var(--ink-3)}
.demo-steps li::before{content:"";flex:none;width:10px;height:10px;border:2px solid var(--line-2);border-radius:50%}
.demo[data-step=build] .demo-steps li{animation:step-done .3s forwards}
.demo[data-step=build] .demo-steps li:nth-child(2){animation-delay:.7s}.demo[data-step=build] .demo-steps li:nth-child(3){animation-delay:1.4s}.demo[data-step=build] .demo-steps li:nth-child(4){animation-delay:2.1s}
@keyframes step-done{to{color:var(--ink)}}
.demo[data-step=build] .demo-steps li::before{animation:dot-done .3s forwards;animation-delay:inherit}
@keyframes dot-done{to{background:var(--accent);border-color:var(--accent)}}
@keyframes caret{50%{opacity:0}}
.demo .phone-cap{max-width:none;margin-top:14px}
.demo{position:relative}
.demo-pause{display:block;margin:10px 0 0 auto;min-height:32px;padding:0 12px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);color:var(--ink-2);font:600 13px/1 var(--font-ui);cursor:pointer}
.demo-pause:hover{color:var(--ink)}
.demo-pause[hidden]{display:none}
@media (pointer:coarse){.demo-pause{min-height:44px}}
/* Reduced motion: cuts and fades only. */
.demo.calm .demo-device,.demo.calm .demo-screen iframe,.demo.calm .demo-chrome,.demo.calm .demo-prompt{transition:opacity .4s,visibility .4s}
.demo.calm[data-step=type] .demo-device,.demo.calm[data-step=build] .demo-device{transform:translate(-50%,-50%)}
.phone-cap{font-size:14px;color:var(--ink-3);text-align:left;margin-top:10px;justify-self:center;max-width:300px}

/* ---------- Trade showcase: a chip per trade restyles the page in that trade's colours and shows its site ---------- */
.trades{margin:0 0 18px}
.trades-q{margin:0 0 10px;font-size:15px;font-weight:600;color:var(--ink-2)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.chip{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--line-2);border-radius:var(--r-2);background:var(--surface);color:var(--ink);font:600 15px/1 var(--font-ui);text-decoration:none;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.chip:hover{border-color:var(--ink-3)}
.chip[aria-current=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.chip.more{background:transparent;border-style:dashed}
.chip.more[hidden],.trades-reset[hidden]{display:none}
@media (min-width:48rem){.chips{gap:6px}.chip{min-height:34px;padding:0 12px;font-size:14px}}
@media (pointer:coarse){.chip{min-height:44px}}
.trades-reset{display:block;width:fit-content;margin-top:12px;font-size:14px;font-weight:600;color:var(--ink-2)}
.trades-reset:hover{color:var(--ink)}
/* Phones: the five most asked trades, the rest behind "Več" (only once home.js runs; without it every chip shows). */
@media (max-width:47.99rem){.chips.collapsed li:nth-child(n+6):not(:has([aria-current=true])){display:none}}
/* The switch: a view transition, the new look revealed in a circle from the chip (home.ts animates the clip). */
html.trade-switch::view-transition-old(root),html.trade-switch::view-transition-new(root){animation:none;mix-blend-mode:normal}

/* ---------- What you get: three outcomes shown with the real example, then promises and a comparison ---------- */
.win{display:grid;gap:24px;align-items:center;margin-top:48px}
.win h3{font-size:clamp(26px,4vw,36px);letter-spacing:-.03em;line-height:1.08;margin-bottom:12px;max-width:16ch}
.win p{color:var(--ink-2);font-size:18px;max-width:46ch}
.win .proof{margin-top:12px;padding-left:14px;border-left:2px solid var(--accent);color:var(--ink);font-size:16px}
.win-vis{position:relative;display:grid;place-items:center;min-height:340px;padding:28px 20px;border-radius:var(--r-3);background:var(--surface-2);overflow:hidden}
/* 1. A tap on "Pokliči" in the real example, and the call starting. */
.phone-wrap{position:relative;padding-top:34px}
.phone.sm{width:236px;aspect-ratio:236/470;border-radius:20px;justify-self:center}
/* The example's call bar is fixed to its viewport: a viewport as tall as the frame puts it at the bottom. */
.phone.sm iframe{height:717px;transform:scale(.6556)}
.call-vis .tap{position:absolute;left:52px;bottom:14px;width:30px;height:30px;border-radius:50%;background:rgb(21 20 18/.25);box-shadow:0 0 0 0 rgb(21 107 74/.5)}
.call-vis .calling{position:absolute;left:50%;top:0;transform:translateX(-50%);display:grid;gap:2px;min-width:200px;padding:10px 16px;border-radius:14px;background:var(--ink);color:var(--on-ink);font-size:14px;box-shadow:var(--shadow-float);text-align:center}
.call-vis .calling b{font-weight:600;color:var(--calling)}
/* 2. A search typed, the result with the facts the page gives search engines. */
.search-vis{align-content:center;gap:14px;justify-items:stretch}
.search-vis .q{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:999px;background:var(--surface);border:1px solid var(--line-2);font-size:17px}
.search-vis .q svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--ink-3);stroke-width:2;stroke-linecap:round}
.search-vis .typed{overflow:hidden;white-space:nowrap;border-right:2px solid var(--ink);width:15ch}
.search-vis .result{display:grid;gap:4px;padding:18px 20px;border-radius:var(--r-2);background:var(--surface);box-shadow:var(--shadow-float)}
.search-vis .url{font-size:13px;color:var(--ink-3)}
.search-vis .title{font:600 20px/1.25 var(--font-ui);color:var(--link)}
.search-vis .desc{font-size:15px;color:var(--ink-2)}
.search-vis .facts{margin-top:6px;padding-top:8px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.search-vis .facts b{color:var(--accent-text)}
/* 3. One sentence changes Saturday's hours on the page. */
.edit-vis{align-content:center;gap:14px;justify-items:center}
.edit-vis .hours{display:grid;width:min(320px,100%);padding:16px 18px;border-radius:var(--r-2);background:var(--surface);box-shadow:var(--shadow-float);font-size:15px}
.edit-vis .h{font:600 18px/1.2 var(--font-display);margin-bottom:8px}
.edit-vis .row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.edit-vis .sat{position:relative;margin:0 -8px;padding:8px;border-radius:6px;background:var(--accent-soft)}
.edit-vis .val{position:relative;white-space:nowrap}
.edit-vis .val s{display:none}
.edit-vis .val b{font-weight:600;color:var(--accent-text)}
.edit-vis .say{justify-self:end;max-width:260px;padding:10px 14px;border-radius:14px 14px 4px 14px;background:var(--ink);color:var(--on-ink);font-size:15px}
.edit-vis .done{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;background:var(--accent-soft);color:var(--accent-text);font-size:13px;font-weight:600}
.edit-vis .done::before{content:"";width:6px;height:10px;margin:-3px 2px 0 0;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg)}
/* Promises: plain words, two columns on a wide screen. */
.promises{display:grid;gap:14px 40px;margin:64px 0 0;padding:28px 0 0;border-top:1px solid var(--line);list-style:none}
.promises li{position:relative;padding-left:28px;color:var(--ink-2);font-size:17px}
.promises li::before{content:"";position:absolute;left:4px;top:5px;width:7px;height:13px;border:solid var(--accent);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.promises b{color:var(--ink)}
/* Against the usual alternative, with the source under it. */
.versus{display:grid;gap:12px;margin-top:56px}
.versus>div{padding:24px;border-radius:var(--r-3);background:var(--surface);border:1px solid var(--line)}
.versus h3{font-size:22px;margin-bottom:14px}
.versus ul{display:grid;gap:10px;margin:0;padding:0;list-style:none;font-size:17px;color:var(--ink-2)}
.versus b{font-family:var(--font-display);font-size:26px;font-weight:600;letter-spacing:-.02em;color:var(--ink);margin-right:6px}
.versus>div:first-child{background:transparent}
.versus>div:first-child b{color:var(--ink-2)}
.versus .us{border:2px solid var(--accent)}
.versus .us .btn{margin-top:20px}
.src{margin-top:10px;font-size:13px;color:var(--ink-3)}

/* ---------- How it works: a row, no numbers, no icons ---------- */
.how{display:grid;gap:20px;margin-top:28px}
.how div{border-top:1px solid var(--line);padding-top:14px}
.how div p{color:var(--ink-2);font-size:16px}
.how .note{grid-column:1/-1;color:var(--ink-2)}

/* ---------- Example ---------- */
.ex{display:grid;gap:20px;margin-top:28px}
.deskwrap{width:100%;overflow:hidden;border:1px solid var(--line-2);border-radius:var(--r-3);background:#fff;box-shadow:var(--shadow-float)}
.deskwrap iframe{width:1280px;height:1500px;border:0;transform-origin:0 0;display:block}
.chat{display:grid;gap:8px;align-content:start}
.msg{padding:12px 14px;border-radius:var(--r-2);background:var(--surface-2);font-size:16px;max-width:90%}
.msg.user{background:var(--ink);color:var(--on-ink);justify-self:end}
.msg small{display:block;color:var(--ink-3);margin-top:4px}
.msg.user small{color:var(--on-ink-2)}
.chat .muted{font-size:15px;margin-top:8px}

/* ---------- Pricing ---------- */
.price{display:grid;gap:20px;margin-top:28px}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-3);padding:24px}
.plan .amt{font-family:var(--font-display);font-size:44px;font-weight:600;letter-spacing:-.03em;line-height:1;margin:10px 0 4px}
.plan .amt small{font:400 16px var(--font-ui);color:var(--ink-3);letter-spacing:0}
#cena .fine{margin-top:16px;font-size:14px}
.plan ul{margin:16px 0 20px;display:grid;gap:8px;padding-left:0;list-style:none}
.plan ul li{padding-left:18px;position:relative}
.plan ul li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:2px;background:var(--ink)}
.plan .yearly{font-weight:600;margin-bottom:10px}
.plan .extra{margin:0 0 20px;border-top:1px solid var(--line);font-size:16px}
.plan .extra div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 16px;padding:10px 0;border-bottom:1px solid var(--line)}
.plan .extra dt{color:var(--ink-2)}
.plan .extra dd{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums}
.plan .fine{font-size:14px;margin-top:14px}

/* ---------- FAQ ---------- */
.faq{margin-top:20px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:16px 0;font-weight:600;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;color:var(--ink-3)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 18px;color:var(--ink-2);max-width:70ch}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line);padding:40px 0 32px;font-size:15px;color:var(--ink-2)}
footer .cols{display:grid;gap:24px}
footer .about{margin-top:10px;max-width:40ch}
footer h2{font-family:var(--font-ui);font-size:14px;color:var(--ink);margin-bottom:8px;letter-spacing:0}
footer ul{list-style:none;padding:0}footer ul li{margin:4px 0}
footer .legal{margin-top:28px;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 20px;color:var(--ink-3)}

/* Timeline rule under "Kako deluje" columns draws in sequence */
.how div{position:relative}
.how div::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:100%;background:var(--accent);transform:scaleX(1);transform-origin:left}

@media (prefers-reduced-motion:no-preference){
  /* Outcome rows: the starting state only with JavaScript, so without it they show finished. */
  .js .call-vis .calling{opacity:0;transform:translate(-50%,-10px)}
  .js .win.in .call-vis .tap{animation:press 1.4s .5s ease-out 2}
  .js .win.in .call-vis .calling{animation:drop .5s 1.1s cubic-bezier(.2,.7,.2,1) forwards}
  .js .search-vis .typed{width:0}
  .js .search-vis .result{opacity:0;transform:translateY(10px)}
  .js .win.in .search-vis .typed{animation:type 1s .3s steps(14) forwards,caret .8s 1.3s step-end 3}
  .js .win.in .search-vis .result{animation:rise .6s 1.5s cubic-bezier(.2,.7,.2,1) forwards}
  .js .edit-vis .say,.js .edit-vis .done{opacity:0;transform:translateY(8px)}
  .js .edit-vis .val s{display:inline;text-decoration:none}
  .js .edit-vis .val b{position:absolute;right:0;top:0;opacity:0}
  .js .edit-vis .sat{background:transparent}
  .js .win.in .edit-vis .say{animation:rise .5s .3s cubic-bezier(.2,.7,.2,1) forwards}
  .js .win.in .edit-vis .val s{animation:out .3s 1.3s forwards}
  .js .win.in .edit-vis .val b{animation:fade .3s 1.5s forwards}
  .js .win.in .edit-vis .sat{animation:hl .6s 1.4s forwards}
  .js .win.in .edit-vis .done{animation:rise .4s 2s cubic-bezier(.2,.7,.2,1) forwards}
  .js .how div::before{transform:scaleX(0)}.js .in.how-sec .how div::before{animation:load .6s cubic-bezier(.2,.7,.2,1) forwards}
  .js .in.how-sec .how div:nth-child(2)::before{animation-delay:.15s}.js .in.how-sec .how div:nth-child(3)::before{animation-delay:.3s}.js .in.how-sec .how div:nth-child(4)::before{animation-delay:.45s}.js .in.how-sec .how div:nth-child(5)::before{animation-delay:.6s}
  @keyframes rise{to{opacity:1;transform:none}}
  @keyframes fade{to{opacity:1}}
  @keyframes strike{to{transform:rotate(-3deg) scaleX(1)}}
  @keyframes draw{to{stroke-dashoffset:0}}
  @keyframes load{to{transform:scaleX(1)}}
  @keyframes press{0%{transform:scale(1);box-shadow:0 0 0 0 rgb(21 107 74/.55)}30%{transform:scale(.8)}100%{transform:scale(1);box-shadow:0 0 0 22px rgb(21 107 74/0)}}
  @keyframes drop{to{opacity:1;transform:translate(-50%,0)}}
  @keyframes type{to{width:15ch}}
  @keyframes caret{50%{border-right-color:transparent}}
  @keyframes out{to{opacity:0}}
  @keyframes hl{to{background:var(--accent-soft)}}
}

@media (min-width:48rem){
  :root{--gutter:32px;--section:96px}
  .hd nav,.hd .login{display:inline-flex}
  .hero{padding:72px 0 88px}
  .hero .wrap{grid-template-columns:1.25fr .75fr;align-items:center;gap:56px}
  .phone{justify-self:end}
  .win{grid-template-columns:1.1fr 1fr;gap:64px;margin-top:72px}
  .win.flip .win-vis{order:2}
  .win-vis{min-height:420px}
  .promises{grid-template-columns:1fr 1fr}
  .versus{grid-template-columns:1fr 1fr;gap:20px}
  .how{grid-template-columns:repeat(5,1fr)}
  .ex{grid-template-columns:2fr 1fr;align-items:start}
  .price{grid-template-columns:repeat(3,1fr)}
  footer .cols{grid-template-columns:2fr 1fr 1fr 1fr}
}