/* ============================================================
   Advarsi — homepage styles
   Tokens derived from Spec Part 8 (global design language).
   Fonts: Sora (headings) + DM Sans (body) per brief.
   ============================================================ */

:root {
  /* Brand */
  --accent: #E8590C;
  --accent-2: #F97316;
  --accent-press: #C44A08;
  --on-accent: #ffffff;

  /* Semantic */
  --success: #16a34a;
  --success-bg: #DCFCE7;
  --success-text: #166534;
  --amber: #d97706;
  --amber-text: #B45309;
  --amber-bg: #FEF3C7;
  --error: #EF4444;
  --error-bg: #FEE2E2;
  --error-text: #991B1B;

  /* Radii (tweakable) — baseline matches the default Square setting to avoid first-paint flash */
  --r-card: 0px;
  --r-demo: 0px;
  --r-btn: 0px;
  --r-input: 0px;
  --r-pill: 0px;

  /* Type */
  --font-head: 'Sora', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;

  /* Motion */
  --ease: cubic-bezier(.4, 0, .2, 1);

  /* Light theme (default) */
  --bg: #ffffff;
  --bg-2: #F8F9FB;
  --surface: #ffffff;
  --surface-2: #F8F9FB;
  --demo-bg: #F7F8FA;
  --demo-border: #ECEEF3;
  --text: #111827;
  --text-2: #5b6472;
  --text-3: #9aa1ad;
  --border: #ECEDF1;
  --border-strong: #E2E4EA;
  --hairline: rgba(17, 24, 39, .07);
  --accent-soft: rgba(79, 110, 247, .10);
  --accent-ring: rgba(79, 110, 247, .16);
  --sentence-hl: #D6E4FF;
  --word-hl: #3B5BDB;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .04);
  --shadow-md: 0 1px 3px rgba(16, 24, 40, .06), 0 14px 30px -12px rgba(16, 24, 40, .12);
  --shadow-lg: 0 2px 6px rgba(16, 24, 40, .06), 0 40px 80px -28px rgba(16, 24, 40, .30);
  --glow: 0 24px 60px -20px rgba(79, 110, 247, .35);
  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #0F1117;
  --bg-2: #0B0D12;
  --surface: #1A1F2E;
  --surface-2: #161B27;
  --demo-bg: #151A26;
  --demo-border: #242C3C;
  --text: #F9FAFB;
  --text-2: #9CA3AF;
  --text-3: #6B7280;
  --border: #1F2937;
  --border-strong: #2A3447;
  --hairline: rgba(255, 255, 255, .08);
  --accent-soft: rgba(79, 110, 247, .16);
  --accent-ring: rgba(79, 110, 247, .28);
  --sentence-hl: #1E3A5F;
  --word-hl: #3B5BDB;
  --success-bg: rgba(22, 163, 74, .18);
  --success-text: #4ade80;
  --error-bg: rgba(239, 68, 68, .16);
  --error-text: #fca5a5;
  --amber-bg: rgba(217, 119, 6, .16);
  --amber-text: #fbbf24;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 1px 3px rgba(0, 0, 0, .4), 0 16px 40px -16px rgba(0, 0, 0, .6);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, .5), 0 50px 90px -30px rgba(0, 0, 0, .8);
  --glow: 0 30px 80px -24px rgba(79, 110, 247, .5);
  color-scheme: dark;
}

/* Demo-card style variants (tweakable) */
[data-democard="outline"] {
  --demo-bg: var(--surface);
  --demo-border: var(--border-strong);
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
h1, h2, h3 { font-family: var(--font-head); margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--accent-soft); }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 40px; }
.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 14px;
}

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.nav-inner { display: flex; align-items: center; gap: 20px; height: 64px; }
.logo {
  font-family: var(--font-head); font-weight: 700; font-size: 21px;
  letter-spacing: -.02em; color: var(--accent); margin-right: auto;
  display: inline-flex; align-items: center; gap: 9px;
}
.logo-mark { display: inline-flex; flex-shrink: 0; }
.logo-mark svg { width: 1.32em; height: 1.32em; display: block; border-radius: 0; box-shadow: 0 2px 8px -2px var(--accent-ring); }
.logo-wm { font-family: var(--font-head); font-weight: 700; letter-spacing: -.02em; color: var(--accent); }
.nav-links { display: flex; gap: 2px; }
.nav-links a {
  font-size: 14px; font-weight: 500; color: var(--text-2); white-space: nowrap;
  letter-spacing: -.005em;
  padding: 7px 11px; border-radius: var(--r-btn); transition: color .15s var(--ease), background-color .15s var(--ease);
}
.nav-links a:hover { color: var(--text); background: var(--surface-2); }
.nav-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }

/* hide the center links before the full nav would overflow */
@media (max-width: 1240px) {
  .nav-links { display: none; }
}

/* theme toggle (Ref 6A) */
.theme-toggle {
  position: relative; display: flex; gap: 2px; padding: 3px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-pill);
}
.theme-toggle .tt-thumb {
  position: absolute; top: 3px; bottom: 3px; width: 30px;
  background: var(--accent); border-radius: var(--r-pill);
  box-shadow: 0 1px 4px var(--accent-ring); transition: left .22s var(--ease);
}
.theme-toggle button {
  position: relative; z-index: 1; width: 30px; height: 26px; border: 0;
  background: transparent; color: var(--text-3); border-radius: var(--r-pill);
  display: grid; place-items: center; transition: color .18s var(--ease);
}
.theme-toggle button i { font-size: 15px; }
.theme-toggle button.active { color: #fff; }
/* Pre-paint toggle state driven by data-thememode (set in the <head> before paint):
   the active button + thumb are correct on the FIRST paint, so refreshing no longer
   flashes an un-highlighted control or slides the thumb in. Positions match the
   buttons' offsetLeft (3px pad + index*32px). demos.js keeps data-thememode in sync
   on click and re-sets the SAME left, so nothing animates on load — only real clicks. */
html[data-thememode="system"] .theme-toggle .tt-thumb { left: 3px; }
html[data-thememode="light"]  .theme-toggle .tt-thumb { left: 35px; }
html[data-thememode="dark"]   .theme-toggle .tt-thumb { left: 67px; }
html[data-thememode="system"] .theme-toggle button[data-mode="system"],
html[data-thememode="light"]  .theme-toggle button[data-mode="light"],
html[data-thememode="dark"]   .theme-toggle button[data-mode="dark"] { color: #fff; }

/* appearance settings popover */
.settings { position: relative; display: flex; }
.icon-btn {
  width: 38px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2);
  border-radius: var(--r-pill); transition: color .15s var(--ease), border-color .15s var(--ease), background-color .15s var(--ease);
}
.icon-btn:hover { color: var(--text); border-color: var(--text-3); }
.icon-btn[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.icon-btn i { font-size: 18px; }

.set-pop {
  position: absolute; top: calc(100% + 14px); right: 0; width: 322px; z-index: 90;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 18px; box-shadow: var(--shadow-lg);
  padding: 8px; display: flex; flex-direction: column;
  transform-origin: top right; animation: setPop .18s var(--ease);
}
.set-pop[hidden] { display: none; }
@keyframes setPop { from { opacity: 0; transform: translateY(-8px) scale(.97); } }
.set-pop::before {
  content: ""; position: absolute; top: -7px; right: 18px; width: 12px; height: 12px;
  background: var(--surface); border-left: 1px solid var(--border-strong); border-top: 1px solid var(--border-strong);
  transform: rotate(45deg); border-radius: 3px 0 0 0;
}
.set-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 12px; }
.set-title { display: flex; align-items: center; gap: 8px; }
.set-title i { font-size: 16px; color: var(--accent); }
.set-title span { font-family: var(--font-head); font-weight: 700; font-size: 15px; letter-spacing: -.01em; color: var(--text); }
.set-x { border: 0; background: transparent; color: var(--text-3); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; cursor: pointer; }
.set-x:hover { background: var(--surface-2); color: var(--text); }
.set-x i { font-size: 16px; }

.set-group { display: flex; flex-direction: column; gap: 10px; padding: 13px 12px; border-top: 1px solid var(--hairline); }
.set-label { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }

.set-swatches { display: flex; gap: 9px; }
.swatch {
  flex: 1; height: 42px; border-radius: 11px; background: var(--sw);
  border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), inset 0 -2px 5px rgba(0,0,0,.18);
  position: relative; cursor: pointer; padding: 0;
  transition: transform .14s var(--ease), box-shadow .16s var(--ease);
}
.swatch:hover { transform: translateY(-2px); }
.swatch.active {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--sw),
    inset 0 0 0 1px rgba(255,255,255,.25), inset 0 -2px 5px rgba(0,0,0,.18);
}
.swatch.active::after {
  content: ""; position: absolute; left: 50%; top: 47%; width: 6px; height: 11px;
  border: 2.5px solid #fff; border-top: 0; border-left: 0;
  transform: translate(-50%, -55%) rotate(45deg);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
}

.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 5px; }
.seg button {
  border: 0; background: transparent; color: var(--text-2);
  font-family: var(--font-body); font-size: 13px; font-weight: 600; padding: 9px 10px;
  border-radius: 8px; cursor: pointer; transition: background-color .16s var(--ease), color .16s var(--ease), box-shadow .16s var(--ease);
}
.seg button:hover { color: var(--text); }
.seg button.active { background: var(--accent); color: #fff; box-shadow: 0 2px 8px -2px var(--accent-ring); }

.rad-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.rad-grid button {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 11px 4px 9px; border: 1px solid var(--border); background: var(--surface-2);
  border-radius: 11px; color: var(--text-3); font-family: var(--font-body);
  font-size: 10.5px; font-weight: 600; cursor: pointer;
  transition: color .15s var(--ease), border-color .15s var(--ease), background-color .15s var(--ease);
}
.rad-grid button:hover { color: var(--text); border-color: var(--text-3); }
.rad-grid button.active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.rad-prev { width: 22px; height: 22px; border: 2px solid currentColor; border-bottom: 0; border-right: 0; opacity: .85; }

@media (max-width: 760px) {
  .set-pop { position: fixed; top: 70px; right: 16px; left: 16px; width: auto; }
}

/* ===================== AUTH ===================== */
.auth-actions { display: flex; align-items: center; gap: 10px; }
.auth-actions[hidden] { display: none; }

/* logged-in account chip */
.account { position: relative; display: flex; }
.account[hidden] { display: none; }
.account-btn {
  display: flex; align-items: center; gap: 8px; padding: 5px 10px 5px 6px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--r-pill); font-family: var(--font-body); font-weight: 600; font-size: 13.5px;
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.account-btn:hover { border-color: var(--text-3); }
.account-btn[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-soft); }
.account-btn i { font-size: 15px; color: var(--text-3); }
.avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; color: #fff; font-family: var(--font-head);
  font-weight: 700; font-size: 12.5px; letter-spacing: .02em;
  background: linear-gradient(150deg, var(--accent-lite, #6E8BFF), var(--accent, #4256E0));
}
.avatar-lg { width: 42px; height: 42px; font-size: 17px; }
.account-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.account-menu {
  position: absolute; top: calc(100% + 12px); right: 0; width: 260px; z-index: 90;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 16px; box-shadow: var(--shadow-lg); padding: 8px;
  transform-origin: top right; animation: setPop .18s var(--ease);
}
.account-menu[hidden] { display: none; }
.am-head { display: flex; align-items: center; gap: 12px; padding: 10px 10px 14px; }
.am-id { display: flex; flex-direction: column; min-width: 0; }
.am-name { font-family: var(--font-head); font-weight: 700; font-size: 14.5px; color: var(--text); }
.am-email { font-size: 12.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 10px 11px; border: 0; background: transparent; color: var(--text-2);
  font-family: var(--font-body); font-size: 13.5px; font-weight: 500; border-radius: 10px;
  transition: background-color .14s var(--ease), color .14s var(--ease);
}
.am-item:first-of-type { border-top: 1px solid var(--hairline); margin-top: 2px; padding-top: 12px; }
.am-item i { font-size: 17px; color: var(--text-3); }
.am-item:hover { background: var(--surface-2); color: var(--text); }
.am-item:hover i { color: var(--text); }
.am-danger { color: #DC2626; }
.am-danger i { color: #DC2626; }
.am-danger:hover { background: rgba(220, 38, 38, .08); color: #DC2626; }
.am-danger:hover i { color: #DC2626; }

/* modal overlay */
.auth-overlay {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  padding: 24px; background: rgba(11, 13, 18, .55); backdrop-filter: blur(4px);
  animation: authFade .2s var(--ease);
}
.auth-overlay[hidden] { display: none; }
@keyframes authFade { from { opacity: 0; } }
.auth-card {
  position: relative; width: 100%; max-width: 412px; max-height: calc(100vh - 48px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 22px; box-shadow: var(--shadow-lg); padding: 30px 32px 26px;
  animation: authPop .26s var(--ease);
}
@keyframes authPop { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.auth-x {
  position: absolute; top: 16px; right: 16px; width: 32px; height: 32px;
  display: grid; place-items: center; border: 0; background: var(--surface-2);
  color: var(--text-3); border-radius: 9px; transition: color .15s var(--ease), background-color .15s var(--ease);
}
.auth-x:hover { background: var(--border); color: var(--text); }
.auth-x i { font-size: 18px; }

.auth-brand { display: flex; justify-content: center; margin-bottom: 18px; }
.auth-brand .logo-mark svg { width: 46px; height: 46px; }

.auth-tabs {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px;
  padding: 5px; margin-bottom: 22px;
}
.auth-tab {
  position: relative; z-index: 1; border: 0; background: transparent; color: var(--text-2);
  font-family: var(--font-body); font-weight: 600; font-size: 14px; padding: 9px;
  border-radius: 8px; transition: color .2s var(--ease);
}
.auth-tab.active { color: var(--accent); }
.auth-tab-thumb {
  position: absolute; top: 5px; left: 5px; height: calc(100% - 10px); width: calc(50% - 7px);
  background: var(--surface); border-radius: 8px; box-shadow: var(--shadow-sm);
  transition: transform .26s var(--ease); z-index: 0;
}
.auth-tabs[data-tab="signup"] .auth-tab-thumb { transform: translateX(calc(100% + 4px)); }

.auth-title { font-family: var(--font-head); font-size: 23px; font-weight: 700; letter-spacing: -.02em; text-align: center; }
.auth-sub { font-size: 14px; color: var(--text-2); text-align: center; margin: 6px 0 22px; }

.auth-oauth {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  padding: 12px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  border-radius: var(--r-btn); font-family: var(--font-body); font-weight: 600; font-size: 14px;
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.auth-oauth:hover { border-color: var(--text-3); background: var(--surface-2); }
.auth-divider { display: flex; align-items: center; gap: 14px; margin: 18px 0; color: var(--text-3); font-size: 12px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.auth-form { display: flex; flex-direction: column; gap: 15px; }
.auth-field { display: flex; flex-direction: column; gap: 7px; }
.auth-field[hidden] { display: none; }
.af-label { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.auth-field input {
  width: 100%; box-sizing: border-box; font-family: var(--font-body); font-size: 14.5px;
  color: var(--text); background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-input); padding: 12px 14px; transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.auth-field input::placeholder { color: var(--text-3); }
.auth-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--surface); }
.auth-field.invalid input { border-color: #DC2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }
.af-input-wrap { position: relative; display: flex; }
.af-input-wrap input { padding-right: 44px; }
.af-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--text-3); border-radius: 7px;
}
.af-toggle:hover { color: var(--text); background: var(--surface); }
.af-toggle i { font-size: 17px; }
.af-err { font-size: 12px; color: #DC2626; min-height: 0; display: none; }
.auth-field.invalid .af-err { display: block; }

.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: -2px; }
.auth-row[hidden] { display: none; }
.auth-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.auth-check input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.auth-link { border: 0; background: transparent; color: var(--accent); font-family: var(--font-body); font-weight: 600; font-size: 13px; padding: 0; cursor: pointer; }
.auth-link:hover { text-decoration: underline; }
.auth-terms { font-size: 12.5px; color: var(--text-3); line-height: 1.5; margin: -2px 0 0; }
.auth-terms[hidden] { display: none; }
.auth-submit { width: 100%; margin-top: 4px; }
.auth-foot { text-align: center; font-size: 13.5px; color: var(--text-2); margin: 20px 0 0; }
.auth-foot .auth-link { font-size: 13.5px; }

@media (max-width: 760px) {
  .auth-card { padding: 26px 22px 22px; }
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; border-radius: var(--r-pill);
  border: 1px solid transparent; transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease); white-space: nowrap;
}
.btn-primary {
  background: var(--accent); color: var(--on-accent);
  box-shadow: 0 1px 2px var(--accent-ring), 0 8px 20px -10px var(--accent-ring);
}
.btn-primary:hover { background: var(--accent-press); transform: translateY(-1px); box-shadow: 0 12px 26px -10px var(--accent-ring); }
.btn-ghost {
  background: var(--surface); color: var(--text); border-color: var(--border-strong);
}
.btn-ghost:hover { border-color: var(--text-3); background: var(--surface-2); }
.btn-sm { font-size: 13px; padding: 8px 18px; }
.btn-md { font-size: 14.5px; padding: 12px 24px; }
.btn-lg { font-size: clamp(14.5px, 3.9vw, 16px); padding: clamp(12px, 3.4vw, 15px) clamp(22px, 6.6vw, 34px); }

/* ---------- hero ---------- */
.hero { padding: 92px 0 40px; text-align: center; position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -10% 0 auto; height: 520px; z-index: -1;
  background: radial-gradient(60% 100% at 50% 0%, var(--accent-soft), transparent 70%);
}
.badge {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500;
  color: var(--text-2); background: var(--surface); border: 1px solid var(--border-strong);
  padding: 7px 8px 7px 14px; border-radius: var(--r-pill); box-shadow: var(--shadow-sm);
  margin-bottom: 26px;
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.badge .badge-tag {
  font-size: 11px; font-weight: 600; color: var(--accent); background: var(--accent-soft);
  padding: 2px 9px; border-radius: var(--r-pill);
}
.h1 {
  font-size: clamp(34px, 9.1vw, 72px); font-weight: 700; line-height: 1.04;
  letter-spacing: -.03em; margin: 0 auto 22px; max-width: 16ch;
}
.h1 em { font-style: normal; color: var(--accent); }
.hero-sub {
  font-size: clamp(16px, 4.3vw, 20px); color: var(--text-2); line-height: 1.65;
  max-width: 532px; margin: 0 auto 32px; letter-spacing: -.01em; text-wrap: balance;
}
.hero-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* hero product preview */
.hero-preview {
  margin: 64px auto 0; max-width: 940px; position: relative;
  animation: floatUp .9s var(--ease) both;
}
@keyframes floatUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.app-window {
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-demo); box-shadow: var(--shadow-lg); overflow: hidden;
}
.aw-bar {
  display: flex; align-items: center; gap: 14px; padding: 9px 8px 9px 16px;
  border-bottom: 1px solid var(--border); background: var(--surface);
}
.aw-spacer { width: 96px; flex-shrink: 0; }
.aw-winctrls { display: flex; gap: 0; flex-shrink: 0; }
.wc { width: 32px; height: 26px; border: 0; background: transparent; color: var(--text-2); display: grid; place-items: center; border-radius: 0; transition: background-color .14s var(--ease), color .14s var(--ease); }
.wc i { font-size: 14px; }
.wc:hover { background: var(--surface-2); color: var(--text); }
.wc-close:hover { background: #E81123; color: #fff; }
.aw-url {
  flex: 1; max-width: 320px; margin: 0 auto; text-align: center; font-size: 12px;
  color: var(--text-3); background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 5px 14px;
}
.aw-body { display: grid; grid-template-columns: 60px 1fr; min-height: 360px; }
.aw-rail {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 0;
  border-right: 1px solid var(--border); background: var(--surface-2);
}
.aw-rail .ri {
  width: 38px; height: 38px; border-radius: var(--r-input); display: grid; place-items: center;
  color: var(--text-3); font-size: 18px;
}
.aw-rail .ri.active { background: var(--accent-soft); color: var(--accent); }
.aw-main { padding: 22px 26px; }
/* ----- reader demo (hero box) ----- */
.aw-main.reader { padding: 0; position: relative; display: flex; flex-direction: column; }
.reader-bar { display: flex; align-items: center; justify-content: space-between; padding: 13px 20px; border-bottom: 1px solid var(--border); }
.reader-doc { position: relative; padding: 22px 26px 30px; flex: 1; font-family: Georgia, 'Times New Roman', serif; }
.reader-org { text-align: center; margin-bottom: 18px; color: var(--text); line-height: 1.3; }
.reader-org .ro-kicker { font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.reader-org .ro-1 { font-weight: 700; font-size: 19px; letter-spacing: -.01em; }
.reader-org .ro-3 { font-size: 12.5px; color: var(--text-2); margin-top: 3px; }
.reader-para { font-size: 13.5px; line-height: 1.95; color: var(--text); margin: 0; }
.hl-target {
  background-image: linear-gradient(var(--hlc, transparent), var(--hlc, transparent));
  background-repeat: no-repeat; background-position: left center; background-size: 0% 100%;
  transition: background-size .85s var(--ease);
  border-radius: 2px; padding: 1px 0;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.hl-target.sweep { background-size: 100% 100%; }

/* context menu — Advarsi selection toolbar (horizontal, branded) */
.ctx-menu {
  position: absolute; left: 50%; bottom: 24px; transform: translate(-50%, 10px);
  display: flex; align-items: center; gap: 4px; padding: 7px 8px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px;
  box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; transition: opacity .22s var(--ease), transform .22s var(--ease);
  z-index: 5; font-family: var(--font-body);
}
.ctx-menu.show { opacity: 1; transform: translate(-50%, 0); }
.ctx-swatches { display: flex; gap: 6px; padding: 0 4px; }
.cc { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid rgba(0,0,0,.06); background: var(--c); cursor: pointer; padding: 0; transition: transform .16s var(--ease), box-shadow .16s var(--ease); }
.cc.pulse { transform: scale(1.32); box-shadow: 0 0 0 3px var(--accent-ring); }
.ctx-div { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }
.ctx-act { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; color: var(--text); font-size: 12.5px; font-weight: 500; padding: 7px 10px; border-radius: 8px; cursor: pointer; transition: background-color .14s var(--ease); }
.ctx-act i { font-size: 15px; color: var(--text-2); }
.ctx-act:hover { background: var(--surface-2); }
.ctx-act.active { background: var(--accent-soft); color: var(--accent); transform: scale(.94); }
.ctx-act.active i { color: var(--accent); }
.ctx-ai { color: var(--accent); }
.ctx-ai i { color: var(--accent); }

/* fake cursor */
.reader-cursor {
  position: absolute; left: 60%; top: 42%; z-index: 7; color: #0c0c0c; font-size: 19px;
  opacity: 0; transition: left .55s var(--ease), top .55s var(--ease), opacity .2s var(--ease);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); pointer-events: none;
}
[data-theme="dark"] .reader-cursor { color: #fff; }

/* comment card — clean Advarsi note (accent rail) */
.comment-card {
  position: absolute; top: 44%; right: 16px; width: 210px; z-index: 6;
  --note-c: #3E63DD;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-left: 3px solid var(--note-c); border-radius: 4px;
  padding: 12px 14px 13px; box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateX(22px); transition: opacity .32s var(--ease), transform .45s var(--ease), box-shadow .2s var(--ease);
  font-family: var(--font-body);
}
.comment-card.show { opacity: 1; transform: none; }
.comment-card.dragging { box-shadow: 0 36px 70px -20px rgba(16,24,40,.5); }
[data-theme="dark"] .comment-card.dragging { box-shadow: 0 36px 70px -18px rgba(0,0,0,.8); }
.cc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.cc-meta { display: flex; align-items: center; gap: 7px; }
.cc-dot { width: 10px; height: 10px; border-radius: 2px; background: var(--note-c); }
.cc-date { font-size: 11.5px; font-weight: 600; color: var(--text-2); }
.cc-tools { display: flex; align-items: center; gap: 7px; color: var(--text-3); font-size: 13px; }
.cc-body { font-size: 13px; line-height: 1.5; color: var(--text); }

/* reading-aloud: highlight the whole first sentence at once (to its period) */
#sent1 {
  background-image: linear-gradient(rgba(79,110,247,.18), rgba(79,110,247,.18));
  background-repeat: no-repeat; background-position: left center; background-size: 0% 100%;
  transition: background-size .5s var(--ease); border-radius: 3px; padding: 1px 2px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
#sent1.reading { background-size: 100% 100%; }

/* reader voice player (dark, both themes — like a media bar) */
.rd-player {
  position: absolute; left: 50%; bottom: 22px; transform: translate(-50%, 16px); z-index: 6;
  background: #15171c; border: 1px solid rgba(255,255,255,.08); border-radius: 18px;
  padding: 11px 16px 12px; box-shadow: var(--shadow-lg); min-width: 312px;
  opacity: 0; pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease);
  font-family: var(--font-body);
}
.rd-player.show { opacity: 1; transform: translate(-50%, 0); }
.rdp-time { display: flex; justify-content: space-between; font-size: 11px; color: #8b919c; margin-bottom: 9px; padding: 0 2px; }
.rdp-row { display: flex; align-items: center; justify-content: center; gap: 16px; }
.rdp-flag { width: 40px; height: 40px; border-radius: 50%; border: 0; background: #23262e; display: grid; place-items: center; cursor: pointer; font-size: 17px; overflow: hidden; transition: box-shadow .16s var(--ease); }
.rdp-flag.active { box-shadow: 0 0 0 2px var(--accent); }
.rdp-icon { width: 34px; height: 34px; border: 0; background: transparent; color: #d2d6dd; display: grid; place-items: center; font-size: 19px; cursor: pointer; border-radius: 50%; }
.rdp-icon:hover { background: rgba(255,255,255,.07); }
.rdp-pp { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 18px; cursor: pointer; }
.rdp-speed { border: 0; background: #23262e; color: #d2d6dd; border-radius: 20px; padding: 8px 13px; font-size: 12.5px; font-weight: 600; cursor: pointer; }

/* voice picker */
.rd-voices {
  position: absolute; left: -4px; bottom: 80px; width: 264px; z-index: 8;
  background: #15171c; border: 1px solid rgba(255,255,255,.09); border-radius: 16px;
  padding: 9px; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none;
  transform: translateY(10px); transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.rd-voices.show { opacity: 1; transform: none; }
.rdv-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 10px; border-bottom: 1px solid rgba(255,255,255,.07); margin-bottom: 6px; }
.rdv-lang { font-size: 12px; font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 4px 11px; border-radius: 20px; }
.rdv-head .ti-x { color: #8b919c; font-size: 16px; }
.rdv-list { display: flex; flex-direction: column; gap: 1px; }
.rdv { display: flex; align-items: center; gap: 11px; padding: 8px; border-radius: 10px; }
.rdv.on { background: rgba(79,110,247,.16); }
.rdv-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; background: #23262e; overflow: hidden; flex-shrink: 0; }
.rdv-meta { display: flex; flex-direction: column; line-height: 1.25; }
.rdv-meta b { font-size: 13px; font-weight: 600; color: #fff; }
.rdv-meta span { font-size: 11px; color: #8b919c; }
.rdv .ti-check { margin-left: auto; color: var(--accent); font-size: 17px; }
.aw-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.aw-title { font-family: var(--font-head); font-weight: 600; font-size: 16px; }
.aw-model {
  font-size: 11.5px; font-weight: 500; color: var(--text-2); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r-pill); padding: 5px 12px;
  display: inline-flex; align-items: center; gap: 6px;
}
.aw-panes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.aw-pane-label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.aw-pane-box {
  background: var(--demo-bg); border: 1px solid var(--demo-border); border-radius: var(--r-input);
  padding: 14px; font-size: 13px; line-height: 1.62; color: var(--text-2); min-height: 150px;
}
.aw-pane-box.out { color: var(--text); }
.aw-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }

/* ---------- toolbelt ---------- */
.toolbelt { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-2); margin-top: 72px; }
.toolbelt-inner { display: flex; align-items: center; gap: 40px; padding: 30px 40px; }
.toolbelt-label { font-family: var(--font-head); font-weight: 700; font-size: 19px; line-height: 1.15; letter-spacing: -.02em; color: var(--text); flex-shrink: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 500;
  color: var(--text); background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-pill); padding: 9px 16px 9px 9px; transition: border-color .16s var(--ease), box-shadow .16s var(--ease), transform .16s var(--ease);
}
.chip .ci { width: 28px; height: 28px; border-radius: var(--r-pill); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 16px; transition: background-color .16s var(--ease), color .16s var(--ease); }
.chip:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 20px -12px var(--accent-ring); }
.chip:hover .ci { background: var(--accent); color: #fff; }
@media (max-width: 760px) {
  .toolbelt-inner { flex-direction: column; align-items: flex-start; gap: 18px; padding: 26px 22px; }
}

/* ---------- features ---------- */
.features { padding: 30px 0; }
.feature {
  display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center;
  padding: 84px 0; border-bottom: 1px solid var(--border);
}
.feature:last-child { border-bottom: 0; }
.feature.reverse .feat-copy { order: 2; }
.feature.reverse .feat-demo { order: 1; }
.feat-num {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600;
  color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 5px 12px 5px 8px; margin-bottom: 18px;
}
.feat-num .n { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 11px; }
.feat-title { font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; line-height: 1.08; letter-spacing: -.025em; margin-bottom: 16px; }
.feat-title em { font-style: normal; color: var(--accent); }
.feat-sub { font-size: 16px; color: var(--text-2); line-height: 1.66; max-width: 38ch; margin-bottom: 22px; }
.feat-points { display: flex; flex-direction: column; gap: 11px; }
.feat-point { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--text); }
.feat-point i { color: var(--accent); font-size: 18px; flex-shrink: 0; }

/* demo card */
.demo {
  background: var(--demo-bg); border: 1px solid var(--demo-border); border-radius: var(--r-demo);
  padding: 22px; box-shadow: var(--shadow-md); position: relative; overflow: hidden;
}
/* PASSIVE showcase: the demo interior (tool controls, inputs, word-swap popups,
   mode toggles, accept buttons, source fields) is NEVER interactive — a visitor
   watches the auto-playing animation, nothing more. Only the Play/Replay button
   stays clickable (re-enabled below): it's the "watch it" control, and the
   Reading demo's audio can only start on a real user click. Auto-play is JS-driven
   (IntersectionObserver), so killing pointer events doesn't stop the animations. */
.demo { pointer-events: none; }
.demo .play-btn { pointer-events: auto; }
.demo-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.demo-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); display: inline-flex; align-items: center; gap: 7px; }
.demo-eyebrow .live { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-bg); }
.play-btn {
  display: inline-flex; align-items: center; gap: 7px; background: var(--accent); color: #fff;
  border: 0; border-radius: var(--r-pill); padding: 7px 15px; font-size: 12.5px; font-weight: 600;
  transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.play-btn:hover { background: var(--accent-press); }
.play-btn:disabled { background: var(--surface-2); color: var(--text-3); border: 1px solid var(--border); cursor: default; }
.play-btn i { font-size: 14px; }

.box {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-input);
  padding: 12px 14px; font-size: 13px; line-height: 1.6; color: var(--text-2);
}
.box.out { color: var(--text); }
.field-label { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); margin: 0 0 7px; display: flex; align-items: center; gap: 8px; }
/* The SPAN rotates (inline <i> can't transform); app.css overrides with gSpin in-app. */
.g-spin { display: inline-flex; animation: spin .8s linear infinite; }
.g-spin i { font-size: 13px; color: var(--accent); }
@keyframes spin { to { transform: rotate(360deg); } }
.cursor { display: inline-block; width: 2px; height: 14px; background: var(--accent); vertical-align: -2px; animation: blink .9s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.pill-tag { display: inline-flex; align-items: center; gap: 5px; border-radius: var(--r-pill); padding: 4px 11px; font-size: 11.5px; font-weight: 600; }
.pill-red { background: var(--error-bg); color: var(--error-text); }
.pill-green { background: var(--success-bg); color: var(--success-text); }
.arrow-row { display: flex; align-items: center; gap: 10px; margin: 12px 2px; color: var(--text-3); font-size: 12px; }
.arrow-row .ln { flex: 1; height: 1px; background: var(--border); }

/* paraphraser */
.mode-tabs { display: flex; gap: 7px; margin-bottom: 14px; flex-wrap: wrap; }
.mode-tab { font-size: 12px; font-weight: 500; padding: 5px 13px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface); color: var(--text-2); transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); }
.mode-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.para-controls { display: flex; gap: 8px; flex-wrap: wrap; margin: -4px 0 14px; }
.para-ctrl { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-size: 12px; font-weight: 500; padding: 6px 12px; border-radius: var(--r-input, 8px); border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; transition: border-color .15s var(--ease), color .15s var(--ease); }
.para-ctrl:hover { border-color: var(--text-3); color: var(--text); }
.para-ctrl i { font-size: 15px; color: var(--accent); }
.para-ctrl .ch { font-size: 13px; color: var(--text-3); margin-left: 1px; }
.chg-g { color: var(--success); font-weight: 600; }
.chg-a { color: var(--amber); font-weight: 600; }
/* Modern multi-colour synonym palette — matches the AI Paraphraser tool's latest
   highlight colours so each swapped word gets its OWN colour (not just green/amber).
   Underline colour comes from .para-swap's currentColor, so these just set the hue. */
.chg-b { color: var(--accent); font-weight: 600; }
.chg-p { color: #EC4899; font-weight: 600; }
.chg-v { color: #8B5CF6; font-weight: 600; }
.chg-t { color: #14B8A6; font-weight: 600; }
.chg-c { color: #0EA5E9; font-weight: 600; }
.chg-o { color: #F97316; font-weight: 600; }
.chg-r { color: #F43F5E; font-weight: 600; }
/* paraphraser / humaniser processing + reveal */
.para-skeleton { display: flex; flex-direction: column; gap: 8px; padding: 3px 0; }
.para-skeleton span {
  display: block; height: 11px; border-radius: 5px; transform-origin: left center;
  /* The moving highlight is a warm accent-tinted band. The old highlight was
     --accent-soft (a ~16% blue), so low-contrast against --border that the sweep
     was invisible in dark mode and the lines looked frozen next to the scan beam.
     Each line also gently "draws in" from the left (paraDraw) and the lines are
     staggered, so the block reads as being actively written, in step with the beam. */
  background: linear-gradient(90deg, var(--border) 18%, color-mix(in srgb, var(--accent) 42%, var(--border-strong)) 50%, var(--border) 82%);
  background-size: 200% 100%;
  animation: paraShimmer 1.15s var(--ease) infinite, paraDraw 1.9s var(--ease) infinite;
}
.para-skeleton span:nth-child(2) { animation-delay: .16s, .12s; }
.para-skeleton span:nth-child(3) { animation-delay: .32s, .24s; }
.para-skeleton span:nth-child(4) { animation-delay: .48s, .36s; }
@keyframes paraShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes paraDraw { 0%, 100% { transform: scaleX(.82); opacity: .82; } 45% { transform: scaleX(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .para-skeleton span { animation: paraShimmer 1.6s var(--ease) infinite; transform: none; opacity: 1; }
}
.para-in { opacity: 0; transition: opacity .28s var(--ease); }
.para-in.on { opacity: 1; }
/* highlighted (changed) word — DISPLAY ONLY: the demo auto-swaps these to show the
   feature, but visitors can't click to change them (no pointer cursor / hover). */
.para-swap { cursor: default; border-bottom: 1.5px dotted currentColor; border-radius: 2px; padding: 0 1px; transition: opacity .28s var(--ease), background .15s var(--ease); outline: none; }
.para-swap.swapped { background: color-mix(in srgb, currentColor 22%, transparent); }
/* synonym picker popover */
.para-syn {
  /* pointer-events:none = visitors can't click the popover to change a word; the
     auto-showcase still swaps via programmatic .click(), which ignores this. */
  pointer-events: none;
  position: fixed; z-index: 200; min-width: 184px; max-width: 280px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
  box-shadow: 0 16px 40px -12px rgba(20,28,48,.4), 0 2px 8px -3px rgba(20,28,48,.2);
  padding: 6px; opacity: 0; transform: translateY(-4px) scale(.98); transform-origin: top left;
  transition: opacity .14s var(--ease), transform .14s var(--ease);
}
.para-syn.on { opacity: 1; transform: none; }
.para-syn-h { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); padding: 5px 9px 6px; }
.para-syn-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; font-family: var(--font-body); font-size: 13px; color: var(--text); background: transparent; border: 0; border-radius: var(--r-btn); padding: 8px 9px; cursor: pointer; transition: background .12s var(--ease); }
.para-syn-opt:hover { background: var(--accent-soft); }
.para-syn-opt.preselect { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.para-syn-opt.on { color: var(--accent); font-weight: 600; }
.para-syn-opt i { font-size: 14px; color: var(--accent); }

/* grammar */
.uline-red {
  text-decoration: underline solid var(--error);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  cursor: pointer;
  border-radius: 3px;
  transition: background-color .2s var(--ease);
}
.uline-red:hover { background: var(--error-bg); }
.gr-sugg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* Homepage demo is a PASSIVE showcase — the Accept / Accept-all buttons are visual
   props only, never clickable (pointer-events:none on both, below). */
.gr-accept-all { display: none; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; background: var(--accent); color: #fff; border: 0; border-radius: var(--r-pill); padding: 5px 12px; cursor: default; pointer-events: none; transition: filter .15s var(--ease), opacity .2s var(--ease); white-space: nowrap; }
.gr-accept-all.show { display: inline-flex; }
.gr-accept-all:hover { filter: brightness(1.07); }
.gr-accept-all i { font-size: 15px; }
.gr-accept-all:disabled { opacity: .5; cursor: default; }
.gr-fixed { background: var(--success-bg); color: var(--success-text); border-radius: 4px; padding: 1px 4px; }
.strike { text-decoration: line-through; color: var(--text-3); }
.sugg { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-input); padding: 9px 11px; margin-bottom: 7px; font-size: 12.5px; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.sugg .cat { display: flex; align-items: center; gap: 7px; }
.sugg .cat .d { width: 7px; height: 7px; border-radius: 50%; }
.accept { font-size: 11.5px; font-weight: 600; background: var(--accent); color: #fff; border: 0; border-radius: var(--r-pill); padding: 4px 12px; cursor: default; pointer-events: none; }
.rings { display: flex; gap: 16px; margin-top: 16px; }
.ring { text-align: center; }
.ring .circle {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; font-family: var(--font-head); color: var(--text);
  background: conic-gradient(var(--accent) calc(var(--v) * 1%), var(--border) 0);
  position: relative; margin: 0 auto 6px;
}
.ring .circle::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--demo-bg); }
.ring .circle span { position: relative; z-index: 1; }
.ring .lbl { font-size: 10.5px; color: var(--text-2); }

/* reading helper */
.read-text { font-size: 13.5px; line-height: 1.9; color: var(--text); }
.read-text span { border-radius: 4px; padding: 1px 2px; transition: background .25s var(--ease); cursor: pointer; }
.read-text span.cur { background: var(--sentence-hl); }
.read-text .word-hl { background: var(--word-hl); color: #fff; }
.player {
  display: flex; align-items: center; gap: 13px; margin-top: 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 10px 18px; box-shadow: var(--shadow-md);
}
[data-theme="dark"] .player { background: #1E2235; border-color: #283047; }
.player .voice { font-size: 11.5px; font-weight: 600; color: var(--text-2); display: flex; align-items: center; gap: 7px; }
.player .voice .av { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.player .pp { width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: #fff; border: 0; display: grid; place-items: center; flex-shrink: 0; font-size: 15px; }
.player .prog { flex: 1; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.player .prog i { display: block; height: 100%; width: 0%; background: var(--accent); border-radius: 2px; transition: width .12s linear; }
.player .speed { font-size: 12px; font-weight: 600; color: var(--text-2); }

/* presentation */
.pres-doc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-input); padding: 12px 14px; margin-bottom: 14px; }
.pres-fname { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 10px; }
.pres-fname i { color: #E03131; font-size: 16px; }
.pres-fname span { font-weight: 500; color: var(--text-3); }
.pres-lines { display: flex; flex-direction: column; gap: 5px; }
.pres-lines span { font-size: 11.5px; line-height: 1.5; color: var(--text-2); border-radius: 4px; padding: 1px 3px; transition: background .25s var(--ease), color .25s var(--ease); }
.pres-lines span.scan { background: var(--sentence-hl); color: var(--text); }
.pres-stage { position: relative; min-height: 196px; }
.pres-outline { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.pres-outline.gone { display: none; }
.pres-outline .o-row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-3); opacity: 0; transform: translateX(-6px); transition: all .35s var(--ease); }
.pres-outline .o-row i { color: var(--accent); font-size: 16px; }
.pres-outline .o-row.on { opacity: 1; transform: none; color: var(--text); }
.phase { font-size: 12.5px; color: var(--text-2); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.phase i { font-size: 15px; }
.pbar { height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; margin-bottom: 14px; }
.pbar i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 3px; transition: width .4s var(--ease); }
.slides-mini { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 9px; }
/* Professional slide thumbnails — a real designed mini-deck: a distinct cover
   slide, kicker -> heading hierarchy, clean written bullets, a data slide with an
   animated chart, and a branded footer with page numbers. A presentable deck. */
.smini { background: linear-gradient(158deg, #16344F 0%, #0B2039 100%); border-radius: 8px; padding: 9px 10px 7px; display: flex; flex-direction: column; position: relative; overflow: hidden; opacity: 0; transform: translateY(8px); box-shadow: 0 8px 20px -10px rgba(0,0,0,.55), inset 0 0 0 1px rgba(227,176,75,.13); }
.smini.show { animation: popin .4s var(--ease) forwards; }
@keyframes popin { to { opacity: 1; transform: none; } }
.smini .st { font-size: 6.5px; font-weight: 800; color: #E7B24E; letter-spacing: .14em; text-transform: uppercase; }
.smini .s-h { font-size: 9px; font-weight: 700; color: #F5F1E8; line-height: 1.2; margin-top: 3px; letter-spacing: -.005em; }
/* written slide content — the deck tool writes each slide's text from the essay */
.smini .s-body { display: flex; flex-direction: column; gap: 3.5px; margin-top: 6px; }
.smini .s-bul { display: flex; gap: 4px; font-size: 6.8px; line-height: 1.32; color: rgba(245,241,232,.82); opacity: 0; transform: translateY(3px); transition: opacity .38s var(--ease), transform .38s var(--ease); }
.smini .s-bul::before { content: ""; flex: none; width: 4px; height: 1.5px; margin-top: 3.5px; border-radius: 1px; background: #E7B24E; }
.smini .s-sub { font-size: 7px; line-height: 1.4; color: rgba(245,241,232,.74); margin-top: 4px; opacity: 0; transform: translateY(3px); transition: opacity .38s var(--ease), transform .38s var(--ease); }
/* branded footer with page number — the 'designed deck' tell */
.smini .s-foot { margin-top: auto; padding-top: 5px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(245,241,232,.1); font-size: 5.4px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(245,241,232,.4); opacity: 0; transition: opacity .4s var(--ease) .12s; }
.smini .s-brand { color: rgba(231,178,78,.82); }
.smini .s-pg { font-variant-numeric: tabular-nums; }
/* cover / title slide */
.smini.cover { background: linear-gradient(150deg, #1D4266 0%, #0C2340 60%, #091C33 100%); justify-content: center; padding: 11px 12px 8px; }
.smini.cover::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(#E7B24E, #C6842A); }
.smini.cover .st { font-size: 6px; letter-spacing: .2em; }
.smini .s-cover-h { font-size: 12.5px; line-height: 1.12; margin-top: 5px; }
.smini.cover .s-foot { border-top: none; padding-top: 8px; color: rgba(245,241,232,.5); }
/* data slide — mini bar chart that grows on reveal */
.smini .s-chart { margin-top: 7px; opacity: 0; transform: translateY(3px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.smini .s-bars { display: flex; align-items: flex-end; gap: 5px; height: 27px; }
.smini .s-bars i { flex: 1; background: linear-gradient(#E7B24E, #C6842A); border-radius: 2px 2px 0 0; min-height: 3px; transform: scaleY(0); transform-origin: bottom; transition: transform .55s var(--ease); }
.smini.fill .s-bars i { transform: scaleY(1); }
.smini.fill .s-bars i:nth-child(2) { transition-delay: .07s; }
.smini.fill .s-bars i:nth-child(3) { transition-delay: .14s; }
.smini.fill .s-bars i:nth-child(4) { transition-delay: .21s; }
.smini .s-cap { font-size: 6px; color: rgba(245,241,232,.62); margin-top: 5px; letter-spacing: .01em; }
/* reveal written content + footer + chart on .fill */
.smini.fill .s-bul, .smini.fill .s-sub, .smini.fill .s-foot, .smini.fill .s-chart { opacity: 1; transform: none; }
.smini.fill .s-bul:nth-child(2) { transition-delay: .1s; }
.smini.fill .s-bul:nth-child(3) { transition-delay: .2s; }

/* byok */
.steps { display: flex; flex-direction: column; gap: 12px; }
.step { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--text-3); transition: color .3s var(--ease); }
.step.on { color: var(--text); }
.step .mk { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--border-strong); display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--text-3); flex-shrink: 0; transition: all .3s var(--ease); }
.step.on .mk { background: var(--accent); border-color: var(--accent); color: #fff; }
.step .price { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border-radius: var(--r-pill); padding: 3px 10px; }

/* ---------- pricing ---------- */
.pricing { padding: 96px 0; border-top: 1px solid var(--border); text-align: center; }
.section-head { max-width: 640px; margin: 0 auto 56px; }
.section-title { font-size: clamp(30px, 4vw, 44px); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; margin-bottom: 16px; }
.section-sub { font-size: 17px; color: var(--text-2); line-height: 1.6; }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; text-align: left; }
.bill-toggle-wrap { display: flex; justify-content: center; margin-bottom: 26px; }
.bill-toggle { display: inline-flex; align-items: center; gap: 2px; padding: 4px; background: var(--surface-2, var(--surface)); border: 1px solid var(--border); border-radius: 10px; }
.bill-toggle .bt-opt { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; color: var(--text-2); font-family: var(--font-body); font-weight: 600; font-size: 13.5px; padding: 8px 16px; border-radius: 7px; cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease); }
.bill-toggle .bt-opt.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(15,20,35,.14); }
.bill-toggle .bt-save { font-size: 11px; font-weight: 700; color: #fff; background: var(--accent); padding: 2px 7px; border-radius: 5px; }
.tier { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 30px; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); position: relative; transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.tier:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.tier.featured { border-color: var(--accent); box-shadow: var(--glow); position: relative; }
.tier .ft-tag { position: absolute; top: -12px; left: 30px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--accent); padding: 4px 12px; border-radius: var(--r-pill); }
.tier-name { font-family: var(--font-head); font-weight: 600; font-size: 18px; margin-bottom: 6px; display: flex; align-items: center; gap: 9px; }
.beta-pill { font-family: var(--font-body, inherit); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--accent); padding: 3px 9px; border-radius: var(--r-pill); line-height: 1; }
.beta-why { align-self: flex-start; background: none; border: 0; padding: 0; margin: 0 0 6px; font: inherit; font-size: 12.5px; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.beta-why:hover { color: var(--text); }
.tier .beta-pop { position: absolute; top: 60px; left: 24px; right: 24px; z-index: 5; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-md); padding: 18px 20px 18px; }
.beta-pop p { font-size: 13px; line-height: 1.62; color: var(--text-2); margin: 0 0 12px; }
.beta-pop p:last-child { margin-bottom: 0; }
.beta-heart { color: var(--accent); }
.beta-mail { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }
.beta-mail:hover { text-decoration: underline; }
.beta-mail i { font-size: 15px; }
.beta-pop-x { position: absolute; top: 10px; right: 10px; background: none; border: 0; padding: 4px; line-height: 0; color: var(--text-3); cursor: pointer; font-size: 16px; }
.beta-pop-x:hover { color: var(--text); }
.tier-desc { font-size: 13.5px; color: var(--text-2); min-height: 38px; }
.tier-price { font-family: var(--font-head); font-weight: 700; font-size: 40px; letter-spacing: -.03em; margin: 14px 0 2px; }
.tier-price small { font-size: 15px; font-weight: 500; color: var(--text-3); }
.tier-note { font-size: 12.5px; color: var(--text-3); margin-bottom: 22px; }
.tier ul { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-direction: column; gap: 11px; }
.tier li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--text-2); }
.tier li i { color: var(--accent); font-size: 16px; margin-top: 1px; flex-shrink: 0; }
.tier .btn { margin-top: auto; }

/* ---------- bottom cta ---------- */
.cta { padding: 110px 0; text-align: center; position: relative; overflow: hidden; }
.cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 120% at 50% 100%, var(--accent-soft), transparent 65%); }
.cta h2 { font-size: clamp(34px, 5vw, 56px); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; margin-bottom: 18px; }
.cta p { font-size: 18px; color: var(--text-2); margin-bottom: 32px; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--border); background: var(--bg-2); padding: 56px 0 40px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 44px; }
.footer .logo { font-size: 22px; margin-bottom: 12px; display: inline-flex; }
.footer-blurb { font-size: 14px; color: var(--text-2); line-height: 1.6; max-width: 30ch; }
.footer-col h4 { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: 0 0 16px; }
.footer-col a { display: block; font-size: 14px; color: var(--text-2); padding: 5px 0; transition: color .15s var(--ease); }
.footer-col a:hover { color: var(--text); }
.footer-info { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; padding: 5px 0; font: inherit; font-size: 14px; color: var(--text-2); cursor: pointer; transition: color .15s var(--ease); }
.footer-info i { font-size: 15px; }
.footer-info:hover { color: var(--text); }

/* ---------- info modal ---------- */
.info-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(8,10,18,.62); backdrop-filter: blur(3px); animation: infoFade .18s var(--ease); }
.info-overlay[hidden] { display: none; }
@keyframes infoFade { from { opacity: 0; } to { opacity: 1; } }
.info-modal { position: relative; width: 100%; max-width: 560px; max-height: 86vh; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: 0 30px 80px -30px rgba(0,0,0,.6); display: flex; flex-direction: column; overflow: hidden; animation: infoPop .22s cubic-bezier(.2,.9,.3,1.2); }
@keyframes infoPop { from { transform: translateY(14px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.info-close { position: absolute; top: 14px; right: 14px; z-index: 2; background: var(--bg, rgba(0,0,0,.04)); border: 1px solid var(--border); border-radius: 50%; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-2); cursor: pointer; font-size: 17px; }
.info-close:hover { color: var(--text); border-color: var(--accent); }
.info-scroll { overflow-y: auto; padding: 34px 36px 32px; }
.info-kicker { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.info-h { font-family: var(--font-head); font-size: 24px; font-weight: 700; letter-spacing: -.01em; color: var(--text); margin: 0 0 14px; }
.info-lead { font-size: 15px; line-height: 1.68; color: var(--text-2); margin: 0; }
.info-divider { height: 1px; background: var(--border); margin: 26px 0; }
.info-sub { font-family: var(--font-head); font-size: 17px; font-weight: 600; color: var(--text); margin: 0 0 4px; }
.info-note { font-size: 13.5px; color: var(--text-3); margin: 0 0 18px; }
.info-tools { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 15px; }
.info-tools li { display: flex; gap: 13px; }
.info-tools li i { flex-shrink: 0; color: var(--accent); font-size: 19px; margin-top: 2px; }
.info-glyph { flex-shrink: 0; width: 24px; display: inline-flex; align-items: center; justify-content: center; color: var(--text); margin-top: 1px; }
.info-glyph svg { width: 22px; height: auto; display: block; overflow: visible; }
.info-glyph .eye-svg { width: 23px; }
.info-tools b { display: block; font-size: 14.5px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.info-tools span { display: block; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.info-foot { font-size: 14px; line-height: 1.65; color: var(--text-2); margin: 0; }
.info-heart { color: var(--accent); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 28px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-3); }
.footer-bottom .soc { display: flex; gap: 8px; }
.footer-bottom .soc a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); display: grid; place-items: center; color: var(--text-2); }
.footer-bottom .soc a:hover { color: var(--accent); border-color: var(--accent); }

/* hero split layout (tweak) */
[data-hero="split"] .hero { text-align: left; padding-bottom: 80px; }
[data-hero="split"] .hero-inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
[data-hero="split"] .h1, [data-hero="split"] .hero-sub { margin-left: 0; }
[data-hero="split"] .hero-btns { justify-content: flex-start; }
[data-hero="split"] .hero-preview { margin: 0; max-width: none; }
[data-hero="split"] .badge { margin-bottom: 22px; }
[data-hero="split"] .aw-body { min-height: 320px; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* Skip rendering work for the long stack of below-the-fold sections until
   they're near the viewport. `auto` lets the browser remember each section's
   real size after first render, so the scrollbar stays stable. Keeps scroll
   smooth by not laying out / painting all 11 demos + walkthrough at once. */
.feature, .getkey, .pricing, .cta {
  content-visibility: auto;
  contain-intrinsic-size: auto 640px;
}

/* ===================== BYOK WALKTHROUGH ===================== */
.getkey { padding: 90px 0 30px; border-top: 1px solid var(--border); }
.getkey-head { text-align: center; max-width: 620px; margin: 0 auto 40px; }
.gk-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.getkey-title { font-size: clamp(28px, 3.6vw, 42px); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; margin-bottom: 14px; }
.getkey-title em { font-style: normal; color: var(--accent); }
.getkey-sub { font-size: 16.5px; color: var(--text-2); line-height: 1.6; }

/* provider tabs */
.gk-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 20px; }
.gk-tab { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--text-2); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-pill); padding: 9px 18px; cursor: pointer; transition: color .16s var(--ease), border-color .16s var(--ease), background-color .16s var(--ease); }
.gk-tab:hover { color: var(--text); border-color: var(--text-3); }
.gk-tab.active { color: #fff; background: var(--accent); border-color: var(--accent); box-shadow: 0 8px 20px -10px var(--accent-ring); }
.gk-tab .gk-sub { font-weight: 500; opacity: .7; }
.gk-mono { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 13px; background: rgba(255,255,255,.14); }
.gk-tab:not(.active) .gk-mono.oa { background: #10A37F; color: #fff; }
.gk-tab:not(.active) .gk-mono.cl { background: #D97757; color: #fff; }
/* OpenAI logo (reusable mask) */
.oai-ico { display: inline-block; width: 1em; height: 1em; vertical-align: -0.14em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.18a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .51 4.911 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.99 5.99 0 0 0 3.997-2.9 6.056 6.056 0 0 0-.747-7.073zM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.141-.081 4.779-2.758a.795.795 0 0 0 .392-.681v-6.737l2.02 1.168a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.494 4.494zM3.6 18.304a4.47 4.47 0 0 1-.535-3.014l.142.085 4.783 2.759a.771.771 0 0 0 .78 0l5.843-3.369v2.332a.08.08 0 0 1-.033.062L9.74 19.95a4.5 4.5 0 0 1-6.14-1.646zM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.676l5.815 3.355-2.02 1.168a.076.076 0 0 1-.071.006L4.014 14.02a4.504 4.504 0 0 1-1.674-6.124zm16.597 3.855l-5.833-3.387L15.119 7.2a.076.076 0 0 1 .071-.006l4.83 2.791a4.494 4.494 0 0 1-.676 8.105v-5.678a.79.79 0 0 0-.407-.66zm2.01-3.023l-.141-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.5 4.5 0 0 1 6.68 4.66zM8.305 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.075a4.5 4.5 0 0 1 7.375-3.453l-.142.08L8.704 5.46a.795.795 0 0 0-.393.681zm1.097-2.365l2.602-1.5 2.607 1.5v3l-2.602 1.5-2.607-1.5z'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.18a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .51 4.911 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.99 5.99 0 0 0 3.997-2.9 6.056 6.056 0 0 0-.747-7.073zM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.141-.081 4.779-2.758a.795.795 0 0 0 .392-.681v-6.737l2.02 1.168a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.494 4.494zM3.6 18.304a4.47 4.47 0 0 1-.535-3.014l.142.085 4.783 2.759a.771.771 0 0 0 .78 0l5.843-3.369v2.332a.08.08 0 0 1-.033.062L9.74 19.95a4.5 4.5 0 0 1-6.14-1.646zM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.676l5.815 3.355-2.02 1.168a.076.076 0 0 1-.071.006L4.014 14.02a4.504 4.504 0 0 1-1.674-6.124zm16.597 3.855l-5.833-3.387L15.119 7.2a.076.076 0 0 1 .071-.006l4.83 2.791a4.494 4.494 0 0 1-.676 8.105v-5.678a.79.79 0 0 0-.407-.66zm2.01-3.023l-.141-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.5 4.5 0 0 1 6.68 4.66zM8.305 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.075a4.5 4.5 0 0 1 7.375-3.453l-.142.08L8.704 5.46a.795.795 0 0 0-.393.681zm1.097-2.365l2.602-1.5 2.607 1.5v3l-2.602 1.5-2.607-1.5z'/></svg>") center/contain no-repeat; }
.oa-fav { background: #0d0d0f !important; color: #fff; }
.oa-fav .oai-ico { width: 15px; height: 15px; }
.oai-big { width: 24px; height: 24px; }
/* Anthropic logo (reusable mask — rounded sunburst) */
.anth-ico { display: inline-block; width: 1em; height: 1em; vertical-align: -0.14em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='black'><rect x='11.35' y='1' width='1.3' height='10' rx='0.65' transform='rotate(0 12 12)'/><rect x='11.35' y='2.5' width='1.3' height='8.5' rx='0.65' transform='rotate(26 12 12)'/><rect x='11.35' y='1' width='1.3' height='10' rx='0.65' transform='rotate(51 12 12)'/><rect x='11.35' y='2.5' width='1.3' height='8.5' rx='0.65' transform='rotate(77 12 12)'/><rect x='11.35' y='1' width='1.3' height='10' rx='0.65' transform='rotate(103 12 12)'/><rect x='11.35' y='2.5' width='1.3' height='8.5' rx='0.65' transform='rotate(129 12 12)'/><rect x='11.35' y='1' width='1.3' height='10' rx='0.65' transform='rotate(154 12 12)'/><rect x='11.35' y='2.5' width='1.3' height='8.5' rx='0.65' transform='rotate(180 12 12)'/><rect x='11.35' y='1' width='1.3' height='10' rx='0.65' transform='rotate(206 12 12)'/><rect x='11.35' y='2.5' width='1.3' height='8.5' rx='0.65' transform='rotate(231 12 12)'/><rect x='11.35' y='1' width='1.3' height='10' rx='0.65' transform='rotate(257 12 12)'/><rect x='11.35' y='2.5' width='1.3' height='8.5' rx='0.65' transform='rotate(283 12 12)'/><rect x='11.35' y='1' width='1.3' height='10' rx='0.65' transform='rotate(309 12 12)'/><rect x='11.35' y='2.5' width='1.3' height='8.5' rx='0.65' transform='rotate(334 12 12)'/></g></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='black'><rect x='11.35' y='1' width='1.3' height='10' rx='0.65' transform='rotate(0 12 12)'/><rect x='11.35' y='2.5' width='1.3' height='8.5' rx='0.65' transform='rotate(26 12 12)'/><rect x='11.35' y='1' width='1.3' height='10' rx='0.65' transform='rotate(51 12 12)'/><rect x='11.35' y='2.5' width='1.3' height='8.5' rx='0.65' transform='rotate(77 12 12)'/><rect x='11.35' y='1' width='1.3' height='10' rx='0.65' transform='rotate(103 12 12)'/><rect x='11.35' y='2.5' width='1.3' height='8.5' rx='0.65' transform='rotate(129 12 12)'/><rect x='11.35' y='1' width='1.3' height='10' rx='0.65' transform='rotate(154 12 12)'/><rect x='11.35' y='2.5' width='1.3' height='8.5' rx='0.65' transform='rotate(180 12 12)'/><rect x='11.35' y='1' width='1.3' height='10' rx='0.65' transform='rotate(206 12 12)'/><rect x='11.35' y='2.5' width='1.3' height='8.5' rx='0.65' transform='rotate(231 12 12)'/><rect x='11.35' y='1' width='1.3' height='10' rx='0.65' transform='rotate(257 12 12)'/><rect x='11.35' y='2.5' width='1.3' height='8.5' rx='0.65' transform='rotate(283 12 12)'/><rect x='11.35' y='1' width='1.3' height='10' rx='0.65' transform='rotate(309 12 12)'/><rect x='11.35' y='2.5' width='1.3' height='8.5' rx='0.65' transform='rotate(334 12 12)'/></g></svg>") center/contain no-repeat; }
.anth-big { width: 24px; height: 24px; }
.o-mark .anth-ico, .d-mark .anth-ico { color: #D97757; }

/* decks */
.kdeck { position: absolute; inset: 0; display: none; }
.kdeck.active { display: block; }

/* Claude accents */
.cl-fav { background: #D97757 !important; }
.cl-mark { color: #fff; } .cl-mark::first-letter { color: #D97757; }
.o-mark.cl-mark { color: #f3eee9; }
.klogin.kclaude { background: #1a1714; }
.o-sso-top { margin-bottom: 14px; }
.cl-continue { background: #f3eee9; }
.o-companies { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 34px; font-size: 13px; font-weight: 700; color: #6f6a64; letter-spacing: -.01em; }
.cl-glyph { color: #D97757; }
.kcl-dash .d-build.cl-build { background: transparent; color: #f3eee9; border: 1px solid #2e2a26; display: inline-flex; align-items: center; gap: 6px; }
.kcl-dash .d-build.cl-build i { font-size: 14px; color: #D97757; }
.cl-keycard { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #161310; border: 1px solid #2a2620; border-radius: 12px; padding: 18px 20px; }
.cl-keyh { font-size: 17px; font-weight: 600; color: #f3eee9; margin-bottom: 5px; }
.cl-keyp { font-size: 12.5px; color: #8f877d; max-width: 460px; line-height: 1.5; }
.cl-createkey { background: #f3eee9; color: #1a1714; flex-shrink: 0; }
.cl-ws { gap: 9px; } .cl-ws-dot { width: 13px; height: 13px; border-radius: 4px; background: #7048E8; display: inline-block; margin-right: 9px; }
.kd-close { float: right; color: #8a8a93; font-size: 16px; }
.cl-go { background: #D97757; color: #fff; }
.ks-keybox { display: flex; flex-direction: column; align-items: flex-end; background: #0f0f12; border: 1px solid #2e2e34; border-radius: 8px; padding: 14px; margin-bottom: 6px; }
.ks-keybox .ks-key { display: block; width: 100%; border: 0; background: transparent; padding: 0; white-space: normal; word-break: break-all; line-height: 1.5; margin-bottom: 12px; color: #d8d3cc; }
.cl-copy { background: #2a2620; }

.browser { max-width: 1000px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-lg); }
.br-bar { display: flex; align-items: center; gap: 14px; padding: 11px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.br-traffic { display: flex; gap: 7px; flex-shrink: 0; }
.br-traffic i { width: 11px; height: 11px; border-radius: 50%; background: var(--border-strong); }
.br-url { flex: 1; max-width: 420px; margin: 0 auto; display: flex; align-items: center; gap: 7px; justify-content: center; font-size: 12.5px; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 6px 14px; }
.br-url i { font-size: 13px; color: var(--text-3); }
.br-bar-r { display: flex; gap: 10px; color: var(--text-3); font-size: 15px; flex-shrink: 0; }

/* stage */
.br-stage { position: relative; width: 100%; aspect-ratio: 16 / 10; background: #0d0d0f; overflow: hidden; }
.kscreen { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .4s var(--ease); }
.kscreen.active { opacity: 1; z-index: 2; }
.kcaret { display: inline-block; width: 1.5px; height: 1em; background: currentColor; vertical-align: -2px; margin-left: 1px; animation: blink .9s steps(1) infinite; }

/* fake cursor */
.kcursor { position: absolute; left: 50%; top: 50%; z-index: 20; color: #fff; font-size: 22px; opacity: 0; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); pointer-events: none; transition: left .55s var(--ease), top .55s var(--ease), opacity .25s var(--ease), transform .12s var(--ease); }
.kcursor.tap { transform: scale(.8); }

/* 1 — Google search */
.ksearch { background: #202124; display: grid; place-items: center; }
.g-wrap { width: 100%; max-width: 460px; text-align: center; }
.g-logo { font-size: 44px; font-weight: 500; color: #fff; letter-spacing: -.02em; margin-bottom: 26px; font-family: var(--font-body); }
.g-logo span:first-child { color: #4285F4; }
.g-search { display: flex; align-items: center; gap: 12px; background: #303134; border: 1px solid #5f6368; border-radius: 24px; padding: 11px 18px; color: #e8eaed; font-size: 16px; }
.g-search > i:first-child { color: #9aa0a6; }
.g-q { white-space: nowrap; }
.g-icons { margin-left: auto; display: flex; gap: 14px; color: #8ab4f8; }

/* 2 — results */
.kresults { background: #202124; color: #e8eaed; padding: 22px 32px; }
.r-top { display: flex; align-items: center; gap: 22px; margin-bottom: 14px; }
.r-logo { font-size: 22px; font-weight: 500; color: #fff; }
.r-pill { flex: 1; max-width: 460px; display: flex; align-items: center; gap: 10px; background: #303134; border-radius: 22px; padding: 9px 18px; font-size: 14px; color: #e8eaed; }
.r-pill i { margin-left: auto; color: #8ab4f8; }
.r-tabs { display: flex; gap: 22px; font-size: 12.5px; color: #9aa0a6; border-bottom: 1px solid #3c4043; padding-bottom: 9px; margin-bottom: 18px; }
.r-tabs .on { color: #8ab4f8; border-bottom: 2px solid #8ab4f8; padding-bottom: 9px; margin-bottom: -11px; }
.r-result { display: block; cursor: pointer; margin-bottom: 16px; }
.r-site { display: flex; align-items: center; gap: 11px; margin-bottom: 5px; }
.r-fav { width: 26px; height: 26px; border-radius: 50%; background: #1a73e8; color: #fff; display: grid; place-items: center; font-size: 13px; }
.r-name { font-size: 13px; color: #e8eaed; }
.r-link { font-size: 12px; color: #9aa0a6; }
.r-h { font-size: 19px; color: #99c3ff; margin: 3px 0 4px; }
.r-snip { font-size: 13px; color: #bdc1c6; line-height: 1.5; max-width: 600px; }
.r-sub { display: flex; align-items: center; justify-content: space-between; max-width: 600px; border-top: 1px solid #3c4043; padding: 11px 2px; font-size: 14px; color: #c7cacd; }
.r-sub i { color: #9aa0a6; }

/* 3 — login */
.klogin { background: #000; color: #ececf1; }
.o-top { padding: 18px 26px; font-size: 16px; }
.o-mark { font-weight: 700; }
.o-mark-2 { color: #b4b4c4; }
.o-center { max-width: 320px; margin: 4% auto 0; text-align: center; }
.o-h { font-size: 23px; font-weight: 700; margin-bottom: 8px; }
.o-p { font-size: 13px; color: #9b9ba6; line-height: 1.5; margin-bottom: 20px; }
.o-field { text-align: left; font-size: 13px; color: #6f6f7a; background: #0d0d0f; border: 1px solid #2a2a30; border-radius: 24px; padding: 12px 18px; margin-bottom: 12px; }
.o-continue { width: 100%; background: #fff; color: #000; border: 0; border-radius: 24px; padding: 12px; font-size: 14px; font-weight: 600; margin-bottom: 16px; }
.o-or { position: relative; font-size: 11px; color: #6f6f7a; margin: 8px 0 16px; }
.o-or::before, .o-or::after { content: ""; position: absolute; top: 50%; width: 42%; height: 1px; background: #2a2a30; }
.o-or::before { left: 0; } .o-or::after { right: 0; }
.o-sso { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; background: transparent; color: #ececf1; border: 1px solid #2a2a30; border-radius: 24px; padding: 11px; font-size: 13.5px; margin-bottom: 9px; }
.sso-i { width: 18px; height: 18px; border-radius: 50%; background: #fff; color: #4285F4; display: grid; place-items: center; font-size: 12px; font-weight: 700; }

/* 4 — choose account */
.kaccount { background: #1f1f1f; display: grid; place-items: center; padding: 24px; }
.ga-card { width: 100%; max-width: 560px; background: #131314; border: 1px solid #2a2a2e; border-radius: 14px; overflow: hidden; }
.ga-head { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-bottom: 1px solid #2a2a2e; font-size: 13px; color: #c7c7cc; }
.ga-g { font-weight: 700; color: #4285F4; }
.ga-body { display: grid; grid-template-columns: 0.85fr 1fr; gap: 18px; padding: 26px 24px; }
.ga-logo { font-size: 24px; margin-bottom: 16px; }
.ga-title { font-size: 24px; color: #e3e3e3; line-height: 1.15; margin-bottom: 8px; }
.ga-to { font-size: 13px; color: #9aa0a6; }
.ga-right { display: flex; flex-direction: column; }
.ga-acct { display: flex; align-items: center; gap: 13px; padding: 11px 8px; border-bottom: 1px solid #2a2a2e; cursor: pointer; }
.ga-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.ga-ghost { background: #2a2a2e !important; color: #9aa0a6; }
.ga-meta { display: flex; flex-direction: column; line-height: 1.3; }
.ga-meta b { font-size: 13.5px; font-weight: 500; color: #e3e3e3; }
.ga-meta span { font-size: 12px; color: #9aa0a6; }
.ga-out { margin-left: auto; font-size: 11px; color: #9aa0a6; }
.ga-other { border-bottom: 0; }

/* 5+6 — platform dashboard / keys */
.kdash, .kkeys { background: #0d0d0f; color: #ececec; }
.d-top { display: flex; align-items: center; justify-content: space-between; padding: 11px 20px; border-bottom: 1px solid #1f1f24; }
.d-mark { font-size: 14px; } .d-mark b { font-weight: 700; }
.d-build { font-size: 12px; background: #fff; color: #000; border-radius: 18px; padding: 5px 14px; font-weight: 600; }
.d-body { display: grid; grid-template-columns: 168px 1fr; height: calc(100% - 45px); }
.d-rail { border-right: 1px solid #1f1f24; padding: 12px 10px; font-size: 12.5px; overflow: hidden; }
.ri-row { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 8px; color: #b4b4bb; margin-bottom: 1px; }
.ri-row i { font-size: 15px; color: #8a8a93; }
.ri-row.on { background: #1f1f26; color: #fff; }
.ri-row.on i { color: #fff; }
.ri-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #6a6a72; padding: 12px 10px 5px; }
.d-main { padding: 20px 26px; overflow: hidden; }
.d-h { display: flex; align-items: center; justify-content: space-between; font-size: 22px; font-weight: 600; margin-bottom: 20px; }
.d-create { font-size: 12.5px; font-weight: 600; background: #fff; color: #000; border: 0; border-radius: 8px; padding: 8px 13px; display: inline-flex; align-items: center; gap: 6px; }
.d-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.d-card { background: #141418; border: 1px solid #1f1f24; border-radius: 10px; padding: 14px; }
.d-card span { font-size: 12px; color: #8a8a93; display: block; margin-bottom: 8px; }
.d-card b { font-size: 22px; font-weight: 600; } .d-card small { font-size: 13px; color: #6a6a72; font-weight: 400; }
.d-models { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.d-model { background: #141418; border: 1px solid #1f1f24; border-radius: 10px; padding: 18px 16px; display: flex; align-items: center; gap: 10px; font-size: 14px; }
.d-model i { font-size: 18px; color: #8a8a93; }
.d-newkey i { font-size: 14px; }
.k-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 70%; text-align: center; }
.k-empty-ic { width: 48px; height: 48px; border-radius: 10px; background: #18181d; display: grid; place-items: center; color: #8a8a93; font-size: 20px; margin-bottom: 16px; }
.k-empty-h { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.k-empty-p { font-size: 13px; color: #8a8a93; }

/* 7+8 — dialogs */
.kdialog, .ksave { background: #0d0d0f; }
.kd-dim { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.kd-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 380px; max-width: 86%; background: #1c1c20; border: 1px solid #2e2e34; border-radius: 14px; padding: 20px 22px; box-shadow: 0 30px 70px -20px rgba(0,0,0,.7); }
.kd-title { font-size: 17px; font-weight: 600; color: #fff; margin-bottom: 16px; }
.kd-lbl { font-size: 12px; font-weight: 600; color: #c7c7cc; margin: 13px 0 7px; }
.kd-lbl small { font-weight: 400; color: #8a8a93; }
.kd-seg { display: inline-flex; background: #0f0f12; border: 1px solid #2e2e34; border-radius: 8px; padding: 3px; gap: 2px; }
.kd-seg span { font-size: 12.5px; color: #b4b4bb; padding: 6px 14px; border-radius: 6px; }
.kd-seg span.on { background: #34343c; color: #fff; }
.kd-input { background: #0f0f12; border: 1px solid #2e2e34; border-radius: 8px; padding: 10px 12px; font-size: 13px; color: #ececec; min-height: 38px; display: flex; align-items: center; }
.kd-select { justify-content: space-between; color: #c7c7cc; } .kd-select i { color: #8a8a93; }
.kd-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.kd-cancel { background: transparent; border: 1px solid #2e2e34; color: #ececec; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 500; }
.kd-go { background: #fff; color: #000; border: 0; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 600; }
.ks-warn { font-size: 12.5px; color: #b4b4bb; line-height: 1.55; margin: 0 0 16px; }
.ks-keyrow { display: flex; gap: 9px; margin-bottom: 6px; }
.ks-key { flex: 1; background: #0f0f12; border: 1px solid #2e2e34; border-radius: 8px; padding: 10px 12px; font-family: ui-monospace, monospace; font-size: 12.5px; color: #c7c7cc; overflow: hidden; white-space: nowrap; }
.ks-copy { background: #34343c; color: #fff; border: 0; border-radius: 8px; padding: 0 15px; font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.ks-copy.done { background: #16a34a; }
.ks-perm { font-size: 13px; color: #c7c7cc; }
.ks-toast { position: absolute; left: 50%; bottom: 18px; transform: translate(-50%, 16px); display: inline-flex; align-items: center; gap: 8px; background: #16a34a; color: #fff; font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 10px; box-shadow: 0 16px 30px -12px rgba(0,0,0,.5); opacity: 0; transition: opacity .3s var(--ease), transform .3s var(--ease); z-index: 21; }
.ks-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* caption */
.br-caption { display: flex; align-items: center; gap: 14px; padding: 14px 20px; background: var(--surface); border-top: 1px solid var(--border); }
.brc-step { font-size: 12px; font-weight: 700; color: #fff; background: var(--accent); border-radius: 20px; padding: 4px 11px; flex-shrink: 0; }
.brc-text { font-size: 14px; font-weight: 500; color: var(--text); }
.brc-dots { margin-left: auto; display: flex; gap: 6px; }
.brc-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); transition: background-color .2s var(--ease), width .2s var(--ease); }
.brc-dots i.on { background: var(--accent); width: 18px; border-radius: 4px; }

@media (max-width: 820px) {   /* raised from 760 so iPad portrait (768) gets the stacked demo mocks */
  .br-caption { flex-wrap: wrap; }
  .ga-body { grid-template-columns: 1fr; }
  .d-body { grid-template-columns: 120px 1fr; }
}


/* responsive */
@media (max-width: 900px) {
  .wrap { padding: 0 22px; }
  .nav-links { display: none; }
  .feature, [data-hero="split"] .hero-inner { grid-template-columns: 1fr; gap: 36px; }
  .feature.reverse .feat-copy { order: 1; }
  .feature.reverse .feat-demo { order: 2; }
  .tiers, .footer-grid { grid-template-columns: 1fr; }
  .aw-panes { grid-template-columns: 1fr; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ============================================================
   RESPONSIVE REFINEMENTS — added 2026-07-07.
   Phone (≤600/520px) + tablet overrides ONLY. Desktop (>1024px)
   is untouched — every rule here is inside a max-width media query.
   ============================================================ */

/* Top nav overflowed the phone and forced sideways scroll — collapse the
   right-side cluster (toggles + Log in) so it fits. Logo + primary CTA stay. */
@media (max-width: 600px) {
  .nav-inner { gap: 10px; }
  .nav .theme-toggle,
  .nav .settings { display: none; }
  #nav-login { display: none; }
  .auth-actions .btn-sm { padding: 8px 14px; }
}

/* Hero reader demo: keep its floating player / voice list / comment card inside
   the phone-width app frame instead of spilling out and being clipped. */
@media (max-width: 520px) {
  .rd-player { min-width: 0; left: 8px; right: 8px; padding: 10px 12px; }
  .rd-voices { width: auto; left: 8px; right: 8px; }
  .comment-card { display: none; }
}

/* "Get your API key" walkthrough mock: give it portrait height and stack the
   dashboard grids so the mock screens stay legible on a phone. */
@media (max-width: 520px) {
  .br-stage { aspect-ratio: 3 / 4; }
  .d-body { grid-template-columns: 82px 1fr; }
  .d-h { font-size: 15px; margin-bottom: 12px; }
  .d-cards, .d-models { grid-template-columns: 1fr; }
  .g-logo { font-size: 30px; }
  .ga-body { grid-template-columns: 1fr; }
}

/* Tighter vertical rhythm + comfortable (≥40px) tap targets on phones. */
@media (max-width: 760px) {
  .hero { padding: 56px 0 24px; }
  .feature { padding: 48px 0; }
  .pricing { padding: 56px 0; }
  .cta { padding: 64px 0; }
  .footer-bottom .soc a { width: 40px; height: 40px; }
  .bill-toggle .bt-opt { padding: 11px 18px; }
}

/* ============================================================
   HUMANISER REVEAL — ported from the app so the homepage demo
   matches: scan beam → robotic ghost dissolves → words cascade
   in word-by-word, rewritten phrases pulse in the accent.
   ============================================================ */
#h-output.hw-stage { position: relative; }
.hw-scan {
  position: absolute; left: -6px; right: -6px; top: 0; height: 38px; z-index: 4; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--accent) 13%, transparent) 42%, color-mix(in srgb, var(--accent) 30%, transparent) 50%, color-mix(in srgb, var(--accent) 13%, transparent) 58%, transparent 100%);
}
.hw-scan::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%);
  background: color-mix(in srgb, var(--accent) 82%, #fff);
  box-shadow: 0 0 10px 1px color-mix(in srgb, var(--accent) 60%, transparent);
}
.hw-scan.run { animation: hwScan var(--scan-dur, 1.9s) cubic-bezier(.45,0,.25,1) forwards; }
@keyframes hwScan { 0% { opacity: 0; transform: translateY(0); } 9% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(var(--scan-end, 380px)); } }
.hw-ghost {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 14.5px; line-height: 1.7;
  color: var(--text-3); white-space: pre-wrap; letter-spacing: .01em; filter: saturate(.4);
}
.hw-ghost.out { animation: hwGhostOut .52s ease forwards; }
@keyframes hwGhostOut { to { opacity: 0; filter: blur(7px) saturate(.4); transform: translateY(-3px); } }
.hw-words { position: relative; z-index: 1; }
.hw-word { display: inline-block; opacity: 0; filter: blur(5px); transform: translateY(8px); will-change: opacity, transform, filter; }
.hw-word.in { animation: hwWordIn .44s cubic-bezier(.2,.85,.25,1) forwards; }
@keyframes hwWordIn { to { opacity: 1; filter: blur(0); transform: none; } }
.hw-word.swap { border-radius: 4px; padding: 0 2px; margin: 0 -1px; }
.hw-word.swap.in { animation: hwWordIn .44s cubic-bezier(.2,.85,.25,1) forwards, hwSwapGlow 1.15s ease .08s 1; }
@keyframes hwSwapGlow {
  0%, 100% { background: transparent; box-shadow: 0 0 0 0 transparent; color: inherit; }
  28% { background: color-mix(in srgb, var(--accent) 20%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent); }
  60% { color: inherit; }
}
/* Changed words stay COLOURED + dash-underlined after the reveal — the 8-colour
   palette cycles across them, mirroring the real AI Humaniser's output so the
   homepage demo actually shows the word-by-word rewriting. */
.hw-word.hw-sw { font-weight: 600; border-bottom: 2px dashed currentColor; border-radius: 2px; }
.hw-word.hw-c1 { color: var(--accent); }
.hw-word.hw-c2 { color: #16A34A; }
.hw-word.hw-c3 { color: #E8890C; }
.hw-word.hw-c4 { color: #EC4899; }
.hw-word.hw-c5 { color: #8B5CF6; }
.hw-word.hw-c6 { color: #14B8A6; }
.hw-word.hw-c7 { color: #0EA5E9; }
.hw-word.hw-c8 { color: #F43F5E; }
#h-output.hw-stage.done { animation: hwBloom .6s cubic-bezier(.3,1.3,.5,1); }
@keyframes hwBloom { 0% { transform: scale(1); } 35% { transform: scale(1.012); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .hw-scan, .hw-ghost, .hw-word, #h-output.hw-stage.done { animation: none !important; }
  .hw-word { opacity: 1; filter: none; transform: none; }
  .hw-scan, .hw-ghost { display: none; }
}

/* ============================================================
   TOOL GLYPHS — the in-app animated logos, ported to the homepage
   (toolbelt chips + hero preview rail + feature headers).
   Resting state is a clean static vector; chips animate on hover.
   ============================================================ */
.glyph-svg, .eye-svg { width: 22px; height: auto; display: block; overflow: visible; }
.eye-svg { width: 23px; }
/* Reading Helper — eye */
.eye-line { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.eye-iris { fill: var(--accent); }
.eye-all { transform-box: fill-box; transform-origin: center; }
/* AI Humaniser — fingerprint heart */
.heart-line { fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; }
.heart-mid { transform: scale(.6); }
.heart-fill { fill: var(--accent); }
.heart-in { transform-box: fill-box; transform-origin: center; transform: scale(.3); }
.heart-all { transform-box: fill-box; transform-origin: center; }
/* Plagiarism — stacked docs */
.pl-svg * { transform-box: fill-box; }
.pl-back, .pl-back-lines { fill: none; stroke: currentColor; stroke-width: 3.5; }
.pl-back-lines { stroke-linecap: round; }
.pl-front-rect { fill: var(--doc-fill, var(--surface)); stroke: var(--accent); stroke-width: 3.5; }
.pl-line { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 24; stroke-dashoffset: 0; }
.pl-front { transform-origin: 50% 50%; }
.pl-l1 { animation-delay: 0s; } .pl-l2 { animation-delay: .4s; } .pl-l3 { animation-delay: .8s; }
/* Translator — globe */
.tr-svg * { transform-box: fill-box; }
.tr-out { fill: none; stroke: currentColor; stroke-width: 2.2; }
.tr-eq { fill: none; stroke: currentColor; stroke-width: 1.8; }
.tr-m1 { fill: none; stroke: currentColor; stroke-width: 2; }
.tr-m2 { fill: none; stroke: var(--accent); stroke-width: 2; }
.tr-globe, .tr-mer { transform-origin: 50% 50%; }
/* Grammar — pencil */
.pe-svg *, .ds-svg *, .sc-svg *, .bk-svg *, .pr-svg * { transform-box: fill-box; }
.pe-pencil { transform-origin: 5% 96%; }
.pe-line { stroke-dasharray: 24; stroke-dashoffset: 0; stroke-linecap: round; }
/* AI Detection — scanned page */
.ds-scan, .ds-lines { transform-box: fill-box; }
/* Presentations — chart */
.sc-b1, .sc-b2, .sc-b3 { transform-origin: 50% 100%; }
/* Citations — bookmark */
.bk-mark { transform-origin: 50% 0%; }
/* Paraphraser — cycle */
.pr-cycle { transform-origin: 50% 50%; }
/* Essay Drafter — sprout/tree */
.sprout-leaf { fill: var(--accent); }
.sprout-stem { fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; }
.leaf-l, .leaf-r { transform-box: view-box; transform-origin: 16px 15px; }
.tree-trunk { fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; }
.tree-canopy circle { fill: var(--accent); }
.sprout-stage, .tree-stage { transform-box: view-box; transform-origin: 16px 34px; }
.tree-stage { opacity: 0; transform: scale(0); }

/* glyphs in the toolbelt chips */
.chip .ci svg { width: 18px; height: auto; }
.chip .ci { overflow: hidden; }
.chip:hover .ci { background: var(--accent-soft); color: var(--accent); }
.chip:hover .heart-all { animation: heartPulse 2.4s ease-in-out infinite; }
.chip:hover .pe-pencil { animation: peHover 1.15s linear infinite; }
.chip:hover .pe-line { animation: peWrite 1.15s linear infinite; }
.chip:hover .pr-cycle { animation: prRock 3.5s ease-in-out infinite; }
.chip:hover .eye-gaze { animation: eyeLook 4.2s ease-in-out infinite; }
.chip:hover .ds-scan { animation: dsMove 2.6s ease-in-out infinite; }
.chip:hover .pl-line { animation: plWrite 3s ease-in-out infinite; }
.chip:hover .bk-mark { animation: bkSway 3s ease-in-out infinite; }
.chip:hover .tr-mer { animation: trSpin 7s linear infinite; }
.chip:hover .sc-b1 { animation: scLive1 2.4s ease-in-out infinite; }
.chip:hover .sc-b2 { animation: scLive2 2.4s ease-in-out infinite; }
.chip:hover .sc-b3 { animation: scLive3 2.4s ease-in-out infinite; }
.chip:hover .leaf-l { animation: leafSwayL 3.4s ease-in-out infinite; }
.chip:hover .leaf-r { animation: leafSwayR 3.9s ease-in-out infinite; }
@keyframes heartPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }
@keyframes peHover { 0% { transform: translateX(-4px) translateY(0) rotate(-6deg); } 12% { transform: translateX(-2.5px) translateY(-1.2px) rotate(-1deg); } 24% { transform: translateX(-1px) translateY(.6px) rotate(-5deg); } 36% { transform: translateX(.5px) translateY(-1px) rotate(0deg); } 48% { transform: translateX(2px) translateY(.5px) rotate(-4deg); } 60% { transform: translateX(3.2px) translateY(-1px) rotate(1deg); } 72% { transform: translateX(4px) translateY(.4px) rotate(-3deg); } 84% { transform: translateX(2px) translateY(-1.2px) rotate(-1deg); } 100% { transform: translateX(-4px) translateY(0) rotate(-6deg); } }
@keyframes peWrite { 0% { stroke-dashoffset: 24; } 12% { stroke-dashoffset: 20; } 24% { stroke-dashoffset: 18; } 36% { stroke-dashoffset: 13; } 48% { stroke-dashoffset: 10; } 60% { stroke-dashoffset: 6; } 72% { stroke-dashoffset: 0; } 86% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 24; } }
@keyframes prRock { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
@keyframes eyeLook { 0%,12% { transform: translateX(0); } 26%,40% { transform: translateX(-5.5px); } 54%,60% { transform: translateX(0); } 74%,88% { transform: translateX(5.5px); } 100% { transform: translateX(0); } }
@keyframes dsMove { 0% { transform: translateY(0); } 50% { transform: translateY(22px); } 100% { transform: translateY(0); } }
@keyframes plWrite { 0% { stroke-dashoffset: 24; } 30% { stroke-dashoffset: 0; } 78% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 24; } }
@keyframes bkSway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes trSpin { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }
@keyframes scLive1 { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.25); } }
@keyframes scLive2 { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.8); } }
@keyframes scLive3 { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.15); } }
@keyframes leafSwayL { 0%, 100% { transform: rotate(2deg); } 50% { transform: rotate(-9deg); } }
@keyframes leafSwayR { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(9deg); } }

/* auto-play the same glyph animations when the toolbelt is in view */
.chips.playing .chip .ci { background: var(--accent-soft); color: var(--accent); }
.chips.playing .heart-all { animation: heartPulse 2.4s ease-in-out infinite; }
.chips.playing .pe-pencil { animation: peHover 1.15s linear infinite; }
.chips.playing .pe-line { animation: peWrite 1.15s linear infinite; }
.chips.playing .pr-cycle { animation: prRock 3.5s ease-in-out infinite; }
.chips.playing .eye-gaze { animation: eyeLook 4.2s ease-in-out infinite; }
.chips.playing .ds-scan { animation: dsMove 2.6s ease-in-out infinite; }
.chips.playing .pl-line { animation: plWrite 3s ease-in-out infinite; }
.chips.playing .bk-mark { animation: bkSway 3s ease-in-out infinite; }
.chips.playing .tr-mer { animation: trSpin 7s linear infinite; }
.chips.playing .sc-b1 { animation: scLive1 2.4s ease-in-out infinite; }
.chips.playing .sc-b2 { animation: scLive2 2.4s ease-in-out infinite; }
.chips.playing .sc-b3 { animation: scLive3 2.4s ease-in-out infinite; }
.chips.playing .leaf-l { animation: leafSwayL 3.4s ease-in-out infinite; }
.chips.playing .leaf-r { animation: leafSwayR 3.9s ease-in-out infinite; }
/* desync the chips so the row feels alive, not metronomic */
.chips.playing .chip:nth-child(3) * { animation-delay: -.9s; }
.chips.playing .chip:nth-child(4) * { animation-delay: -1.3s; }
.chips.playing .chip:nth-child(5) * { animation-delay: -.6s; }
.chips.playing .chip:nth-child(6) * { animation-delay: -1.7s; }
.chips.playing .chip:nth-child(7) * { animation-delay: -1.1s; }
.chips.playing .chip:nth-child(8) * { animation-delay: -2s; }
.chips.playing .chip:nth-child(9) * { animation-delay: -.8s; }
.chips.playing .chip:nth-child(10) * { animation-delay: -1.5s; }
@media (prefers-reduced-motion: reduce) { .chip:hover .heart-all, .chip:hover .pe-pencil, .chip:hover .pe-line, .chip:hover .pr-cycle, .chip:hover .eye-gaze, .chip:hover .ds-scan, .chip:hover .pl-line, .chip:hover .bk-mark, .chip:hover .tr-mer, .chip:hover .sc-b1, .chip:hover .sc-b2, .chip:hover .sc-b3, .chip:hover .leaf-l, .chip:hover .leaf-r, .chips.playing .heart-all, .chips.playing .pe-pencil, .chips.playing .pr-cycle, .chips.playing .eye-gaze, .chips.playing .ds-scan, .chips.playing .pl-line, .chips.playing .bk-mark, .chips.playing .tr-mer, .chips.playing .sc-b1, .chips.playing .sc-b2, .chips.playing .sc-b3, .chips.playing .leaf-l, .chips.playing .leaf-r { animation: none; } }

/* glyphs in the hero preview rail — two-tone, accent on the active item */
.aw-rail .ri svg { width: 20px; height: auto; }
.aw-rail .ri { --doc-fill: var(--surface-2); }
.aw-rail .ri.active { --doc-fill: var(--accent-soft); }

/* ============================================================
   NEW DEMO PRIMITIVES — AI Detection · Plagiarism · Drafter ·
   Citations · Translator
   ============================================================ */
/* sentence heatmap + scan (ported from the app's AI Detection tool) */
:root { --ad-lo: #16A34A; --ad-mid: #D97706; --ad-hi: #DC2626; }
[data-theme="dark"] { --ad-lo: #22C55E; --ad-mid: #F59E0B; --ad-hi: #F0584E; }
.det-stage { position: relative; }
.ad-sent {
  border-radius: 3px; padding: 1px 1px; box-decoration-break: clone; -webkit-box-decoration-break: clone;
  background: transparent; box-shadow: inset 0 -2px 0 transparent;
  opacity: .4; transition: opacity .35s var(--ease), background-color .45s var(--ease), box-shadow .45s var(--ease);
}
.ad-sent.in { opacity: 1; }
.ad-sent.lo  { background: color-mix(in srgb, var(--ad-lo) 14%, transparent);  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--ad-lo) 55%, transparent); }
.ad-sent.mid { background: color-mix(in srgb, var(--ad-mid) 17%, transparent); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--ad-mid) 60%, transparent); }
.ad-sent.hi  { background: color-mix(in srgb, var(--ad-hi) 17%, transparent);  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--ad-hi) 60%, transparent); }
/* scanning beam that sweeps top→bottom while sentences resolve */
.det-scan {
  position: absolute; left: -6px; right: -6px; top: 0; height: 40px; z-index: 3; pointer-events: none; opacity: 0; border-radius: 6px;
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--accent) 13%, transparent) 44%, color-mix(in srgb, var(--accent) 28%, transparent) 50%, color-mix(in srgb, var(--accent) 13%, transparent) 56%, transparent 100%);
}
.det-scan::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); background: color-mix(in srgb, var(--accent) 82%, #fff); box-shadow: 0 0 10px 1px color-mix(in srgb, var(--accent) 55%, transparent); }
.det-scan.run { animation: detScan var(--scan-dur, 1.9s) cubic-bezier(.45,0,.25,1) forwards; }
@keyframes detScan { 0% { opacity: 0; transform: translateY(0); } 9% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(var(--scan-end, 150px)); } }
@media (prefers-reduced-motion: reduce) { .det-scan { display: none; } .ad-sent { opacity: 1; transition: none; } }
/* (the flat left-right verdict slider that used to live here was removed — the
   AI-detection demo now uses the semicircular .det-gauge below, and nothing else
   on the homepage referenced .gauge / .gauge-track / .gauge-mark / .gauge-scale.) */
/* app-style verdict hero + semicircular gauge (homepage AI-detection demo) —
   ports the real AI Detector's gauge: verdict word on top, an arc with a marker
   that rides the curve, the big centred AI-likelihood %, and the human % below. */
.det-result { display: none; margin-top: 16px; text-align: center; }
.det-hero-word { font-family: var(--font-head); font-weight: 700; font-size: 26px; letter-spacing: -.02em; line-height: 1.1; color: var(--amber-text); }
.det-gauge-wrap { margin: 12px auto 2px; max-width: 300px; }
.det-gauge { width: 100%; height: auto; display: block; overflow: visible; }
.det-gauge-num { fill: var(--text); font-family: var(--font-head); font-weight: 800; font-size: 40px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.det-gauge-cap { fill: var(--text-3); font-size: 13px; font-weight: 600; }
.det-gauge-end { fill: var(--text-3); font-size: 11px; font-weight: 600; letter-spacing: .02em; }
/* NO cx/cy transition: the marker is driven every frame by setMark() so it rides
   the ARC. A CSS transition would lerp cx and cy independently = a straight chord. */
.det-gauge-mark { fill: var(--surface); stroke: var(--text); stroke-width: 3; }
.det-hero-sub { margin-top: 5px; font-size: 18px; font-weight: 700; color: var(--success-text); font-variant-numeric: tabular-nums; }
/* demo: highlight-to-humanize pill + emphasized red sentence */
.det-stage { position: relative; }
.det-hl { box-shadow: 0 0 0 2px color-mix(in srgb, var(--error) 70%, transparent); border-radius: 4px; }
.det-humpill { position: absolute; z-index: 6; transform: translate(-50%, -100%); display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-body); font-weight: 600; font-size: 11.5px; color: #fff; background: var(--accent); border: 0; border-radius: var(--r-pill, 999px); padding: 5px 11px; box-shadow: 0 8px 20px -6px rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity .18s var(--ease), transform .14s var(--ease); }
.det-humpill.show { opacity: 1; animation: detPillIn .2s var(--ease); }
.det-humpill.press { transform: translate(-50%, -100%) scale(.9); filter: brightness(.92); }
.det-humpill::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--accent); }
.dhp-heart { width: 13px; height: 12px; color: #fff; }
@keyframes detPillIn { from { opacity: 0; transform: translate(-50%, -85%); } to { opacity: 1; transform: translate(-50%, -100%); } }
/* plagiarism match rows */
.pl-stage { position: relative; }
.pl-sent { opacity: .4; transition: opacity .35s var(--ease), background-color .4s var(--ease), box-shadow .4s var(--ease); border-radius: 3px; padding: 1px 1px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.pl-sent.in { opacity: 1; }
.pl-sent.lit { background: color-mix(in srgb, var(--ad-hi, #F4574A) 17%, transparent); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--ad-hi, #F4574A) 60%, transparent); }
.pl-scan { position: absolute; left: -6px; right: -6px; top: 0; height: 40px; z-index: 3; pointer-events: none; opacity: 0; border-radius: 6px; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 26%, transparent) 50%, transparent); }
.pl-scan::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); background: color-mix(in srgb, var(--accent) 82%, #fff); box-shadow: 0 0 10px 1px color-mix(in srgb, var(--accent) 55%, transparent); }
.pl-scan.run { animation: detScan var(--scan-dur, 2.1s) cubic-bezier(.45,0,.25,1) forwards; }
.pl-result { display: none; margin-top: 14px; }
.pl-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pl-matched { font-size: 14px; color: var(--text-2); line-height: 1.5; }
.pl-matched b { font-family: var(--font-head); font-weight: 700; font-size: 22px; color: var(--ad-hi, var(--error)); letter-spacing: -.02em; }
.pl-sim { background: color-mix(in srgb, var(--ad-hi, #F4574A) 80%, #000); color: #fff; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 3px; }
.pl-ai { flex-shrink: 0; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-input); padding: 8px 14px; }
.pl-ai b { display: block; font-family: var(--font-head); font-weight: 700; font-size: 20px; color: var(--ad-lo, var(--success)); letter-spacing: -.02em; }
.pl-ai span { font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.pl-note { display: flex; gap: 7px; margin-top: 13px; font-size: 11px; line-height: 1.5; color: var(--text-3); }
.pl-note i { font-size: 14px; flex-shrink: 0; }
.pl-note b { color: var(--text-2); font-weight: 700; }
.matches { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.match { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-input); padding: 9px 12px; opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.match.on { opacity: 1; transform: none; }
.match-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.match-src { display: flex; align-items: center; gap: 7px; color: var(--text-2); min-width: 0; }
/* real site favicon (Google s2 service) over a coloured letter fallback — matches
   the app's Plagiarism sources; onerror hides the img so the letter shows through. */
.ms-fav { position: relative; overflow: hidden; width: 18px; height: 18px; border-radius: 3px; background: #3B5BDB; color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; flex-shrink: 0; }
.ms-fav-ltr { line-height: 1; }
.ms-fav-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 2px; box-sizing: border-box; }
.match-src b { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-url { color: var(--text-3); font-size: 11px; white-space: nowrap; }
.match-pct { font-weight: 700; font-family: var(--font-head); flex-shrink: 0; color: var(--amber); text-align: right; line-height: 1.1; }
.match-pct small { display: block; font-family: var(--font-body); font-size: 8.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.match-bar { height: 5px; border-radius: 3px; background: var(--border); margin-top: 7px; overflow: hidden; }
.match-bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--amber); transition: width .8s var(--ease); }

/* essay drafter demo */
.drd-modes { display: flex; gap: 6px; margin-bottom: 14px; }
.drd-mode { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--font-body); font-weight: 600; font-size: 12.5px; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-input); padding: 8px; cursor: pointer; transition: all .15s var(--ease); }
.drd-mode i { font-size: 15px; }
.drd-mode.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.drd-thesis { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-input); padding: 10px 12px; font-size: 12.5px; line-height: 1.5; color: var(--text); min-height: 40px; }
.drd-caret { display: inline-block; width: 1px; height: 14px; background: var(--accent); vertical-align: -2px; animation: citeBlink 1s step-end infinite; }
.drd-points { display: flex; flex-direction: column; gap: 7px; }
.drd-point { display: flex; align-items: stretch; gap: 0; opacity: 0; transform: translateY(8px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.drd-point.in { opacity: 1; transform: none; }
.drd-pn { flex-shrink: 0; width: 26px; display: grid; place-items: center; background: var(--accent); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 12px; border-radius: var(--r-input) 0 0 var(--r-input); }
.drd-ptext { flex: 1; background: var(--surface); border: 1px solid var(--border); border-left: 0; border-radius: 0 var(--r-input) var(--r-input) 0; padding: 8px 11px; font-size: 12px; line-height: 1.45; color: var(--text-2); }
.drd-quote { background: var(--surface); border: 1px solid var(--border); border-left: 2px solid var(--accent); border-radius: var(--r-input); padding: 9px 12px; font-size: 12px; line-height: 1.5; color: var(--text-2); font-style: italic; min-height: 20px; }
.drd-expand { width: 100%; margin-top: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-weight: 700; font-size: 13.5px; color: #fff; background: var(--accent); border: 0; border-radius: var(--r-input); padding: 12px; cursor: pointer; transition: transform .12s var(--ease), filter .15s var(--ease); }
.drd-expand i { font-size: 16px; }
.drd-expand.press { transform: scale(.97); filter: brightness(.92); }
/* loading scene */
.drd-loading { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 26px 0; }
.drd-load-page { width: 150px; background: #fff; border-radius: 4px; box-shadow: 0 10px 30px -12px rgba(0,0,0,.5); padding: 18px 16px; display: flex; flex-direction: column; gap: 7px; }
.drd-load-page span { height: 5px; border-radius: 2px; background: #e6e9ef; transform-origin: left; animation: drdWrite 2s var(--ease) infinite; animation-delay: var(--d, 0s); }
.drd-load-page span:first-child { height: 8px; width: 60%; margin: 0 auto 5px; background: #2f3640; }
.drd-load-page span.sh { width: 62%; }
@keyframes drdWrite { 0% { transform: scaleX(0); opacity: .4; } 30% { transform: scaleX(1); opacity: 1; } 85% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(0); opacity: .4; } }
.drd-load-txt { font-family: var(--font-head); font-weight: 600; font-size: 13.5px; color: var(--text-2); }
/* draft document */
.drd-draft-head { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 8px; }
.drd-draft-head i { color: var(--accent); font-size: 15px; }
.drd-draft-head span { color: var(--text-3); font-weight: 500; }
.drd-paper { background: #fff; color: #21262e; font-family: Georgia, "Times New Roman", serif; border-radius: 4px; padding: 22px 26px; max-height: 320px; overflow-y: auto; box-shadow: 0 1px 2px rgba(0,0,0,.14), 0 14px 36px -18px rgba(0,0,0,.5); }
.drd-paper-title { font-family: Georgia, serif; font-size: 16px; font-weight: 700; text-align: center; line-height: 1.3; color: #11151b; margin: 0 0 7px; }
.drd-paper-rq { font-style: italic; text-align: center; color: #49515d; font-size: 11.5px; line-height: 1.5; margin: 0 auto 16px; max-width: 92%; }
.drd-paper-h { font-family: Georgia, serif; font-size: 13px; font-weight: 700; color: #11151b; margin: 14px 0 6px; padding-bottom: 3px; border-bottom: 1px solid #e3e6eb; }
.drd-paper p { font-size: 12px; line-height: 1.7; margin: 0 0 11px; text-align: justify; }
.drd-paper .drd-ref { font-size: 11px; padding-left: 1.6em; text-indent: -1.6em; }
.drd-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.drd-actions button { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-body); font-weight: 600; font-size: 11.5px; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-input); padding: 7px 11px; cursor: pointer; transition: color .15s var(--ease), border-color .15s var(--ease); }
.drd-actions button:hover { color: var(--text); border-color: var(--text-3); }
.drd-actions button i { font-size: 14px; color: var(--accent); }
.drd-actions .drd-dl { margin-left: auto; color: #fff; background: var(--accent); border-color: var(--accent); }
.drd-actions .drd-dl i { color: #fff; }
/* drafter — feature field rows */
.drd-req { color: var(--accent); font-weight: 600; font-size: 10px; text-transform: none; letter-spacing: .01em; margin-left: 4px; }
.drd-opts { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.drd-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.drd-opt-l { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--text-3); }
.drd-opt-l i { font-size: 14px; }
.drd-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.drd-seg button { font-family: var(--font-body); font-size: 11px; font-weight: 600; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 4px 9px; cursor: default; }
.drd-seg button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.drd-src { display: flex; align-items: center; gap: 7px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-input); padding: 8px 11px; font-size: 12px; color: var(--text-2); }
.drd-src i { color: var(--text-3); font-size: 14px; }
.drd-rowset { display: flex; flex-direction: column; gap: 7px; margin-top: 11px; }
.drd-rr { display: flex; align-items: center; gap: 9px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-input); padding: 8px 11px; }
.drd-rr-l { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--accent); flex-shrink: 0; }
.drd-rr-l i { font-size: 14px; }
.drd-rr-v { font-size: 12px; color: var(--text-2); min-width: 0; }
.drd-sections { display: flex; flex-wrap: wrap; gap: 6px; }
.drd-sec { font-size: 11px; font-weight: 600; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill, 999px); padding: 4px 10px; opacity: 0; transform: translateY(5px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.drd-sec.in { opacity: 1; transform: none; }
.drd-wc { font-family: var(--font-head); font-weight: 700; font-size: 13px; color: var(--accent); font-variant-numeric: tabular-nums; }
.drd-range { height: 5px; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; margin-top: 6px; }
.drd-range i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
/* drafter — app-quality input chrome */
.drd-opt-sub { color: var(--text-3); font-weight: 500; font-size: 10.5px; text-transform: none; letter-spacing: .005em; margin-left: 4px; }
.drd-addrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.drd-add { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--accent); border: 1px dashed var(--accent-ring, color-mix(in srgb, var(--accent) 40%, transparent)); border-radius: var(--r-input); padding: 7px 12px; }
.drd-add.ghost { color: var(--text-2); border-color: var(--border-strong, var(--border)); }
.drd-add i { font-size: 15px; }
.drd-srcs { display: flex; flex-direction: column; gap: 7px; }
.drd-srcrow { display: flex; align-items: center; gap: 0; }
.drd-srcn { flex-shrink: 0; width: 28px; align-self: stretch; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); border-right: 0; border-radius: var(--r-input) 0 0 var(--r-input); font-family: var(--font-head); font-weight: 700; font-size: 12px; color: var(--text-3); }
.drd-srcph { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--border); padding: 9px 11px; font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drd-srcx { flex-shrink: 0; width: 30px; align-self: stretch; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); border-left: 0; border-radius: 0 var(--r-input) var(--r-input) 0; color: var(--text-3); font-size: 15px; }
/* priority quote block */
.drd-qblock { display: flex; gap: 0; }
.drd-qfields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.drd-qtext { background: var(--surface); border: 1px solid var(--border); border-radius: 0 var(--r-input) 0 0; padding: 9px 11px; min-height: 38px; font-size: 12px; font-style: italic; color: var(--text); }
.drd-qtext:empty::before, .drd-qtext:has(.drd-caret:only-child)::before { content: "Paste the quote — keep it short…"; color: var(--text-3); font-style: italic; }
.drd-qsrc { background: var(--surface); border: 1px solid var(--border); border-radius: 0 0 var(--r-input) var(--r-input); padding: 8px 11px; font-size: 11.5px; color: var(--text-2); }
.drd-qsrc:empty::before { content: "Source — author, work, year"; color: var(--text-3); }
.drd-qblock .drd-srcn { border-radius: var(--r-input) 0 0 var(--r-input); }
/* figure / chart media rows */
.drd-media { display: flex; align-items: stretch; gap: 8px; }
.drd-media .drd-srcn { border-radius: var(--r-input); border-right: 1px solid var(--border); }
.drd-drop { flex-shrink: 0; width: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: var(--surface); border: 1px dashed var(--border-strong, var(--border)); border-radius: var(--r-input); color: var(--text-3); font-size: 10.5px; font-weight: 600; }
.drd-drop i { font-size: 18px; color: var(--accent); }
.drd-mfields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.drd-mfields .drd-srcph { border-radius: var(--r-input); }
.drd-sections { display: flex; flex-direction: column; gap: 7px; }
.drd-sec { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-input); padding: 8px 11px; font-size: 12px; color: var(--text); opacity: 0; transform: translateY(5px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.drd-sec.in { opacity: 1; transform: none; }
/* drafter outline → paragraph */
.dr-pt { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--text-2); padding: 7px 0; }
.dr-pt i { color: var(--accent); font-size: 15px; margin-top: 2px; flex-shrink: 0; }
.dr-para { margin-bottom: 10px; }
.dr-para .dr-h { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; display: block; }
/* citations output */
.cite-input { display: flex; gap: 8px; margin-bottom: 12px; }
.cite-field { flex: 1; display: inline-flex; align-items: center; gap: 7px; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-input); padding: 0 12px; height: 42px; font-size: 13px; color: var(--text); overflow: hidden; white-space: nowrap; }
.cite-field > i { color: var(--text-3); font-size: 15px; flex-shrink: 0; }
.cite-field #cite-typed:empty::before { content: "Paste a URL, DOI, or ISBN…"; color: var(--text-3); }
.cite-caret { width: 1px; background: var(--accent); align-self: center; height: 17px; animation: citeBlink 1s step-end infinite; }
@keyframes citeBlink { 50% { opacity: 0; } }
.cite-add { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-weight: 600; font-size: 13px; color: #fff; background: var(--accent); border: 0; border-radius: var(--r-input); padding: 0 15px; cursor: pointer; transition: transform .12s var(--ease), filter .15s var(--ease); }
.cite-add i { font-size: 16px; }
.cite-add.press { transform: scale(.94); filter: brightness(.92); }
.cite-src { display: flex; gap: 11px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-input); padding: 10px 12px; margin-bottom: 12px; opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.cite-src.in { opacity: 1; transform: none; }
.cite-src .cs-ico { width: 34px; height: 44px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 18px; flex-shrink: 0; }
.cite-src .cs-meta { flex: 1; min-width: 0; }
.cite-src .cs-meta b { display: block; font-size: 13px; color: var(--text); }
.cite-src .cs-meta span { font-size: 11.5px; color: var(--text-3); }
.cite-src .cs-filed { width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); display: grid; place-items: center; font-size: 14px; flex-shrink: 0; opacity: 0; transform: scale(.4); transition: opacity .3s var(--ease) .15s, transform .3s var(--ease) .15s; }
.cite-src .cs-filed.show { opacity: 1; transform: none; }
.cite-styles { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.cite-styles .mode-tabs { margin-bottom: 0; }
.cite-out { font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; line-height: 1.7; color: var(--text); }
.pres-dl-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 9px; font-size: 11.5px; color: var(--text-3); }
.pres-dl-note i { font-size: 13px; }
.cite-out .hang { padding-left: 26px; text-indent: -26px; }
.cite-copy { margin-top: 12px; display: none; }
/* translator */
.tl-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.tl-lang { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 6px 13px; }
.tl-lang .fl { font-size: 15px; }
.tl-bar .tl-swap { color: var(--accent); font-size: 16px; display: grid; place-items: center; }
.vocab { margin-top: 12px; display: none; flex-wrap: wrap; gap: 7px; }
.vchip { display: inline-flex; align-items: baseline; gap: 6px; font-size: 12px; background: var(--accent-soft); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 4px 11px; opacity: 0; transform: translateY(5px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.vchip.on { opacity: 1; transform: none; }
.vchip b { color: var(--accent); font-weight: 700; }
.vchip span { color: var(--text-2); }