:root{
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-arabic: "Noto Kufi Arabic", "Segoe UI", "Geeza Pro", Tahoma, "Noto Naskh Arabic", system-ui, sans-serif;
  --font-thai: "Noto Sans Thai", "Leelawadee UI", Tahoma, system-ui, sans-serif;
  --font-cjk: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Hiragino Sans GB", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --font-active: var(--font-sans);

  --graphite-950:#0B0C10; --graphite-900:#111318; --graphite-850:#161922;
  --graphite-800:#1D2027; --graphite-700:#2A2E38; --graphite-600:#3A3F4B;
  --graphite-400:#7C8494; --graphite-300:#9AA2B1; --graphite-200:#C7CCD6;
  --graphite-100:#E7E9EE; --graphite-050:#F4F5F8; --paper:#FBFBFD; --ink:#14161B;
  --violet-600:#6B4FD8; --violet-500:#7C5CFF; --violet-400:#9A82FF; --violet-300:#B9A8FF;
  --violet-150:#E6DEFF; --violet-tintD:#1E1A33;
  --ok-600:#2E9E6B; --ok-400:#49C08A; --warn-600:#C08A2E; --warn-400:#E0A94A;
  --danger-600:#C0453E; --danger-400:#E86A62; --info-400:#5AA9E6;

  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-8:32px;
  --s-10:40px;--s-12:48px;--s-16:64px;--s-20:80px;--s-24:96px;--s-32:128px;
  --r-sm:6px;--r-md:10px;--r-lg:14px;--r-xl:20px;--r-pill:999px;
  --maxw:1200px; --maxw-wide:1360px; --measure:66ch;
  --ease-out:cubic-bezier(.2,.7,.2,1); --ease-io:cubic-bezier(.4,0,.2,1);
}
html[data-theme="dark"]{
  --bg:var(--graphite-950); --bg-subtle:var(--graphite-900); --surface:var(--graphite-850);
  --surface-raised:var(--graphite-800); --border:var(--graphite-700); --border-strong:var(--graphite-600);
  --text:var(--graphite-100); --text-secondary:var(--graphite-300); --text-muted:var(--graphite-400);
  --accent:var(--violet-500); --accent-hover:var(--violet-400); --accent-text:var(--violet-300);
  --accent-tint:var(--violet-tintD); --focus:var(--violet-500);
  --accent-solid:#7254F0; --accent-solid-hover:#6A4BE0;
  --ok:var(--ok-400); --warn:var(--warn-400); --danger:var(--danger-400);
  --elev-1:0 1px 0 rgba(255,255,255,.03) inset, 0 1px 2px rgba(0,0,0,.4);
  --elev-2:0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px -8px rgba(0,0,0,.55);
  --grid-line:rgba(255,255,255,.035);
  --hero-glow:rgba(124,92,255,.10);
}
html[data-theme="light"]{
  --bg:var(--graphite-050); --bg-subtle:#EEEFF3; --surface:var(--paper);
  --surface-raised:#FFFFFF; --border:#E0E2E9; --border-strong:#CFD2DB;
  --text:var(--ink); --text-secondary:#4A4F5C; --text-muted:#666C79;
  --accent:var(--violet-600); --accent-hover:var(--violet-500); --accent-text:var(--violet-600);
  --accent-tint:var(--violet-150); --focus:var(--violet-600);
  --accent-solid:var(--violet-600); --accent-solid-hover:#5B42C0;
  --ok:var(--ok-600); --warn:var(--warn-600); --danger:var(--danger-600);
  --elev-1:0 1px 2px rgba(20,22,27,.06), 0 1px 1px rgba(20,22,27,.04);
  --elev-2:0 12px 32px -12px rgba(20,22,27,.14);
  --grid-line:rgba(20,22,27,.04);
  --hero-glow:rgba(107,79,216,.08);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--font-active); background:var(--bg); color:var(--text);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
html[lang="ar"] body{--font-active:var(--font-arabic)}
html[lang="zh"] body{--font-active:var(--font-cjk)}
html[lang="th"] body{--font-active:var(--font-thai)}
html[dir="rtl"] body{line-height:1.7}
h1,h2,h3,h4,p{margin:0}
a{color:inherit;text-decoration:none}
svg{display:block}
::selection{background:var(--accent-tint); color:var(--accent-text)}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{
  outline:2px solid var(--focus); outline-offset:2px; border-radius:var(--r-sm);
}
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--s-6)}
.wide{max-width:var(--maxw-wide)}
section{padding-block:var(--s-24)}
@media(max-width:720px){section{padding-block:var(--s-16)}}
.eyebrow{
  display:inline-flex; align-items:center; gap:var(--s-2);
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-text); margin:0 0 var(--s-4);
}
html[dir="rtl"] .eyebrow, html[lang="zh"] .eyebrow, html[lang="th"] .eyebrow{text-transform:none; letter-spacing:.02em}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--accent); opacity:.7}
h1.display{font-size:clamp(38px,6vw,60px); line-height:1.03; font-weight:640; letter-spacing:-.02em; text-wrap:balance}
h2.h1{font-size:clamp(28px,4vw,40px); line-height:1.08; font-weight:640; letter-spacing:-.015em; text-wrap:balance}
h3.h2{font-size:clamp(20px,2.4vw,26px); line-height:1.18; font-weight:620; letter-spacing:-.01em}
.h3{font-size:19px; line-height:1.3; font-weight:600}
.lead{font-size:clamp(16px,1.6vw,19px); line-height:1.6; color:var(--text-secondary); max-width:var(--measure)}
.muted{color:var(--text-muted)}
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums}

header.site{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--border);
}
.nav{display:flex; align-items:center; gap:var(--s-4); height:64px}
.brand{display:inline-flex; align-items:center; gap:10px; font-weight:640; font-size:17px; letter-spacing:-.01em}
.brand .logo{width:30px; height:30px; flex:none}
.brand b{color:var(--text)} .brand .accent{color:var(--accent-text)}
.nav .links{display:flex; gap:var(--s-1); margin-inline-start:var(--s-5)}
.nav .links a{
  padding:8px 12px; border-radius:var(--r-md); font-size:14px; color:var(--text-secondary); font-weight:500;
  transition:color .15s var(--ease-out), background .15s var(--ease-out);
}
.nav .links a:hover{color:var(--text); background:var(--surface)}
.nav .spacer{flex:1}
.nav .tools{display:flex; align-items:center; gap:var(--s-2)}

/* language dropdown */
.lang{position:relative; display:inline-flex; align-items:center}
.lang .gl{position:absolute; inset-inline-start:9px; width:16px; height:16px; color:var(--text-muted); pointer-events:none}
.lang .cv{position:absolute; inset-inline-end:8px; width:13px; height:13px; color:var(--text-muted); pointer-events:none}
.lang select{
  appearance:none; -webkit-appearance:none;
  font:inherit; font-size:13px; font-weight:600; color:var(--text);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  height:38px; padding-inline:30px 26px; cursor:pointer; max-width:180px;
  transition:border-color .15s var(--ease-out);
}
.lang select:hover{border-color:var(--border-strong)}

.icon-btn{
  width:38px;height:38px; display:inline-grid; place-items:center; cursor:pointer;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); color:var(--text-secondary);
  transition:.15s var(--ease-out);
}
.icon-btn:hover{color:var(--text); border-color:var(--border-strong)}
.icon-btn svg{width:18px;height:18px}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  font:inherit; font-size:13.5px; font-weight:600; letter-spacing:.01em; line-height:1;
  height:44px; padding-inline:20px; border-radius:var(--r-md); border:1px solid transparent;
  transition:.15s var(--ease-out); white-space:nowrap;
}
.btn svg{width:17px;height:17px}
.btn-primary{background:var(--accent-solid); color:#fff}
.btn-primary:hover{background:var(--accent-solid-hover)}
.btn-primary:active{transform:translateY(1px)}
.btn-secondary{background:transparent; color:var(--text); border-color:var(--border-strong)}
.btn-secondary:hover{background:var(--surface); border-color:var(--text-muted)}
.btn-sm{height:38px; padding-inline:14px; font-size:13px}
html[dir="rtl"] .btn svg.rtlflip, html[dir="rtl"] .rtlflip{transform:scaleX(-1)}
@media(max-width:960px){
  .nav .links{display:none}
  .nav .cta-desktop{display:none}
  .lang select{max-width:150px}
}
@media(max-width:420px){ .lang select{max-width:120px; font-size:12px} }

.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--border)}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:46px 46px; mask-image:radial-gradient(120% 80% at 80% 0%,#000 30%,transparent 75%);
}
html[dir="rtl"] .hero::before{mask-image:radial-gradient(120% 80% at 20% 0%,#000 30%,transparent 75%)}
.hero::after{
  content:""; position:absolute; inset-block-start:-30%; inset-inline-end:-10%;
  width:680px;height:680px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,var(--hero-glow),transparent 62%);
}
.hero-grid{position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:var(--s-16); align-items:center; padding-block:var(--s-24) var(--s-20)}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr; gap:var(--s-12); padding-block:var(--s-16)}}
.hero-copy .badge{
  display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600;
  color:var(--text-secondary); background:var(--surface); border:1px solid var(--border);
  padding:6px 12px; border-radius:var(--r-pill); margin-bottom:var(--s-6);
}
.hero-copy .badge .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 25%,transparent)}
.hero-copy p.lead{margin-top:var(--s-5)}
.hero-actions{display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-8)}
.hero-meta{display:flex; flex-wrap:wrap; gap:var(--s-5) var(--s-6); margin-top:var(--s-8); padding-top:var(--s-6); border-top:1px solid var(--border)}
.hero-meta .mi{display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--text-secondary)}
.hero-meta .mi svg{width:17px;height:17px;color:var(--accent-text);flex:none}

.device{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  box-shadow:var(--elev-2); overflow:hidden; position:relative;
}
.device .bar{display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--border); background:var(--bg-subtle)}
.device .bar .app{display:flex;align-items:center;gap:8px; font-size:12.5px; font-weight:600; color:var(--text-secondary)}
.device .bar .app svg{width:16px;height:16px;color:var(--accent-text)}
.device .bar .sig{margin-inline-start:auto; display:flex; gap:5px}
.device .bar .sig i{width:6px;height:6px;border-radius:50%;background:var(--border-strong)}
.device .bar .sig i.on{background:var(--ok)}
.device .screen{padding:18px}
.field-label{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:7px}
html[dir="rtl"] .field-label,html[lang="zh"] .field-label,html[lang="th"] .field-label{text-transform:none;letter-spacing:.02em}
.select-row{display:flex; gap:10px; margin-bottom:14px}
.pseudo-input{
  flex:1; display:flex; align-items:center; gap:10px; height:44px; padding-inline:12px;
  background:var(--surface-raised); border:1px solid var(--border); border-radius:var(--r-md); font-size:14px;
}
.pseudo-input svg{width:16px;height:16px;color:var(--text-muted)}
.pseudo-input.code{font-family:var(--font-mono); letter-spacing:.04em; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint); direction:ltr}
.pseudo-input.code b{color:var(--accent-text); font-weight:600}
.vin-btn{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:var(--r-md);background:var(--accent);color:#fff;border:0;cursor:pointer}
.vin-btn svg{width:18px;height:18px}
.result-head{display:flex; align-items:center; gap:10px; margin:6px 0 12px; flex-wrap:wrap}
.chip{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:13px; font-weight:500;
  letter-spacing:.03em; padding:3px 9px; border-radius:var(--r-sm); direction:ltr;
}
.chip .cd{width:6px;height:6px;border-radius:50%}
.chip.dtc{background:var(--accent-tint); color:var(--accent-text); border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.chip.dtc .cd{background:var(--accent)}
.result-head .rt{font-size:13px;color:var(--text-secondary)}
.result-head .rt b{color:var(--text)}
.steps{list-style:none; margin:0; padding:0}
.steps li{position:relative; padding-inline-start:38px; padding-block:11px}
.steps li:not(:last-child){border-bottom:1px solid var(--border)}
.steps .mk{
  position:absolute; inset-inline-start:0; inset-block-start:11px; width:26px;height:26px; border-radius:50%;
  display:grid; place-items:center; font-size:12px; font-weight:700; font-family:var(--font-mono);
  background:var(--surface-raised); border:1px solid var(--border); color:var(--text-secondary);
}
.steps li.active .mk{background:var(--accent); color:#fff; border-color:var(--accent)}
.steps li.done .mk{background:color-mix(in srgb,var(--ok) 18%,transparent); border-color:transparent; color:var(--ok)}
.steps li.done .mk svg{width:14px;height:14px}
.steps .st{font-size:14px; font-weight:600; color:var(--text)}
.steps .sd{font-size:12.5px; color:var(--text-muted); margin-top:2px}
.steps .torque{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-family:var(--font-mono);font-size:11.5px;color:var(--accent-text);background:var(--accent-tint);padding:2px 7px;border-radius:var(--r-sm);direction:ltr}

.sec-head{max-width:720px; margin-bottom:var(--s-12)}
.sec-head.center{margin-inline:auto; text-align:center}
.sec-head.center .eyebrow::before{display:none}

.how{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5); counter-reset:step}
@media(max-width:820px){.how{grid-template-columns:1fr}}
.how .card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--s-6);
  position:relative; transition:.18s var(--ease-out);
}
.how .card:hover{border-color:var(--border-strong); transform:translateY(-2px); box-shadow:var(--elev-2)}
.how .num{
  font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--accent-text);
  display:inline-flex; align-items:center; gap:8px; margin-bottom:var(--s-4);
}
.how .num::before{counter-increment:step; content:"0" counter(step); }
.how .ic{width:40px;height:40px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--accent-tint);color:var(--accent-text);margin-bottom:var(--s-4)}
.how .ic svg{width:22px;height:22px}
.how .card h3{margin-bottom:8px}
.how .card p{font-size:14.5px;color:var(--text-secondary)}
.how .conn{position:absolute; inset-inline-end:-13px; inset-block-start:50%; color:var(--border-strong); z-index:2}
.how .conn svg{width:22px;height:22px}
html[dir="rtl"] .how .conn{transform:scaleX(-1) translateY(-50%)}
@media(max-width:820px){.how .conn{display:none}}

.feat-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; grid-auto-rows:1fr; gap:var(--s-5)}
@media(max-width:900px){.feat-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.feat-grid{grid-template-columns:1fr}}
.feat{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--s-6);
  display:flex; flex-direction:column; transition:.18s var(--ease-out);
}
.feat:hover{border-color:var(--border-strong)}
.feat.span2{grid-column:span 2}
@media(max-width:600px){.feat.span2{grid-column:span 1}}
.feat .fic{width:38px;height:38px;border-radius:var(--r-md);display:grid;place-items:center;border:1px solid var(--border);color:var(--accent-text);margin-bottom:var(--s-5)}
.feat .fic svg{width:20px;height:20px}
.feat h3{margin-bottom:8px}
.feat p{font-size:14px;color:var(--text-secondary)}
.feat.showcase{background:linear-gradient(180deg,var(--surface),var(--bg-subtle)); border-color:var(--border-strong)}
.chatline{display:flex; gap:9px; margin-top:var(--s-4)}
.chatline .av{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:11px;font-weight:700;background:var(--surface-raised);border:1px solid var(--border);color:var(--text-muted)}
.chatline .av.ai{background:var(--accent-tint);border-color:transparent;color:var(--accent-text)}
.chatline .bub{font-size:13px;line-height:1.5;background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--r-md);padding:8px 11px;color:var(--text-secondary);max-width:88%}
.chatline.me{flex-direction:row-reverse}
.chatline.me .bub{background:var(--accent-tint);border-color:transparent;color:var(--accent-text)}

.trust{background:var(--bg-subtle); border-block:1px solid var(--border)}
.trust-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-16); align-items:center}
@media(max-width:860px){.trust-grid{grid-template-columns:1fr; gap:var(--s-10)}}
.trust-points{display:grid; gap:var(--s-4)}
.tp{display:flex; gap:var(--s-4); padding:var(--s-4); border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface)}
.tp .tpi{width:34px;height:34px;flex:none;border-radius:var(--r-md);display:grid;place-items:center;background:var(--accent-tint);color:var(--accent-text)}
.tp .tpi svg{width:19px;height:19px}
.tp h3{font-size:15px;font-weight:600;margin-bottom:3px}
.tp p{font-size:13.5px;color:var(--text-secondary)}

.cov-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-4)}
@media(max-width:820px){.cov-grid{grid-template-columns:1fr 1fr}}
.cov{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--s-6);
  transition:.18s var(--ease-out);
}
.cov:hover{border-color:var(--accent); transform:translateY(-2px)}
.cov .mark{width:44px;height:44px;margin-bottom:var(--s-4);color:var(--accent-text)}
.cov h3{font-size:17px;font-weight:640;margin-bottom:4px}
.cov .tier{font-size:12px;font-weight:600;color:var(--text-muted);letter-spacing:.04em}
.cov p{font-size:13px;color:var(--text-secondary);margin-top:8px}
.cov .avail{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:12px;font-weight:600;color:var(--ok)}
.cov .avail .cd{width:6px;height:6px;border-radius:50%;background:var(--ok)}

/* download */
.download{background:var(--bg-subtle); border-block:1px solid var(--border)}
.dl-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:var(--s-12); align-items:center}
@media(max-width:820px){.dl-grid{grid-template-columns:1fr; gap:var(--s-8)}}
.dl-direct{margin-top:var(--s-6)}
.btn-apk{height:52px; padding-inline:26px; font-size:15px}
.dl-note{margin-top:var(--s-3); max-width:46ch; font-size:12.5px; line-height:1.6; color:var(--text-muted)}
.dl-badges{display:flex; flex-wrap:wrap; gap:var(--s-3)}
.store-badge{
  display:inline-flex; align-items:center; gap:11px; direction:ltr;
  background:#000; color:#fff; border:1px solid #2A2E38; border-radius:12px; padding:9px 16px; min-width:184px;
  transition:border-color .15s var(--ease-out), transform .12s var(--ease-out);
}
.store-badge:hover{border-color:#5a5f6b; transform:translateY(-1px)}
.store-badge .si{width:26px;height:26px;flex:none}
.store-badge .stx{display:flex; flex-direction:column; line-height:1.15; text-align:left}
.store-badge .stx small{font-size:10px; letter-spacing:.03em; opacity:.85; text-transform:uppercase}
.store-badge .stx b{font-size:17px; font-weight:600; letter-spacing:.01em}
.dl-soon{display:inline-flex;align-items:center;gap:7px;margin-top:var(--s-5);font-size:12.5px;color:var(--text-muted)}
.dl-soon .cd{width:6px;height:6px;border-radius:50%;background:var(--warn)}
.dl-visual{display:flex;justify-content:center}
.qr{width:150px;height:150px;border-radius:var(--r-lg);border:1px solid var(--border);background:var(--surface);display:grid;place-items:center;color:var(--text-muted)}
.qr svg{width:96px;height:96px;color:var(--text-secondary)}

/* pricing */
.price-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-5)}
@media(max-width:1000px){.price-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.price-grid{grid-template-columns:1fr}}
.plan{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--s-8) var(--s-6); display:flex; flex-direction:column; position:relative}
.plan.feature{border-color:var(--accent); box-shadow:var(--elev-2)}
.plan.feature::before{content:""; position:absolute; inset-inline:0; inset-block-start:0; height:2px; background:var(--accent); border-radius:var(--r-lg) var(--r-lg) 0 0}
.plan .tag{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text);margin-bottom:var(--s-3)}
html[dir="rtl"] .plan .tag,html[lang="zh"] .plan .tag,html[lang="th"] .plan .tag{text-transform:none;letter-spacing:.02em}
.plan .pill{position:absolute; inset-block-start:var(--s-5); inset-inline-end:var(--s-5); font-size:11px; font-weight:600; color:#fff; background:var(--accent); padding:3px 9px; border-radius:var(--r-pill)}
.plan.workshop .pill{background:var(--surface-raised); color:var(--text-secondary); border:1px solid var(--border-strong)}
.plan .amt{display:flex; align-items:baseline; gap:6px; margin-bottom:var(--s-5); flex-wrap:wrap}
.plan .amt .n{font-size:34px;font-weight:640;letter-spacing:-.02em;font-family:var(--font-mono)}
.plan .amt .p{font-size:13px;color:var(--text-muted)}
.plan ul{list-style:none;margin:0 0 var(--s-6);padding:0;display:grid;gap:10px}
.plan li{display:flex;gap:9px;font-size:13.5px;color:var(--text-secondary)}
.plan li svg{width:16px;height:16px;color:var(--accent-text);flex:none;margin-top:2px}
.plan .btn{margin-top:auto;width:100%}
.price-note{margin-top:var(--s-8);font-size:13px;color:var(--text-muted);text-align:center}
.price-empty{display:grid; justify-items:center; gap:var(--s-5); font-size:16px; color:var(--text)}
.price-empty[hidden]{display:none}

.cta-band{position:relative; overflow:hidden; background:var(--bg-subtle); border-top:1px solid var(--border)}
.cta-band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:46px 46px; mask-image:radial-gradient(90% 120% at 50% 0%,#000,transparent 70%)}
.cta-inner{position:relative; text-align:center; max-width:640px; margin-inline:auto}
.cta-inner .btns{display:flex; justify-content:center; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-8)}
.support{display:inline-flex;align-items:center;gap:9px;margin-top:var(--s-8);padding:10px 16px;border:1px solid var(--border);border-radius:var(--r-pill);background:var(--surface);font-size:13.5px;color:var(--text-secondary)}
.support svg{width:16px;height:16px;flex:none;color:var(--accent-text)}
.support b{color:var(--text); font-family:var(--font-mono); letter-spacing:.02em; direction:ltr}
.support:hover{border-color:var(--border-strong)}
.support-row{display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s-3); margin-top:var(--s-8)}
.support-row .support{margin-top:0}

/* activation: the three real steps (install -> register -> WhatsApp) */
.act-steps{position:relative; list-style:none; margin:var(--s-10) auto 0; padding:0; max-width:940px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-4); text-align:start}
@media(max-width:760px){.act-steps{grid-template-columns:1fr; gap:var(--s-3); margin-top:var(--s-8)}}
.act-step{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--s-5)}
.act-step .n{display:grid; place-items:center; width:26px; height:26px; margin-bottom:var(--s-3);
  border-radius:50%; background:var(--accent-tint); color:var(--accent-text);
  font-family:var(--font-mono); font-size:13px; font-weight:700}
.act-step h3{font-size:15px; font-weight:600; margin-bottom:4px}
.act-step p{font-size:13px; line-height:1.6; color:var(--text-secondary)}

footer.site{border-top:1px solid var(--border); background:var(--bg); padding-block:var(--s-12) var(--s-10)}
.foot{display:flex; flex-wrap:wrap; gap:var(--s-8); justify-content:space-between; align-items:flex-start}
.foot .col .fh, .foot-langs .fh{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--s-4)}
html[dir="rtl"] .fh,html[lang="zh"] .fh,html[lang="th"] .fh{text-transform:none;letter-spacing:.02em}
.foot .col .fteam{margin-top:var(--s-3); font-size:14px; color:var(--text-secondary); line-height:1.7}
.foot .col a{display:block; font-size:14px; color:var(--text-secondary); padding-block:5px}
.foot .col a:hover{color:var(--text)}
.foot .col a.fc{display:flex; align-items:flex-start; gap:9px; padding-block:7px}
.foot .col a.fc svg{width:16px; height:16px; flex:none; margin-top:2px; color:var(--accent-text)}
.foot .fct{display:flex; flex-direction:column; gap:2px; min-width:0}
.foot .fct b{font-size:13.5px; font-weight:600; color:var(--text); word-break:break-word}
.foot .fct small{font-size:12px; color:var(--text-muted)}
.foot-langs{margin-top:var(--s-10); padding-top:var(--s-6); border-top:1px solid var(--border)}
.foot-langs .ll{display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:var(--s-3)}
.foot-langs a{font-size:13.5px; color:var(--text-secondary); padding-block:3px}
.foot-langs a:hover{color:var(--text)}
.foot-langs a[aria-current="true"]{color:var(--accent-text); font-weight:600}
.foot .about{max-width:320px}
.foot .about p{font-size:13.5px;color:var(--text-muted);margin-top:var(--s-3)}
.foot-bottom{display:flex; flex-wrap:wrap; gap:var(--s-4); justify-content:space-between; align-items:center;
  margin-top:var(--s-10); padding-top:var(--s-6); border-top:1px solid var(--border); font-size:13px; color:var(--text-muted)}

.reveal{opacity:0; transform:translateY(12px); transition:opacity .5s var(--ease-out), transform .5s var(--ease-out)}
.reveal.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{scroll-behavior:auto !important}
}


.art-wrap{max-width:760px; margin-inline:auto; padding-block:var(--s-12) var(--s-16)}
.art-head{border-bottom:1px solid var(--border); padding-bottom:var(--s-6); margin-bottom:var(--s-8)}
.art-head time{font-family:var(--font-mono); font-size:13px; color:var(--text-muted)}
.art-head h1{font-size:clamp(28px,4.4vw,40px); line-height:1.22; margin-top:var(--s-3)}
.art-head .lead{margin-top:var(--s-4)}
.art-body h2{font-size:22px; margin-top:var(--s-10); margin-bottom:var(--s-3)}
.art-body h3{font-size:17px; margin-top:var(--s-6); margin-bottom:var(--s-2)}
.art-body p{margin-top:var(--s-4); line-height:1.75; color:var(--text-secondary)}
.art-body ul,.art-body ol{margin-top:var(--s-4); padding-inline-start:1.35em}
.art-body li{margin-top:10px; line-height:1.7; color:var(--text-secondary)}
.art-note{margin-top:var(--s-6); padding:var(--s-4) var(--s-5); border-inline-start:3px solid var(--accent);
  border-radius:0 var(--r-md) var(--r-md) 0; background:var(--surface); color:var(--text); font-size:14.5px; line-height:1.7}
.art-cta{margin-top:var(--s-12); padding-top:var(--s-8); border-top:1px solid var(--border); display:flex; flex-wrap:wrap; gap:var(--s-3)}
.art-nav{display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
  flex-wrap:wrap; padding-block:var(--s-5); border-bottom:1px solid var(--border)}
.art-links{display:flex; flex-wrap:wrap; gap:var(--s-1)}
.art-links a{padding:6px 10px; border-radius:var(--r-md); font-size:14px; font-weight:500;
  color:var(--text-secondary)}
.art-links a:hover{color:var(--text); background:var(--surface)}
.post-list{list-style:none; padding:0; margin-top:var(--s-8)}
.post-list li{padding-block:var(--s-6); border-bottom:1px solid var(--border)}
.post-list time{font-family:var(--font-mono); font-size:12.5px; color:var(--text-muted)}
.post-list h2{font-size:20px; margin-top:6px}
.post-list h2 a{color:var(--text)} .post-list h2 a:hover{color:var(--accent-text)}
.post-list p{margin-top:8px; color:var(--text-secondary); line-height:1.7; font-size:14.5px}
.art-langs{display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:var(--s-8);
  padding-top:var(--s-5); border-top:1px solid var(--border)}
.art-langs a{font-size:13.5px; color:var(--text-secondary)}
.art-langs a[aria-current="true"]{color:var(--accent-text); font-weight:600}


.art-codes{margin-top:var(--s-10); padding:var(--s-5); border:1px solid var(--border);
  border-radius:var(--r-md); background:var(--surface)}
.art-codes a{display:block; padding-block:6px; font-size:14.5px; color:var(--text-secondary)}
.art-codes a:hover{color:var(--text)}
.dtc-meta{font-size:13px; color:var(--text-muted); margin-top:var(--s-3)}
.dtc-code{font-family:var(--font-mono); font-size:14px; letter-spacing:.08em; color:var(--accent-text)}
.dtc-sev{font-size:14.5px; color:var(--text)}
.dtc-note{font-size:13px; color:var(--text-muted)}
.dtc-n{font-size:13px; color:var(--text-muted); white-space:nowrap}
/* The offer strip under the title: the one screen a reader gets before they
   decide. It says what this page gives away and what the subscription adds,
   in that order, so the trade is legible without scrolling. Kept to a couple
   of lines and a button — a full-width block here would push the answer the
   reader came for below the fold, which is the layout Google demotes. */
.dtc-top{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-4) var(--s-6);
  margin-top:var(--s-6); padding:var(--s-4) var(--s-5); border:1px solid var(--border);
  border-radius:var(--r-lg); background:var(--surface)}
.dtc-top-txt{flex:1 1 300px; display:grid; gap:6px}
.dtc-top p{font-size:14px; line-height:1.55}
.dtc-top-free{color:var(--text-muted)}
.dtc-top-paid{color:var(--text); font-weight:600;
  padding-inline-start:var(--s-3); border-inline-start:2px solid var(--accent)}
.dtc-top .btn{flex:0 0 auto}
@media(max-width:560px){.dtc-top .btn{width:100%}}
/* Translations run long — Arabic and German more than most — and .btn is
   nowrap by design for the landing page's short labels. These two buttons
   carry sentences, so they wrap instead of overflowing a 360px phone. */
.btn-wrap{white-space:normal; height:auto; min-height:44px; padding-block:11px; line-height:1.35; text-align:center}
.dtc-paid{margin-top:var(--s-10); padding:var(--s-6); border:1px solid var(--border-strong);
  border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--elev-2)}
.dtc-paid h2{font-size:19px}
.dtc-paid p{margin-block:var(--s-3) var(--s-5); color:var(--text-secondary)}
.ready{margin-top:var(--s-6); padding:var(--s-4) var(--s-5); border:1px solid var(--border);
  border-radius:var(--r-md); background:var(--bg)}
.ready h3{font-size:16px}
.ready p{margin-top:6px; font-size:14px; color:var(--text-secondary)}
.ready-l{margin-top:var(--s-3); display:flex; flex-wrap:wrap; gap:6px 10px; list-style:none;
  padding:0; font-size:13.5px}
.ready-l li{padding:3px 9px; border:1px solid var(--border); border-radius:999px}
.ready-more{margin-top:var(--s-3)}
.v-ready{margin-inline-start:8px; font-size:12px; color:var(--accent-text)}
.quarter{margin-top:6px; font-size:14px; color:var(--text-secondary)}
.quarter:empty{display:none}
#sub-state{margin-bottom:var(--s-6)}
#sub-state p{font-size:14.5px; color:var(--text-secondary)}
#sub-state:empty{display:none}
.renew{display:flex; align-items:flex-start; gap:8px; margin-top:var(--s-4); font-size:14px}
.renew input{margin-top:3px; flex:none}
.renew-note{margin-top:6px; font-size:13px; color:var(--text-muted); max-width:58ch}
#sub-app h3{margin-top:var(--s-2); font-size:19px}
#sub-app p{margin-top:var(--s-3); color:var(--text-secondary); max-width:60ch}
#sub-app .btn{margin-top:var(--s-5)}
#sub-app[hidden]{display:none}
#sell[hidden]{display:none}
.dtc-tease{margin-top:var(--s-6); padding:12px var(--s-4); border-inline-start:3px solid var(--accent);
  border-radius:0 var(--r-md) var(--r-md) 0; background:var(--surface); font-size:14.5px; color:var(--text)}
.dtc-tease a{font-weight:600; white-space:nowrap}
.paid-b{list-style:none; padding:0; margin:var(--s-5) 0; display:grid; gap:10px}
.paid-b li{color:var(--text); font-size:14.5px; padding-inline-start:1.6em; position:relative}
/* The backslash is doubled on purpose: this CSS lives in an ordinary Python
   string, so a single one made the tick an octal escape and every bullet in
   the offer rendered as two stray characters instead. */
.paid-b li::before{content:"\2713"; position:absolute; inset-inline-start:0; color:var(--accent-text); font-weight:700}
/* The locked preview.
   It is a wireframe, never text: empty <i> bars on the page, nothing written
   into them and nothing hidden behind them. The paid procedure is fetched from
   the backend after sign-in and is not in this HTML at all, so a blurred copy
   of it cannot exist here — and blurring invented filler would be the same lie
   in nicer clothes. A crawler and a reader both get bars. What the shape
   honestly carries is how the procedure is laid out: numbered steps, short
   instructions, a diagram, and more of it below the fold. lk-note used to say
   that in words and no longer does: explaining our own wireframe is copy
   written for a designer, and this page is read by a mechanic next to a car.
   The guarantee is the empty bars, not a sentence about them. */
.lk{position:relative; margin-top:var(--s-6); border:1px solid var(--border);
  border-radius:var(--r-lg); background:var(--bg); overflow:hidden}
/* Same lesson as .sub-bar: a display rule beats the hidden attribute. */
.lk[hidden]{display:none}
.lk-skel{padding:var(--s-5) var(--s-5) 0; display:grid; gap:18px; filter:blur(1.4px); opacity:.7;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 30%,transparent 94%);
  mask-image:linear-gradient(to bottom,#000 0,#000 30%,transparent 94%)}
.lk-row{display:flex; align-items:flex-start; gap:var(--s-4)}
.lk-n{flex:none; width:1.5em; font-family:var(--font-mono); font-size:13px; color:var(--text-muted)}
.lk-bars{flex:1; display:grid; gap:10px}
.lk-b{display:block; height:10px; border-radius:var(--r-pill); background:var(--border-strong)}
.lk-img{display:block; width:72%; height:54px; border-radius:var(--r-sm);
  border:1px solid var(--border-strong); background:var(--surface-raised)}
.w9{width:96%}.w8{width:88%}.w7{width:78%}.w6{width:66%}.w5{width:54%}.w4{width:44%}
/* The call sits in normal flow and is pulled up over the wireframe, rather than
   pinned to the bottom of it. Absolute positioning looked right in English and
   swallowed the whole card in the languages whose lines wrap to three: what is
   left of the preview must not depend on how long a translation runs. */
.lk-veil{position:relative; margin-top:-120px; padding:var(--s-10) var(--s-5) var(--s-5);
  display:grid; justify-items:center; gap:var(--s-3); text-align:center;
  background:linear-gradient(to bottom,transparent,var(--bg) 46%,var(--bg));
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px)}
/* The grid gap spaces these; .dtc-paid p's own margins would double it. */
.lk-veil p{margin:0}
.lk-h{font-size:16px; font-weight:600; color:var(--text); text-wrap:balance}
.lk-note{font-size:12.5px; line-height:1.6; color:var(--text-muted); max-width:46ch}
.paid-price{font-size:15px; color:var(--text-secondary); margin-block:var(--s-5) var(--s-4)}
.paid-price b{font-size:26px; color:var(--text); font-weight:700}
.paid-alt{margin-top:var(--s-4); font-size:14px; color:var(--text-secondary)}
.sub-bar{position:fixed; inset-inline:0; bottom:0; z-index:40; display:flex; align-items:center;
  justify-content:space-between; gap:var(--s-4); height:56px; padding:0 var(--s-4);
  background:var(--surface); border-top:1px solid var(--border)}
.sub-bar span{font-size:14px; color:var(--text-secondary)} .sub-bar b{font-size:18px; color:var(--text)}
.sub-bar .btn{padding:8px 16px}
/* `hidden` is an attribute, not a style: without this the display above keeps
   the bar on screen whatever the script says. */
.sub-bar[hidden]{display:none}
@media (min-width:768px){.sub-bar{display:none}}
.paid-form{display:grid; gap:var(--s-3); max-width:360px}
.paid-form label{font-size:13.5px; color:var(--text-secondary)}
.paid-form input,.paid-form select{width:100%; padding:10px 12px; border:1px solid var(--border);
  border-radius:var(--r-md); background:var(--bg); color:var(--text); font:inherit}
.paid-form .btn{justify-self:start}
.paid-err{color:var(--danger,#E5484D); font-size:14px; margin:0}
.paid-bar{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3); font-size:13.5px; color:var(--text-muted)}
.paid-link{background:none; border:0; padding:0; font:inherit; color:var(--accent-text); cursor:pointer; text-decoration:underline}
.paid-ans h3{font-size:18px; margin-top:var(--s-5)}
.paid-ans h4{font-size:15px; margin-top:var(--s-5)}
.paid-ans p,.paid-ans li{white-space:pre-line}
.flow{margin-top:var(--s-5); padding:var(--s-5); border:1px solid var(--border); border-radius:var(--r-md); background:var(--bg)}
.flow-n{font-family:var(--font-mono); font-size:12.5px; color:var(--text-muted); margin:0}
.flow-q{font-weight:600; color:var(--text)}
.flow figure{margin:var(--s-4) 0 0} .flow img{max-width:100%; height:auto; border-radius:var(--r-md); background:#fff}
.flow figcaption{font-size:13px; color:var(--text-muted); margin-top:6px}
.flow-btns{display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-5)}