/* Circl — "Grease Pencil". Quiet, exact chrome; the only hand-made thing is one burnt-orange stroke. */
@font-face{font-family:'Instrument Serif';src:url('/fonts/instrument-serif-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('/fonts/instrument-serif-latin-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
:root{
  color-scheme:light dark;
  --bg:#f7f5ee;--bg-2:#efede3;--surface:#fffefa;--raised:#fffefa;--desk:#ebe9df;
  --text:#233a30;--text-2:#3d5647;--muted:#5b6a5a;--line:#e1e3d8;--control:#cfd3c6;
  --mark:#c24e2b;--accent:#a8401f;--stroke:#e58a5b;--sage:#7c9372;--sage-soft:#dfe6d3;--sage-ink:#476040;
  --cta:#233a30;--cta-text:#fffefa;--cta-hover:#3d5647;
  --slab:#233a30;--slab-card:#fffefa;--slab-text:#f3f1e8;--slab-muted:#c9d0c0;--slab-label:#b9c4ad;
  --e1:0 1px 2px rgba(19,26,22,.06);--e2:0 12px 32px -12px rgba(19,26,22,.22),0 2px 6px rgba(19,26,22,.06);--hi:inset 0 1px 0 rgba(255,255,255,.6);
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',sans-serif;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);--ease-draw:cubic-bezier(.65,0,.35,1);
  --radius:12px;--shadow:var(--e2);
  --paper:var(--bg);--paper-2:var(--bg-2);--card:var(--surface);--ink:var(--text);--ink-2:var(--text-2);--orange:var(--mark);--orange-soft:var(--stroke);
}
@media(prefers-color-scheme:dark){:root{
  --bg:#17261f;--bg-2:#1b2c24;--surface:#1f3229;--raised:#2a4236;--desk:#13201a;
  --text:#f7f5ee;--text-2:#dfe5d8;--muted:#bdc9b5;--line:rgba(247,245,238,.09);--control:#82977b;
  --mark:#ff945c;--accent:#ff945c;--stroke:#ff945c;--sage:#b6cba6;--sage-soft:rgba(182,203,166,.14);--sage-ink:#b6cba6;
  --cta:#ff945c;--cta-text:#17261f;--cta-hover:#ffa877;
  --slab:#1f3229;--slab-card:#2a4236;--slab-text:#f7f5ee;--slab-muted:#bdc9b5;--slab-label:#bdc9b5;
  --e1:0 1px 2px rgba(0,0,0,.3);--e2:0 12px 32px -12px rgba(0,0,0,.65),0 2px 6px rgba(0,0,0,.25);--hi:inset 0 1px 0 rgba(255,255,255,.06);
}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
button,input,textarea{font:inherit;color:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{cursor:wait;opacity:.7}
:focus-visible{outline:2px solid var(--mark);outline-offset:3px;border-radius:4px}
::selection{background:rgba(229,138,91,.3)}
.wrap{max-width:1184px;margin:auto;padding:0 32px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hide,[hidden]{display:none!important}
.skip{position:absolute;top:-60px;left:15px;padding:12px 16px;background:var(--surface);color:var(--text);border-radius:8px;z-index:100}
.skip:focus{top:12px;box-shadow:var(--e2)}
kbd{font:500 .86em/1 var(--sans);display:inline-block;min-width:1.7em;padding:.28em .45em;text-align:center;border:1px solid var(--control);border-bottom-width:2px;border-radius:6px;background:var(--surface);color:var(--text);white-space:nowrap;vertical-align:.08em}

/* CirclMark: the app icon's stroke. Open = waiting, drawn = working, closed = done. */
.mark{display:block;fill:none;stroke:var(--mark);stroke-linecap:round;stroke-linejoin:round;stroke-width:62;overflow:visible}

/* Edge-print labels: like frame numbers on a contact sheet */
.section-label,.label{font:500 12px/1.4 var(--mono);letter-spacing:.01em;color:var(--muted);margin:0;display:flex;align-items:center;gap:10px}
.section-label b,.label b{font-weight:500;color:var(--accent)}

/* Navigation */
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.brand{text-decoration:none;display:inline-flex;align-items:center;gap:9px;font-weight:620;font-size:21px;letter-spacing:-.04em;min-height:44px;border-radius:8px}
.brand .mark{width:26px;height:26px;stroke-width:70}
.brand:hover .mark path{animation:redraw .6s var(--ease-draw)}
@keyframes redraw{from{stroke-dasharray:1 1.1;stroke-dashoffset:1.02}to{stroke-dasharray:1 1.1;stroke-dashoffset:0}}
.small-brand{font-size:17px}.small-brand .mark{width:20px;height:20px}
.nav-links{display:flex;align-items:center;gap:4px;font-size:14px}
.nav-links a:not(.btn),.nav>.text-link{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;text-decoration:none;color:var(--muted);border-radius:8px;transition:color .15s}
.nav-links a:not(.btn):hover,.nav>.text-link:hover{color:var(--text)}
.nav-links .btn{margin-left:10px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:10px 20px;border:1px solid transparent;border-radius:99px;background:var(--cta);color:var(--cta-text);font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;text-decoration:none;cursor:pointer;box-shadow:var(--e1);transition:background-color .15s,transform .15s var(--ease)}
.btn:hover{background:var(--cta-hover)}
.btn:active{transform:scale(.98)}
.btn:focus-visible{outline:2px solid var(--mark);outline-offset:3px;border-radius:99px}
.btn.big{min-height:52px;padding:14px 26px;font-size:16px}
.btn.small{padding:8px 16px;font-size:14px}
.btn.wide{width:100%}
.btn.light{background:transparent;color:var(--text);border-color:var(--control);box-shadow:none}
.btn.light:hover{background:var(--bg-2)}
.btn[aria-disabled=true]{background:var(--bg-2);color:var(--muted);border-color:var(--line);box-shadow:none;cursor:default;transform:none}
.btn .arrow{flex:none;width:17px;height:17px;margin-top:-2px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.text-link{font-size:15px;color:var(--text-2);text-underline-offset:4px;display:inline-flex;align-items:center;min-height:44px}
.text-link:hover{color:var(--text)}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);column-gap:64px;padding:40px 0 0}
.hero-head{align-self:end}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(44px,6.2vw,84px);line-height:.96;letter-spacing:-.03em;margin:20px 0 0;text-wrap:balance}
.scribble{position:relative;display:inline-block;font-style:italic;color:var(--mark);padding:0 .04em}
.scribble svg{position:absolute;left:-12%;top:-14%;width:124%;height:132%;overflow:visible;pointer-events:none}
.scribble path{fill:none;stroke:var(--stroke);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1 1.1;stroke-dashoffset:1.02;animation:draw .9s .25s var(--ease-draw) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hero-side{align-self:end;padding-bottom:6px}
.lead{font-size:18px;line-height:1.6;color:var(--text-2);max-width:420px;margin:0}
.cta-row{display:flex;align-items:center;gap:8px 22px;margin:28px 0 12px;flex-wrap:wrap}
.fine{font-size:14px;line-height:1.55;color:var(--muted);margin:0}
.launch-status{font-size:14px;color:var(--accent);min-height:20px;max-width:440px;margin:8px 0 0}
.launch-status:empty{min-height:0;margin:0}

/* Product demo: one 960×560 scene, scaled with container units (1em = 10 scene px) */
.demo{grid-column:1/-1;width:100%;max-width:900px;justify-self:center;margin:32px 0 0}
.demo-frame{container-type:inline-size;border-radius:20px;border:1px solid var(--line);background:var(--desk);box-shadow:var(--hi),var(--e1);overflow:hidden;position:relative}
.stage{font-size:10px;font-size:calc(100cqw / 96);aspect-ratio:960/560;position:relative;overflow:hidden;font-family:var(--sans);color:#233a30}
/* Text in the demo is never faded: it appears at full contrast, revealed by clip-path wipes or switched instantly. */
.scene{position:absolute;left:0;top:0;width:96em;height:56em;clip-path:inset(0 0 0 0);transition:clip-path .25s var(--ease-draw),transform .7s var(--ease)}
.demo.is-fading .scene{clip-path:inset(0 0 0 100%)}
.demo.is-reset *,.demo.is-reset{transition:none!important;animation:none!important}
.demo.is-paused *{animation-play-state:paused!important}
.demo.is-paused .hud-words span:after{animation:none;opacity:0}
.stage:before,.stage:after{content:'';position:absolute;width:2.4em;height:2.4em;border:0 solid var(--control);z-index:1;opacity:.8}
.stage:before{left:1.4em;top:1.4em;border-width:1px 0 0 1px}
.stage:after{right:1.4em;bottom:1.4em;border-width:0 1px 1px 0}
.win{position:absolute;border-radius:1.2em;box-shadow:0 1.2em 3.2em -1.2em rgba(19,26,22,.3),0 .2em .6em rgba(19,26,22,.08)}
.win-bar{height:3.2em;display:flex;align-items:center;gap:.6em;padding:0 1.4em;font-size:1em}
.win-bar i{width:1em;height:1em;border-radius:50%;background:#dcdfd3}
.win-bar span{flex:1;text-align:center;margin-right:4.8em;font-size:1.1em;color:#5b6a5a}
.browser{left:4em;top:3.6em;width:60em;height:40.4em;background:#fcfbf6;border:1px solid #e1e3d8}
.browser .win-bar{border-bottom:1px solid #eceee5;border-radius:1.2em 1.2em 0 0;background:#f6f6f0}
.site{display:grid;grid-template-columns:13.2em 1fr;height:37.2em}
.site-side{background:#f1f3eb;padding:2.6em 1.8em;font-size:1.2em;color:#5b6a5a;border-bottom-left-radius:1em}
.site-side b{display:block;font-size:1.2em;color:#33483c;margin-bottom:2em}
.site-side span{display:block;margin:0 0 1.15em}
.site-main{padding:3.4em 3em;display:flex;flex-direction:column;align-items:flex-start}
.site-kicker{font-size:1em;letter-spacing:.12em;text-transform:uppercase;color:#5b6a5a}
.site-title{font-family:var(--serif);font-size:3.4em;line-height:1.1;letter-spacing:-.02em;margin:.25em 0 .55em;color:#233a30}
.site-card{width:38em;display:flex;justify-content:space-between;align-items:center;padding:1.5em 1.6em;border-radius:1em;background:#f2f2ea;font-size:1.2em;color:#5b6a5a}
.site-card b{display:block;font-size:1.2em;color:#233a30;margin-top:.2em}
.site-btn{position:absolute;left:16.2em;top:25.2em;width:13.2em;height:3.4em;display:grid;place-items:center;border-radius:.4em;background:#d6dfc8;color:#233a30;font-size:1em}
.site-btn span{font-size:1.2em;font-weight:500}
.term{left:53em;top:7.2em;width:40em;height:35.4em;background:#121c17;border:1px solid rgba(255,255,255,.07);color:#dfe6d8;z-index:1;transition:border-color .3s,box-shadow .3s}
.term .win-bar{border-bottom:1px solid rgba(255,255,255,.06)}
.term .win-bar i{background:#2f3f37}
.term .win-bar span{color:#8f9d8b}
.term-body{font-family:var(--mono);font-size:1.3em;line-height:1.6;padding:1.1em 1.3em;height:calc(100% - 2.5em);display:flex;flex-direction:column}
.term-line{color:#8f9d8b}
.term-line b{font-weight:400;color:#dfe6d8}
.term-log{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:.3em;padding-top:.8em;min-height:0;overflow:hidden}
.term-sent,.term-work,.term-step{clip-path:inset(0 100% 0 0);transition:clip-path .35s var(--ease-draw)}
.term-sent{color:#dfe6d8}
.term-work{display:flex;align-items:center;gap:.6em;color:#ff945c;margin-top:.3em}
.spin{width:.95em;height:.95em;fill:none;stroke:#ff945c;stroke-width:96;stroke-linecap:round;overflow:visible}
.term-step{color:#a9b6a5}
.term-box{margin-top:.8em;display:flex;gap:.7em;border:1px solid rgba(255,255,255,.14);border-radius:.5em;padding:.75em .9em;min-height:3.9em;transition:border-color .3s}
.term-prompt{color:#ff945c}
.term-draft{display:grid;flex:1}
.term-draft>span{grid-area:1/1}
.term-paste{visibility:hidden;color:#dfe6d8}
.chip{color:#ff945c}
.caret{display:inline-block;width:.55em;height:1.1em;background:#dfe6d8;vertical-align:-.15em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.term-foot{display:flex;justify-content:space-between;align-items:center;font-size:.85em;color:#8f9d8b;margin-top:.7em;height:1.8em}
.term-foot .auto{transition:color .3s}
.dim-full,.dim-hole{position:absolute;z-index:5;pointer-events:none;opacity:0;transition:opacity .24s}
.dim-full{inset:0;background:rgba(19,26,22,.24)}
.dim-hole{left:16.8em;top:25.8em;width:20.2em;height:9.2em;border-radius:50%;box-shadow:0 0 0 120em rgba(19,26,22,.4)}
.lasso{position:absolute;left:16.2em;top:26.2em;width:21.2em;height:8.6em;overflow:visible;z-index:6;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:opacity .3s}
.lasso .halo{stroke:rgba(19,26,22,.12);stroke-width:6}
.lasso .ink{stroke:#ff945c;stroke-width:3.2}
.lasso path{stroke-dasharray:1 1.1;stroke-dashoffset:1.02}
.ticks{position:absolute;left:15.6em;top:25.4em;width:22.4em;height:10em;z-index:6;opacity:0;transform:scale(1.06);transition:opacity .2s,transform .24s var(--ease)}
.ticks i{position:absolute;width:1em;height:1em;border:0 solid rgba(255,255,255,.9)}
.ticks i:nth-child(1){left:0;top:0;border-width:1px 0 0 1px}.ticks i:nth-child(2){right:0;top:0;border-width:1px 1px 0 0}
.ticks i:nth-child(3){left:0;bottom:0;border-width:0 0 1px 1px}.ticks i:nth-child(4){right:0;bottom:0;border-width:0 1px 1px 0}
.hud{position:absolute;left:10em;top:43.2em;width:42em;height:12em;z-index:10;display:flex;gap:1.4em;align-items:flex-start;padding:1.4em;border-radius:1.8em;background:rgba(255,254,250,.97);border:1px solid #e1e3d8;box-shadow:inset 0 1px 0 #fff,0 1.2em 3.2em -1.2em rgba(19,26,22,.3),0 .2em .6em rgba(19,26,22,.08);clip-path:inset(100% 0 0 0);transform:translateY(1.6em);transition:clip-path .3s var(--ease),transform .36s var(--ease)}
.hud-thumb{flex:none;width:7.2em;height:7.2em;border-radius:.8em;border:1px solid #e1e3d8;background:#fcfbf6;position:relative;overflow:hidden}
.hud-thumb:before{content:'';position:absolute;left:1.6em;top:3.2em;width:4em;height:1.1em;border-radius:.15em;background:#d6dfc8}
.hud-thumb:after{content:'';position:absolute;left:.9em;top:2.5em;width:5.4em;height:2.4em;border:2px solid #ff945c;border-radius:50%;transform:rotate(-6deg)}
.hud-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:.35em}
.hud-status{display:flex;align-items:center;gap:.6em;font-size:1.2em;color:#5b6a5a;height:1.9em}
.listen{width:1.8em;height:1.8em;overflow:visible;fill:none;stroke-linecap:round}
.listen .open{stroke:#c24e2b;stroke-width:44;transform-origin:526px 505px;transition:opacity .15s}
.listen .closed{stroke:#7c9372;stroke-width:80;stroke-dasharray:1 1.1;stroke-dashoffset:1.02}
.hud-state{font-weight:600;color:#a8401f}
.hud-count{margin-left:auto;font-variant-numeric:tabular-nums}
.hud-words{font-size:1.5em;line-height:1.35;color:#233a30;min-height:2.7em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hud-words span.new{position:relative}
.hud-words span.new:after{content:'';position:absolute;left:0;right:0;bottom:.04em;height:.12em;border-radius:.06em;background:#ff945c;transform-origin:left;animation:word-line .5s var(--ease) both}
.hud-words span.new:not(:first-child):after{left:.28em}
.hud-words:empty:before{content:'Say what you want changed…';color:#5b6a5a}
@keyframes word-line{0%{transform:scaleX(0)}55%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
.hud-hint{font-size:1.15em;color:#5b6a5a;visibility:hidden;margin-top:.15em}
.hud-hint>span{display:none}
.keys{position:absolute;left:11em;top:37.6em;z-index:11;display:flex;align-items:center;gap:.45em;padding:.6em 1em .6em .6em;border-radius:1.2em;background:rgba(255,254,250,.97);border:1px solid #e1e3d8;box-shadow:0 .8em 2em -1em rgba(19,26,22,.3)}
.keys kbd{font:600 1.3em/1 var(--sans);min-width:1.9em;padding:.32em .4em .28em;border-radius:.4em;border:1px solid #cfd3c6;border-bottom-width:.18em;background:#fff;color:#233a30;transition:transform .12s,background .12s,border-color .12s}
.keys-label{font-size:1.25em;color:#5b6a5a;margin-left:.35em}
.keys-label>span{display:none}
.keys .k-hold{display:inline}
.cursor{position:absolute;left:0;top:0;width:1.7em;height:2.5em;z-index:20;fill:#16211b;stroke:#fff;stroke-width:1.3;stroke-linejoin:round;transform:translate(42em,38em);transition:transform .45s var(--ease);filter:drop-shadow(0 .1em .2em rgba(0,0,0,.25))}
/* steps: 0 idle · 1 held, listening · 2 circling while talking · 3 let go, sending · 4 in the prompt · 5 submitted · 6 the agent works */
.demo[data-step='1'] .dim-full,.demo[data-step='2'] .dim-full{opacity:1}
.demo[data-step='3'] .dim-hole,.demo[data-step='3'] .ticks{opacity:1;transform:none}
.demo[data-step='2'] .lasso path{stroke-dashoffset:0;transition:stroke-dashoffset 1.45s linear .05s}
.demo[data-step='3'] .lasso path{stroke-dashoffset:0}
.demo[data-step='4'] .lasso,.demo[data-step='5'] .lasso,.demo[data-step='6'] .lasso{opacity:0}
.demo[data-step='1'] .cursor{transform:translate(33.4em,27.6em)}
.demo[data-step='2'] .cursor{transform:translate(33.4em,27.6em);animation:lasso-cursor 1.5s linear forwards}
@keyframes lasso-cursor{
  0%{transform:translate(33.4em,27.6em)}13%{transform:translate(25.7em,26.7em)}27%{transform:translate(18em,29.2em)}40%{transform:translate(20.2em,33em)}
  54%{transform:translate(27em,34.2em)}68%{transform:translate(35.2em,32.4em)}80%{transform:translate(35.8em,29.6em)}91%{transform:translate(32.2em,27.4em)}100%{transform:translate(29.4em,27.1em)}}
.demo[data-step='3'] .cursor{transform:translate(29.4em,27.1em)}
.demo[data-step='4'] .cursor,.demo[data-step='5'] .cursor,.demo[data-step='6'] .cursor{transform:translate(40em,33.5em);transition-duration:.7s}
/* the held shortcut */
.demo[data-step='1'] .keys kbd,.demo[data-step='2'] .keys kbd{transform:translateY(.12em);border-bottom-width:1px;background:#fbe6da;border-color:#e58a5b}
.demo[data-step='1'] .k-hold,.demo[data-step='2'] .k-hold,.demo[data-step='3'] .k-hold{display:none}
.demo[data-step='1'] .k-held,.demo[data-step='2'] .k-held{display:inline;color:#a8401f}
.demo[data-step='3'] .k-go{display:inline;color:#476040}
.demo[data-step='4'] .keys,.demo[data-step='5'] .keys,.demo[data-step='6'] .keys{visibility:hidden}
/* the HUD meters the voice while you circle */
.demo[data-step='1'] .hud,.demo[data-step='2'] .hud,.demo[data-step='3'] .hud,.demo[data-step='4'] .hud{clip-path:inset(-4em -4em -4em -4em);transform:none}
.demo[data-step='2'] .listen .open{stroke-width:72;animation:voice 1.7s linear infinite}
@keyframes voice{0%{transform:scale(1) rotate(0)}12%{transform:scale(1.14) rotate(-6deg)}22%{transform:scale(1.03) rotate(3deg)}35%{transform:scale(1.18) rotate(-3deg)}
  47%{transform:scale(1.06) rotate(5deg)}58%{transform:scale(1.12) rotate(-5deg)}70%{transform:scale(1.01) rotate(2deg)}84%{transform:scale(1.16) rotate(-4deg)}100%{transform:scale(1) rotate(0)}}
.demo[data-step='3'] .listen .open,.demo[data-step='4'] .listen .open{opacity:0}
.demo[data-step='3'] .listen .closed{stroke:#c24e2b;stroke-dashoffset:0;transition:stroke-dashoffset .55s var(--ease-draw)}
.demo[data-step='4'] .listen .closed{stroke-dashoffset:0;transition:stroke .3s}
.demo[data-step='4'] .hud-state{color:#476040}
.demo[data-step='3'] .hud-hint,.demo[data-step='4'] .hud-hint{visibility:visible}
.demo[data-step='3'] .h-sending,.demo[data-step='4'] .h-sent{display:inline}
/* the prompt receives it, it's submitted, the agent starts */
.demo[data-step='4'] .term,.demo[data-step='5'] .term,.demo[data-step='6'] .term{border-color:rgba(255,148,92,.35)}
.demo[data-step='4'] .term-box{border-color:rgba(255,255,255,.3)}
.demo[data-step='4'] .term-empty{visibility:hidden}
.demo[data-step='4'] .term-paste{visibility:visible}
.demo[data-step='5'] .term-sent,.demo[data-step='6'] .term-sent,.demo[data-step='5'] .term-work,.demo[data-step='6'] .term-work{clip-path:inset(0 0 0 0)}
.demo[data-step='5'] .spin,.demo[data-step='6'] .spin{animation:spin 1.4s linear infinite}
.demo[data-step='5'] .term-foot .auto,.demo[data-step='6'] .term-foot .auto{color:#b6cba6}
.demo[data-step='6'] .term-step{clip-path:inset(0 0 0 0)}
.demo[data-step='6'] .s2{transition-delay:.8s}
.demo[data-step='6'] .s3{transition-delay:1.6s}
@keyframes press{0%,30%,100%{transform:none;box-shadow:0 0 0 0 rgba(255,148,92,0)}12%{transform:translateY(.1em);box-shadow:0 0 0 .4em rgba(255,148,92,.22)}}
/* controls */
.demo-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:14px}
.demo-steps{display:flex;gap:4px;flex-wrap:wrap}
.demo-steps button,.demo-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:0;border-radius:8px;background:none;font:500 12px/1 var(--mono);color:var(--muted);transition:color .15s,background .15s}
.demo-steps button span{color:var(--muted)}
.demo-steps button:hover,.demo-toggle:hover{color:var(--text);background:var(--bg-2)}
.demo-steps button[aria-current=step]{color:var(--text)}
.demo-steps button[aria-current=step] span{color:var(--accent)}
.demo-toggle svg{width:12px;height:12px;fill:currentColor}
.demo-toggle .play,.demo-toggle[aria-pressed=true] .pause{display:none}
.demo-toggle[aria-pressed=true] .play{display:block}

/* Sections */
.section{padding:76px 0 0}
.section h2,.pricing h2,.document .display{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.4vw,56px);letter-spacing:-.02em;line-height:1.04;margin:16px 0 0;text-wrap:balance}
.section h2 em,.pricing h2 em{color:var(--mark)}
.section-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);column-gap:64px;align-items:end;margin-bottom:36px}
.section-head p:not(.section-label){margin:0;color:var(--text-2);font-size:17px;max-width:440px}

/* How it works: three live vignettes */
.daily{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.daily>div{border-top:1px solid var(--line);padding-top:20px}
.vignette{height:104px;border-radius:12px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--hi),var(--e1);margin:16px 0 20px;display:grid;place-items:center;position:relative;overflow:hidden}
.vignette svg{overflow:visible;fill:none;stroke-linecap:round;stroke-linejoin:round}
.daily p{margin:0;font-size:15px;line-height:1.6;color:var(--muted);max-width:320px}
.daily strong{color:var(--text);font-weight:600}
.v-btn{position:absolute;width:96px;height:28px;border-radius:5px;background:var(--sage-soft);border:1px solid var(--line)}
.v-lasso{width:150px;height:66px;position:relative}
.v-lasso path{stroke:var(--mark);stroke-width:2.6;stroke-dasharray:1 1.1;stroke-dashoffset:0}
.v-listen{width:56px;height:56px}
.v-listen .open{stroke:var(--mark);stroke-width:48;transform-origin:526px 505px}
.v-listen .closed{stroke:var(--sage);stroke-width:60;stroke-dasharray:1 1.1;stroke-dashoffset:0}
.v-listen .open{opacity:0}
.v-keys{display:flex;gap:8px}
.v-keys kbd{font-size:18px;min-width:44px;padding:9px 0 8px;border-radius:8px}
.vignette .v-listen.mini{position:absolute;right:16px;bottom:14px;width:26px;height:26px}
.v-sent{display:flex;flex-direction:column;gap:8px;font:13px/1.3 var(--mono);color:var(--text-2)}
.v-sent .chip{color:var(--accent)}
.v-work{display:flex;align-items:center;gap:8px;color:var(--accent)}
.v-work .spin{width:13px;height:13px;fill:none;stroke:var(--mark);stroke-width:96;stroke-linecap:round;overflow:visible}
.js .daily:not(.is-in) .v-lasso path{stroke-dashoffset:1.02}
.js .daily:not(.is-in) .v-listen .closed{stroke-dashoffset:1.02}
.js .daily:not(.is-in) .v-line,.js .daily:not(.is-in) .v-work{clip-path:inset(0 100% 0 0)}
.daily.is-in .v-lasso path{transition:stroke-dashoffset .9s var(--ease-draw) .2s}
.daily.is-in .v-listen .open{animation:listen-once 2.4s linear .3s both}
.daily.is-in .v-listen .closed{transition:stroke-dashoffset .55s var(--ease-draw) 2.7s}
@keyframes listen-once{0%{opacity:1;stroke-width:24}8%{stroke-width:56}20%{transform:scale(1.12) rotate(-5deg)}35%{transform:scale(1.04) rotate(4deg)}50%{transform:scale(1.15) rotate(-3deg)}65%{transform:scale(1.02) rotate(3deg)}80%{transform:scale(1.1) rotate(-2deg)}99%{opacity:1;transform:none}100%{opacity:0}}
.daily.is-in .v-keys kbd{animation:hold 2.6s .3s var(--ease) both}
@keyframes hold{0%,100%{transform:none;box-shadow:0 0 0 0 rgba(255,148,92,0)}12%,78%{transform:translateY(2px);box-shadow:0 0 0 3px rgba(229,138,91,.28)}}
.daily.is-in .v-line{transition:clip-path .45s var(--ease-draw) 1.2s}
.daily.is-in .v-work{transition:clip-path .35s var(--ease-draw) 1.7s}
.daily.is-in .v-work .spin{animation:spin 1.4s linear 1.6s 3}

/* Works with: plain app names, no logos */
.works{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:24px 64px;align-items:end}
.app-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.app-list li{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:99px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--hi),var(--e1);font-size:16px;font-weight:550;letter-spacing:-.01em}
.app-list li.any{background:none;border-color:transparent;box-shadow:none;padding:0 6px;font-weight:400;color:var(--muted);font-family:var(--serif);font-style:italic;font-size:20px}

/* Pricing: ink slab */
.pricing{margin-top:76px;background:var(--slab);color:var(--slab-text);border-radius:24px;padding:44px 64px;display:grid;grid-template-columns:1fr minmax(0,440px);gap:64px;align-items:center;border:1px solid var(--line)}
.pricing .section-label{color:var(--slab-label)}
.pricing .section-label b{color:#ff945c}
.pricing h2 em{color:#ff945c}
.pricing-copy p:not(.section-label){font-size:17px;color:var(--slab-muted);line-height:1.65;max-width:440px;margin:20px 0 0}
.price-card{background:var(--slab-card);color:var(--text);border-radius:16px;padding:28px 32px;box-shadow:var(--hi),0 30px 60px -30px rgba(0,0,0,.5)}
.price{font-family:var(--serif);font-size:72px;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.price small{font:15px var(--sans);letter-spacing:0;color:var(--muted);margin-left:4px}
.price-card ul{padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;column-gap:20px;font-size:15px;margin:20px 0 24px;border-top:1px solid var(--line)}
.price-card li{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.price-card li:before{content:'';width:18px;height:18px;flex:none;background:var(--mark);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='196 175 660 660'%3E%3Cpath transform='matrix(1 0 0 -1 0 1024)' d='M785 669C715 800 620 824 502 784C271 752 192 537 239 435C291 233 541 198 677 270C872 374 850 585 761 640C752 646 770 660 785 669' fill='none' stroke='%23000' stroke-width='70' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='196 175 660 660'%3E%3Cpath transform='matrix(1 0 0 -1 0 1024)' d='M785 669C715 800 620 824 502 784C271 752 192 537 239 435C291 233 541 198 677 270C872 374 850 585 761 640C752 646 770 660 785 669' fill='none' stroke='%23000' stroke-width='70' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.price-card li a{color:var(--text-2)}
.price-card p{margin:0}
.price-alt{text-align:center;font-size:14px;margin:6px 0 10px!important}
.price-alt a{color:var(--text-2);display:inline-flex;align-items:center;min-height:44px}
.price-card .fine{text-align:center}

/* FAQ */
.faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:64px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--text)}
.faq summary{font-size:17px;font-weight:500;cursor:pointer;line-height:1.45;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:44px;padding:16px 0;border-radius:4px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:'+';font:300 24px/1 var(--sans);color:var(--accent);transition:transform .2s var(--ease)}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq details p{font-size:15px;color:var(--muted);line-height:1.7;margin:0 0 20px;max-width:620px}

/* Footer */
.footer{padding:28px 0 20px;margin-top:76px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:24px;font-size:14px;color:var(--muted)}
.footer-links{display:flex;gap:4px 20px;flex-wrap:wrap}
.footer a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.footer a:hover{color:var(--text)}

/* Secondary pages */
.document{max-width:680px;margin:56px auto 0;min-height:55vh}
.document h1{font-family:var(--serif);font-weight:400;font-size:clamp(44px,6vw,64px);letter-spacing:-.03em;line-height:1;margin:16px 0 20px;text-wrap:balance}
.document h2{font-size:20px;font-weight:600;margin:48px 0 8px;letter-spacing:-.01em}
.document p,.document li{font-size:16px;line-height:1.7;color:var(--text-2)}
.document li{padding-bottom:10px}
.document strong{color:var(--text)}
.document .fine{font-size:14px;color:var(--muted)}
.document .error-message{font-size:14px;color:var(--muted)}
.card .cta-row{margin:4px 0 0}
.card .cta-row:empty{display:none}
.document ol.big-steps{list-style:none;padding:0;counter-reset:s;margin:20px 0}
.document ol.big-steps li{counter-increment:s;position:relative;padding:14px 0 14px 52px;border-top:1px solid var(--line)}
.document ol.big-steps li:before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:18px;font:500 12px/1.6 var(--mono);color:var(--accent)}
.card,.form-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px;margin:24px 0;box-shadow:var(--hi),var(--e1)}
.card>:first-child,.form-card>:first-child{margin-top:0}.card>:last-child,.form-card>:last-child{margin-bottom:0}
.card-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:28px 0}
.card-grid .card{margin:0;display:flex;flex-direction:column;gap:12px}
.card-grid .card p{margin:0}
.card .section-label{margin-bottom:2px}
.form-card .cta-row{margin:16px 0 0;gap:12px}
.error-message{font-size:14px;color:var(--accent);line-height:1.6;min-height:20px}
.card .error-message,.form-card .error-message{margin:0;min-height:0}
.card .error-message:empty{display:none}
.notice{background:var(--bg-2);border-radius:10px;padding:14px 18px;font-size:15px!important}
.spinner{display:inline-block;width:14px;height:14px;border:1.5px solid var(--line);border-top-color:var(--mark);border-radius:50%;animation:spin .8s linear infinite;vertical-align:-2px;margin-right:10px}
@keyframes spin{to{transform:rotate(360deg)}}
.links-row{font-size:15px;color:var(--muted)}
/* status mark on /welcome, /claim, /start: open while waiting, closes when done */
.status-mark{width:72px;height:72px;margin:0 0 8px}
.status-mark .mark{width:72px;height:72px;stroke-width:40}
.status-mark .mark path{stroke-dasharray:1 1.1;stroke-dashoffset:.16;transition:stroke-dashoffset .6s var(--ease-draw),stroke .3s}
[data-state=working] .status-mark .mark{animation:spin 2.4s linear infinite}
[data-state=done] .status-mark .mark path{stroke-dashoffset:0;stroke:var(--sage)}
[data-state=error] .status-mark .mark path{stroke:var(--muted)}
.next-steps{list-style:none;padding:0;margin:20px 0 0;border-top:1px solid var(--line)}
.next-steps li{display:grid;grid-template-columns:28px 1fr;gap:14px;padding:14px 0!important;border-bottom:1px solid var(--line);margin:0}
.next-steps li:last-child{border-bottom:0;padding-bottom:0!important}
.next-steps .mark{width:22px;height:22px;stroke-width:56;margin-top:2px;stroke:var(--control)}
.next-steps .mark path{stroke-dasharray:1 1.1;stroke-dashoffset:.16;transition:stroke-dashoffset .6s var(--ease-draw)}
.next-steps b{display:block;color:var(--text);font-weight:600}
[data-state=opening] .next-steps li:first-child .mark{stroke:var(--mark)}
[data-state=opening] .next-steps li:first-child .mark path{stroke-dashoffset:0}
/* support */
.support{display:grid;grid-template-columns:200px minmax(0,680px);gap:72px;justify-content:center;margin-top:56px}
.support .document{margin:0;max-width:none}
.toc{position:sticky;top:24px;align-self:start;font-size:14px;padding-top:8px}
.toc ol{list-style:none;padding:0;margin:14px 0 0;border-top:1px solid var(--line)}
.toc a{display:flex;align-items:center;min-height:36px;color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)}
.toc a:hover{color:var(--text)}
/* phones: the contents fold into one row so setup help stays on the first screen */
.toc-mobile{display:none}
.trouble{margin:16px 0 0;border-top:1px solid var(--text)}
.trouble details{border-bottom:1px solid var(--line)}
.trouble summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:52px;padding:12px 0;font-size:17px;font-weight:500;color:var(--text);border-radius:4px}
.trouble summary::-webkit-details-marker{display:none}
.trouble summary:after{content:'+';font:300 24px/1 var(--sans);color:var(--accent);transition:transform .2s var(--ease)}
.trouble details[open] summary:after{transform:rotate(45deg)}
.trouble details p{margin:0 0 16px}

/* Responsive */
@media(max-width:900px){
  .wrap{padding:0 20px}
  .nav{height:64px}
  .nav-links a.desktop{display:none}
  .hero{grid-template-columns:1fr;padding-top:32px}
  .hero-side{padding:0;margin-top:20px}
  .demo{margin-top:40px}
  .section{padding-top:72px}
  .section-head{grid-template-columns:1fr;row-gap:16px;margin-bottom:28px}
  .daily{grid-template-columns:1fr;gap:16px}
  .works{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr;padding:40px 24px;gap:32px;margin-top:72px;border-radius:20px}
  .faq{grid-template-columns:1fr;gap:20px}
  .footer{flex-direction:column;align-items:flex-start;margin-top:72px;gap:8px}
  .support{grid-template-columns:1fr;gap:0;margin-top:32px}
  .toc{display:none}
  .toc-mobile{display:block;margin:0 0 24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .toc-mobile summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:48px;font:500 12px/1 var(--mono);color:var(--muted);border-radius:4px}
  .toc-mobile summary::-webkit-details-marker{display:none}
  .toc-mobile summary:after{content:'+';font:300 22px/1 var(--sans);color:var(--accent);transition:transform .2s var(--ease)}
  .toc-mobile[open] summary:after{transform:rotate(45deg)}
  .toc-mobile ol{list-style:none;padding:0 0 12px;margin:0;display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
  .toc-mobile a{display:flex;align-items:center;min-height:44px;font-size:15px;color:var(--text-2);text-decoration:none;border-top:1px solid var(--line)}
  .card-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .demo-frame{border-radius:16px}
  .stage{font-size:calc(100cqw / 44);aspect-ratio:440/540}
  .scene{transform:translate(-9em,-1.6em)}
  .demo[data-step='4'] .scene,.demo[data-step='5'] .scene,.demo[data-step='6'] .scene{transform:translate(-50.5em,2em)}
  .stage:before,.stage:after{display:none}
  .demo-bar{align-items:flex-start}
  .demo-steps button{padding:0 8px}
  .demo-steps button span{display:none}
  .demo-toggle{padding:0 14px}
  .demo-toggle span{display:none}
  .demo-steps button{padding:0 7px}
  .lead{font-size:17px}
  .btn.big{width:100%}
  .cta-row{gap:4px 14px;margin-top:24px}
  .app-list{gap:8px}
  /* phones: each step is one compact row, drawing on the left */
  .daily>div{display:grid;grid-template-columns:124px minmax(0,1fr);grid-template-areas:'v label' 'v text';column-gap:16px;row-gap:4px;align-items:start;padding-top:16px}
  .daily .label{grid-area:label}
  .daily .vignette{grid-area:v;height:76px;margin:0}
  .daily>div>p:last-child{grid-area:text}
  .v-keys{gap:4px}.v-keys kbd{font-size:13px;min-width:28px;padding:6px 0 5px;border-radius:6px}
  .v-lasso{width:88px;height:40px}.v-btn{width:56px;height:18px}
  .vignette .v-listen.mini{right:8px;bottom:8px;width:16px;height:16px}
  .v-sent{font-size:9.5px;gap:5px;white-space:nowrap}
  .pricing{margin-top:64px}
  .section{padding-top:64px}
  .app-list li{padding:0 14px;font-size:15px}
  .price-card{padding:24px}
  .price-card ul{grid-template-columns:1fr}
  .price{font-size:60px}
  .document{margin-top:32px}
}
/* Homepage only (body.home): tighter rhythm so the page reads in about two desktop scrolls */
.home .hero{padding-top:28px}
.home .demo{max-width:800px;margin-top:24px}
.home .demo-bar{margin-top:8px}
.home .section{padding-top:56px}
.home .section-head{margin-bottom:28px}
.home .vignette{height:96px;margin:14px 0 16px}
.home .pricing{margin-top:56px;padding:32px 56px;grid-template-columns:1fr minmax(0,480px);gap:56px}
.home .price-card{padding:22px 28px}
.home .price{font-size:60px}
.home .price-card ul{margin:14px 0 16px}
.home .price-card li{padding:8px 0}
.home .price-alt{margin:2px 0 4px!important}
.home .faq summary{padding:12px 0}
.home .footer{margin-top:56px}
.home .seo-footer{padding-bottom:28px}
@media(max-width:900px){
  .home .hero{padding-top:24px}
  .home .demo{margin-top:32px}
  .home .pricing{grid-template-columns:1fr;padding:32px 24px;gap:24px;margin-top:56px}
}
@media(max-width:600px){
  .home .section{padding-top:48px}
  .home .pricing{margin-top:48px}
  .home .price-card{padding:20px}
  .home .price{font-size:52px}
  .home .daily .vignette{height:76px;margin:0}
  .home .footer{margin-top:48px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition-duration:.12s!important;transition-delay:0s!important;transition-property:opacity!important}
  .scribble path{stroke-dashoffset:0}
  .btn:active{transform:none}
  .js .daily:not(.is-in) .v-lasso path,.js .daily:not(.is-in) .v-listen .closed{stroke-dashoffset:0}
  .js .daily:not(.is-in) .v-line,.js .daily:not(.is-in) .v-work{clip-path:none}
}