/* Voila — marketing site.
   Design language mirrors the extension's widget: shadcn "zinc" palette, Inter,
   14px radius, light + dark via prefers-color-scheme. */

:root {
  --bg: hsl(0 0% 100%);
  --fg: hsl(240 10% 3.9%);          /* headings / strong text */
  --text: hsl(240 5% 26%);          /* body copy (softer than fg) */
  --muted-fg: hsl(240 3.8% 46.1%);  /* secondary text */
  --border: hsl(240 5.9% 90%);
  --accent: #0062ff;                /* link blue, from the widget */
  --radius: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: hsl(240 10% 3.9%);
    --fg: hsl(0 0% 98%);
    --text: hsl(240 5% 82%);
    --muted-fg: hsl(240 5% 64.9%);
    --border: hsl(240 3.7% 16.9%);
    --accent: #4d90ff;              /* lifted blue for dark surfaces */
  }
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

/* ---- Logo tile -------------------------------------------------------------
   The pixel mark sits on a black tile. We clip with the wrapper's radius and
   give it depth (a soft drop in light, a defining ring in dark). */
.logo {
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 12px 28px -14px rgba(0, 0, 0, 0.4);
}
.logo svg { display: block; width: 100%; height: 100%; }

@media (prefers-color-scheme: dark) {
  .logo { box-shadow: 0 0 0 1px var(--border), 0 12px 28px -14px rgba(0, 0, 0, 0.7); }
}

/* ===========================================================================
   Landing (hero)
   =========================================================================== */
.page-hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.hero {
  flex: 1;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 56px 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 64px;
}

/* Left column: brand, headline, description, CTA */
.hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.brand .logo { width: 44px; height: 44px; border-radius: 12px; display: block; }
.brand-name { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg); }

.hero h1 {
  font-size: clamp(38px, 5vw, 58px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.03;
  color: var(--fg);
}

.desc {
  margin-top: 22px;
  width: 100%;
  max-width: 27rem;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.55;
  color: var(--muted-fg);
}

/* Primary CTA — opens X (@lucchaissac) to request beta access. */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 34px;
  padding: 12px 20px;
  border-radius: 11px;
  background: #18181b;
  color: #fafafa;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 10px 22px -12px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s, box-shadow 0.15s;
}
.cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16), 0 14px 26px -12px rgba(0, 0, 0, 0.4);
}
.cta:active { transform: translateY(0); }
.cta svg { width: 16px; height: 16px; }

@media (prefers-color-scheme: dark) {
  .cta {
    background: #fafafa;
    color: #18181b;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 22px -12px rgba(0, 0, 0, 0.65);
  }
}

/* ---- Right column: the real app widget, rebuilt as a static front-end preview.
   Markup + values lifted from the extension's ChatWidget.tsx (true 396px scale,
   real icons). It's just front — not functional. ---- */
.hero-widget { width: 396px; max-width: 100%; min-width: 0; }

.widget {
  --w-card: #ffffff;
  --w-fg: #09090b;
  --w-icon: #52525b;
  --w-icon-strong: #1a202c;
  --w-muted: #71717a;
  --w-faint: #a1a1aa;
  --w-bubble: #f2f2f2;
  --w-border: #e4e4e7;
  --w-accent: #0062ff;
  --w-accent-bg: rgba(0, 98, 255, 0.1);
  --w-send-bg: #18181b;
  --w-send-fg: #ffffff;
  --w-ring: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 17px 18px -12px rgba(0, 0, 0, 0.08);
  width: 100%;
  background: var(--w-card);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--w-fg);
  box-shadow: var(--w-ring);
}
.widget .ic { display: block; flex: none; }
.widget .ic svg { display: block; width: 100%; height: 100%; }

/* Header — chats button, Agent / Tokens tabs, collapse */
.w-head { display: flex; align-items: center; gap: 10px; padding: 12px; }
.w-head .icon-btn { display: flex; flex: none; padding: 6px; border-radius: 12px; color: var(--w-icon); }
.w-head .icon-btn .ic { width: 16px; height: 16px; }
.w-tabs {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: -0.64px;
  color: var(--w-fg);
}
.w-tabs .muted { opacity: 0.5; }

/* Messages */
.w-body { display: flex; flex-direction: column; gap: 14px; padding: 16px 16px 12px; }
.w-msg { display: flex; flex-direction: column; gap: 4px; }
.w-msg.user { align-items: flex-end; padding-left: 56px; }
.w-msg.assistant { align-items: flex-start; }
.bubble {
  max-width: 100%;
  border-radius: 20px;
  background: var(--w-bubble);
  color: var(--w-fg);
  padding: 9px 16px;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: -0.11px;
  white-space: pre-wrap;
  word-break: break-word;
}
.w-tool { padding-top: 6px; font-size: 13px; line-height: 17px; color: var(--w-fg); opacity: 0.5; }
.w-reply { padding: 2px 0; font-size: 15px; line-height: 21px; color: var(--w-fg); word-break: break-word; }
.w-reply code {
  border-radius: 4px;
  background: color-mix(in srgb, var(--w-fg) 8%, transparent);
  padding: 2px 4px;
  font-family: inherit;
  color: var(--w-fg);
}
.w-mods { display: flex; align-items: center; gap: 8px; padding-top: 2px; }
.w-mods .icon-btn { display: flex; align-items: center; justify-content: center; padding: 4px; border-radius: 6px; color: var(--w-muted); }
.w-mods .icon-btn .ic { width: 16px; height: 16px; }

/* Composer */
.composer { padding: 0 12px 12px; }
.composer-box {
  display: flex;
  flex-direction: column;
  background: var(--w-card);
  border: 1px solid var(--w-border);
  border-radius: 12px;
  padding: 7px;
}
.chip {
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  background: var(--w-accent-bg);
  border-radius: 6px;
  padding: 6px 6px 6px 8px;
}
.chip .ic { width: 14px; height: 14px; color: var(--w-accent); }
.chip .label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  font-size: 11.5px;
  line-height: 16px;
  color: var(--w-accent);
}
.chip .x { display: flex; flex: none; padding: 2px; border-radius: 4px; color: var(--w-accent); }
.chip .x .ic { width: 14px; height: 14px; }
.composer-input {
  padding: 8px 8px 4px;
  font-size: 14.5px;
  line-height: 20px;
  letter-spacing: -0.11px;
  color: var(--w-muted);
}
.composer-actions { display: flex; align-items: center; justify-content: space-between; }
.w-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 6px; }
.w-btn .ic { width: 18px; height: 18px; }
.w-btn.pick { color: var(--w-icon-strong); }
.w-btn.send { background: var(--w-send-bg); color: var(--w-send-fg); opacity: 0.35; }

/* Model selector (left) + handle (right) */
.w-modelrow { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; padding: 0 4px; }
.w-model { padding: 0 4px; font-size: 12.5px; font-weight: 500; letter-spacing: -0.64px; color: var(--w-fg); }
.w-handle { padding: 0 4px; font-size: 12.5px; color: var(--w-faint); text-decoration: none; }
/* Footer (matches the app): "Show tweaks" switch + "Reset all changes" | model */
.w-foot-left { display: flex; align-items: center; gap: 10px; padding-left: 4px; }
.w-toggle { display: flex; align-items: center; gap: 6px; }
.w-toggle-label, .w-reset { font-size: 12.5px; font-weight: 500; letter-spacing: -0.64px; color: var(--w-fg); }
.w-switch { display: flex; align-items: center; width: 17px; height: 10px; padding: 1px; border-radius: 999px; background: var(--w-send-bg); flex: none; }
.w-switch i { width: 8px; height: 8px; border-radius: 50%; background: #fafafa; transform: translateX(7px); box-shadow: 0 0.5px 1.5px rgba(0, 0, 0, 0.05); }

@media (prefers-color-scheme: dark) {
  .widget {
    --w-card: #1f1f23;
    --w-fg: #f4f4f5;
    --w-icon: #a1a1aa;
    --w-icon-strong: #e4e4e7;
    --w-muted: #a1a1aa;
    --w-faint: #a1a1aa;
    --w-bubble: #2c2c31;
    --w-border: #34343a;
    --w-accent: #4d90ff;
    --w-accent-bg: rgba(77, 144, 255, 0.18);
    --w-send-bg: #fafafa;
    --w-send-fg: #18181b;
    --w-ring: 0 0 0 1px rgba(255, 255, 255, 0.13), 0 17px 18px -12px rgba(0, 0, 0, 0.55);
  }
}

.site-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 24px 24px 32px;
  font-size: 13px;
  color: var(--muted-fg);
}
.foot-note, .foot-links { color: var(--muted-fg); }
.site-footer a {
  color: var(--muted-fg);
  text-decoration: none;
  transition: color 0.15s;
}
.site-footer a:hover { color: var(--fg); }

/* ---- Responsive: stack text over the widget on narrow screens ---- */
@media (max-width: 880px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
    text-align: center;
    padding: 48px 24px 24px;
  }
  .hero-text { align-items: center; }
  .hero-widget { width: 100%; max-width: 396px; justify-self: center; }
}

/* Staggered entrance — text rises in, the widget settles a beat later. */
@media (prefers-reduced-motion: no-preference) {
  .hero-text > * { animation: rise 0.55s cubic-bezier(0.2, 0.6, 0.2, 1) both; }
  .hero-text .brand { animation-delay: 0.02s; }
  .hero-text h1 { animation-delay: 0.08s; }
  .hero-text .desc { animation-delay: 0.14s; }
  .hero-text .cta { animation-delay: 0.2s; }
  .hero-widget { animation: rise-widget 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.12s both; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes rise-widget {
  from { opacity: 0; transform: translateY(16px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

/* ===========================================================================
   Document pages (privacy)
   =========================================================================== */
.doc-wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 56px 24px 96px;
}

.doc-header {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 52px;
}
.doc-header .logo { width: 32px; height: 32px; border-radius: 8px; }
.doc-header .brand {
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-decoration: none;
}

.doc h1 {
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--fg);
  margin-bottom: 8px;
}
.doc .updated {
  color: var(--muted-fg);
  font-size: 14px;
  margin-bottom: 36px;
}
.doc .lead { font-size: 17px; }

.doc h2 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 40px 0 12px;
}

.doc p { margin-bottom: 14px; }
.doc ul { margin: 0 0 16px; padding-left: 22px; }
.doc li { margin: 7px 0; }
.doc li::marker { color: var(--muted-fg); }

.doc a {
  color: var(--accent);
  text-decoration: none;
}
.doc a:hover { text-decoration: underline; }

.doc code {
  font-family: ui-monospace, 'SF Mono', 'Geist Mono', Menlo, monospace;
  font-size: 0.875em;
  background: color-mix(in srgb, var(--muted-fg) 14%, transparent);
  padding: 0.1em 0.4em;
  border-radius: 5px;
}

/* Click-to-copy email — looks like a link, behaves like a button. */
.copy-email {
  font: inherit;
  color: var(--accent);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.copy-email:hover { text-decoration: underline; }
.copy-email:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
.copy-feedback {
  display: inline-block;
  margin-left: 8px;
  font-size: 13px;
  color: var(--muted-fg);
  opacity: 0;
  transform: translateY(1px);
  transition: opacity 0.15s, transform 0.15s;
}
.copy-feedback.show {
  opacity: 1;
  transform: none;
}

.doc-footer {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.doc-footer a { color: var(--muted-fg); text-decoration: none; }
.doc-footer a:hover { color: var(--fg); }

/* ===========================================================================
   Help page (/help) — feature explainer with the widget pinned alongside
   =========================================================================== */
.help-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

.help-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 48px;
}
.help-header .brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.help-header .brand .logo { width: 32px; height: 32px; border-radius: 8px; }
.help-header .brand-name { font-weight: 600; letter-spacing: -0.01em; color: var(--fg); }
.help-nav { display: flex; gap: 22px; font-size: 14px; }
.help-nav a { color: var(--muted-fg); text-decoration: none; transition: color 0.15s; }
.help-nav a:hover { color: var(--fg); }

.help-intro { max-width: 620px; margin-bottom: 44px; }
.help-intro h1 {
  font-size: clamp(32px, 4.6vw, 46px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--fg);
}
.help-intro p {
  margin-top: 16px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--text);
}

/* ---- Stepper: steps left, the live widget stage right ---- */
.help-stepper {
  display: grid;
  grid-template-columns: minmax(0, 280px) 1fr;
  gap: 48px;
  align-items: start;
}

/* Left — the steps */
.steps { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.step {
  position: relative;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
  padding: 14px 18px 16px 18px;
  border-radius: 14px;
  transition: none;
}
.step::before { display: none; }
.step-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.step-desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted-fg);
}
.step:hover:not(.active) { background: color-mix(in srgb, var(--muted-fg) 3.5%, transparent); }
.step.active { background: color-mix(in srgb, var(--muted-fg) 5.5%, transparent); }
.step.active::before { color: var(--bg); background: var(--fg); }
.step.active .step-title { color: var(--fg); }

/* (progress bars removed — the stepper auto-advances on a timer instead) */

kbd {
  font-family: ui-monospace, 'SF Mono', 'Geist Mono', Menlo, monospace;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: inherit;
  background: color-mix(in srgb, var(--muted-fg) 16%, transparent);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 6px;
}

/* Right — the stage (fixed-height widget that morphs per step) */
/* The widget sits in a light-grey block (room for a live-page demo later).
   It reads as a preview, not a control: default cursor, nothing selectable. */
.stage {
  position: relative;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 36px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--fg) 5%, var(--bg));
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}
.stage .hero-widget { width: 396px; flex: none; }
.help-stepper .widget { height: 540px; }

/* Left of the stage — a single CTA on the "page". The cursor points at it, a
   prompt is typed, then it restyles (step 1). Home logic: point → prompt → change. */
.demo-target { flex: none; }
.dt-btnwrap { position: relative; display: inline-block; }
.dt-btn {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background-color: #18181b;
  border-radius: 8px;
  padding: 10px 22px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  transition: background-color 0.5s ease, border-radius 0.5s cubic-bezier(0.34, 1.4, 0.5, 1);
}
/* Selection overlay — picker.ts box(): 1px solid #0062ff, no radius, no fill. */
.dt-sel {
  position: absolute;
  inset: -3px;
  box-sizing: border-box;
  pointer-events: none;
  border: 1px solid #0062ff;
  opacity: 0;
  transition: opacity 0.14s;
}
.dt-label {
  position: absolute;
  left: -1px;
  top: -25px;
  pointer-events: none;
  white-space: nowrap;
  background: #0062ff;
  color: #fff;
  font: 500 11px ui-monospace, Menlo, monospace;
  padding: 2px 6px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 0.1s;
}
/* Selection shows once the cursor clicks the CTA (step 1). */
.demo-target.picked .dt-sel,
.demo-target.picked .dt-label { opacity: 1; }
/* The result — the CTA becomes a red pill. */
.demo-target.applied .dt-btn { background-color: #e11d48; border-radius: 999px; color: #fff; }
/* In dark mode the CTA is a light button so it stays visible on the dark stage. */
@media (prefers-color-scheme: dark) {
  .dt-btn { background-color: #fafafa; color: #18181b; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); }
}

.w-views { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--w-card);
}
.view-agent { z-index: 1; }
.view-agent .w-body { flex: 1; min-height: 0; }
/* Tokens slides up to cover the chat (no see-through crossfade) */
.view-tokens {
  z-index: 2;
  transform: translateY(101%);
  transition: none;
}
.help-stepper[data-step='4'] .view-tokens { transform: translateY(0); }

/* Header tabs reflect the active view */
.tab-agent, .tab-tokens { transition: none; }
.tab-tokens, .help-stepper[data-step='4'] .tab-agent { opacity: 0.5; }
.help-stepper[data-step='4'] .tab-tokens { opacity: 1; }

/* Composer input swaps text per step */
.composer-input { position: relative; }
.composer-input .seg { display: none; }
.composer-input .typed { color: var(--w-fg); }
.composer-input .ph { color: var(--w-muted); }
.composer-input .mention { color: var(--w-accent); font-weight: 500; }
.help-stepper[data-step='1'] .composer-input .ph,
.help-stepper[data-step='5'] .composer-input .ph { display: inline; }
.help-stepper[data-step='2'] .composer-input .at,
.help-stepper[data-step='3'] .composer-input .sl { display: inline; }
.composer-input .caret {
  display: none;
  width: 1.5px;
  height: 1em;
  margin-left: 1px;
  vertical-align: -2px;
  background: var(--w-accent);
  animation: caret-blink 1.05s steps(1) infinite;
}
.help-stepper[data-step='2'] .composer-input .at .caret,
.help-stepper[data-step='3'] .composer-input .sl .caret { display: inline-block; }
@keyframes caret-blink { 50% { opacity: 0; } }

/* ── Step 1, acted out in order: click the CTA → type a prompt → send → result ─ */

/* The pick button is lit only while pointing (before the CTA is selected). */
.help-stepper[data-step='1']:not(.s1-picked) .w-btn.pick { background: var(--w-accent-bg); color: var(--w-accent); }

/* The target chip appears once the CTA is picked. */
.help-stepper[data-step='1'] .chip { display: none; }
.help-stepper[data-step='1'].s1-picked .chip { display: inline-flex; }

/* The prompt types into the composer, then clears once it is sent. */
.help-stepper[data-step='1'].s1-typing:not(.s1-sent) .composer-input .ph { display: none; }
.help-stepper[data-step='1'].s1-typing:not(.s1-sent) .composer-input .s1 { display: inline; }
.help-stepper[data-step='1'].s1-typing:not(.s1-sent) .composer-input .s1 .caret { display: inline-block; }
.help-stepper[data-step='1'].s1-typing:not(.s1-sent) .composer-input .s1 .typed {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  max-width: 0;
  animation: s1-type 1.6s steps(26) forwards;
}
@keyframes s1-type { to { max-width: 220px; } }
/* Send button reads as enabled while a prompt is waiting to go. */
.help-stepper[data-step='1'].s1-typing:not(.s1-sent) .w-btn.send { color: var(--w-accent); }

/* The thread is empty until the prompt is sent; then a Working… beat, then the reply. */
.help-stepper .view-agent .w-working { display: none; }
.help-stepper[data-step='1'] .w-body { visibility: hidden; }
.help-stepper[data-step='1'].s1-sent .w-body { visibility: visible; }
.help-stepper[data-step='1'].s1-sent:not(.s1-done) .w-tool,
.help-stepper[data-step='1'].s1-sent:not(.s1-done) .w-reply,
.help-stepper[data-step='1'].s1-sent:not(.s1-done) .w-mods { display: none; }
.help-stepper[data-step='1'].s1-sent:not(.s1-done) .w-working { display: block; }

/* Suggestion menus (@ and /) — pop above the composer */
.menu-pop {
  position: absolute;
  left: 6px;
  bottom: calc(100% + 7px);
  min-width: 196px;
  max-width: 300px;
  padding: 4px;
  border-radius: 10px;
  background: var(--w-card);
  box-shadow: var(--w-ring);
  opacity: 0;
  transform: translateY(6px) scale(0.97);
  transform-origin: bottom left;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
  z-index: 5;
}
.help-stepper[data-step='2'] .at-menu,
.help-stepper[data-step='3'] .slash-menu { opacity: 1; transform: none; }
.menu-item {
  display: block;
  width: 100%;
  text-align: left;
  border-radius: 7px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--w-fg);
}
.at-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14px 72px;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  border-radius: 7px;
  padding: 6px 10px;
}
.menu-item.sel, .at-item.sel { background: var(--w-hover); }
.at-item .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; color: var(--w-fg); }
.at-item .sw { width: 13px; height: 13px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); justify-self: center; }
.at-item .vl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--w-muted); font-family: ui-monospace, 'SF Mono', Menlo, monospace; }

/* Copy actions light up + a "Copied!" toast (step 5) */
.w-mods { position: relative; }
.help-stepper[data-step='5'] .w-mods .icon-btn:first-child { color: var(--w-accent); }
.copied-toast {
  position: absolute;
  right: 0;
  top: 50%;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  background: var(--w-send-bg);
  color: var(--w-send-fg);
  opacity: 0;
  transform: translateY(-50%) translateX(6px) scale(0.96);
  transition: opacity 0.28s, transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}
.help-stepper:not(.choreo)[data-step='5'] .copied-toast,
.help-stepper.choreo.toast-on .copied-toast { opacity: 1; transform: translateY(-50%) scale(1); }

/* Tokens view */
.view-tokens { padding: 0; }
.tokens-inner { display: flex; flex-direction: column; height: 100%; padding: 14px 20px; overflow: hidden; }
.tokens-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tokens-head .count { font-size: 12px; color: var(--w-muted); }
.tokens-head .acts { display: flex; align-items: center; gap: 12px; }
.tok-toggle { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--w-fg); }
.tok-switch { position: relative; width: 22px; height: 13px; border-radius: 9999px; background: #18181b; }
.tok-switch::after { content: ''; position: absolute; top: 1.5px; left: 10px; width: 10px; height: 10px; border-radius: 50%; background: #fafafa; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.tok-reset { font-size: 12px; color: var(--w-fg); padding: 4px 10px; border-radius: 6px; }
.tokens-list { display: flex; flex-direction: column; margin-top: 8px; }
.tok-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; }
.tok-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 500; color: var(--w-fg); font-family: ui-monospace, 'SF Mono', Menlo, monospace; }
.tok-val { display: flex; align-items: center; gap: 7px; flex: none; width: 136px; height: 30px; padding: 0 9px; border-radius: 8px; background: var(--w-bubble); font-size: 12px; font-weight: 500; color: var(--w-fg); }
.tok-val .sw { width: 16px; height: 16px; border-radius: 4px; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
@media (prefers-color-scheme: dark) { .tok-switch { background: #4d90ff; } }
@media (prefers-reduced-motion: no-preference) {
  .help-stepper[data-step='4'] .tok-row { animation: rise 0.5s cubic-bezier(0.2, 0.6, 0.2, 1) both; }
  .help-stepper[data-step='4'] .tok-row:nth-child(2) { animation-delay: 0.04s; }
  .help-stepper[data-step='4'] .tok-row:nth-child(3) { animation-delay: 0.08s; }
  .help-stepper[data-step='4'] .tok-row:nth-child(4) { animation-delay: 0.12s; }
  .help-stepper[data-step='4'] .tok-row:nth-child(5) { animation-delay: 0.16s; }
}

.help-cta { margin-top: 72px; text-align: center; }
.help-cta .cta { margin-top: 0; }

@media (max-width: 900px) {
  .help-stepper { grid-template-columns: 1fr; gap: 36px; }
  .stage { order: -1; justify-self: center; }
  .step { padding-bottom: 16px; }
  .help-header { margin-bottom: 36px; }
}

/* Small screens — drop the page mock and re-centre the widget. */
@media (max-width: 700px) {
  .stage { justify-content: center; }
  .demo-target { display: none; }
}

/* Honor reduced motion — no auto-advance, no view animation */
@media (prefers-reduced-motion: reduce) {
  .step.active .step-progress > span { animation: none; width: 100%; }
  .view, .menu-pop, .copied-toast { transition: none; }
  .composer-input .caret { animation: none; }
  .w-cursor { display: none; }
}

/* ===========================================================================
   Help stepper — self-playing choreography (cursor, progression, polish)
   =========================================================================== */
.stage .widget { position: relative; }

/* A faux cursor that performs each step — JS-driven, hidden without JS/motion */
.w-cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  z-index: 30;
  pointer-events: none;
  translate: 150px 300px;
  opacity: 0;
  transition: translate 0.72s cubic-bezier(0.5, 0.05, 0.2, 1), scale 0.14s ease, opacity 0.45s;
  will-change: translate;
}
.help-stepper.choreo .w-cursor { opacity: 1; }
.w-cursor svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); }
.w-cursor.press { scale: 0.8; }

/* Left progression — completed steps get a check */
.step.done::before { content: '✓'; color: var(--bg); background: color-mix(in srgb, var(--fg) 42%, transparent); }

/* Live token tweak (step 4) — the edited value lights up */
.tok-val { transition: color 0.25s, box-shadow 0.25s; }
.tok-row.bump .tok-val { color: var(--w-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--w-accent) 45%, transparent); }

/* Entrance */
@media (prefers-reduced-motion: no-preference) {
  .help-intro { animation: rise 0.55s cubic-bezier(0.2, 0.6, 0.2, 1) both; }
  .steps .step { animation: rise 0.5s cubic-bezier(0.2, 0.6, 0.2, 1) both; }
  .steps .step:nth-child(1) { animation-delay: 0.05s; }
  .steps .step:nth-child(2) { animation-delay: 0.1s; }
  .steps .step:nth-child(3) { animation-delay: 0.15s; }
  .steps .step:nth-child(4) { animation-delay: 0.2s; }
  .steps .step:nth-child(5) { animation-delay: 0.25s; }
  .stage { animation: rise-widget 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both; }
}

/* ===========================================================================
   Landing — top nav + hero + a browser frame with the real product
   (Figma node 44:4493, always-light demo scene)
   =========================================================================== */
.landing { max-width: 1080px; margin: 0 auto; padding: 30px 24px 90px; }

/* Top nav */
.ld-nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 58px; }
.ld-nav-left { display: flex; align-items: center; gap: 24px; min-width: 0; }
.ld-brand { display: flex; align-items: center; gap: 6px; flex: none; text-decoration: none; }
.ld-logo { width: 16px; height: 16px; flex: none; display: block; }
.ld-brand-name { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg); }
.ld-links { display: flex; align-items: center; gap: 24px; font-size: 14px; }
.ld-links a { color: var(--fg); text-decoration: none; white-space: nowrap; transition: opacity 0.15s; }
.ld-links a:hover { opacity: 0.55; }
.ld-cta-top { flex: none; font-size: 14px; font-weight: 500; color: var(--fg); text-decoration: none; white-space: nowrap; background: #f6f6f6; padding: 8px 12px; border-radius: 6px; transition: background 0.15s; }
.ld-cta-top:hover { background: #ececec; }

/* Hero — headline left, description right */
.ld-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 56px; }
.ld-hero-main { min-width: 0; }
.ld-h1 { font-size: clamp(32px, 4.6vw, 52px); font-weight: 600; line-height: 1.097; letter-spacing: -0.018em; color: var(--fg); }
.ld-desc { max-width: 550px; margin-top: 20px; font-size: 16px; line-height: 24px; color: var(--fg); }
.ld-hero-cta { flex: none; display: flex; gap: 12px; }

/* Scaled stage — a fixed 1080px design, scaled to fit (JS sets --s) */
/* The whole demo reads as a non-interactive image: default cursor, no selecting */
.demo { cursor: default; -webkit-user-select: none; user-select: none; }
.demo-scale { --s: 1; width: 100%; }
.demo-frame {
  width: 1080px;
  transform-origin: top left;
  transform: scale(var(--s));
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  color-scheme: light;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 16px 18px -11px rgba(0, 0, 0, 0.16), 0 60px 90px -60px rgba(0, 0, 0, 0.22);
}

/* Browser chrome */
.bw-bar { position: relative; display: flex; align-items: flex-end; height: 33px; padding-top: 4px; background: #f7f7f7; }
.bw-dots { display: flex; align-items: center; gap: 4px; height: 100%; padding: 0 13px; flex: none; }
.bw-dots i { width: 10px; height: 10px; border-radius: 50%; }
.bw-dots i:nth-child(1) { background: #ff5f57; }
.bw-dots i:nth-child(2) { background: #febc2e; }
.bw-dots i:nth-child(3) { background: #28c840; }
.bw-tab { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px 8px 0 0; font-size: 12px; font-weight: 500; color: #000; white-space: nowrap; }
.bw-tab.active { background: #fff; border-radius: 8px; }
.bw-tab.dim { opacity: 1; }
.bw-tab.dim .bw-label { opacity: 0.8; }
.bw-tab .fav { width: 16px; height: 16px; border-radius: 4px; flex: none; object-fit: cover; display: block; }
.bw-div { width: 2px; height: 16px; margin: 0 3px; border-radius: 100px; background: #d8d8d8; align-self: center; flex: none; }
.bw-corner { position: absolute; right: 10px; top: 10px; width: 16px; height: 16px; display: block; }

/* Window — the live Space Jam page embedded on a padded surface */
.bw-window { position: relative; height: 668px; padding: 4px; background: #f7f7f7; }
.mock-frame { width: 100%; height: 100%; border: 0; display: block; pointer-events: none; background: #000; border-radius: 8px; }

/* The Voila widget, floating over the page (forced light, 0.75 scale) */
.float-widget {
  position: absolute; top: 62px; right: 62px; width: 396px; z-index: 12;
  transform-origin: top right; transform: scale(0.85);
}
.float-widget .widget {
  --w-card: #ffffff; --w-fg: #09090b; --w-icon: #52525b; --w-icon-strong: #1a202c;
  --w-muted: #71717a; --w-faint: #a1a1aa; --w-bubble: #f2f2f2; --w-border: #e4e4e7;
  --w-accent: #0062ff; --w-accent-bg: rgba(0, 98, 255, 0.1);
  --w-send-bg: #18181b; --w-send-fg: #ffffff;
  --w-ring: 0 0 0 0.75px rgba(0, 0, 0, 0.1), 0 13px 14px -9px rgba(0, 0, 0, 0.08);
  height: 640px; border-radius: 18px;
}
.float-widget .w-body { flex: 1; min-height: 0; }

/* ===========================================================================
   Self-playing demo — pick the logo → prompt → working → result.
   Pixel-for-pixel with the real app: selection overlay (src/lib/picker.ts +
   highlight.ts) and widget states (src/content/ChatWidget.tsx).
   =========================================================================== */

/* Faux pointer */
.demo-cursor {
  position: absolute; left: 0; top: 0; width: 30px; height: 30px; z-index: 30;
  pointer-events: none; translate: 820px 560px;
  transition: translate 0.72s cubic-bezier(0.5, 0.05, 0.2, 1), scale 0.14s ease;
  will-change: translate;
}
.demo-cursor svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); }
.demo-cursor.press { scale: 0.8; }

/* Selection overlay — picker.ts box(): 1px solid #0062ff, no radius, no fill.
   Sits over the SPACE JAM logo (cross-origin iframe → fixed design coords). */
/* The logo is overlaid (the real, transparent GIF hotlinked from spacejam.com,
   registered over the iframe's logo) so the selection box fits the element
   exactly and the logo can grow on the result. */
.logo-stage {
  position: absolute; left: 410px; top: 256px; width: 272px; height: 165px;
  z-index: 10; pointer-events: none;
}
/* Opaque cover that hides the iframe's OWN logo behind ours: the page's star
   tile, offset so it lines up seamlessly with the surrounding starfield (so the
   cover itself is invisible). Slightly oversized to fully mask the original. */
.logo-cover {
  position: absolute; left: -10px; top: -10px; right: -10px; bottom: -10px; z-index: 1;
  background: url("https://www.spacejam.com/1996/img/bg_stars.gif") repeat;
  background-position: -396px -242px;
}
/* The logo + its selection box — this is what scales up on the result. */
.logo-grow {
  position: absolute; inset: 0; z-index: 2;
  transform-origin: center; transition: transform 0.55s cubic-bezier(0.34, 1.4, 0.5, 1);
}
.logo-ovl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pick-sel {
  position: absolute; inset: 0 18px; box-sizing: border-box; z-index: 2; pointer-events: none;
  border: 1px solid #0062ff; background: transparent;
  opacity: 0; transition: opacity 0.14s;
}
.pick-label {
  position: absolute; z-index: 3; pointer-events: none;
  left: 18px; top: -22px;
  background: #0062ff; color: #fff; font: 500 11px ui-monospace, Menlo, monospace;
  padding: 2px 6px; border-radius: 4px; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  opacity: 0; transition: opacity 0.1s;
}
.pick-hint {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 14; pointer-events: none; white-space: nowrap;
  background: #18181b; color: #fff; font: 500 12px ui-sans-serif, system-ui, sans-serif;
  padding: 6px 12px; border-radius: 999px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  opacity: 0; transition: opacity 0.16s;
}

/* Phase visibility for the page overlays. Cumulative classes (.pN = phase ≥ N)
   keep "stays on from here" rules short; [data-phase="N"] = transient states. */
.demo.p2 .pick-sel { opacity: 1; }
.demo[data-phase="2"] .pick-label { opacity: 1; }
.demo[data-phase="1"] .pick-hint,
.demo[data-phase="2"] .pick-hint { opacity: 1; }

/* The result — the logo grows (and its selection re-fits with it), stays grown */
.demo.p7 .logo-grow { transform: scale(1.4); }

/* While the prompt runs, the 1px border shimmers (highlight.ts styleBox). */
.demo[data-phase="5"] .pick-sel,
.demo[data-phase="6"] .pick-sel {
  border-color: transparent;
  background: linear-gradient(90deg, rgba(0, 98, 255, 0.12), #0062ff, rgba(0, 98, 255, 0.12)) border-box;
  background-size: 200% 100%;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: cc-border-shimmer 1.2s linear infinite;
}
@keyframes cc-border-shimmer { to { background-position: 200% 0; } }

/* Widget thread — hidden until the prompt is sent */
.demo .w-thread { display: none; flex-direction: column; gap: 14px; }
.demo.p5 .w-thread { display: flex; }

/* Assistant states: typing dots → "Working…" → summary + reply + mods */
.demo .w-working, .demo .w-tool, .demo .w-reply, .demo .w-mods { display: none; }
.demo[data-phase="5"] .w-working,
.demo[data-phase="6"] .w-working { display: block; }
.demo.p7 .w-tool { display: block; }
.demo.p7 .w-reply { display: block; }
.demo.p7 .w-mods { display: flex; }

/* "Working…" — ChatWidget cc-shimmer-text (gradient swept across the glyphs) */
.w-working {
  padding-top: 6px; font-size: 13px; line-height: 17px;
  background: linear-gradient(100deg, #b4b4bb 36%, #18181b 50%, #b4b4bb 64%);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: cc-text-shimmer 1.5s linear infinite;
}
@keyframes cc-text-shimmer { 0% { background-position: 150% 0; } 100% { background-position: -150% 0; } }

/* Composer chip — appears once the element is picked */
.demo .chip { display: none; }
.demo.p3:not(.p8) .chip { display: inline-flex; }

/* Composer text — placeholder vs the typed prompt */
.demo .composer-input .typed { display: none; }
.demo[data-phase="4"] .composer-input .typed,
.demo[data-phase="8"] .composer-input .typed { display: inline; }
.demo[data-phase="4"] .composer-input .ph,
.demo[data-phase="8"] .composer-input .ph { display: none; }

/* Blinking caret while the prompt types out (phase 4) */
.demo .caret { display: none; width: 2px; height: 0.95em; margin-left: 1px; background: var(--w-fg); vertical-align: middle; }
.demo[data-phase="4"] .caret,
.demo[data-phase="8"] .caret { display: inline-block; animation: cc-caret 1s step-end infinite; }
@keyframes cc-caret { 50% { opacity: 0; } }

/* Pick button lights up only while the cursor is actually on it (JS-toggled,
   so it doesn't read as a stuck hover once the cursor moves to the logo) */
.w-btn.pick.lit { background: var(--w-accent-bg); color: var(--w-accent); }

/* Send → Stop while busy; enabled (full opacity) when typed (4) or busy (5–6) */
.w-btn.send .i-stop { display: none; }
.demo[data-phase="4"] .w-btn.send,
.demo[data-phase="5"] .w-btn.send,
.demo[data-phase="6"] .w-btn.send,
.demo[data-phase="8"] .w-btn.send { opacity: 1; }
.demo[data-phase="5"] .w-btn.send .i-send,
.demo[data-phase="6"] .w-btn.send .i-send { display: none; }
.demo[data-phase="5"] .w-btn.send .i-stop,
.demo[data-phase="6"] .w-btn.send .i-stop { display: flex; }

/* ── Act 2: /task skill → task reply → Send to Linear ─────────────────────── */

/* Slash-command menu (renderSuggestions): white card, name list, sel = #f4f4f5 */
.ci-wrap { position: relative; }
.slash-menu {
  display: none; position: absolute; left: 0; bottom: 100%; margin-bottom: 8px; z-index: 20;
  min-width: 180px; max-width: 300px; padding: 4px; border-radius: 10px; background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 17px 18px -12px rgba(0, 0, 0, 0.08);
}
.demo[data-phase="8"] .slash-menu { display: block; }
.slash-item { display: block; width: 100%; padding: 6px 10px; border-radius: 7px; text-align: left; font-size: 13px; font-weight: 500; color: #09090b; background: none; border: 0; }
.slash-item.sel { background: #f4f4f5; }

/* Second assistant turn — the /task reply (its user bubble is hidden, like the app) */
.demo .w-task { display: none; }
.demo.p9 .w-task { display: block; }
.demo .task-reply, .demo .task-actions { display: none; }
.demo.p9 .task-reply { display: block; }
.demo.p10 .task-actions { display: flex; }

/* Task reply — markdown (Markdown.tsx): h1 17px / paragraph 15px / list-disc pl-5 */
.task-reply { padding: 2px 0; font-size: 15px; line-height: 21px; color: var(--w-fg); word-break: break-word; }
.task-reply .md-h1 { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.task-reply .md-p { margin: 0 0 8px; }
.task-reply .md-ul { margin: 4px 0 0; padding-left: 20px; list-style: disc; }
.task-reply .md-ul li { margin: 2px 0; }

.task-actions { align-items: center; gap: 8px; padding-top: 4px; }
.task-actions .icon-btn { display: flex; align-items: center; justify-content: center; padding: 4px; border-radius: 6px; color: var(--w-muted); }
.task-actions .icon-btn .ic { width: 16px; height: 16px; }

/* Send to Linear — idle icon button → "LIL-42" link after the click (Figma 41:3492) */
.linear-cta { position: relative; display: none; align-items: center; justify-content: center; padding: 4px; border-radius: 6px; color: var(--w-muted); }
.demo.p10:not(.p12) .linear-cta { display: inline-flex; }
/* The Linear logo fills its whole box, so 16px reads bigger than the line
   icons next to it — render the glyph at 13px to match their optical size. */
.linear-cta .ic { width: 13px; height: 13px; }
.demo[data-phase="11"] .linear-cta { background: #f4f4f5; color: var(--w-fg); }
.lin-tip {
  display: none; position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%);
  z-index: 30; white-space: nowrap; padding: 4px 8px; border-radius: 7px;
  font-size: 11px; font-weight: 500; line-height: 1.25; background: #18181b; color: #fafafa;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
}
.demo[data-phase="11"] .lin-tip { display: block; }
.linear-done { display: none; align-items: center; gap: 2px; padding: 3px 6px 3px 4px; border-radius: 6px; font-size: 11.5px; line-height: 17.825px; font-weight: 500; letter-spacing: 0.0337px; color: var(--w-fg); text-decoration: none; white-space: nowrap; }
.demo.p12 .linear-done { display: inline-flex; }
.linear-done .ic { width: 13px; height: 13px; }

@media (prefers-reduced-motion: no-preference) {
  .ld-hero > * { animation: rise 0.6s cubic-bezier(0.2, 0.6, 0.2, 1) both; }
  .ld-hero-cta { animation-delay: 0.08s; }
  .demo { animation: rise-widget 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.16s both; }
}

@media (max-width: 720px) {
  .ld-nav { margin-bottom: 40px; }
  .ld-links { display: none; }
  .ld-hero { margin-bottom: 36px; gap: 22px; }
  .ld-desc { max-width: 100%; color: var(--muted-fg); }
  .ld-hero-cta { width: 100%; }
}

/* ===========================================================================
   Feature sections (framer-inspired) — describe the app below the hero/demo
   =========================================================================== */
.feat, .grid-feat, .cta-final { max-width: 1080px; margin-inline: auto; padding-inline: 24px; }
.feat { margin-top: 128px; }

.feat-intro { max-width: 660px; margin: 0 auto 44px; text-align: center; }
.feat-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg); margin-bottom: 14px; }
.feat-title { font-size: clamp(27px, 3.6vw, 40px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; color: var(--fg); }
.feat-lede { margin-top: 16px; font-size: 17px; line-height: 1.6; color: var(--muted-fg); }

.feat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feat-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); overflow: hidden; }
.fc-visual { position: relative; height: 188px; display: flex; align-items: center; justify-content: center; background: #fafafb; color-scheme: light; overflow: hidden; }
.fc-visual .ic { display: block; flex: none; }
.fc-visual .ic svg { display: block; width: 100%; height: 100%; }
.feat-card h3 { padding: 20px 22px 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg); }
.feat-card > p { padding: 7px 22px 24px; font-size: 14.5px; line-height: 1.55; color: var(--muted-fg); }

/* Point visual — a selected element with the real overlay */
.mini-el { position: relative; }
.mini-btn { padding: 10px 20px; border: 0; border-radius: 10px; background: #18181b; color: #fff; font: 500 14px 'Inter', sans-serif; }
.mini-sel { position: absolute; inset: -6px; border: 1px solid #0062ff; pointer-events: none; }
.mini-label { position: absolute; left: -6px; top: -27px; background: #0062ff; color: #fff; font: 500 11px ui-monospace, Menlo, monospace; padding: 2px 6px; border-radius: 4px; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); }

/* Ask visual — a mini exchange */
.mini-chat { width: 216px; display: flex; flex-direction: column; gap: 9px; }
.mini-bubble { align-self: flex-end; max-width: 82%; background: #f2f2f2; color: #09090b; font-size: 13px; line-height: 18px; padding: 7px 12px; border-radius: 15px; }
.mini-reply { font-size: 13.5px; line-height: 18px; color: #09090b; }
.mini-mods { display: flex; gap: 9px; padding-top: 1px; }
.mini-mods .ic { width: 15px; height: 15px; color: #71717a; }

/* Ship visual — export chips */
.mini-exports { display: flex; flex-direction: column; gap: 6px; width: fit-content; }
.exp-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #e4e4e7; border-radius: 9px; background: #fff; font: 500 13px 'Inter', sans-serif; color: #18181b; }
.exp-chip .ic { width: 16px; height: 16px; color: #52525b; }
.exp-chip.linear { background: #18181b; border-color: #18181b; color: #fff; }
.exp-chip.linear .ic { color: #fff; }

/* Capability grid */
.grid-feat { margin-top: 116px; }
.gf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.gf-item { background: var(--bg); padding: 28px 26px; }
.gf-ic { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; margin-bottom: 17px; border-radius: 6px; background: color-mix(in srgb, var(--fg) 6%, transparent); color: var(--fg); }
.gf-ic svg { display: block; width: 19px; height: 19px; }
.gf-ic.gf-ic-fill svg { width: 18px; height: 18px; }
.gf-item h4 { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg); margin-bottom: 6px; }
.gf-item p { font-size: 14px; line-height: 1.5; color: var(--muted-fg); }

/* Final CTA */
.cta-final { margin-top: 116px; margin-bottom: 120px; padding-top: 96px; padding-bottom: 88px; text-align: center; background: #f6f6f6; border-radius: 24px; }
@media (prefers-color-scheme: dark) { .cta-final { background: color-mix(in srgb, var(--fg) 6%, transparent); } }
.cta-final h2 { font-size: clamp(30px, 4.2vw, 46px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; color: var(--fg); }
.cta-final > p { margin-top: 13px; font-size: 17px; color: var(--muted-fg); }
.cta-row { display: flex; gap: 12px; justify-content: center; margin-top: 30px; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 8px; font-size: 15px; font-weight: 500; text-decoration: none; transition: opacity 0.15s, background 0.15s; }
.btn-ic { width: 16px; height: 14px; flex: none; display: block; }
.btn-primary { background: var(--fg); color: var(--bg); }
.btn-primary:hover { opacity: 0.88; }
.btn-soft { background: #f6f6f6; color: var(--fg); }
.btn-soft:hover { background: #ececec; }
@media (prefers-color-scheme: dark) {
  .btn-soft, .ld-cta-top { background: color-mix(in srgb, var(--fg) 9%, transparent); }
  .btn-soft:hover, .ld-cta-top:hover { background: color-mix(in srgb, var(--fg) 14%, transparent); }
}

@media (max-width: 860px) {
  .feat { margin-top: 96px; }
  .feat-cards { grid-template-columns: 1fr; gap: 16px; }
  .gf-grid { grid-template-columns: 1fr; }
  .grid-feat, .cta-final { margin-top: 88px; }
}