/* ClaraVoca product site (built from the LexVoca kit). Self-contained (own fonts and images) so it can move to its own domain. Same look as
   neurodynamic.tech v4: warm dark, glass cards, amber and flare accents. No inline scripts (site CSP). */
@font-face{font-family:'Figtree';font-weight:400;font-display:swap;src:url('fonts/figtree-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-weight:500;font-display:swap;src:url('fonts/figtree-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-weight:600;font-display:swap;src:url('fonts/figtree-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-weight:700 900;font-display:swap;src:url('fonts/figtree-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'EB Garamond';font-weight:400;font-display:swap;src:url('fonts/eb-garamond-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'EB Garamond';font-weight:500 800;font-display:swap;src:url('fonts/eb-garamond-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400 800;font-display:swap;src:url('fonts/eb-garamond-latin-400-italic.woff2') format('woff2')}
:root{--bg:#120f0c;--bg2:#1a1612;--ink:#f5eee0;--sub:#c9bfae;--muted:#8f8676;--edge:rgba(245,238,224,.10);--edge2:rgba(245,238,224,.18);
  --glass:rgba(38,32,26,.72);--acc:#e6a866;--flare:#ff8a5c;--hot:#ff6c4c;--ok:#7cd38f;--ai:#8fb7a3;--acc-ink:#1a1209;
  --sans:'Figtree','Segoe UI',system-ui,sans-serif;--serif:'EB Garamond',Georgia,serif;--max:1180px;--ease:cubic-bezier(.2,.8,.2,1);color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(ellipse 80% 50% at 15% -5%,rgba(230,162,78,.16),transparent 60%),radial-gradient(ellipse 60% 50% at 95% 10%,rgba(124,211,143,.07),transparent 60%),var(--bg);
  color:var(--ink);font:17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--acc)}
img{max-width:100%;height:auto;display:block}
kbd{font:700 .78em var(--sans);background:#2b2621;border:1px solid var(--edge2);border-bottom-width:3px;border-radius:6px;padding:1px 7px;color:var(--ink)}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;z-index:20;background:var(--bg2);padding:8px 14px;border-radius:10px}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.glass{background:var(--glass);border:1px solid var(--edge);border-radius:22px;backdrop-filter:blur(14px)}
.eyebrow,.tag{margin:0 0 10px;font:800 12px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--flare)}
.btn{display:inline-flex;align-items:center;gap:10px;font:700 16px var(--sans);padding:14px 24px;border-radius:999px;text-decoration:none;border:1px solid var(--edge2);color:var(--ink);transition:transform .25s var(--ease),box-shadow .25s,background .25s}
.btn svg{width:16px;height:16px;fill:currentColor}
.btn.go{background:linear-gradient(135deg,#f7d77a,var(--acc));color:var(--acc-ink);border-color:transparent;box-shadow:0 12px 34px -12px rgba(242,193,78,.7)}
.btn.go:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(242,193,78,.85)}
.btn.line:hover{background:rgba(245,238,224,.06)}
.btn.sm{padding:9px 18px;font-size:14px}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0}
.fine{color:var(--muted);font-size:14px;margin:14px 0 0}
section[id]{scroll-margin-top:96px}
.modes{margin:16px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:15px;color:var(--muted)}
.modes a{color:var(--ink);text-decoration:none;font-weight:600;font-size:14px;padding:4px 12px;border-radius:999px;border:1px solid var(--edge2);transition:border-color .25s,background .25s}
.modes a:hover,.modes a:focus-visible{border-color:var(--acc);background:rgba(242,193,78,.08)}

/* header */
.top{position:sticky;top:12px;z-index:10;display:flex;align-items:center;gap:22px;max-width:var(--max);margin:12px auto 0;padding:10px 12px 10px 18px;
  background:rgba(26,22,18,.78);border:1px solid var(--edge);border-radius:999px;backdrop-filter:blur(16px)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:800 21px var(--sans)}
.brand b{background:linear-gradient(90deg,var(--acc),var(--hot));-webkit-background-clip:text;background-clip:text;color:transparent}
.top nav{display:flex;gap:22px;margin-left:auto}
.top nav a{color:var(--sub);text-decoration:none;font-weight:600;font-size:15px}
.top nav a:hover{color:var(--ink)}

/* hero */
.hero{max-width:var(--max);margin:0 auto;padding:64px 24px 30px;display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.hero h1{font:400 clamp(52px,6.2vw,92px)/.98 var(--serif);letter-spacing:-.02em;margin:6px 0 22px}
.hero h1 i{background:linear-gradient(90deg,var(--acc),var(--hot));-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}
.lede{font-size:20px;color:var(--sub);max-width:34em;margin:0}
.hero-demo{position:relative;padding:20px 0 24px}
.doc{padding:0 0 22px;box-shadow:0 40px 90px -40px #000;transform:rotate(-1.2deg)}
.doc-bar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--edge)}
.doc-bar .dot{width:10px;height:10px;border-radius:50%;background:#3a332b}.doc-bar b{margin-left:10px;font-size:13px;color:var(--muted)}
.doc-to{margin:14px 20px 10px;padding-bottom:10px;border-bottom:1px solid var(--edge);font-size:15px;color:var(--sub)}.doc-to span{color:var(--muted);margin-right:16px}
.doc-text{margin:6px 20px 0;min-height:4.8em;font-size:21px;line-height:1.5;white-space:pre-line}
.caret{display:inline-block;width:2px;height:1.1em;margin-left:2px;vertical-align:-.15em;background:var(--acc);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.pill{position:absolute;left:-26px;bottom:6px;display:flex;align-items:center;gap:14px;padding:12px 20px 12px 14px;border-radius:999px;max-width:92%;
  box-shadow:0 20px 50px -20px #000,0 0 0 1px rgba(230,162,78,.25);transition:opacity .4s}
.pill.quiet{opacity:.45}
.wave{display:flex;align-items:center;gap:3px;height:26px}
.wave i{width:4px;border-radius:2px;background:linear-gradient(var(--acc),var(--hot));height:30%;animation:bar 1s var(--ease) infinite}
.wave i:nth-child(2){animation-delay:.12s}.wave i:nth-child(3){animation-delay:.24s}.wave i:nth-child(4){animation-delay:.08s}.wave i:nth-child(5){animation-delay:.3s}.wave i:nth-child(6){animation-delay:.18s}.wave i:nth-child(7){animation-delay:.05s}
.pill.quiet .wave i{animation-play-state:paused}
@keyframes bar{0%,100%{height:25%}50%{height:100%}}
.said{font-size:15px;color:var(--sub);font-style:italic}

/* three steps */
.steps{max-width:var(--max);margin:0 auto;padding:30px 24px 40px}
.three{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.three li{display:flex;flex-direction:column;gap:6px;padding:24px}
.three .n{display:grid;place-content:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--acc),var(--hot));color:var(--acc-ink);font-weight:800;margin-bottom:6px}
.three b{font-size:19px}.three li>span:last-child{color:var(--sub);font-size:15.5px}

/* section heads */
.sh{max-width:760px;margin:0 auto 46px;text-align:center}
.sh h2,.handsfree h2,.end h2{font:400 clamp(38px,4.6vw,60px)/1.05 var(--serif);letter-spacing:-.015em;margin:0 0 14px}
.sh>p:last-child{color:var(--sub);font-size:18px;margin:0}

/* features */
.features{max-width:var(--max);margin:0 auto;padding:90px 24px 20px}
.feat{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center;margin:0 0 110px}
.feat.flip .copy{order:2}
.feat h3{font:400 clamp(32px,3.4vw,44px)/1.08 var(--serif);margin:0 0 14px}
.feat .copy>p{color:var(--sub);margin:0 0 18px}
.feat .note{font-size:14px;color:var(--muted)!important}
.ex{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;align-items:baseline;padding:18px 20px;margin:0 0 16px;border-radius:18px;
  background:linear-gradient(135deg,rgba(230,162,78,.10),rgba(242,193,78,.04));border:1px solid rgba(230,162,78,.22)}
.ex .say,.ex .get{font:800 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ex q{font-style:italic;color:var(--sub);quotes:'\201C' '\201D'}
.ex .out{margin:0;font-weight:700;color:var(--ink)}
.ex code{display:inline-block;max-width:100%;overflow-wrap:anywhere;font:700 17px 'Cascadia Code',Consolas,monospace;color:var(--ok);background:#0d0b09;border:1px solid var(--edge);border-radius:8px;padding:3px 10px}
.ex.code small{display:block;font-weight:500;font-size:12.5px;color:var(--muted);margin-top:6px}
.shot{margin:0;position:relative;border-radius:16px;overflow:hidden;box-shadow:0 50px 100px -40px #000,0 0 0 1px var(--edge2);transform:perspective(1600px) rotateY(-4deg);transition:transform .6s var(--ease)}
.feat.flip .shot{transform:perspective(1600px) rotateY(4deg)}
.shot::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.07),transparent 40%);pointer-events:none}
.feat:hover .shot{transform:perspective(1600px) rotateY(0) translateY(-4px)}

/* profiles, speech */
.profiles,.speech{max-width:var(--max);margin:0 auto;padding:60px 24px}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cards3>div{display:flex;flex-direction:column;gap:8px;padding:26px}
.cards3 b{font:400 27px/1.15 var(--serif)}
.cards3 span{color:var(--sub);font-size:15.5px}
.cards3 em{margin-top:auto;padding-top:6px;font-style:normal;font-weight:600;font-size:14px;color:var(--acc)}
.trust{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px}
.trust li{padding:16px 20px 16px 50px;position:relative;color:var(--sub);border-radius:16px;border:1px solid var(--edge)}
.trust li::before{content:'';position:absolute;left:20px;top:21px;width:14px;height:14px;border-radius:50%;background:var(--ok);box-shadow:0 0 14px rgba(124,211,143,.6)}
.trust b{color:var(--ink)}

/* live app */
.try{max-width:var(--max);margin:0 auto;padding:80px 24px 40px}
.try-pick{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 22px}
.try-pick button{font:600 14.5px var(--sans);color:var(--sub);background:var(--glass);border:1px solid var(--edge);border-radius:999px;padding:9px 16px;cursor:pointer;transition:all .25s}
.try-pick button:hover{color:var(--ink);border-color:var(--edge2)}
.try-pick button[aria-pressed=true]{color:var(--acc-ink);background:var(--acc);border-color:var(--acc)}
.try-stage{position:relative;margin:0 auto;border-radius:14px;overflow:hidden;box-shadow:0 60px 120px -50px #000,0 0 0 1px var(--edge2),0 0 80px -30px rgba(230,162,78,.35)}
.try-device{position:absolute;left:0;top:0;width:1200px;height:820px;transform-origin:0 0}
.try-device iframe{display:block;width:1200px;height:820px;border:0;background:#191714}
.try-more{text-align:center;margin:22px 0 0}

/* hands-free, faq, end */
.handsfree{max-width:760px;margin:60px auto;padding:0 24px;text-align:center;color:var(--sub)}
.phrases{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 14px}
.phrases span{font:400 24px var(--serif);font-style:italic;color:var(--ink);padding:8px 18px;border-radius:999px;border:1px solid rgba(230,162,78,.35);background:rgba(230,162,78,.08)}
.faq{max-width:860px;margin:0 auto;padding:40px 24px}
.qa{padding:8px 26px}
.qa details{border-bottom:1px solid var(--edge)}.qa details:last-child{border-bottom:0}
.qa summary{cursor:pointer;list-style:none;padding:18px 0;font-weight:700;font-size:18px;display:flex;justify-content:space-between;gap:16px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:'+';color:var(--acc);font-size:24px;line-height:1;transition:transform .3s}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa p{margin:0 0 18px;color:var(--sub)}
.end{text-align:center;padding:100px 24px 110px}
.end img{margin:0 auto 18px}
.end h2 i{background:linear-gradient(90deg,var(--acc),var(--hot));-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}
.end .acts{justify-content:center}
.foot{border-top:1px solid var(--edge);padding:30px 24px 40px;text-align:center;color:var(--muted);font-size:14.5px}
.foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin-top:10px}
.foot a{color:var(--sub)}

/* reveal on scroll (content stays visible without JavaScript) */
.js .rise{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rise.in{opacity:1;transform:none}
.js .d1{transition-delay:.1s}.js .d2{transition-delay:.2s}

/* Speak, Write, Do: one window; Write and Do light up when they apply */
.reels{max-width:var(--max);margin:0 auto;padding:10px 24px 30px}
.slot{padding:18px 22px 20px;background:linear-gradient(180deg,rgba(230,162,78,.06),var(--glass));box-shadow:0 30px 70px -40px #000}
.steps-ind{display:flex;align-items:baseline;gap:14px;margin:0 0 12px;font:400 30px/1 var(--serif)}
.steps-ind span{color:#5a5146;transition:color .5s,text-shadow .5s}
.steps-ind span.on{color:var(--ink)}
.steps-ind span[data-ind=d].on{color:var(--acc);text-shadow:0 0 22px rgba(242,193,78,.35)}
.steps-ind span[data-ind=w].on{color:var(--ok);text-shadow:0 0 22px rgba(124,211,143,.3)}
.steps-ind i{font-style:normal;font-size:20px;color:var(--muted)}
.reel{position:relative;height:92px;overflow:hidden;border-radius:14px;background:rgba(10,8,6,.5);border:1px solid var(--edge);box-sizing:border-box}
.reel::before,.reel::after{content:'';position:absolute;left:0;right:0;height:14px;z-index:1;pointer-events:none}
.reel::before{top:0;background:linear-gradient(rgba(10,8,6,.85),transparent)}.reel::after{bottom:0;background:linear-gradient(transparent,rgba(10,8,6,.85))}
.strip{will-change:transform}
.it.row{height:90px;box-sizing:border-box;display:grid;grid-template-columns:minmax(150px,.8fr) 1.2fr auto 1.4fr;align-items:center;gap:16px;padding:0 18px;overflow:hidden}
.row .start{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14.5px;color:var(--sub)}
.row .say{display:flex;flex-direction:column;gap:2px;min-width:0}
.row .say q{font:italic 400 21px/1.2 var(--serif);color:var(--ink);quotes:'\201C' '\201D';display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row .say small{font:800 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.row .arr{color:var(--muted);font-size:22px}
.row .res{display:flex;align-items:center;gap:12px;font-weight:600;font-size:15px;line-height:1.3;color:var(--ink);min-width:0}
.row .res span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row .ic{flex:none;width:28px;height:28px;fill:none;stroke:var(--acc);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.row .res .ic{stroke:var(--ok)}
.row .keys{display:flex;align-items:center;gap:3px;flex:none;color:var(--muted);font-size:13px}
.row code{font:700 14.5px 'Cascadia Code',Consolas,monospace;color:var(--ok)}
.slot-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 20px;margin:14px 0 0}
.dots{display:flex;gap:0}
.dots button{position:relative;width:20px;height:28px;padding:0;border:0;background:none;cursor:pointer}
.dots button::before{content:'';position:absolute;left:6px;top:10px;width:8px;height:8px;border-radius:4px;background:#4a4337;transition:width .4s var(--ease),background .4s}
.dots button[aria-current=true]{width:34px}.dots button[aria-current=true]::before{width:22px;background:var(--acc)}
.dots button:focus-visible{outline:2px solid var(--acc);outline-offset:-2px;border-radius:8px}
.pause{font:700 13px var(--sans);color:var(--sub);background:none;border:1px solid var(--edge2);border-radius:999px;padding:5px 12px;cursor:pointer}
.pause:hover{color:var(--ink)}
.slot-link{font-weight:700;font-size:14px;color:var(--acc);text-decoration:none}
.slot-link:hover{text-decoration:underline}

/* more features */
.morefeat{margin:-40px 0 40px}
.morefeat>summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;margin:0 auto 60px;width:max-content;max-width:100%;
  padding:16px 30px;border-radius:999px;border:1px solid rgba(242,193,78,.4);background:rgba(242,193,78,.06);text-align:center}
.morefeat>summary::-webkit-details-marker{display:none}
.morefeat>summary span{font-weight:700;color:var(--acc)}.morefeat>summary small{color:var(--muted)}
.morefeat[open]>summary span::after{content:' \2191'}
.morefeat:not([open])>summary span::after{content:' \2193'}
.morefeat .feat{opacity:1;transform:none}

/* get started, what you need */
.getstart{max-width:var(--max);margin:0 auto;padding:70px 24px 20px}
.three{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.three li{display:flex;flex-direction:column;gap:6px;padding:24px}
.three .n{display:grid;place-content:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--acc),var(--hot));color:var(--acc-ink);font-weight:800;margin-bottom:6px}
.three b{font-size:19px}.three li>span:last-child{color:var(--sub);font-size:15.5px}
.need{margin-top:18px;padding:24px 28px}
.need h3{font:400 28px var(--serif);margin:0 0 10px}
.need ul{margin:0;padding-left:20px;display:grid;gap:8px;color:var(--sub)}
.need b{color:var(--ink)}

/* comfortable, help */
.comfy{max-width:var(--max);margin:0 auto;padding:70px 24px 20px}
.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cards4>div{display:flex;flex-direction:column;gap:8px;padding:22px}
.cards4 b{font:400 24px/1.15 var(--serif)}.cards4 span{color:var(--sub);font-size:15px}
.helpband{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:18px;padding:24px 28px}
.helpband h3{font:400 28px var(--serif);margin:0 0 4px}.helpband p{margin:0;color:var(--sub)}
.helplinks{display:flex;flex-wrap:wrap;gap:10px}

/* header menu (phones) */
.menu{display:none;width:42px;height:42px;border:1px solid var(--edge2);border-radius:50%;background:none;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.menu>span{display:block;width:16px;height:2px;border-radius:1px;background:var(--ink);transition:transform .3s,opacity .3s}
.menu[aria-expanded=true]>span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu[aria-expanded=true]>span:nth-child(2){opacity:0}
.menu[aria-expanded=true]>span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* hero: the differentiators at a glance */
.proof{grid-column:1/-1;list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.proof li{display:flex;flex-direction:column;gap:4px;padding:14px 14px 12px;border-radius:16px;
  background:rgba(38,32,26,.55);border:1px solid var(--edge)}
.proof svg{width:22px;height:22px;margin-bottom:4px;fill:none;stroke:var(--acc);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.proof b{font-size:14.5px;color:var(--ink);line-height:1.3}
.proof span{font-size:12.5px;color:var(--muted);line-height:1.35}

/* NeuroDynamic AI has its own colour (sage, from the real pill's haze), used only for AI */
.ai{color:var(--ai);font-weight:600}
.proof li.ai-item{border-color:rgba(143,183,163,.35);background:linear-gradient(160deg,rgba(143,183,163,.12),rgba(38,32,26,.55) 70%)}
.proof li.ai-item svg{stroke:var(--ai)}

/* hero demo: an Outlook window and the real LexVoca pill */
.page{background:#fbfaf7;color:#1f1b16;border-radius:14px;overflow:hidden;box-shadow:0 40px 90px -40px #000,0 0 0 1px rgba(245,238,224,.18);transform:rotate(-1deg)}
.page-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#eef1f6;font-size:13px;color:#555}
.page-bar .dot{width:9px;height:9px;border-radius:50%;background:#cfd5de}
.page-bar b{margin-left:8px;color:#2c5ea8}
.page-row{margin:0 18px;padding:9px 0;border-bottom:1px solid #e6e2db;font-size:14px;color:#333}
.page-row span{display:inline-block;width:62px;color:#888}
.page-text{margin:14px 18px 18px;min-height:5.4em;font-size:19px;line-height:1.5;white-space:pre-line}
.page .caret{background:#2c5ea8}
.cvpill{position:relative;display:flex;align-items:center;gap:10px;width:max-content;max-width:94%;margin:-22px auto 0;min-height:46px;padding:8px 18px 8px 12px;border-radius:28px;
  background:linear-gradient(180deg,rgba(52,46,39,.97),rgba(25,23,20,.98));border:1px solid rgba(255,248,235,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 16px 30px -14px #000;overflow:hidden;transition:opacity .4s}
.cvpill::before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,rgba(214,152,122,.16),rgba(217,190,134,.16),rgba(143,183,163,.16),rgba(120,168,160,.16));filter:blur(14px)}
.cvpill::after{content:'';position:absolute;left:24px;right:24px;top:0;height:1px;background:linear-gradient(90deg,transparent,#d6987a,#d9be86,#8fb7a3,#78a8a0,transparent);opacity:.6}
.cvpill>*{position:relative}
.cvpill .sym{min-width:24px;text-align:center;font-size:26px;line-height:1;color:#e6a866;filter:drop-shadow(0 0 6px #d99a5544)}
.cvpill .sym svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;vertical-align:middle}
.cvpill.tidying .sym{animation:turn 3s linear infinite}.cvpill.done .sym{color:#7cc47a}
@keyframes turn{to{transform:rotate(360deg)}}
.cvpill .wave{display:flex;align-items:center;gap:3px;height:22px}
.cvpill .wave i{width:3px;border-radius:2px;background:linear-gradient(120deg,#d6987a,#e7b27f,#d9be86,#b3bd8f,#8fb7a3,#78a8a0);height:30%;animation:bar 1s var(--ease) infinite}
.cvpill .wave i:nth-child(2){animation-delay:.12s}.cvpill .wave i:nth-child(3){animation-delay:.24s}.cvpill .wave i:nth-child(4){animation-delay:.08s}.cvpill .wave i:nth-child(5){animation-delay:.3s}.cvpill .wave i:nth-child(6){animation-delay:.18s}.cvpill .wave i:nth-child(7){animation-delay:.05s}.cvpill .wave i:nth-child(n+8){animation-delay:calc(var(--d,0) * 1s)}.cvpill .wave i:nth-child(3n+8){--d:.22}.cvpill .wave i:nth-child(3n+9){--d:.1}.cvpill .wave i:nth-child(3n+10){--d:.34}
.cvpill:not(.listening) .wave i{animation-play-state:paused;height:22%}
.cvpill.tidying .wave i{background:#d99a55}
.cvpill .words{display:flex;flex-direction:column;line-height:1.15}
.cvpill [data-pill-msg]{font:600 14px var(--sans);color:#ece6d8}
.cvpill small{font:600 11px var(--sans);color:var(--ai)}
.cvpill small:empty{display:none}
.heard{margin:14px 6px 0;display:flex;flex-direction:column;gap:2px}
.heard small{font:800 10.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.heard>span{font:italic 400 19px/1.35 var(--serif);color:var(--sub);min-height:2.7em}
.hero-demo .fixes{min-height:58px;align-content:flex-start}
.heard.fixing .f{text-decoration:line-through;text-decoration-thickness:2px;color:var(--hot);opacity:.6}

/* hero: what gets cleaned up */
.said .f{transition:opacity .4s,color .4s}
.pill.fixing .said .f{text-decoration:line-through;text-decoration-thickness:2px;color:var(--hot);opacity:.55}
.fixes{list-style:none;margin:10px 6px 0;padding:0;position:static;right:0;bottom:-46px;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;max-width:100%}
.fixes li{font:700 12px var(--sans);color:var(--ai);background:rgba(143,183,163,.10);border:1px solid rgba(143,183,163,.38);border-radius:999px;padding:4px 10px;animation:pop .35s var(--ease)}
.fixes li::before{content:'\2713  '}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* speed race */
.speed{max-width:900px;margin:40px auto 0;padding:0 24px;text-align:center}
.speed h2{font:400 clamp(30px,3.6vw,46px)/1.12 var(--serif);margin:0 0 24px}
.speed h2 i{color:var(--acc)}
.race{display:grid;gap:12px;text-align:left}
.lane{display:grid;grid-template-columns:90px 1fr;gap:6px 16px;align-items:center}
.lane span{font-weight:700;color:var(--sub)}
.lane b{grid-column:2;font-size:14px;font-weight:600;color:var(--muted)}
.bar{display:block;height:16px;border-radius:8px;width:0;transition:width 2.2s var(--ease)}
.bar.t{background:#4a4337}.bar.s{background:linear-gradient(90deg,var(--acc),var(--hot));box-shadow:0 0 24px rgba(230,162,78,.45)}
.js .speed.in .bar.t,html:not(.js) .bar.t{width:27%}.js .speed.in .bar.s,html:not(.js) .bar.s{width:100%}

/* works in */
.works{max-width:var(--max);margin:60px auto 0;padding:0 24px;text-align:center}
h2.mini{font:800 13px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 16px}
.apps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.apps li{padding:8px 16px;border-radius:999px;border:1px solid var(--edge);background:var(--glass);font-weight:600;font-size:15px;color:var(--sub)}
.apps li.it{color:var(--ok);border-color:rgba(124,211,143,.3)}

/* only in LexVoca */
.only{max-width:var(--max);margin:0 auto;padding:60px 24px}
.only6{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:28px}
.only6>div{display:flex;flex-direction:column;gap:6px;padding:24px;border-color:rgba(230,162,78,.22);background:linear-gradient(160deg,rgba(230,162,78,.08),var(--glass) 60%)}
.only6 b{font:400 25px/1.15 var(--serif)}.only6 span{color:var(--sub);font-size:15.5px}
.grid{padding:8px 24px}
.gr{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--edge);font-size:15px}
.gr:last-child{border-bottom:0}
.gr.head{font:800 12px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.gr.head span:nth-child(2){color:var(--acc)}
.gr [role=rowheader]{color:var(--ink);font-weight:600}
.gr .y,.gr .n,.gr .p{font-weight:700}
.gr .y{color:var(--ok)}.gr .y::before{content:'\2713  '}
.gr .n{color:var(--muted)}.gr .p{color:var(--acc)}
.gr span:nth-child(2){background:rgba(242,193,78,.06);border-radius:8px;padding:4px 8px;margin:-4px -8px}

/* founder story */
.story{max-width:900px;margin:40px auto;padding:0 24px;text-align:center}
.story blockquote{margin:0}
.story p{font:400 clamp(26px,3vw,38px)/1.3 var(--serif);font-style:italic;margin:0 0 14px}
.story footer{color:var(--muted);font-weight:600}

/* free, family */
.free{max-width:var(--max);margin:0 auto;padding:60px 24px}
.family{max-width:var(--max);margin:0 auto;padding:0 24px 40px}
.fam{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:34px 38px;background:linear-gradient(120deg,rgba(242,193,78,.12),var(--glass) 55%)}
.fam h2.mini{font:400 32px/1.15 var(--serif);letter-spacing:0;text-transform:none;color:var(--ink);margin:0 0 10px}
.fam p{color:var(--sub);margin:0;max-width:44em}

@media (max-width:980px){
  .proof{grid-template-columns:repeat(3,minmax(0,1fr))}
  .menu{display:flex;margin-left:auto}
  .top{flex-wrap:wrap;border-radius:26px}
  .top nav{display:none;flex-basis:100%;flex-direction:column;gap:0;margin:6px 0 4px;order:3}
  .top nav.open{display:flex}
  .top nav a{padding:12px 8px;border-top:1px solid var(--edge);font-size:16px}
  .top .btn{margin-left:8px}
  .cards4{grid-template-columns:1fr 1fr}
  .helpband{flex-direction:column;align-items:flex-start}
  .it.row{grid-template-columns:1fr 1.4fr;grid-template-rows:auto auto;gap:6px 14px;height:130px;padding:12px 16px}
  .row .start{grid-column:1/-1}.row .arr{display:none}
  .reel{height:132px}
  .hero{grid-template-columns:1fr;padding-top:60px;gap:30px}
  .feat,.feat.flip{grid-template-columns:1fr;gap:26px;margin-bottom:80px}
  .feat.flip .copy{order:0}
  .shot,.feat.flip .shot{transform:none}
  .top nav{display:none}
  .top .btn{margin-left:auto}
}
@media (max-width:700px){
  .proof{grid-template-columns:1fr 1fr}.proof span{display:none}.proof li{flex-direction:row;align-items:center;gap:10px;padding:10px 12px}.proof svg{margin:0;flex:none}
  .top{gap:10px}.top .btn.sm{padding:8px 14px;font-size:13px}
  .hero-demo{display:none}.hero{gap:18px;padding-bottom:6px}
  .slot{padding:14px}.steps-ind{font-size:24px;gap:10px}
  .it.row{grid-template-columns:1fr;grid-template-rows:auto auto auto;height:200px;align-content:center;gap:10px}.row .say q{font-size:18px}
  .reel{height:202px}.slot-foot{flex-direction:column}.cards4{grid-template-columns:1fr}
  .grid{padding:4px 12px;overflow-x:auto}.gr{grid-template-columns:1.4fr 1fr 1fr 1fr;font-size:13px;gap:8px;min-width:520px}
  .fam{flex-direction:column;align-items:flex-start;padding:26px}
  .fixes{position:static;justify-content:flex-start;margin-top:10px}
  body{font-size:16px}
  .three,.cards3{grid-template-columns:1fr}
  .pill{left:0}
  .hero{padding:44px 16px 20px}.features,.profiles,.speech,.try,.steps,.reels,.only,.free,.family,.works,.speed{padding-left:16px;padding-right:16px}
  .ex{grid-template-columns:1fr;gap:4px}
  .top{margin:8px 8px 0;padding-left:14px}
  .doc-text{font-size:18px}
}
@media (max-width:980px){.top .btn{order:2;margin-left:auto}.menu{order:3;margin-left:8px}.top nav{order:4}}

/* feature videos */
.shot.vid video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#120f0c}
.shot.vid figcaption{position:absolute;right:12px;bottom:10px;font:600 11px var(--sans);color:var(--muted);background:rgba(18,15,12,.7);padding:2px 8px;border-radius:999px;pointer-events:none}
.shot.vid video::cue{font:600 18px var(--sans);background:rgba(18,15,12,.85)}

/* ===== Polish: living light, deeper glass, a cursor spotlight, and a choreographed hero.
   Motion is deliberately not tied to the Windows reduced-motion setting (Richard, 23 Oct). ===== */

/* living light: the pill's own colours drifting slowly behind everything, with a fine grain (transform only, cheap) */
body::before{content:'';position:fixed;inset:-25vmax;z-index:-1;pointer-events:none;
  background:radial-gradient(30vmax 22vmax at 22% 18%,rgba(230,162,78,.13),transparent 70%),
    radial-gradient(26vmax 20vmax at 78% 22%,rgba(143,183,163,.11),transparent 70%),
    radial-gradient(32vmax 24vmax at 55% 78%,rgba(217,190,134,.07),transparent 70%),url(img/grain.svg);
  opacity:.9;animation:drift 50s ease-in-out infinite alternate}
@keyframes drift{0%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(3vmax,-2vmax,0) rotate(3deg)}100%{transform:translate3d(-3vmax,2vmax,0) rotate(-2deg)}}

/* header firms up once you scroll */
.top{transition:background .4s,box-shadow .4s,border-color .4s}
.top.scrolled{background:rgba(22,19,15,.88);border-color:var(--edge2);box-shadow:0 18px 40px -24px #000}

/* glass: lit from above, a little richer, and a soft spotlight that follows the cursor */
.glass,.proof li{position:relative;isolation:isolate;backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}
.glass::before,.proof li::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,-40%),rgba(240,182,115,var(--ring,0)),transparent 70%),
    linear-gradient(180deg,rgba(255,248,235,.16),rgba(255,248,235,.02) 45%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.glass::after,.proof li::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .45s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(242,193,78,.09),transparent 60%)}
.glass:hover,.proof li:hover{--ring:.55}
.glass:hover::after,.proof li:hover::after{opacity:1}
.proof li.ai-item::after{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(143,183,163,.12),transparent 60%)}
.proof li,.cards3>div,.cards4>div,.three li{transition:translate .4s var(--ease),opacity .7s var(--ease),transform .7s var(--ease)}
.proof li:hover,.cards3>div:hover,.cards4>div:hover,.three li:hover{translate:0 -3px}

/* hero: the three words arrive one after another, sharpening as they land */
.js .hero h1 .w{display:inline-block;animation:wordin 1.1s var(--ease) both}
.js .hero h1 .w:nth-child(2){animation-delay:.2s}.js .hero h1 .w:nth-child(3){animation-delay:.4s}
@keyframes wordin{from{opacity:0;transform:translateY(.28em);filter:blur(12px)}}
/* the six differentiators follow in a cascade */
.js .proof li{opacity:0;transform:translateY(16px);transition-delay:calc(var(--i,0) * 70ms + .35s)}
.js .proof.in li{opacity:1;transform:none}
.js .proof.in li:hover{transition-delay:0s}

/* hero demo: layered depth (window and pill move at different rates), a slow float, and a pill glow in the state's colour */
.page{translate:calc(var(--px,0) * -7px) calc(var(--py,0) * -5px);transition:translate .9s var(--ease);animation:float 9s ease-in-out infinite alternate}
@keyframes float{from{transform:rotate(-1deg) translateY(0)}to{transform:rotate(-.6deg) translateY(-8px)}}
.cvpill{translate:calc(var(--px,0) * 14px) calc(var(--py,0) * 9px);transition:translate .9s var(--ease),box-shadow .6s,opacity .4s}
.cvpill.listening{box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 16px 30px -14px #000,0 0 46px -8px rgba(242,193,78,.45)}
.cvpill.tidying{box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 16px 30px -14px #000,0 0 52px -6px rgba(143,183,163,.55)}
.cvpill.done{box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 16px 30px -14px #000,0 0 40px -10px rgba(124,196,122,.4)}

/* the main buttons catch the light now and then */
.hero .btn.go,.end .btn.go{position:relative;overflow:hidden;isolation:isolate}
.hero .btn.go::after,.end .btn.go::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,250,240,.55) 50%,transparent 70%);transform:translateX(-130%);animation:shine 8s 2.6s ease-in-out infinite}
@keyframes shine{0%,78%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
.js .rise{transition:opacity .8s var(--ease),transform .8s var(--ease),translate .4s var(--ease)}
.shot.vid .snd{position:absolute;left:12px;top:12px;z-index:2;font:700 12px var(--sans);color:var(--ink);background:rgba(18,15,12,.78);border:1px solid var(--edge2);border-radius:999px;padding:5px 12px 5px 30px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e6a866' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z'/%3E%3Cpath d='M16 9l5 6M21 9l-5 6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:10px center;background-size:15px}
.shot.vid .snd[aria-pressed=true]{border-color:var(--acc);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e6a866' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z'/%3E%3Cpath d='M16.5 8.5a5 5 0 0 1 0 7M19 6a8.5 8.5 0 0 1 0 12'/%3E%3C/svg%3E")}
.shot.vid .snd:hover{border-color:var(--acc)}

/* ===== ClaraVoca: gold and amber from the book-and-pen mark ===== */
:root{--acc:#f2c14e;--flare:#e6a24e;--hot:#d9853f;--acc-ink:#1d1405}
.soonbtn{cursor:default;pointer-events:none}
.cards2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ai-card{border-color:rgba(143,183,163,.35);background:linear-gradient(160deg,rgba(143,183,163,.12),var(--glass) 70%)}
.ai-card em{color:var(--ai)}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{position:absolute;right:12px;bottom:10px;font:600 11px var(--sans);color:var(--muted);background:rgba(18,15,12,.75);padding:2px 8px;border-radius:999px}
/* hero demo: the ClaraVoca reader, then a sounds-like spelling check */
.page{background:#1d1915;color:#efe7d6;border-radius:14px;overflow:hidden;box-shadow:0 40px 90px -40px #000,0 0 0 1px rgba(245,238,224,.16)}
.page-bar{background:#272119;color:var(--muted)}
.page-bar .dot{background:#3d352b}
.page-bar b{color:var(--acc)}
.page-bar [data-mode]{margin-left:auto;font-size:12px;color:var(--sub)}
.page-text{margin:18px 22px 6px;font:500 19px/1.75 var(--sans);white-space:normal;min-height:0}
.page-text span{transition:background .5s,color .5s;border-radius:4px;padding:1px 2px}
.page-text span.now{background:rgba(242,193,78,.28);color:#fff}
.page-text span.done{color:var(--muted)}
.page-check{margin:4px 22px 22px;padding:12px 14px;border-radius:10px;background:#15120f;border:1px solid var(--edge);font:500 18px/1.6 var(--sans);opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
.page-check.on{opacity:1;transform:none}
.page-check .sp{text-decoration:underline wavy rgba(217,133,63,.9);text-underline-offset:4px;transition:color .4s}
.page-check .sp.fixed{text-decoration:none;color:var(--ok)}
.cvpill.reading .wave i{animation-play-state:running}
.cvpill.checking .wave i{background:#d99a55}
.cvpill.checking{box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 16px 30px -14px #000,0 0 46px -8px rgba(242,193,78,.45)}
@media (max-width:700px){.cards2{grid-template-columns:1fr}}

/* ===== four jobs in the hero ===== */
.hero-demo.four{display:flex;flex-direction:column}
.jobs{display:flex;gap:6px;margin:0 0 12px;flex-wrap:wrap}
.jobs button{font:700 13.5px var(--sans);color:var(--sub);background:rgba(38,32,26,.6);border:1px solid var(--edge);border-radius:999px;padding:7px 14px;cursor:pointer;transition:all .3s}
.jobs button:hover{color:var(--ink);border-color:var(--edge2)}
.jobs button[aria-selected=true]{color:var(--acc-ink);background:var(--acc);border-color:var(--acc);box-shadow:0 8px 22px -10px var(--acc)}
.scene{min-height:252px}
.hero-demo.four .fixes{min-height:34px}
/* ===== enlarge a screen ===== */
.zoomable img{cursor:zoom-in}
.zoomable img:focus-visible{outline:3px solid var(--acc);outline-offset:-3px}
.zoomable::before{content:'Click to enlarge';position:absolute;left:12px;bottom:10px;z-index:1;font:700 11px var(--sans);color:var(--ink);background:rgba(18,15,12,.78);padding:3px 9px;border-radius:999px;opacity:0;transition:opacity .3s;pointer-events:none}
.zoomable:hover::before,.zoomable:focus-within::before{opacity:1}
dialog.zoom{border:0;padding:0;background:none;max-width:min(1500px,94vw);max-height:92vh;overflow:visible}
dialog.zoom::backdrop{background:rgba(10,8,6,.82);backdrop-filter:blur(6px)}
dialog.zoom[open]{animation:zin .3s var(--ease)}
@keyframes zin{from{opacity:0;transform:scale(.94)}}
dialog.zoom figure{margin:0;border-radius:14px;overflow:hidden;box-shadow:0 40px 100px -30px #000,0 0 0 1px var(--edge2)}
dialog.zoom img{display:block;max-width:min(1500px,94vw);max-height:84vh;width:auto;height:auto}
dialog.zoom figcaption{padding:10px 16px;background:#16130f;color:var(--sub);font-size:14px}
dialog.zoom .zclose{position:absolute;top:-14px;right:-14px;font:700 13px var(--sans);color:var(--acc-ink);background:var(--acc);border:0;border-radius:999px;padding:8px 14px;cursor:pointer;box-shadow:0 8px 20px -8px #000}
@media (max-width:700px){dialog.zoom .zclose{top:auto;bottom:-46px;right:50%;transform:translateX(50%)}}

.scan{position:relative;margin:16px 22px 8px;padding:16px 18px;border-radius:6px;background:#efe8d8;color:#3b342b;font:500 15.5px/1.6 Georgia,serif;transform:rotate(-.6deg);filter:saturate(.8) contrast(.95);box-shadow:inset 0 0 40px rgba(120,100,60,.25)}
.scan .grab-box{position:absolute;left:12px;right:12px;top:39px;height:28px;border:2px dashed var(--acc);border-radius:4px;background:rgba(242,193,78,.12);clip-path:inset(0 100% 0 0);transition:clip-path 1.2s var(--ease)}
.scan.box .grab-box{clip-path:inset(0 0 0 0)}
.found{opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s;margin-top:10px;font-size:17px;color:#fff}
.found.on{opacity:1;transform:none}
.ease{--line:0;position:relative;margin:16px 22px 18px;padding:6px 4px;border-radius:8px;font:500 17px/1.2 var(--sans);transition:background .8s}
.ease p{margin:0;padding:9px 10px;height:40px;box-sizing:border-box;transition:opacity .4s}
.ease.tint{background:rgba(242,193,78,.14)}
.ease.ruled p{opacity:.38}
.ease .ruler{position:absolute;left:0;right:0;top:calc(6px + var(--line) * 40px);height:40px;border-radius:6px;background:rgba(255,248,230,.10);box-shadow:0 0 0 1px rgba(242,193,78,.5);opacity:0;transition:top .6s var(--ease),opacity .4s}
.ease.ruled .ruler{opacity:1}
.ease.ruled[style*="--line: 0"] p:nth-of-type(1),.ease.ruled[style*="--line: 1"] p:nth-of-type(2),.ease.ruled[style*="--line: 2"] p:nth-of-type(3),.ease.ruled[style*="--line: 3"] p:nth-of-type(4){opacity:1}
.page-check{opacity:1;transform:none}
.cvpill.done .sym{color:#7cc47a}

.tryband{max-width:var(--max);margin:0 auto;padding:30px 24px}
.tryband .fam{background:linear-gradient(120deg,rgba(242,193,78,.14),var(--glass) 55%)}