/* Every Lector site, brand v2 "Two Voices". Tokens mirror brand/v2/tokens.json */
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif-400-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif-400-italic.woff2) format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/inter-tight-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/inter-tight-500-normal.woff2) format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/inter-tight-600-normal.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/geist-mono-400-normal.woff2) format("woff2")}

:root{
  color-scheme:light;
  --bg:#F5F2E8; --surface:#FBF9F2; --elevated:#FFFFFF; --border:#DDD7C6;
  --text:#17150F; --text-2:#575146; --text-3:#716B5C;
  --accent:#E9D12B; --accent-on:#17150F; --accent-ink:#6E5F00;
  --focus:#6E5F00; --sub:#F2E04A;
  --shadow-1:0 1px 0 rgba(23,21,15,.04),0 1px 2px rgba(23,21,15,.06);
  --font-display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --font-body:"Inter Tight",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  /* type scale: major third on 15 (brand), body 16 */
  --t-11:.6875rem; --t-12:.75rem; --t-15:.9375rem; --t-16:1rem; --t-19:1.1875rem;
  --t-24:1.5rem; --t-30:1.875rem; --t-38:2.375rem; --t-47:2.9375rem; --t-59:3.6875rem;
  --step-h1:clamp(2.375rem,1.5rem + 3.6vw,3.6875rem);
  --step-h2:clamp(1.875rem,1.4rem + 1.8vw,2.9375rem);
  /* spacing roles (8-pt) */
  --s-4:.25rem; --s-8:.5rem; --s-12:.75rem; --s-16:1rem; --s-24:1.5rem; --s-32:2rem; --s-48:3rem; --s-64:4rem; --s-96:6rem;
  --gutter:1rem; --section:4rem;
  --gap-eyebrow:var(--s-8); --gap-lead:var(--s-12); --gap-body:var(--s-16); --gap-cta:var(--s-24); --gap-block:var(--s-32);
  /* radii */
  --r-xs:2px; --r-sm:4px; --r-md:6px; --r-lg:10px; --r-xl:14px;
  /* motion */
  --ease:cubic-bezier(.2,0,0,1); --ease-in:cubic-bezier(.16,1,.3,1); --ease-settle:cubic-bezier(.2,.9,.25,1);
  --d-fast:140ms; --d-base:220ms; --d-slow:360ms; --d-build:520ms;
  --maxw:72rem; --measure:70ch;
}
@media (min-width:48rem){:root{--gutter:1.5rem;--section:6rem}}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0D0C0A; --surface:#151411; --elevated:#1E1C17; --border:#2D2A23;
    --text:#F3EFE6; --text-2:#B6B0A1; --text-3:#8A8475;
    --accent:#F2E04A; --accent-on:#15130A; --accent-ink:#F2E04A; --focus:#F2E04A;
    --shadow-1:none;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0D0C0A; --surface:#151411; --elevated:#1E1C17; --border:#2D2A23;
  --text:#F3EFE6; --text-2:#B6B0A1; --text-3:#8A8475;
  --accent:#F2E04A; --accent-on:#15130A; --accent-ink:#F2E04A; --focus:#F2E04A;
  --shadow-1:none;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:4.5rem}
body{margin:0;background:var(--bg);color:var(--text);font:400 var(--t-16)/1.5 var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%;display:block}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-sm)}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--accent-on);padding:var(--s-8) var(--s-16);z-index:20;font-weight:600}
.skip:focus{left:var(--gutter);top:var(--s-8)}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
h1,h2{font-family:var(--font-display);font-weight:400;line-height:1.05;letter-spacing:-.01em;margin:0;text-wrap:balance}
h1{font-size:var(--step-h1)}
h2{font-size:var(--step-h2);margin-bottom:var(--gap-lead)}
h3{font:600 var(--t-19)/1.2 var(--font-body);margin:0 0 var(--s-8);letter-spacing:-.005em}
h1 em,h2 em{font-style:italic}
p{margin:0 0 var(--gap-body);max-width:var(--measure)}
.eyebrow{font:400 var(--t-12)/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 var(--gap-eyebrow)}
.lead{font-size:var(--t-19);line-height:1.5;color:var(--text-2);max-width:34rem}
.muted{color:var(--text-2)}
.small{font-size:var(--t-15)}

/* header */
.top{border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10;background:var(--bg)}
.top .wrap{display:flex;align-items:center;gap:var(--s-16);min-height:4rem;padding-block:var(--s-8)}
.brand{display:flex;align-items:center;gap:var(--s-12);text-decoration:none;margin-right:auto;color:var(--text)}
.brand:hover{color:var(--text)}
.wm{font:400 1.625rem/1 var(--font-display);letter-spacing:-.01em;white-space:nowrap}
.wm i{font-style:italic}
.top nav{display:flex;gap:var(--s-24);align-items:center}
.top nav a:not(.btn){text-decoration:none;font-size:var(--t-15);font-weight:500}
.top nav a:not(.btn):hover{color:var(--accent-ink)}
.lang,.themebtn{border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s-8) var(--s-12);font:500 var(--t-12)/1 var(--font-mono);text-decoration:none;color:var(--text);background:transparent;cursor:pointer;min-height:2.25rem;display:inline-flex;align-items:center;justify-content:center}
.lang:hover,.themebtn:hover{border-color:var(--text-3);color:var(--text)}
.themebtn{width:2.25rem;padding:0}
.themebtn svg{width:1.1rem;height:1.1rem}
.themebtn .sun{display:none}
:root[data-theme="dark"] .themebtn .sun{display:block}
:root[data-theme="dark"] .themebtn .moon{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .themebtn .sun{display:block}:root:not([data-theme="light"]) .themebtn .moon{display:none}}
@media (max-width:40rem){.top nav .hide-s{display:none}.top nav{gap:var(--s-8)}.wm{font-size:1.4rem}}

/* logo mark + build animation */
.mk{width:1.75rem;height:1.75rem;flex:none;overflow:visible}
.mk rect{fill:var(--text)}
.mk .lek{fill:var(--accent)}
.mk .lek,.mk .sp,.mk .tp,.mk .bt{transform-box:fill-box}
.js .mk.build .sp{animation:mkSp var(--d-build) var(--ease-in) both}
.js .mk.build .tp{animation:mkTp var(--d-build) var(--ease-in) 120ms both}
.js .mk.build .bt{animation:mkTp var(--d-build) var(--ease-in) 240ms both}
.js .mk.build .lek{animation:mkLek var(--d-build) var(--ease-settle) 360ms both}
@keyframes mkSp{from{transform:translateY(-14px);opacity:0}to{transform:none;opacity:1}}
@keyframes mkTp{from{transform:translateX(-14px);opacity:0}to{transform:none;opacity:1}}
@keyframes mkLek{0%{transform:translateX(14px);opacity:0}70%{transform:translateX(-3px);opacity:1}100%{transform:none;opacity:1}}
.mk.big{width:clamp(4.5rem,12vw,7rem);height:auto;aspect-ratio:1}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-8);background:var(--accent);color:var(--accent-on);font:600 var(--t-15)/1 var(--font-body);padding:0 var(--s-24);border-radius:var(--r-md);text-decoration:none;border:1px solid transparent;min-height:2.5rem;transition:transform var(--d-fast) var(--ease),filter var(--d-fast) var(--ease)}
.btn:hover{color:var(--accent-on);filter:brightness(1.06);transform:translateY(-1px)}
.btn:active{transform:none}
.btn.sm{padding:0 var(--s-16);min-height:2.25rem}
.btn.ghost{background:var(--surface);color:var(--text);border-color:var(--border)}
.btn.ghost:hover{color:var(--text);border-color:var(--text-3);filter:none}
.btn[aria-disabled=true]{opacity:.55;pointer-events:none}
.hero .btn,.final .btn{min-height:3rem;font-size:var(--t-16)}

/* hero */
.hero{padding-block:var(--s-48) var(--section)}
.hero-grid{display:grid;gap:var(--s-48);grid-template-columns:minmax(0,1fr)}
@media (min-width:64rem){.hero-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center}}
.hero h1{margin-bottom:var(--gap-lead)}
.hero .lead{margin-bottom:var(--gap-cta)}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--s-12) var(--s-24);align-items:center}
.cta-sub{margin:var(--s-12) 0 0;font-size:var(--t-15);color:var(--text-2)}
.other{font-size:var(--t-15)}
.trust{display:flex;gap:var(--s-8);align-items:center;margin:var(--gap-block) 0 0;font-size:var(--t-15);color:var(--text-2)}
.trust svg{width:1.1rem;height:1.1rem;flex:none;color:var(--text-2)}

/* player frame */
.player{margin:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-1)}
.pl-screen{position:relative;container-type:inline-size;background:#0D0C0A;aspect-ratio:960/410}
.pl-screen img{width:100%;height:100%;object-fit:cover}
.pl-sub{position:absolute;left:4%;right:4%;bottom:7%;display:grid;gap:.25em;justify-items:center;text-align:center;min-height:5.2em;align-content:end;font-size:clamp(11px,3.5cqw,22px);line-height:1.25;pointer-events:none}
.pl-sub span{display:block;max-width:100%;text-shadow:0 0 1px #000,0 1px 1px #000,1px 0 1px #000,-1px 0 1px #000,0 2px 6px rgba(0,0,0,.7)}
.pl-sub .lek{font-weight:600;color:var(--sub);min-height:1.25em;order:1}
.pl-sub .orig{font-weight:500;color:#F3EFE6;opacity:0;order:2;font-size:.82em;transition:opacity var(--d-base) var(--ease)}
.pl-sub .orig.on{opacity:.85}
.pl-sub .w{display:inline-block;opacity:0;transition:opacity var(--d-base) var(--ease)}
.pl-sub .w.on{opacity:1}
.pl-sub .sp{display:inline-block;width:.28em}
.pl-ctl{display:flex;align-items:center;gap:var(--s-12);padding:var(--s-8) var(--s-16);border-top:1px solid var(--border)}
.pl-btn{width:2rem;height:2rem;border-radius:var(--r-md);border:1px solid var(--border);background:var(--elevated);color:var(--text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.pl-btn:hover{border-color:var(--text-3)}
.pl-btn svg{width:.9rem;height:.9rem;fill:currentColor}
.pl-btn .ps{display:none}
.player.playing .pl-btn .pp{display:none}
.player.playing .pl-btn .ps{display:block}
.tc{font:400 var(--t-12)/1 var(--font-mono);color:var(--text-2);font-variant-numeric:tabular-nums;margin-right:auto}
.chip,.tag{font:400 .625rem/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--border);color:var(--text-2);border-radius:var(--r-sm);padding:.35em .55em;display:inline-block}
.chip.on{border-color:var(--accent-ink);color:var(--accent-ink)}
.pl-tracks{position:relative;padding:var(--s-8) var(--s-16) var(--s-16);display:grid;gap:var(--s-8)}
.trk{display:grid;grid-template-columns:4.4rem minmax(0,1fr);gap:var(--s-12);align-items:center}
.trk b{font:400 var(--t-11)/1 var(--font-mono);color:var(--text-3);letter-spacing:.04em;white-space:nowrap;text-transform:uppercase}
@media (min-width:30rem){.trk{grid-template-columns:6rem minmax(0,1fr)}}
.lane{position:relative;height:1.5rem;border-radius:var(--r-xs);background:var(--bg);border:1px solid var(--border);overflow:hidden}
.lane svg{position:absolute;inset:0;width:100%;height:100%}
.lane.o svg{fill:var(--text-3);opacity:.7}
.lane.o{transition:opacity 200ms var(--ease)}
.lane.o svg.pl{fill:var(--text);opacity:.9;clip-path:inset(0 calc(100% - var(--p,0%)) 0 0)}
.pl-tracks.speak .lane.o{opacity:.6}
.lane i{position:absolute;top:3px;bottom:3px;border-radius:var(--r-xs)}
.lane.l i{background:var(--accent);opacity:.45;transition:opacity 240ms var(--ease)}
.lane.l i.on{opacity:1;transition-duration:180ms}
.lane.l i s{position:absolute;inset:3px 4px;display:flex;align-items:center;gap:2px;text-decoration:none;overflow:hidden}
.lane.l i s u{flex:1;background:var(--accent-on);opacity:.55;border-radius:1px;min-width:1px;text-decoration:none}
.lane.s i{background:var(--text-3);opacity:.7}
.ph{position:absolute;top:var(--s-8);bottom:var(--s-16);left:calc(var(--s-16) + 4.4rem + var(--s-12));right:var(--s-16);pointer-events:none;overflow:hidden}
@media (min-width:30rem){.ph{left:calc(var(--s-16) + 6rem + var(--s-12))}}
.ph div{position:absolute;inset:0;transform:translateX(var(--px,0%));will-change:transform}
.ph div::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--text);border-radius:1px}
.note-row{display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-16);padding:0 var(--s-16) var(--s-12);margin:0;font-size:var(--t-12);color:var(--text-3)}
.note-row a{color:var(--text-2)}
.note-row span{max-width:none}

/* sections */
section{padding-block:var(--section)}
.alt{background:var(--surface);border-block:1px solid var(--border)}
.steps{list-style:none;margin:var(--gap-block) 0 0;padding:0;display:grid;gap:var(--gap-block);grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));counter-reset:s}
.steps li{counter-increment:s;border-top:1px solid var(--border);padding-top:var(--s-16)}
.steps li::before{content:counter(s,decimal-leading-zero);font:400 var(--t-12)/1 var(--font-mono);color:var(--accent-ink);display:block;margin-bottom:var(--s-12);letter-spacing:.06em}
.steps p{color:var(--text-2);margin:0}
.chips{list-style:none;padding:0;margin:var(--gap-block) 0;display:flex;flex-wrap:wrap;gap:var(--s-8)}
.chips li{margin:0}
.chips button,.chips li.soon{font:400 var(--t-12)/1 var(--font-mono);border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:var(--r-sm);padding:var(--s-8) var(--s-12);min-height:2rem;display:inline-flex;align-items:center;gap:var(--s-8)}
.alt .chips button{background:var(--bg)}
.chips button{cursor:pointer;transition:border-color var(--d-fast) var(--ease),color var(--d-fast) var(--ease)}
.chips button:hover{border-color:var(--text-3)}
.chips button .cd{color:var(--text-3);font-size:var(--t-11);text-transform:uppercase}
.chips button[aria-pressed=true]{border-color:var(--accent-ink);color:var(--accent-ink)}
.chips button[aria-pressed=true] .cd{color:var(--accent-ink)}
.chips li.soon{border-style:dashed;color:var(--text-2)}
.langshow{margin-top:var(--gap-block);position:relative;container-type:inline-size;border:1px solid var(--border);border-radius:var(--r-lg);background:#0D0C0A;height:clamp(7.5rem,17vw,11rem);width:100%;overflow:hidden;display:grid;place-items:center;padding:var(--s-16)}
.langshow .ls{font:600 clamp(1.1rem,5cqw,2.2rem)/1.25 var(--font-body);color:var(--sub);text-align:center;text-shadow:0 0 1px #000,0 1px 2px #000;max-width:100%;transition:opacity var(--d-base) var(--ease);text-wrap:balance}
.langshow .ls.out{opacity:0}
.langshow .lc{position:absolute;left:var(--s-12);top:var(--s-12);font:400 .625rem/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:#B6B0A1;border:1px solid #2D2A23;border-radius:var(--r-sm);padding:.35em .55em}
.feat{display:grid;gap:var(--s-32) var(--s-48);grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));margin-top:var(--gap-block)}
.feat article p{color:var(--text-2);margin:0 0 var(--s-12)}
.tag{border-color:var(--accent-ink);color:var(--accent-ink)}
.tag.soon{border-color:var(--border);color:var(--text-2)}
.phonebox{margin-top:var(--gap-block);border:1.5px dashed var(--border);border-radius:var(--r-lg);padding:var(--s-24);display:grid;gap:var(--s-8);justify-items:start;background:var(--surface)}
.phonebox h3{margin:0}
.phonebox p{margin:0;max-width:var(--measure)}
.tablewrap{overflow-x:auto;margin-top:var(--gap-block);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg)}
table{border-collapse:collapse;width:100%;min-width:40rem;font-size:var(--t-15)}
th,td{text-align:left;padding:var(--s-12) var(--s-16);border-bottom:1px solid var(--border);vertical-align:top}
tr:last-child th,tr:last-child td{border-bottom:0}
thead th{font-weight:600;background:var(--surface)}
tbody th{font-weight:600;color:var(--text-2)}
td.us,thead th.us{color:var(--text);background:var(--surface);box-shadow:inset 2px 0 0 var(--accent)}
thead th.us{color:var(--text)}

/* plans */
.plans{display:grid;gap:var(--s-16);grid-template-columns:repeat(auto-fit,minmax(min(100%,13.5rem),1fr));margin-top:var(--gap-block);align-items:stretch}
.plan{border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s-24);background:var(--surface);display:flex;flex-direction:column;box-shadow:var(--shadow-1)}
.plan.feat1{border-color:var(--text-3);background:var(--elevated)}
.plan h3{margin-bottom:var(--s-4)}
.price{font:400 var(--t-38)/1.05 var(--font-display);margin:var(--s-12) 0 var(--s-4);letter-spacing:-.01em}
.price small{display:block;margin:var(--s-4) 0 0;font:400 var(--t-15)/1.3 var(--font-body);color:var(--text-2)}
.plan ul{list-style:none;padding:0;margin:var(--s-16) 0 var(--s-24);display:grid;gap:var(--s-8);flex:1}
.plan li{padding-left:var(--s-24);position:relative;font-size:var(--t-15)}
.plan li::before{content:"";position:absolute;left:0;top:.45em;width:.7rem;height:.4rem;border-left:1.75px solid var(--text-2);border-bottom:1.75px solid var(--text-2);transform:rotate(-45deg)}
.note{font-size:var(--t-15);color:var(--text-2);margin-top:var(--gap-block)}

/* faq */
details{border-top:1px solid var(--border);padding:var(--s-16) 0}
details:last-of-type{border-bottom:1px solid var(--border)}
summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:var(--s-16)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:400 var(--t-24)/1 var(--font-display);color:var(--accent-ink)}
details[open] summary::after{content:"\2212"}
details p{margin:var(--s-12) 0 0;color:var(--text-2)}
.faq{max-width:46rem;margin-top:var(--gap-block)}

/* prose pages */
.page{padding-block:var(--s-48) var(--section)}
.page h1{margin-bottom:var(--gap-lead)}
.page .lead{margin-bottom:var(--gap-body)}
.prose h2{font:600 var(--t-19)/1.2 var(--font-body);margin:var(--s-32) 0 var(--s-8);letter-spacing:0}
.prose p{color:var(--text-2)}
.draft{border:1px solid var(--accent-ink);color:var(--text);border-radius:var(--r-lg);padding:var(--s-16) var(--s-24);margin-bottom:var(--gap-block);max-width:var(--measure);font-weight:600}
.dl{display:grid;gap:var(--s-16);grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));margin-top:var(--gap-block)}
.card{border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s-24);background:var(--surface);box-shadow:var(--shadow-1)}
.card.main{border-color:var(--text-3)}
.card h2{font:600 var(--t-19)/1.2 var(--font-body);letter-spacing:0;margin-bottom:var(--s-8)}
.card ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-8)}
.card li{display:flex;justify-content:space-between;gap:var(--s-16);border-bottom:1px solid var(--border);padding-bottom:var(--s-8)}
.final{display:grid;gap:var(--s-24);justify-items:start}
.final h2{margin:0}
.final .trust{margin:0}
.final .mk.big{margin-bottom:var(--s-8)}

footer{border-top:1px solid var(--border);padding-block:var(--s-48);font-size:var(--t-15);color:var(--text-2)}
footer .wrap{display:grid;gap:var(--s-24)}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s-8) var(--s-24)}
footer p{margin:0 0 var(--s-4)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* scroll reveal (JS adds .js; content stays visible without it) */
.js .rv{opacity:0;transform:translateY(12px);transition:opacity var(--d-slow) var(--ease-in),transform var(--d-slow) var(--ease-in);transition-delay:calc(var(--i,0)*60ms)}
.js .rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:1ms!important}
  .js .rv{opacity:1;transform:none;transition:none}
  .btn:hover{transform:none}
}
.js .rv:not(.in) .mk.build rect{animation-play-state:paused}
.feat .rv:nth-child(3n+2),.steps .rv:nth-child(3n+2),.plans .rv:nth-child(4n+2){--i:1}
.feat .rv:nth-child(3n),.steps .rv:nth-child(3n),.plans .rv:nth-child(4n+3){--i:2}
.plans .rv:nth-child(4n){--i:3}