/* Voila — marketing site.
   Design language mirrors the extension's widget: shadcn "zinc" palette, Inter,
   14px radius. Light-only (no OS dark theme); the demo scenes and the
   Enterprise panel are the only deliberately dark surfaces. */

:root {
  color-scheme: light;              /* the marketing pages are light-only */
  --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;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
#how-it-works, #use-cases, #integrations, #enterprise, #pricing { scroll-margin-top: 118px; }

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%; }

/* ===========================================================================
   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; }

/* ---- 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); }

.site-footer {
  /* Same width as the header: break out to the 1210px band, content at its edges,
     with a hairline that lines up with the band (clamp keeps it in the viewport). */
  margin: 40px clamp(-89px, calc((100vw - 1032px) / -2), 0px) 0;
  padding: 34px 0 30px;
  border-top: 1px solid rgba(63, 63, 70, 0.1);
  font-size: 13px;
  color: var(--muted-fg);
}
.foot-grid { display: grid; grid-template-columns: 1fr repeat(3, minmax(130px, auto)); gap: 32px 72px; }
.foot-logo { width: 20px; height: 20px; display: block; }
.foot-tag { margin-top: 12px; font-size: 13px; color: var(--muted-fg); }
.foot-h { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.01em; color: var(--fg); margin-bottom: 5px; }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; font-size: 13px; }
.foot-bottom {
  display: grid; grid-template-columns: 1fr repeat(3, minmax(130px, auto)); align-items: center; gap: 10px 72px;
  margin-top: 40px; padding-top: 18px; border-top: 1px solid rgba(63, 63, 70, 0.08);
  font-size: 12.5px; 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. */
.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-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 { position: relative; max-width: 1080px; margin: 0 auto; padding: 30px 24px 90px; }

/* Hero band — Figma 77:4186: a full-bleed #f9ed32 panel behind the demo
   frame only, peeking ~65px each side, rounded 32px, inset ~34px top/bottom
   so it reads as two yellow side strips. Position set by JS off the frame. */
.hero-band {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: min(1210px, 100vw); z-index: 0;
  background: #f9ed32; border-radius: 32px;
}
.ld-nav, .ld-hero, .demo, .ld-hero-foot { position: relative; z-index: 1; }

/* Top nav — spans the yellow band exactly (logo at its left edge, CTA at its
   right edge), no side padding so the scrolled hairline lines up with the band.
   -89px pulls past the 1032px content box to the 1210px band; clamp keeps it
   within the viewport on narrower screens. */
.ld-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: -30px clamp(-89px, calc((100vw - 1032px) / -2), 0px) 0;
  padding: 16px 0;
  background: transparent;
}
.ld-nav.solid { box-shadow: 0 0.5px 0 rgba(63, 63, 70, 0.1); }
/* Cheat the sticky bar to full page width so blocks scrolling under it are
   masked, while the hairline shadow stays at the band's dimension. */
.ld-nav.solid::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--bg); z-index: -1; }
.ld-brand { display: flex; align-items: center; gap: 6px; flex: none; text-decoration: none; }
.ld-logo { width: 24px; height: 24px; flex: none; display: block; }
.ld-brand-name { font-size: 14px; font-weight: 600; letter-spacing: -0.14px; color: var(--fg); }
/* Links centered in the bar (Figma 77:3688), logo left, CTA right */
.ld-links { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 40px; 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; }
/* Header CTA — dark with the Chrome mark (Figma 77:2955): pl12 pr14 py4, r6 */
.ld-cta-top { display: inline-flex; align-items: center; gap: 8px; flex: none; font-size: 14px; font-weight: 500; color: var(--bg); text-decoration: none; white-space: nowrap; background: var(--fg); padding: 4px 14px 4px 12px; border-radius: 6px; transition: opacity 0.15s; }
.ld-cta-top:hover { opacity: 0.88; }
.ld-cta-top.on { background: var(--fg); color: var(--bg); }
.ld-cta-ic { width: 14px; height: 13px; flex: none; display: block; }

/* Hero — Figma 77:3648: one-line H1 (58/57.044, -0.936px) above the frame,
   40px under the nav, 24px above the demo. */
.ld-hero { margin: 72px 0 24px; }
.ld-h1 { padding: 32px 0 18px; font-size: 58px; font-weight: 600; line-height: 57.044px; letter-spacing: -0.936px; color: var(--fg); white-space: nowrap; }
@media (max-width: 1059px) {
  .ld-h1 { font-size: clamp(30px, 5.4vw, 56px); line-height: 1.0; letter-spacing: -0.0161em; white-space: normal; }
}

/* Hero foot — Figma 77:2958: 550px description + dark CTA on a baseline row
   below the frame, 24px under it. */
.ld-hero-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-top: 24px; }
.ld-desc { max-width: 550px; padding-top: 20px; font-size: 16px; line-height: 24px; color: var(--fg); }
.ld-hero-foot .btn { flex: none; }
/* Hero CTA — Figma 77:2966: r8, pt12 pr22 pb11 pl20, 15px semibold + Chrome
   (.btn.btn-hero to win over the later .btn base rule) */
.btn.btn-hero { padding: 12px 22px 11px 20px; border-radius: 8px; font-weight: 600; line-height: 24px; }
@media (max-width: 720px) {
  .ld-hero-foot { flex-direction: column; align-items: flex-start; gap: 24px; }
}

/* 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;
  /* Figma 77:2986 — just a hairline ring now (no elevation), sits on the band */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

/* Browser chrome */
/* Tab strip — Chrome anatomy (Figma 72:2268): #f4f4f4 strip, the active tab
   is a white sheet with top-rounded corners joined to the toolbar by
   inverted corners. Active and idle tabs share the exact same box, and the
   corner curves paint absolutely, so switching never shifts a tab. */
.bw-bar { position: relative; display: flex; align-items: flex-end; height: 37px; padding-top: 4px; background: #f4f4f4; }
.bw-dots { display: flex; align-items: center; gap: 4px; height: 100%; padding: 0 13px 4px; flex: none; }
.bw-dots i { width: 10px; height: 10px; border-radius: 50%; }
.bw-dots i:nth-child(1) { background: #ff4b59; box-shadow: inset 0 0 0 0.5px #ff000a; }
.bw-dots i:nth-child(2) { background: #ffc600; box-shadow: inset 0 0 0 0.5px #ffb300; }
.bw-dots i:nth-child(3) { background: #00ca48; box-shadow: inset 0 0 0 0.5px #00b700; }
.bw-tab { position: relative; isolation: isolate; display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 10px; border-radius: 8px; font-size: 12px; font-weight: 500; line-height: 17px; color: #000; white-space: nowrap; }
.bw-tab .bw-label { opacity: 0.7; }
/* Hover pill sits 4px inside the tab box; radius is concentric with the
   active tab's 8px (8 - 4 = 4). No transition, painted under the content. */
.bw-tab:not(.active):hover::before { content: ''; position: absolute; inset: 4px; z-index: -1; border-radius: 4px; background: rgba(0, 0, 0, 0.05); }
.bw-tab.active { background: #fff; border-radius: 8px 8px 0 0; }
.bw-tab.active .bw-label { opacity: 1; }
/* Inverted corners paint ONLY the white joining crescent — everything else
   stays transparent so a neighbour's hover pill shows through untouched. */
.bw-tab.active::before,
.bw-tab.active::after { content: ''; position: absolute; bottom: 0; width: 8px; height: 8px; }
.bw-tab.active::before { left: -8px; background: radial-gradient(circle 8px at 0 0, transparent 0 7.5px, #fff 8px); }
.bw-tab.active::after { right: -8px; background: radial-gradient(circle 8px at 8px 0, transparent 0 7.5px, #fff 8px); }
.bw-tab .fav { width: 16px; height: 16px; border-radius: 4px; flex: none; object-fit: cover; display: block; }

/* Toolbar — Figma 74:2727: 27px round action wells (hover greys them,
   instantly), the omnibox with its white site-info badge, extensions, profile */
.bw-toolbar { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; background: #fff; }
.bw-acts { display: flex; align-items: center; flex: none; }
.bw-act { display: flex; align-items: center; justify-content: center; width: 27px; height: 27px; border-radius: 40px; flex: none; overflow: hidden; }
/* Back & forward are disabled — they never hover. Refresh + the extension
   wells grey instantly on hover. */
.bw-act:not(.bw-disabled):hover, .bw-act.hov { background: #f4f4f4; }
.bw-act > img { display: block; }
.bw-fwd img { transform: scaleX(-1); }
.bw-refresh { cursor: pointer; }
.bw-url { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 3px 10px 3px 3px; border-radius: 40px; background: #f4f4f4; }
.bw-url-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 500; line-height: 17px; color: #000; white-space: nowrap; }
.bw-site { display: flex; align-items: center; justify-content: center; width: 19px; height: 19px; border-radius: 100px; background: #fff; flex: none; }
.bw-site img { display: block; }
.bw-ext { display: flex; align-items: center; padding-left: 8px; flex: none; }
.bw-div { width: 2px; height: 16px; margin: 0 4px 0 3px; border-radius: 100px; background: #d8d8d8; align-self: center; flex: none; }
.bw-nav-ic { width: 16px; height: 16px; flex: none; display: block; }
.bw-corner { width: 16px; height: 16px; display: block; flex: none; }

/* Window — the page surface sits on a thin white mat (Figma: 2px). Clip all
   content to a r10 rounded rect at that 2px inset (matching og-site + the
   hairline) so the page, the responsive backdrop AND the docked full panel stay
   within the rounded page-container limits — none stick to the chrome edge. */
.bw-window { position: relative; height: 668px; padding: 2px; background: #fff; clip-path: inset(2px round 10px); }
/* A 0.5px inset hairline over the page content so its edge always reads — a
   white page would otherwise dissolve into the white mat / white site bg. All
   four corners rounded to match the page's 10px radius (and it sits above the
   docked full panel too). */
.bw-window::after {
  content: ''; position: absolute; inset: 2px; z-index: 14; pointer-events: none;
  border-radius: 10px;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.1);
}
.mock-frame { width: 100%; height: 100%; border: 0; display: block; pointer-events: none; background: #000; border-radius: 10px; box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.21); }
/* Space Jam only: the page (iframe + logo overlay) zooms 1.2 about the logo
   center — the cursor's LOGO point — so nothing in the choreography moves. */
.sj-zoom { position: absolute; inset: 2px; transform: scale(1.2); transform-origin: 546px 338px; pointer-events: none; }

/* Scenes — one per browser tab, switched on click, instantly (no transition) */
.bw-tab[data-scene] { cursor: pointer; }
.bw-refresh { cursor: pointer; }
.scene { position: absolute; inset: 0; padding: 2px; display: none; }
.demo[data-scene='sj'] .scene-sj,
.demo[data-scene='og'] .scene-og,
.demo[data-scene='dock'] .scene-dock,
.demo[data-scene='luc'] .scene-luc { display: block; }

/* ── Dock — our product demo: a dark deal-room editor, pixel-exact to Figma
   77:5533 (Inter instead of Roobert; every icon is the exported asset). */
.dk-fav { border-radius: 0; object-fit: contain; }
.dk-app { width: 100%; height: 100%; border-radius: 10px; overflow: hidden; background: #1b1e24; display: flex; flex-direction: column; color: #fff; -webkit-font-smoothing: antialiased; }
.dk-app img { display: block; flex: none; }
.dk-head { display: flex; align-items: center; justify-content: space-between; padding: 3.45px; flex: none; }
.dk-title { display: flex; align-items: center; gap: 3.45px; flex: 1; min-width: 0; padding: 1.73px 0.86px; }
.dk-title-ic { display: inline-flex; padding: 6.05px; border-radius: 3.45px; }
.dk-title-ic img, .dk-seg-i img, .dk-pub img, .dk-share img { width: 13.82px; height: 13.82px; }
.dk-title-t { flex: 1; min-width: 0; font-size: 12.09px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-seg { display: flex; align-items: center; gap: 0.86px; padding: 2.59px 1.73px; flex: none; }
.dk-seg-i { display: inline-flex; align-items: center; gap: 3.45px; padding: 4.32px 12.09px 5.18px; border-radius: 43px; font-size: 12.09px; color: #fff; }
.dk-seg-i.on { background: #2e3341; }
.dk-seg-i.dim img { opacity: 0.8; }
.dk-ctas { display: flex; align-items: center; gap: 3.45px; flex: 1; min-width: 0; justify-content: flex-end; padding: 1.73px; }
.dk-opts { display: flex; align-items: center; gap: 6.91px; padding-right: 10.36px; }
.dk-cta-ic { display: inline-flex; align-items: center; justify-content: center; padding: 6.05px; border-radius: 3.45px; }
.dk-ic-comment { position: relative; width: 13.82px; height: 13.82px; overflow: hidden; }
.dk-ic-comment img { position: absolute; left: 1.51px; top: 0.75px; width: 10.8px; height: 12.32px; }
.dk-ic-preview { width: 17.27px; height: 12.09px; }
.dk-pub { display: inline-flex; align-items: center; gap: 3.45px; padding: 5.18px 10.36px 6.05px; border-radius: 4.8px; background: rgba(255, 154, 31, 0.14); color: #ffc248; font-size: 12.09px; white-space: nowrap; }
.dk-share { display: inline-flex; align-items: center; gap: 3.45px; padding: 5.18px 10.36px 6.05px; border-radius: 4.8px; background: #e6f433; color: #121722; font-size: 12.09px; font-weight: 500; }
.dk-body { flex: 1; min-height: 0; display: flex; }
.dk-side { width: 179.62px; flex: none; display: flex; flex-direction: column; justify-content: space-between; }
.dk-list { padding: 5.18px 10.36px 13.82px; }
.dk-list.bordered { border: 0.43px solid #4b515d; }
.dk-side-bottom .dk-list { padding-bottom: 10.36px; }
.dk-list-h { display: flex; align-items: center; padding: 3.45px 6.05px 6.91px 6.91px; }
.dk-list-h-t { flex: 1; min-width: 0; padding: 1.73px 0; font-size: 11.23px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-list-h.sections { padding-right: 5.18px; }
.dk-list-h.sections .dk-list-h-t { font-size: 9.69px; }
.dk-list-h img { width: 13.82px; height: 13.82px; }
.dk-nav { display: flex; align-items: center; gap: 1.73px; height: 24.18px; padding: 3.45px 6.91px; border-radius: 3.45px; font-size: 10.44px; line-height: 11.19px; }
.dk-nav img { width: 12.09px; height: 12.09px; }
.dk-nav.on { background: #2e3341; }
.dk-nav.dk-sel-nav { background: rgba(0, 104, 249, 0.12); color: #b0d1ff; }
.dk-nav.dk-sel-nav img { width: 12.09px; height: 8.22px; }
.dk-nav-t { flex: 1; min-width: 0; padding: 1.73px 3.45px; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.dk-main { flex: 1; min-width: 0; padding: 0 5.18px 5.18px 0; display: flex; }
.dk-page { flex: 1; min-width: 0; background: #f7f7f7; border-radius: 4.8px; overflow: hidden; display: flex; flex-direction: column; }
.dk-ptabs { display: flex; align-items: center; justify-content: space-between; padding: 0 6.91px; background: #fff; box-shadow: inset 0 -0.43px 0 rgba(0, 0, 0, 0.13); flex: none; }
.dk-ptabs-l { display: flex; align-items: center; }
.dk-ptab { padding: 9.5px 13.82px 10.36px; font-size: 12.09px; font-weight: 500; color: #000; border-bottom: 0.86px solid #e6f433; }
.dk-ptab-add { display: inline-flex; padding: 11.23px 10.36px 9.5px; }
.dk-ptab-add img, .dk-ptab-exp img { width: 13.82px; height: 13.82px; }
.dk-ptab-exp { display: inline-flex; padding: 6.05px; }
.dk-canvas { flex: 1; min-height: 0; padding: 27.63px 44.9px; overflow: hidden; display: flex; flex-direction: column; align-items: center; }
.dk-block { display: flex; flex-direction: column; gap: 0.86px; align-items: flex-start; flex: none; }
.dk-chips { display: flex; align-items: flex-start; gap: 0.86px; }
.dk-chip { display: inline-flex; align-items: center; height: 24.18px; padding: 3.45px 5.18px 3.45px 6.91px; background: #0068f9; border: 0.86px solid #0068f9; border-radius: 3.45px 0 0 0; color: #fff; }
.dk-chip-in { display: flex; align-items: center; gap: 3.45px; padding: 1.73px 3.45px 1.73px 0.86px; font-size: 12.09px; line-height: 12.95px; }
.dk-chip-in img { width: 12.09px; height: 8.22px; }
.dk-chip2 { display: inline-flex; align-items: center; height: 24.18px; padding: 3.45px 6.91px 3.45px 7.77px; background: #0068f9; border: 0.86px solid #0068f9; border-radius: 0 5.18px 0 0; box-shadow: inset 0.86px 0 0 0.86px #005ee2; }
.dk-chip2 img { width: 13.82px; height: 13.82px; }
.dk-sel { border: 0.86px solid #0068f9; width: 826.43px; flex: none; }
.dk-section { background: #fff; border-radius: 6.91px; box-shadow: 0 0 0.86px 0.43px rgba(0, 0, 0, 0.1); overflow: hidden; }
.dk-blocks { display: flex; gap: 6.91px; align-items: stretch; margin: 6.91px 13.82px 13.82px; padding: 20.73px; }
.dk-doc { flex: 1; min-width: 0; padding: 13.82px; display: flex; flex-direction: column; gap: 13.82px; background: #fff; }
.dk-doc-h { font-size: 20.73px; line-height: 27.63px; font-weight: 500; color: #000; }
.dk-doc-p-box { border: 0.86px solid #0068f9; overflow: hidden; }
.dk-doc-p { width: 347.58px; max-width: 100%; height: 62.18px; font-size: 15.54px; line-height: 20.73px; color: #000; }
.dk-toc { flex: 1; min-width: 0; background: #f4f2f2; border-radius: 13.82px; padding: 13.82px 13.82px 17.27px; }
.dk-toc-in { padding: 5.18px 0 0 6.91px; display: flex; flex-direction: column; gap: 13.82px; }
.dk-toc-h { font-size: 15.54px; font-weight: 500; color: #000; }
.dk-toc-list { display: flex; flex-direction: column; gap: 6.91px; }
.dk-toc-l { margin: 0; width: 340.68px; max-width: 100%; padding-left: 23.32px; font-size: 15.54px; color: #000; }
.dk-toc-sel { border: 0.86px solid #0068f9; height: 19px; width: 340.68px; overflow: hidden; }
/* Voila docked in dark mode — float-widget defaults, dark theme via vars. */
:is(.dock-widget, .tip-dark) .widget { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.13), 0 17px 18px -12px rgba(0, 0, 0, 0.3); }
:is(.dock-widget, .tip-dark) .widget.dkw {
  --w-card: #1f1f23; --w-fg: #f4f4f5; --w-icon: #a1a1aa; --w-icon-strong: #f4f4f5;
  --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: #4d90ff; --w-send-fg: #ffffff;
}
/* Dark knob: the app maps bg-[#fafafa] to #2c2c31 in dark */
.dkw .w-switch i { background: #2c2c31; }

/* Shared picker overlay for the mock pages */
.mock-sel { position: absolute; border: 1px solid #0062ff; pointer-events: none; }
.mock-tag { position: absolute; 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); }

/* Static widgets on the og/luc scenes: the demo choreography hides
   tool/reply/mods by default — these are completed exchanges. */
.demo .static-widget .w-tool { display: block; }
.demo .static-widget .w-reply { display: block; }
.demo .static-widget .w-mods { display: flex; }
.demo .static-widget .w-foot-left.dim { opacity: 0.4; }

/* ── OGimage.gallery — pixel-exact from Figma 72:2402 (real covers) ─────── */
.og-site { position: relative; width: 100%; height: 100%; border-radius: 10px; overflow: hidden; background: #fff; color: #000; }
.ogs-body { padding: 0 22.08px 22.08px; }
.ogs-head { display: flex; align-items: center; gap: 22.08px; padding: 14.72px 0 15.18px; border-bottom: 0.46px solid rgba(0, 0, 0, 0.1); }
.ogs-brand { display: flex; align-items: center; flex: none; width: 327.89px; font-size: 16.56px; font-weight: 600; letter-spacing: -0.4px; line-height: 20.24px; white-space: nowrap; }
.ogs-brand img { width: 29.45px; height: 29.45px; margin-right: 7.36px; display: block; }
.ogs-search { position: relative; flex: none; width: 327.88px; height: 34.97px; box-sizing: border-box; background: #f1f1f1; border-radius: 7.36px; padding: 8.28px 11.96px; font-size: 12.88px; letter-spacing: -0.14px; color: #999999; }
.ogs-search img { position: absolute; right: 10.8px; top: 10.12px; width: 14.72px; height: 14.72px; }
.ogs-nav { display: flex; align-items: center; justify-content: flex-end; flex: none; width: 327.89px; }
.ogs-nav > span { margin-left: 29.45px; font-size: 14.72px; letter-spacing: -0.29px; line-height: 20.24px; color: #777777; white-space: nowrap; }
.ogs-submit {
  padding: 7.36px 14.72px; border-radius: 7.36px;
  background: linear-gradient(180deg, #fcff69, #f9ed32);
  box-shadow: 0 1.84px 3.68px rgba(0, 0, 0, 0.07), 0 0.92px 0.92px rgba(0, 0, 0, 0.14), 0 0 0 0.46px rgba(235, 166, 19, 0.48), inset 0 -0.92px 0 rgba(235, 166, 19, 0.23);
  font-weight: 700; color: #000000 !important;
}
.ogs-filters { display: flex; align-items: center; padding: 14.72px 0 15.64px; }
.ogs-filters span { padding: 7.36px 14.72px; font-size: 14.72px; font-weight: 600; letter-spacing: -0.29px; line-height: 20.24px; color: #777777; white-space: nowrap; }
.ogs-filters .on { background: rgba(230, 230, 230, 0.5); border-radius: 46px; color: #000000; }
.ogs-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 207.84px; column-gap: 14.72px; row-gap: 7.36px; }
.ogs-item { position: relative; margin: 0; }
.ogs-item .cover { display: block; width: 100%; height: 174.71px; object-fit: cover; border-radius: 7.36px; }
.ogs-item .gif { position: absolute; left: 14.72px; top: 14.72px; width: 25.77px; height: 18.61px; }
.ogs-cap { display: flex; align-items: center; margin-top: 3.68px; font-size: 14.72px; font-weight: 600; letter-spacing: -0.29px; line-height: 20.24px; color: #000000; white-space: nowrap; }
.ogs-cap img { width: 14.72px; height: 14.72px; border-radius: 3.68px; margin-right: 7.36px; display: block; }

/* OG demo — dark theme the widget applies (instant, like the app) */
.og-site.dark { background: #101012; }
.og-site.dark .ogs-head { border-bottom-color: rgba(255, 255, 255, 0.12); }
.og-site.dark .ogs-brand { color: #fafafa; }
.og-site.dark .ogs-search { background: #1d1d20; color: #8b8b92; }
.og-site.dark .ogs-search img { filter: invert(1); }
.og-site.dark .ogs-nav > span { color: #a1a1aa; }
.og-site.dark .ogs-nav .ogs-submit { color: #000 !important; }
.og-site.dark .ogs-filters span { color: #a1a1aa; }
.og-site.dark .ogs-filters .on { background: rgba(255, 255, 255, 0.14); color: #fafafa; }
.og-site.dark .ogs-cap { color: #fafafa; }

/* OG demo — timeline states. No selection on purpose: the ask works at page
   scale. Undo swaps ONLY the undo icon for "Undone" (like the app). */
.scene-og .w-thread { display: none; flex-direction: column; gap: 14px; }
.scene-og.og-sent .w-thread { display: flex; }
.scene-og .w-working, .scene-og .w-tool, .scene-og .w-reply { display: none; }
.scene-og .w-mods { display: none; }
.scene-og.og-sent:not(.og-done) .w-working { display: block; }
.scene-og.og-done .w-tool, .scene-og.og-done .w-reply { display: block; }
.scene-og.og-done .w-mods { display: flex; }
.scene-og .og-undone { display: none; padding: 0 4px; font-size: 11.5px; color: #a1a1aa; }
.scene-og.og-undone .og-undo { display: none; }
.scene-og.og-undone .og-undone { display: inline; }
.scene-og .og-typed { color: var(--w-fg); }
.scene-og .caret { display: none; width: 2px; height: 0.95em; margin-left: 1px; background: var(--w-fg); vertical-align: middle; }
/* Typing a prompt OR a slash command hides the placeholder and shows the caret
   (the slash flow types "/re" into the composer while the skills menu filters). */
.scene-og.og-typing:not(.og-sent) .ph,
.scene-og.og-slash .ph { display: none; }
.scene-og.og-typing:not(.og-sent) .caret,
.scene-og.og-slash .caret { display: inline-block; animation: cc-caret 1s step-end infinite; }
.scene-og.og-typing:not(.og-sent) .w-btn.send { opacity: 1; }
.scene-og.og-edits .w-foot-left.dim { opacity: 1; }

/* OG dock — the widget snaps full-height to the right edge and the page
   squeezes beside it (ChatWidget.tsx: html width calc(100% - 396px), .2s),
   its grid reflowing to two columns. */
.scene-og .og-site { width: 100%; transition: width 0.24s ease; }
.scene-og.og-dock .og-site { width: calc(100% - 337px); }
.scene-og.og-dock .ogs-grid { grid-template-columns: repeat(2, 1fr); }
/* Docked: the page is narrower, so the whole header reflows too (not just the
   grid) — the search grows to fill, brand/nav shrink to content, and the
   Extension/Resources links drop (only Submit stays), like a real responsive page. */
.scene-og.og-dock .ogs-brand { width: auto; }
.scene-og.og-dock .ogs-search { width: auto; flex: 1; min-width: 0; }
.scene-og.og-dock .ogs-nav { width: auto; }
.scene-og.og-dock .ogs-nav > span:not(.ogs-submit) { display: none; }
/* The docked widget keeps its floating scale (0.85) — SAME content size, not
   unscaled. It just grows to full height and sticks flush right, with only
   the LEFT corners rounded (right corners squared against the edge). The base
   transition is a magnetic spring for the snap; dragging uses a quick follow. */
/* No base transition: only the carry (.og-dragging) and the magnet pull
   (.og-magnet) animate — releasing locks the dock in a single frame. */
.og-widget.og-dragging { transition: transform 0.24s ease-out; }
/* Magnetism: nearing the edge the widget snaps flush to the dock slot with a
   gentle springy overshoot — enough to read as magnetic, not a big flourish.
   The shadow stays the widget's normal one throughout the drag (no lift). */
.og-widget.og-magnet { transition: transform 0.32s cubic-bezier(0.34, 1.3, 0.5, 1); }
.scene-og.og-dock .og-widget { top: 2px; right: 0; bottom: 2px; }
.scene-og.og-dock .og-widget .widget { height: calc(100% / 0.85); border-radius: 18px 0 0 18px; box-shadow: -1px 0 0 rgba(0, 0, 0, 0.08); }
.scene-og.og-dock .og-cursor { cursor: grabbing; }

/* OG /responsive — a faithful copy of the app's device-frame view (responsive.ts):
   a #323234 backdrop, a dark pill toolbar (Mobile/Tablet/Desktop · 390px · ✕)
   centered above, and the page as a 390px frame (r10, big drop shadow) centered
   in the space left of the docked sidebar. The gallery goes single-column. */
.scene-og.og-slash .slash-menu { display: block; }
.scene-og.og-resp { background: #323234; }
.scene-og.og-resp .og-site {
  width: 390px;
  margin-left: calc((100% - 337px - 390px) / 2);
  height: calc(100% - 70px); margin-top: 54px;
  box-shadow: 0 12px 44px rgba(0, 0, 0, 0.5);
}
.scene-og.og-resp .ogs-body { padding: 0 16px 16px; }
.scene-og.og-resp .ogs-search, .scene-og.og-resp .ogs-nav { display: none; }
.scene-og.og-resp .ogs-head { padding: 14px 0; }
/* The responsive toolbar pill (static repro of responsive.ts buildOverlay). */
.og-resp-bar { display: none; }
.scene-og.og-resp .og-resp-bar {
  display: flex; align-items: center; gap: 2px; z-index: 16;
  position: absolute; top: 12px; left: calc((100% - 337px) / 2); transform: translateX(-50%);
  padding: 4px; background: rgba(20, 20, 22, 0.94);
  border-radius: 999px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.og-resp-bar > span { border-radius: 999px; padding: 5px 11px; font: 500 12px 'Inter', system-ui, sans-serif; color: #e4e4e7; white-space: nowrap; }
.og-resp-bar > span.on { background: #fff; color: #18181b; }
.og-resp-bar .sep { width: 1px; height: 16px; margin: 0 4px; background: rgba(255, 255, 255, 0.18); border-radius: 0; padding: 0; }
.og-resp-bar .w { color: #a1a1aa; min-width: 52px; text-align: center; padding: 0 8px; font-variant-numeric: tabular-nums; }
.og-resp-bar .x { color: #fff; padding: 5px 9px; }
.scene-og.og-resp .ogs-grid { grid-template-columns: 1fr; }

/* ── lucchaissac.com mock (the yellow page, real Uxum type) ─────────────── */
@font-face {
  font-family: 'Uxum';
  src: url('https://www.lucchaissac.com/UxumVF.woff2') format('woff2');
  font-display: swap;
}
/* lucchaissac.com, faithfully — the real style.css uses vw everywhere;
   1vw of the 1080 frame = 10.8px (--u). Uxum swapped for Inter. */
.luc-site { position: relative; width: 100%; height: 100%; border-radius: 10px; overflow: hidden; background: #f9ed32; color: #000; font-family: 'Inter', sans-serif; --u: 10.8px; box-sizing: border-box; display: flex; flex-direction: column; padding: calc(var(--u) * 1.8) calc(var(--u) * 2) calc(var(--u) * 2); font-size: var(--u); line-height: calc(var(--u) * 1.6); font-weight: 400; }
.lucs-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 calc(var(--u) * 2); flex: none; }
.lucs-nav1, .lucs-nav2 { display: flex; align-items: center; line-height: calc(var(--u) * 1.2); }
.lucs-nav1 { gap: calc(var(--u) * 1.25); }
.lucs-nav2 { gap: calc(var(--u) * 1); }
.lucs-head img { height: calc(var(--u) * 1.2); width: auto; display: block; }
.lucs-a { padding: calc(var(--u) * 0.2) calc(var(--u) * 0.5) calc(var(--u) * 0.1); }
.lucs-container { display: flex; gap: calc(var(--u) * 2); flex: 1; min-height: 0; }
.lucs-left { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; padding-right: 15%; }
.lucs-hero { position: relative; }
.lucs-h1w { position: relative; display: block; width: fit-content; }
.lucs-h1 { margin: 0; font-size: calc(var(--u) * 4.4); line-height: calc(var(--u) * 4.6); font-weight: 500; letter-spacing: 0; }
.lucs-h1w .mock-sel { inset: -8px -12px; }
.lucs-h1w .mock-tag { left: -12px; top: -26px; }
.lucs-sub { margin: calc(var(--u) * 1.8) 0 0; font-size: calc(var(--u) * 1.8); line-height: calc(var(--u) * 2.4); }
.lucs-ht { display: flex; gap: calc(var(--u) * 2); text-align: justify; }
.lucs-ht p { margin: 0; flex: 1; }
.lucs-ht p:first-child { text-indent: calc(var(--u) * 2); }
.lucs-right { flex: none; width: calc(var(--u) * 17); display: flex; flex-direction: column; justify-content: space-between; }
.lucs-logos, .lucs-legend { border-collapse: collapse; }
.lucs-logos td { position: relative; vertical-align: top; padding: 0; }
.lucs-logos td img { width: calc(var(--u) * 5); height: calc(var(--u) * 5); object-fit: contain; display: block; }
.lucs-logos td span { position: absolute; top: 0; left: 0; font-size: calc(var(--u) * 0.5); line-height: calc(var(--u) * 0.5); }
.lucs-legend td { padding: 0 calc(var(--u) * 1) calc(var(--u) * 0.4) 0; line-height: calc(var(--u) * 1.1); vertical-align: top; }
.luc-site u { text-decoration: none; display: inline-block; }
.luc-site u::after { content: ''; display: block; width: 100%; height: 1px; margin: -4px 0 0; border-radius: 4px; background-image: linear-gradient(-90deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0) 100%); }


/* 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);
}
/* Opening beat: the Space Jam widget stays hidden until the cursor clicks
   the extension icon, then pops in from it (fade + 0.9 -> 1 with a soft
   overshoot). The og/luc scenes' static widgets are always shown. */
.demo:not(.widget-open) .scene-sj .float-widget { opacity: 0; pointer-events: none; }
.demo.ext-press .bw-corner { transform: scale(0.88); }
/* Pop on the inner widget, from its center — the outer float keeps its
   positioning scale (0.85, top right) untouched. */
.demo.widget-open .scene-sj .float-widget .widget { animation: widget-pop 0.5s cubic-bezier(0.3, 1.4, 0.4, 1) both; transform-origin: center; }
@keyframes widget-pop {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
.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;
}
/* The sj performer rides at frame level — only on its own scene */
.sj-cursor { display: none; }
.demo[data-scene='sj'] .sj-cursor { display: block; }
.demo-cursor {
  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;
  /* the page zooms 1.2 — counter the ring so it reads 1px on screen
     (box-shadow, not border: browsers snap fractional border-widths) */
  box-shadow: inset 0 0 0 calc(1px / 1.2) #0062ff; background: transparent;
  opacity: 0; transition: opacity 0.14s;
}
.pick-label {
  position: absolute; z-index: 3; pointer-events: none;
  left: 18px; top: -22px;
  /* counter the 1.2 page zoom so the tag renders its true 11px, crisp */
  transform: scale(calc(1 / 1.2)); transform-origin: left bottom;
  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; }
/* The shortcut hint shows exactly while the picker is armed */
.scene.picking .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 .static-widget .chip { display: flex; }
.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; }

/* /inspect turn — the real InspectorPanel (ChatWidget.tsx 2106+): 12px card,
   #e4e4e7 border, 14/17/11 padding, selector header + Reset, 12.5 prop rows
   with 136x30 #f3f3f3 value pills, amber dot on edited values, + Add row,
   copy actions once something changed. */
.demo .w-insp { display: none; }
.demo.insp-open .w-insp { display: block; }
.insp-panel { overflow: hidden; margin-top: 4px; border: 1px solid var(--w-border); border-radius: 12px; background: var(--w-card); padding: 14px 17px 11px; }
.insp-head { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 4px; font-size: 11.5px; color: var(--w-muted); }
.insp-sel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 8px; font-weight: 500; }
.insp-reset { visibility: hidden; flex: none; }
.demo.insp-edited .insp-reset { visibility: visible; }
.insp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; }
.insp-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); }
.insp-dot { display: none; font-style: normal; font-size: 12.5px; color: #f59e0b; }
.insp-dot.on { display: inline; }
.demo.insp-edited .insp-dot.dw { display: inline; }
.insp-val { display: flex; align-items: center; flex: none; width: 136px; height: 30px; padding: 0 7px; border-radius: 8px; background: #f3f3f3; font-size: 12px; font-weight: 500; color: #222222; overflow: hidden; white-space: nowrap; }
.insp-caret { display: none; width: 2px; height: 0.95em; margin-left: 1px; background: var(--w-fg); }
.demo.insp-focus .insp-caret { display: inline-block; animation: cc-caret 1s step-end infinite; }
.insp-add { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.insp-add-l { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; font-size: 12.5px; font-weight: 500; letter-spacing: -0.037px; color: var(--w-muted); }
.insp-add-l svg { width: 10px; height: 10px; flex: none; }
.insp-ghost { flex: none; width: 136px; height: 30px; border-radius: 8px; background: #f3f3f3; opacity: 0.5; }
.insp-acts { display: none; align-items: center; gap: 8px; padding: 6px 0 0 4px; }
.demo.insp-edited .insp-acts { display: flex; }
.insp-acts .icon-btn { display: flex; align-items: center; justify-content: center; padding: 4px; border-radius: 6px; color: var(--w-muted); }
.insp-acts .icon-btn .ic { width: 16px; height: 16px; }
/* The width edit stretches the logo horizontally — the selection box lives
   inside .logo-grow, so it follows for free. */
.demo.insp-wide .logo-grow { transform: scale(1.4) scaleX(1.29); }

/* 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; }
/* The thread "scrolls" when the task lands: the first exchange and the
   inspect panel's actions slide out of view (the app scrolls them away). */
.demo.p9 .w-thread .w-msg.user,
.demo.p9 .w-thread .w-assist:not(.w-insp):not(.w-task) { display: none; }
.demo.p9 .insp-acts { display: none; }
.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 (max-width: 720px) {
  .ld-nav { margin-bottom: 18px; }
  .ld-links { display: none; }
  .ld-hero { margin: 12px 0 26px; }
  .ld-h1 { padding-top: 12px; }
  .ld-hero-row { flex-direction: column; align-items: flex-start; gap: 26px; }
  .ld-desc { max-width: 100%; color: var(--muted-fg); }
}

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

/* Left-aligned editorial intros (Stripe/Linear): eyebrow / title / lede on
   the section's 24px inset, one consistent module for every section. */
.feat-intro { max-width: 620px; margin: 0 0 40px; text-align: left; }
/* Section eyebrow — Figma 77:3698: 13.5px medium, no uppercase, no tracking */
.feat-eyebrow { font-size: 13.5px; font-weight: 500; line-height: 20px; color: #71717a; margin-bottom: 14px; }
.feat-title { font-size: clamp(27px, 3.4vw, 38px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; color: var(--fg); }
.feat-lede { margin-top: 14px; font-size: 16.5px; line-height: 1.6; color: var(--muted-fg); }

/* Use cases — a compact who-it's-for row (Designers / Engineers / PMs / Builders),
   each a role over a one-line value prop on a Linear-style top divider. */
@media (max-width: 720px) {
  
}

/* How it works explorer — a menu of capabilities (left) + a static widget with
   the selected example prompt typed in and a copy button (right). Landing DA. */
/* tl;dr reads like the lede itself, just dark — no chip. */
.hiw-tldr { color: #09090b; }
/* How it works — a direct 2x2 grid of the capability blocks, pixel-exact to
   Figma 80:8270: cells are the designed 607x905 blocks at 0.8 (485.6x777.6,
   r25.6, gap 12.8) with the title + description inside (16/26 #414141), the
   real widget scaled 0.8, the page art behind, and the copyable prompt line. */
/* The cards ride an Apple-style rail: same sizes, one row, natural scroll
   with snap points on the 984 module, arrows + click-the-peek to advance.
   Full-bleed via negative margins, padded back so card 1 sits on the module. */
.hiw-grid {
  display: flex; gap: 12.8px;
  margin: 20px calc(-48px - max(0px, (100vw - 1080px) / 2)) 0;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain; scrollbar-width: none;
  padding-inline: max(24px, calc((100vw - 984px) / 2));
  scroll-padding-inline: max(24px, calc((100vw - 984px) / 2));
}
.hiw-grid::-webkit-scrollbar { display: none; }
.hiw-cell { position: relative; flex: none; width: min(485.6px, calc(100vw - 48px)); height: 777.6px; border-radius: 25.6px; overflow: hidden; color-scheme: light; scroll-snap-align: start; }
.hiw-nav { display: flex; gap: 12px; justify-content: flex-end; max-width: 984px; margin: 20px auto 0; }
.hn-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f4f4f5; color: #09090b; cursor: pointer; transition: background 0.15s, opacity 0.15s; }
.hn-btn:hover:not(:disabled) { background: #e9e9ec; }
.hn-btn:disabled { opacity: 0.35; cursor: default; }
.hn-btn svg { width: 16px; height: 16px; display: block; }
.hiw-art { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hiw-art img { display: block; width: 100%; height: 100%; max-width: none; }
.hiw-tab { position: absolute; z-index: 2; left: 22.4px; top: 22.4px; }
.hiw-tab-t { display: block; font-size: 16px; line-height: 26px; font-weight: 500; color: #000; }
.hiw-tab-d { display: block; margin-top: 5.6px; font-size: 16px; line-height: 26px; color: #000; }

/* The widget: the 396x640 build scaled to 316.8x512, per-cell position */
.hiw-gw { position: absolute; z-index: 2; left: 84.4px; top: 147.2px; width: 316.8px; height: 512px; pointer-events: none; }
.hiw-gw .widget { width: 396px; height: 640px; transform: scale(0.8); transform-origin: 0 0; }
:is(.hiw-cell, .cta-final, .ucf-scene, .hiw-tip) .w-body { flex: 1; min-height: 0; overflow: hidden; padding: 16px 16px 0; }
/* Exact Figma metrics where they differ from the demo widget's defaults */
:is(.hiw-cell, .cta-final, .ucf-scene, .hiw-tip) .w-assist { display: flex; flex-direction: column; gap: 4px; }
:is(.hiw-cell, .cta-final, .ucf-scene, .hiw-tip) .w-tabs { letter-spacing: -0.83px; }
:is(.hiw-cell, .cta-final, .ucf-scene, .hiw-tip) .bubble { letter-spacing: -0.34px; }
:is(.hiw-cell, .cta-final, .ucf-scene, .hiw-tip) .w-tool { letter-spacing: -0.08px; }
:is(.hiw-cell, .cta-final, .ucf-scene, .hiw-tip) .w-reply { letter-spacing: -0.23px; width: 100%; }
:is(.hiw-cell, .cta-final, .ucf-scene, .hiw-tip) .composer-box { padding: 8px; }
:is(.hiw-cell, .cta-final, .ucf-scene, .hiw-tip) .chip { padding: 6px 10px 6px 8px; }
:is(.hiw-cell, .cta-final, .ucf-scene, .hiw-tip) .chip .label { letter-spacing: 0.03px; }
:is(.hiw-cell, .cta-final, .ucf-scene, .hiw-tip) .composer-input { letter-spacing: -0.3px; }
:is(.hiw-cell, .cta-final, .ucf-scene, .hiw-tip) .w-modelrow { padding: 0 8px; }
:is(.hiw-cell, .cta-final, .ucf-scene, .hiw-tip) .w-foot-left { padding-left: 0; }
:is(.hiw-cell, .cta-final, .ucf-scene, .hiw-tip) .w-toggle-label, .hiw-cell .w-reset, .hiw-cell .w-model { letter-spacing: -0.68px; }
:is(.hiw-cell, .cta-final, .ucf-scene, .hiw-tip) .w-model { padding: 2px 6px; }
:is(.hiw-cell, .cta-final, .ucf-scene, .hiw-tip) .w-reply code { background: rgba(0, 0, 0, 0.06); border-radius: 4px; padding: 0 4px; font-family: inherit; color: inherit; }
:is(.hiw-cell, .cta-final, .ucf-scene, .hiw-tip) .w-reply strong { font-weight: 600; }
:is(.hiw-cell, .cta-final, .ucf-scene, .hiw-tip) .w-reply p { margin: 0; }
:is(.hiw-cell, .cta-final, .ucf-scene, .hiw-tip) .w-reply p + p { margin-top: 8px; }
.w-foot-right { display: flex; align-items: center; gap: 8px; }
.w-ring-btn { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 6px; color: #71717a; }
.w-ring-btn .ic { width: 14px; height: 14px; }
.hiw-cell-el .w-head, .hiw-cell-ho .w-head { box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.1); }
.hiw-cell-ho .w-body { justify-content: flex-end; }
.hiw-cell-ho .bubble { width: 308px; }
.hiw-cell-ia .w-foot-left { opacity: 0.4; }

/* Point & ask — a giant selected h1 + a black mark behind (green field) */
.hxa-pa-shape { position: absolute; left: -34.6px; top: 431.2px; width: 85.6px; height: 85.6px; }
.hxa-pa-h1 { position: absolute; left: -552px; top: 532.8px; width: 2250.5px; height: 154.55px; border: 0.8px solid #0062ff; }
.hxa-pa-h1 img { position: absolute; left: -0.8px; top: -0.8px; width: 2250.5px; height: 154.55px; }

/* Edit live — two headline pieces, the email form and the selected CTA */
.hxa-el-h1a { position: absolute; left: 22.6px; top: 250.4px; width: 1579.16px; height: 129.5px; }
.hxa-el-h1b { position: absolute; left: -983.4px; top: 381.4px; width: 1579.16px; height: 129.5px; }
.hxa-el-form { position: absolute; left: -316px; top: 512.4px; width: 571.2px; height: 78.7px; background: rgba(33, 33, 33, 0.02); border: 1.27px solid rgba(33, 33, 33, 0.1); border-radius: 15.23px; }
.hxa-el-btn { position: absolute; left: 24.9px; top: 519.4px; width: 223.95px; height: 64.74px; display: flex; align-items: center; justify-content: center; background: #e4f222; border-radius: 7.62px; }
.hxa-el-btn img { width: 168.67px; height: 14.91px; }
.hxa-el-sel { position: absolute; left: 24.9px; top: 519.4px; width: 223.95px; height: 64.74px; border: 1.27px solid #0062ff; }

/* Hand it off — the Claude Code desktop app pinned to the corner, fading out */
.hxa-ho-app { position: absolute; right: 0; bottom: 0; width: 360px; height: 599px; }
.hxa-ho-fade { position: absolute; left: -13px; top: 470px; width: 511px; height: 311px; background: linear-gradient(to bottom, rgba(250, 249, 245, 0) 0%, #faf9f5 75.79%, #faf9f5 100%); }

/* Inspect anything — the outlined headline behind (sky field) */
.hxa-ia-h1 { position: absolute; left: -10.4px; top: 402px; width: 1338px; height: 307.56px; }

/* Edit live — the /inspect result cards inside the widget */
.hxi-wrap { display: flex; flex-direction: column; gap: 6px; width: 100%; padding-top: 4px; }
.hxi-card { width: 100%; background: #fff; border: 1px solid #e4e4e7; border-radius: 12px; padding: 15px 18px 10px; }
.hxi-h { padding-bottom: 4px; font-size: 11.5px; line-height: 17.8px; font-weight: 500; letter-spacing: 0.03px; color: #71717a; }
.hxi-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.hxi-k { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; font-size: 12.5px; line-height: 19.4px; font-weight: 500; letter-spacing: -0.04px; color: #09090b; }
.hxi-dot { padding: 4px; font-size: 10px; line-height: 10px; letter-spacing: 0.12px; color: #f59e0b; }
.hxi-v { flex: none; display: flex; align-items: center; width: 136px; height: 30px; background: #f3f3f3; border-radius: 8px; font-size: 12px; line-height: 18.6px; font-weight: 500; color: #222; }
.hxi-t { padding: 0 7px; min-width: 0; overflow: hidden; white-space: nowrap; }
.hxi-v.sw { gap: 8px; padding-left: 4px; color: #333; }
.hxi-v.sw .hxi-t { padding: 0 8px 0 0; }
.hxi-sw { flex: none; width: 22px; height: 22px; border-radius: 4px; }
.hxi-v.split { background: none; gap: 1px; overflow: hidden; }
.hxi-v.split span { flex: 1; min-width: 0; height: 30px; display: flex; align-items: center; justify-content: center; background: #f3f3f3; }
.hxi-add .hxi-k { color: #71717a; letter-spacing: -0.07px; }
.hxi-add .hxi-v { opacity: 0.5; }
.hxi-plus { width: 10px; height: 10px; }
.hxi-actions { display: flex; align-items: center; gap: 8px; padding-left: 4px; }
.hxi-actions .icon-btn { display: flex; padding: 4px; border-radius: 6px; color: var(--w-muted); }
.hxi-actions .icon-btn .ic { width: 16px; height: 16px; }
.hxi-div { flex: none; width: 1px; height: 14px; background: #e4e4e7; margin: 0 2px; }
.hxi-reset { display: flex; align-items: center; height: 24px; padding: 0 6px; font-size: 12.5px; line-height: 12.5px; font-weight: 500; letter-spacing: -0.04px; color: #71717a; }

/* Inspect anything — the empty widget + the parent-chain chips */
.ia-empty { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.ia-tile { width: 64px; height: 64px; background: #e6e6e6; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.ia-tile img { display: block; width: 40px; height: 46.66px; }
.ia-headline { font-size: 20px; line-height: 25px; font-weight: 600; letter-spacing: -0.95px; color: #09090b; }
.ia-chips { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 6px; }
.ia-chips .chip { margin-bottom: 0; padding: 6px 6px 6px 8px; }
.ia-chips .chip.dim { opacity: 0.6; padding-right: 10px; }

/* Hand it off — the drafted-task tail of the exchange */
.fv-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #0068f9; border: 1px solid rgba(0, 0, 0, 0.1); vertical-align: -1px; margin-left: 4px; }
.fv-task { padding: 2px 0 8px; width: 100%; }
.fv-task-h { margin: 0; font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -0.43px; color: #09090b; }
.fv-task-p { margin: 4px 0 0; height: 47px; overflow: hidden; font-size: 15px; line-height: 21px; letter-spacing: -0.23px; color: #09090b; }
.fv-task-list { margin: 8px 0 0; padding: 0 0 4px 20px; display: flex; flex-direction: column; gap: 8px; list-style: none; }
.fv-task-list li { padding-top: 2px; max-width: 344px; font-size: 15px; line-height: 21px; letter-spacing: -0.23px; color: #09090b; }
.fv-sp24 { flex: none; width: 100%; height: 24px; }
.w-mods img { display: block; width: 16px; height: 16px; }

/* Use cases — the hero frame held still: browser tabs are roles, the window
   shows that role's example. Chrome mirrors the demo frame at 1:1. */
.uc-demo { max-width: 984px; margin: 20px auto 0; }
.fav-sw { width: 16px; height: 16px; border-radius: 4px; flex: none; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.1); }
.ucf-tab { cursor: pointer; }
.ucf-scene { display: none; position: absolute; inset: 2px; border-radius: 10px; overflow: hidden; color-scheme: light; }
.ucf-scene.on { display: block; }
.ucf-gw { position: absolute; left: 50%; top: 44px; transform: translateX(-50%); width: 316.8px; height: 512px; pointer-events: none; }
.ucf-gw .widget { width: 396px; height: 640px; transform: scale(0.8); transform-origin: 0 0; }
.ucf-scene .hiw-try { top: auto; bottom: 8px; }
.uc-cap { max-width: 984px; margin: 16px auto 0; font-size: 14.5px; color: var(--muted-fg); }

/* Under the rail: the features we don't demo above — card-title sized pills,
   each opening a literal mini-UI preview (600x300) in a shared slot above. */
.hiw-also { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; max-width: 984px; margin: 24px auto 0; }
.hiw-also-k { font-size: 16px; line-height: 26px; color: var(--muted-fg); margin-right: 6px; }
/* the gaps are fake: the pill itself is a bleeding hover zone (padding pulled
   back by negative margins) around the visual face — sliding across the row
   never drops the preview, and the tips anchor to the row, not the pill */
.hiw-pill { padding: 12px 5px; margin: -12px -5px; font-size: 16px; line-height: 26px; font-weight: 500; color: #000; white-space: nowrap; cursor: default; }
.hiw-pill .pf { display: inline-block; padding: 7px 15px; border-radius: 999px; background: #f4f4f5; }
.hiw-pill:hover .pf { background: #ececef; }
.hiw-tip {
  position: absolute; bottom: calc(100% + 16px); left: 50%; z-index: 8;
  width: 600px; height: 400px; border-radius: 16px; overflow: hidden;
  background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 17px 18px -12px rgba(0, 0, 0, 0.08);
  transform: translateX(-50%); pointer-events: none;
  display: none; align-items: center; justify-content: center;
}
.hiw-pill:hover .hiw-tip { display: flex; }

/* responsive — the real overlay: #323234 room, the exact pill, a device frame */
.tip-resp { background: #323234; flex-direction: column; justify-content: flex-start; padding: 12px 0 24px; }
.tip-resp .tr-frame { margin: auto 0; }
.tr-pill { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(20, 20, 22, 0.94); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); font: 500 12px Inter, ui-sans-serif, system-ui, sans-serif; }
.tr-pill b, .tr-pill > span:not(.tr-size):not(.tr-x), .tr-pill i { border-radius: 999px; padding: 5px 11px; font-weight: 500; }
.tr-pill b { background: #fff; color: #18181b; }
.tr-pill > span:not(.tr-size):not(.tr-x) { color: #e4e4e7; }
.tr-pill u { width: 1px; height: 16px; margin: 0 4px; background: rgba(255, 255, 255, 0.18); text-decoration: none; }
.tr-size { color: #e4e4e7; font-variant-numeric: tabular-nums; font-size: 11px; padding: 5px 3px; }
.tr-x { color: rgba(255, 255, 255, 0.3); font-size: 11px; }
.tr-pill i { font-style: normal; color: #fff; padding: 5px 9px; }
.tr-frame { display: flex; flex-direction: column; gap: 9px; width: 134px; height: 282px; padding: 16px 13px; background: #fff; border-radius: 10px; box-shadow: 0 12px 44px rgba(0, 0, 0, 0.35); white-space: normal; overflow: hidden; }
.trf-nav { display: flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 600; letter-spacing: -0.1px; color: #09090b; }
.trf-nav i { width: 9px; height: 9px; border-radius: 2.5px; background: #f9ed32; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.2); }
.trf-h { margin-top: 8px; font-size: 15px; line-height: 18px; font-weight: 700; letter-spacing: -0.3px; color: #09090b; }
.trf-p { font-size: 9.5px; line-height: 13px; letter-spacing: -0.05px; color: #71717a; }
.trf-cta { align-self: flex-start; margin-top: 3px; padding: 5px 9px; border-radius: 6px; background: #18181b; color: #fff; font-size: 9px; font-weight: 500; }
.trf-img { flex: 1; border-radius: 7px; background: #f9ed32; margin-top: 8px; }

/* the real widget, posed inside a preview */
.tip-gw { display: flex; align-items: center; justify-content: center; }
.tipw { display: flex; flex-direction: column; width: 396px; transform: scale(0.8); transform-origin: center; }
.tipw .w-body-lite { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 16px 16px 20px; }
.tipw .w-msg.user { align-self: flex-end; }

/* tokens — the widget on its Tokens tab, the real panel rows */
.tip-tokens { background: #f4f4f5; }
.tip-tokens .w-head { box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.1); }
.tk-panel { display: flex; flex-direction: column; padding: 14px 20px; }
.tk-count { font-size: 12px; line-height: 16px; color: #71717a; padding-bottom: 12px; }
.tk-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; }
.tk-k { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 12.5px; line-height: 18px; font-weight: 500; color: #09090b; }
.tk-dot { font-style: normal; font-size: 10px; color: #f59e0b; padding: 0 3px; }
.tk-v { display: flex; align-items: center; gap: 8px; width: 136px; height: 30px; padding-left: 4px; border-radius: 8px; background: #f3f3f3; font-size: 12px; font-weight: 500; color: #333; flex: none; }
.tk-v i { width: 22px; height: 22px; border-radius: 4px; flex: none; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.08); }
.tk-v:not(:has(i)) { padding-left: 7px; color: #222; }

/* /inline — a ringed heading mid-rewrite */
.tip-copy { background: #f4f2f0; flex-direction: column; gap: 26px; }
.tc-wrap { position: relative; padding: 14px 22px; box-shadow: inset 0 0 0 1px #0062ff; }
.tc-tag { position: absolute; left: 0; top: -22px; 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); }
.tc-text { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; color: #0a0a0a; }
.tc-caret { display: inline-block; width: 2px; height: 0.95em; margin-left: 2px; background: #0a0a0a; vertical-align: -2px; animation: cc-caret 1s step-end infinite; }
.tc-skill { font-size: 13px; color: rgba(10, 10, 10, 0.55); }

/* element screenshots — the ringed element + its captured thumb */

/* undo & reset — the widget's own tail: mods + footer */
.tip-undo { background: #f4f4f5; }
.tip-undo .icon-btn.tu-on { background: #f4f4f5; border-radius: 6px; color: #18181b; }

/* slash — the real picker over the real composer */
.tsl-anchor { position: relative; }
.tsl-typed { font-size: 14.5px; letter-spacing: -0.3px; color: #09090b; }
.tsl-menu { position: absolute; bottom: calc(100% + 8px); left: 0; display: flex; flex-direction: column; min-width: 180px; max-width: 300px; padding: 4px; background: #fff; border-radius: 10px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 17px 18px -12px rgba(0, 0, 0, 0.08); }
.tsl-item { display: block; padding: 6px 10px; border-radius: 7px; font-size: 13px; font-weight: 500; color: #09090b; text-align: left; }
.tsl-item.on { background: #f4f4f5; }
.tip-slash { background: #f4f4f5; }
.tip-slash .tipw { overflow: visible; }
.tip-slash .composer-box { border: 0; }
.tip-slash .tip-gw { align-items: flex-end; height: 100%; padding-bottom: 16px; }

/* multi-select — two ringed elements, both chipped in the real composer */
.tip-multi { background: #00e013; flex-direction: column; gap: 10px; }
.tm-stage { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding-top: 10px; white-space: normal; }
.tm-pick { position: relative; padding: 5px 10px; border-radius: 3px; box-shadow: 0 0 0 1.5px #0062ff; }
.tm-h { font-size: 23px; line-height: 28px; font-weight: 700; letter-spacing: -0.4px; color: #000; }
.tm-cta { display: inline-block; padding: 8px 14px; border-radius: 8px; background: #18181b; color: #fff; font-size: 12.5px; font-weight: 500; }
.tm-tag { position: absolute; top: -7px; left: -1.5px; transform: translateY(-100%); background: #0062ff; color: #fff; font: 500 10.5px ui-monospace, Menlo, monospace; padding: 2px 6px; border-radius: 4px; white-space: nowrap; }

/* dark mode — the real dkw widget */
.tip-lang { background: #6ed8ff; }
.tip-dark { background: #101014; }
.tip-dark .tipw { border-radius: 24px; }

/* The prompt line near the bottom of every cell (the 78-design bar at 0.8) */
.hiw-try { position: absolute; left: 22.4px; right: 22.4px; top: 723.2px; z-index: 2; display: flex; align-items: center; gap: 9.6px; padding: 10.4px 0 6.4px; border-top: 0.5px solid rgba(0, 0, 0, 0.1); }
.hiw-try-text { flex: 1; min-width: 0; font-size: 14px; line-height: 20px; letter-spacing: -0.11px; color: #09090b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hiw-try-k { color: rgba(9, 9, 11, 0.5); }
.hiw-copy { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border: 0; cursor: pointer; background: none; color: #18181b; border-radius: 6.4px; }
.hiw-copy:hover { background: rgba(0, 0, 0, 0.06); }
.hiw-copy-ic { width: 12px; height: 12px; display: block; }
.hiw-copy.copied { background: rgba(0, 0, 0, 0.06); }
.hiw-check-ic { display: none; width: 12px; height: 12px; }
.hiw-copy.copied .hiw-copy-ic { display: none; }
.hiw-copy.copied .hiw-check-ic { display: block; }
/* Every card shares the same dark prompt line, whatever the field colour. */


/* How it works — Figma 69:8565: three #f7f7f7 cards on the 984 module (the
   demo's width), each visual built from the REAL widget (radius 18, 0.75px
   ring — the demo frame) transform-scaled to the design's exact geometry. */
.hiw { max-width: 1032px; }
.hiw-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.hiw-card { --hiw-bg: #f7f7f7; background: var(--hiw-bg); border: 1px solid #eee; border-radius: 14px; overflow: hidden; }
.hiw-card h3 { margin: 20px 24px 0; font-size: 16px; font-weight: 500; line-height: 22px; letter-spacing: -0.16px; color: #09090b; }
.hiw-card > p { margin: 7px 24px 24px; font-size: 15px; line-height: 22px; color: #71717a; }
.hiw-viz { position: relative; height: 188px; overflow: hidden; color-scheme: light; }
.hiw-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 43px; background: linear-gradient(to bottom, color-mix(in srgb, var(--hiw-bg) 0%, transparent), var(--hiw-bg)); }

.hiw-frame { position: absolute; }
.hiw-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-hover: #f4f4f5;
  --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);
  position: absolute; top: 0; left: 0; width: 396px; border-radius: 18px; transform-origin: top left;
}
.hiw-widget .w-body { flex: 1; min-height: 0; }
.f1 { left: 200px; bottom: 30.18px; width: 321.64px; height: 519.82px; }
.f1 .hiw-widget { height: 640px; transform: scale(0.8122); }
.f2 { left: 50%; top: 24.59px; width: 264px; height: 241.82px; margin-left: -132px; }
.f3 { left: calc(50% + 0.34px); top: -45.41px; width: 264px; height: 241.82px; margin-left: -132px; }
.f2 .hiw-widget, .f3 .hiw-widget { height: 362.74px; transform: scale(0.66665); }

/* Card 1 — the page, its selected CTA, the pointer (viz coordinates) */
.hp1-page { position: absolute; left: 24px; top: -23px; width: 345px; height: 197px; background: #ffffff; border-radius: 14.62px; box-shadow: 0 0 0 0.609px rgba(0, 0, 0, 0.1), 0 10.559px 11.371px -7.31px rgba(0, 0, 0, 0.08); }
.hp1-title { position: absolute; left: 74px; top: 32px; font-size: 50.15px; line-height: 16.244px; font-weight: 500; letter-spacing: -0.52px; color: #000000; white-space: nowrap; }
.hp1-cta { position: absolute; left: 75px; top: 83px; width: 98px; height: 37px; padding: 0; border: 0; border-radius: 6px; background: #18181b; color: #ffffff; font: 500 14px 'Inter', sans-serif; }
.hp1-sel { position: absolute; left: 69px; top: 77px; width: 109.66px; height: 49px; border: 1px solid #0062ff; pointer-events: none; }
.hp1-label { position: absolute; left: 69px; top: 56px; padding: 2px 6px; border-radius: 4px; background: #0062ff; color: #ffffff; font: 400 11px Menlo, ui-monospace, monospace; white-space: nowrap; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25)); }
.hp1-cursor { position: absolute; left: 166px; top: 82px; width: 28.66px; height: 28.66px; filter: drop-shadow(0 0.955px 1.911px rgba(0, 0, 0, 0.3)); }
.hp1-cursor svg { display: block; width: 100%; height: 100%; }

/* Card 2 — the exchange, drawn over the widget */
.c2-convo { position: absolute; left: 50%; top: 66.33px; width: 237.6px; margin-left: -118.8px; display: flex; flex-direction: column; align-items: flex-end; gap: 7.52px; }
.c2-bubble { background: #f2f2f2; border-radius: 16.54px; padding: 6.85px 12.03px 5.85px; font-size: 10.87px; line-height: 15.05px; color: #09090b; }
.c2-reply { width: 100%; font-size: 11.29px; line-height: 15.05px; color: #09090b; }
.c2-mods { width: 100%; display: flex; gap: 7.52px; padding-top: 0.84px; }
.c2-mods .ic { display: block; flex: none; width: 12.54px; height: 12.54px; color: #71717a; }
.c2-mods .ic svg { display: block; width: 100%; height: 100%; }

/* Card 3 — the /task result */
.c3-task { position: absolute; left: 36.67px; top: -10.15px; width: 239px; }
.c3-t { padding-top: 1.31px; font-size: 11.16px; font-weight: 600; line-height: 13.79px; color: #09090b; }
.c3-d { padding-top: 2.63px; font-size: 9.85px; line-height: 13.79px; color: #09090b; }
.c3-l { margin: 0; padding: 5.25px 0 1.31px 13.13px; list-style: none; }
.c3-l li { padding-top: 1.31px; font-size: 9.85px; line-height: 13.79px; color: #09090b; white-space: nowrap; }
.c3-l li:first-child { padding-top: 0; }
.c3-acts { display: flex; align-items: center; gap: 5.25px; padding-top: 2.63px; }
.c3-ic { display: block; flex: none; width: 10.5px; height: 10.5px; margin: 2.63px; color: #71717a; }
.c3-ic svg, .c3-lic svg { display: block; width: 100%; height: 100%; }
.c3-linear { display: inline-flex; align-items: center; padding: 1.97px 3.94px 1.97px 2.63px; font-size: 7.55px; font-weight: 500; letter-spacing: 0.022px; color: #09090b; white-space: nowrap; }
.c3-lic { display: block; flex: none; width: 10.5px; height: 10.5px; color: #09090b; }

/* Capability grid */
.grid-feat { margin-top: 140px; }
.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); }

/* Bento — "A whole devtool in one little widget". Two wide columns; every
   tile is the REAL Voila widget (markup verified against ChatWidget.tsx /
   TokensPanel.tsx) at NATIVE 1:1 scale — real font sizes, crisp hairlines —
   rising from the tile bottom like a sheet: same 28px top gap, same anchor,
   crops computed to land on the content. The hero pairs the whole widget
   with the page it just restyled. --bs only shrinks it on small screens. */
.bento {
  --bs: 1;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  grid-template-areas:
    'hero   hero'
    'tokens skills'
    'tokens mention'
    'ship   ship';
}
.bento-cell {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: color-mix(in srgb, var(--fg) 2.5%, var(--bg));
}
.bento-hero { grid-area: hero; }
.bt-tokens { grid-area: tokens; }
.bt-skills { grid-area: skills; }
.bt-mention { grid-area: mention; }
.bt-ship { grid-area: ship; }
.bento-txt { padding: 24px 28px 0; }
.bento-txt h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg); margin-bottom: 5px; }
.bento-txt p { font-size: 14px; line-height: 1.5; color: var(--muted-fg); max-width: 620px; }

/* Placement: the frame reserves the (scaled) box in flow; the widget paints
   inside it, overflow clipped by the viz. Sheets sit 28px under the text and
   crop at the tile edge; anchors align them to the 28px inset module. */
.bento-viz { position: relative; display: flex; justify-content: center; overflow: hidden; color-scheme: light; }
.bento-frame { position: relative; flex: none; width: calc(396px * var(--bs)); }
.bento-s .bento-viz { height: calc(383px * var(--bs)); padding-top: 28px; }
.bento-s .bento-frame { align-self: stretch; }
.bento-s .bv-left { justify-content: flex-start; padding-left: 28px; }
.bento-s .bv-right { justify-content: flex-end; padding-right: 28px; }

/* Tokens — the tall tile: the whole 640px widget, centered, fully visible */
.bt-tokens .bento-viz { flex: 1; height: auto; align-items: center; padding: 28px 0; }
.bt-tokens .bento-frame { align-self: auto; height: calc(640px * var(--bs)); }

/* Ship — the wide finale: text left, task sheet right, cropped low */
.bt-ship { flex-direction: row; align-items: stretch; }
.bt-ship .bento-txt { flex: 0 0 40%; align-self: center; padding: 28px 12px 28px 28px; }
.bt-ship .bento-viz { flex: 1; height: calc(340px * var(--bs)); }

/* Hero scene: restyled page (left) + the whole widget (right), both flush
   to the same 28px inset and the same top/bottom lines. */
.bv-hero { align-items: center; gap: 48px; padding: 30px 28px 36px; }
.bv-hero .bento-frame { height: calc(420px * var(--bs)); }
.hero-page {
  flex: 1; align-self: stretch; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 14px;
  padding: 36px 40px; background: #ffffff; border: 1px solid #e4e4e7; border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.hp-bar { height: 14px; border-radius: 6px; background: #f2f2f2; }
.hp-bar.hp-thin { height: 9px; margin-top: 2px; }
.hero-el { position: relative; margin-top: 28px; }
.hero-cta { padding: 11px 24px; border: 0; border-radius: 999px; background: #e11d48; color: #fff; font: 500 14px 'Inter', sans-serif; }

/* The real widget (396px wide, radius 24, ring — the app's exact frame),
   forced light. Small tiles use the app's short frame (396px tall — it is
   resizable); tokens keeps the full 640px so the rows run past the edge. */
.bento-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-hover: #f4f4f5;
  --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);
  position: absolute; top: 0; left: 0; width: 396px; height: 420px;
  transform: scale(var(--bs)); transform-origin: top left;
}
.bw-tokens { height: 640px; }
/* Skills / mention run the app's compact frame so the flow fills the crop */
.bt-skills .bento-widget, .bt-mention .bento-widget { height: 360px; }
.bento-widget .w-body { flex: 1; min-height: 0; }
.bento-widget .w-foot-left.dim { opacity: 0.4; }

/* Suggestion menus (/ and @) shown open, anchored above the input like the
   app: 8px gap (mb-2), under the character being typed. */
.bento-widget .menu-pop { opacity: 1; transform: none; transition: none; min-width: 180px; left: 8px; bottom: calc(100% + 8px); }
.bento-widget .menu-pop.menu-at { left: 138px; }
.bento-widget .at-item .vl { font-family: inherit; }
/* The app's textarea is plain #09090b — native caret, no mention coloring */
.bento-widget .composer-input .caret { display: inline-block; background: var(--w-fg); }
.bento-widget .w-btn.send.on { opacity: 1; }

/* Tokens tab (TokensPanel.tsx): "N tokens on this page" + rows. No composer —
   the real Tokens view replaces the chat entirely. Pills are 136×30 #f3f3f3
   with a 22px swatch (fields.tsx / ColorPicker.tsx), sans, not mono. */
.bento-widget .tokens-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 14px 20px; overflow: hidden; }
.bento-widget .tokens-count { font-size: 12px; line-height: 16px; color: var(--w-muted); }
.bento-widget .tokens-rows { display: flex; flex-direction: column; padding-top: 12px; }
.bento-widget .tok-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; }
.bento-widget .tok-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: inherit; font-size: 12.5px; font-weight: 500; line-height: 18px; color: var(--w-fg); }
.bento-widget .tok-val { display: flex; align-items: center; gap: 8px; flex: none; width: 136px; height: 30px; padding: 0 7px; border-radius: 8px; background: #f3f3f3; font-family: inherit; font-size: 12px; font-weight: 500; color: #333333; }
.bento-widget .tok-val.c { padding-left: 4px; }
.bento-widget .tok-val .sw { width: 22px; height: 22px; border-radius: 4px; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); }

/* /task reply actions (base classes ship display:none for the home demo) */
.bento-widget .task-actions { display: flex; }
.bento-widget .linear-done { display: inline-flex; }
.bento-widget .linear-done .ic { width: 16px; height: 16px; }
.bento-widget .task-reply code { border-radius: 4px; background: color-mix(in srgb, var(--w-fg) 8%, transparent); padding: 1px 4px; font-family: inherit; }

@media (max-width: 880px) {
  .bento { grid-template-columns: 1fr; grid-template-areas: 'hero' 'tokens' 'skills' 'mention' 'ship'; }
  .hero-page { display: none; }
  .bv-hero { justify-content: center; padding: 28px 24px 34px; }
  .bento-s .bv-left, .bento-s .bv-right { justify-content: center; padding-left: 0; padding-right: 0; }
  .bt-tokens .bento-viz { padding: 28px 0; }
  .bt-ship { flex-direction: column; align-items: stretch; }
  .bt-ship .bento-txt { flex: none; align-self: auto; padding: 24px 28px 0; }
  .bt-ship .bento-viz { height: calc(320px * var(--bs)); padding-top: 28px; }
}
@media (max-width: 520px) {
  .bento { --bs: 0.66; }
}

/* Integrations */
/* Integrations — one hairline board (the pricing language): Linear with a
   real issue artifact, the next slot reserved */
/* Integrations — the How it works card language: colour fields, the same
   title block at 22.4/22.4, a 0.5px example line pinned to the bottom. */
.itg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 319.47px)); gap: 12.8px; justify-content: center; margin-top: 20px; }
@media (max-width: 760px) { .itg-grid { grid-template-columns: repeat(2, minmax(0, 340px)); } }
@media (max-width: 520px) { .itg-grid { grid-template-columns: minmax(0, 420px); } }
.itg-card { position: relative; height: 340px; border-radius: 25.6px; overflow: hidden; }
/* the mark sits above the title, flush left; everything breathes on a
   28px inset with air between the icon and the text block */
.itg-card .hiw-tab { left: 28px; top: 78px; right: 28px; }
.itg-mark { position: absolute; top: 28px; left: 28px; width: 24px; height: 24px; color: #000; }
.itg-mark-ph { color: #a1a1aa; }
.itg-mark svg { display: block; width: 100%; height: 100%; }
.itg-mark svg[aria-label="Lovable"] { width: 21px; height: 21px; margin: 1.5px; }
.itg-line { position: absolute; left: 28px; right: 28px; bottom: 20px; padding-top: 12px; border-top: 0.5px solid rgba(0, 0, 0, 0.1); font-size: 14px; line-height: 20px; letter-spacing: -0.11px; color: #09090b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Enterprise — standard section intro, then one dark hairline grid on the
   same 18px-radius board language as pricing */
.ent { max-width: 1080px; margin: 140px auto 0; padding-inline: 24px; }
/* One dark panel at the full header-band width; the inner content lines up
   with the page's text column (24px section pad + the band overhang). */
.ent-panel {
  /* the section content box IS the 984 module: pull out past its 24px pad
     plus the band overhang to hit the exact header width, then pad the same
     amount back so the inner content sits on the content grid */
  margin-inline: calc(-24px - min(89px, max(0px, (100vw - 1032px) / 2)));
  background: #0b0b0e; border-radius: 25.6px; color-scheme: dark;
  padding: 120px calc(24px + min(89px, max(0px, (100vw - 1032px) / 2)));
  display: grid; grid-template-columns: 460px 1fr; gap: 64px 96px;
  align-items: start;
}
.ent-mark { position: relative; display: flex; align-items: center; justify-content: center; width: 144px; height: 144px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 27px; overflow: hidden; }
/* Hover shimmer — one diagonal light sweep across the tile */
.ent-mark::after { content: ''; position: absolute; inset: -20%; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.14) 44%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.14) 56%, transparent 70%); transform: translateX(-130%); pointer-events: none; }
.ent-mark:hover::after { animation: ent-shimmer 0.9s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes ent-shimmer { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
.ent-mark img { display: block; width: 90px; height: 105px; }
.ent-panel .feat-intro { margin-top: 32px; }
.ent-panel .feat-eyebrow { font-size: 13.5px; line-height: 20px; font-weight: 500; color: rgba(255, 255, 255, 0.5); }
.ent-panel .feat-title { margin-top: 14px; font-size: 38px; line-height: 41.8px; font-weight: 600; letter-spacing: -0.95px; color: #fff; }
.ent-panel .feat-lede { margin-top: 14px; font-size: 16.5px; line-height: 26.4px; color: rgba(255, 255, 255, 0.68); }
.btn-light { background: #fafafa; color: #101014; }
.btn-light:hover { background: #fff; }
.ent-cta { margin-top: 32px; }
.ent-cta .btn-light { padding: 11px 20px; border-radius: 6px; font-size: 15px; font-weight: 500; }
/* The four points, line by line on the right */
.ent-feats { display: flex; flex-direction: column; gap: 36px; border-left: 1px solid rgba(255, 255, 255, 0.3); padding-left: 57px; }
.ent-item { display: grid; grid-template-columns: 20px 1fr; column-gap: 16px; row-gap: 0; align-items: start; }
.ent-item h3, .ent-item p { grid-column: 2; }
.ent-ic { display: block; width: 20px; height: 20px; color: #fafafa; opacity: 0.92; }
.ent-ic svg { width: 100%; height: 100%; display: block; }
.ent-item h3 { margin-top: 0; font-size: 15.5px; line-height: 24.8px; font-weight: 600; letter-spacing: -0.155px; color: #fff; }
.ent-item p { margin-top: 6px; font-size: 14px; line-height: 22.4px; color: rgba(255, 255, 255, 0.58); max-width: 392px; }
.ent-ic { margin-top: 1px; }
.ent-item > div, .ent-body { min-width: 0; }

/* Pricing — one wide board: three columns on hairlines, footer band */
.price-board {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border); border-radius: 18px; background: var(--bg); overflow: hidden;
}
.price-col { display: flex; flex-direction: column; align-items: flex-start; padding: 34px 36px 30px; }
.price-col + .price-col { border-left: 1px solid var(--border); }
.pb-name { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--fg); }
.pb-name i { font-style: normal; font-size: 10.5px; font-weight: 500; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); padding: 1.5px 7px; border-radius: 999px; }
.pb-num { margin-top: 18px; font-size: 46px; font-weight: 600; letter-spacing: -0.035em; line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; }
.pb-unit { margin-top: 10px; font-size: 14.5px; font-weight: 500; color: var(--fg); }
.pb-sub { margin-top: 3px; font-size: 13px; color: var(--muted-fg); }
.pb-sub a { color: var(--fg); text-underline-offset: 2px; }
.price-foot {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 16px 16px 36px; border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--fg) 2.5%, var(--bg));
  font-size: 13px; color: var(--muted-fg);
}

/* Final CTA */
.cta-final { --bo: min(89px, max(0px, (100vw - 1032px) / 2)); position: relative; height: 600px; margin: 140px calc(-1 * var(--bo)) 120px; background: #f9ed32; border-radius: 25.6px; overflow: hidden; color-scheme: light; }
.cta-copy { position: absolute; left: calc(64px + var(--bo)); top: 50%; transform: translateY(-50%); }
.cta-final h2 { font-size: clamp(30px, 4.2vw, 46px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; color: #0a0a0a; }
.cta-final .cta-copy > p { margin-top: 13px; font-size: 17px; color: rgba(10, 10, 10, 0.72); }
.cta-row { display: flex; gap: 12px; margin-top: 30px; }
/* the widget, at the How-it-works scale, showing off a fun ask */
.cta-gw { position: absolute; right: calc(64px + var(--bo)); top: 44px; width: 316.8px; height: 512px; pointer-events: none; }
.cta-gw .widget { width: 396px; height: 640px; transform: scale(0.8); transform-origin: 0 0; }
.cta-final .w-body, .ucf-scene .w-body { flex: 1; min-height: 0; overflow: hidden; padding: 16px 16px 0; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border: 0; border-radius: 8px; font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1; text-decoration: none; cursor: pointer; -webkit-appearance: none; appearance: 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 (max-width: 860px) {
  .feat { margin-top: 96px; }
  .hiw-cards { grid-template-columns: 1fr; gap: 16px; }
  .gf-grid { grid-template-columns: 1fr; }
  .grid-feat, .cta-final, .ent { margin-top: 88px; }
  .price-board { grid-template-columns: 1fr; }
  .cta-final { height: auto; }
  .cta-copy { position: static; transform: none; padding: 48px 32px 0; }
  .cta-gw { position: static; margin: 36px auto 44px; }
  .ent-panel { padding-block: 44px; grid-template-columns: 1fr; gap: 44px; }
  .ent-feats { border-left: 0; padding-left: 0; }
  .price-col + .price-col { border-left: 0; border-top: 1px solid var(--border); }
  .price-foot { flex-direction: column; align-items: flex-start; padding: 18px 24px; }
}
/* Phones: stack the footer, drop the hover previews (no hover on touch),
   and let the pill list breathe on its own line. */
@media (max-width: 700px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px 28px; }
  .foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; }
  .foot-bottom > p:last-child { text-align: left; }
  .foot-brand { grid-column: 1 / -1; }
  .hiw-tip { display: none !important; }
  .hiw-also-k { width: 100%; margin: 0 0 2px; }
  .hiw-also { gap: 8px; }
  .hiw-pill { margin: 0; padding: 7px 14px; }
  .hiw-pill .pf { padding: 0; background: none; }
  .hiw-pill { background: #f4f4f5; border-radius: 999px; }
}
@media (max-width: 420px) {
  .foot-grid { grid-template-columns: 1fr; gap: 22px; }
}

/* Diff bar (composer band) + inline diff artifact — the app's diff UI,
   src/content/ChatWidget.tsx: GitHub-style tinted rows, edge bar, blue prop. */
.w-diffbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; padding: 5px 5px 5px 11px; border: 1px solid var(--w-border); border-radius: 10px; background: var(--w-card); }
.w-diffbar-host { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 500; letter-spacing: -0.11px; color: var(--w-muted); }
.w-diffbar-r { display: flex; align-items: center; gap: 4px; flex: none; }
.w-diffbar-counts { display: flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 6px; font-size: 12px; font-weight: 600; line-height: 18.6px; font-variant-numeric: tabular-nums; }
.w-diffbar-counts .dp { color: #16a34a; }
.w-diffbar-counts .dm { color: #dc2626; }
.w-diffbar-pr { padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 500; line-height: 18.6px; color: var(--w-fg); }
.w-diff { margin-top: 6px; border: 1px solid var(--w-border); border-radius: 8px; overflow: hidden; }
.w-diff-h { padding: 6px 12px 3px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--w-faint); }
.w-diff-row + .w-diff-h { padding-top: 9px; }
.w-diff-row { display: flex; padding: 0 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 18px; font-variant-numeric: tabular-nums; }
.w-diff-row .g { width: 16px; flex: none; font-weight: 600; }
.w-diff-row .code { flex: 1; min-width: 0; color: var(--w-fg); white-space: pre-wrap; word-break: break-word; }
.w-diff-row .prop { color: #0062ff; }
.w-diff-row.add { background: rgba(22, 163, 74, 0.08); box-shadow: inset 2px 0 0 #16a34a; }
.w-diff-row.add .g { color: #16a34a; }
.w-diff-row.del { background: rgba(220, 38, 38, 0.07); box-shadow: inset 2px 0 0 #dc2626; }
.w-diff-row.del .g { color: #dc2626; }
/* Dark widgets (dkw) map the tints to the app's dark diff palette */
.dkw .w-diff-row.add { background: rgba(74, 222, 128, 0.1); box-shadow: inset 2px 0 0 #4ade80; }
.dkw .w-diff-row.add .g { color: #4ade80; }
.dkw .w-diff-row.del { background: rgba(248, 113, 113, 0.1); box-shadow: inset 2px 0 0 #f87171; }
.js-copy-email { cursor: pointer; }
.bw-ext-act { cursor: pointer; }

/* Live diffs preview — the app's diff flank, standalone (ChatWidget.tsx:1793) */
.tip-diff { background: #f9ed32; }
.td-sheet { display: flex; flex-direction: column; width: 367px; background: #f4f4f5; border-radius: 24px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 17px 18px -12px rgba(0, 0, 0, 0.08); }
.td-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px 8px; }
.td-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 500; line-height: 18.6px; letter-spacing: -0.11px; color: #71717a; }
.td-counts { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; line-height: 18.6px; font-variant-numeric: tabular-nums; }
.td-counts b { color: #16a34a; font-weight: 600; }
.td-counts i { color: #dc2626; font-style: normal; }
.td-x { display: flex; padding: 4px; border-radius: 6px; color: #a1a1aa; }
.td-x svg { width: 14px; height: 14px; }
.td-rows { display: block; padding-bottom: 16px; }
.td-rows .w-diff-h { display: block; padding: 6px 16px 3px; }
.td-rows .w-diff-row { padding: 0 16px; }

/* Mountain mode — the app's Aqua/10.6 skin (tailwind.css .cc-mountain) */
.tip-mtn { background: linear-gradient(180deg, #8fc0ef 0%, #4a86c8 100%); }
.tip-mtn .tipw { border-radius: 8px; }
.widget.mtw { font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Segoe UI', system-ui, sans-serif; background: #dee4e9; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 18px 26px -12px rgba(0, 0, 0, 0.3); --w-border: #bababa; }
.mtw .w-head { background: linear-gradient(180deg, #e9e9e9 0%, #d7d7d7 48%, #b5b6b8 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 0.5px 0 0 rgba(0, 0, 0, 0.85); }
.mtw .w-head .icon-btn { background: linear-gradient(180deg, #fcfbfc 12.5%, #b8b8b8 117.86%); box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.55), inset 0 -1px 0 0 rgba(255, 255, 255, 0.5); border-radius: 4px; }
.mtw .bubble { position: relative; overflow: hidden; background: linear-gradient(180deg, #63b0ff 0%, #acdff9 80.29%, #e0f3ff 100%); box-shadow: inset 0 0.5px 1px 0 #10336b, inset 0 -1px 0 0 rgba(11, 42, 92, 0.75), 0 2px 2px 0 rgba(3, 5, 114, 0.15), 0 1px 1px 0 rgba(26, 41, 84, 0.18); color: #09090b; }
.mtw .bubble::before { content: ''; position: absolute; top: 1.5px; left: 12px; right: 12px; height: 11px; border-radius: 64px; opacity: 0.8; filter: blur(0.25px); background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0)); pointer-events: none; }
.mtw .composer-box { background: #fff; border-color: #bababa; box-shadow: inset 0 2px 3px 0 rgba(0, 0, 0, 0.25); }
.mtw .w-btn.pick { background: linear-gradient(180deg, rgba(252, 251, 252, 0.25) 0%, rgba(184, 184, 184, 0.25) 100%); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05), inset 0 0 0 0.5px rgba(0, 0, 0, 0.28), inset 0 1px 0 0 rgba(255, 255, 255, 0.5); border-radius: 6px; }
.mtw .w-btn.send { background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.08) 48%, rgba(255, 255, 255, 0) 50%), linear-gradient(180deg, #0062ff 0%, #329cf9 52%, #0062ff 53%, #329cf9 100%); box-shadow: inset 0 0 0 1px #0062ff, inset 0 1px 0 0 rgba(255, 255, 255, 0.45), inset 0 -1px 2px 0 #0062ff, 0 1px 2px 0 rgba(100, 121, 155, 0.5); color: #fff; }
.mtw .w-switch { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.08) 52%, rgba(255, 255, 255, 0.6) 100%), linear-gradient(180deg, #6f6f6f 0%, #494949 52%, #3c3c3c 53%, #585858 100%); box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.85), inset 0 1px 0 0 rgba(255, 255, 255, 0.45); }

/* Availability badges — top-right, opposite the mark. The enterprise one is
   the same copy-email affordance as the pricing/enterprise CTAs. */
.itg-badge { display: inline-flex; align-items: center; margin-top: 14px; padding: 3px 10px; border: 0; border-radius: 999px; font-family: inherit; font-size: 11.5px; font-weight: 500; line-height: 18px; letter-spacing: -0.08px; white-space: nowrap; }
.itg-badge.bdg-free { background: #fff; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12); color: #52525b; }
.itg-badge.bdg-ent { background: #09090b; color: #fff; cursor: pointer; }
.itg-badge.bdg-ent:hover { opacity: 0.85; }

/* Diff flank in the use-case scenes — ChatWidget.tsx:1793, side "right":
   the sheet tucks 28px under the panel, rounds only its outer edge, and its
   tucked side carries the 48px padding. Same 0.8 scale as the widget. */
.ucf-gw .widget { position: relative; z-index: 1; }
.w-flank { position: absolute; top: 0; left: calc(100% - 22.4px); width: 367px; height: 640px; transform: scale(0.8); transform-origin: top left; display: flex; flex-direction: column; background: #f4f4f5; border-radius: 0 24px 24px 0; overflow: hidden; box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 17px 18px -12px rgba(0, 0, 0, 0.08); }
.w-flank .td-head { padding: 14px 16px 8px 48px; }
.w-flank .td-rows { flex: 1; min-height: 0; overflow: hidden; }
.w-flank .w-diff-h { display: block; padding: 6px 16px 3px 48px; }
.w-flank .w-diff-row { padding: 0 16px 0 48px; }
.w-diff-row.ctx .code { font-weight: 500; color: #71717a; }
.w-diff-row.gap { margin-top: 6px; }
/* Dock scene: the flank rides the widget's own 0.85-scaled wrapper, sits on
   the LEFT (the widget is pinned right), and wears the app's dark mappings. */
.dock-widget .widget { position: relative; z-index: 1; }
.dock-widget .w-flank { left: auto; right: calc(100% - 28px); transform: none; border-radius: 24px 0 0 24px; background: #2c2c31; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.13), 0 17px 18px -12px rgba(0, 0, 0, 0.3); }
.dock-widget .w-flank .td-head { padding: 14px 48px 8px 16px; }
.dock-widget .w-flank .w-diff-h { padding: 6px 48px 3px 16px; }
.dock-widget .w-flank .w-diff-row { padding: 0 48px 0 16px; }
.dock-widget .w-flank .td-title { color: #a1a1aa; }
.dock-widget .w-flank .code { color: #f4f4f5; }
.dock-widget .w-flank .w-diff-row.ctx .code { color: #a1a1aa; }
.dock-widget .w-flank .prop { color: #4d90ff; }
.dock-widget .w-flank .w-diff-row.add { background: rgba(74, 222, 128, 0.1); box-shadow: inset 2px 0 0 #4ade80; }
.dock-widget .w-flank .w-diff-row.add .g { color: #4ade80; }
/* Open state: the diff-bar counts wear the gray pill (aria-pressed look) */
.w-diffbar-counts.on { background: #f4f4f5; }
.dkw .w-diffbar-counts.on { background: #2c2c31; }

/* AI summary — footer affordance: open a prefilled "summarize this site"
   prompt in the assistant of your choice. */
.foot-ai { display: flex; align-items: center; gap: 14px; grid-column: 2; white-space: nowrap; width: 0; min-width: 100%; }
.foot-ai > * { flex: none; }
.foot-bottom > p:last-child { grid-column: 3 / -1; justify-self: end; text-align: right; }
.foot-ai span { color: var(--muted-fg); }
.foot-ai a { display: flex; color: #71717a; }
.foot-ai a:hover { color: #09090b; }
.foot-ai svg { width: 16px; height: 16px; display: block; }

/* ── /shortcuts — searchable mosaic of the app's real shortcuts ────────── */
.st-head { max-width: 984px; margin: 96px auto 0; padding: 0 24px; }
.st-h1 { max-width: 820px; margin: 18px 0 0; font-size: clamp(34px, 5.4vw, 58px); line-height: 1.06; letter-spacing: -0.0161em; font-weight: 600; color: var(--fg); }
.st-search { position: relative; display: flex; align-items: center; max-width: 420px; margin-top: 26px; }
.st-search svg { position: absolute; left: 14px; width: 16px; height: 16px; color: #a1a1aa; pointer-events: none; }
.st-search input { width: 100%; height: 44px; padding: 0 44px 0 40px; border: 1px solid #e4e4e7; border-radius: 12px; background: #fff; font: 400 14.5px Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.1px; color: #09090b; outline: none; -webkit-appearance: none; appearance: none; }
.st-search input:focus { border-color: #a1a1aa; }
.st-search input::placeholder { color: #a1a1aa; }
.st-count { position: absolute; right: 14px; font-size: 12px; font-variant-numeric: tabular-nums; color: #a1a1aa; }
.st-mosaic { max-width: 984px; margin: 40px auto 0; padding: 0 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.st-card { position: relative; overflow: hidden; padding: 32px 28px; border-radius: 19.2px; background: #fafafa; }
.st-card[hidden] { display: none; }
.st-cat { display: block; margin-bottom: 18px; font-size: 11.5px; line-height: 18.4px; font-weight: 500; color: #000; }
.st-keys { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; }
.st-keys { gap: 4px; margin-bottom: 20px; }
:is(.st-card, .st-si, .st-sub, .st-chain, .st-cta p) kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 12px; background: #fff; border: 1px solid #e4e4e7; border-radius: 9px; box-shadow: 0 1px 0.75px rgba(0, 0, 0, 0.06), 0 2px 3px rgba(0, 0, 0, 0.06), inset 0 -2px 0 rgba(0, 0, 0, 0.04); font-family: inherit; font-size: 14.5px; font-weight: 500; letter-spacing: -0.1px; color: #09090b; white-space: nowrap; }
.st-card b { display: block; font-size: 16.5px; line-height: 25px; font-weight: 500; color: #000; }
.st-card p { margin-top: 8px; max-width: 480px; font-size: 14px; line-height: 22px; letter-spacing: -0.1px; color: #52525b; }
.st-mtn { background: #ebf4fd; }
.st-mtn kbd { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.08) 48%, rgba(255, 255, 255, 0) 50%), linear-gradient(180deg, #0062ff 0%, #329cf9 52%, #0062ff 53%, #329cf9 100%); box-shadow: inset 0 0 0 1px #0062ff, inset 0 1px 0 0 rgba(255, 255, 255, 0.45), inset 0 -1px 2px 0 #0062ff, 0 1px 2px 0 rgba(16, 51, 107, 0.5); color: #fff; }
.st-mtn .st-cat { color: rgba(9, 9, 11, 0.75); }
.st-mtn b { color: #09090b; }
.st-empty { column-span: all; padding: 40px 0; text-align: center; font-size: 14.5px; color: #71717a; }
@media (max-width: 900px) { .st-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .st-mosaic { grid-template-columns: minmax(0, 1fr); } }

/* Real-UI stand-ins on the shortcut cards (not everything is a key) */
.st-keys { min-height: 36px; align-items: center; }
.st-tgl { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 500; letter-spacing: -0.4px; color: #09090b; }
.st-sw { display: inline-flex; align-items: center; width: 31px; height: 18px; padding: 2px; border-radius: 999px; background: #18181b; }
.st-sw i { width: 14px; height: 14px; border-radius: 50%; background: #fafafa; transform: translateX(13px); box-shadow: 0 0.5px 1.5px rgba(0, 0, 0, 0.05); }
.st-amber { width: 13px; height: 13px; border-radius: 50%; }
.st-amber.on { background: #f59e0b; }
.st-amber.off { background: #d4d4d8; margin-left: 8px; }
.st-counts { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 9px; background: #fff; border: 1px solid #e4e4e7; box-shadow: 0 1px 0.75px rgba(0, 0, 0, 0.06), 0 2px 3px rgba(0, 0, 0, 0.06); font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.st-counts b { color: #16a34a; font-weight: 600; }
.st-counts i { color: #dc2626; font-style: normal; }
.st-bub { padding: 7px 13px; border-radius: 999px; background: #fff; border: 1px solid #e4e4e7; box-shadow: 0 1px 0.75px rgba(0, 0, 0, 0.06), 0 2px 3px rgba(0, 0, 0, 0.06); font-size: 13px; letter-spacing: -0.15px; color: #09090b; white-space: nowrap; }
.st-field { position: relative; display: inline-flex; align-items: center; width: 86px; height: 32px; padding: 0 10px; border-radius: 7px; background: #f3f3f3; font-size: 13px; font-variant-numeric: tabular-nums; color: #09090b; }
.st-cur { position: absolute; right: 8px; bottom: -9px; width: 20px; height: 20px; }
.st-scrub .sv-cur { left: 6px; right: auto; transition: transform 0.55s cubic-bezier(0.37, 0, 0.63, 1); }
.st-scrub .sv-num { font-variant-numeric: tabular-nums; }
.st-minihead { position: relative; display: inline-flex; align-items: center; gap: 5px; width: 118px; height: 30px; padding: 0 10px; border-radius: 9px; background: #fff; box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.06); }
.st-minihead u { width: 14px; height: 3px; border-radius: 2px; background: #d4d4d8; text-decoration: none; }
.st-minihead .st-cur { right: 12px; bottom: -9px; }
.st-theme { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 12px; background: #fff; color: #09090b; }
.st-theme svg { width: 18px; height: 18px; }

/* Mountain card: the description speaks in the skin's own Aqua user bubble */
.st-mtn .st-aqua { position: relative; overflow: hidden; width: fit-content; max-width: 100%; margin-top: 8px; padding: 10px 14px; border-radius: 20px; white-space: normal; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Segoe UI', system-ui, sans-serif; background: linear-gradient(180deg, #63b0ff 0%, #acdff9 80.29%, #e0f3ff 100%); box-shadow: inset 0 0.5px 1px 0 #10336b, inset 0 -1px 0 0 rgba(11, 42, 92, 0.75), 0 2px 2px 0 rgba(3, 5, 114, 0.15), 0 1px 1px 0 rgba(26, 41, 84, 0.18); color: #09090b; }
.st-mtn .st-aqua + .st-aqua { margin-top: 7px; }
.st-mtn .st-aqua::before { content: ''; position: absolute; top: 1.5px; left: 12px; right: 12px; height: 10px; border-radius: 64px; opacity: 0.8; filter: blur(0.25px); background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0)); pointer-events: none; }

/* Shortcuts v2: guide sections */
.st-sub { margin: 24px 0 0; font-size: 15px; line-height: 30px; letter-spacing: -0.1px; color: #52525b; white-space: nowrap; }
:is(.st-sub, .st-chain, .st-cta p) kbd { min-width: 21px; height: 21px; padding: 0 6px; margin: 0 1px; border-radius: 6px; font-size: 12px; vertical-align: middle; }

.st-start { max-width: 984px; margin: 128px auto 0; padding: 0 24px; }
.st-all { max-width: 984px; margin: 128px auto 0; padding: 0 24px; }
:is(.st-start, .st-all, .st-moves) .feat-intro { margin-bottom: 0; }
.st-start-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.st-si { padding: 32px 28px; border-radius: 20px; background: #fafafa; }
.st-si b { display: block; margin-top: 16px; font-size: 17px; line-height: 26px; font-weight: 500; color: #000; }
.st-si p { margin-top: 6px; max-width: 330px; font-size: 14px; line-height: 22px; letter-spacing: -0.1px; color: #52525b; }
.st-si .st-keys { min-height: 36px; margin-bottom: 0; }

.st-moves { max-width: 984px; margin: 128px auto 0; padding: 0 24px; }
.st-moves-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 20px; margin-top: 40px; }
.st-move { padding: 32px 28px; border-radius: 20px; background: #fafafa; }
.st-move b { display: block; font-size: 16.5px; line-height: 25px; font-weight: 500; color: #000; }
.st-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; line-height: 20px; letter-spacing: -0.1px; color: #52525b; }
.st-chain em { font-style: normal; display: inline-flex; align-items: center; gap: 4px; }
.st-chain u { text-decoration: none; color: #a1a1aa; }

.st-cta { max-width: 984px; margin: 160px auto 160px; padding: 0 24px; text-align: center; }
.st-cta h2 { font-size: clamp(30px, 4.6vw, 42px); line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; color: #09090b; }
.st-cta p { margin-top: 12px; font-size: 16px; line-height: 26px; color: #52525b; }
.st-cta-row { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 26px; }
.st-cta-sec { font-size: 14.5px; font-weight: 500; letter-spacing: -0.1px; color: #09090b; text-decoration: none; box-shadow: 0 1px 0 rgba(9, 9, 11, 0.25); padding-bottom: 2px; }
.st-cta-sec:hover { box-shadow: 0 1px 0 #09090b; }

.st-pr { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 9px; background: #fff; border: 1px solid #e4e4e7; box-shadow: 0 1px 0.75px rgba(0, 0, 0, 0.06), 0 2px 3px rgba(0, 0, 0, 0.06), inset 0 -2px 0 rgba(0, 0, 0, 0.04); font-size: 14.5px; font-weight: 500; letter-spacing: -0.1px; color: #09090b; }
.st-mosaic { margin-bottom: 0; }

@media (max-width: 900px) {
  .st-sub { white-space: normal; }
  .st-moves-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .st-start-grid, .st-moves-grid { grid-template-columns: minmax(0, 1fr); }
  .st-cta-row { flex-direction: column; gap: 16px; }
}

/* Wide cards + real widget bits */
.st-w2 { grid-column: span 2; }
.st-nokeys { margin-top: 2px; }
.st-ui { display: block; position: relative; margin: 28px -28px -32px; }
.st-ui .widget.stw { display: flex; width: 396px; margin: 0 auto; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 18px 40px -18px rgba(0, 0, 0, 0.16); }
.st-ui .w-body-lite { flex: 1; min-height: 0; }
.st-ui-pick { height: 344px; }
.st-ui-pick .widget.stw { position: absolute; left: 50%; transform: translateX(-50%); top: 0; height: 396px; }
@media (max-width: 900px) { .st-w2 { grid-column: span 2; } }
@media (max-width: 560px) { .st-w2 { grid-column: auto; } }

/* Move-or-dock card: the home hero's Chrome frame (single OG tab), scaled to
   the card width and cropped by it, looping the real drag-to-dock. */
.st-ui-chrome { margin: 24px 0 0; height: 320px; overflow: hidden; border-radius: 12px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04), 0 14px 34px -14px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.06); }
.st-ui-chrome .stw-fit { --s: 0.571; position: absolute; top: 0; left: 0; width: 1080px; }
.st-ui-chrome .demo-frame { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); }
.st-ui-chrome .scene-og.stw-loop, .st-ui-chrome .scene-og.srp { display: block; }
.stw-loop .og-site { transition: none !important; }
/* Loop-scoped motion: the page-squeeze reflow + the widget's slide both ease.
   The magnet transform keeps the springy snap from the home. */
/* Grab cursor riding the widget header (pre-scale coords; scales with it) */
.stw-grab { position: absolute; top: 20px; left: 118px; width: 22px; height: 22px; z-index: 30; pointer-events: none; opacity: 0; transition: opacity 0.2s; }
.stw-grab svg { width: 100%; height: 100%; display: block; }
.stw-loop.stw-hold .stw-grab { opacity: 1; }

/* The card's fake use case, applied to the page so it matches the reply */
.stw-loop .ogs-item .cover { border-radius: 16px; box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.28); }


/* Responsive-frames tile: the page smoothly resizes to a centered phone
   frame on a dark backdrop, the device toolbar appears (responsive.ts). */
.srp .og-site { position: relative; z-index: 10; transition: none; }
.srp.rsp .og-site { width: 390px; margin: 56px auto 0; height: calc(100% - 74px); border-radius: 12px; box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.5); }
.srp.rsp .ogs-body { padding: 0 16px 16px; }
.srp.rsp .ogs-search, .srp.rsp .ogs-nav { display: none; }
.srp.rsp .ogs-head { padding: 14px 0; }
.srp.rsp .ogs-filters { display: none; }
.srp.rsp .ogs-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
.srp.rsp .ogs-item .cover { height: 150px; }
.srp-backdrop { position: absolute; inset: 0; z-index: 4; background: #0b0b0e; opacity: 0; pointer-events: none; }
.srp.rsp .srp-backdrop { opacity: 0.72; }
.srp-bar { display: none; }
.srp.rsp .srp-bar { display: flex; align-items: center; gap: 2px; z-index: 16; position: absolute; top: 14px; left: 50%; transform: translateX(-50%); padding: 4px; background: rgba(20, 20, 22, 0.94); border-radius: 999px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); }

.st-ico { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9px; background: #fff; border: 1px solid #e4e4e7; box-shadow: 0 1px 0.75px rgba(0, 0, 0, 0.06), 0 2px 3px rgba(0, 0, 0, 0.06); color: #09090b; }
.st-ico svg { width: 18px; height: 18px; }

/* Point-at-an-element tile: the Space Jam page with the picker on the logo */
.st-ui-chrome .scene-sj.sjp { display: block; }
.sjp { position: absolute; inset: 0; }
.sjp .pick-sel, .sjp .pick-label, .sjp .pick-hint { opacity: 1; }
.sjp .sj-cur { position: absolute; left: 556px; top: 372px; width: 34px; height: 34px; z-index: 20; pointer-events: none; }
.sjp .sj-cur svg { width: 100%; height: 100%; display: block; }

/* Point-at-element: the Voila widget floating over Space Jam, showing the ask */
.sjp .sjw .w-thread { display: flex; flex-direction: column; gap: 14px; }
/* the result, applied: the selected logo is now 40% bigger */
.sjp .logo-grow { transform: scale(1.4); }

/* Dark tiles: the window content fills to the frame edge and rounds its bottom
   to the frame's own 12px, so the dark backdrop / starfield hugs cleanly. */
.st-ui-resp .bw-window, .st-ui-sj .bw-window { padding: 0; clip-path: none; border-radius: 0 0 12px 12px; overflow: hidden; }
.st-ui-resp .bw-window::after, .st-ui-sj .bw-window::after { display: none; }
.st-ui-resp .scene, .st-ui-sj .scene { padding: 0; }

/* Capture + diff tile: two framed shots (before / after) with a flip between */
.st-shots { display: flex; align-items: stretch; gap: 16px; margin-top: 22px; }
.st-shot { position: relative; flex: 1; min-width: 0; padding: 10px; border-radius: 14px; background: #fff; box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.06), 0 10px 26px -12px rgba(0, 0, 0, 0.22); }
.st-shot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.st-shot-grid img { display: block; width: 100%; height: 62px; object-fit: cover; border-radius: 4px; }
.st-shot.after .st-shot-grid img { border-radius: 10px; box-shadow: 0 5px 12px -4px rgba(0, 0, 0, 0.3); }
.st-shot em { position: absolute; top: 16px; left: 16px; font-style: normal; padding: 3px 9px; border-radius: 999px; background: rgba(9, 9, 11, 0.82); color: #fff; font-size: 11px; font-weight: 500; letter-spacing: -0.1px; }
.st-flip { align-self: center; flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; background: #fff; box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.06), 0 4px 12px -4px rgba(0, 0, 0, 0.2); color: #09090b; }
.st-flip svg { width: 17px; height: 17px; }
@media (max-width: 560px) { .st-shots { flex-direction: column; } .st-flip { transform: rotate(90deg); } }