/*
  Phrasl landing page. Brand surfaces are light only (branding/guidelines/05-light-and-dark.md): no dark theme here, and one dark box (the closing banner).
  Tokens follow branding/tokens/brand.css and the app's styles.css, so the demos look like the app.
  Cobalt marks only what is live (send, the usable answer, the selected thing, kept notes); the primary action is the ink pill.
*/
@font-face{font-family:"Figtree";src:url("/fonts/figtree-latin-wght-normal.woff2") format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"Anuphan";src:url("/fonts/anuphan-thai-400-normal.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0E00-0E7F}
@font-face{font-family:"Anuphan";src:url("/fonts/anuphan-thai-500-normal.woff2") format("woff2");font-weight:500;font-display:swap;unicode-range:U+0E00-0E7F}
@font-face{font-family:"Anuphan";src:url("/fonts/anuphan-thai-600-normal.woff2") format("woff2");font-weight:600;font-display:swap;unicode-range:U+0E00-0E7F}
@font-face{font-family:"Anuphan";src:url("/fonts/anuphan-thai-700-normal.woff2") format("woff2");font-weight:700;font-display:swap;unicode-range:U+0E00-0E7F}
@font-face{font-family:"Itim";src:url("/fonts/itim-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+2010-2027}
@font-face{font-family:"Itim";src:url("/fonts/itim-thai-400-normal.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0E00-0E7F}

:root{
  color-scheme:light;
  --ground:#F4F4F1; --card:#FFFFFF; --soft:#EDEDE8; --soft-2:#E5E5DF; --plate:#ECECE7;
  --ink:#16171A; --ink-2:#5B5D62; --ink-3:#6C6E73; --line:#E3E3DE; --field:#8C8E93;
  --accent:#2F5BEA; --accent-ink:#1C3AAE; --accent-tint:#E7ECFF; --on-accent:#FFFFFF;
  --bad:#C2412D; --bad-tint:#FBE8E4; --ok:#1E8A50; --hl:#FFE68A;
  --shadow-sm:0 1px 2px rgba(22,23,26,.05),0 4px 12px -4px rgba(22,23,26,.10);
  --shadow:0 1px 2px rgba(22,23,26,.06),0 14px 34px -12px rgba(22,23,26,.22);
  --shadow-lg:0 2px 6px rgba(22,23,26,.08),0 24px 60px -16px rgba(22,23,26,.32);
  --answer-glow:0 1px 2px rgba(22,23,26,.04),0 10px 28px -14px rgba(47,91,234,.35);
  --sans:"Figtree","Anuphan",system-ui,-apple-system,"Segoe UI",sans-serif;
  --hand:"Itim","Anuphan",cursive;
  --serif:Georgia,"Iowan Old Style","Times New Roman","Anuphan",serif;
  --ease:cubic-bezier(.16,1,.3,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --gut:clamp(20px,4.6vw,64px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;background:var(--ground);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2{text-wrap:balance}
p{text-wrap:pretty}
img,svg{display:block}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
button{font:inherit;color:inherit;cursor:pointer}
::selection{background:var(--hl);color:var(--ink)}
*{scrollbar-width:thin;scrollbar-color:var(--soft-2) transparent}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.ic{flex:none}

.wrap{width:100%;max-width:calc(1312px + 2*var(--gut));margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:var(--gut);top:-60px;z-index:50;background:var(--ink);color:#fff;padding:8px 14px;border-radius:999px;font-size:14px;font-weight:650;text-decoration:none}
.skip:focus{top:12px}

/* ---------- background: the day's hour lines run down the whole page, under everything ---------- */
.daygrid{position:fixed;inset:0;z-index:0;pointer-events:none}
.daygrid .wrap,.daygrid .wrap>div{height:100%}
.daygrid .wrap>div{position:relative;display:flex;justify-content:space-between}
.daygrid i{position:relative;width:1px;background:var(--line)}
.daygrid i:nth-child(odd){opacity:.6}
/* the hour the page is in: a cobalt-wash column that follows the now-dot */
.daygrid b{position:absolute;top:var(--coltop,100vh);bottom:0;left:calc(var(--col,0) * 100% / 14);width:calc(100% / 14);background:var(--accent-tint);opacity:.5;transition:left .6s var(--ease)}
.nav,main,.foot{position:relative;z-index:1}

/* ---------- buttons, pills, chips ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;font-weight:650;font-size:14px;line-height:1;padding:11px 18px;text-decoration:none;white-space:nowrap;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .2s}
.btn.ink{background:var(--ink);color:#fff}
.btn.big{font-size:16px;padding:15px 24px}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn:active{transform:scale(.97)}
.btn.sky{background:#85A2FF;color:#0D1433;font-size:16px;padding:15px 24px}
.seg{display:inline-flex;background:var(--soft);border-radius:999px;padding:3px;gap:1px}
.seg>*{border:0;background:transparent;border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:650;line-height:1.2;color:var(--ink-2);text-decoration:none;transition:background-color .2s,color .2s,box-shadow .2s}
.seg>*:hover{color:var(--ink)}
.seg>[aria-pressed="true"],.seg>[aria-current="true"]{background:var(--card);color:var(--ink);box-shadow:var(--shadow-sm)}
.code{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.05em;line-height:1;padding:3px 5px;border:1px solid var(--ink-3);border-radius:6px;background:var(--card);color:var(--ink)}

/* ---------- nav ---------- */
.nav{display:flex;align-items:center;justify-content:space-between;height:76px}
.lockup{display:flex;align-items:center;gap:6px;text-decoration:none}
.lockup img{height:24px;width:auto}
.mark-back{fill:var(--ink)}
.mark-front{fill:var(--accent)}
.nav-r{display:flex;align-items:center;gap:14px}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);column-gap:clamp(24px,5vw,96px);align-items:end;padding-top:clamp(8px,1.4vw,20px)}
h1{font-size:clamp(2.75rem,7vw,5.5rem);font-weight:700;letter-spacing:-.035em;line-height:.98}
h1 span{display:block}
.sub{font-size:clamp(22px,2.7vw,36px);font-weight:600;letter-spacing:-.025em;line-height:1.3;color:var(--ink-2);margin-top:clamp(14px,1.6vw,22px)}
.lede{font-size:clamp(17px,1.4vw,19px);line-height:1.55;color:var(--ink-2);max-width:42ch}
.hero-r{background:var(--plate);border-radius:clamp(28px,3.4vw,48px);border-bottom-left-radius:10px;padding:clamp(20px,2vw,28px)}
.hero-r .btn{margin-top:22px}
.cta-note{font-size:14px;color:var(--ink-2);margin-top:12px}

/* ---------- the day ruler: sticks to the top; scroll moves the cobalt dot through the day ---------- */
.ruler-stick{position:sticky;top:0;z-index:20;background:var(--ground);padding-top:18px;margin-top:clamp(24px,2.6vw,36px);border-bottom:1px solid var(--line)}
.ruler{position:relative;height:52px}
.ruler-line{position:absolute;inset:0 0 auto 0;height:1.5px;background:var(--ink);transform-origin:left}
.ticks{position:absolute;inset:0 0 auto 0;display:flex;justify-content:space-between}
.ticks i{position:relative;width:1px;height:7px;background:var(--ink)}
.ticks i:nth-child(odd){height:12px}
.ticks b{position:absolute;top:19px;left:50%;transform:translateX(-50%);font-style:normal;font-size:11.5px;font-weight:650;color:var(--ink-3);font-variant-numeric:tabular-nums}
.ticks i:nth-child(even) b{display:none}
.ticks i:first-child b{transform:none;left:0}
.ticks i:last-child b{transform:none;left:auto;right:0}
.stop{position:absolute;top:1px;width:30px;height:30px;margin:-15px 0 0 -15px;display:grid;place-items:center;text-decoration:none}
.stop::before{content:"";width:11px;height:11px;border-radius:50%;background:var(--ground);border:1.5px solid var(--ink);transition:background-color .3s,transform .3s var(--spring)}
.stop.passed::before{background:var(--ink)}
.stop:hover::before,.stop:focus-visible::before{transform:scale(1.35)}
.stop span,.stop em{position:absolute;left:50%;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s,transform .3s var(--ease)}
.stop span{top:34px;transform:translate(-50%,-4px);background:var(--ink);color:var(--ground);font-size:12.5px;font-weight:650;padding:5px 10px 5px;border-radius:9px;box-shadow:var(--shadow-lg);font-variant-numeric:tabular-nums}
.stop em{display:none}
.stop:hover span,.stop:focus-visible span{opacity:1;transform:translate(-50%,0)}
.stop:hover span::after,.stop:focus-visible span::after{content:" · " attr(data-feat)}
.at-reply{left:8.571%}.at-check{left:17.857%}.at-sources{left:26.19%}.at-live{left:42.857%}.at-practice{left:82.143%}.at-notebook{left:93.452%}
.now{position:absolute;top:1px;left:calc(var(--now,0) * 1%);pointer-events:none}
.now i{position:absolute;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-tint)}
.now output{position:absolute;top:15px;left:0;transform:translateX(calc(-50% + var(--nudge,0px)));background:var(--accent);color:#fff;font-size:11.5px;font-weight:700;line-height:1;padding:4px 8px;border-radius:999px;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- moments ---------- */
.moment{position:relative;padding-block:clamp(52px,7vw,104px) clamp(44px,6vw,88px)}
/* a large bubble-shaped plate behind each demo, drifting a little slower than the page */
.moment::before{content:"";position:absolute;z-index:-1;background:var(--plate);border-radius:clamp(40px,6vw,88px);top:clamp(40px,6vw,88px);bottom:clamp(8px,2vw,32px);transform:translate3d(0,calc(var(--py,0) * 1px),0)}
.m-reply::before,.m-practice::before{left:38%;right:0;border-bottom-left-radius:14px;border-top-right-radius:0;border-bottom-right-radius:0}
.m-live::before{right:38%;left:0;border-bottom-right-radius:14px;border-top-left-radius:0;border-bottom-left-radius:0}
.m-check::before{left:24%;right:0;top:auto;height:clamp(240px,30vw,400px);border-bottom-right-radius:14px;border-top-right-radius:0}
.m-sources::before{left:0;right:22%;top:42%;border-bottom-left-radius:14px;border-top-left-radius:0}
.m-notebook::before{display:none}
.m-reply{padding-top:clamp(28px,2.6vw,36px)}
.m-reply::before{top:12px}
.m-reply .winbody{gap:12px;padding-top:16px}
.m-notebook{padding-bottom:0}
.grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,88px);align-items:start}
.grid.flip>.mhead{order:2}
.grid.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.wrap:not(.grid)>.mhead{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(32px,5vw,88px);align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.wrap:not(.grid)>.mhead h2{grid-row:1/3}
.mhead h2 time{display:block;font-size:clamp(56px,6.6vw,92px);font-weight:700;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.mhead h2 span{display:block;font-size:clamp(26px,2.7vw,38px);font-weight:700;letter-spacing:-.03em;line-height:1.14;margin-top:14px}
.mbody{color:var(--ink-2);max-width:46ch;margin-top:18px;font-size:clamp(17px,1.3vw,18px)}

/* ---------- the app window the demos sit in ---------- */
.win{background:var(--card);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;font-size:14px;line-height:1.6}
.winbar{display:flex;align-items:center;gap:10px;height:46px;padding:0 16px;border-bottom:1px solid var(--line);font-size:12.5px;font-weight:650;color:var(--ink-2)}
.winname{display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.winname .ic{color:var(--ink-3)}
.winmeta{margin-left:auto;color:var(--ink-3);font-weight:600}
.winbody{display:flex;flex-direction:column;gap:14px;padding:22px clamp(16px,2.4vw,28px) 24px}
.winbody>.seg{align-self:flex-start}
.cap{font-size:11.5px;font-weight:650;color:var(--ink-3)}
.bub{width:fit-content;max-width:min(34ch,88%);padding:11px 16px;border-radius:18px;font-size:17px;line-height:1.4;font-weight:450}
.bub.them{background:var(--ink);color:var(--ground);border-bottom-left-radius:4px;transform-origin:bottom left}
.bub.you{background:var(--accent);color:#fff;border-bottom-right-radius:4px;margin-left:auto;transform-origin:bottom right}
.note{background:var(--soft);border-radius:12px;padding:11px 14px 12px}
.note h3{font-size:11.5px;font-weight:650;color:var(--ink-2);margin-bottom:2px}
.answer{border:1.5px solid color-mix(in srgb,var(--accent) 72%,var(--line));border-radius:16px;padding:12px 14px 14px;box-shadow:var(--answer-glow);background:var(--card)}
.ans-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ans-label{font-size:11.5px;font-weight:650;line-height:1.4;color:var(--accent-ink);background:var(--accent-tint);border-radius:999px;padding:2px 9px}
.copy{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:5px 11px;font-size:12.5px;font-weight:650;line-height:1;transition:background-color .2s,color .2s,border-color .2s,transform .2s var(--spring)}
.copy:hover{border-color:var(--ink-3);box-shadow:var(--shadow-sm)}
.copy:active{transform:scale(.94)}
.copy.done{background:var(--accent);border-color:var(--accent);color:#fff}
.ans-text,.gist{font-size:17px;line-height:1.55;font-weight:450;letter-spacing:-.005em;margin-top:10px}
.ans-text{min-height:3.1em}
.feel{color:var(--ink-2)}
.feel b{color:var(--ink);font-weight:650}
/* what this moment left in the notebook: the same wash and hand as the notes at 21:05 */
.kept{display:inline-flex;align-items:center;gap:7px;width:fit-content;max-width:100%;background:var(--accent-tint);color:var(--accent-ink);border-radius:4px 14px 14px 14px;padding:5px 12px 5px 10px;font-size:12.5px;font-weight:650;line-height:1.3;text-decoration:none;transition:translate .3s var(--spring),box-shadow .3s}
.kept:hover{translate:0 -2px;box-shadow:var(--shadow-sm)}
.kept b{font:400 19px/1.2 var(--hand)}
.chk-why .kept{margin-top:12px}
.winbody:has(.answer.in) .bub.them{animation:nudge .57s both}
@keyframes nudge{0%{translate:0 0;animation-timing-function:cubic-bezier(.33,1,.68,1)}21%{translate:-5px -2px;animation-timing-function:var(--spring)}100%{translate:0 0}}

/* check: the sentence changes in place */
.m-check .winbody{gap:0;padding-block:20px 28px}
.chk-sent{font-size:clamp(28px,4.3vw,58px);font-weight:600;letter-spacing:-.032em;line-height:1.18;margin:clamp(18px,2.4vw,30px) 0 clamp(22px,3vw,40px);text-wrap:balance}
.chg del{color:var(--bad);text-decoration:line-through;text-decoration-thickness:.07em;text-decoration-color:var(--bad);transition:color .35s,text-decoration-color .35s}
.chg ins{text-decoration:none;background:var(--hl);border-radius:.18em;padding:0 .14em;margin-left:.22em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.is-draft .chg del{color:inherit;text-decoration-color:transparent}
.is-draft .chg ins{display:none}
.chk-foot{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(16px,3vw,40px);align-items:start;transition:opacity .3s}
.is-draft .chk-foot{opacity:.35}
.chk-rows{display:grid;gap:8px}
.chk-rows li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;background:var(--bad-tint);border-radius:12px;padding:9px 13px}
.chk-rows s{color:var(--bad);font-weight:600}
.chk-rows span{color:var(--ink-2)}
.chk-rows .ic{color:var(--ok)}
.chk-rows b{font-weight:650}
.chk-why h3{font-size:14px;font-weight:650}
.chk-why p{color:var(--ink-2);margin-top:2px}

/* sources */
.panes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.paper{background:#F0F0EC;padding:20px;display:flex;flex-direction:column;gap:12px;max-height:440px;overflow:auto;border-right:1px solid var(--line)}
.sheet{position:relative;background:var(--card);border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow-sm);padding:30px 22px 20px}
.sheet .pg{position:absolute;top:9px;right:12px;font-size:11.5px;font-weight:600;color:var(--ink-3)}
.sheet p{font:400 17px/1.65 var(--serif);display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:3px;transition:background-color .5s}
.sheet.lit p{background:var(--hl)}
.work{display:flex;flex-direction:column;gap:16px;padding:20px clamp(16px,2.4vw,26px) 22px}
.gist{min-height:4.65em}
.points{display:grid;gap:11px}
.points li{display:flex;align-items:baseline;gap:10px;font-size:15px;line-height:1.5;transition:color .3s}
.points li.on{color:var(--accent-ink)}
.cite{flex:none;min-width:38px;border:0;background:var(--soft);color:var(--ink-2);border-radius:6px;padding:3px 7px;font-size:11.5px;font-weight:700;line-height:1.3;transition:background-color .2s,color .2s,transform .2s var(--spring)}
.cite:hover{background:var(--accent-tint);color:var(--accent-ink)}
.cite:active{transform:scale(.92)}
.cite[aria-pressed="true"]{background:var(--accent);color:#fff}
.hint{font-size:12.5px;color:var(--ink-3)}

/* live */
.lines{display:grid;gap:14px;min-height:232px;align-content:start}
.lines li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px}
.lt{font-size:11.5px;font-weight:650;color:var(--ink-3);font-variant-numeric:tabular-nums;padding-top:5px}
.ls{font:400 17px/1.5 var(--serif)}
.ls .w{transition:opacity .25s}
.ltr{width:fit-content;max-width:100%;background:var(--soft);border-radius:12px;padding:5px 11px;margin-top:6px;font-size:14px;line-height:1.6}
.dock{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;border-top:1px solid var(--line);padding-top:14px;margin-top:4px}
.meter{display:inline-flex;align-items:center;gap:2.5px;height:18px}
.meter i{width:3px;height:5px;border-radius:2px;background:var(--accent)}
.dock-status{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:650;color:var(--ink-2)}
.dock-status .pulse,.dock .meter i{background:var(--ink-3)}
.st-on{display:none}
.playing .dock-status{color:var(--accent-ink)}
.playing .dock-status .pulse,.playing .dock .meter i{background:var(--accent)}
.playing .st-on{display:inline}
.playing .st-off{display:none}
.pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.dir{display:inline-flex;align-items:center;gap:5px;color:var(--ink-3)}
.replay{margin-left:auto;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:650;line-height:1;transition:border-color .2s,box-shadow .2s,transform .2s var(--spring)}
.replay:hover{border-color:var(--ink-3);box-shadow:var(--shadow-sm)}
.replay:active{transform:scale(.94)}
/* a status loop is the one motion allowed to repeat, and only while the demo is playing */
.playing .meter i{animation:meter 1s ease-in-out infinite}
.playing .meter i:nth-child(2){animation-delay:-.72s}.playing .meter i:nth-child(3){animation-delay:-.31s}.playing .meter i:nth-child(4){animation-delay:-.55s}.playing .meter i:nth-child(5){animation-delay:-.12s}
.playing .pulse{animation:pulse 1.6s ease-in-out infinite}
@keyframes meter{0%,100%{height:4px}50%{height:17px}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* practice */
.idea{display:inline-flex;align-items:center;gap:7px;width:fit-content;font-size:12.5px;font-weight:650;line-height:1.3;color:var(--accent-ink);background:var(--accent-tint);border:1px solid color-mix(in srgb,var(--accent) 45%,var(--accent-tint));border-radius:999px;padding:6px 13px}
.scene{display:flex;flex-direction:column;gap:10px;min-height:206px}
.rl{display:flex;align-items:flex-end;gap:8px}
.rl.you{justify-content:flex-end}
.voice{border-top:1px solid var(--line);padding-top:14px}
.v-type{display:flex;align-items:center;justify-content:space-between;height:46px;border:1px solid var(--field);border-radius:999px;padding:0 5px 0 16px;color:var(--ink-3)}
.v-type i{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:var(--soft);color:var(--ink-3)}

/* notebook: the notes are the demo, straight on the page */
.notes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,36px);align-items:start;padding-bottom:24px}
.nbnote{display:flex;flex-direction:column;gap:16px;background:var(--accent-tint);border-radius:4px 22px 22px 22px;padding:22px 22px 18px;text-decoration:none;rotate:var(--r,0deg);transition:rotate .45s var(--spring),translate .45s var(--spring),box-shadow .3s}
.nbnote:hover,.nbnote:focus-visible{rotate:0deg;translate:0 -3px;box-shadow:var(--shadow)}
.nb-text{font:400 clamp(26px,2.7vw,38px)/1.18 var(--hand);color:var(--accent-ink)}
.nb-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px 9px}
.nb-tags b{font-size:11.5px;font-weight:650;line-height:1.4;color:var(--accent-ink);background:var(--card);border-radius:999px;padding:2px 9px}
.nb-tags em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.n1{--r:-2.2deg}.n2{--r:1.5deg;margin-top:40px}.n3{--r:-.9deg;margin-top:8px}.n4{--r:2.4deg;margin-top:56px}

/* ---------- comparison ---------- */
.compare{padding-block:clamp(64px,8vw,120px) clamp(56px,8vw,112px)}
.compare h2,.darkbox h2{font-size:clamp(32px,4.8vw,64px);font-weight:700;letter-spacing:-.038em;line-height:1.04}
.compare .lede{margin-top:18px;max-width:52ch}
.tablewrap{margin-top:clamp(32px,4vw,56px)}
table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
thead td{width:19%}
th,td{text-align:left;vertical-align:top;padding:20px clamp(12px,1.8vw,24px);border-bottom:1px solid var(--line);font-weight:400;line-height:1.45}
thead th{font-size:14px;font-weight:650;color:var(--ink-2);border-bottom-color:var(--ink)}
thead td{border-bottom-color:var(--ink)}
tbody th{font-size:14px;font-weight:650;color:var(--ink-2);padding-left:0}
tbody td{color:var(--ink-2)}
.us{background:var(--card)}
thead .us{color:var(--ink);font-size:17px;font-weight:800;letter-spacing:-.03em;border-radius:18px 18px 0 0}
tbody .us{color:var(--ink);font-weight:650}
tbody tr:last-child .us{border-radius:0 0 18px 18px;border-bottom-color:transparent}
tbody tr:last-child th,tbody tr:last-child td{border-bottom-color:transparent}

/* ---------- the one dark box ---------- */
.close{padding-block:clamp(24px,4vw,56px)}
.darkbox{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(24px,4vw,64px);align-items:end;background:#16171A;color:#F1F1EC;border-radius:18px;padding:clamp(32px,6vw,88px)}
.darkbox>*{grid-column:1;justify-self:start}
.close-chat{grid-column:2;grid-row:1/5;align-self:center;justify-self:stretch;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.close-chat .bub.you{align-self:flex-end}
.close-chat .bub{font-size:clamp(17px,1.7vw,22px);padding:14px 20px;border-radius:22px;max-width:min(100%,15em)}
.close-chat .bub.them{background:#F1F1EC;color:#16171A;border-bottom-left-radius:5px}
.close-chat .bub.you{background:#85A2FF;color:#0D1433;border-bottom-right-radius:5px}
.darkbox img{height:30px;width:auto}
.darkbox h2{margin-top:clamp(28px,4vw,56px);max-width:17ch}
.darkbox p{color:#A6A8AD;margin-top:18px;max-width:46ch}
.darkbox .btn{margin-top:30px}
.darkbox :focus-visible{outline-color:#85A2FF}

/* ---------- footer ---------- */
.foot{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,3fr);gap:24px clamp(24px,4vw,64px);padding-block:clamp(40px,5vw,72px) 40px;font-size:14px}
.foot-l img{height:26px;width:auto}
.foot-l p{margin-top:10px;color:var(--ink-2);font-weight:600}
.facts{display:grid;gap:6px;color:var(--ink-2)}
.foot-nav{display:grid;gap:6px;justify-items:start;font-weight:650}
.foot-nav a{text-decoration:none}
.foot-nav a:hover{text-decoration:underline}
.fine{grid-column:1/-1;border-top:1px solid var(--line);padding-top:20px;font-size:12.5px;color:var(--ink-3)}

.nf-main{padding-block:clamp(64px,12vw,160px)}
.nf-main h1{font-size:clamp(2.25rem,6vw,4.5rem)}
.nf-main .lede{margin-top:18px}
.nf-main .btn{margin-top:28px}

/* ---------- Thai: taller lines, almost no negative tracking (tone marks collide) ---------- */
:lang(th) .sub,:lang(th) .mhead h2 span,:lang(th) .compare h2,:lang(th) .darkbox h2,:lang(th) .nf-main h1{letter-spacing:-.01em;line-height:1.32}
:lang(th) .mbody,:lang(th) .lede{line-height:1.75}
html:lang(th) .win,html:lang(th) th,html:lang(th) td{line-height:1.7}
:lang(en){letter-spacing:inherit}

/* ---------- motion: only when lang.js armed it (JS on, no reduced-motion request). Without it everything shows in its final state ---------- */
.js .demo [data-at]{transition:opacity .4s var(--ease),transform .55s var(--ease)}
.js .demo [data-at]:not(.in){opacity:0;transform:translateY(10px)}
.js .demo .bub[data-at]:not(.in),.js .demo .rl:not(.in) .bub{transform:scale(.35)}
.js .demo .rl .bub{transition:transform .55s var(--ease)}
.js .demo .rl[data-at]:not(.in){transform:none}
.js .demo .sheet[data-at]:not(.in){transform:translateY(22px) rotate(-1.6deg)}
.js .demo .chg[data-at],.js .demo [data-words][data-at]{opacity:1;transform:none}
.js .demo .chg:not(.in) del{color:inherit;text-decoration-color:transparent}
.js .demo .chg:not(.in) ins{display:none}
.js .demo .chg.in ins{animation:ins-in .7s var(--ease) both}
.js .demo .nbnote[data-at]{transition:opacity .4s,transform .7s var(--ease),rotate .45s var(--spring),translate .45s var(--spring),box-shadow .3s}
.js .demo .nbnote[data-at]:not(.in){transform:translateY(-44px) rotate(-9deg) scale(.94)}
.js .demo [data-words] .w.off{opacity:0}
.js .ghost{visibility:hidden}
@keyframes ins-in{from{opacity:0;transform:translateY(.12em)}to{opacity:1;background-color:var(--hl);transform:none}}

.js h1 span{animation:blur-in .5s cubic-bezier(.25,1,.5,1) both}
.js h1 span:nth-child(2){animation-delay:.09s}
.js .sub,.js .hero-r{animation:rise .7s var(--ease) .22s both}
.js .hero-r{animation-delay:.32s}
.js .ruler-line{animation:draw .9s var(--ease) .45s both}
.js .ticks i,.js .stop{animation:fade .4s ease-out 1s both}
.js .now{animation:pop .5s var(--spring) 1.15s both}
.js .lockup .mark-back{transform-origin:1px 15px;animation:grow .55s var(--ease) .1s both}
.js .lockup .mark-front{transform-origin:23px 21px;animation:grow .55s var(--ease) .38s both}
@keyframes blur-in{from{opacity:0;filter:blur(8px);transform:translateY(8px)}to{opacity:1;filter:none;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes grow{from{opacity:0;transform:scale(.35)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition-duration:.01s !important}}

/* ---------- smaller screens ---------- */
@media (max-width:980px){
  .hero{grid-template-columns:1fr;row-gap:26px}
  .grid,.grid.flip,.wrap:not(.grid)>.mhead{grid-template-columns:1fr}
  .grid.flip>.mhead{order:0}
  .wrap:not(.grid)>.mhead h2{grid-row:auto}
  .moment::before{left:calc(var(--gut) * .35) !important;right:calc(var(--gut) * .35) !important;top:38% !important;border-radius:36px 36px 36px 10px !important}
  .notes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .n2{margin-top:24px}.n3{margin-top:0}.n4{margin-top:24px}
  .darkbox{grid-template-columns:1fr}
  .close-chat{grid-column:1;grid-row:auto;margin-top:36px}
  .foot{grid-template-columns:1fr 1fr}
  .foot-l{grid-column:1/-1}
}
@media (max-width:720px){
  body{font-size:16px}
  .nav{height:64px}
  .ticks b{display:none}
  .ticks i:nth-child(4n+1) b,.ticks i:last-child b{display:block}
  .ruler{height:46px}
  .panes{grid-template-columns:1fr}
  .paper{max-height:none;overflow:visible;border-right:0;border-bottom:1px solid var(--line);padding:14px}
  .sheet p{font-size:15.5px}
  .chk-foot{grid-template-columns:1fr}
  .bub,.ans-text,.gist,.ls{font-size:15.5px}
  .btn,.seg>*,.copy,.replay{min-height:44px}
  .seg>*{display:inline-flex;align-items:center}
  .cite{min-height:32px;min-width:44px}
  .stop{width:44px;height:44px;margin:-22px 0 0 -22px}
  table,thead,tbody,tr,th,td{display:block}
  thead{display:none}
  tbody tr{padding:18px 0;border-bottom:1px solid var(--line)}
  tbody tr:last-child{border-bottom:0}
  tbody th{padding:0 0 10px;border:0;font-size:17px;color:var(--ink);font-weight:700}
  tbody td{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:12px;padding:8px 0;border:0}
  tbody td::before{content:attr(data-l);font-size:12.5px;font-weight:650;color:var(--ink-3);padding-top:2px}
  tbody .us{padding:12px 14px;border-radius:12px !important;margin-top:6px}
  .foot{grid-template-columns:1fr}
}
@media (pointer:coarse){
  .btn,.seg>*,.copy,.replay{min-height:44px}
  .seg>*{display:inline-flex;align-items:center}
}