/* ============================================================
   AIProof — "Will AI take your job?"
   Design read: consumer viral tool, diagnostic-instrument language.
   Monochrome base; the ONLY color is the risk verdict itself
   (the --safe…--crit ramp, read by app.js for the gauge/stamp).
   Dials: VARIANCE 7 · MOTION 6 · DENSITY 3.
   Radius scale (locked): containers 10px, controls 8px.
   ============================================================ */
:root{
  --bg:#0b0b0d;          /* neutral near-black (not slate) */
  --bg-2:#111114;
  --surface:#141417;
  --surface-2:#191a1e;
  --line:#26262c;
  --line-2:#33343b;
  --ink:#f4f4f2;         /* warm off-white */
  --ink-soft:#a6a6a0;
  --ink-mute:#6d6d68;
  /* the one brand accent (teal) — matches the PDF + share cards */
  --accent:#2dd4bf;      /* bright: underline, brand, eyebrow, focus, hover */
  --accent-btn:#0d9488;  /* deeper: button fills (white text passes AA) */
  --accent-soft:rgba(45,212,191,.14);
  /* risk ramp — semantic data encoding, the page's only chroma */
  --safe:#3ad07f;
  --low:#8fd94a;
  --mid:#f2c43d;
  --high:#ff9142;
  --crit:#ff4d5e;
  --r:10px;
  --r-sm:8px;
  --maxw:660px;
}
/* ---- light theme: warm paper, deep teal ink — mirrors the report ---- */
:root[data-theme="light"]{
  --bg:#faf8f3;
  --bg-2:#f3f0e8;
  --surface:#ffffff;
  --surface-2:#f4f2ec;
  --line:#e7e3d8;
  --line-2:#d9d4c6;
  --ink:#12302e;
  --ink-soft:#4a5f5b;
  --ink-mute:#8a9a96;
  --accent:#0d9488;
  --accent-btn:#0f766e;
  --accent-soft:rgba(13,148,136,.10);
  --safe:#15803d;
  --low:#4d7c0f;
  --mid:#a16207;
  --high:#c2410c;
  --crit:#dc2626;
}
:root[data-theme="light"] .ask-ghost{-webkit-text-stroke-color:rgba(13,148,136,.28)}
:root[data-theme="light"] .pv-old{color:#dc2626}
:root[data-theme="light"] .pv-now{color:#16a34a}
:root[data-theme="light"] .peek-strip img{box-shadow:0 8px 18px -10px rgba(18,48,46,.3)}
:root[data-theme="light"] .ac{box-shadow:0 20px 44px -18px rgba(18,48,46,.25)}
:root[data-theme="light"] .tonight,:root[data-theme="light"] .read{color:#d7ebe6}
:root[data-theme="light"] .headline em::after{box-shadow:0 0 22px rgba(13,148,136,.35)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;min-height:100dvh;
  font-family:"Space Grotesk",system-ui,sans-serif;
  background:radial-gradient(720px 360px at 50% -10%, var(--accent-soft), transparent 70%), var(--bg);
  color:var(--ink);line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
/* faint film grain — fixed, non-interactive, cheap */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.mono,.eyebrow,.nav-meta,.for,.pct,.risknum,.fk,.fv,.plan-meta,.lock-txt,.chip,.sharetext,.foot{
  font-family:"JetBrains Mono",ui-monospace,monospace;
}

/* ---- nav (centered logo, circular side buttons) ---- */
.nav{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  height:60px;padding:0 clamp(1rem,4vw,2rem);border-bottom:1px solid var(--line);
  background:rgba(250,248,243,.78);
  -webkit-backdrop-filter:saturate(150%) blur(14px);backdrop-filter:saturate(150%) blur(14px);
}
[data-theme="dark"] .nav{background:rgba(11,11,13,.7)}
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);
  font-weight:800;font-size:1.2rem;letter-spacing:-.03em}
.brand-logo{width:30px;height:30px;border-radius:9px;display:block;
  box-shadow:0 6px 18px -6px rgba(45,212,191,.55)}
.brand-tag{font-family:"JetBrains Mono",monospace;font-weight:500;font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-mute);margin-left:.5rem;padding:.28rem .5rem;
  border:1px solid var(--line-2);border-radius:999px;line-height:1}
@media(max-width:560px){.brand-tag{display:none}}
/* right cluster: score link + a segmented toggle group */
.nav-links{display:flex;align-items:center;gap:.6rem}
.nav-score{font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.05em;font-weight:500;
  color:var(--ink-soft);text-decoration:none;padding:.42rem .8rem;border-radius:999px;
  border:1px solid transparent;transition:.15s;white-space:nowrap}
.nav-score:hover{color:var(--accent);border-color:var(--line-2);background:var(--surface)}
@media(max-width:400px){.nav-score{display:none}}
.nav-seg{display:inline-flex;align-items:center;gap:.12rem;padding:.2rem;
  border:1px solid var(--line-2);border-radius:999px;background:var(--surface)}
.seg-div{width:1px;height:16px;background:var(--line-2);margin:0 .1rem}
.lang-btn,.theme-btn{border:none;background:transparent;cursor:pointer;color:var(--ink-soft);transition:.15s}
.theme-btn{display:grid;place-items:center;width:30px;height:30px;border-radius:50%}
.theme-btn:hover,.lang-btn:hover{color:var(--accent);background:var(--bg-2)}
.theme-btn .th-moon{display:none}
:root[data-theme="light"] .theme-btn .th-sun{display:none}
:root[data-theme="light"] .theme-btn .th-moon{display:block}

.wrap{position:relative;z-index:1;width:min(720px,92vw);margin:0 auto;
  padding:clamp(2.2rem,7vw,4rem) 0 3rem}

/* ---- ask (editorial front page: left-aligned, magazine rules) ---- */
.ask{position:relative;text-align:left;display:flex;flex-direction:column;align-items:flex-start}
.ask-ghost{position:absolute;right:-.5rem;top:-1.2rem;z-index:0;pointer-events:none;
  font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(4.5rem,16vw,7rem);line-height:1;
  letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px rgba(45,212,191,.22)}
.announce{display:inline-flex;align-items:center;gap:.55rem;margin:0 0 1.6rem;position:relative;z-index:1;
  padding:.5rem 1.1rem;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);
  color:var(--ink-soft);font-size:.82rem;font-weight:500}
.announce span{font-size:1rem}
.headline{position:relative;z-index:1;
  font-size:clamp(3rem,11vw,5.2rem);font-weight:800;line-height:.95;letter-spacing:-.04em;margin:0 0 1.1rem;
}
.headline em{font-style:normal;position:relative;padding-bottom:.04em;color:var(--ink);font-weight:800}
.headline em::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:5px;background:var(--accent);
  box-shadow:0 0 22px rgba(45,212,191,.55)}
.lead{color:var(--ink-soft);font-size:clamp(1.02rem,2.2vw,1.18rem);max-width:52ch;margin:0 0 2rem}

.searchwrap{position:relative;width:min(560px,100%);margin:0}
.inputrow{display:flex;align-items:center;gap:.4rem;width:100%;margin:0 0 1.3rem;
  background:var(--surface);border:1px solid var(--line-2);border-radius:999px;
  padding:.45rem .45rem .45rem 1.4rem;transition:border-color .2s,box-shadow .2s}
.inputrow:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
#jobInput{flex:1;min-width:0;background:transparent;border:none;color:var(--ink);
  font-family:inherit;font-size:1.1rem;padding:.55rem .1rem}
#jobInput::placeholder{color:var(--ink-mute)}
#jobInput:focus{outline:none}
.go{flex:0 0 auto;display:inline-flex;align-items:center;gap:.4rem;
  background:var(--accent-btn);color:#fff;border:none;border-radius:999px;
  font-family:inherit;font-weight:700;font-size:1rem;padding:.7rem 1.4rem;cursor:pointer;
  box-shadow:0 10px 26px -10px rgba(45,212,191,.7);transition:transform .12s,background .2s}
/* icons inherit currentColor and stay optically centered */
svg{flex:0 0 auto}
.go:hover{background:var(--accent)}
.go:active{transform:scale(.97)}

/* one-line horizontal scroll strip: centers when it fits, swipes when it doesn't */
.chips{display:flex;flex-wrap:nowrap;gap:.5rem;max-width:100%;overflow-x:auto;
  padding:.2rem .2rem .55rem;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent)}
.chips::-webkit-scrollbar{display:none}
.chips .chip{flex:0 0 auto}
.chips .chip:first-child{margin-left:0}
.chips .chip:last-child{margin-right:0}
.chip{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;font-size:.78rem;color:var(--ink-soft);
  background:transparent;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:.4rem .8rem;transition:.15s}
.chip:hover{border-color:var(--accent);color:var(--accent)}

/* autocomplete */
.searchwrap{position:relative;max-width:520px}
.ac{list-style:none;margin:.4rem 0 0;padding:.3rem;position:absolute;left:0;right:0;top:100%;z-index:30;
  background:var(--surface);border:1px solid var(--line-2);border-radius:12px;
  box-shadow:0 20px 44px -18px rgba(0,0,0,.8);overflow:hidden}
.ac li{display:flex;align-items:center;gap:.7rem;padding:.6rem .7rem;border-radius:8px;cursor:pointer;
  color:var(--ink-soft);font-size:.98rem}
.ac li[aria-selected="true"],.ac li:hover{background:var(--surface-2);color:var(--ink)}
.ac .ac-ic{display:inline-flex;color:var(--accent)}
.ac .ac-t{text-transform:capitalize}
.ac .ac-b{margin-left:auto;font-family:"JetBrains Mono",monospace;font-size:.62rem;font-weight:700;
  letter-spacing:.06em;padding:.15rem .5rem;border-radius:999px;border:1px solid currentColor}
.ac .ac-b.tone-safe{color:var(--safe)} .ac .ac-b.tone-low{color:var(--low)} .ac .ac-b.tone-mid{color:var(--mid)}
.ac .ac-b.tone-high{color:var(--high)} .ac .ac-b.tone-crit{color:var(--crit)}

/* not found */
.notfound{position:relative;z-index:1;margin-top:2.5rem;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:1.4rem 1.5rem}
.nf-msg{margin:0 0 1rem;color:var(--ink-soft);font-size:1rem}
.nf-msg b{color:var(--ink)}
.nf-chips{display:flex;flex-wrap:wrap;gap:.5rem}

/* ---- result ---- */
.result{margin-top:3rem}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.3rem,4vw,2rem)}
.card-head{display:flex;flex-direction:column;gap:.35rem;padding-bottom:1.3rem;
  border-bottom:1px solid var(--line);margin-bottom:1.5rem}
.for{color:var(--accent);font-weight:600;text-transform:uppercase;letter-spacing:.2em;font-size:.7rem}
.job{font-size:1.7rem;font-weight:700;letter-spacing:-.02em;text-transform:capitalize;line-height:1.1}

.reading{display:grid;grid-template-columns:180px 1fr;gap:clamp(1.2rem,4vw,2rem);align-items:center}
@media(max-width:560px){.reading{grid-template-columns:1fr;justify-items:start}}

.gauge-wrap{position:relative;width:180px;height:180px;flex:0 0 auto}
.gauge{width:180px;height:180px}
.track{fill:none;stroke:var(--surface-2);stroke-width:12}
.ring{fill:none;stroke:var(--ink);stroke-width:12;stroke-linecap:round;transition:stroke .3s}
.gauge-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem}
.risknum{font-size:3.1rem;font-weight:700;line-height:1}
.pct{font-size:.62rem;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.14em}

.reading-body{min-width:0}
.band{display:inline-block;border:1.5px solid var(--ink);color:var(--ink);
  text-transform:uppercase;letter-spacing:.14em;font-weight:700;font-size:.82rem;
  padding:.32rem .8rem;border-radius:var(--r-sm);transform:rotate(-1.5deg);margin-bottom:.9rem}
.tone-safe{color:var(--safe);border-color:var(--safe)}
.tone-low{color:var(--low);border-color:var(--low)}
.tone-mid{color:var(--mid);border-color:var(--mid)}
.tone-high{color:var(--high);border-color:var(--high)}
.tone-crit{color:var(--crit);border-color:var(--crit)}
.tag{font-size:1.15rem;font-weight:600;margin:0 0 .6rem;line-height:1.3}
.vline{color:var(--ink-soft);font-size:.98rem;margin:0 0 1.2rem;max-width:52ch}

/* stacked: doomsday row on top, tools row beneath */
.facts{display:grid;grid-template-columns:1fr;gap:1rem;margin:0}
.fact{border-top:1px solid var(--line);padding-top:.6rem}
/* tools value: a grid of dark cards, each a brand logo above its name */
.fv#alias{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;
  font-size:1rem;font-weight:400;margin-top:.55rem}
.fv#alias .tchip{flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  width:100%;margin:0;padding:.9rem .45rem;border-radius:12px;text-align:center;white-space:normal;
  background:var(--bg-2);color:var(--ink);border:1px solid var(--line);font-size:.74rem;font-weight:600}
.fv#alias .tchip-lg{width:28px;height:28px;background:transparent;border-radius:0}
.fv#alias .tchip-nm{line-height:1.2;word-break:break-word}
/* favicon layered over its monogram fallback (img removed on load error) */
.tchip-favwrap{position:relative}
.tchip-fav{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:6px}
@media(max-width:420px){.fv#alias{grid-template-columns:repeat(2,1fr)}}
.fk{display:inline-flex;align-items:center;gap:.4rem;color:var(--ink-mute);font-size:.64rem;text-transform:uppercase;letter-spacing:.08em}
.fv{margin:.25rem 0 0;font-size:1.15rem;font-weight:700;color:var(--ink)}

/* ---- plan (the paid product) ---- */
.plan{margin-top:1.6rem;border:1px solid var(--line);border-radius:var(--r);
  padding:1.3rem 1.4rem;background:var(--bg-2)}
.plan-top{margin-bottom:1rem}
.plan-title{font-weight:700;font-size:1.05rem;letter-spacing:-.01em}
.plan-meta{display:flex;flex-direction:column;gap:.3rem;margin-top:.6rem;font-size:.74rem;color:var(--ink-mute)}
.plan-meta span{display:inline-flex;align-items:center;gap:.45rem}
.plan-meta b{color:var(--ink-soft);font-weight:500}
.plan-steps{margin:0;padding-left:1.4rem;display:flex;flex-direction:column;gap:.7rem;counter-reset:s}
.plan-steps li{color:var(--ink-soft);font-size:.96rem;line-height:1.5}
.plan-steps li.free::marker{color:var(--ink);font-weight:700}
.plan-steps li.locked{position:relative}
.plan-steps li.locked span{filter:blur(5px);opacity:.7;user-select:none}
.plan-lock{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:1.2rem;padding-top:1.1rem;border-top:1px dashed var(--line-2)}
.lock-txt{display:inline-flex;align-items:center;gap:.45rem;color:var(--ink-soft);font-size:.76rem}
.lock-txt b{color:var(--ink)}
.ver-pick{display:inline-flex;align-items:center;gap:.5rem;color:var(--ink-soft);font-size:.76rem;margin-left:auto}
.ver-pick>span{white-space:nowrap}
#versionSelect{font:inherit;font-size:.82rem;color:var(--ink);background:var(--surface,#fff);
  border:1px solid var(--line-2);border-radius:var(--r-sm);padding:.5rem .6rem;max-width:14rem;cursor:pointer}
#versionSelect:focus{outline:2px solid var(--accent);outline-offset:1px}
@media(max-width:520px){.ver-pick{width:100%;margin-left:0;justify-content:space-between}#versionSelect{flex:1}}
.escape{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;font-weight:700;font-size:.92rem;
  padding:.7rem 1.3rem;border-radius:var(--r-sm);white-space:nowrap;color:#fff;background:var(--accent-btn);
  box-shadow:0 10px 26px -10px rgba(45,212,191,.7);transition:transform .12s,background .2s}
.escape:hover{background:var(--accent)}
.escape:active{transform:scale(.97)}
.escape.soon{background:var(--line-2);color:var(--ink-mute);cursor:not-allowed;box-shadow:none;pointer-events:none}
.plan-value{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;
  margin-top:1.1rem;padding:.7rem 1rem;border:1px dashed var(--accent);border-radius:var(--r-sm);
  background:var(--accent-soft);color:var(--ink-soft);font-size:.82rem;line-height:1.35}
.pv-star{vertical-align:-3px;margin-right:.45rem;filter:drop-shadow(0 0 6px rgba(251,191,36,.55))}
.pv-price{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.pv-tag{align-self:center;font-size:.6rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  white-space:nowrap;padding:.22rem .55rem;border-radius:999px;background:#fbbf24;color:#2a1f00}
.pv-old{color:#f87171;text-decoration:line-through;text-decoration-thickness:2px;font-size:1rem;font-weight:600}
.pv-now{color:#4ade80;font-size:1.5rem;font-weight:800;letter-spacing:-.02em}
/* look inside: fanned real pages from the report */
.plan-peek{margin-top:1.2rem;padding:1.1rem 1.2rem 1.2rem;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface-2)}
.peek-k{display:block;font-family:"JetBrains Mono",monospace;font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:.9rem}
.peek-strip{display:flex;justify-content:center;align-items:flex-end;gap:.6rem;margin-bottom:1rem}
.peek-strip img{width:31%;max-width:150px;border-radius:6px;border:1px solid var(--line-2);
  box-shadow:0 10px 24px -10px rgba(0,0,0,.7);transform:rotate(-2deg)}
.peek-strip img.pk-mid{width:36%;max-width:170px;transform:none;z-index:1;border-color:var(--accent)}
.peek-strip img:last-child{transform:rotate(2deg)}
.peek-list{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.peek-list li{color:var(--ink-soft);font-size:.82rem;padding-left:1.1rem;position:relative}
.peek-list li::before{content:"";position:absolute;left:.15rem;top:.42em;width:.45rem;height:.45rem;border-radius:50%;background:var(--accent)}
.peek-list b{color:var(--ink)}
.trust{margin:.7rem 0 0;text-align:center;color:var(--ink-mute);font-size:.72rem;letter-spacing:.02em}
/* branded tool chips (tools already doing it) */
.tchip{display:inline-flex;align-items:center;gap:.38rem;margin:.15rem .45rem .15rem 0;
  padding:.24rem .6rem .24rem .28rem;border:1px solid var(--line-2);border-radius:999px;
  background:var(--surface-2);font-size:.78rem;color:var(--ink);font-weight:600;white-space:nowrap}
.tchip-lg{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;flex:0 0 auto}
/* compare row: prompt the next search */
.compare{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:1rem;
  padding:.8rem 1.1rem;border:1px dashed var(--line-2);border-radius:var(--r-sm)}
.cmp-k{font-family:"JetBrains Mono",monospace;font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute)}
.cmp-chips{display:flex;gap:.5rem;flex-wrap:wrap}
.cmp-c{display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;font-family:inherit;font-size:.8rem;color:var(--ink-soft);
  background:transparent;border:1px solid var(--line-2);border-radius:999px;padding:.35rem .75rem;transition:.15s;text-transform:capitalize}
.cmp-c:hover{border-color:var(--accent);color:var(--ink)}
.cmp-c b,.chip-r{font-family:"JetBrains Mono",monospace;font-size:.68rem;font-weight:700}
.chip-r{margin-left:.1rem}
.plan-safe{margin-top:1.2rem;padding:1rem 1.2rem;border:1px solid var(--line-2);border-left:3px solid var(--safe,#22c55e);
  border-radius:var(--r-sm);background:var(--accent-soft,rgba(34,197,94,.06));color:var(--ink-soft);font-size:.92rem;line-height:1.5}
.plan-safe b{color:var(--ink)}

/* ---- free email gate (unlock the full plan for an email) ---- */
.plan-gate{margin-top:1.2rem;padding:1.2rem 1.3rem;border:1px solid var(--accent);
  border-radius:var(--r);background:var(--accent-soft)}
.gate-lock{display:inline-flex;align-items:center;gap:.4rem;font-family:"JetBrains Mono",monospace;
  font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute)}
.gate-pitch{font-size:1.12rem;font-weight:700;color:var(--ink);margin:.55rem 0 .9rem;line-height:1.3}
.gate-form{display:flex;gap:.5rem}
#emailInput{flex:1;min-width:0;font:inherit;font-size:1rem;padding:.72rem .95rem;color:var(--ink);
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);transition:.15s}
#emailInput::placeholder{color:var(--ink-mute)}
#emailInput:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.gate-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;
  background:var(--accent-btn);color:#fff;border:none;border-radius:var(--r-sm);
  font:inherit;font-weight:700;font-size:.98rem;padding:.72rem 1.25rem;
  box-shadow:0 10px 26px -12px rgba(45,212,191,.7);transition:transform .12s,background .2s}
.gate-btn:hover{background:var(--accent)}
.gate-btn:active{transform:scale(.97)}
.gate-btn:disabled{opacity:.6;cursor:default}
.gate-fine{margin:.7rem 0 0;font-family:"JetBrains Mono",monospace;font-size:.68rem;
  letter-spacing:.03em;color:var(--ink-mute)}
.plan-done{margin-top:1.2rem;padding:1.1rem 1.3rem;border:1px solid var(--accent);
  border-left:3px solid var(--accent);border-radius:var(--r-sm);background:var(--accent-soft)}
.plan-done b{display:block;color:var(--ink);font-size:1.02rem;margin-bottom:.25rem}
.plan-done span{color:var(--ink-soft);font-size:.92rem;line-height:1.5}
.dl-btn{display:inline-flex;align-items:center;gap:.45rem;margin-top:.9rem;cursor:pointer;
  background:var(--accent-btn);color:#fff;text-decoration:none;border-radius:var(--r-sm);
  font-weight:700;font-size:.95rem;padding:.65rem 1.2rem;
  box-shadow:0 10px 26px -12px rgba(45,212,191,.7);transition:transform .12s,background .2s}
.dl-btn:hover{background:var(--accent)}
.dl-btn:active{transform:scale(.97)}
[dir="rtl"] .dl-btn{flex-direction:row-reverse}
@media(max-width:440px){.gate-form{flex-direction:column}.gate-btn{justify-content:center}}

/* ---- share ---- */
.share{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:1.6rem}
.sbtn{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  width:44px;height:44px;padding:0;border-radius:var(--r-sm);border:1px solid var(--line-2);
  background:transparent;color:var(--ink);transition:.15s}
.sbtn:hover{border-color:var(--accent);color:var(--accent)}
.sbtn:active{transform:scale(.94)}
.sbtn.tw{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.sbtn.tw:hover{background:#000;color:#fff;border-color:#000}
.sbtn.li{background:#0a66c2;color:#fff;border-color:#0a66c2}
.sbtn.li:hover{background:#004182;color:#fff;border-color:#004182}
.sbtn.ok{border-color:var(--accent);color:var(--accent)}
.sharetext{width:100%;height:64px;resize:none;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--bg);color:var(--ink-soft);padding:.7rem .9rem;font-size:.78rem;margin-top:.9rem;line-height:1.5}
.again{display:inline-flex;align-items:center;gap:.45rem;margin-top:1.2rem;background:none;border:none;
  color:var(--ink-mute);cursor:pointer;font-family:inherit;font-size:.92rem;padding:.3rem 0}
.again:hover{color:var(--ink)}
.disclaimer{color:var(--ink-mute);font-size:.72rem;margin:1.2rem 0 0;max-width:56ch}
.disclaimer strong{color:var(--ink-soft)}
.disclaimer a{color:var(--accent);text-decoration:none;white-space:nowrap}
.disclaimer a:hover{text-decoration:underline}

.foot{position:relative;z-index:1;color:var(--ink-mute);font-size:.74rem;
  text-align:center;padding:2.5rem 1rem;border-top:1px solid var(--line)}
.foot b{color:var(--ink-soft);font-weight:700}
.foot-links{display:flex;gap:1.1rem;justify-content:center;flex-wrap:wrap;margin-top:.7rem}
.foot-links a{color:var(--ink-mute);text-decoration:none}
.foot-links a:hover{color:var(--accent)}

/* ---- cookie consent bar ---- */
.cookie-bar{position:fixed;left:50%;bottom:1rem;transform:translateX(-50%);z-index:100;
  width:min(680px,94vw);display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);
  padding:.85rem 1.1rem;box-shadow:0 24px 60px -22px rgba(0,0,0,.85);
  color:var(--ink-soft);font-size:.85rem;line-height:1.4}
.cookie-bar a{color:var(--accent);text-decoration:none}
.cookie-txt{flex:1;min-width:200px}
.cookie-btns{display:flex;gap:.5rem;flex-shrink:0}
.ck-btn{font:inherit;font-size:.82rem;font-weight:700;padding:.5rem 1.1rem;border-radius:999px;cursor:pointer;
  border:1px solid var(--line-2);background:transparent;color:var(--ink-soft);transition:.15s}
.ck-decline:hover{border-color:var(--ink-soft);color:var(--ink)}
.ck-accept{background:var(--accent-btn);border-color:var(--accent-btn);color:#fff}
.ck-accept:hover{background:var(--accent)}

::selection{background:var(--accent);color:#fff}

/* ---- language toggle label (sits inside .nav-seg; base styles above) ---- */
.lang-btn{font-family:"JetBrains Mono",monospace;font-size:.72rem;font-weight:600;letter-spacing:.04em;
  padding:.32rem .62rem;border-radius:999px}

/* ============================================================
   RTL / Arabic — mirror layout + swap to an Arabic type family.
   Triggered by data-lang="ar" (set pre-paint + by i18n.js).
   ============================================================ */
[data-lang="ar"] body{font-family:"Tajawal","Space Grotesk",system-ui,sans-serif}
/* Arabic has no monospace face — route the "mono" UI bits to Tajawal too,
   but keep prices/numerals crisp */
[data-lang="ar"] .mono,[data-lang="ar"] .eyebrow,[data-lang="ar"] .nav-meta,
[data-lang="ar"] .for,[data-lang="ar"] .pct,[data-lang="ar"] .fk,[data-lang="ar"] .fv,
[data-lang="ar"] .plan-meta,[data-lang="ar"] .lock-txt,[data-lang="ar"] .chip,
[data-lang="ar"] .foot,[data-lang="ar"] .brand-tag,[data-lang="ar"] .nav-links a,
[data-lang="ar"] .lang-btn,[data-lang="ar"] .cookie-bar,[data-lang="ar"] .sharetext{font-family:"Tajawal","JetBrains Mono",monospace}
/* Arabic is cursive — letter-spacing breaks the joins between letters, so
   force it off everywhere (it's only ever set for the Latin display type) */
[data-lang="ar"] *{letter-spacing:normal !important}
/* the headline reads better a touch tighter in Arabic */
[data-lang="ar"] .headline{line-height:1.12;letter-spacing:0}
[data-lang="ar"] .headline em{padding-bottom:.06em}
/* ghost numeral sits on the left when the page flows right-to-left */
[dir="rtl"] .ask-ghost{right:auto;left:-.5rem}
/* align the editorial column to the right edge. NB: in a flex column the cross
   axis follows direction, so flex-start (not flex-end) is the right side in RTL */
[dir="rtl"] .ask{text-align:right;align-items:flex-start}
[dir="rtl"] .lead,[dir="rtl"] .announce{text-align:right}
/* the horizontal chip strip fades on the opposite edge in RTL */
[dir="rtl"] .chips{
  -webkit-mask-image:linear-gradient(to left,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(to left,transparent,#000 6%,#000 94%,transparent)}
/* checkbox-style facts/labels: keep icon-then-text order visually correct */
[dir="rtl"] .fk,[dir="rtl"] .lock-txt,[dir="rtl"] .gate-lock,[dir="rtl"] .plan-meta span,
[dir="rtl"] .share .sbtn,[dir="rtl"] .go,[dir="rtl"] .again,[dir="rtl"] .escape,[dir="rtl"] .gate-btn{flex-direction:row-reverse}
[dir="rtl"] .plan-done{border-left:1px solid var(--accent);border-right:3px solid var(--accent)}
/* physical left/right properties that must flip for RTL */
[dir="rtl"] .brand-tag{margin-left:0;margin-right:.35rem}
[dir="rtl"] .peek-list li{padding-left:0;padding-right:1.1rem}
[dir="rtl"] .peek-list li::before{left:auto;right:.15rem}
[dir="rtl"] .plan-steps{padding-left:0;padding-right:1.4rem}
[dir="rtl"] .plan-safe{border-left:1px solid var(--line-2);border-right:3px solid var(--safe,#22c55e)}
[dir="rtl"] .pv-star{margin-right:0;margin-left:.45rem}
[dir="rtl"] .chip-r{margin-left:0;margin-right:.1rem}
[dir="rtl"] .ver-pick{margin-left:0;margin-right:auto}
[dir="rtl"] .doc,[dir="rtl"] .doc h1,[dir="rtl"] .doc h2,[dir="rtl"] .doc p,[dir="rtl"] .doc li{text-align:right}
[dir="rtl"] .doc ul{padding-left:0;padding-right:1.1rem}
[dir="rtl"] .callout{border-left:0;border-right:3px solid var(--accent);border-radius:var(--r-sm) 0 0 var(--r-sm)}
[dir="rtl"] .back{flex-direction:row-reverse}

/* ---- reduced motion (mandatory) ---- */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important;scroll-behavior:auto}
}