/* Electric Grape tokens, copied from psychoai/src/theme/theme.ts (light + dark). */
:root {
  --bg: #F6F4FC; --card: #FFFFFF; --card-alt: #F1EEFA; --subtle: #E6E1F5; --border: #DDD7EF;
  --primary: #7C3AED; --primary-soft: #6D28D9; --on-primary: #FFFFFF; --primary-tint: #EDE7FE;
  --xp: #8F5904; --xp-tint: #FEF6D8; --data: #0C6A84; --data-tint: #E0F5FA;
  --success: #04714F; --success-tint: #E3F7EE;
  --text: #1A1830; --text-2: #5B5876;
  --muted: #F3F1F8; --muted-border: #E0DDEB;
  /* decorative only (never text): the yellow -> mint accent */
  --accent: linear-gradient(to left, #FDE047, #34D399);
  --r-card: 14px; --r-hero: 18px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0A0A12; --card: #16162A; --card-alt: #1D1D33; --subtle: #222240; --border: #2E2E52;
    --primary: #8B5CF6; --primary-soft: #A78BFA; --on-primary: #F5F0FF; --primary-tint: #1D1638;
    --xp: #FDE047; --xp-tint: #2E2A10; --data: #22D3EE; --data-tint: #0E2E33;
    --success: #34D399; --success-tint: #0E2E24;
    --text: #F0EEFA; --text-2: #8D8AB0;
    --muted: #191826; --muted-border: #33324E;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--text);
  /* Heebo 500 is the emphasis weight; never 700 (breaks Hebrew shaping in the app) */
  font: 400 17px/1.65 Heebo, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
h1, h2, h3, strong, b, summary { font-weight: 500; }
h1 { font-size: clamp(30px, 7vw, 48px); line-height: 1.2; margin: 0 0 16px; letter-spacing: -.01em; }
h2 { font-size: clamp(24px, 5vw, 32px); line-height: 1.3; margin: 0 0 12px; }
h3 { font-size: 19px; margin: 0 0 6px; }
p { margin: 0 0 12px; }
a { color: var(--primary-soft); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 6px; }
img, svg { max-width: 100%; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 760px; }
.skip { position: absolute; inset-inline-start: 8px; top: -60px; background: var(--card); padding: 8px 14px; border-radius: 10px; z-index: 10; }
.skip:focus { top: 8px; }
.muted { color: var(--text-2); }
.small { font-size: 14px; }

/* header */
.site-header { border-bottom: 1px solid var(--border); background: var(--bg); position: sticky; top: 0; z-index: 5; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-size: 24px; font-weight: 500; }
.brand img { width: 36px; height: 36px; border-radius: 9px; }
.nav { display: flex; gap: 20px; }
.nav a { color: var(--text-2); text-decoration: none; font-size: 15px; padding: 8px 0; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); }
@media (max-width: 560px) { .nav .wide { display: none; } }

/* buttons: exactly one .btn-primary per page */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px;
  border-radius: 999px; font: inherit; font-weight: 500; text-decoration: none; border: 1.5px solid transparent; }
/* light-palette violet in both themes: dark primary #8B5CF6 is only 3.8:1 under text */
.btn-primary { background: #7C3AED; color: #FFFFFF; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { border-color: var(--border); color: var(--text); background: var(--card); }
.btn-ghost:hover { border-color: var(--primary-soft); }
.badges { display: flex; flex-wrap: wrap; gap: 10px; }
.badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--card); color: var(--text-2); font-size: 14px; }
.badge b { color: var(--text); }
.badge svg { width: 18px; height: 18px; flex: none; }

/* sections */
section { padding: 56px 0; }
.eyebrow { display: inline-block; font-size: 14px; font-weight: 500; color: var(--success); background: var(--success-tint);
  padding: 4px 12px; border-radius: 999px; margin-bottom: 14px; }
.accent-bar { display: block; width: 56px; height: 5px; border-radius: 99px; background: var(--accent); margin-bottom: 14px; }
.lead { font-size: 19px; color: var(--text-2); max-width: 36em; }

.hero { padding: 48px 0 40px; }
.hero .wrap { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .hero .wrap { grid-template-columns: 1.15fr .85fr; } }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 24px 0 14px; }
.fineprint { font-size: 13px; color: var(--text-2); max-width: 40em; }

/* progress bars (shared by mocks) */
.row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 14px; }
.bar { height: 8px; border-radius: 99px; background: var(--subtle); overflow: hidden; margin: 6px 0 2px; }
.bar i { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
.bar .w35 { width: 35%; } .bar .w60 { width: 60%; }

.honest { background: var(--muted); border: 1px solid var(--muted-border); border-radius: var(--r-hero); padding: 26px; }
.honest ul { margin: 0; padding-inline-start: 20px; }
.honest li { margin-bottom: 8px; }
.beta { text-align: center; }
.beta .badges, .beta .cta-row { justify-content: center; }

/* FAQ (native details/summary) */
.faq details { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); margin-bottom: 10px; }
.faq summary { cursor: pointer; padding: 16px 20px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--primary-soft); font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 20px 16px; color: var(--text-2); }
.faq details > div p:last-child { margin: 0; }

/* document pages (legal, delete, support) */
.doc { padding: 40px 0 64px; }
.doc h2 { font-size: 22px; margin-top: 32px; scroll-margin-top: 80px; }
.doc .meta { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--text-2);
  background: var(--muted); border: 1px solid var(--muted-border); border-radius: 12px; padding: 12px 16px; margin: 16px 0 24px; }
.doc .toc { columns: 2 220px; font-size: 15px; padding-inline-start: 20px; }
.doc ol.steps li, .doc ul li { margin-bottom: 8px; }
.note { background: var(--xp-tint); border-radius: 12px; padding: 14px 16px; color: var(--text); }
.mail { font-weight: 500; direction: ltr; unicode-bidi: isolate; }
code { background: var(--card-alt); padding: 2px 6px; border-radius: 6px; font-size: .92em; }

/* footer */
.site-footer { border-top: 1px solid var(--border); padding: 32px 0 40px; font-size: 14px; color: var(--text-2); }
.site-footer .wrap { display: grid; gap: 16px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.site-footer nav a { color: var(--text); text-decoration: none; }
.site-footer nav a:hover { text-decoration: underline; }
.site-footer p { margin: 0; }
.beta .accent-bar, .beta .lead { margin-inline: auto; }

/* ── differentiator rows ─────────────────────────────────────────── */
.feature { display: grid; gap: 28px; align-items: center; padding: 36px 0; border-top: 1px solid var(--border); }
.feature:first-of-type { border-top: 0; }
@media (min-width: 900px) {
  .feature { grid-template-columns: 1fr 1fr; gap: 56px; }
  .feature:nth-of-type(even) .feature-text { order: 2; }
}
.feature-num { font-size: 14px; font-weight: 500; color: var(--success); }
.feature h3 { font-size: clamp(22px, 4.5vw, 28px); line-height: 1.3; margin: 4px 0 10px; }
.feature p { color: var(--text-2); }
.feature .tag { display: inline-block; font-size: 13px; color: var(--data); background: var(--data-tint); border-radius: 99px; padding: 2px 10px; margin: 0 0 8px 6px; }
.disclaimer { font-size: 13px; color: var(--text-2); background: var(--muted); border: 1px solid var(--muted-border); border-radius: 10px; padding: 8px 12px; }

/* app-style mocks: decorative, aria-hidden, never violet-filled */
.app { background: var(--card); border: 1px solid var(--border); border-radius: 24px; padding: 16px; max-width: 380px; width: 100%;
  margin-inline: auto; box-shadow: 0 20px 50px -28px rgba(76, 29, 149, .35); font-size: 14px; }
.app-h { display: flex; justify-content: space-between; align-items: center; color: var(--text-2); margin-bottom: 10px; }
.app-t { font-weight: 500; color: var(--text); font-size: 16px; }
.pill { font-size: 12px; font-weight: 500; padding: 2px 10px; border-radius: 99px; background: var(--xp-tint); color: var(--xp); }
.pill.data { background: var(--data-tint); color: var(--data); }
.pill.ok { background: var(--success-tint); color: var(--success); }
.ltr { direction: ltr; unicode-bidi: isolate; }
.panel { background: var(--card-alt); border-radius: var(--r-card); padding: 12px; margin-top: 10px; }

.vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; text-align: center; gap: 8px; }
.player .av { font-size: 30px; line-height: 1.2; }
.player .nm { color: var(--text-2); font-size: 13px; }
.player .sc { font-size: 34px; font-weight: 500; line-height: 1.1; }
.player.me .sc { color: var(--success); }
.player.opp .sc { color: var(--data); }
.clock { font-size: 13px; color: var(--xp); background: var(--xp-tint); border-radius: 99px; padding: 4px 10px; font-weight: 500; }
.tug { display: flex; height: 10px; border-radius: 99px; overflow: hidden; margin-top: 12px; background: var(--subtle); }
.tug .a { background: var(--success); width: 58%; }
.tug .b { background: var(--data); width: 42%; }
.tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.tabs span { flex: 1; text-align: center; padding: 6px; border-radius: 10px; color: var(--text-2); font-size: 13px; }
.tabs .on { background: var(--card); color: var(--text); font-weight: 500; }
.lb { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.lb .rk { width: 20px; color: var(--text-2); }
.lb .xpv { margin-inline-start: auto; color: var(--text-2); }
.lb.me { color: var(--success); font-weight: 500; }
.wa { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; padding: 9px; border-radius: 12px;
  border: 1px solid var(--border); color: var(--text); font-weight: 500; }
.wa svg { width: 18px; height: 18px; color: var(--success); }

.dims .row { margin-top: 6px; }
.dims .bar { margin-bottom: 4px; }
.bar .w5 { width: 55%; } .bar .w6 { width: 66%; } .bar .w7 { width: 77%; } .bar .w4 { width: 44%; }
.big { font-size: 30px; font-weight: 500; color: var(--data); line-height: 1.1; }
.fb { margin: 8px 0 0; padding: 0; list-style: none; counter-reset: fb; }
.fb li { counter-increment: fb; display: flex; gap: 8px; margin-bottom: 6px; }
.fb li::before { content: counter(fb); flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 500; background: var(--xp-tint); color: var(--xp); }

.opt { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; margin-top: 6px; }
.opt.picked { background: var(--xp-tint); border-color: transparent; }
.opt.right { background: var(--success-tint); border-color: transparent; color: var(--success); }
.why-btn { margin-top: 10px; padding: 8px 12px; border-radius: 12px; background: var(--primary-tint); color: var(--primary-soft); font-weight: 500; text-align: center; }

.task { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.task:last-child { border-bottom: 0; }
.task .ck { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); flex: none; }
.task .ck.done { background: var(--success); border-color: var(--success); }
.task .xpv { margin-inline-start: auto; }

.calc-q { font-size: 30px; font-weight: 500; text-align: center; margin: 14px 0; }
.chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chips span { text-align: center; padding: 10px; border-radius: 12px; background: var(--card-alt); font-weight: 500; }
.chips .hit { background: var(--success-tint); color: var(--success); }

.lvl { display: flex; align-items: center; gap: 12px; }
.lvl .badge-n { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 22px; font-weight: 500;
  background: var(--success-tint); color: var(--success); flex: none; }
.streak { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 8px; text-align: center; font-size: 12px; color: var(--text-2); }
.streak i { display: block; height: 26px; border-radius: 8px; background: var(--subtle); margin-bottom: 4px; }
.streak .on i { background: var(--accent); }

/* ── free vs premium ─────────────────────────────────────────────── */
.compare { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-card); overflow: hidden; font-size: 15px; }
.compare th, .compare td { padding: 12px 14px; text-align: start; border-bottom: 1px solid var(--border); vertical-align: top; }
.compare tr:last-child td { border-bottom: 0; }
.compare thead th { background: var(--card-alt); font-weight: 500; }
.compare td:not(:first-child), .compare thead th:not(:first-child) { text-align: center; width: 26%; }
.compare .yes { color: var(--success); font-weight: 500; }
.compare .no { color: var(--text-2); }
.also { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.also li { background: var(--card); border: 1px solid var(--border); border-radius: 99px; padding: 6px 14px; font-size: 15px; }
.grow { flex: 1; }
.nw { white-space: nowrap; }
@media (max-width: 560px) { .compare { font-size: 14px; } .compare th, .compare td { padding: 10px 8px; } .compare td:not(:first-child), .compare thead th:not(:first-child) { width: 24%; } }

/* ══ motion layer ═══════════════════════════════════════════════════════════
   Static first: everything below renders in its FINAL state with no JS and with
   reduced motion. Animation lives only under (prefers-reduced-motion: no-preference)
   and only touches transform/opacity, so nothing shifts layout. */
.bg-shapes { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.bg-shapes i { position: absolute; border-radius: 50%; opacity: .5; will-change: transform; }
.bg-shapes i:nth-child(1) { width: 520px; height: 520px; top: -160px; right: -180px; background: radial-gradient(closest-side, rgba(139, 92, 246, .28), transparent); }
.bg-shapes i:nth-child(2) { width: 420px; height: 420px; top: 55%; left: -160px; background: radial-gradient(closest-side, rgba(52, 211, 153, .18), transparent); }
.bg-shapes i:nth-child(3) { width: 360px; height: 360px; top: 120%; right: 10%; background: radial-gradient(closest-side, rgba(253, 224, 71, .16), transparent); }

.stage { position: relative; max-width: 380px; width: 100%; margin-inline: auto; }
.stage::before { content: ""; position: absolute; inset: -14% -18%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side at 60% 40%, rgba(139, 92, 246, .45), transparent 70%),
              radial-gradient(closest-side at 35% 70%, rgba(52, 211, 153, .28), transparent 70%),
              radial-gradient(closest-side at 70% 80%, rgba(253, 224, 71, .22), transparent 70%); }
.timebar { height: 4px; border-radius: 99px; background: var(--subtle); overflow: hidden; margin: -4px 0 10px; }
.timebar i { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: right center; transform: scaleX(.57); }
.sc { font-variant-numeric: tabular-nums; }
.clock { font-variant-numeric: tabular-nums; }
.player { position: relative; }
.confetti { position: absolute; top: 50%; left: 50%; width: 0; height: 0; }
.confetti b { position: absolute; width: 7px; height: 7px; border-radius: 2px; opacity: 0; }

.transcribe .layers { display: grid; margin-top: 6px; }
.transcribe .layers > * { grid-area: 1 / 1; }
.transcribe .hand { width: 100%; height: 66px; opacity: 0; }
.transcribe .hand path { fill: none; stroke: var(--text-2); stroke-width: 2.2; stroke-linecap: round; }
.transcribe .typed span { display: block; line-height: 22px; }

/* hover micro-interactions (cheap, transform-only) */
.btn, .badge, .also li, .app, .faq details { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(124, 58, 237, .6); }
  .btn:active { transform: translateY(0) scale(.98); }
  .also li:hover, .badge:hover { transform: translateY(-2px); border-color: var(--primary-soft); }
  .feature .app:hover { transform: translateY(-4px); }
  .faq details:hover { border-color: var(--primary-soft); }
}
.faq details > div { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  /* hero headline: word by word */
  .words .w { display: inline-block; animation: word-in .6s cubic-bezier(.2, .7, .2, 1) both; }
  .words .w:nth-child(1) { animation-delay: .05s; } .words .w:nth-child(2) { animation-delay: .13s; }
  .words .w:nth-child(3) { animation-delay: .21s; } .words .w:nth-child(4) { animation-delay: .29s; }
  .words .w:nth-child(5) { animation-delay: .37s; }
  @keyframes word-in { from { opacity: 0; transform: translateY(.45em); } }

  /* glow + float + scroll tilt (JS sets --tilt) */
  .stage::before { animation: glow 9s ease-in-out infinite alternate; }
  @keyframes glow { to { transform: rotate(24deg) scale(1.08); } }
  .stage { animation: float 6s ease-in-out infinite; }
  @keyframes float { 50% { transform: translateY(-10px); } }
  .tilt { transform: perspective(900px) rotateX(calc(var(--tilt, 0) * 8deg)) rotateY(calc(var(--tilt, 0) * -6deg)); }

  /* scroll reveals: JS adds .rv (hidden) then .in. RTL: text slides in from the right */
  .js .rv { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
  .js .rv.from-side { transform: translateX(36px); }
  .js .rv.in { opacity: 1; transform: none; }

  /* bars fill, chips pop, streak lights up — when their mock is revealed */
  .js .rv .bar i { transform: scaleX(0); transform-origin: right center; transition: transform 1s cubic-bezier(.2, .7, .2, 1) .25s; }
  .js .rv.in .bar i { transform: none; }
  .js .rv .fb li, .js .rv .task, .js .rv .lb, .js .rv .chips span { opacity: 0; transform: scale(.92) translateX(12px); transition: opacity .4s ease, transform .4s cubic-bezier(.3, 1.4, .5, 1); }
  .js .rv.in .fb li, .js .rv.in .task, .js .rv.in .lb, .js .rv.in .chips span { opacity: 1; transform: none; }
  .js .rv .streak span i { transform: scaleY(.3); transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }
  .js .rv.in .streak span i { transform: none; }

  /* essay: handwriting strokes draw, then dissolve into typed text */
  .js .transcribe .hand { opacity: 1; transition: opacity .6s ease 1.6s; }
  .js .transcribe .hand path { stroke-dasharray: 420; stroke-dashoffset: 420; }
  .js .transcribe .typed span { opacity: 0; transform: translateX(10px); transition: opacity .5s ease, transform .5s ease; }
  .js .in .transcribe .hand { opacity: 0; }
  .js .in .transcribe .hand path { animation: draw 1.4s ease forwards; }
  .js .in .transcribe .hand path:nth-child(2) { animation-delay: .25s; }
  .js .in .transcribe .hand path:nth-child(3) { animation-delay: .5s; }
  .js .in .transcribe .typed span { opacity: 1; transform: none; }
  .js .in .transcribe .typed span:nth-child(1) { transition-delay: 1.8s; }
  .js .in .transcribe .typed span:nth-child(2) { transition-delay: 2s; }
  .js .in .transcribe .typed span:nth-child(3) { transition-delay: 2.2s; }
  @keyframes draw { to { stroke-dashoffset: 0; } }

  /* duel: winner pulse + confetti */
  .win .player.me .sc { animation: pop .5s cubic-bezier(.3, 1.6, .5, 1); }
  @keyframes pop { 50% { transform: scale(1.35); } }
  .confetti b { animation: burst 1.1s cubic-bezier(.15, .7, .3, 1) forwards; }
  @keyframes burst {
    0% { opacity: 1; transform: translate(0, 0) rotate(0); }
    100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)); }
  }
}
.hero { overflow: hidden; }
.about p { font-size: 18px; color: var(--text-2); }
.about .sign { color: var(--text); font-weight: 500; padding-inline-start: 14px; border-inline-start: 4px solid; border-image: var(--accent) 1; }