@font-face { font-family:"Geist"; src:url(/fonts/geist-latin.woff2) format("woff2"); font-weight:100 900; font-display:swap; }
@font-face { font-family:"Geist Mono"; src:url(/fonts/geist-mono-latin.woff2) format("woff2"); font-weight:100 900; font-display:swap; }
@font-face { font-family:"Heebo"; src:url(/fonts/heebo-hebrew.woff2) format("woff2"); font-weight:100 900; font-display:swap; unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }

:root {
  color-scheme: light;
  /* color */
  --paper:#fcfcfb; --ink:#0c0c0d; --ink-2:#38383b; --muted:#6a6a6f; --faint:#707075;
  --dark-1:#18181b; --dark-2:#232326; --dark-3:#38383c; --dark-fg:#d6d6d2; --dark-dim:#8d8d92; --hover-ink:#2a2a2d; --err:#c4202b; --ok:#8fd19e; --dot:#dcdcd6;
  --sec-y:clamp(72px,9vw,120px); --end-y:clamp(96px,12vw,150px); --hero-y:clamp(120px,14vw,220px) var(--s-5); --split-gap:clamp(28px,4vw,56px);
  --white:#fff; --surface:#fff; --on-ink:#fff; --term-bg:#0c0c0d; --term-hi:#fff; --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
  --line:#e7e7e3; --line-2:#d6d6d1; --soft:#f2f2ef; --accent:#2a46ff; --accent-ink:#1f35d6;
  /* type */
  --sans:"Geist","Heebo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --t-xs:12px; --t-sm:13.5px; --t-base:15px; --t-md:17px; --t-lg:19px;
  --t-h2:clamp(34px,4.2vw,52px); --t-said:clamp(20px,2.1vw,27px); --t-h1:clamp(44px,6.2vw,84px);
  /* shape */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-pill:999px;
  --pad:clamp(20px,3vw,40px); --max:1240px;
}
[data-theme="dark"] {
  color-scheme: dark;
  --paper:#0a0a0b; --ink:#ededeb; --ink-2:#c9c9c5; --muted:#9b9ba0; --faint:#8c8c91; --hover-ink:#d0d0cc; --err:#ff6b6b; --dot:#232327;
  --line:#27272b; --line-2:#3a3a3f; --soft:#222226; --surface:#19191c; --on-ink:#0a0a0b; --term-bg:#1a1a1d; --ok:#7fe0a0;
  --accent:#6b80ff; --accent-ink:#6b80ff;
}
[data-theme="dark"] .term { box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 1px var(--line-2), 0 30px 70px -24px #000; }
[data-theme="dark"] .term-bar { border-bottom-color:var(--line-2); }
[data-theme="dark"] .keys { background:#26262a; color:#ededeb; box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(255,255,255,.16), 0 22px 48px -12px #000, 0 10px 40px -10px rgba(107,128,255,.18); }
[data-theme="dark"] .keys:hover { box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(255,255,255,.14), 0 20px 44px -18px #000; }
[data-theme="dark"] .key { background:#2e2e33; border-color:#45454b; border-bottom-color:#0f0f11; color:#ededeb; }
[data-theme="dark"] .plus, [data-theme="dark"] [data-state="think"] .keyhint { color:var(--muted); }
[data-theme="dark"] [data-state="hold"] .key { background:#ededeb; border-color:#ededeb; color:#0a0a0b; }
[data-theme="dark"] .vig-keys.down .cap { background:#2a2a2e; color:#ededeb; border-color:var(--accent); box-shadow:0 0 0 3px rgba(107,128,255,.18); }
[data-theme="dark"] .end .field { opacity:.95; }
[data-theme="dark"] .cmd, [data-theme="dark"] .field-ui, [data-theme="dark"] .cap { border-color:#45454b; }
[data-theme="dark"] .copy { box-shadow:inset 0 0 0 1px var(--line-2); }
[data-theme="dark"] .copy:hover { background:#2a2a2e; }
[data-theme="dark"] .cap, [data-theme="dark"] .field-ui, [data-theme="dark"] .mini-pill { box-shadow:0 14px 34px -18px #000; }
[data-theme="dark"] .mini-pill { background:#1c1c1f; border-color:#46464c; }
[data-theme="dark"] .step.on .mini-pill { box-shadow:0 0 0 4px rgba(107,128,255,.10), 0 14px 34px -18px #000; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; }
body { margin:0; color:var(--ink); background:var(--paper); font:var(--t-base)/1.6 var(--sans); overflow-x:clip; }
a { color:inherit; }
p { margin:0; }
h1, h2, h3 { margin:0; font-weight:600; }
b, strong { font-weight:600; }
code { font:500 .88em var(--mono); direction:ltr; unicode-bidi:isolate; background:var(--soft); border:1px solid var(--line); border-radius:var(--r-sm); padding:1px var(--s-1); }
::selection { background:color-mix(in srgb, var(--accent) 18%, transparent); }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-sm); }

.frame { max-width:var(--max); margin:0 auto; }
section, .top, .foot { position:relative; padding-inline:var(--pad); }
.block, .end, .foot { border-top:1px solid var(--line); }

/* header */
.top { display:flex; align-items:center; gap:var(--s-5); height:64px; }
.brand { white-space:nowrap; display:flex; align-items:center; gap:var(--s-2); font-weight:600; font-size:var(--t-base); letter-spacing:-.01em; text-decoration:none; direction:ltr; }
.mark { width:26px; height:26px; flex:none; display:block; }
.m-base { fill:#000; } .m-face { fill:#232326; } .m-bar { fill:#fff; } .m-bar .m-acc { fill:#5b74ff; }
[data-theme="dark"] .m-base { fill:#b9b9b4; } [data-theme="dark"] .m-face { fill:#ededeb; } [data-theme="dark"] .m-bar { fill:#0a0a0b; } [data-theme="dark"] .m-bar .m-acc { fill:#2a46ff; }
.top nav { display:flex; gap:var(--s-5); margin-inline-start:auto; font-size:var(--t-sm); }
.top nav a { color:var(--muted); text-decoration:none; transition:color .15s; } .top nav a:hover { color:var(--ink); }
.gh { display:inline-flex; align-items:center; gap:var(--s-2); height:34px; padding:0 var(--s-3); border-radius:var(--r-md); border:1px solid var(--line-2); color:var(--ink); font-size:var(--t-sm); font-weight:500; text-decoration:none; transition:border-color .15s; }
.theme { display:inline-grid; place-items:center; width:34px; height:34px; padding:0; border-radius:var(--r-md); border:1px solid var(--line-2); background:none; color:var(--ink); cursor:pointer; transition:border-color .15s; }
.theme:hover { border-color:var(--ink); } .theme svg { width:15px; height:15px; }
.theme .i-moon { fill:currentColor; } .theme .i-sun { fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; }
.theme .i-sun, [data-theme="dark"] .theme .i-moon { display:none; } [data-theme="dark"] .theme .i-sun { display:block; }
.top { position:relative; }
.ai { display:inline-flex; align-items:center; gap:var(--s-2); height:34px; padding:0 var(--s-3); border-radius:var(--r-md); border:1px solid var(--ink); background:var(--ink); color:var(--on-ink); font:500 var(--t-sm) var(--sans); cursor:pointer; white-space:nowrap; transition:opacity .15s; }
.ai:hover { opacity:.86; } .ai svg { width:14px; height:14px; fill:currentColor; flex:none; }
.ai .ai-s { display:none; }
.top .theme, .top .gh, .top .ai, .brand { flex:none; }
.ai-tip { position:absolute; top:calc(100% - 6px); inset-inline-end:0; z-index:20; max-width:300px; padding:var(--s-2) var(--s-3); border-radius:var(--r-md); background:var(--ink); color:var(--on-ink); font-size:var(--t-xs); line-height:1.5; box-shadow:0 12px 30px -12px rgba(0,0,0,.45); }
.gh:hover { border-color:var(--ink); } .gh svg { width:15px; height:15px; fill:currentColor; }

/* hero: the line, then the recording pill itself, enlarged into the page's one object */
.hero { padding-block:var(--hero-y); text-align:center; }
h1 { font-size:var(--t-h1); line-height:1; letter-spacing:-.05em; text-wrap:balance; position:relative; z-index:1; }
.demo { display:flex; flex-direction:column; align-items:center; gap:var(--s-5); margin-top:clamp(-8px,-1vw,0px); }
.bars { display:block; width:min(100%, 1120px); height:clamp(140px,min(22vw,21vh),320px); }
.said { height:4.05em; overflow-y:auto; scrollbar-width:none; max-width:24em; margin-top:calc(var(--s-5) * -1); display:flex; flex-direction:column; -webkit-mask-image:linear-gradient(transparent, #000 .9em); mask-image:linear-gradient(transparent, #000 .9em); font-size:var(--t-said); line-height:1.35; letter-spacing:-.02em; color:var(--ink); text-wrap:balance; unicode-bidi:plaintext; }
.said > p { margin-block:auto; }
.demo.live .said .typed:empty::before { content:attr(data-ph); color:var(--faint); }
.said .typed[data-err]:not([data-err=""]):empty::before { content:attr(data-err); color:var(--err); }
.caret { display:inline-block; width:2px; height:1.1em; background:var(--accent); vertical-align:text-bottom; margin-inline-start:2px; animation:blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity:0 } }

/* the explanation and the install command, first thing under the hero */
.intro { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s-7); align-items:center; padding-block:var(--s-5) var(--s-8); }
.intro .lead { font-size:var(--t-lg); line-height:1.55; color:var(--ink-2); max-width:28em; text-wrap:pretty; }

/* same as overlay.qml: 224x56 dark pill with the hero's halftone bars */
.mini-pill { display:grid; place-items:center; width:224px; height:56px; border-radius:28px; background:#f3f3f0; border:1px solid var(--line-2); box-shadow:0 14px 30px -20px rgba(0,0,0,.28); }
.mini-pill canvas { display:block; width:192px; height:40px; }

/* the one thing to do in the hero: hold these keys */
.keys { direction:ltr; display:flex; align-items:center; gap:var(--s-2); padding:var(--s-2) var(--s-5) var(--s-2) var(--s-2); font:inherit; color:var(--on-ink); background:var(--ink); border:0; border-radius:var(--r-lg); cursor:pointer; user-select:none; -webkit-user-select:none; touch-action:none; -webkit-touch-callout:none; box-shadow:0 14px 30px -14px rgba(12,12,13,.55); transition:transform .15s, box-shadow .15s; }
.keys:hover { transform:translateY(-1px); box-shadow:0 18px 34px -14px rgba(12,12,13,.6); }
.key { display:grid; place-items:center; min-width:56px; height:44px; padding:0 var(--s-3); border-radius:var(--r-md); background:var(--dark-2); border:1px solid var(--dark-3); border-bottom-width:4px; color:var(--on-ink); font:500 var(--t-sm) var(--mono); transition:transform .1s, background .1s, color .1s, border-color .1s, border-bottom-width .1s; }
.key.wide { min-width:146px; }
.plus { color:var(--dark-dim); font-size:var(--t-sm); }
.keyhint { margin-inline-start:var(--s-2); font-size:var(--t-base); font-weight:600; white-space:nowrap; }
[data-state="hold"] .key { transform:translateY(3px); border-bottom-width:1px; background:var(--on-ink); border-color:var(--on-ink); color:var(--ink); }
[data-state="think"] .keyhint { color:var(--dark-dim); }
.caption { font-size:var(--t-sm); color:var(--muted); text-align:center; text-wrap:balance; max-width:30em; min-height:3.2em; }

/* install: quiet and exact */
.install { width:100%; max-width:560px; justify-self:end; text-align:start; }
.tabs { display:flex; gap:2px; margin-bottom:var(--s-2); }
.tabs button { font:inherit; font-size:var(--t-sm); padding:var(--s-1) var(--s-2); border:0; border-radius:var(--r-sm); background:none; color:var(--muted); cursor:pointer; transition:color .15s, background .15s; }
.tabs button:hover { color:var(--ink); }
.tabs button[aria-pressed="true"] { color:var(--ink); background:var(--soft); }
.cmd { display:none; align-items:center; gap:var(--s-2); height:50px; padding-inline:var(--s-4) var(--s-1); border-radius:var(--r-md); background:var(--surface); border:1px solid var(--line-2); direction:ltr; }
.cmd[data-on] { display:flex; }
.cmd .prompt { font:500 var(--t-sm) var(--mono); color:var(--faint); }
.cmd pre { flex:1; min-width:0; margin:0; overflow-x:auto; scrollbar-width:none; font:400 var(--t-sm)/50px var(--mono); color:var(--ink); white-space:pre; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent); }
.cmd pre::-webkit-scrollbar { display:none; }
.copy { flex:none; font:500 var(--t-xs) var(--sans); height:38px; padding:0 var(--s-3); border-radius:var(--r-sm); border:0; background:var(--soft); color:var(--ink); cursor:pointer; transition:background .15s; }
.copy:hover { background:var(--line); }
.meta { margin-top:var(--s-3); font-size:var(--t-sm); color:var(--muted); display:flex; flex-wrap:wrap; column-gap:var(--s-2); row-gap:2px; }
.meta span { white-space:nowrap; }
.meta span + span::before { content:"·"; margin-inline-end:var(--s-2); color:var(--faint); }

/* section heads */
.block { padding-block:var(--sec-y); scroll-margin-top:var(--s-3); }
.head { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s-6); align-items:end; margin-bottom:var(--s-7); }
.head h2 { font-size:var(--t-h2); line-height:1.02; letter-spacing:-.045em; max-width:11em; text-wrap:balance; }
.head p { color:var(--muted); font-size:var(--t-md); line-height:1.55; max-width:28em; justify-self:end; text-wrap:pretty; }
.head a { text-underline-offset:3px; }

/* how it works: three linked steps shown as live mini UI */
.steps { list-style:none; margin:0 calc(var(--pad) * -1); padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-block:1px solid var(--line); }
.step { position:relative; padding:0 0 var(--s-6); }
.step + .step { border-inline-start:1px solid var(--line); }
.step::before { content:""; position:absolute; inset-inline-start:0; top:-1px; height:2px; width:0; background:var(--ink); transition:width .5s cubic-bezier(.2,.7,.2,1); z-index:3; }
.step.on::before { width:100%; }
.vig { position:relative; height:240px; display:grid; place-items:center; border-bottom:1px solid var(--line); background:radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 1.4px) 0 0/16px 16px; direction:ltr; overflow:hidden; }
.vig::after { content:""; position:absolute; inset:0; background:radial-gradient(60% 60% at 50% 50%, transparent 30%, var(--paper) 100%); pointer-events:none; }
.vig > * { position:relative; z-index:1; }
.read { position:absolute; bottom:var(--s-3); inset-inline-start:var(--s-4); font:500 var(--t-xs) var(--mono); letter-spacing:.02em; color:var(--faint); z-index:2; }
.cap-text { padding:var(--s-5) var(--pad) 0; }
.cap-text .n { font:500 var(--t-xs) var(--mono); color:var(--faint); transition:color .3s; }
.step.on .cap-text .n { color:var(--ink); }
.cap-text h3 { margin-top:var(--s-2); font-size:var(--t-lg); letter-spacing:-.02em; }
.cap-text p { margin-top:var(--s-1); color:var(--muted); font-size:var(--t-base); line-height:1.55; max-width:24em; }

.caps { display:flex; gap:var(--s-2); }
.cap { min-width:68px; height:60px; display:grid; place-items:center; padding:0 var(--s-4); border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line-2); border-bottom-width:5px; font:500 var(--t-base) var(--mono); color:var(--ink); box-shadow:0 10px 24px -14px rgba(0,0,0,.25); transition:transform .12s, border-bottom-width .12s, background .12s, color .12s, border-color .12s; }
.cap.wide { min-width:170px; }
.vig-keys.down .cap { transform:translateY(4px); border-bottom-width:1px; background:var(--ink); color:var(--on-ink); border-color:var(--ink); }

.field-ui { width:min(300px, 84%); background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-lg); box-shadow:0 14px 34px -18px rgba(0,0,0,.28); overflow:hidden; }
.field-ui .app { display:flex; align-items:center; gap:var(--s-2); padding:var(--s-2) var(--s-3); font-size:var(--t-xs); font-weight:500; color:var(--muted); border-bottom:1px solid var(--line); min-height:37px; }
.app-ico[hidden] { display:none; }
.app-ico { width:20px; height:20px; flex:none; border-radius:5px; box-shadow:0 0 0 1px var(--line-2); }
.field-ui .input { padding:var(--s-3) var(--s-3) var(--s-4); min-height:74px; font-size:var(--t-base); line-height:1.45; color:var(--ink); text-align:start; unicode-bidi:plaintext; }
.field-ui .pre { color:var(--muted); font-family:var(--mono); font-size:var(--t-sm); }
.field-ui .input.mono .txt { font-family:var(--mono); font-size:var(--t-sm); }
.field-ui .caret { height:1.05em; }

/* setup: the real installer on one side, the services on the other */
.setup-row { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:var(--split-gap); align-items:center; margin-bottom:var(--s-7); }
.term { background:var(--term-bg); border-radius:var(--r-lg); overflow:hidden; box-shadow:0 30px 60px -30px rgba(0,0,0,.5); direction:ltr; text-align:left; }
.term-bar { display:flex; align-items:center; gap:var(--s-1); height:38px; padding:0 var(--s-3); border-bottom:1px solid var(--dark-1); font-size:var(--t-xs); color:var(--dark-dim); }
.term-bar i { width:10px; height:10px; border-radius:50%; background:var(--dark-3); }
.term-bar span { margin-inline-start:var(--s-2); }
.term-body { padding:var(--s-4) var(--s-5) var(--s-5); font:400 var(--t-xs)/1.9 var(--mono); color:var(--dark-fg); }
.tl { white-space:pre-wrap; padding-left:4ch; text-indent:-4ch; }
.tl b { font-weight:500; color:var(--term-hi); } .tl .u { color:var(--dark-dim); }
.tl.d, .tl b.d { color:var(--dark-dim); } .tl.ok { color:var(--ok); }
.tl .cur { display:inline-block; width:8px; height:15px; vertical-align:-3px; background:var(--dark-fg); animation:blink 1.05s steps(1) infinite; }
.term.play .tl { opacity:0; transform:translateY(4px); transition:opacity .25s, transform .25s; }
.term.play .tl.in { opacity:1; transform:none; }

.providers { display:flex; flex-direction:column; border-top:1px solid var(--line); }
.prov { padding:var(--s-5) 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:var(--s-4); row-gap:var(--s-1); align-items:baseline; }
.prov-top { display:flex; align-items:baseline; gap:var(--s-3); }
.prov h3 { font-size:var(--t-lg); letter-spacing:-.02em; }
.tag { font-size:var(--t-xs); font-weight:500; color:var(--accent-ink); display:inline-flex; align-items:center; gap:var(--s-1); }
.tag::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.prov-meta { grid-column:2; grid-row:1; font:500 var(--t-xs) var(--mono); letter-spacing:.04em; color:var(--muted); white-space:nowrap; }
.prov p:not(.prov-meta) { grid-column:1 / -1; color:var(--muted); font-size:var(--t-base); line-height:1.55; }
.prov .more { grid-column:1 / -1; font-size:var(--t-sm); font-weight:500; text-decoration:none; color:var(--ink); justify-self:start; }
.prov .more:hover { text-decoration:underline; text-underline-offset:3px; }

.keysteps { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,3fr); margin-inline:calc(var(--pad) * -1); border-block:1px solid var(--line); }
.keysteps h3 { padding:var(--s-5) var(--pad); font-size:var(--t-base); letter-spacing:-.01em; border-inline-end:1px solid var(--line); }
.keysteps ol { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.keysteps li { display:flex; gap:var(--s-3); align-items:baseline; padding:var(--s-5) var(--pad); font-size:var(--t-base); color:var(--ink-2); }
.keysteps li + li { border-inline-start:1px solid var(--line); }
.keysteps .n { font:500 var(--t-xs) var(--mono); color:var(--muted); }
.keysteps a { text-underline-offset:3px; text-decoration-color:var(--line-2); } .keysteps a:hover { text-decoration-color:var(--ink); }

/* faq */
.faq { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:var(--s-7); }
.faq .head { display:block; margin:0; }
.faq .head p { justify-self:auto; margin-top:var(--s-4); font-size:var(--t-base); }
.qa { border-top:1px solid var(--line); }
details { border-bottom:1px solid var(--line); }
summary { display:flex; justify-content:space-between; align-items:center; gap:var(--s-5); padding:var(--s-5) 0; cursor:pointer; list-style:none; font-size:var(--t-md); font-weight:500; letter-spacing:-.01em; }
summary::-webkit-details-marker { display:none; }
summary::after { content:""; flex:none; width:10px; height:10px; background:linear-gradient(var(--ink),var(--ink)) center/10px 1.5px no-repeat, linear-gradient(var(--ink),var(--ink)) center/1.5px 10px no-repeat; transition:transform .25s; }
details[open] summary::after { transform:rotate(45deg); }
details p { padding:0 0 var(--s-5); color:var(--muted); font-size:var(--t-base); line-height:1.65; max-width:38em; }
details b { color:var(--ink-2); }

/* end */
.end { padding-block:var(--end-y); text-align:center; overflow:hidden; }
.end .field { position:absolute; inset:0; width:100%; height:100%; display:block; opacity:.5; -webkit-mask-image:radial-gradient(70% 80% at 50% 50%, transparent 25%, #000 75%); mask-image:radial-gradient(70% 80% at 50% 50%, transparent 25%, #000 75%); }
.end-in { position:relative; }
.end-line { font-size:var(--t-h2); font-weight:600; letter-spacing:-.045em; line-height:1.05; text-wrap:balance; }
.end-actions { margin-top:var(--s-6); display:flex; gap:var(--s-2); justify-content:center; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; height:44px; padding:0 var(--s-5); border-radius:var(--r-md); background:var(--ink); color:var(--on-ink); font-size:var(--t-base); font-weight:500; text-decoration:none; border:1px solid var(--ink); transition:background .15s, border-color .15s; }
.btn:hover { background:var(--hover-ink); }
.foot { display:flex; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap; padding-block:var(--s-5) var(--s-6); font-size:var(--t-sm); color:var(--muted); }
.foot a { color:var(--muted); text-decoration:none; direction:ltr; } .foot a:hover { color:var(--ink); }

/* sections that end in a ruled band: the next section's top rule closes it */
#how, #setup { padding-bottom:0; }
#how .steps, #setup .keysteps { border-bottom:0; }

/* short laptop screens: keep the explanation and install row in the first view */
@media (max-height:880px) and (min-width:641px) {
  :root { --hero-y:clamp(96px,13vh,120px) var(--s-3); }
  h1 { font-size:clamp(44px,min(6.2vw,10vh),84px); }
  .caption { min-height:1.6em; }
  .intro { padding-block:var(--s-4) var(--s-8); }
}
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }


@media (max-width:980px) {
  .intro { grid-template-columns:minmax(0,1fr); gap:var(--s-5); } .install { justify-self:stretch; max-width:none; }
  .head { grid-template-columns:minmax(0,1fr); gap:var(--s-4); } .head p { justify-self:start; }
  .steps { grid-template-columns:minmax(0,1fr); }
  .step + .step { border-inline-start:0; border-top:1px solid var(--line); }
  .setup-row { grid-template-columns:minmax(0,1fr); }
  .keysteps { grid-template-columns:minmax(0,1fr); } .keysteps h3 { border-inline-end:0; border-bottom:1px solid var(--line); }
  .faq { grid-template-columns:minmax(0,1fr); gap:var(--s-5); }
}
@media (max-width:640px) {
  .top { gap:var(--s-2); } .top nav a { display:none; } .ai .ai-l { display:none; } .ai .ai-s { display:inline; } .ai { height:44px; } .gh .gh-l { display:none; } .gh { width:44px; justify-content:center; padding:0; } .top .theme { margin-inline-start:auto; }
  .lead { font-size:var(--t-md); }
      .key { height:42px; min-width:48px; } .key.wide { min-width:104px; } .keys { padding-inline-end:var(--s-4); }
  .tabs button { min-height:44px; padding:0 var(--s-3); } .cmd { height:56px; } .copy { height:44px; } .cmd pre { line-height:56px; }
  .gh, .theme { height:44px; } .theme { width:44px; }
  .keysteps ol { grid-template-columns:minmax(0,1fr); } .keysteps li + li { border-inline-start:0; border-top:1px solid var(--line); }
  .prov .more, .foot a, .brand { display:inline-flex; align-items:center; min-height:44px; }
  .term-body { padding:var(--s-3) var(--s-3) var(--s-4); }
  .vig { height:210px; }
}
@media (max-width:380px) { .ai .ai-s { display:none; } .ai { width:44px; justify-content:center; padding:0; } }
@media (pointer:coarse) { .gh, .theme, .ai { height:44px; } .theme { width:44px; } .tabs button { min-height:44px; padding:0 var(--s-3); } .copy { height:44px; } .cmd { height:56px; } .cmd pre { line-height:56px; } .prov .more, .foot a, .brand { display:inline-flex; align-items:center; min-height:44px; } }
@media (pointer:coarse) and (min-width:641px) { .top nav a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } .caret, .tl .cur { animation:none; } .step::before { transition:none; } .keys { transition:none; } }

/* privacy page */
.legal { padding:var(--s-8) var(--pad) var(--sec-y); max-width:44em; }
.legal h1 { font-size:var(--t-h2); line-height:1.02; letter-spacing:-.045em; }
.legal .upd { margin-top:var(--s-3); color:var(--muted); font-size:var(--t-sm); }
.legal h2 { margin-top:var(--s-7); font-size:var(--t-md); letter-spacing:-.01em; }
.legal ul { margin:var(--s-3) 0 0; padding-inline-start:1.2em; }
.legal li, .legal p { color:var(--ink-2); line-height:1.65; text-wrap:pretty; }
.legal li + li { margin-top:var(--s-2); }
.legal a { text-underline-offset:3px; }
.foot-links { display:flex; gap:var(--s-5); flex-wrap:wrap; }

/* admin page */
.admin { padding:var(--s-8) var(--pad) var(--sec-y); }
.admin h1 { font-size:var(--t-h2); line-height:1.02; letter-spacing:-.045em; }
.adm-sum { margin-top:var(--s-3); color:var(--muted); font-size:var(--t-sm); }
.adm-signin { margin-top:var(--s-6); display:grid; gap:var(--s-4); justify-items:start; color:var(--ink-2); }
.adm-me { color:var(--muted); font-size:var(--t-sm); }
.admin [hidden], .top [hidden] { display:none !important; }
.adm-out { white-space:nowrap; font:500 var(--t-sm) var(--sans); color:var(--ink); background:none; border:1px solid var(--line-2); border-radius:var(--r-md); height:34px; padding:0 var(--s-3); cursor:pointer; }
.adm-out:hover { border-color:var(--ink); }
.top nav .adm-me, .top nav .adm-out { align-self:center; }
.adm-tools { margin-top:var(--s-6); }
.adm-q { width:min(100%, 320px); height:40px; padding:0 var(--s-3); font:inherit; font-size:var(--t-sm); color:var(--ink); background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-md); }
.adm-q:focus { outline:2px solid var(--accent); outline-offset:1px; }
.adm-wrap { margin-top:var(--s-4); overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg); }
.adm-t { width:100%; border-collapse:collapse; font-size:var(--t-sm); }
.adm-t th { text-align:start; font-weight:500; color:var(--muted); padding:var(--s-3) var(--s-4); border-bottom:1px solid var(--line); white-space:nowrap; }
.adm-t td { padding:var(--s-3) var(--s-4); border-bottom:1px solid var(--line); color:var(--ink-2); white-space:nowrap; }
.adm-t tr:last-child td { border-bottom:0; }
.adm-who { display:grid; gap:2px; min-width:200px; white-space:normal; }
.adm-who b { color:var(--ink); font-weight:500; }
.adm-who span { color:var(--muted); }
.adm-t tr.blocked td { opacity:.55; }
.adm-tg { min-width:84px; height:30px; padding:0 var(--s-3); font:500 var(--t-xs) var(--sans); color:var(--muted); background:none; border:1px solid var(--line-2); border-radius:999px; cursor:pointer; }
.adm-tg:hover { border-color:var(--ink); color:var(--ink); }
.adm-tg.on { color:var(--on-ink); background:var(--ink); border-color:var(--ink); }
.adm-tg:disabled { opacity:.5; cursor:wait; }
@media (max-width:640px) { .adm-me { display:none; } }