/* Altypist site — the shared design system.
   Both hosts load this file. Tokens first, then primitives (buttons, nav, tabs, window
   chrome, screenshots), then page components.
   The page is LIGHT and warm. Anything that stands in for the app itself (mock windows,
   screenshots, the privacy band) stays DARK: it re-declares the dark tokens through the
   `.dk` selector list right below :root, so a component written with var(--ink) works on
   either surface. To make a new surface dark, add it to that list. */
:root{
  --bg:#FAF7F2; --bg2:#F3ECE0; --surf:#FFFFFF; --surf2:#EADFCF;
  --line:rgba(34,28,21,.10); --line2:rgba(34,28,21,.18); --hair:rgba(34,28,21,.06); --hair2:rgba(34,28,21,.12);
  --ink:#221C15; --dim:#5E564B; --faint:#6B6256;
  --amber:#C87A12; --amber-soft:#A2590A; --amber-deep:#8A4A07; --on-amber:#1A1004;
  --ok:#3F7D4F; --no:#B5523B; --paper:#FFFFFF; --paper-ink:#221C15;
  --nav-bg:rgba(250,247,242,.86);
  --f:-apple-system,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans Devanagari","Kohinoor Devanagari","Devanagari Sangam MN","Nirmala UI",sans-serif;
  --serif:"New York",ui-serif,Georgia,"Noto Serif Devanagari","Kohinoor Devanagari","Devanagari Sangam MN",serif;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  --maxw:1180px; --r:14px;
}
/* Dark scope: the original warm-dark tokens, for surfaces that imitate the app. */
.dk,.win,.mock,.shot,.hk-field,.pill,.privacy,.keys,.menubar,.stage-bar,.mw,.finder,.act-vis,.mini,.a-item{
  --bg:#14110D; --bg2:#1C1813; --surf:#231E18; --surf2:#2C2620;
  --line:rgba(241,238,232,.09); --line2:rgba(241,238,232,.16); --hair:rgba(241,238,232,.06); --hair2:rgba(241,238,232,.12);
  --ink:#F1EEE8; --dim:#BDB4A7; --faint:#8E8579;
  --amber-soft:#E8A94A; --amber-deep:#A2590A; --ok:#8FBF8F; --no:#D9765F;
  --paper:#F4EFE6; --paper-ink:#221C15;
  color:var(--ink);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
p{margin:0}
img{max-width:100%;height:auto}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.025em;text-wrap:balance}
h2{font-size:clamp(2rem,4.2vw,3.25rem);line-height:1.06;letter-spacing:-.035em}
h3{font-size:1.15rem;letter-spacing:-.01em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
@media(max-width:420px){.wrap{padding:0 16px}}
.lede{color:var(--dim);font-size:1.12rem;max-width:58ch;margin-top:18px}
.kicker{display:block;color:var(--amber-soft);font-size:.95rem;font-weight:500;margin-bottom:14px}
section{--sec-pad:clamp(72px,10vw,128px);padding:var(--sec-pad) 0}
/* An in-page link lands the section's heading just under the floating nav, not the
   section's edge: the edge sits a whole --sec-pad above the heading, and the old
   html scroll-padding added 90px on top of that, so #pricing opened on ~200px of
   empty band. The margin is negative on purpose. Nav = 12 top + ~58 tall. */
section[id]{scroll-margin-top:calc(96px - var(--sec-pad))}
.band{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
:focus-visible{outline:2px solid var(--amber-soft);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
kbd,.key{font-family:var(--f)}
kbd.k{display:inline-block;font-size:.85em;padding:1px 7px;border-radius:6px;border:1px solid var(--line2);background:var(--surf);color:var(--ink);line-height:1.5;white-space:nowrap}
.note{font-size:.82rem;color:var(--faint);margin-top:14px}
.linkbtn{font:inherit;color:var(--amber-soft);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* Utility classes standing in for the one-off style="…" attributes the body files used to
   carry. A strict CSP has no 'unsafe-inline' in style-src, so every value here has to be a
   class the build's inline-style test (test_no_inline_style_or_handlers) can find nowhere.
   The single-property ones (.sprite, .nowrap, .mt14, .fw400, .w50/63/83, .ink500) don't
   collide with any existing rule of equal or higher specificity, so they're declared here;
   .section-gap and the table min-widths DO collide (.two already sets its own margin-top,
   table.t already sets min-width) and are declared at the very end of this file instead —
   see the comment down there for why. */
.sprite{position:absolute}
.nowrap{white-space:nowrap}
.mt14{margin-top:14px}
.fw400{font-weight:400}
.w50{--w:50px}
.w63{--w:63px}
.w83{--w:83px}
.ink500{color:var(--ink);font-weight:500}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:14px 24px;
  font-size:1rem;font-weight:600;text-decoration:none;border:1px solid transparent;white-space:nowrap;
  transition:transform .15s ease,background .15s ease,border-color .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn-amber{background:var(--amber);color:var(--on-amber);box-shadow:0 6px 18px rgba(200,122,18,.22)}
.btn-amber:hover{background:#D4861D}
.btn-ghost{border-color:var(--line2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--faint)}
.btn-sm{padding:9px 16px;font-size:.9rem}

/* nav */
.nav{position:sticky;top:12px;z-index:60;padding:0 16px;margin-top:12px}
.nav-in{max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:4px;padding:7px 7px 7px 18px;
  background:var(--nav-bg);backdrop-filter:saturate(1.3) blur(14px);-webkit-backdrop-filter:saturate(1.3) blur(14px);
  border:1px solid var(--line2);border-radius:999px;box-shadow:0 12px 40px rgba(34,28,21,.12)}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:700;letter-spacing:.14em;font-size:.92rem;margin-right:auto}
.brand svg{width:22px;height:22px}
.nav a.link{color:var(--dim);text-decoration:none;font-size:.92rem;padding:8px 11px;border-radius:999px;white-space:nowrap}
/* French and German labels are longer than English; tighter padding keeps them on one line. */
@media(max-width:1180px){.nav a.link{padding:8px 7px;font-size:.88rem}}
.nav a.link:hover{color:var(--ink);background:var(--hair)}
.nav a.link[aria-current="page"],.nav a.link[aria-current="location"]{color:var(--ink)}
.nav a.link[aria-current="location"]{background:var(--hair2)}
.nav .try{color:var(--ink)}
.nav a.link.sib{color:var(--amber-soft)}
/* Translated labels run a third longer than English: drop the "try" link (the hero
   repeats it) before the bar overflows, and fold the section links a little earlier. */
@media(max-width:1180px){html:not([lang=en]) .nav a.try{display:none}}
@media(max-width:1000px){.nav a.link:not(.try):not(.sib){display:none}}
/* "ALTYPIST MEMO" is the longest brand: tighten it before the bar overflows, and on a
   phone drop the sibling-app link (the footer still carries it). */
@media(max-width:1100px){.nav-memo .brand{letter-spacing:.08em}}
@media(max-width:900px){.nav-memo a.link.sib{display:none}}
@media(max-width:380px){.nav-memo .brand{font-size:.84rem}.nav-memo .btn-sm{padding-left:12px;padding-right:12px}}
@media(max-width:430px){.nav-memo .brand{letter-spacing:.04em;gap:7px}}
@media(max-width:430px){.nav a.try{display:none}.nav-in{padding-left:14px}}

/* language switcher — "EN · DE · ES · FR", one item per language this PAGE
   actually has (see _langnav_html in build-web.py). Kept as compact as the
   nav itself: 2-letter codes, no separate button chrome, and hidden below
   560px alongside the other nav links that already disappear there — a
   narrow-viewport nav has room for brand + try + buy, not a fourth cluster. */
.langnav{display:flex;align-items:center;gap:3px;margin-left:2px;font-size:.78rem;color:var(--faint);white-space:nowrap}
.langnav a{color:var(--faint);text-decoration:none;padding:6px 5px;border-radius:999px}
.langnav a:hover{color:var(--ink);background:var(--hair)}
.langnav .lang-cur{color:var(--ink);font-weight:600;padding:6px 5px}
@media(max-width:560px){.langnav{display:none}}

/* hero */
.hero{padding:clamp(48px,7vw,92px) 0 40px;position:relative;overflow-x:clip}
.hero::before{content:"";position:absolute;inset:-10% -20% auto;height:720px;pointer-events:none;
  background:radial-gradient(ellipse 50% 45% at 72% 38%,rgba(200,122,18,.10),transparent 70%)}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr;gap:44px}}
.hero h1{font-size:clamp(2.7rem,6.4vw,5.3rem);line-height:.98;letter-spacing:-.045em;font-weight:650}
.hero h1>span{display:block}
.hero h1 .quiet{color:var(--dim);font-weight:500}
.caret{display:inline-block;width:.07em;height:.82em;background:var(--amber);margin-left:.06em;vertical-align:-.04em;border-radius:1px;animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hero .lede{font-size:1.18rem;margin-top:26px}
.hero-sub{padding:clamp(40px,6vw,72px) 0 8px}
.hero-sub::before{display:none}
.hero-sub h1{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.04;letter-spacing:-.04em}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.facts{margin-top:18px;font-size:.9rem;color:var(--faint)}
.facts b{color:var(--dim);font-weight:600}

/* window chrome, shared by animated mock-ups and real screenshots */
.stage{position:relative;height:380px}
.win{position:absolute;inset:0;display:flex;flex-direction:column;border-radius:14px;overflow:hidden;
  background:#201B16;border:1px solid var(--line2);box-shadow:0 30px 70px rgba(34,28,21,.28),0 0 0 1px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06);
  opacity:0;transform:translateY(8px) scale(.985);transition:opacity .5s ease,transform .5s ease;visibility:hidden}
.win.on{opacity:1;transform:none;visibility:visible}
.tbar{display:flex;align-items:center;gap:7px;height:38px;padding:0 14px;background:#2A241E;border-bottom:1px solid rgba(0,0,0,.35);flex:none}
.tbar>i{width:11px;height:11px;border-radius:50%;background:#4A423A;flex:none}
.tbar>i:nth-child(1){background:#E0705F}.tbar>i:nth-child(2){background:#E3B24C}.tbar>i:nth-child(3){background:#5AA06E}
.tbar b{flex:1;text-align:center;font-size:.8rem;font-weight:600;color:var(--faint);margin-right:44px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wbody{flex:1;padding:20px 22px;font-size:1rem;line-height:1.6;overflow:hidden;position:relative}
.field{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:.9rem;color:var(--dim)}
.field span{color:var(--faint);min-width:58px}
.typed{white-space:pre-wrap}
.typed::after{content:"";display:inline-block;width:2px;height:1.1em;background:var(--amber);vertical-align:-.2em;margin-left:1px;animation:blink 1s steps(1) infinite}
.win.paper .wbody{background:var(--paper);color:var(--paper-ink);font-family:var(--serif);padding:26px 34px}
.win.paper .tbar{background:#E6DFD3;border-color:#D3CABB}.win.paper .tbar b{color:#6F665A}
.doc-h{font-family:var(--f);font-weight:700;font-size:.72rem;letter-spacing:.12em;color:#8A7F70;margin-bottom:10px}
.win.code{background:#17140F}
.win.code .wbody{padding:0}
.code-wrap{display:grid;grid-template-columns:1fr 1.1fr;height:100%}
.code-src{font-family:var(--mono);font-size:.74rem;line-height:1.75;color:#8E8579;padding:14px 16px;border-right:1px solid var(--line);white-space:pre;overflow:hidden}
.code-src .k{color:#E8A94A}.code-src .s{color:#A9C59A}.code-src .f{color:#E6D8C3}
.chat{display:flex;flex-direction:column;padding:14px;gap:10px}
.chat-h{font-size:.74rem;color:var(--faint);font-weight:600}
.prompt{border:1px solid var(--line2);background:#211C16;border-radius:10px;padding:12px;font-size:.88rem;line-height:1.55;min-height:150px}
.win.notes .wbody{background:#1E1A15}
.notes-h{font-size:1.35rem;font-weight:700;margin-bottom:6px}
.notes-d{font-size:.78rem;color:var(--faint);margin-bottom:12px}
@media(max-width:600px){
  .stage{height:400px}
  .wbody{font-size:.93rem;padding:16px}
  .win.paper .wbody{padding:18px 20px}
  .code-wrap{grid-template-columns:1fr}.code-src{display:none}
}
.mock{position:relative;border-radius:14px;overflow:hidden;background:#201B16;border:1px solid var(--line2);box-shadow:0 24px 56px rgba(34,28,21,.26)}
.mock .wbody p{color:var(--ink);margin-top:0}

/* a real screenshot, in a thin macOS window frame. The images are app content only,
   so the frame supplies the title bar they were rendered without. */
.shot{margin:0;border-radius:12px;overflow:hidden;background:#1E1E1E;border:1px solid var(--line2);
  box-shadow:0 24px 56px rgba(34,28,21,.28),0 0 0 1px rgba(0,0,0,.45)}
.shot .tbar{height:30px;padding:0 12px;gap:6px;background:#2B2622}
.shot .tbar>i{width:10px;height:10px}
.shot .tbar b{font-size:.74rem;margin-right:36px}
.shot img{display:block;width:100%;height:auto}
.shot.light{background:#fff;border-color:rgba(0,0,0,.2)}
.shot.light .tbar{background:#E9E6E2;border-color:#D5D0CA}.shot.light .tbar b{color:#6F665A}
.shot.bare{background:none;border:0;box-shadow:none;border-radius:0}
.shot figcaption,.cap{font-size:.84rem;color:var(--faint);margin-top:12px}
.shot-crop{max-height:var(--crop,none);overflow:hidden;position:relative}
.shot-crop::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56px;background:linear-gradient(transparent,#1E1E1E)}

/* recording pill (hero) */
.pill{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;
  padding:8px 14px 8px 10px;border-radius:999px;background:rgba(12,10,8,.92);border:1px solid rgba(241,238,232,.14);
  box-shadow:0 12px 30px rgba(0,0,0,.5);font-size:.8rem;color:var(--dim);white-space:nowrap;z-index:3;transition:opacity .3s}
.pill .dot{width:9px;height:9px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 0 rgba(200,122,18,.6);animation:pulse 1.6s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(200,122,18,0)}100%{box-shadow:0 0 0 0 rgba(200,122,18,0)}}
.wave{display:flex;align-items:center;gap:2px;height:18px}
.wave i{width:3px;height:4px;border-radius:2px;background:var(--amber-soft);transition:height .12s}
.pill[data-s="work"] .dot{animation:none;background:var(--faint)}
.pill[data-s="done"] .dot{animation:none;background:var(--ok)}
.pill[data-s="done"],.pill[data-s="idle"]{opacity:0}
.stage-tabs{display:flex;gap:6px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.stage-tabs button{font:inherit;font-size:.85rem;color:var(--faint);background:none;border:1px solid var(--line);border-radius:999px;padding:6px 13px;cursor:pointer}
.stage-tabs button:hover{color:var(--ink)}
.stage-tabs button[aria-selected="true"]{color:var(--ink);border-color:rgba(162,89,10,.5);background:rgba(200,122,18,.1)}

/* stats */
.stats{padding:0}
.stats-in{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{padding:30px 22px;border-left:1px solid var(--line)}
.stat:first-child{border-left:0;padding-left:0}
.stat b{display:block;font-size:clamp(2rem,3.6vw,2.8rem);font-weight:600;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.stat span{display:block;color:var(--dim);font-size:.93rem;margin-top:10px;line-height:1.4}
@media(max-width:820px){.stats-in{grid-template-columns:1fr 1fr}.stat:nth-child(3){border-left:0;padding-left:0}.stat:nth-child(n+3){border-top:1px solid var(--line)}}
@media(max-width:420px){.stat{padding:22px 14px}}

/* "works in" row */
.apps{padding:44px 0 0}
.apps-in{display:flex;flex-wrap:wrap;align-items:center;gap:10px 10px}
.apps-in>p{color:var(--faint);font-size:.92rem;margin-right:8px;flex-basis:100%;margin-bottom:4px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 13px 7px 10px;border-radius:999px;background:var(--bg2);border:1px solid var(--line);
  font-size:.9rem;color:var(--dim);white-space:nowrap}
.chip svg{width:16px;height:16px;flex:none;color:var(--amber-soft)}
.chip.more{color:var(--faint);border-style:dashed}

/* tabs */
.tabs{display:flex;gap:4px;padding:4px;background:var(--bg2);border:1px solid var(--line);border-radius:999px;width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{font:inherit;font-size:.93rem;font-weight:500;color:var(--dim);background:none;border:0;border-radius:999px;padding:9px 18px;cursor:pointer;white-space:nowrap}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{background:var(--surf2);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(162,89,10,.35)}
.band .tabs{background:var(--bg)}
#fp-tabs{margin-top:44px}
/* On a phone a wrapped flex row left the second line ragged and off-centre, so the
   tabs become an even grid instead. `data-cols` says how many fit per row. */
@media(max-width:560px){
  .tabs{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));width:100%;border-radius:18px}
  .tabs[data-cols="2"]{--cols:2}.tabs[data-cols="3"]{--cols:3}
  .tabs button{padding:10px 6px;text-align:center;white-space:normal;line-height:1.25}
}

/* two panels */
.two{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:48px}
@media(max-width:900px){.two{grid-template-columns:1fr}}
.panel{background:var(--bg2);border:1px solid var(--line);border-radius:20px;padding:30px;display:flex;flex-direction:column}
.band .panel{background:var(--bg)}
.panel h3{margin-bottom:8px}
.panel p{color:var(--dim);font-size:.98rem}
@media(max-width:560px){.panel{padding:22px 18px}}

/* how it works */
.steps{list-style:none;counter-reset:s;padding:0;margin:44px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.steps li{counter-increment:s;padding:24px 24px 0 0}
.steps li+li{padding-left:24px;border-left:1px solid var(--line)}
.steps b{display:flex;align-items:center;gap:10px;font-size:1.1rem;font-weight:600;margin-bottom:6px}
.steps b::before{content:counter(s);display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(200,122,18,.18);color:var(--amber-soft);font-size:.8rem}
.steps span{color:var(--dim);font-size:.95rem}
@media(max-width:760px){.steps{grid-template-columns:1fr}.steps li,.steps li+li{padding:18px 0;border-left:0;border-bottom:1px solid var(--line)}}

/* the hotkey behaviour demo */
.hk{margin-top:40px;border-radius:22px;background:var(--bg2);border:1px solid var(--line);padding:26px}
.hk-head{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;justify-content:space-between}
.hk-head .note{margin:0}
.hk-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:28px;margin-top:26px;align-items:center}
@media(max-width:860px){.hk-grid{grid-template-columns:1fr}}
.keys{display:flex;gap:12px;justify-content:center;align-items:flex-end;padding:10px 0 8px}
.key{display:grid;place-items:center;min-width:72px;height:72px;padding:0 16px;border-radius:14px;font-size:1.8rem;color:var(--ink);
  background:linear-gradient(#3A332B,#2A241E);border:1px solid rgba(255,255,255,.08);
  box-shadow:0 6px 0 #0F0D0A,0 10px 24px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.12);transition:transform .1s,box-shadow .1s,color .1s,opacity .3s}
.key.space{min-width:170px;font-size:1rem;font-weight:500;color:var(--dim)}
.key.esc{min-width:64px;font-size:.95rem;font-weight:500;color:var(--dim);margin-left:14px}
.key.esc.off{opacity:.28}
.key.down{transform:translateY(5px);box-shadow:0 1px 0 #0F0D0A,0 4px 10px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.12);color:var(--amber-soft)}
@media(max-width:520px){.key{min-width:48px;height:52px;font-size:1.25rem;padding:0 10px;border-radius:11px}.key.space{min-width:92px;font-size:.85rem}.key.esc{min-width:48px;font-size:.8rem;margin-left:6px}.keys{gap:7px}}
.hk-field{border-radius:14px;overflow:hidden;background:#201B16;border:1px solid var(--line2);box-shadow:0 18px 44px rgba(34,28,21,.24)}
.hk-field .wbody{min-height:128px;padding:16px 18px}
.hk-state{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--faint);margin-left:auto;margin-right:0!important;flex:none}
.hk-state i{width:8px;height:8px;border-radius:50%;background:#5A5148}
.hk-state[data-s="rec"] i{background:var(--amber);animation:pulse 1.6s infinite}
.hk-state[data-s="work"] i{background:var(--faint)}
.hk-state[data-s="done"] i{background:var(--ok)}
.hk-state[data-s="cancel"] i{background:var(--no)}
.hk-cap{min-height:3.2em;margin-top:18px;color:var(--dim);font-size:.98rem}
.tl{margin-top:22px;display:grid;grid-template-columns:74px 1fr;gap:8px 12px;align-items:center;font-size:.78rem;color:var(--faint)}
.tl .lane{position:relative;height:14px;border-radius:7px;background:var(--hair)}
.tl .seg{position:absolute;top:0;bottom:0;border-radius:7px}
.tl .seg.k{background:#6B6258}
.tl .seg.e{background:var(--no)}
.tl .seg.r{background:linear-gradient(90deg,var(--amber-deep),var(--amber-soft))}
.tl .seg.r.x{background:repeating-linear-gradient(45deg,rgba(217,118,95,.55) 0 6px,rgba(217,118,95,.25) 6px 12px)}
.tl .seg.t{background:var(--ok)}
.tl .head{position:absolute;top:-6px;bottom:-6px;width:2px;background:var(--ink);border-radius:2px;left:0;opacity:.8}
.tl-wrap{grid-column:2;position:relative}

/* feature blocks */
.feat{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:center}
.feat.flip{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.feat.flip>:first-child{order:2}
@media(max-width:900px){.feat,.feat.flip{grid-template-columns:1fr;gap:32px}.feat.flip>:first-child{order:0}}
.feat h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.feat+.feat{margin-top:clamp(80px,11vw,140px)}
.ticks{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:10px}
.ticks li{position:relative;padding-left:26px;color:var(--dim);font-size:.96rem}
.ticks li::before{content:"";position:absolute;left:2px;top:.55em;width:12px;height:7px;border-left:2px solid var(--amber-soft);border-bottom:2px solid var(--amber-soft);transform:rotate(-45deg)}
.ticks b{color:var(--ink);font-weight:600}
.presets{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.presets span{font-size:.88rem;padding:6px 12px;border-radius:10px;background:var(--surf);border:1px solid var(--line);color:var(--dim)}
.presets span.best{border-color:rgba(162,89,10,.45);color:var(--ink)}
.presets span.best::after{content:" · recommended";color:var(--amber-soft);font-size:.8rem}
.vis{position:relative}
.float-widget{position:absolute;right:-14px;bottom:-34px;width:min(46%,208px);filter:drop-shadow(0 14px 24px rgba(34,28,21,.3))}
@media(max-width:560px){.float-widget{right:-6px;bottom:-28px}}

/* languages */
div.langs{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
div.langs span{font-size:.88rem;padding:5px 11px;border-radius:999px;border:1px solid var(--line);color:var(--dim)}
div.langs span.fav{border-color:rgba(162,89,10,.45);color:var(--ink);background:rgba(200,122,18,.08)}
div.langs span.auto{border-style:dashed}
details.langs{margin-top:28px;max-width:720px;border:1px solid var(--line2);border-radius:var(--r);background:var(--surf)}
details.langs summary{cursor:pointer;padding:14px 18px;font-weight:600;color:var(--ink);list-style:none;display:flex;align-items:center;gap:10px}
details.langs summary::-webkit-details-marker{display:none}
details.langs summary::before{content:"";width:8px;height:8px;border-right:2px solid var(--amber-deep);border-bottom:2px solid var(--amber-deep);transform:rotate(-45deg);transition:transform .15s;flex:none}
details.langs[open] summary::before{transform:rotate(45deg)}
details.langs summary:focus-visible{outline:2px solid var(--amber-deep);outline-offset:2px;border-radius:var(--r)}
details.langs ul{list-style:none;margin:0;padding:0 18px 4px;columns:3 130px;column-gap:20px}
details.langs li{padding:3px 0;color:var(--ink);font-size:.95rem;break-inside:avoid}
details.langs p{margin:0;padding:8px 18px 16px;color:var(--dim);font-size:.9rem}
@media (prefers-reduced-motion:reduce){details.langs summary::before{transition:none}}
.lang-vis{display:grid;gap:18px}
.lang-card{border-radius:18px;background:var(--bg2);border:1px solid var(--line);padding:22px}
.lang-card h3{font-size:1rem;margin-bottom:12px}
.lang-card p{color:var(--dim);font-size:.93rem;margin-bottom:16px}
.lsc{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;align-items:center;font-size:.95rem}
.lsc .ks{display:flex;gap:5px}
.lsc .ks kbd{font-size:.82rem;min-width:30px;text-align:center}
.lsc span{color:var(--dim)}
.lang-row{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center}
.lang-row img{width:200px}
.lang-row p{color:var(--dim);font-size:.93rem}
@media(max-width:520px){.lang-row{grid-template-columns:1fr;gap:10px}.lang-row img{width:180px}}

/* formatting */
.fmt{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:stretch;margin-top:26px}
@media(max-width:860px){.fmt{grid-template-columns:1fr}.fmt .arrow{transform:rotate(90deg);justify-self:center}}
.fmt .card{border-radius:18px;padding:24px;border:1px solid var(--line)}
.fmt .raw{background:var(--bg)}
.fmt .out{background:var(--paper);color:var(--paper-ink);border:1px solid var(--line2);box-shadow:0 18px 44px rgba(34,28,21,.12)}
.fmt small{display:block;font-size:.82rem;color:var(--faint);margin-bottom:12px}
.fmt .out small{color:#7A7064}
.fmt .raw p{font-family:var(--mono);font-size:.95rem;line-height:1.65;color:var(--dim)}
.fmt .raw p em{font-style:normal;color:var(--amber-soft)}
.fmt .out .txt{font-size:1.05rem;line-height:1.65;white-space:pre-line;min-height:9.9em}
.fmt .out .txt.mono{font-family:var(--mono);font-size:.9rem}
.arrow{align-self:center;color:var(--amber-soft)}
.arrow svg{width:34px;height:34px}
.prof-note{color:var(--faint);font-size:.9rem;margin-top:18px;max-width:70ch;min-height:3em}
.fmt-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:end}
@media(max-width:900px){.fmt-top{grid-template-columns:1fr;gap:20px}}
.optin{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:14px;border:1px dashed rgba(162,89,10,.4);background:rgba(200,122,18,.05);font-size:.93rem;color:var(--dim)}
.optin b{color:var(--ink)}
.optin svg{flex:none;width:22px;height:22px;color:var(--amber-soft);margin-top:2px}
.map{margin-top:56px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media(max-width:900px){.map{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.map{grid-template-columns:1fr}}
.map div{padding:18px;border-radius:16px;border:1px solid var(--line);background:var(--bg)}
.map h3{font-size:1rem}
.map p{font-size:.88rem;color:var(--faint);margin-top:4px;line-height:1.45}
.map ul{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.map li{font-size:.82rem;padding:3px 9px;border-radius:999px;background:var(--surf);color:var(--dim)}
.cmds{margin-top:56px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:36px;align-items:start}
@media(max-width:900px){.cmds{grid-template-columns:1fr;gap:22px}}
.cmds h3{font-size:1.4rem}
.cmds h3+p{color:var(--dim);margin-top:10px}
.cmd-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.cmd-list button{font:inherit;font-size:.9rem;color:var(--dim);background:var(--bg);border:1px solid var(--line2);border-radius:999px;padding:7px 14px;cursor:pointer;transition:border-color .15s,color .15s}
.cmd-list button:hover{color:var(--ink);border-color:var(--faint)}
.cmd-list button[aria-pressed="true"]{color:var(--ink);border-color:rgba(162,89,10,.6);background:rgba(200,122,18,.12)}
.cmd-out{display:grid;gap:12px}
.cmd-out .said,.cmd-out .got{border-radius:14px;padding:16px 18px}
.cmd-out .said{background:var(--bg);border:1px solid var(--line);font-family:var(--mono);font-size:.9rem;color:var(--dim);min-height:5.6em}
.cmd-out .said mark{background:rgba(200,122,18,.2);color:var(--amber-soft);border-radius:4px;padding:0 3px}
.cmd-out .got{background:var(--paper);color:var(--paper-ink);white-space:pre-line;min-height:6.4em;font-size:1rem}
.cmd-out small{display:block;font-family:var(--f);font-size:.78rem;color:var(--faint);margin-bottom:6px}
.cmd-out .got small{color:#7A7064}

/* keyboard layout + sentence mode demos */
.menubar{display:flex;align-items:center;justify-content:flex-end;gap:12px;height:30px;padding:0 12px;background:#0F0D0A;border-bottom:1px solid var(--line);font-size:.78rem;color:var(--dim)}
.menubar .src{display:inline-grid;place-items:center;min-width:26px;height:18px;border-radius:4px;background:var(--ink);color:#111;font-weight:700;font-size:.68rem;padding:0 4px}
.lay .wbody{min-height:120px}
#lay .mock{margin-top:22px}
.lay-bad{margin-top:14px;padding:12px 14px;border-radius:12px;border:1px solid rgba(217,118,95,.3);background:rgba(217,118,95,.06);font-size:.9rem;color:var(--faint)}
.lay-bad s{color:var(--no);text-decoration-thickness:1.5px;font-family:var(--f)}
.sent .wbody{min-height:150px}
#sent .tabs{margin-top:22px}
#sent .mock{margin-top:16px}
.sent-state{font-size:.78rem;color:var(--faint);display:flex;align-items:center;gap:8px;margin-top:12px;min-height:1.4em}
.sent-state .wave i{height:5px}
.sent p .new{animation:land .5s ease}
@keyframes land{from{background:rgba(162,89,10,.28)}to{background:transparent}}

/* microphone meter */
.meter{margin-top:22px;padding:18px;border-radius:16px;background:var(--bg2);border:1px solid var(--line)}
.meter-row{display:grid;grid-template-columns:110px 1fr;gap:12px;align-items:center;font-size:.84rem;color:var(--faint)}
.meter-row+.meter-row{margin-top:12px}
.mbar{position:relative;height:10px;border-radius:6px;background:var(--hair2);overflow:hidden}
.mbar i{position:absolute;left:0;top:0;bottom:0;width:10%;border-radius:6px;background:linear-gradient(90deg,var(--amber-deep),var(--amber-soft));transition:width .12s}
.mbar .floor{position:absolute;top:-3px;bottom:-3px;left:8%;width:2px;background:var(--ink);opacity:.5}
@media(max-width:420px){.meter-row{grid-template-columns:1fr;gap:6px}}

/* speed race (statistics block) */
.race{display:flex;flex-direction:column;gap:22px;margin-top:22px}
.lane-top{display:flex;justify-content:space-between;font-size:.88rem;color:var(--dim);margin-bottom:8px}
.lane-top b{color:var(--ink);font-weight:600}
.lane-text{font-size:.92rem;line-height:1.5;color:var(--ink);min-height:4.5em;padding:12px 14px;background:var(--bg);border:1px solid var(--line);border-radius:10px}
.lane-text .rest{color:transparent}
.track{height:6px;border-radius:9px;background:var(--hair2);margin-top:10px;overflow:hidden}
.track i{display:block;height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,var(--amber-deep),var(--amber-soft))}
.lane.typing .track i{background:#6B6258}

/* tables */
.tscroll{margin-top:36px;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:18px;border:1px solid var(--line);background:var(--bg2)}
.tscroll:focus-visible{outline-offset:2px}
table.t{width:100%;border-collapse:collapse;font-size:.95rem;min-width:640px}
.t th,.t td{padding:15px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.t tr:last-child>*{border-bottom:0}
.t thead th{font-size:.84rem;font-weight:600;color:var(--faint);background:var(--bg2)}
.t tbody th{font-weight:600;color:var(--ink)}
.t td{color:var(--dim)}
.t .num{font-variant-numeric:tabular-nums;white-space:nowrap}
.t tr.hl>*{background:rgba(200,122,18,.07)}
.t .tag{display:inline-block;font-size:.72rem;font-weight:600;padding:2px 8px;border-radius:999px;margin-left:8px;vertical-align:2px;background:var(--amber);color:var(--on-amber)}
.t .tag.q{background:none;border:1px solid var(--line2);color:var(--faint)}
.spd{display:flex;align-items:center;gap:10px}
.spd i{display:block;height:6px;border-radius:4px;background:var(--amber-soft);width:var(--w)}
.t.cmp{min-width:760px}
.t.cmp thead th:nth-child(2){color:var(--amber-soft)}
.t.cmp td:nth-child(2){color:var(--ink);background:rgba(200,122,18,.06)}
.foot-note{font-size:.84rem;color:var(--faint);margin-top:14px;max-width:88ch}
.foot-note a{color:var(--amber-soft)}
.subh{font-size:1.2rem;margin-top:56px}
.subh+.tscroll{margin-top:18px}

/* privacy band */
.privacy{background:radial-gradient(ellipse 60% 70% at 80% 20%,rgba(200,122,18,.22),transparent 70%),linear-gradient(180deg,#2A1B0B,#1E150B);border-top:1px solid rgba(232,169,74,.2);border-bottom:1px solid rgba(232,169,74,.2)}
.priv-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media(max-width:900px){.priv-grid{grid-template-columns:1fr;gap:36px}}
.privacy .lede{color:#D8CBB8}
.diagram{width:100%;height:auto;display:block}
.test{margin-top:30px;display:flex;gap:18px;align-items:center;padding:18px 20px;border-radius:16px;background:rgba(0,0,0,.25);border:1px solid rgba(232,169,74,.2)}
.switch{flex:none;width:52px;height:30px;border-radius:999px;border:0;background:#5AA06E;position:relative;cursor:pointer;transition:background .2s}
.switch::after{content:"";position:absolute;top:3px;left:25px;width:24px;height:24px;border-radius:50%;background:#fff;transition:left .2s;box-shadow:0 2px 4px rgba(0,0,0,.3)}
.switch[aria-checked="false"]{background:#5A5148}
.switch[aria-checked="false"]::after{left:3px}
.test p{font-size:.95rem;color:#D8CBB8}
.test b{color:var(--ink)}
/* The two Wi-Fi captions share a cell: `hidden` hides one visually but it still sizes the box. */
.wifi-l{display:grid}
.wifi-l>span{grid-area:1/1}
.wifi-l>span[hidden]{display:block;visibility:hidden}
.net{margin-top:64px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:28px}
@media(max-width:900px){.net{grid-template-columns:1fr}}
.net h3{font-size:1.2rem}
.net h3+p{color:#D8CBB8;margin-top:8px;font-size:.95rem}
.net-list{list-style:none;padding:0;margin:18px 0 0;border-top:1px solid rgba(232,169,74,.2)}
.net-list li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:18px;padding:16px 0;border-bottom:1px solid rgba(232,169,74,.14)}
@media(max-width:600px){.net-list li{grid-template-columns:1fr;gap:4px}}
.net-list b{font-weight:600}
.net-list b span{display:block;font-weight:400;font-size:.84rem;color:#BFB09B;margin-top:2px}
.net-list p{color:#D8CBB8;font-size:.93rem}
.never{padding:24px;border-radius:18px;background:rgba(0,0,0,.25);border:1px solid rgba(232,169,74,.2);align-self:start}
.never ul{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:10px}
.never li{position:relative;padding-left:26px;color:#D8CBB8;font-size:.95rem}
.never li::before,.never li::after{content:"";position:absolute;left:3px;top:.72em;width:12px;height:2px;background:var(--no);border-radius:2px;transform:rotate(45deg)}
.never li::after{transform:rotate(-45deg)}
.never p{color:#BFB09B;font-size:.88rem;margin-top:16px}
.hipaa{margin-top:22px;font-size:.9rem;color:#BFB09B;border-left:2px solid rgba(232,169,74,.45);padding-left:16px}
.hipaa em{font-style:normal;color:#A39580}

/* gallery */
.gal{margin-top:36px}
.gal-bar{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;justify-content:space-between}
.gal-bar .tabs{flex:1 1 auto}
@media(max-width:560px){.gal-bar .tabs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.theme-sw{display:flex;gap:2px;padding:3px;border-radius:999px;border:1px solid var(--line);background:var(--bg2);flex:none}
.theme-sw button{font:inherit;font-size:.84rem;color:var(--faint);background:none;border:0;border-radius:999px;padding:6px 12px;cursor:pointer}
.theme-sw button[aria-pressed="true"]{background:var(--surf2);color:var(--ink)}
.gal-stage{margin-top:26px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:36px;align-items:start}
@media(max-width:900px){.gal-stage{grid-template-columns:1fr;gap:18px}}
.gal-view{display:grid;place-items:center;min-height:320px;padding:28px;border-radius:22px;background:radial-gradient(ellipse at 50% 30%,rgba(200,122,18,.12),transparent 70%),var(--bg2);border:1px solid var(--line)}
.gal-view .shot{width:100%;max-width:var(--mw,820px)}
.mw360{--mw:360px}
@media(max-width:560px){.gal-view{padding:14px;min-height:0}}
.gal-view a{display:block;text-decoration:none}
/* Both hosts' gallery link carries this exact layout, hard-coded once here instead
   of as inline style on the <a id="gal-link"> in each body file. */
#gal-link{width:100%;display:grid;place-items:center}
.gal-txt h3{font-size:1.25rem}
.gal-txt p{color:var(--dim);margin-top:10px;font-size:.97rem}
.gal-nav{display:flex;gap:8px;margin-top:18px}
.gal-nav button{font:inherit;font-size:.88rem;color:var(--dim);background:none;border:1px solid var(--line2);border-radius:999px;padding:7px 14px;cursor:pointer}
.gal-nav button:hover{color:var(--ink)}
.gal-count{font-size:.84rem;color:var(--faint);margin-top:14px;font-variant-numeric:tabular-nums}

/* memo mock (used by /memo) */
.memo-win .wbody{padding:0;display:grid;grid-template-columns:1fr 1fr;min-height:340px}
@media(max-width:620px){.memo-win .wbody{grid-template-columns:1fr}}
.m-sum{padding:18px;border-right:1px solid var(--line);background:#1C1813}
.m-tr{padding:18px}
.m-h{font-size:.78rem;font-weight:600;color:var(--faint);margin-bottom:12px;display:flex;gap:8px;align-items:center}
.m-h .draft{font-size:.7rem;padding:1px 7px;border-radius:999px;border:1px solid var(--line2)}
.m-sum p{font-size:.86rem;color:var(--dim);line-height:1.5}
.m-pt{display:flex;gap:10px;margin-top:10px;font-size:.86rem;line-height:1.45}
.tc{font-family:var(--mono);font-size:.75rem;color:var(--amber-soft);background:rgba(200,122,18,.12);border-radius:5px;padding:2px 6px;height:max-content;flex:none}
.turn{margin-bottom:14px}
.turn .who{font-size:.76rem;font-weight:600;display:flex;gap:8px;align-items:center}
.turn .who i{width:8px;height:8px;border-radius:50%}
.turn p{font-size:.86rem;color:var(--dim);margin-top:3px;line-height:1.5}
.turn .t{font-family:var(--mono);color:var(--faint);font-weight:400}
.rec{display:flex;align-items:center;gap:6px;margin-left:auto;font-size:.72rem;font-weight:700;color:var(--no)}
.rec::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--no)}


/* pricing */
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px;align-items:stretch}
@media(max-width:900px){.prices{grid-template-columns:1fr;max-width:440px}}
.price{position:relative;display:flex;flex-direction:column;padding:30px 26px;border-radius:20px;background:var(--bg2);border:1px solid var(--line)}
.price.reco{background:#FFFFFF;border-color:var(--amber);box-shadow:0 18px 44px rgba(200,122,18,.16)}
.price .badge{position:absolute;top:-12px;left:26px;background:var(--amber);color:var(--on-amber);font-size:.76rem;font-weight:700;padding:4px 11px;border-radius:999px}
.price .tier{font-size:1.15rem;font-weight:600}
.price .dev{color:var(--faint);font-size:.9rem}
.price .amt{font-size:3rem;font-weight:600;letter-spacing:-.04em;margin-top:18px;line-height:1}
.price .amt small{font-size:.9rem;font-weight:500;color:var(--faint);letter-spacing:0;margin-left:6px}
.price ul{list-style:none;padding:0;margin:20px 0 26px;display:flex;flex-direction:column;gap:9px;font-size:.95rem;color:var(--dim)}
.price li{position:relative;padding-left:20px}
.price li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--amber-soft)}
.price .btn{margin-top:auto;width:100%}
.pnote{margin-top:22px;color:var(--faint);font-size:.88rem;max-width:80ch}
.pnote a{color:var(--amber-soft)}
.bundle{margin-top:28px;display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;padding:26px 28px;border-radius:20px;border:1px dashed rgba(162,89,10,.4);background:rgba(200,122,18,.05)}
@media(max-width:760px){.bundle{grid-template-columns:1fr}}
@media(max-width:560px){.bundle{padding:22px 18px}}
.bundle h3{font-size:1.25rem}
.bundle p{color:var(--dim);margin-top:8px;font-size:.96rem;max-width:62ch}
.bundle p a{color:var(--amber-soft)}
.bundle .bb{display:flex;flex-direction:column;gap:10px;min-width:230px}
.bundle .big{font-size:2.4rem;font-weight:600;letter-spacing:-.04em;line-height:1;text-align:center}
.launch{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px;margin:0 0 22px;font-size:.92rem;color:var(--faint);text-align:center}
.lede + .launch{margin-top:28px}
.launch-badge{display:inline-block;padding:4px 12px;border-radius:999px;background:var(--amber);color:var(--on-amber);font-weight:600;font-size:.82rem;letter-spacing:.01em}
.was-price{display:block;font-size:1.05rem;font-weight:500;letter-spacing:0;color:var(--faint);text-decoration:line-through;text-decoration-thickness:2px;margin-bottom:4px}
.bundle .big .was-price{font-size:1rem;margin-bottom:2px}
.was-inline{color:var(--faint);font-weight:500;text-decoration:line-through;text-decoration-thickness:1.5px;white-space:nowrap}
.bundle .was{font-size:.85rem;color:var(--faint);text-align:center}

/* faq */
.faq{max-width:820px;margin-top:40px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;font-size:1.1rem;font-weight:500;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;border-right:2px solid var(--amber-soft);border-bottom:2px solid var(--amber-soft);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .a{padding:0 0 24px;color:var(--dim);max-width:70ch}
.faq .a p+p,.faq .a p+ul,.faq .a ul+p{margin-top:12px}
.faq .a ul{margin:0;padding-left:20px}
.faq a{color:var(--amber-soft)}

/* closing + footer */
/* Both hosts' final section sits right under the FAQ, whose own bottom padding
   already gives it room, so the section's usual top padding would double it up. */
.closing{text-align:center;padding-bottom:40px;padding-top:0}
.closing h2{max-width:18ch;margin:0 auto}
.closing .cta-row{justify-content:center}
footer{border-top:1px solid var(--line);padding:48px 0 56px;color:var(--faint);font-size:.9rem}
.foot{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
@media(max-width:820px){.foot{grid-template-columns:1fr 1fr}}
footer h4{margin:0 0 12px;font-size:.9rem;color:var(--ink);font-weight:600}
footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
footer a{text-decoration:none;color:var(--dim)}
footer a:hover{color:var(--ink)}
.foot-brand{color:var(--ink)}
.foot-lede{margin-top:12px;max-width:34ch}
.fine{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);font-size:.82rem;line-height:1.6}

/* Footer language switcher — full names (English · Deutsch · ...), unlike the
   compact nav one. NEVER hidden at any width: the nav switcher disappears
   below 560px (no room next to Memo/Try/Buy — see .langnav above), so this
   is the only language entry point a phone has. flex-wrap, not nowrap: on a
   narrow phone the four names wrap onto more than one line rather than
   overflowing the footer. */
.langnav-footer{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:14px;font-size:.85rem;color:var(--faint)}
.langnav-footer a{color:var(--faint);text-decoration:underline;text-underline-offset:2px}
.langnav-footer a:hover{color:var(--ink)}
.langnav-footer .lang-cur{color:var(--ink);font-weight:600}

/* Reveal on scroll. Only when JS has confirmed it can reveal them again (the class is
   set by the script), so a page without JS never hides anything. `translate`, not
   `transform`: several mock-ups carry a transform of their own that this must not undo. */
.rv-on .rv{opacity:0;translate:0 28px;transition:opacity .7s cubic-bezier(.2,.7,.2,1),translate .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--rv-d,0s)}
.rv-on .rv.in{opacity:1;translate:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv-on .rv{opacity:1;translate:none}
  html{scroll-behavior:auto}
}
/* A long tab row (the gallery) scrolls sideways instead of becoming a tall grid. */
@media(max-width:560px){
  .tabs.scroll{display:flex;border-radius:999px}
  .tabs.scroll button{white-space:nowrap;padding:9px 14px}
}
.tl-key{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;font-size:.76rem;color:var(--faint);margin-top:4px}
.tl-key i{display:inline-block;width:14px;height:8px;border-radius:4px;margin-right:-8px;vertical-align:0}
.tl-key i.r{background:var(--amber-soft)}.tl-key i.t{background:var(--ok)}.tl-key i.k{background:#6B6258}
.tl-key i.x{background:repeating-linear-gradient(45deg,rgba(217,118,95,.7) 0 3px,rgba(217,118,95,.3) 3px 6px)}
.tbar[hidden]{display:none}
.gal-txt .theme-sw{width:max-content;margin-top:18px}
.tabs.scroll{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);padding-right:36px}
.swipe{display:none;font-size:.82rem;color:var(--faint);margin:28px 0 -24px}
@media(max-width:760px){.swipe{display:block}}
@media(max-width:560px){.hk-cap{min-height:5em}}
/* Unformatted recognition output is ordinary punctuated prose, so it is set as prose. */
.fmt .raw p,.cmd-out .said{font-family:var(--f);font-size:1rem}

/* Long-form pages (privacy, terms, dpa, refund, imprint, security). These carry legal
   text verbatim from the old site (see CLAUDE.md / global constraints), so the markup
   is close to the old site/page.css layout on purpose — a narrow reading column, a
   plain heading scale, tables that scroll sideways rather than forcing the page wide.
   Everything is scoped under .doc so it can't leak into the marketing pages that share
   this stylesheet. */
.doc{padding:0 0 clamp(72px,10vw,120px)}
.doc .wrap{max-width:72ch}
.doc-hero{padding-top:clamp(32px,5vw,52px);position:relative}
/* The eyebrow's own word ("Legal", "Security") is generated from the attribute rather
   than written into the markup, because the verbatim test compares this page's <main>
   text against the old page's — any real text node here would be a word the old page
   never had. */
.doc-hero::before{content:attr(data-eyebrow);display:block;color:var(--amber-soft);font-size:.95rem;font-weight:500;margin-bottom:14px;letter-spacing:.02em}
.doc-hero h1{font-size:clamp(2rem,4.4vw,3rem);line-height:1.1;letter-spacing:-.03em;font-weight:600}
.doc-hero .updated{margin-top:14px;color:var(--faint);font-size:.9rem}
.doc-hero .lede{margin-top:20px}
.doc h2{font-size:1.55rem;font-weight:600;letter-spacing:-.015em;margin:48px 0 0}
.doc>.wrap>h2:first-of-type,.doc-hero+h2{margin-top:clamp(40px,6vw,56px)}
.doc h3{font-size:1.15rem;font-weight:600;margin:28px 0 0}
.doc h2[id],.doc h3[id]{scroll-margin-top:100px}
.doc p{margin:14px 0 0;color:var(--dim)}
.doc p strong,.doc li strong{color:var(--ink)}
.doc ul,.doc ol{margin:14px 0 0;padding-left:22px;color:var(--dim)}
.doc li{margin:8px 0}
.doc a{color:var(--amber-soft)}
.doc a.btn{color:var(--ink)}.doc a.btn-amber{color:var(--on-amber)}
/* overflow-wrap:anywhere — some code spans (a file path, a URL) are one run with no
   ordinary break opportunity, some of it non-breaking on purpose (privacy.html's
   "Application&nbsp;Support"); at 390px this used to push the page itself wider than
   the viewport (docScrollWidth > innerWidth) with no visible scrollbar to explain it,
   since body already has overflow-x:hidden — the text was simply clipped, unreadable,
   rather than wrapping. This lets it break as a last resort instead. */
.doc code{font-family:var(--mono);font-size:.88em;background:var(--surf);border:1px solid var(--line2);border-radius:5px;padding:1px 5px;color:var(--ink);overflow-wrap:anywhere}
.doc .callout{margin-top:24px;background:var(--surf);border:1px solid var(--line2);border-left:3px solid var(--amber);border-radius:12px;padding:20px 22px}
.doc .callout p:first-child{margin-top:0}
.doc .muted{color:var(--faint);font-size:.9rem}
.doc .table-scroll{margin-top:20px;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:14px;border:1px solid var(--line);background:var(--bg2)}
.doc table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:520px}
.doc th,.doc td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.doc tr:last-child>*{border-bottom:0}
.doc thead th{font-size:.84rem;font-weight:600;color:var(--faint);background:var(--bg2)}
.doc th{font-weight:600;color:var(--ink)}
.doc td{color:var(--dim)}
@media(max-width:560px){.doc-hero{padding-top:20px}}

/* Task 4/5 additions: the guides, the install walkthrough and the funnel pages (pay,
   welcome) all extend the same .doc scope the legal pages use, plus a handful of
   page-specific bits none of the marketing sections above needed. */
/* Named .aside rather than .verdict: site.css already has an unrelated, unscoped
   .verdict (the "$491 kept over three years" calculator readout on the home page,
   font-size:clamp(2.2rem,5vw,3.2rem)) and reusing the name made alternatives.html's
   "Stay with X if…" asides render at that huge size — the scoped .doc .verdict b
   below only set color, so nothing overrode the unscoped rule's font-size. Same
   class of bug as the .steps collision from Task 3; the fix here is the same one
   that report recommended — a different name instead of fighting the specificity. */
.doc .aside{margin-top:14px;padding-left:14px;border-left:2px solid var(--line);color:var(--dim);font-size:.95rem}
.doc .aside b{color:var(--ink)}
/* Install's screenshots reuse the sitewide .shot "window" card (dark rounded frame);
   this just caps its width and centres it in the narrow .doc column instead of letting
   it stretch to the full 72ch measure, the way the marketing sections' own .vis/.gal
   containers do it for them. */
.doc .shot{width:100%;max-width:480px;margin:24px auto 0}
.doc .shot.narrow{max-width:300px}
/* The pay page's purchase gate: an unticked checkbox that disables the buy button
   until it's read, same idea as the old site/page.css .gate but on the dark tokens.
   :has() covers a reader with JavaScript off, for whom pay.js's aria-disabled writes
   never arrive. */
.doc .gate{margin-top:22px;background:var(--surf);border:1px solid var(--line2);border-radius:14px;padding:20px 22px}
.doc .gate label{display:flex;gap:13px;align-items:flex-start;cursor:pointer;font-size:.98rem;color:var(--dim)}
.doc .gate input{margin:5px 0 0;width:20px;height:20px;flex:none;cursor:pointer;accent-color:var(--amber)}
.doc .gate input:focus-visible{outline:2px solid var(--amber-soft);outline-offset:3px}
.doc .gate .hint{margin-top:14px;color:var(--faint);font-size:.86rem}
.doc .gate .btn[aria-disabled="true"],
.doc .gate:has(input:not(:checked)) .btn{opacity:.5;pointer-events:none}

/* These three overrides collide with an earlier rule at equal-or-higher specificity, so
   unlike the utility classes near the top of this file they have to come last to win:
   .two already sets its own margin-top (same specificity — CSS ties break on source
   order), and table.t already sets min-width at higher specificity (element+class beats
   a lone class), so the override is qualified the same way to match it. */
.section-gap{margin-top:clamp(80px,11vw,140px)}
table.t.minw520{min-width:520px}
table.t.minw560{min-width:560px}

/* Section tones: one per meaning, so blocks read as different places without a rainbow.
   paper = default reading, sand = the buying decision, clay = the sibling product,
   umber = the trust band (dark on purpose; `.privacy` already declares it).
   Clay marks the Memo teaser on the home page; test_light_theme_text_contrast checks both. */
.toc ul{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px;max-width:62ch}
.toc a{color:inherit;text-decoration:none;display:block}
.toc a:hover b,.toc a:focus-visible b{text-decoration:underline}
.toc b{font-weight:600}
.tone-sand{background:#EDE3D0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tone-clay{background:#F5E1CE;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tone-paper{background:var(--bg)}
/* The darker tones need the deeper accent to keep accent text at AA (4.5:1). */
.tone-sand,.tone-clay{--amber-soft:#8A4A07}
.tone-sand .tabs,.tone-clay .tabs{background:var(--bg)}
.tone-sand .panel,.tone-clay .panel{background:var(--bg)}

/* Hindi (Devanagari): system fonts only (font-src is 'self'). Matras and the
   shirorekha need more leading than Latin at the same size, and letter-spacing
   breaks conjuncts, so the tracked-out uppercase styles are switched off. */
html[lang=hi] body{line-height:1.75}
html[lang=hi] h1,html[lang=hi] h2,html[lang=hi] h3,html[lang=hi] .hero h1,html[lang=hi] .doc-hero h1,html[lang=hi] .doc h2,html[lang=hi] .doc-hero::before,html[lang=hi] .doc-h,html[lang=hi] .verdict b,html[lang=hi] .stat b{line-height:1.3;letter-spacing:0}
html[lang=hi] .langnav,html[lang=hi] .langnav-footer{letter-spacing:0;text-transform:none}
html[lang=hi] .launch-badge{letter-spacing:0}
.price.contact p{margin:20px 0 26px;font-size:.95rem;color:var(--dim)}

/* home: three proof points under the privacy diagram */
.proofs{list-style:none;padding:0;margin:56px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;border-top:1px solid rgba(232,169,74,.2)}
@media(max-width:900px){.proofs{grid-template-columns:1fr;gap:22px}}
.proofs li{padding-top:22px}
.proofs b{display:block;font-weight:600;font-size:1.05rem}
.proofs p{color:#D8CBB8;margin-top:6px;font-size:.95rem}
.proofs a{display:inline-block;margin-top:10px;color:var(--amber);font-size:.9rem}

/* home: Memo teaser (static card; the animated mock-up lives on the Memo page) */
.memo-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
@media(max-width:900px){.memo-grid{grid-template-columns:1fr;gap:32px}}
.memo-card{border-radius:14px;overflow:hidden;background:var(--bg);border:1px solid var(--line)}
.memo-body{padding:18px 20px 20px;color:var(--ink)}
.memo-t{font-weight:600}
.memo-m{font-size:.85rem;color:var(--dim);margin-top:2px}
.memo-h{margin-top:16px;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--amber-soft)}
.memo-body ul{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:10px}
.memo-body li{display:grid;grid-template-columns:auto 1fr;gap:12px;font-size:.93rem}
.memo-body li b{font-weight:600;color:var(--amber-soft);font-variant-numeric:tabular-nums}
.memo-cap{margin-top:12px;font-size:.85rem;color:var(--dim)}
.hero .lede strong{color:var(--ink);font-weight:700}