/*
 * Product landing page, served at / to visitors without a session. The design is
 * docs/design/homepage.html; this is its stylesheet with three changes: the colours are app.css's
 * "Arctic & teal" tokens (owner decision sb-ui-palette) instead of the design's warm paper and green,
 * --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 ("Arctic & teal", owner decision sb-ui-palette; test/ui-contrast.test.ts keeps them equal) */
:root{
  --canvas:#eef3f4;--surface:#fff;--surface-2:#dfe8ea;--ink:#0f1f22;--ink-2:#3d5257;--ink-3:#53676c;--line:#cfdbde;--line-2:#b4c5c9;
  --accent:#0d7a84;--accent-ink:#fff;--accent-soft:#dbeef0;--ph:#fff1a8;--danger:#b3261e;--danger-soft:#f9e3e1;
  /* Button hover, accent as text, text on ink, the call vignette, a search link; the demo device's dark screen. */
  --accent-hover:#0a636b;--accent-text:#0d6a73;--on-ink:#fff;--on-ink-2:#b4c5c9;--calling:#8fd3d9;--link:#1a4fa8;--h1-weight:560;
  --screen:#0f1a1c;
  --r-1:4px;--r-2:8px;--r-3:12px;--shadow-float:0 8px 24px rgb(15 31 34/.10),0 1px 2px rgb(15 31 34/.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}
:where(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:var(--ink)}

/* ---------- 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: a trade's description is typed, its site builds itself, then it transforms into the next trade's ---------- */
/* Above the tabs: the question, the phone/computer switch and the pause button, as icons. */
.demo-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 4px}
.demo-top .trades-q{margin:0}
.trades-q{font-size:15px;font-weight:600;color:var(--ink-2)}
.demo-tools{display:flex;align-items:center;gap:8px;flex:none}
.demo-tools[hidden]{display:none}
.views{display:inline-flex;gap:2px;padding:3px;border-radius:var(--r-2);background:var(--surface-2)}
.views button{display:grid;place-items:center;width:34px;height:30px;margin:0;padding:0;border:0;border-radius:6px;background:none;color:var(--ink-3);cursor:pointer}
.views button:hover{color:var(--ink)}
.views button[aria-checked=true]{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.views svg,.pause svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.views button:focus-visible,.pause:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* Trade tabs: an underline under the shown trade; while the demo moves on by itself it fills up as the time to the next one runs. */
.tabbar{margin:0 0 14px;border-bottom:1px solid var(--line)}
.tabs{display:flex;min-width:0;margin:0 -8px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{position:relative;flex:none;display:inline-flex;align-items:center;min-height:44px;margin:0;padding:0 8px;border:0;background:none;color:var(--ink-3);font:600 14px/1 var(--font-ui);white-space:nowrap;text-decoration:none;cursor:pointer;transition:color .2s}
.tab:hover{color:var(--ink)}
.tab[aria-selected=true]{color:var(--ink)}
.tab::after{content:"";position:absolute;left:6px;right:6px;bottom:-1px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:left}
.tab[aria-selected=true]::after{transform:scaleX(1);transition:transform .3s}
.tabs.auto .tab[aria-selected=true]::after{animation:tab-fill var(--dwell,4s) linear both}
@keyframes tab-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.tab:focus-visible{outline:2px solid var(--ink);outline-offset:-4px;border-radius:var(--r-1)}
.pause{display:grid;place-items:center;width:36px;height:36px;margin:0;padding:0;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);color:var(--ink-2);cursor:pointer}
.pause:hover{color:var(--ink)}
@media (pointer:coarse){.views button{width:44px;height:44px}.pause{width:44px;height:44px}}

/*
 * The intro, one card all the way: first the description being typed (its full text laid out from the
 * start, so nothing moves while it types), then, after "Ustvari", it shrinks into the build steps under the
 * device (where the caption goes) while the page builds itself in it; when the page is done the card gives way to the caption.
 */
.devbox{position:relative}
.intro{position:absolute;inset:0;z-index:3;pointer-events:none}
.ask{position:absolute;left:var(--ax,0px);top:var(--ay,0px);width:var(--aw,100%);height:var(--ah,auto);overflow:hidden;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-3);box-shadow:var(--shadow-float);transition:left .7s cubic-bezier(.65,0,.35,1),top .7s cubic-bezier(.65,0,.35,1),width .7s cubic-bezier(.65,0,.35,1),height .7s cubic-bezier(.65,0,.35,1),opacity .5s,transform .5s cubic-bezier(.65,0,.35,1)}
.ask:not(.placed){visibility:hidden}
.devbox[data-step=site] .ask{opacity:0;transform:translateY(8px) scale(.96)}
.ask-type{position:absolute;left:0;top:0;width:var(--tw,100%);padding:16px;transition:opacity .3s}
.devbox:not([data-step=type]) .ask-type{opacity:0}
.ask-text{margin:0;font-size:15px;line-height:1.55;color:var(--ink)}
.ask-text .rest{color:transparent}
.ask-text .caret{display:inline-block;width:2px;height:1.1em;margin:0 -2px 0 0;vertical-align:-.2em;background:var(--ink);animation:ask-caret .8s step-end infinite}
@keyframes ask-caret{50%{opacity:0}}
.ask-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px}
.ask-chip{padding:6px 10px;border:1px solid var(--line-2);border-radius:var(--r-2);font-size:14px;font-weight:600}
.ask-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}
.ask-go.pressed{transform:scale(.94);background:var(--accent-hover)}
.ask-steps{position:absolute;left:0;top:0;width:var(--sw,240px);display:grid;gap:0;margin:0;padding:8px 12px;list-style:none;opacity:0;transition:opacity .3s}
.devbox[data-step=build] .ask-steps,.devbox[data-step=site] .ask-steps{opacity:1;transition-delay:.3s}
.ask-steps li{display:flex;align-items:center;gap:10px;padding:4px 2px;font-size:13px;color:var(--ink-3);transition:color .3s}
.ask-steps li::before{content:"";flex:none;width:10px;height:10px;border:2px solid var(--line-2);border-radius:50%;transition:background .3s,border-color .3s,box-shadow .3s}
.ask-steps li.now{color:var(--ink)}
.ask-steps li.now::before{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);animation:ask-pulse 1s ease-in-out infinite alternate}
@keyframes ask-pulse{to{box-shadow:0 0 0 1px var(--accent-soft)}}
.ask-steps li.done{color:var(--ink)}
.ask-steps li.done::before{background:var(--accent);border-color:var(--accent);box-shadow:none;animation:none}
.devbox[data-step=type] .dev{opacity:0;transform:translateY(14px) scale(.97)}
.devbox .dev{transition:opacity .6s .15s,transform .8s cubic-bezier(.2,.8,.2,1) .15s}
.devbox .dev.resize{transition:opacity .6s .15s,transform .8s cubic-bezier(.2,.8,.2,1) .15s,width .9s cubic-bezier(.65,0,.35,1),height .9s cubic-bezier(.65,0,.35,1),border-radius .9s}
.cap{transition:opacity .5s}
.devbox[data-step]:not([data-step=site]) + .cap{opacity:0}
/*
 * Before the script runs (html.js is set in <head>), the intro's first frame: the device and the caption
 * hidden, so the finished site never flashes before it is typed and built. Without JavaScript the site
 * shows at once.
 */
html.js .devbox[data-intro]:not([data-step]) + .cap{opacity:0}
@media (prefers-reduced-motion:no-preference){
  html.js .devbox[data-intro]:not([data-step]) .dev{opacity:0;transform:translateY(14px) scale(.97)}
}
/*
 * Reduced motion: the same intro and switches, in fades only. Nothing slides, scales or resizes: the card
 * fades out over the device and back in under it (.swap), the device fades in where it stands, the tab's
 * underline doesn't fill (it just shows the trade), the view switch is a cut.
 */
@media (prefers-reduced-motion:reduce){
  html.js .devbox[data-intro]:not([data-step]) .dev,.devbox[data-step=type] .dev{opacity:0;transform:none}
  .devbox .dev,.devbox .dev.resize{transition:opacity .6s .15s}
  .ask{transition:opacity .3s}
  .ask.swap{opacity:0}
  .devbox[data-step=site] .ask{transform:none}
  .ask-go,.ask-go.pressed{transform:none;transition:background .15s}
  .ask-text .caret,.ask-steps li.now::before{animation:none}
  .tab[aria-selected=true]::after{transition:none}
  .tabs.auto .tab[aria-selected=true]::after{animation:none}
}

/* Sized for the computer view before the script runs (the column width in container units), so nothing moves when it does. */
.devwrap{min-width:0;container-type:inline-size}
.dev{position:relative;margin:0 auto;width:var(--w,100cqw);height:var(--h,calc(62cqw + 24px));background:#fff;border:1px solid var(--line-2);border-radius:26px;box-shadow:var(--shadow-float);overflow:hidden;display:flex;flex-direction:column}
.dev[data-mode=desk]{border-radius:10px}
.dev .chrome{flex:none;display:flex;align-items:center;gap:6px;height:var(--ch,24px);padding:0 12px;overflow:hidden;background:var(--surface-2)}
/* The size moves only when the view is switched (not while the page settles at load). */
.dev.resize .chrome{transition:height .9s cubic-bezier(.65,0,.35,1)}
.dev .chrome i{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
/* The machine under the site, seen through the seams while the parts move. */
.dev .screen{position:relative;flex:1;min-height:0;overflow:hidden;background:var(--screen) radial-gradient(rgb(255 255 255/.07) 1px,transparent 1.3px) 0 0/14px 14px}
.dev iframe{position:absolute;left:0;top:0;display:block;border:0;width:var(--iw,1280px);height:calc((var(--h,calc(62cqw + 24px)) - var(--ch,24px)) / var(--s,.31));transform:scale(var(--s,.31));transform-origin:0 0}
.dev iframe.main{z-index:1}
.dev iframe.stage{z-index:0}
.cap{font-size:14px;color:var(--ink-3);margin:12px auto 0;max-width:56ch}
@media (prefers-reduced-motion:reduce){.dev .chrome,.dev.resize .chrome{transition:none}}

/* ---------- 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(15 31 34/.25);box-shadow:0 0 0 0 rgb(13 122 132/.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:0}
/* Footer links are at least 24 px tall (WCAG 2.5.8), so a thumb doesn't hit the neighbour. */
footer ul a,footer .legal a{display:inline-block;padding:5px 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(13 122 132/.55)}30%{transform:scale(.8)}100%{transform:scale(1);box-shadow:0 0 0 22px rgb(13 122 132/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:start;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}
}