/* Shared by the comparison pages. Copied from the homepage <style>: tokens, base, buttons, top bar, stage, window and panel primitives, FAQ and footer. Keep in sync with /index.html. */
:root{
  color-scheme:light dark;
  --bg:light-dark(#F6F6F8,#0C0C0F);
  --surface:light-dark(#FFFFFF,#17171B);
  --line:light-dark(#E1E1E7,#26262D);
  --ink:light-dark(#1C1B21,#F2F2F5);
  --ink-2:light-dark(#5C5C66,#A7A7B1);
  --ink-3:light-dark(#696973,#92929C);
  --violet:#5B47E0;
  --violet-h:light-dark(#4B38CC,#6A57F0);
  --on-violet:#FFFFFF;
  --accent:light-dark(#5B47E0,#AEA2FF);
  --tint:light-dark(rgba(91,71,224,.09),rgba(150,134,255,.14));
  --sel:light-dark(rgba(91,71,224,.17),rgba(140,124,255,.34));
  --kbd-bg:light-dark(#F0EEFD,rgba(150,134,255,.13));
  --kbd-ring:light-dark(rgba(91,71,224,.2),rgba(174,162,255,.3));
  --kbd-base:light-dark(rgba(91,71,224,.16),rgba(174,162,255,.22));
  --nav-bg:light-dark(rgba(246,246,248,.72),rgba(12,12,15,.68));
  --plate:light-dark(#EDECF3,#131317);
  --plate-glow:light-dark(rgba(91,71,224,.08),rgba(124,108,255,.12));
  --plate-hi:light-dark(rgba(255,255,255,.8),rgba(255,255,255,.04));
  --plate-ring:light-dark(rgba(28,27,33,.05),rgba(255,255,255,.06));
  --shell:light-dark(rgba(255,255,255,.6),rgba(255,255,255,.035));
  --shell-ring:light-dark(rgba(28,27,33,.07),rgba(255,255,255,.08));
  --shell-shadow:light-dark(rgba(52,40,130,.18),rgba(0,0,0,.65));
  --wall-hi:light-dark(rgba(255,255,255,.5),rgba(255,255,255,.1));
  --old-bg:light-dark(#ECECF0,#16161A);
  --n-bg:light-dark(#E1E1E7,#24242B);
  --btn-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(28,27,33,.14),0 10px 24px -12px light-dark(rgba(91,71,224,.7),rgba(91,71,224,.9));

  /* Product UI tokens, matched to the app's light and dark snapshots */
  --u-win:light-dark(#FFFFFF,#1E1E21);
  --u-bar:light-dark(#F6F6F7,#2A2A2D);
  --u-sep:light-dark(#E8E8EC,#343438);
  --u-ink:light-dark(#2A2A2F,#ECECEF);
  --u-ink-2:light-dark(#64646C,#B2B2BA);
  --u-ink-3:light-dark(#69696F,#A2A2AA);
  --u-chip:light-dark(#F1F1F3,#323236);
  --u-ph:light-dark(#ECECEF,#2F2F34);
  --u-ring:light-dark(#E4E4E8,#38383D);
  --p-bg:light-dark(#F3F3F5,#262629);
  --p-ring:light-dark(rgba(37,36,42,.09),rgba(255,255,255,.1));
  --p-hi:light-dark(#FFFFFF,rgba(255,255,255,.07));
  --p-row:light-dark(#FFFFFF,#323236);
  --p-row-ring:light-dark(rgba(37,36,42,.08),rgba(255,255,255,.06));
  --p-row-shadow:light-dark(rgba(37,36,42,.07),rgba(0,0,0,.25));
  --p-fill:light-dark(rgba(37,36,42,.07),rgba(255,255,255,.07));
  --p-fill-2:light-dark(rgba(37,36,42,.055),rgba(255,255,255,.06));
  --p-tab:light-dark(#5A5A62,#A3A3AB);
  --p-tab-on:light-dark(#FFFFFF,rgba(255,255,255,.13));
  --p-tab-on-ink:light-dark(#232327,#FFFFFF);
  --p-field:light-dark(#FFFFFF,#303034);
  --p-field-ring:light-dark(rgba(37,36,42,.14),rgba(255,255,255,.08));
  --p-cap:light-dark(#FFFFFF,rgba(255,255,255,.08));
  --p-cap-ring:light-dark(rgba(37,36,42,.16),rgba(255,255,255,.06));
  --p-line:light-dark(rgba(37,36,42,.08),rgba(255,255,255,.08));
  --act-glow:light-dark(rgba(91,71,224,.35),rgba(91,71,224,.55));
  --act-quiet:light-dark(rgba(37,36,42,.07),rgba(255,255,255,.09));
  --act-quiet-ink:light-dark(#2E2E33,#EEEEF1);
  --ins-bg:light-dark(rgba(91,71,224,.1),rgba(140,124,255,.18));
  --ins-ink:light-dark(#5B47E0,#C6BEFF);
  --ins-line:light-dark(rgba(91,71,224,.45),rgba(174,162,255,.6));
  --del:light-dark(#6A6A72,#A3A3AB);
  --sk-a:light-dark(rgba(37,36,42,.07),rgba(255,255,255,.07));
  --sk-b:light-dark(rgba(91,71,224,.2),rgba(140,124,255,.32));
  --av:light-dark(#ECE9FC,rgba(140,124,255,.2));
  --av-g-bg:light-dark(#E2F0EC,rgba(90,190,160,.16));
  --av-g:light-dark(#2E6B5E,#8AD8BF);
  --s-win:light-dark(#F7F7F8,#232326);
  --s-side:light-dark(#EDEDF0,#2B2B2E);
  --s-side-ring:light-dark(#E2E2E6,#36363A);
  --s-side-on:light-dark(#DCDCE1,#3B3B40);
  --s-grp:light-dark(#F1F1F3,rgba(255,255,255,.035));
  --s-field:light-dark(#E6E6EA,#2F2F33);
  --s-pop:light-dark(#FFFFFF,#3A3A3E);
  --key-bg:light-dark(#FFFFFF,#2A2A2E);
  --wire:light-dark(#5B47E0,#8E7EFF);

  --win-shadow:0 0 0 1px light-dark(rgba(37,36,42,.07),rgba(255,255,255,.09)),0 2px 4px light-dark(rgba(37,36,42,.03),rgba(0,0,0,.2)),0 24px 48px -24px light-dark(rgba(37,36,42,.22),rgba(0,0,0,.7));
  --panel-shadow:0 0 0 1px var(--p-ring),inset 0 1px 0 var(--p-hi),0 32px 64px -24px light-dark(rgba(37,36,42,.32),rgba(0,0,0,.75)),0 10px 24px -12px light-dark(rgba(37,36,42,.14),rgba(0,0,0,.45));

  --sans:Geist,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mac:-apple-system,BlinkMacSystemFont,"SF Pro Text",Geist,system-ui,sans-serif;
  --gutter:20px;
  --nav-h:60px;
  --sec:clamp(112px,13vw,184px);
  --ease:cubic-bezier(.16,1,.3,1);
  --wall:url(/wall-light.webp);
}
:root[data-theme=light]{color-scheme:light}
:root[data-theme=dark]{color-scheme:dark;--wall:url(/wall-dark.webp)}
@media (prefers-color-scheme:dark){:root:not([data-theme]){--wall:url(/wall-dark.webp)}}
@media (min-width:640px){:root{--gutter:32px}}
@media (min-width:1024px){:root{--gutter:48px}}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 20px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
main{overflow-x:clip}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,p,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
h1,h2,h3{text-wrap:balance;font-weight:620;color:var(--ink)}
p,li{text-wrap:pretty}
img{display:block}
svg{display:block}
::selection{background:var(--sel)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
.wrap{width:min(1200px,100% - 2*var(--gutter));margin-inline:auto}
.center{text-align:center}
.nowrap{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

h2{font-size:clamp(36px,4.7vw,62px);line-height:1.04;letter-spacing:-.042em}
.sec{padding-top:var(--sec)}
.sec[id]{scroll-margin-top:calc(28px - var(--sec))}
.lede{font-size:clamp(17px,1.45vw,19px);line-height:1.55;color:var(--ink-2);letter-spacing:-.008em}

kbd{display:inline-flex;align-items:center;justify-content:center;min-width:1.5em;height:1.42em;padding:0 .32em;margin:0 .04em;border-radius:.3em;font:inherit;font-size:.86em;line-height:1;font-weight:550;vertical-align:.04em;color:var(--accent);background:var(--kbd-bg);box-shadow:inset 0 0 0 1px var(--kbd-ring),inset 0 -1.5px 0 var(--kbd-base)}
kbd.w{padding:0 .42em}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:14px;height:54px;padding:0 8px 0 26px;border-radius:999px;font-size:17px;font-weight:580;letter-spacing:-.012em;color:var(--on-violet);background:var(--violet);white-space:nowrap;box-shadow:var(--btn-shadow);transition:background-color .25s var(--ease),transform .35s var(--ease)}
.btn .bi{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.14);transition:transform .45s var(--ease)}
.btn .bi svg{width:16px;height:16px}
.btn:hover{background:var(--violet-h)}
.btn:hover .bi{transform:translateY(2px) scale(1.04)}
.btn:active{transform:scale(.98)}
@media (max-width:379px){.btn{padding:0 24px;font-size:16px}.btn .bi{display:none}}

/* ---------- Top bar ---------- */
.nav{position:sticky;top:0;z-index:10;height:var(--nav-h);background:var(--nav-bg);-webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);box-shadow:0 1px 0 transparent;transition:box-shadow .3s var(--ease)}
.nav.scrolled{box-shadow:0 1px 0 var(--line)}
.nav-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:100%;gap:16px}
.brand{display:inline-flex;align-items:center;gap:10px;justify-self:start;font-size:17px;font-weight:620;letter-spacing:-.02em;border-radius:10px}
.brand img{width:28px;height:28px}
.nav-links{display:flex;gap:4px}
.nav-links a{padding:7px 14px;border-radius:999px;font-size:14.5px;font-weight:500;color:var(--ink-2);transition:color .2s,background-color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-links a.on{color:var(--ink);background:var(--tint)}
.nav-end{display:flex;align-items:center;gap:8px;justify-self:end}
.theme-btn{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink-2);cursor:pointer;box-shadow:inset 0 0 0 1px var(--line);transition:color .2s,background-color .2s}
.theme-btn:hover{color:var(--ink);background:var(--tint)}
.theme-btn svg{width:18px;height:18px}
.theme-btn .i-sun,:root[data-theme=dark] .theme-btn .i-moon{display:none}
:root[data-theme=dark] .theme-btn .i-sun{display:block}
.lsw{display:flex;align-items:center;gap:2px;height:36px;padding:3px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line)}
.lsw a{display:grid;place-items:center;min-width:30px;height:30px;padding:0 8px;border-radius:999px;font-size:12.5px;font-weight:580;letter-spacing:.02em;color:var(--ink-2);transition:color .2s,background-color .2s}
.lsw a:hover{color:var(--ink)}
.lsw a[aria-current]{color:var(--ink);background:var(--tint)}
.btn-s{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;font-size:14.5px;font-weight:580;color:var(--on-violet);background:var(--violet);white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(28,27,33,.12);transition:background-color .2s,transform .3s var(--ease)}
.btn-s:hover{background:var(--violet-h)}
.btn-s:active{transform:scale(.97)}
@media (max-width:899px){.nav-links{display:none}.nav-in{grid-template-columns:1fr auto}}
/* Phones: tighter top bar so the language switch fits; under 360px the wordmark is kept for screen readers only. */
@media (max-width:399px){.nav-in{gap:10px}.nav-end{gap:6px}.lsw{padding:2px}.lsw a{min-width:28px;height:32px;padding:0 6px}.btn-s{padding:0 13px}}
@media (max-width:359px){.brand span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
#top-edge{position:absolute;top:0;left:0;width:1px;height:8px;pointer-events:none}

/* ---------- Stages: framed wallpaper and tinted plates ---------- */
.frame{padding:8px;border-radius:32px;background:var(--shell);box-shadow:0 0 0 1px var(--shell-ring),0 60px 120px -60px var(--shell-shadow),0 24px 48px -32px var(--shell-shadow)}
.frame-in{position:relative;border-radius:24px;background:var(--plate) var(--wall) center/cover no-repeat;box-shadow:inset 0 1px 0 var(--wall-hi),inset 0 0 0 1px var(--plate-ring)}
.wall{
  --win-shadow:0 0 0 .5px light-dark(rgba(20,16,60,.2),rgba(255,255,255,.16)),inset 0 1px 0 light-dark(transparent,rgba(255,255,255,.06)),0 30px 70px -20px light-dark(rgba(30,22,90,.36),rgba(0,0,0,.75)),0 10px 24px -10px light-dark(rgba(30,22,90,.2),rgba(0,0,0,.5));
  --panel-shadow:0 0 0 .5px light-dark(rgba(20,16,60,.22),rgba(255,255,255,.16)),inset 0 1px 0 var(--p-hi),0 40px 80px -24px light-dark(rgba(30,22,90,.45),rgba(0,0,0,.8)),0 12px 28px -12px light-dark(rgba(30,22,90,.25),rgba(0,0,0,.55));
}
.plate{border-radius:28px;background:radial-gradient(90% 70% at 85% 105%,var(--plate-glow),transparent 70%),linear-gradient(var(--plate-hi),transparent 40%) no-repeat 0 0/100% 1px,var(--plate);box-shadow:inset 0 0 0 1px var(--plate-ring),inset 0 1px 0 var(--plate-hi);padding:clamp(28px,4vw,56px) clamp(16px,4vw,56px)}

/* ---------- macOS window primitives ---------- */
.ui{font-family:var(--mac);letter-spacing:0;text-align:left;-webkit-user-select:none;user-select:none;cursor:default;color:var(--u-ink)}
.win{position:relative;background:var(--u-win);border-radius:14px;box-shadow:var(--win-shadow);overflow:hidden}
.bar{display:flex;align-items:center;gap:8px;height:48px;padding:0 18px;background:var(--u-bar);box-shadow:inset 0 -1px 0 var(--u-sep)}
.lights{display:flex;gap:8px;flex:none}
.lights i{width:12px;height:12px;border-radius:50%;background:#FF5F57;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12)}
.lights i:nth-child(2){background:#FEBC2E}
.lights i:nth-child(3){background:#28C840}
.tools{display:flex;align-items:center;gap:20px;margin-left:auto;color:var(--u-ink-2);font-size:15px}
.tools svg{width:17px;height:17px}
.tools.l{margin-left:28px;gap:24px}
.tools .aa{font-size:15px;font-weight:500}
.mh{display:flex;align-items:center;gap:10px;height:44px;margin:0 28px;font-size:14px;box-shadow:inset 0 -1px 0 var(--u-sep)}
.mh b{font-weight:400;color:var(--u-ink-2);min-width:50px}
.chipn{padding:3px 9px;border-radius:6px;background:var(--u-chip)}
.mb{padding:20px 28px 24px;font-size:15px;line-height:1.62}
.mb p+p{margin-top:12px}
.hl{background:var(--sel);-webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:2px}
.caret{display:inline-block;width:1.5px;height:1.1em;margin-left:2px;vertical-align:-.18em;background:var(--u-ink)}
.ph-line{display:block;height:9px;border-radius:5px;background:var(--u-ph)}

/* ---------- Plume panel (restyle of the real app, both themes) ---------- */
.panel{position:relative;width:var(--pw,468px);border-radius:18px;background:var(--p-bg);box-shadow:var(--panel-shadow)}
.p-head{display:flex;align-items:center;gap:9px;padding:11px 12px 9px 13px}
.mark{position:relative;width:22px;height:22px;flex:none}
.mark img{position:relative;width:22px;height:22px}
.mark::before{content:"";position:absolute;inset:0;border-radius:7px;background:var(--tint);opacity:0;transition:opacity .2s}
.busy .mark::before{opacity:1;animation:breathe .8s ease-in-out infinite alternate}
@keyframes breathe{to{inset:-5px;border-radius:9px}}
.tabs{display:flex;gap:1px;padding:2px;border-radius:8px;background:var(--p-fill)}
.tab{padding:3px 10px;border-radius:6px;font-size:12px;font-weight:500;line-height:15px;color:var(--p-tab)}
.tab.on{color:var(--p-tab-on-ink);background:var(--p-tab-on);box-shadow:0 1px 2px rgba(0,0,0,.1),0 0 0 .5px rgba(0,0,0,.04)}
.sp{flex:1}
.lang{padding:1px 6px;border-radius:5px;font-size:10.5px;font-weight:600;letter-spacing:.3px;line-height:14px;color:var(--u-ink-2);box-shadow:inset 0 0 0 .5px var(--p-cap-ring),inset 0 0 0 1px var(--p-line)}
.eye{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;color:var(--u-ink-2);transition:opacity .2s}
.eye svg{width:16px;height:16px}
.eye.on{color:var(--accent);background:var(--tint)}
.panel.live:not(.has-rows) .eye{opacity:0}
.cap{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:5px;font-size:11px;font-weight:500;color:var(--u-ink-2);background:var(--p-cap);box-shadow:inset 0 0 0 .5px var(--p-cap-ring),0 1px 0 rgba(0,0,0,.05)}

.rows,.trail-in{transition:opacity .3s}
.fade .rows,.fade .trail-in,.fade .eye{opacity:0}
.trail{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--ease)}
.trail>div{overflow:hidden;min-height:0}
.trail-in{display:flex;align-items:center;gap:6px;padding:0 13px 9px}
.on-r2 .trail{grid-template-rows:1fr}
.back{display:inline-flex;align-items:center;gap:3px;height:22px;padding:0 7px 0 5px;border-radius:11px;font-size:11.5px;font-weight:600;color:var(--u-ink-2);background:var(--p-fill-2)}
.back svg{width:9px;height:9px}
.chev{font-size:11px;color:var(--u-ink-3)}
.req{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:11px;font-size:12px;background:var(--p-field);box-shadow:0 0 0 .5px var(--p-field-ring),0 1px 3px var(--p-row-shadow);transform:translateY(16px) scale(.92);opacity:0;transition:transform .32s var(--ease),opacity .32s}
.req svg{width:11px;height:11px;color:var(--accent)}
.on-r2 .req{transform:none;opacity:1}

.rows{display:flex;flex-direction:column;gap:2px;padding:0 7px}
.row{position:relative;padding:8px 11px 8px 12px;transition:padding .28s cubic-bezier(.4,0,.2,1)}
.row::before{content:"";position:absolute;inset:0;border-radius:12px;background:var(--p-row);box-shadow:0 0 0 .5px var(--p-row-ring),0 2px 8px var(--p-row-shadow);opacity:0;transition:opacity .28s cubic-bezier(.4,0,.2,1)}
.row::after{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--violet);transform:scaleY(.4);opacity:0;transition:opacity .28s,transform .28s cubic-bezier(.4,0,.2,1)}
.row.open{padding:11px 14px 12px}
.row.open::before{opacity:1}
.row.open::after{opacity:1;transform:none}
.row>*{position:relative}
.ph{display:none;padding:1px 1px 0 0}
.pending{padding:9px 12px 8px}
.pending .ph{display:block}
.pending .real{display:none}
.sk{display:block;height:10px;border-radius:5px;margin-right:50px;background:linear-gradient(90deg,var(--sk-a) 30%,var(--sk-b) 50%,var(--sk-a) 70%) 0 0/300% 100%;animation:shimmer 1.3s linear infinite}
.sk.b1{width:76px;height:9px;margin-bottom:6px}
@keyframes shimmer{from{background-position:100% 0}to{background-position:0 0}}
.r-head{display:flex;align-items:center;gap:7px;height:18px}
.lbl{font-size:12.5px;font-weight:600;color:var(--u-ink);transition:color .28s}
.open .lbl{color:var(--accent)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform .32s cubic-bezier(.34,1.4,.64,1)}
.upd .dot{transform:none}
.meta{margin-left:auto;padding-left:10px;font-size:11px;color:var(--u-ink-2);font-variant-numeric:tabular-nums;white-space:nowrap;display:inline-flex;align-items:center;gap:3px}
.meta svg{width:9px;height:9px}
.fold{display:grid;grid-template-rows:1fr;transition:grid-template-rows .28s cubic-bezier(.4,0,.2,1),opacity .2s}
.fold>div{overflow:hidden;min-height:0}
.open .pv,.row:not(.open) .bd{grid-template-rows:0fr;opacity:0}
.pv p{padding-top:4px;font-size:12.5px;line-height:15px;color:var(--u-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd p{padding-top:6px;font-size:13.5px;line-height:20.5px;color:var(--u-ink)}
.real{transition:filter .25s,opacity .32s var(--ease),transform .32s var(--ease)}
@starting-style{.live .real{opacity:0;transform:translateY(5px)}}
.refresh .real{filter:blur(5px);opacity:.3}
ins{text-decoration:underline 1px var(--ins-line);text-underline-offset:2px;color:var(--ins-ink);background:var(--ins-bg);-webkit-box-decoration-break:clone;box-decoration-break:clone}
del{color:var(--del);text-decoration:line-through 1px var(--del)}
.chips{display:flex;gap:5px;padding-top:9px}
.chip{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px;border-radius:10px;font-size:11px;color:var(--u-ink-2);background:var(--p-fill-2)}
.chip svg{width:8px;height:8px}
.refine{display:flex;gap:8px;margin-top:7px;padding:9px;box-shadow:inset 0 1px 0 var(--p-line)}
.field{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:34px;padding:0 11px;border-radius:10px;font-size:12.5px;background:var(--p-field);box-shadow:inset 0 0 0 .5px var(--p-field-ring);transition:box-shadow .2s;white-space:nowrap}
.field svg{width:14px;height:14px;flex:none;color:var(--u-ink-3)}
.typing .field,.field.focus{box-shadow:inset 0 0 0 .5px rgba(91,71,224,.55),0 0 0 3px rgba(91,71,224,.2)}
.ph-text{color:var(--u-ink-3)}
.draft{white-space:pre;color:var(--u-ink)}
.fcaret{width:1px;height:15px;margin-left:-6px;background:var(--accent);display:none}
.typing .fcaret,.field.focus .fcaret{display:block}
.live.typing .fcaret{animation:blink 1s steps(1) infinite}
.typing .ph-text,.has-draft .ph-text{display:none}
@keyframes blink{50%{opacity:0}}
.act{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 8px 0 13px;border-radius:10px;font-size:13px;font-weight:600;color:var(--on-violet);background:var(--violet);box-shadow:0 2px 10px var(--act-glow);white-space:nowrap}
.act .k{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:5px;font-size:11px;font-weight:500;background:rgba(255,255,255,.22)}
.act.quiet{color:var(--act-quiet-ink);background:var(--act-quiet);box-shadow:none}
.act.quiet .k{color:var(--act-quiet-ink);background:var(--p-cap);box-shadow:0 0 0 .5px var(--p-cap-ring)}
.act svg{width:11px;height:11px}
.no-anim,.no-anim *{transition:none!important;animation:none!important}
/* ---------- 8. FAQ ---------- */
.faq-grid{display:grid}
.qa summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px}
.qa summary::-webkit-details-marker{display:none}
.qa h3{font-size:clamp(21px,2vw,28px);line-height:1.2;letter-spacing:-.03em}
.qa p{margin-top:14px;color:var(--ink-2);max-width:32em}
.plus{position:relative;flex:none;width:14px;height:14px;transition:transform .3s var(--ease)}
.plus::before,.plus::after{content:"";position:absolute;left:0;top:6.25px;width:14px;height:1.5px;border-radius:1px;background:var(--ink-2)}
.plus::after{transform:rotate(90deg)}
.qa[open] .plus{transform:rotate(45deg)}
@media (min-width:760px){
  .faq-grid{grid-template-columns:1fr 1fr}
  .qa{padding:clamp(40px,4vw,56px) clamp(32px,4vw,56px)}
  .qa:nth-child(odd){box-shadow:inset -1px 0 0 var(--line);padding-left:0}
  .qa:nth-child(n+3){border-top:1px solid var(--line)}
  .qa summary{cursor:default;pointer-events:none}
  .plus{display:none}
}
@media (max-width:759px){
  .qa{border-top:1px solid var(--line)}
  .qa:last-child{border-bottom:1px solid var(--line)}
  .qa summary{padding:22px 0;cursor:pointer;border-radius:8px}
  .qa p{margin:-8px 0 24px;padding-right:32px}
}
.fin-vis{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;padding:clamp(40px,5vw,72px) clamp(12px,4vw,64px) clamp(28px,4vw,56px)}
.fin-duo{position:relative;width:1000px;height:400px}
.fin-duo .win{position:absolute;left:0;top:46px;width:720px}
.fin-duo .panel{position:absolute;right:0;top:0;--pw:420px}
@media (max-width:959px){.fin-duo{width:420px;height:auto}.fin-duo .win{position:relative;top:0;width:100%}.fin-duo .panel{position:relative;right:auto;margin:-28px 0 0 auto;--pw:370px}}
footer{margin-top:clamp(96px,10vw,144px);padding:32px 0 48px;box-shadow:inset 0 1px 0 var(--line);text-align:center}
footer nav{display:flex;justify-content:center;align-items:center;gap:12px;font-size:15px;color:var(--ink-2)}
footer a{padding:4px 2px;border-radius:6px;transition:color .15s}
footer a:hover{color:var(--ink)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media (prefers-reduced-transparency:reduce){.nav{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* ---------- Comparison pages ---------- */
.hero{position:relative;isolation:isolate;padding-top:clamp(32px,3.6vw,52px);text-align:center}
.hero::before{content:"";position:absolute;inset:calc(-1 * var(--nav-h)) 0 auto;height:720px;background:radial-gradient(50% 60% at 50% 0%,var(--plate-glow),transparent 75%);pointer-events:none;z-index:-1}
.crumbs{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:28px;font-size:14px;color:var(--ink-2)}
.crumbs a{border-radius:6px;transition:color .15s}
.crumbs a:hover{color:var(--ink)}
h1{max-width:14em;margin-inline:auto;font-size:clamp(38px,5.2vw,68px);line-height:1.04;letter-spacing:-.046em;font-weight:640}
.hero .lede{max-width:36em;margin:22px auto 0;font-size:clamp(17px,1.55vw,20px)}
.cta{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:34px}
.small{font-size:14px;color:var(--ink-2)}
.hero .frame{margin-top:clamp(48px,5vw,68px)}
@media (max-width:639px){.frame{padding:6px;border-radius:26px}.frame-in{border-radius:20px}}

.doc{max-width:820px;margin-inline:auto}
.part{padding-top:clamp(88px,10vw,144px)}
.part h2{font-size:clamp(30px,3.6vw,46px);line-height:1.08;letter-spacing:-.036em}
.part h2+*{margin-top:20px}
.prose p{font-size:clamp(17px,1.45vw,19px);color:var(--ink-2)}
.prose p+p{margin-top:16px}
.prose strong{font-weight:600;color:var(--ink)}
.need{margin-top:28px}
.need li{position:relative;padding:14px 0 14px 34px;box-shadow:inset 0 1px 0 var(--line);font-size:clamp(17px,1.45vw,19px)}
.need li:last-child{box-shadow:inset 0 1px 0 var(--line),inset 0 -1px 0 var(--line)}
.need li::before{content:"";position:absolute;left:6px;top:calc(14px + .78em - 4px);width:8px;height:8px;border-radius:50%;background:var(--accent)}
.need+.prose{margin-top:24px}
.src{margin-top:20px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.src a,.prose a{text-decoration:underline 1px;text-underline-offset:3px;text-decoration-color:var(--line);transition:text-decoration-color .15s}
.src a:hover,.prose a:hover{text-decoration-color:currentColor}

/* Table: three columns from 640px, one card per row below. */
.vs{width:100%;margin-top:32px;border-collapse:separate;border-spacing:0;font-size:16px;line-height:1.45}
.vs th,.vs td{text-wrap:pretty;padding:15px 18px;text-align:left;vertical-align:top;font-weight:400;box-shadow:inset 0 1px 0 var(--line)}
.vs thead th{padding-top:0;padding-bottom:12px;box-shadow:none;font-size:15px;font-weight:600;color:var(--ink-2)}
.vs thead th.p{color:var(--accent)}
.vs tbody th{width:20%;padding-left:0;font-weight:600;color:var(--ink)}
.vs td{width:40%;color:var(--ink-2)}
.vs td.p{color:var(--ink);background:var(--tint)}
.vs tbody tr:last-child>*{box-shadow:inset 0 1px 0 var(--line),inset 0 -1px 0 var(--line)}
.vs kbd{font-size:.82em}
@media (max-width:639px){
  .vs,.vs tbody,.vs tr,.vs th,.vs td{display:block;width:auto}
  .vs thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .vs tr{padding:16px 0;box-shadow:inset 0 1px 0 var(--line)}
  .vs tbody tr:last-child{box-shadow:inset 0 1px 0 var(--line),inset 0 -1px 0 var(--line)}
  .vs tbody th,.vs td,.vs tbody tr:last-child>*{box-shadow:none}
  .vs tbody th{width:auto;padding:0}
  .vs tbody th{margin-bottom:8px}
  .vs td{padding:10px 12px;border-radius:10px}
  .vs td::before{content:attr(data-l);display:block;margin-bottom:2px;font-size:13px;font-weight:600;line-height:1.4;color:var(--ink-2)}
  .vs td.p::before{color:var(--accent)}
}

.faq-wrap .faq-grid{margin-top:8px}
.end{padding-top:clamp(112px,12vw,176px);text-align:center}
.end h2{font-size:clamp(40px,5.6vw,76px);line-height:1.04;letter-spacing:-.046em}
.end .btn{margin-top:40px}
.end .more{display:inline-block;margin-top:22px;font-size:15px;color:var(--ink-2);border-radius:6px;transition:color .15s}
.end .more:hover{color:var(--ink)}