/* ==========================================================================
   FMS Studio · New Design System · Preview v1
   Role-based tokens · one ladder · one CTA spec · two shells
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* --- Surface ladder (4 rungs) --- */
  --surface-base:          #07080A;   /* the void */
  --surface-raised:        #0E1013;   /* panels, cards */
  --surface-elevated:      #16191E;   /* nested cards, popovers */
  --surface-interactive:   #1C1F25;   /* hover, selected */

  /* --- Foreground ladder (5 rungs) --- */
  --fg-primary:   #F7F8FA;
  --fg-secondary: #C8CDD6;
  --fg-muted:     #8A8F9A;
  --fg-dim:       #5B606A;
  --fg-quiet:     #3E434C;

  /* --- Border / line --- */
  --line-hairline: rgba(255,255,255,0.06);
  --line-default:  rgba(255,255,255,0.09);
  --line-strong:   rgba(255,255,255,0.16);

  /* --- Accent / Warm (brand, action) --- */
  --accent-warm:       #C5A059;
  --accent-warm-hi:    #D4AF37;
  --accent-warm-dim:   rgba(197,160,89,0.10);
  --accent-warm-bd:    rgba(197,160,89,0.25);
  --accent-warm-glow:  rgba(197,160,89,0.32);

  /* --- Accent / AI (machine-generated) --- */
  --accent-ai:       #0BB0CC;
  --accent-ai-hi:    #22C6E0;
  --accent-ai-dim:   rgba(11,176,204,0.12);
  --accent-ai-bd:    rgba(11,176,204,0.28);
  --accent-ai-glow:  rgba(11,176,204,0.35);

  /* --- Signals --- */
  --signal-positive:      #10B981;
  --signal-positive-dim:  rgba(16,185,129,0.12);
  --signal-positive-bd:   rgba(16,185,129,0.25);
  --signal-caution:       #F59E0B;
  --signal-caution-dim:   rgba(245,158,11,0.12);
  --signal-caution-bd:    rgba(245,158,11,0.25);
  --signal-risk:          #F43F5E;
  --signal-risk-dim:      rgba(244,63,94,0.12);
  --signal-risk-bd:       rgba(244,63,94,0.28);

  /* --- Radius --- */
  --radius-xs:   6px;
  --radius-sm:  10px;   /* inputs, compact */
  --radius-md:  14px;   /* buttons, dropdowns */
  --radius-lg:  20px;   /* cards, panels, modals */
  --radius-xl:  28px;   /* feature / hero */
  --radius-pill: 999px;

  /* --- Spacing (4px base) --- */
  --sp-2xs:   4px;
  --sp-xs:    8px;
  --sp-sm:   12px;
  --sp-md:   16px;
  --sp-lg:   24px;
  --sp-xl:   32px;
  --sp-2xl:  48px;
  --sp-3xl:  80px;

  /* --- Shadows (cast from void, not neutral) --- */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.02) inset;
  --shadow-md: 0 12px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.03) inset;
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04) inset;
  --shadow-warm: 0 12px 28px rgba(197,160,89,0.24);
  --shadow-ai:   0 12px 28px rgba(11,176,204,0.22);

  /* --- Motion --- */
  --ease-out:   cubic-bezier(.22, 1, .36, 1);
  --ease-in:    cubic-bezier(.4, 0, 1, 1);
  --dur-micro:  120ms;
  --dur-short:  180ms;
  --dur-medium: 280ms;
  --dur-long:   480ms;
  --pulse-ai:   1400ms; /* reserved cadence for AI */

  /* --- Z-index layers --- */
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-modal:   1000;
  --z-toast:  10000;

  /* --- Component scale --- */
  --h-input:    48px;
  --h-input-mobile: 52px;
  --h-cta:      48px;
  --h-cta-mobile:   52px;
  --sticky-footer-h: 72px;
}

/* --------------------------------------------------------------------------
   2. RESET + BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-feature-settings: "cv11", "ss01", "ss03", "tnum";
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-primary);
  background: var(--surface-base);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--accent-warm-dim); color: var(--fg-primary); }

.mono { font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   3. AMBIENT BACKGROUND — scene system (switchable via body[data-bg])
   -------------------------------------------------------------------------- */
.ambient {
  position: fixed; inset: 0;
  z-index: var(--z-base);
  pointer-events: none;
  background: var(--surface-base);
  transition: background 700ms var(--ease-out);
}
.ambient::after {
  content: "";
  position: absolute; inset: 0;
  transition: opacity 700ms var(--ease-out);
}

/* --- Scene: AURA (default) — warm + AI glows in opposite corners, visible */
body[data-bg="aura"] .ambient,
body:not([data-bg]) .ambient {
  background:
    radial-gradient(1100px 720px at 92% -8%, rgba(197,160,89,0.26), transparent 55%),
    radial-gradient(900px 680px at -8% 108%, rgba(11,176,204,0.22), transparent 58%),
    var(--surface-base);
}
body[data-bg="aura"] .ambient::after,
body:not([data-bg]) .ambient::after {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 3px),
    linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.45));
  mix-blend-mode: overlay;
  opacity: 0.75;
}

/* --- Scene: MESH — scattered warm/cyan blobs (modern AI SaaS look) */
body[data-bg="mesh"] .ambient {
  background:
    radial-gradient(520px 420px at 18% 22%, rgba(197,160,89,0.30), transparent 60%),
    radial-gradient(480px 400px at 72% 18%, rgba(11,176,204,0.28), transparent 60%),
    radial-gradient(540px 440px at 88% 72%, rgba(197,160,89,0.24), transparent 60%),
    radial-gradient(460px 400px at 26% 82%, rgba(11,176,204,0.26), transparent 60%),
    radial-gradient(420px 360px at 55% 48%, rgba(197,160,89,0.12), transparent 65%),
    var(--surface-base);
}
body[data-bg="mesh"] .ambient::after {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.008) 0px, rgba(255,255,255,0.008) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: overlay;
  opacity: 0.55;
}

/* --- Scene: NEBULA — cosmic cyan/gold clouds + scattered faint stars */
body[data-bg="nebula"] .ambient {
  background:
    /* Scattered faint stars */
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,0.55), transparent 1.5px),
    radial-gradient(1.5px 1.5px at 32% 42%, rgba(255,255,255,0.6), transparent 2px),
    radial-gradient(1px 1px at 58% 28%, rgba(255,255,255,0.45), transparent 1.5px),
    radial-gradient(1px 1px at 78% 72%, rgba(255,255,255,0.4), transparent 1.5px),
    radial-gradient(2px 2px at 22% 82%, rgba(255,255,255,0.65), transparent 2.5px),
    radial-gradient(1px 1px at 62% 88%, rgba(255,255,255,0.45), transparent 1.5px),
    radial-gradient(1.5px 1.5px at 45% 15%, rgba(255,255,255,0.55), transparent 2px),
    radial-gradient(1px 1px at 88% 32%, rgba(255,255,255,0.35), transparent 1.5px),
    radial-gradient(1.5px 1.5px at 70% 48%, rgba(255,255,255,0.45), transparent 2px),
    radial-gradient(1px 1px at 15% 65%, rgba(255,255,255,0.35), transparent 1.5px),
    radial-gradient(1.5px 1.5px at 92% 80%, rgba(255,255,255,0.5), transparent 2px),
    radial-gradient(1px 1px at 8% 35%, rgba(255,255,255,0.4), transparent 1.5px),
    radial-gradient(1px 1px at 40% 62%, rgba(255,255,255,0.3), transparent 1.5px),
    radial-gradient(1.5px 1.5px at 82% 18%, rgba(255,255,255,0.5), transparent 2px),
    /* Large nebula clouds */
    radial-gradient(1100px 800px at 28% 38%, rgba(11,176,204,0.28), transparent 60%),
    radial-gradient(1000px 780px at 78% 68%, rgba(197,160,89,0.26), transparent 60%),
    var(--surface-base);
}
body[data-bg="nebula"] .ambient::after {
  background: radial-gradient(80% 60% at 50% 100%, transparent 0%, rgba(0,0,0,0.35) 90%);
  mix-blend-mode: multiply;
  opacity: 0.9;
}

/* --- Scene: AURORA — two-color (gold + cyan), matches main website palette.
   Gold is anchored (small drift, always present). Cyan drifts wider for motion. */
body[data-bg="aurora"] .ambient {
  background:
    radial-gradient(1100px 820px at 16% 20%, rgba(197,160,89,0.38), transparent 58%),
    radial-gradient(1000px 760px at 84% 80%, rgba(11,176,204,0.34), transparent 56%),
    var(--surface-base);
  /* Gold at 130% → stays visible. Cyan at 180% → more visible drift. */
  background-size: 130% 130%, 180% 180%, 100% 100%;
  animation: aurora-drift 24s ease-in-out infinite alternate;
}
body[data-bg="aurora"] .ambient::after {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.006) 0px, rgba(255,255,255,0.006) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: overlay;
  opacity: 0.5;
}
@keyframes aurora-drift {
  /*      gold (narrow)    cyan (wide)      grain */
  0%   { background-position: 0% 20%,   100% 100%, 0 0; }
  50%  { background-position: 20% 40%,  30% 60%,   0 0; }
  100% { background-position: 10% 15%,  0% 75%,    0 0; }
}

/* --- Scene: HORIZON — warm sunrise band along the bottom, dark sky above */
body[data-bg="horizon"] .ambient {
  background:
    /* A faint cyan line marking the horizon itself */
    radial-gradient(2200px 140px at 50% 78%, rgba(11,176,204,0.18), transparent 70%),
    /* Main warm sunrise bloom rising from the bottom */
    radial-gradient(1800px 720px at 50% 110%, rgba(197,160,89,0.38), transparent 58%),
    /* Secondary amber haze just above the horizon line */
    radial-gradient(1200px 360px at 50% 90%, rgba(197,160,89,0.22), transparent 65%),
    /* Star-ish violet shimmer at the very top for atmosphere */
    radial-gradient(1400px 400px at 50% -20%, rgba(147,51,234,0.10), transparent 65%),
    var(--surface-base);
}
body[data-bg="horizon"] .ambient::after {
  background:
    /* Darken upper sky for contrast */
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 45%),
    /* Faint horizontal striations near the horizon for atmosphere */
    repeating-linear-gradient(0deg,
      transparent 0px, transparent 2px,
      rgba(255,255,255,0.008) 2px, rgba(255,255,255,0.008) 3px);
  mix-blend-mode: overlay;
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  body[data-bg="aurora"] .ambient { animation: none; }
}

/* --- Mobile hamburger menu button (top-right on mobile) */
.menu-btn {
  display: none;
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  border: 1px solid var(--line-default);
  color: var(--fg-secondary);
  align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: var(--dur-micro) var(--ease-out);
}
.menu-btn:hover { color: var(--fg-primary); border-color: var(--line-strong); }
.menu-btn svg { width: 18px; height: 18px; stroke-width: 2; }
@media (max-width: 767px) {
  .menu-btn { display: inline-flex; }
  /* Push the hamburger to the absolute right edge of any topbar */
  .app-topbar > .menu-btn,
  .topbar-row > .menu-btn,
  .public-topbar-row .menu-btn,
  .public-nav .menu-btn {
    margin-left: auto;
  }
}

/* Floating variant (used on chromeless login) */
.menu-btn-floating {
  position: fixed;
  top: env(safe-area-inset-top, 14px); right: 14px;
  z-index: var(--z-dropdown);
  background: rgba(14,16,19,0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 768px) { .menu-btn-floating { display: none !important; } }

/* Mobile menu drawer */
.menu-drawer {
  position: fixed; inset: 0;
  z-index: var(--z-modal);
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-medium) var(--ease-out);
  display: flex;
  justify-content: flex-end;
}
.menu-drawer.is-open { opacity: 1; pointer-events: auto; }
.menu-sheet {
  width: min(320px, 86vw);
  height: 100%;
  background: var(--surface-raised);
  border-left: 1px solid var(--line-strong);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--dur-medium) var(--ease-out);
  box-shadow: -24px 0 80px rgba(0,0,0,0.55);
}
.menu-drawer.is-open .menu-sheet { transform: translateX(0); }
.menu-head {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-hairline);
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
}
.menu-head .brand-logo { height: 30px; width: auto; }
.menu-close {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  background: var(--surface-elevated);
  border: 1px solid var(--line-default);
  color: var(--fg-secondary);
  display: grid; place-items: center;
  cursor: pointer;
  transition: var(--dur-micro) var(--ease-out);
}
.menu-close:hover { color: var(--signal-risk); border-color: var(--signal-risk-bd); }
.menu-close svg { width: 14px; height: 14px; stroke-width: 2.4; }
.menu-nav {
  display: flex; flex-direction: column;
  padding: 14px 12px;
  gap: 2px;
  flex: 1;
  overflow-y: auto;
}
.menu-nav-eyebrow {
  display: block;
  padding: 12px 14px 6px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-dim);
}
.menu-nav a, .menu-nav button {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px;
  border-radius: var(--radius-sm);
  color: var(--fg-secondary);
  font-size: 14.5px; font-weight: 600;
  text-decoration: none;
  transition: var(--dur-micro) var(--ease-out);
  cursor: pointer; border: 0; background: transparent;
  width: 100%;
  text-align: left;
}
.menu-nav a:hover, .menu-nav button:hover { background: var(--surface-interactive); color: var(--fg-primary); }
.menu-nav a.is-active { background: var(--accent-warm-dim); color: var(--accent-warm); }
.menu-nav a svg, .menu-nav button svg { width: 17px; height: 17px; stroke-width: 1.8; flex-shrink: 0; }
.menu-foot {
  padding: 14px 18px 18px;
  border-top: 1px solid var(--line-hairline);
  font-size: 11px; color: var(--fg-muted);
  display: flex; align-items: center; justify-content: space-between;
}
.menu-foot a { color: var(--accent-warm); font-weight: 700; text-decoration: none; }
body.menu-open { overflow: hidden; }

/* --- Demo-home pill — quick return to the preview hub (sits above bg picker) */
.demo-home {
  position: fixed;
  bottom: 78px;
  left: 22px;
  z-index: var(--z-dropdown);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px 7px 11px;
  background: rgba(14,16,19,0.88);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  text-decoration: none;
  transition: var(--dur-micro) var(--ease-out);
  box-shadow: var(--shadow-sm);
}
.demo-home:hover {
  color: var(--accent-warm);
  border-color: var(--accent-warm-bd);
  background: rgba(20,22,26,0.95);
  transform: translateY(-1px);
}
.demo-home svg { width: 12px; height: 12px; stroke-width: 2.4; flex-shrink: 0; }

@media (max-width: 640px) {
  .demo-home {
    bottom: calc(var(--sticky-footer-h, 64px) + 60px);
    left: 14px;
    font-size: 10.5px;
    padding: 6px 11px 6px 9px;
  }
}

/* --- Bg picker (demo-only — hidden via [hidden] in production) */
.bg-picker {
  position: fixed;
  bottom: 22px; left: 22px;
  z-index: var(--z-dropdown);
  display: inline-flex; align-items: center;
  gap: 2px; padding: 4px;
  background: rgba(14,16,19,0.88);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  font-size: 11px;
}
.bg-picker-label {
  padding: 0 10px 0 8px;
  color: var(--fg-dim);
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  font-size: 10px;
  display: inline-flex; align-items: center; gap: 6px;
}
.bg-picker-label::before {
  content: ""; width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-ai);
  box-shadow: 0 0 8px var(--accent-ai);
}
.bg-picker button {
  padding: 6px 12px;
  background: transparent;
  color: var(--fg-muted);
  font-size: 11px; font-weight: 600;
  border-radius: var(--radius-pill);
  transition: var(--dur-micro) var(--ease-out);
  cursor: pointer;
}
.bg-picker button:hover { color: var(--fg-primary); background: var(--surface-interactive); }
.bg-picker button.is-active {
  background: var(--accent-warm-dim);
  color: var(--accent-warm);
  border: 1px solid var(--accent-warm-bd);
  padding: 5px 11px;
}
@media (max-width: 640px) {
  .bg-picker {
    bottom: calc(var(--sticky-footer-h) + 14px);
    left: 14px;
    font-size: 10.5px;
  }
  .bg-picker button { padding: 5px 9px; }
  .bg-picker-label { display: none; }
}

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY (role-based)
   -------------------------------------------------------------------------- */
.t-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fg-muted);
  display: inline-flex; align-items: center; gap: 8px;
}
.t-eyebrow.is-ai { color: var(--accent-ai); }
.t-eyebrow.is-warm { color: var(--accent-warm); }
.t-display { font-size: clamp(34px, 4.4vw, 56px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: var(--fg-primary); }
.t-headline { font-size: clamp(26px, 2.4vw, 36px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.12; color: var(--fg-primary); }
.t-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--fg-primary); }
.t-subtitle { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--fg-primary); }
.t-body-lg { font-size: 16px; font-weight: 500; line-height: 1.55; color: var(--fg-secondary); }
.t-body { font-size: 14px; font-weight: 500; line-height: 1.55; color: var(--fg-secondary); }
.t-caption { font-size: 12px; font-weight: 500; line-height: 1.45; color: var(--fg-muted); }
.t-footnote { font-size: 11px; font-weight: 500; line-height: 1.45; color: var(--fg-dim); }

/* --------------------------------------------------------------------------
   5. ELEMENTAL COMPONENTS
   -------------------------------------------------------------------------- */

/* --- Pulse dot (AI cadence) --- */
.pulse-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-ai);
  box-shadow: 0 0 0 0 var(--accent-ai-glow);
  animation: pulse-ai var(--pulse-ai) ease-in-out infinite;
  flex-shrink: 0;
}
.pulse-dot.is-warm { background: var(--accent-warm); box-shadow: 0 0 0 0 var(--accent-warm-glow); animation: pulse-warm var(--pulse-ai) ease-in-out infinite; }
.pulse-dot.is-positive { background: var(--signal-positive); animation: none; }
@keyframes pulse-ai {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-ai-glow); opacity: 1; }
  50% { box-shadow: 0 0 0 6px transparent; opacity: 0.45; }
}
@keyframes pulse-warm {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-warm-glow); opacity: 1; }
  50% { box-shadow: 0 0 0 6px transparent; opacity: 0.55; }
}

/* --- Eyebrow pill --- */
.eyebrow-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--accent-warm-dim);
  border: 1px solid var(--accent-warm-bd);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-warm);
}
.eyebrow-pill.is-ai {
  background: var(--accent-ai-dim);
  border-color: var(--accent-ai-bd);
  color: var(--accent-ai);
}

/* --- Chips --- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-elevated);
  border: 1px solid var(--line-default);
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--fg-muted);
  white-space: nowrap;
  transition: var(--dur-micro) var(--ease-out);
}
.chip.is-ai { background: var(--accent-ai-dim); border-color: var(--accent-ai-bd); color: var(--accent-ai); }
.chip.is-warm { background: var(--accent-warm-dim); border-color: var(--accent-warm-bd); color: var(--accent-warm); }
.chip.is-positive { background: var(--signal-positive-dim); border-color: var(--signal-positive-bd); color: var(--signal-positive); }
.chip.is-caution { background: var(--signal-caution-dim); border-color: var(--signal-caution-bd); color: var(--signal-caution); }
.chip.is-risk { background: var(--signal-risk-dim); border-color: var(--signal-risk-bd); color: var(--signal-risk); }

/* --- [auto] chip (pre-filled field indicator) --- */
.auto-chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 18px; padding: 0 6px;
  border-radius: 5px;
  background: var(--accent-ai-dim);
  color: var(--accent-ai);
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  cursor: help;
  user-select: none;
}
.auto-chip::before { content: "✦"; font-size: 9px; }

/* --- Buttons (priority hierarchy) --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--h-cta); padding: 0 22px;
  border-radius: var(--radius-md);
  font-size: 14px; font-weight: 700; letter-spacing: -0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur-short) var(--ease-out),
              background var(--dur-short) var(--ease-out),
              box-shadow var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out),
              opacity var(--dur-short) var(--ease-out);
  position: relative;
}
.btn:disabled { opacity: 0.42; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.btn svg { width: 14px; height: 14px; stroke-width: 2; }
.btn .arrow { transition: transform var(--dur-short) var(--ease-out); }
.btn:hover:not(:disabled) .arrow { transform: translateX(2px); }

.btn-primary {
  background: linear-gradient(180deg, var(--accent-warm-hi), var(--accent-warm));
  color: #0A0A0A;
  box-shadow: var(--shadow-warm), 0 0 0 1px rgba(255,255,255,0.08) inset;
}
.btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(197,160,89,0.32), 0 0 0 1px rgba(255,255,255,0.12) inset;
}
.btn-primary:active:not(:disabled) { transform: translateY(0); }

.btn-secondary {
  background: var(--surface-raised);
  color: var(--fg-primary);
  border-color: var(--line-strong);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--surface-interactive);
  border-color: var(--accent-warm-bd);
  color: var(--accent-warm);
}

.btn-tertiary {
  background: transparent;
  color: var(--fg-secondary);
  height: auto; padding: 8px 12px;
}
.btn-tertiary:hover:not(:disabled) { color: var(--fg-primary); background: var(--surface-interactive); }

.btn-ghost {
  background: transparent;
  color: var(--fg-secondary);
  border-color: var(--line-default);
}
.btn-ghost:hover:not(:disabled) { border-color: var(--line-strong); color: var(--fg-primary); }
.btn-ghost.is-danger:hover:not(:disabled) { color: var(--signal-risk); border-color: var(--signal-risk-bd); }

.btn-block { width: 100%; }

.btn-spinner {
  width: 14px; height: 14px;
  border: 2px solid rgba(0,0,0,0.25);
  border-top-color: rgba(0,0,0,0.75);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.btn-secondary .btn-spinner, .btn-ghost .btn-spinner { border-color: var(--line-default); border-top-color: var(--fg-primary); }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Cards / Surfaces --- */
.surface {
  background: var(--surface-raised);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-lg);
  position: relative;
}
.surface::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 22%);
  opacity: 0.9;
}
.surface.is-elevated { background: var(--surface-elevated); box-shadow: var(--shadow-md); }
.surface.is-feature { border-radius: var(--radius-xl); }

.card-body { position: relative; padding: var(--sp-lg); }
.card-body.is-airy { padding: var(--sp-xl); }

/* --- Divider --- */
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-default) 20%, var(--line-default) 80%, transparent);
  border: 0;
}

/* --- Labels --- */
.label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: -0.005em;
  color: var(--fg-secondary);
}
.label .req { color: var(--accent-warm); font-weight: 700; }
.label .opt { font-size: 11px; font-weight: 500; color: var(--fg-dim); font-style: italic; }
.help-text { font-size: 11.5px; line-height: 1.5; color: var(--fg-muted); }
.error-text { font-size: 11.5px; line-height: 1.4; color: var(--signal-risk); min-height: 14px; }

/* --- Inputs --- */
.input, .select, .textarea {
  width: 100%;
  height: var(--h-input);
  padding: 0 16px;
  background: var(--surface-base);
  border: 1px solid var(--line-default);
  border-radius: var(--radius-sm);
  color: var(--fg-primary);
  font-size: 14px; font-weight: 500;
  outline: none;
  transition: border-color var(--dur-short) var(--ease-out),
              box-shadow var(--dur-short) var(--ease-out),
              background var(--dur-short) var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: var(--fg-dim); font-weight: 400; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-strong); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--accent-warm);
  box-shadow: 0 0 0 3px var(--accent-warm-dim);
  background: var(--surface-raised);
}
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--signal-risk);
  box-shadow: 0 0 0 3px var(--signal-risk-dim);
}
.input:disabled, .select:disabled, .textarea:disabled { opacity: 0.55; cursor: not-allowed; }

.textarea {
  height: auto; min-height: 92px;
  padding: 14px 16px;
  resize: vertical; line-height: 1.55;
}

.select {
  appearance: none;
  cursor: pointer;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A8F9A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* Input with leading icon */
.input-wrap { position: relative; display: block; }
.input-wrap > .input-ico {
  position: absolute; left: 16px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--fg-muted);
  pointer-events: none;
}
.input-wrap > .input { padding-left: 44px; }

/* Field wrapper — label + input + help + error */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field .help-text, .field .error-text { margin-top: 2px; }

/* Grid helpers */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-sm); }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-sm); }
.col-full { grid-column: 1 / -1; }

/* Pill group (multi-select / toggle) */
.pill-group { display: flex; flex-wrap: wrap; gap: 6px; }
.pill-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 14px;
  border-radius: var(--radius-pill);
  background: var(--surface-base);
  border: 1px solid var(--line-default);
  color: var(--fg-muted);
  font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  transition: var(--dur-micro) var(--ease-out);
}
.pill-btn:hover { border-color: var(--line-strong); color: var(--fg-primary); background: var(--surface-interactive); }
.pill-btn.is-on {
  background: var(--accent-warm-dim);
  border-color: var(--accent-warm-bd);
  color: var(--accent-warm);
}

/* Checkbox */
.check-row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px;
  background: var(--surface-base);
  border: 1px solid var(--line-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-out);
}
.check-row:hover { border-color: var(--line-strong); }
.check-row input[type=checkbox] {
  margin-top: 2px; width: 16px; height: 16px;
  accent-color: var(--accent-warm);
  cursor: pointer; flex-shrink: 0;
}
.check-row span { font-size: 13px; color: var(--fg-secondary); line-height: 1.5; }
.check-row a { color: var(--accent-warm); text-decoration: underline; text-underline-offset: 2px; }

/* --------------------------------------------------------------------------
   6. AI AFFORDANCES
   -------------------------------------------------------------------------- */

/* Inline AI suggestion — below a field */
.ai-suggest {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  border-radius: var(--radius-sm);
  background: var(--accent-ai-dim);
  border: 1px solid var(--accent-ai-bd);
  color: var(--accent-ai);
  font-size: 11.5px; font-weight: 600;
  cursor: pointer;
  transition: var(--dur-micro) var(--ease-out);
  align-self: flex-start;
  margin-top: 2px;
}
.ai-suggest:hover { background: rgba(11,176,204,0.18); }
.ai-suggest svg { width: 11px; height: 11px; stroke-width: 2.2; }

/* Callout rail — for AI-generated panel content */
.callout-ai {
  padding: 12px 14px 12px 16px;
  background: var(--accent-ai-dim);
  border-left: 2px solid var(--accent-ai);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 12.5px; line-height: 1.55; color: var(--fg-secondary);
}
.callout-ai strong { color: var(--accent-ai); font-weight: 700; }

/* Autofill pulse — flash when AI auto-fills a field */
@keyframes autofill-pulse {
  0%   { box-shadow: 0 0 0 0 var(--accent-ai-glow); background: rgba(11,176,204,0.08); }
  60%  { box-shadow: 0 0 0 5px rgba(11,176,204,0.04); }
  100% { box-shadow: 0 0 0 0 transparent; background: var(--surface-base); }
}
.autofill-pulse { animation: autofill-pulse var(--dur-long) var(--ease-out); border-color: var(--accent-ai) !important; }

/* Focus ring (keyboard) */
:focus-visible {
  outline: 2px solid var(--accent-warm);
  outline-offset: 2px;
  border-radius: inherit;
}
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: none; }

/* --------------------------------------------------------------------------
   7. APP SHELL — topbar + progress + stepper (Onboarding)
   -------------------------------------------------------------------------- */
.shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex; flex-direction: column;
}

.topbar {
  position: sticky; top: 0;
  z-index: var(--z-raised);
  background: rgba(7,8,10,0.72);
  backdrop-filter: saturate(1.4) blur(16px);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  border-bottom: 1px solid var(--line-hairline);
}
.topbar-row {
  max-width: 1280px; margin: 0 auto;
  height: 72px;
  display: flex; align-items: center; gap: var(--sp-md);
  padding: 0 var(--sp-lg);
}
.brand {
  display: inline-flex; align-items: center; gap: 14px;
  color: var(--fg-primary);
  font-weight: 700; letter-spacing: -0.01em;
}
.brand-logo {
  height: 42px; width: auto;
  display: block; flex-shrink: 0;
  opacity: 0.98;
}
.brand-divider {
  width: 1px; height: 36px;
  background: linear-gradient(180deg, transparent, var(--line-default) 20%, var(--line-default) 80%, transparent);
  flex-shrink: 0;
}
.brand-stack {
  display: flex; flex-direction: column;
  gap: 5px;
  line-height: 1;
  min-width: 0;
}
.brand-slogan {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-warm);
  line-height: 1;
  white-space: nowrap;
}
.brand-tag {
  font-size: 11px; color: var(--fg-muted); font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
}
.topbar-spacer { flex: 1; }

.topbar-meta {
  display: flex; align-items: center; gap: 10px;
  font-size: 11.5px; color: var(--fg-muted);
}
.topbar-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--fg-quiet); }
.topbar-meta .pct { color: var(--accent-warm); font-weight: 700; font-family: 'JetBrains Mono', monospace; }

.topbar-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 600;
  color: var(--fg-muted);
  transition: var(--dur-micro) var(--ease-out);
}
.topbar-cta:hover { color: var(--fg-primary); background: var(--surface-interactive); }
.topbar-cta svg { width: 12px; height: 12px; }

/* Progress rail — hairline under topbar */
.progress-rail {
  height: 2px;
  background: var(--surface-elevated);
  overflow: hidden;
  position: relative;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-warm-hi), var(--accent-warm));
  transition: width var(--dur-long) var(--ease-out);
  box-shadow: 0 0 12px var(--accent-warm-glow);
  position: relative;
}
.progress-fill::after {
  content: "";
  position: absolute; right: -1px; top: -2px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-warm-hi);
  box-shadow: 0 0 10px var(--accent-warm-hi);
}

/* Stepper — horizontal track + idx-and-label row. Stretched across the full
   workspace width. No boxes. Sized up for real presence (not tiny). */
.stepper-wrap {
  max-width: 1280px; margin: 0 auto;
  padding: var(--sp-xl) var(--sp-lg) var(--sp-xs);
}
.stepper {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
}

/* Connected-rail scaffolding retired — keep hidden so it doesn't affect layout */
.stepper-rail, .step-node { display: none; }

.step {
  display: flex; flex-direction: column;
  gap: 16px;
  padding: 4px 0 8px;
  min-width: 0;
  cursor: pointer;
  user-select: none;
  background: transparent;
  border: 0;
  transition: opacity var(--dur-micro) var(--ease-out);
}
.step:focus-visible {
  outline: 2px solid var(--accent-warm);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

/* Progress track on top */
.step-track {
  display: block;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--line-hairline);
  position: relative; overflow: hidden;
  transition: background var(--dur-micro) var(--ease-out);
}
.step:hover .step-track { background: var(--line-default); }
.step-track-fill {
  position: absolute; inset: 0;
  background: var(--accent-warm);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform var(--dur-long) var(--ease-out);
  border-radius: inherit;
}
.step.is-done .step-track-fill { transform: scaleX(1); }
.step.is-current .step-track { background: var(--accent-warm-dim); }
.step.is-current .step-track-fill {
  transform: scaleX(1);
  background: linear-gradient(90deg, var(--accent-warm), var(--accent-warm-hi));
  box-shadow: 0 0 16px var(--accent-warm-glow);
}

/* idx + label — one horizontal row, label extends to full remaining width */
.step-meta {
  display: flex; align-items: center;
  gap: 12px;
  min-width: 0;
}
.step-idx-row {
  display: inline-flex; align-items: center; gap: 6px;
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--fg-dim);
  line-height: 1;
}
.step-idx-row .step-check {
  width: 14px; height: 14px;
  color: var(--accent-warm);
  stroke-width: 3;
}
.step.is-done .step-idx-row,
.step.is-current .step-idx-row { color: var(--accent-warm); }

.step-label {
  flex: 1; min-width: 0;
  font-size: 15px; font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg-muted);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--dur-micro) var(--ease-out);
}
.step:hover .step-label { color: var(--fg-primary); }
.step.is-done .step-label { color: var(--fg-secondary); }
.step.is-current .step-label { color: var(--fg-primary); font-weight: 700; }

/* --------------------------------------------------------------------------
   8. ONBOARDING — layout (12-col adjusted to 2-col shell)
   -------------------------------------------------------------------------- */
.workspace {
  max-width: 1280px; margin: 0 auto;
  padding: var(--sp-lg) var(--sp-lg) calc(var(--sp-3xl) + var(--sp-lg));
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: var(--sp-lg);
  align-items: flex-start;
}

.panel {
  background: var(--surface-raised);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-xl);
  padding: var(--sp-xl);
  min-width: 0;
  position: relative;
}
.panel::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 30%);
  opacity: 0.8;
}
.panel > * { position: relative; }

.panel-head { margin-bottom: var(--sp-lg); }
.panel-head .eyebrow-pill { margin-bottom: 14px; }
.panel-head h1 { margin-bottom: 6px; }
.panel-head p { max-width: 560px; }

.panel-autosave {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px;
  padding: 4px 10px;
  background: var(--signal-positive-dim);
  border: 1px solid var(--signal-positive-bd);
  border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600; color: var(--signal-positive);
}
.panel-autosave svg { width: 10px; height: 10px; stroke-width: 3; }

/* Section within a step */
.section { margin-top: var(--sp-lg); }
.section + .section { margin-top: var(--sp-xl); padding-top: var(--sp-lg); border-top: 1px solid var(--line-hairline); }
.section-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; letter-spacing: -0.005em;
  color: var(--fg-primary);
  margin-bottom: 14px;
}
.section-title .hint { font-size: 11px; font-weight: 400; color: var(--fg-muted); }

/* Actions row — desktop */
.actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-sm);
  margin-top: var(--sp-xl);
  padding-top: var(--sp-lg);
  border-top: 1px solid var(--line-hairline);
}

/* --------------------------------------------------------------------------
   9. RIGHT RAIL
   -------------------------------------------------------------------------- */
.rail {
  position: sticky; top: calc(72px + 20px + 44px + var(--sp-md));
  display: flex; flex-direction: column; gap: var(--sp-md);
}

.rail-card {
  background: var(--surface-raised);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.rail-card-head {
  padding: 12px 14px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--line-hairline);
}
.rail-card-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 600;
  color: var(--fg-primary);
}
.rail-card-title svg { width: 13px; height: 13px; color: var(--accent-ai); stroke-width: 2; }
.rail-card-body { padding: 14px; }

/* Live preview — partner's landing page */
.preview-frame {
  background: linear-gradient(135deg, #FAFAFA 0%, #F0ECDF 100%);
  border-radius: var(--radius-md);
  padding: 22px 18px;
  color: #111;
  position: relative;
  overflow: hidden;
  min-height: 200px;
}
.preview-frame::before {
  content: "";
  position: absolute; top: -40px; right: -40px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(197,160,89,0.28), transparent 70%);
  pointer-events: none;
}
.preview-url {
  display: inline-block;
  padding: 4px 8px;
  background: rgba(0,0,0,0.05);
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: #666;
  margin-bottom: 12px;
}
.preview-hero {
  font-size: 18px; font-weight: 800;
  letter-spacing: -0.015em; line-height: 1.18;
  color: #111;
  margin-bottom: 8px;
}
.preview-hero .accent { color: #8A6F32; }
.preview-sub {
  font-size: 12px; line-height: 1.5;
  color: #555;
  margin-bottom: 12px;
}
.preview-cta {
  display: inline-block;
  padding: 7px 14px;
  background: #111;
  color: #F5F5F5;
  border-radius: 6px;
  font-size: 11px; font-weight: 700;
}
.preview-meta {
  margin-top: 14px;
  display: flex; gap: 6px; flex-wrap: wrap;
}
.preview-meta .tag {
  padding: 3px 8px;
  background: rgba(0,0,0,0.06);
  color: #333;
  border-radius: 4px;
  font-size: 10px; font-weight: 600;
}

/* Tier chip row */
.tier-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--accent-warm-dim);
  border: 1px solid var(--accent-warm-bd);
  border-radius: var(--radius-pill);
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-warm);
}

/* AI generates list */
.ai-list { display: flex; flex-direction: column; gap: 10px; }
.ai-item { display: flex; align-items: flex-start; gap: 10px; }
.ai-item-ico {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: var(--accent-ai-dim);
  color: var(--accent-ai);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.ai-item-ico svg { width: 12px; height: 12px; stroke-width: 2; }
.ai-item-body { flex: 1; min-width: 0; }
.ai-item-title { font-size: 12.5px; font-weight: 600; color: var(--fg-primary); line-height: 1.3; }
.ai-item-sub { font-size: 11px; color: var(--fg-muted); margin-top: 2px; line-height: 1.4; }

/* --------------------------------------------------------------------------
  10. TARGET INDUSTRIES — searchable tree
  -------------------------------------------------------------------------- */
.tgt-box {
  padding: 10px;
  background: var(--surface-base);
  border: 1px solid var(--line-default);
  border-radius: var(--radius-md);
}
.tgt-search-row { position: relative; margin-bottom: 8px; }
.tgt-search-ico {
  position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--fg-muted);
  pointer-events: none;
}
.tgt-search {
  width: 100%; height: 38px;
  padding: 0 32px 0 36px;
  background: var(--surface-elevated);
  border: 1px solid var(--line-default);
  border-radius: var(--radius-sm);
  color: var(--fg-primary);
  font-size: 13px; outline: none;
  transition: var(--dur-micro) var(--ease-out);
}
.tgt-search:focus { border-color: var(--accent-warm); box-shadow: 0 0 0 3px var(--accent-warm-dim); }
.tgt-search-clear {
  position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--surface-interactive);
  color: var(--fg-muted);
  display: grid; place-items: center;
  font-size: 14px; line-height: 1;
  border: 0; cursor: pointer; padding: 0;
}
.tgt-search-clear:hover { background: var(--surface-interactive); color: var(--fg-primary); }

.tgt-summary-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4px;
  margin-bottom: 6px;
  font-size: 10.5px; color: var(--fg-muted);
}
.tgt-clear-all {
  font-size: 10.5px; color: var(--fg-muted);
  background: transparent; border: 0;
  cursor: pointer; padding: 2px 6px;
  border-radius: 4px;
  text-decoration: underline;
  text-decoration-color: var(--line-default);
}
.tgt-clear-all:hover { color: var(--signal-risk); text-decoration-color: var(--signal-risk); }

.tgt-tree {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-sm);
  background: var(--surface-elevated);
}
.tgt-group { border-bottom: 1px solid var(--line-hairline); }
.tgt-group:last-child { border-bottom: 0; }
.tgt-group-head {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  color: var(--fg-secondary);
  font-size: 12px; font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: var(--dur-micro) var(--ease-out);
}
.tgt-group-head:hover { background: var(--surface-interactive); }
.tgt-group.is-selected .tgt-group-head,
.tgt-group.is-some-selected .tgt-group-head { background: var(--accent-warm-dim); }
.tgt-group-head .chev {
  width: 10px; height: 10px;
  color: var(--fg-muted);
  transition: transform var(--dur-short) var(--ease-out);
  flex-shrink: 0;
}
.tgt-group.is-expanded .tgt-group-head .chev { transform: rotate(90deg); color: var(--accent-warm); }
.tgt-check {
  width: 14px; height: 14px;
  border-radius: 3px;
  border: 1.5px solid var(--fg-dim);
  background: var(--surface-base);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.tgt-check svg { width: 9px; height: 9px; color: #0A0A0A; stroke-width: 3; opacity: 0; transition: opacity var(--dur-micro); }
.tgt-group.is-selected .tgt-check,
.tgt-child.is-selected .tgt-check { background: var(--accent-warm); border-color: var(--accent-warm); }
.tgt-group.is-selected .tgt-check svg,
.tgt-child.is-selected .tgt-check svg { opacity: 1; }
.tgt-group.is-some-selected .tgt-check { background: var(--accent-warm-dim); border-color: var(--accent-warm); position: relative; }
.tgt-group.is-some-selected .tgt-check::after {
  content: ""; position: absolute; inset: 3px;
  background: var(--accent-warm);
  border-radius: 1px;
}
.tgt-group-count {
  margin-left: auto;
  font-size: 10px; color: var(--fg-dim); font-weight: 500;
  font-family: 'JetBrains Mono', monospace;
}
.tgt-group.is-selected .tgt-group-count,
.tgt-group.is-some-selected .tgt-group-count { color: var(--accent-warm); }

.tgt-children { display: none; background: var(--surface-base); padding: 4px 4px 6px 40px; }
.tgt-group.is-expanded .tgt-children { display: block; }
.tgt-child {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 7px 10px;
  background: transparent;
  border: 0;
  color: var(--fg-muted);
  font-size: 11.5px;
  text-align: left;
  cursor: pointer;
  border-radius: 5px;
  transition: var(--dur-micro) var(--ease-out);
}
.tgt-child:hover { background: var(--surface-interactive); color: var(--fg-primary); }
.tgt-child.is-selected { color: var(--fg-primary); font-weight: 500; }
.tgt-child .tgt-check { width: 12px; height: 12px; }
.tgt-child .tgt-check svg { width: 7px; height: 7px; }
.tgt-no-results { padding: 20px; text-align: center; color: var(--fg-muted); font-size: 12px; font-style: italic; }

.tgt-selected-chips {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-top: 10px;
  min-height: 24px;
}
.tgt-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 5px 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--accent-warm-dim);
  border: 1px solid var(--accent-warm-bd);
  color: var(--accent-warm);
  font-size: 11px; font-weight: 600;
}
.tgt-chip button {
  display: grid; place-items: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  color: var(--accent-warm);
  font-size: 13px; line-height: 1;
  opacity: 0.65;
  cursor: pointer;
  background: transparent; border: 0; padding: 0;
}
.tgt-chip button:hover { opacity: 1; background: rgba(197,160,89,0.2); }
.tgt-empty { color: var(--fg-dim); font-size: 11px; font-style: italic; padding: 4px 2px; }

/* --------------------------------------------------------------------------
  11. BOOKING INFRASTRUCTURE banner (Step 4)
  -------------------------------------------------------------------------- */
.booking-infra {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: var(--surface-base);
  border: 1px solid var(--accent-warm-bd);
  border-radius: var(--radius-md);
}
.booking-infra-ico {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--accent-warm-dim);
  border: 1px solid var(--accent-warm-bd);
  color: var(--accent-warm);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.booking-infra-ico svg { width: 18px; height: 18px; }
.booking-infra-body { flex: 1; min-width: 0; }
.booking-infra-title { font-size: 13px; font-weight: 700; color: var(--fg-primary); }
.booking-infra-sub { font-size: 11.5px; color: var(--fg-muted); line-height: 1.5; margin-top: 2px; }

/* --------------------------------------------------------------------------
  12. ACTIVATE / SIGNATURE / SUMMARY
  -------------------------------------------------------------------------- */
.activate-stage {
  text-align: center;
  padding: var(--sp-lg) 0;
}
.activate-title {
  font-size: 28px; font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.1;
  color: var(--fg-primary);
  margin-bottom: 14px;
}
.activate-copy {
  font-size: 14px; line-height: 1.6;
  color: var(--fg-secondary);
  max-width: 540px; margin: 0 auto var(--sp-lg);
}
.activate-copy .partner { color: var(--accent-warm); font-weight: 700; }

.activate-box {
  background: var(--surface-base);
  border: 1px solid var(--line-default);
  border-radius: var(--radius-lg);
  padding: 24px;
  max-width: 480px;
  margin: 0 auto;
  text-align: left;
}
.activate-box-head {
  font-size: 11px; color: var(--fg-muted); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  text-align: center;
  margin-bottom: 16px;
}
.activate-sig {
  width: 100%;
  background: transparent;
  border: 0; border-bottom: 2px solid var(--line-strong);
  padding: 12px 0;
  font-size: 22px; font-weight: 500;
  color: var(--fg-primary);
  text-align: center;
  outline: none;
  letter-spacing: -0.01em;
  transition: border-color var(--dur-short) var(--ease-out);
}
.activate-sig:focus { border-color: var(--accent-warm); }
.activate-sig-hint {
  font-size: 10.5px; color: var(--fg-dim);
  text-align: center; margin-top: 8px;
  letter-spacing: 0.02em;
}

.activate-summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  margin: var(--sp-lg) auto 0;
  max-width: 480px;
  background: var(--accent-warm-dim);
  border: 1px solid var(--accent-warm-bd);
  border-radius: var(--radius-md);
}
.activate-summary-l { font-size: 12.5px; color: var(--fg-secondary); }
.activate-summary-r {
  font-size: 20px; font-weight: 800;
  color: var(--accent-warm);
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
}
.activate-summary.is-recurring {
  margin-top: 8px;
  background: var(--surface-raised);
  border-color: var(--line-hairline);
  padding: 12px 18px;
}
.activate-summary.is-recurring .activate-summary-r { font-size: 16px; }

/* --------------------------------------------------------------------------
  13. STEP 0 — invite email preview
  -------------------------------------------------------------------------- */
.email-frame {
  background: #0a0a0a;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  margin: 0 auto;
  max-width: 640px;
}
.email-inner {
  max-width: 560px; margin: 0 auto;
  background: #141414;
  border: 1px solid #262626;
  border-radius: 14px;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.email-from {
  padding: 16px 20px 8px;
  font-size: 11px; color: #737373; line-height: 1.6;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.email-from strong { color: #a3a3a3; font-weight: 600; }
.email-header {
  padding: 28px 28px 8px;
  text-align: center;
}
.email-header .logo-chip {
  display: inline-block; margin: 0 auto 10px;
  padding: 6px 16px;
  background: rgba(197,160,89,0.08);
  border-radius: 8px;
  font-weight: 800; color: var(--accent-warm); font-size: 16px;
  letter-spacing: -0.01em;
}
.email-header .email-logo {
  height: 52px; width: auto;
  margin: 0 auto 12px;
  display: block;
  opacity: 0.98;
}
.email-tagline {
  color: #a3a3a3; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.email-divider {
  height: 2px; margin: 16px 28px 0;
  background: linear-gradient(90deg, transparent, var(--accent-warm) 50%, transparent);
}
.email-content { padding: 20px 28px 4px; }
.email-content .email-chip {
  display: inline-block;
  padding: 5px 11px; margin-bottom: 12px;
  background: rgba(197,160,89,0.12);
  border: 1px solid rgba(197,160,89,0.28);
  border-radius: var(--radius-pill);
  color: var(--accent-warm);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.email-frame h3 {
  color: #ffffff;
  font-size: 20px; font-weight: 800; line-height: 1.25;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.email-frame p {
  color: #d4d4d4;
  font-size: 14px; line-height: 1.6;
  margin-bottom: 10px;
}
.email-fallback {
  background: #0a0a0a;
  border: 1px solid #262626;
  border-radius: 10px;
  margin: 16px 28px 4px;
}
.email-fallback-row { padding: 12px 16px; }
.email-fallback-row + .email-fallback-row { border-top: 1px solid #262626; }
.email-fallback-label {
  color: #737373; font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 4px;
}
.email-fallback-value {
  color: #fafafa; font-size: 12px; line-height: 1.5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-all;
}
.email-fallback-value.gold { color: var(--accent-warm); }
.email-fallback-hint { color: #a3a3a3; font-size: 11px; line-height: 1.5; margin-bottom: 6px; }
.email-cta-row { text-align: center; padding: 20px 28px 6px; }
.email-cta {
  display: inline-block;
  padding: 13px 28px;
  background: linear-gradient(135deg, #D4AF37, #C5A059);
  color: #0a0a0a;
  border-radius: 10px;
  font-weight: 800; font-size: 13px; letter-spacing: 0.01em;
  box-shadow: 0 6px 18px rgba(197,160,89,0.35);
  cursor: pointer;
}
.email-note {
  text-align: center; padding: 8px 28px 20px;
  color: #a3a3a3; font-size: 11.5px; line-height: 1.5;
}
.email-foot {
  padding: 16px 28px 22px;
  border-top: 1px solid #262626;
  background: #141414;
  text-align: center;
}
.email-foot p { color: #a3a3a3; font-size: 10.5px; line-height: 1.5; margin-bottom: 3px; }
.email-foot p:last-child { color: #737373; margin: 0; }
.email-foot a { color: var(--accent-warm); text-decoration: underline; }

/* --------------------------------------------------------------------------
  14. SUCCESS STATE
  -------------------------------------------------------------------------- */
.success-stage {
  text-align: center;
  padding: var(--sp-xl) 0 var(--sp-lg);
}
.success-icon {
  width: 72px; height: 72px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--signal-positive), #34D399);
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 20px 44px rgba(16,185,129,0.28);
  animation: success-bounce 0.6s var(--ease-out);
}
@keyframes success-bounce {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
.success-icon svg { width: 32px; height: 32px; stroke-width: 3; }
.success-title {
  font-size: 28px; font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 10px;
  color: var(--fg-primary);
}
.success-sub {
  font-size: 14.5px; line-height: 1.55;
  color: var(--fg-secondary);
  max-width: 480px; margin: 0 auto var(--sp-lg);
}
.success-sub .hl { color: var(--accent-warm); font-weight: 700; }
.success-steps {
  text-align: left;
  background: var(--surface-base);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  max-width: 520px; margin: 0 auto var(--sp-lg);
  display: flex; flex-direction: column; gap: 12px;
}
.success-step { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; color: var(--fg-primary); line-height: 1.5; }
.success-step-num {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--accent-warm-dim);
  border: 1px solid var(--accent-warm-bd);
  color: var(--accent-warm);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
  15. CANVAS SHELL — Login / public pages
  -------------------------------------------------------------------------- */
.canvas {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex; flex-direction: column;
}
.canvas-topbar {
  position: sticky; top: 0;
  z-index: var(--z-raised);
  background: rgba(7,8,10,0.65);
  backdrop-filter: saturate(1.4) blur(16px);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  border-bottom: 1px solid var(--line-hairline);
}
.canvas-topbar-row {
  max-width: 1280px; margin: 0 auto;
  height: 72px;
  display: flex; align-items: center; gap: var(--sp-md);
  padding: 0 var(--sp-lg);
}

.auth-stage {
  flex: 1;
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--sp-xl) var(--sp-lg) calc(var(--sp-3xl) + var(--sp-lg));
  gap: var(--sp-lg);
}

/* Chromeless canvas (pre-auth login — no topbar) */
.canvas.is-chromeless { min-height: 100vh; }
.canvas.is-chromeless .auth-stage {
  padding-top: calc(var(--sp-2xl) + env(safe-area-inset-top, 0));
}

.auth-card {
  width: 100%;
  max-width: 460px;
  background: var(--surface-raised);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-xl);
  padding: 40px;
  position: relative;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.auth-card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent 30%),
              radial-gradient(800px 200px at 50% -30%, var(--accent-warm-dim), transparent 60%);
  opacity: 0.9;
}
.auth-card > * { position: relative; }

.auth-logo-row {
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
}

/* Brand block inside the card (no topbar): logo + slogan underneath */
.auth-brand {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}
.auth-logo {
  height: 72px; width: auto;
  display: block;
  opacity: 0.98;
  filter: drop-shadow(0 10px 28px rgba(197, 160, 89, 0.22));
}
.auth-slogan {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent-warm);
  line-height: 1;
  white-space: nowrap;
}

.auth-head {
  text-align: center;
  margin-bottom: 28px;
}
.auth-head .eyebrow-pill { margin-bottom: 16px; }
.auth-head h1 {
  font-size: 26px; font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--fg-primary);
  margin-bottom: 10px;
}
.auth-head .sub {
  font-size: 14px; line-height: 1.6;
  color: var(--fg-muted);
  max-width: 360px; margin: 0 auto;
}

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form .input { height: var(--h-input); }
.auth-form .field { gap: 8px; }

.auth-trust {
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--surface-base);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-sm);
  font-size: 11.5px; color: var(--fg-muted);
  line-height: 1.4;
}
.auth-trust .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--fg-quiet); }
.auth-trust svg { width: 12px; height: 12px; color: var(--signal-positive); stroke-width: 2.4; flex-shrink: 0; }

.auth-foot {
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--line-hairline);
  text-align: center;
}
.auth-foot a {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-muted);
  transition: color var(--dur-micro) var(--ease-out);
}
.auth-foot a:hover { color: var(--accent-warm); }

/* Error banner */
.error-banner {
  display: none;
  align-items: flex-start; gap: 10px;
  margin-bottom: 18px;
  padding: 12px 14px;
  background: var(--signal-risk-dim);
  border: 1px solid var(--signal-risk-bd);
  border-radius: var(--radius-sm);
  text-align: left;
}
.error-banner.is-active { display: flex; }
.error-banner svg { width: 14px; height: 14px; color: var(--signal-risk); flex-shrink: 0; margin-top: 2px; stroke-width: 2; }
.error-banner p { font-size: 12.5px; color: var(--signal-risk); font-weight: 500; line-height: 1.5; }

/* Verifying state */
.verifying-stage {
  display: none;
  text-align: center; padding: 20px 0;
}
.verifying-stage.is-active { display: block; animation: fade-in var(--dur-medium) var(--ease-out); }
.verify-spinner {
  width: 42px; height: 42px;
  margin: 0 auto 16px;
  border: 2px solid var(--line-default);
  border-top-color: var(--accent-warm);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
.verifying-stage p { color: var(--fg-muted); font-size: 13px; font-weight: 500; }
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Success state (login) */
.sent-stage {
  display: none;
  text-align: center;
  animation: fade-in var(--dur-medium) var(--ease-out);
}
.sent-stage.is-active { display: block; }
.sent-icon {
  width: 56px; height: 56px; margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--signal-positive-dim);
  border: 1px solid var(--signal-positive-bd);
  color: var(--signal-positive);
  display: grid; place-items: center;
}
.sent-icon svg { width: 24px; height: 24px; stroke-width: 2.5; }
.sent-stage h1 {
  font-size: 24px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--fg-primary); margin-bottom: 10px;
}
.sent-stage .meta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; margin-bottom: 18px;
  background: var(--accent-ai-dim);
  border: 1px solid var(--accent-ai-bd);
  border-radius: var(--radius-pill);
  font-size: 11.5px; font-weight: 600;
  color: var(--accent-ai);
}
.sent-stage .meta .mono { font-variant-numeric: tabular-nums; }
.sent-stage .desc {
  font-size: 13.5px; color: var(--fg-secondary);
  line-height: 1.6; margin-bottom: 22px;
  max-width: 360px; margin-left: auto; margin-right: auto;
}
.sent-stage .desc strong { color: var(--fg-primary); font-weight: 700; }
.sent-stage .desc .email { color: var(--accent-warm); font-weight: 700; }

.ghost-actions {
  display: flex; justify-content: center; gap: var(--sp-xs);
  margin-top: 8px;
  flex-wrap: wrap;
}
.ghost-actions button {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-muted);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--dur-micro) var(--ease-out);
  background: transparent; border: 0;
}
.ghost-actions button:hover { color: var(--fg-primary); background: var(--surface-interactive); }
.ghost-actions button[disabled] { color: var(--fg-quiet); cursor: not-allowed; opacity: 0.7; }
.ghost-actions button[disabled]:hover { background: transparent; color: var(--fg-quiet); }

/* Demo skip affordance — hidden until email typed */
.demo-skip {
  display: none;
  align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  height: 38px;
  margin-top: 6px;
  background: transparent;
  color: var(--fg-muted);
  border: 1px dashed var(--line-default);
  border-radius: var(--radius-sm);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  transition: var(--dur-micro) var(--ease-out);
}
.demo-skip.is-visible { display: inline-flex; }
.demo-skip.demo-link-btn {
  height: 44px;
  margin-top: 18px;
  font-size: 11.5px;
}
.demo-skip.demo-link-btn svg { width: 14px; height: 14px; }
.demo-skip:hover { color: var(--accent-ai); border-color: var(--accent-ai-bd); background: var(--accent-ai-dim); }
.demo-skip svg { width: 12px; height: 12px; color: var(--accent-ai); stroke-width: 2.4; }
.demo-skip .demo-chip {
  margin-left: auto;
  font-size: 9px; letter-spacing: 0.22em;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--accent-ai-dim);
  color: var(--accent-ai);
  font-weight: 800;
}

/* Live delivery meter (AI sent state) */
.meter-row {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--surface-base);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-sm);
  font-size: 12px; color: var(--fg-muted);
  margin-bottom: 20px;
}
.meter-row .kv { display: flex; gap: 6px; }
.meter-row .kv .k { color: var(--fg-dim); }
.meter-row .kv .v { color: var(--fg-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.meter-row .sep { width: 3px; height: 3px; background: var(--fg-quiet); border-radius: 50%; }

/* --------------------------------------------------------------------------
  16. ASK STUDIO — floating dock (desktop)
  -------------------------------------------------------------------------- */
.ask-dock {
  position: fixed;
  bottom: 22px; right: 22px;
  z-index: var(--z-dropdown);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 12px;
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: transform var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.ask-dock:hover { transform: translateY(-2px); border-color: var(--accent-ai-bd); }
.ask-dock-ico {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent-ai-dim);
  border: 1px solid var(--accent-ai-bd);
  color: var(--accent-ai);
  display: grid; place-items: center;
  position: relative;
}
.ask-dock-ico svg { width: 13px; height: 13px; stroke-width: 2.4; }
.ask-dock-ico::after {
  content: "";
  position: absolute; top: -2px; right: -2px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-ai);
  box-shadow: 0 0 0 2px var(--surface-raised);
  animation: pulse-ai var(--pulse-ai) ease-in-out infinite;
}
.ask-dock-label { font-size: 12.5px; color: var(--fg-primary); font-weight: 600; }
.ask-dock-kbd {
  padding: 2px 6px;
  background: var(--surface-elevated);
  border: 1px solid var(--line-default);
  border-radius: 4px;
  font-size: 10px; font-weight: 700;
  color: var(--fg-muted);
  font-family: 'JetBrains Mono', monospace;
}

/* --------------------------------------------------------------------------
  17. MOBILE — sticky footer + preview pill
  -------------------------------------------------------------------------- */
.mobile-footer { display: none; }
.mobile-preview-pill { display: none; }

/* --------------------------------------------------------------------------
  18. RESPONSIVE
  -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .workspace {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-md);
  }
  .rail { position: static; order: -1; }
  .rail-card.is-secondary { display: none; }
  .ask-dock { display: none; }
}

@media (max-width: 767px) {
  body { padding-bottom: calc(var(--sticky-footer-h) + 16px); font-size: 14px; }
  .topbar-row, .canvas-topbar-row { height: 64px; padding: 0 var(--sp-md); gap: 10px; }
  .brand { gap: 10px; }
  .brand-logo { height: 34px; }
  .brand-divider { height: 28px; }
  .brand-tag { display: none; }
  .brand-slogan { font-size: 9.5px; letter-spacing: 0.14em; }
  .brand-slogan::before { width: 3px; height: 3px; }
  .topbar-meta span.hide-sm { display: none; }
  .stepper-wrap { padding: var(--sp-md) var(--sp-md) var(--sp-xs); }
  .stepper { gap: 10px; }
  .step { gap: 10px; padding: 2px 0 6px; }
  .step-track { height: 5px; }
  .step-meta { gap: 8px; }
  .step-idx-row { font-size: 11px; letter-spacing: 0.04em; gap: 4px; }
  .step-idx-row .step-check { width: 12px; height: 12px; }
  .step-label { font-size: 12.5px; letter-spacing: 0; line-height: 1.2; }
  .workspace { padding: var(--sp-md); }
  .panel {
    padding: var(--sp-lg);
    border-radius: var(--radius-lg);
  }
  .panel-head h1 { font-size: 22px; }
  .panel-head p { font-size: 13px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; gap: 12px; }

  .actions { display: none; }
  .mobile-footer {
    display: flex; align-items: center; gap: 10px;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: var(--sticky-footer-h);
    padding: 12px var(--sp-md);
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
    background: rgba(7,8,10,0.92);
    border-top: 1px solid var(--line-default);
    backdrop-filter: blur(16px);
    z-index: var(--z-raised);
  }
  .mobile-footer .btn { height: var(--h-cta-mobile); flex: 1; }
  .mobile-footer .btn-ghost { flex: 0 0 auto; width: 48px; padding: 0; }

  /* Mobile preview pill — opens preview as bottom sheet */
  .mobile-preview-pill {
    display: inline-flex;
    align-items: center; gap: 8px;
    position: fixed;
    right: 14px;
    bottom: calc(var(--sticky-footer-h) + 14px + env(safe-area-inset-bottom, 0));
    z-index: calc(var(--z-raised) + 1);
    padding: 9px 14px 9px 11px;
    background: var(--surface-raised);
    border: 1px solid var(--accent-ai-bd);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-md);
    font-size: 12px; font-weight: 700;
    color: var(--fg-primary);
    cursor: pointer;
  }
  .mobile-preview-pill svg { width: 14px; height: 14px; color: var(--accent-ai); stroke-width: 2.2; }

  .auth-stage { padding: var(--sp-lg) var(--sp-md); }
  .auth-card { padding: 30px 22px; border-radius: var(--radius-lg); max-width: 100%; }
  .auth-head h1 { font-size: 22px; }
  .auth-logo { height: 56px; }

  .input, .select { height: var(--h-input-mobile); }
  .btn { height: var(--h-cta-mobile); }

  .activate-title { font-size: 24px; }
  .activate-box { padding: 18px; }

  .success-title, .sent-stage h1 { font-size: 22px; }
  .success-icon { width: 60px; height: 60px; }
  .success-icon svg { width: 26px; height: 26px; }
}

@media (max-width: 640px) {
  .auth-card { padding: 26px 20px; }
  .auth-head h1 { font-size: 20px; }
  .topbar-meta { font-size: 11px; }
  .topbar-meta .pct { font-size: 11.5px; }
  /* On phones, drop the slogan-divider stack → just the logo to save width */
  .brand-divider, .brand-stack { display: none; }
  /* At <=480px: stack idx above label in the stepper so nothing truncates */
  .stepper { gap: 6px; }
  .step-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .step-idx-row { font-size: 10px; }
  .step-label { font-size: 11.5px; line-height: 1.2; }
}

/* --------------------------------------------------------------------------
  19. REDUCED MOTION
  -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .pulse-dot, .ask-dock-ico::after, .progress-fill::after { animation: none; }
}

/* --------------------------------------------------------------------------
  20. PREVIEW SHEET (mobile) / overlay (desktop)
  -------------------------------------------------------------------------- */
.preview-overlay {
  position: fixed; inset: 0;
  z-index: var(--z-modal);
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-medium) var(--ease-out);
  display: flex; justify-content: flex-end;
}
.preview-overlay.is-open { opacity: 1; pointer-events: auto; }
.preview-sheet {
  width: min(720px, 68vw);
  height: 100%;
  background: var(--surface-base);
  border-left: 1px solid var(--line-strong);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--dur-medium) var(--ease-out);
  box-shadow: -24px 0 80px rgba(0,0,0,0.55);
}
.preview-overlay.is-open .preview-sheet { transform: translateX(0); }

.preview-sheet-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line-hairline);
  background: var(--surface-raised);
}
.preview-sheet-title { font-size: 13px; font-weight: 700; color: var(--fg-primary); flex: 1; }
.preview-sheet-close {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  background: var(--surface-elevated);
  border: 1px solid var(--line-default);
  color: var(--fg-muted);
  display: grid; place-items: center;
  transition: var(--dur-micro) var(--ease-out);
}
.preview-sheet-close:hover { background: var(--surface-interactive); color: var(--signal-risk); border-color: var(--signal-risk-bd); }
.preview-sheet-close svg { width: 14px; height: 14px; stroke-width: 2.2; }
.preview-sheet-body {
  flex: 1; overflow: auto;
  padding: 24px;
  display: grid; place-items: center;
}
.preview-sheet-body .preview-frame {
  width: 100%; max-width: 520px;
  min-height: 300px;
}
.preview-sheet-body .preview-hero { font-size: 22px; }
.preview-sheet-body .preview-sub { font-size: 13.5px; }

body.is-preview-open { overflow: hidden; }

@media (max-width: 767px) {
  .preview-overlay { justify-content: center; align-items: flex-end; }
  .preview-sheet {
    width: 100%; height: 92vh;
    border-left: 0;
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    transform: translateY(100%);
  }
  .preview-overlay.is-open .preview-sheet { transform: translateY(0); }
}

/* --------------------------------------------------------------------------
  21. UTILITIES
  -------------------------------------------------------------------------- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.mt-xs { margin-top: var(--sp-xs); }
.mt-sm { margin-top: var(--sp-sm); }
.mt-md { margin-top: var(--sp-md); }
.mt-lg { margin-top: var(--sp-lg); }
.tac { text-align: center; }
.hide-above-md { display: none; }
@media (max-width: 767px) { .hide-below-md { display: none; } .hide-above-md { display: initial; } }

/* Step fade transition */
.step-pane { display: none; }
.step-pane.is-active {
  display: block;
  opacity: 1;
  animation: step-fade var(--dur-medium) var(--ease-out) both;
}
@keyframes step-fade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
/* Defensive: booking step-1 must always be visible on load */
.booking-card.step-pane.is-active {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ==========================================================================
   22. DASHBOARD — App Shell with left rail + topbar + command center
   ========================================================================== */

/* App rail (left, 88 wide — accommodates real horizontal logo) */
.app-rail {
  position: fixed; left: 0; top: 0; bottom: 0;
  width: 88px;
  background: var(--surface-raised);
  border-right: 1px solid var(--line-hairline);
  display: flex; flex-direction: column;
  align-items: center;
  padding: 18px 0 14px;
  z-index: var(--z-raised);
}
.app-rail-logo {
  display: block;
  width: 100%;
  padding: 0 8px;
  margin-bottom: 22px;
}
.app-rail-logo img {
  display: block;
  width: 100%; height: auto;
  max-height: 36px;
  margin: 0 auto;
  object-fit: contain;
  opacity: 0.96;
}
.app-rail-nav {
  display: flex; flex-direction: column;
  gap: 4px; width: 100%;
  padding: 0 6px;
  flex: 1;
  /* Scroll inside the rail if items overflow at very small viewport heights — */
  /* keeps the avatar foot anchored, hides scrollbar visually but stays usable. */
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--line-default) transparent;
}
.app-rail-nav::-webkit-scrollbar { width: 4px; }
.app-rail-nav::-webkit-scrollbar-thumb { background: var(--line-default); border-radius: 2px; }
.app-rail-nav::-webkit-scrollbar-track { background: transparent; }
.app-rail-item {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
  padding: 10px 0 8px;
  border-radius: var(--radius-sm);
  color: var(--fg-muted);
  cursor: pointer;
  transition: var(--dur-micro) var(--ease-out);
  text-decoration: none;
}
.app-rail-item:hover { color: var(--fg-primary); background: var(--surface-interactive); }
.app-rail-item svg { width: 20px; height: 20px; stroke-width: 1.7; }
.app-rail-item .rail-label {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
}
.app-rail-item.is-active {
  color: var(--accent-warm);
  background: var(--accent-warm-dim);
}
.app-rail-item.is-active::before {
  content: ""; position: absolute;
  left: -6px; top: 8px; bottom: 8px;
  width: 3px;
  background: var(--accent-warm);
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 8px var(--accent-warm-glow);
}
.app-rail-foot {
  margin-top: auto;
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
}
.app-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-warm), var(--accent-warm-hi));
  color: #0A0A0A;
  font-size: 13px; font-weight: 800;
  display: grid; place-items: center;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: var(--dur-micro) var(--ease-out);
}
.app-avatar:hover { border-color: var(--accent-warm); }

/* App topbar (different from canvas — sits inside the rail-shell) */
.app-shell { padding-left: 88px; min-height: 100vh; position: relative; z-index: 1; }

/* Mobile-only topbar brand (when rail hides) */
.app-topbar-brand { display: none; flex-shrink: 0; }
.app-topbar-brand img { height: 28px; width: auto; display: block; }
.app-topbar {
  position: sticky; top: 0;
  z-index: var(--z-raised);
  height: 64px;
  display: flex; align-items: center;
  gap: var(--sp-md);
  padding: 0 var(--sp-lg);
  background: rgba(7,8,10,0.72);
  backdrop-filter: saturate(1.4) blur(16px);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  border-bottom: 1px solid var(--line-hairline);
}
.app-greeting {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.app-greeting .hello {
  font-size: 14px; font-weight: 700;
  color: var(--fg-primary);
  letter-spacing: -0.01em;
}
.app-greeting .meta {
  font-size: 11.5px; color: var(--fg-muted);
  display: flex; align-items: center; gap: 8px;
}
.app-greeting .meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--fg-quiet); }

/* ⌘K command palette pill */
.cmdk {
  flex: 1; max-width: 480px;
  margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
  height: 38px;
  padding: 0 14px 0 12px;
  background: var(--surface-raised);
  border: 1px solid var(--line-default);
  border-radius: var(--radius-sm);
  color: var(--fg-muted);
  font-size: 12.5px;
  cursor: text;
  transition: var(--dur-micro) var(--ease-out);
}
.cmdk:hover { border-color: var(--line-strong); color: var(--fg-primary); }
.cmdk:focus-within { border-color: var(--accent-warm); box-shadow: 0 0 0 3px var(--accent-warm-dim); }
.cmdk svg { width: 14px; height: 14px; stroke-width: 2; flex-shrink: 0; }
.cmdk .placeholder { flex: 1; }
.cmdk .kbd-hint {
  display: inline-flex; align-items: center; gap: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--fg-dim); font-weight: 700;
  padding: 2px 6px;
  background: var(--surface-elevated);
  border: 1px solid var(--line-default);
  border-radius: 4px;
}

.app-bell {
  position: relative;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
  transition: var(--dur-micro) var(--ease-out);
}
.app-bell:hover { color: var(--fg-primary); background: var(--surface-raised); }
.app-bell svg { width: 16px; height: 16px; stroke-width: 1.8; }
.app-bell .badge {
  position: absolute; top: 8px; right: 8px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-warm);
  box-shadow: 0 0 0 2px var(--surface-base);
}

/* App content container */
.app-content {
  max-width: 1280px;
  padding: var(--sp-lg) var(--sp-lg) var(--sp-3xl);
  margin: 0 auto;
}

/* Zone 1 — Next Action (full-width, primary instrument) */
.next-action {
  display: flex; align-items: center; gap: var(--sp-md);
  padding: 18px 22px;
  background: var(--surface-raised);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}
.next-action::before {
  content: "";
  position: absolute; top: 0; right: 0;
  width: 280px; height: 100%;
  background: radial-gradient(180px 100px at 100% 50%, var(--accent-warm-dim), transparent 70%);
  pointer-events: none;
}
.next-action > * { position: relative; }
.next-action-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--accent-warm-dim);
  border: 1px solid var(--accent-warm-bd);
  color: var(--accent-warm);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.next-action-icon svg { width: 20px; height: 20px; stroke-width: 2; }
.next-action-body { flex: 1; min-width: 0; }
.next-action-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-warm);
  margin-bottom: 4px;
}
.next-action-title {
  font-size: 17px; font-weight: 700;
  color: var(--fg-primary);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.next-action-meta {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--fg-muted);
}
.next-action-meta .mono { color: var(--fg-secondary); font-weight: 600; }
.next-action-link {
  color: var(--accent-warm);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-micro) var(--ease-out);
}
.next-action-link:hover { border-bottom-color: var(--accent-warm); }
.next-action-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Zone 2 — Ranked Insights horizontal scroll lane */
.lane-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: var(--sp-xl) 0 var(--sp-md);
}
.lane-head h2 {
  font-size: 14px; font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg-primary);
  display: inline-flex; align-items: center; gap: 8px;
}
.lane-head h2 .pulse-dot { transform: translateY(0); }
.lane-head .meta {
  font-size: 11.5px;
  color: var(--fg-muted);
}
.insights-lane {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  gap: var(--sp-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--sp-lg);
  padding: 0 var(--sp-lg) var(--sp-xs);
  margin: 0 calc(var(--sp-lg) * -1);
}
.insights-lane::-webkit-scrollbar { height: 8px; }
.insights-lane::-webkit-scrollbar-track { background: transparent; }
.insights-lane::-webkit-scrollbar-thumb { background: var(--line-default); border-radius: 4px; }

.insight-card {
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  gap: 12px;
  padding: 18px;
  background: var(--surface-raised);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: var(--dur-short) var(--ease-out);
}
.insight-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-default);
  box-shadow: var(--shadow-md);
}
.insight-card-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-ai);
}
.insight-card-title {
  font-size: 14.5px; font-weight: 600;
  color: var(--fg-primary);
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.insight-card-metric {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px; font-weight: 800;
  color: var(--accent-warm);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.insight-card-body {
  font-size: 12.5px;
  color: var(--fg-muted);
  line-height: 1.5;
  flex: 1;
}
.insight-card-action {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700;
  color: var(--accent-warm);
  margin-top: 4px;
}
.insight-card-action svg { width: 12px; height: 12px; stroke-width: 2.4; }

/* Zone 3 — Headline metric (one big number) + 5 micro-stats */
.metric-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--sp-md);
  margin-top: var(--sp-xl);
}
.headline-metric {
  padding: 24px 28px;
  background: var(--surface-raised);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
}
.headline-metric::before {
  content: "";
  position: absolute; top: -40px; right: -40px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-warm-dim), transparent 70%);
  pointer-events: none;
}
.headline-metric > * { position: relative; }
.metric-eyebrow {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-muted);
}
.metric-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 800;
  color: var(--fg-primary);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.metric-trend {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  color: var(--signal-positive);
}
.metric-trend.is-down { color: var(--signal-risk); }
.metric-trend svg { width: 12px; height: 12px; stroke-width: 2.4; }
.metric-trend .vs { color: var(--fg-muted); font-weight: 500; }

.micro-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 12px;
  background: var(--surface-raised);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-lg);
}
.micro-stat {
  padding: 10px 12px;
  background: var(--surface-base);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-sm);
}
.micro-stat-label {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 4px;
}
.micro-stat-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px; font-weight: 800;
  color: var(--fg-primary);
  letter-spacing: -0.01em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.micro-stat-delta {
  font-size: 11px; font-weight: 600;
  color: var(--signal-positive);
}
.micro-stat-delta.is-down { color: var(--signal-risk); }

/* Zone 4 — Today schedule + Top pages 2-col */
.dashboard-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-md);
  margin-top: var(--sp-xl);
}
.panel-card {
  background: var(--surface-raised);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-lg);
}
.panel-card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-hairline);
}
.panel-card-title {
  font-size: 13px; font-weight: 700;
  color: var(--fg-primary);
  letter-spacing: -0.005em;
  display: inline-flex; align-items: center; gap: 8px;
}
.panel-card-body { padding: 8px 8px 12px; }

.meeting-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px;
  border-radius: var(--radius-sm);
  transition: background var(--dur-micro) var(--ease-out);
  cursor: pointer;
}
.meeting-row:hover { background: var(--surface-interactive); }
.meeting-row + .meeting-row { border-top: 1px solid var(--line-hairline); }
.meeting-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px; font-weight: 700;
  color: var(--fg-secondary);
  letter-spacing: 0.02em;
  min-width: 60px;
  font-variant-numeric: tabular-nums;
}
.meeting-body { flex: 1; min-width: 0; }
.meeting-title {
  font-size: 13.5px; font-weight: 600;
  color: var(--fg-primary);
  line-height: 1.3;
}
.meeting-sub {
  font-size: 11.5px;
  color: var(--fg-muted);
  margin-top: 2px;
}
.meeting-row .ai-score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent-ai);
  display: inline-flex; align-items: center; gap: 4px;
}
.meeting-row .ai-score::before {
  content: "✦";
  font-size: 9px;
}

.page-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px; align-items: center;
  padding: 12px;
  border-radius: var(--radius-sm);
  transition: background var(--dur-micro) var(--ease-out);
  cursor: pointer;
}
.page-row + .page-row { border-top: 1px solid var(--line-hairline); }
.page-row:hover { background: var(--surface-interactive); }
.page-row .url {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--fg-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.page-row .url .accent { color: var(--accent-warm); }
.page-row .cvr {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 700;
  color: var(--fg-primary);
  letter-spacing: -0.01em;
}
.page-row .cvr-label {
  display: block;
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-dim);
  margin-top: 1px;
}
.page-row .leads-count {
  font-size: 11.5px; color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

/* ===== Week Schedule card — primary scheduling surface ===== */
.week-card {
  margin-top: var(--sp-xl);
  background: var(--surface-raised);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-lg);
  padding: 18px 20px 20px;
}
.week-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-md);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.week-card-title {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-size: 14px; font-weight: 700;
  color: var(--fg-primary);
  letter-spacing: -0.005em;
}
.week-card-title svg { width: 14px; height: 14px; color: var(--accent-warm); stroke-width: 2; align-self: center; }
.week-range {
  font-size: 12px;
  color: var(--fg-muted);
  font-weight: 500;
  letter-spacing: 0;
}
.week-nav {
  display: flex; align-items: center; gap: 4px;
  flex-shrink: 0;
}
.week-nav-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; min-width: 30px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-base);
  border: 1px solid var(--line-default);
  color: var(--fg-secondary);
  font-size: 11px; font-weight: 600;
  cursor: pointer;
  transition: var(--dur-micro) var(--ease-out);
}
.week-nav-btn:hover { background: var(--surface-interactive); color: var(--fg-primary); border-color: var(--line-strong); }
.week-nav-btn svg { width: 12px; height: 12px; stroke-width: 2.4; }
.week-nav-btn.is-today { padding: 0 12px; background: transparent; }
.week-nav-btn.is-today.is-active { background: var(--accent-warm-dim); color: var(--accent-warm); border-color: var(--accent-warm-bd); }

/* 7-day strip */
.week-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 18px;
}
.day-col {
  background: var(--surface-base);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-sm);
  padding: 12px 10px;
  cursor: pointer;
  transition: var(--dur-micro) var(--ease-out);
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0;
  position: relative;
}
.day-col:hover { background: var(--surface-interactive); border-color: var(--line-default); }
.day-col.is-selected {
  background: var(--surface-elevated);
  border-color: var(--accent-warm-bd);
  box-shadow: 0 4px 12px rgba(197,160,89,0.14);
}
.day-col.is-today::before {
  content: ""; position: absolute;
  top: 6px; right: 6px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent-warm);
  box-shadow: 0 0 6px var(--accent-warm-glow);
}
.day-col.is-weekend { opacity: 0.55; }
.day-col.is-weekend:hover { opacity: 0.85; }
.day-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 4px;
}
.day-name {
  font-size: 10px; font-weight: 700;
  color: var(--fg-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.day-col.is-today .day-name,
.day-col.is-selected .day-name { color: var(--accent-warm); }
.day-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px; font-weight: 700;
  color: var(--fg-primary);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.day-col.is-today .day-num { color: var(--accent-warm); }
.day-col.is-past .day-num { color: var(--fg-muted); }
.day-density {
  display: flex; flex-direction: column; gap: 2px;
  min-height: 28px;
  justify-content: flex-end;
}
.density-bar { height: 4px; border-radius: 2px; background: var(--surface-elevated); }
.density-bar.q-high { background: var(--signal-positive); }
.density-bar.q-med { background: var(--accent-warm); }
.density-bar.q-low { background: var(--signal-risk); }
.density-bar.is-done { background: var(--fg-quiet); opacity: 0.6; }
.density-bar.is-now {
  background: var(--accent-warm);
  box-shadow: 0 0 8px var(--accent-warm-glow);
  animation: density-pulse 1.8s ease-in-out infinite;
}
@keyframes density-pulse { 50% { opacity: 0.55; } }

.day-stats {
  font-size: 10.5px;
  color: var(--fg-muted);
  display: flex; flex-direction: column; gap: 1px;
  font-variant-numeric: tabular-nums;
}
.day-stats .count { color: var(--fg-secondary); font-weight: 700; }
.day-stats .rev { color: var(--fg-dim); }
.day-col.is-selected .day-stats .count { color: var(--accent-warm); }

/* Day detail — selected day drill-down */
.day-detail {
  border-top: 1px solid var(--line-hairline);
  padding-top: 16px;
}
.day-detail-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.day-detail-title {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-size: 15px; font-weight: 700;
  color: var(--fg-primary);
  letter-spacing: -0.01em;
}
.day-detail-title .day-detail-date {
  font-weight: 500; color: var(--fg-muted);
  font-size: 13px;
}
.chip-today {
  font-size: 9px; font-weight: 800;
  letter-spacing: 0.12em;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--accent-warm-dim);
  color: var(--accent-warm);
  border: 1px solid var(--accent-warm-bd);
}
.day-detail-stats {
  font-size: 12px; color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

.week-meeting-list { display: flex; flex-direction: column; gap: 6px; }
.week-meeting {
  display: grid;
  grid-template-columns: 76px 4px 1fr auto;
  gap: 12px; align-items: center;
  padding: 10px 12px;
  background: var(--surface-base);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-sm);
  transition: var(--dur-micro) var(--ease-out);
}
.week-meeting:hover { background: var(--surface-interactive); border-color: var(--line-default); }
.week-meeting.is-now {
  background: linear-gradient(90deg, var(--accent-warm-dim), var(--surface-base));
  border-color: var(--accent-warm-bd);
}
.week-meeting.is-done { opacity: 0.7; }
.wm-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700;
  color: var(--fg-secondary);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.wm-bar {
  align-self: stretch;
  border-radius: 2px;
  background: var(--surface-elevated);
  min-height: 28px;
}
.wm-bar.q-high { background: var(--signal-positive); }
.wm-bar.q-med { background: var(--accent-warm); }
.wm-bar.q-low { background: var(--signal-risk); }
.wm-bar.is-now { background: var(--accent-warm); box-shadow: 0 0 8px var(--accent-warm-glow); }
.wm-bar.is-done { background: var(--fg-quiet); opacity: 0.5; }
.wm-body { min-width: 0; }
.wm-name {
  font-size: 13.5px; font-weight: 700;
  color: var(--fg-primary);
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  letter-spacing: -0.005em;
}
.wm-quality {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 800;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--surface-elevated);
  color: var(--fg-secondary);
  letter-spacing: 0.02em;
}
.wm-quality.hi { background: var(--signal-positive-dim); color: var(--signal-positive); }
.wm-quality.med { background: var(--accent-warm-dim); color: var(--accent-warm); }
.wm-quality.lo { background: var(--signal-risk-dim); color: var(--signal-risk); }
.wm-sub {
  font-size: 11.5px;
  color: var(--fg-muted);
  margin-top: 2px;
  line-height: 1.4;
}
.wm-actions {
  display: flex; gap: 6px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.wm-action {
  font-size: 11px; font-weight: 700;
  color: var(--fg-secondary);
  padding: 7px 11px;
  border-radius: var(--radius-sm);
  background: var(--surface-elevated);
  border: 1px solid var(--line-default);
  transition: var(--dur-micro) var(--ease-out);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
}
.wm-action:hover { background: var(--surface-interactive); color: var(--fg-primary); }
.wm-action.is-primary {
  background: var(--accent-warm); color: #0A0A0A;
  border-color: var(--accent-warm);
}
.wm-action.is-primary:hover {
  background: var(--accent-warm-hi);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--accent-warm-glow);
}
.wm-chip-live {
  font-size: 9px; font-weight: 800;
  letter-spacing: 0.1em;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--accent-warm); color: #0A0A0A;
  display: inline-flex; align-items: center; gap: 4px;
}
.wm-chip-live::before {
  content: ""; width: 5px; height: 5px;
  border-radius: 50%; background: #0A0A0A;
  animation: density-pulse 1.2s ease-in-out infinite;
}

/* Mobile — week strip becomes horizontal scroll */
@media (max-width: 767px) {
  .week-card { padding: 14px; }
  .week-card-head { gap: 10px; }
  .week-strip {
    grid-template-columns: repeat(7, minmax(64px, 1fr));
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--sp-sm));
    padding-left: var(--sp-sm); padding-right: var(--sp-sm);
  }
  .day-col { padding: 10px 8px; scroll-snap-align: center; }
  .day-num { font-size: 16px; }
  .week-meeting {
    grid-template-columns: 64px 4px 1fr;
    gap: 10px; padding: 10px;
  }
  .wm-actions { grid-column: 1 / -1; justify-content: flex-start; padding-top: 8px; border-top: 1px solid var(--line-hairline); margin-top: 4px; }
  .wm-action { padding: 8px 12px; font-size: 11.5px; }
}

/* Live banner (when meeting is starting) */
.live-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--accent-warm-dim);
  border: 1px solid var(--accent-warm-bd);
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-md);
}
.live-banner .pulse-dot.is-warm { width: 8px; height: 8px; }
.live-banner-text {
  flex: 1;
  font-size: 12.5px; font-weight: 600;
  color: var(--accent-warm);
}
.live-banner .btn { height: 32px; padding: 0 14px; font-size: 12px; }

/* ===== Mobile bottom tab bar (single source of truth) ===== */
.app-tabbar {
  display: none;  /* hidden on desktop */
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 64px;
  padding-bottom: env(safe-area-inset-bottom, 0);
  background: rgba(7,8,10,0.94);
  border-top: 1px solid var(--line-default);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: var(--z-raised);
}
.app-tabbar-item {
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
  padding: 10px 0;
  color: var(--fg-muted);
  transition: color var(--dur-micro) var(--ease-out);
  text-decoration: none;
}
.app-tabbar-item.is-active { color: var(--accent-warm); }
.app-tabbar-item svg { width: 18px; height: 18px; stroke-width: 1.8; }
.app-tabbar-item .label { font-size: 10px; font-weight: 600; }
.app-tabbar-fab {
  place-self: center;
  margin-top: -22px;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-warm), var(--accent-warm-hi));
  color: #0A0A0A;
  display: grid; place-items: center;
  box-shadow: 0 8px 24px var(--accent-warm-glow);
  border: 2px solid var(--surface-base);
  cursor: pointer;
}
.app-tabbar-fab svg { width: 22px; height: 22px; stroke-width: 2.2; }

/* ===== Dashboard responsive ===== */

/* Tablet — 768-1023: rail still visible but content stacks */
@media (max-width: 1023px) {
  .metric-row { grid-template-columns: 1fr; }
  .dashboard-row { grid-template-columns: 1fr; }
  .micro-stats { grid-template-columns: repeat(4, 1fr); }
  .insights-lane { grid-auto-columns: minmax(260px, 1fr); }
  .next-action { padding: 16px 18px; }
  .next-action-actions .btn { padding: 0 14px; height: 42px; font-size: 13px; }
  .headline-metric { padding: 20px 22px; }
  .ask-dock { display: none; } /* save room — Ask is in tabbar / FAB on app shell anyway */
}

/* Phone — 767 and below: rail hides, tabbar shows, content tightens */
@media (max-width: 767px) {
  .app-rail { display: none; }
  .app-shell { padding-left: 0; padding-bottom: 72px; }
  .app-topbar { height: 60px; padding: 0 var(--sp-md); gap: 10px; }
  .app-topbar-brand { display: block; }
  .app-greeting .meta { display: none; }
  .app-greeting .hello { font-size: 13px; }
  .cmdk { display: none; }
  .app-bell { width: 36px; height: 36px; }
  .app-tabbar { display: grid; }

  .app-content { padding: var(--sp-md); }
  .live-banner { flex-wrap: wrap; gap: 10px; padding: 10px 12px; }
  .live-banner-text { flex-basis: 100%; order: 1; }
  .live-banner .pulse-dot.is-warm { order: 0; }
  .live-banner .btn { order: 2; width: 100%; height: 40px; }

  .next-action { padding: 14px; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
  .next-action-icon { width: 36px; height: 36px; border-radius: 10px; }
  .next-action-title { font-size: 15px; }
  .next-action-actions { width: 100%; }
  .next-action-actions .btn { flex: 1; height: 44px; padding: 0 14px; font-size: 13px; }
  .next-action::before { display: none; } /* drop decorative gradient on small screens */

  .lane-head { margin: var(--sp-lg) 0 var(--sp-sm); }
  .insights-lane {
    grid-auto-columns: 86%;
    scroll-padding: 0 var(--sp-md);
    padding: 0 var(--sp-md) var(--sp-xs);
    margin: 0 calc(var(--sp-md) * -1);
  }
  .insight-card { padding: 16px; }

  .micro-stats { grid-template-columns: repeat(2, 1fr); padding: 8px; }
  .micro-stat { padding: 10px; }
  .micro-stat-value { font-size: 16px; }

  .headline-metric { padding: 18px 20px; }
  .metric-value { font-size: 38px; }

  .panel-card-body { padding: 4px 4px 8px; }
  .meeting-row { padding: 10px 12px; gap: 10px; }
  .meeting-time { min-width: 56px; font-size: 12px; }
  .meeting-title { font-size: 13px; }
  .meeting-sub { font-size: 11px; }
  .page-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "url cvr"
      "leads cvr";
    gap: 4px 10px;
    padding: 10px 12px;
  }
  .page-row .url { grid-area: url; font-size: 11px; }
  .page-row > div:nth-child(2) { grid-area: cvr; }
  .page-row .leads-count { grid-area: leads; font-size: 10.5px; }
}

/* ==========================================================================
   23. LANDING / DIRECTORY — public canvas shell
   ========================================================================== */
.public-topbar {
  position: sticky; top: 0;
  z-index: var(--z-raised);
  height: 72px;
  background: rgba(7,8,10,0.72);
  backdrop-filter: saturate(1.4) blur(16px);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  border-bottom: 1px solid var(--line-hairline);
}
.public-topbar-row {
  max-width: 1280px; margin: 0 auto;
  height: 100%;
  padding: 0 var(--sp-lg);
  display: flex; align-items: center;
  gap: var(--sp-md);
}
.public-nav {
  display: flex; align-items: center; gap: 4px;
  margin-left: auto;
}
.public-nav a {
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 500;
  color: var(--fg-muted);
  transition: var(--dur-micro) var(--ease-out);
}
.public-nav a:hover { color: var(--fg-primary); background: var(--surface-raised); }
.public-nav a.is-active { color: var(--accent-warm); }
.public-nav .btn { margin-left: 8px; }

.shell-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--sp-lg);
}
.shell-container.is-wide { max-width: 1280px; }

/* Hero */
.hero {
  padding: var(--sp-2xl) 0 var(--sp-xl);
  text-align: center;
  position: relative;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 22px;
  padding: 6px 14px;
  background: var(--accent-warm-dim);
  border: 1px solid var(--accent-warm-bd);
  border-radius: var(--radius-pill);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-warm);
}
.hero h1 {
  font-size: clamp(36px, 5.6vw, 56px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--fg-primary);
  margin-bottom: 18px;
  max-width: 14ch;
  margin-left: auto; margin-right: auto;
}
.hero h1 .accent { color: var(--accent-warm); }
.hero-sub {
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.6;
  color: var(--fg-secondary);
  max-width: 42ch;
  margin: 0 auto var(--sp-lg);
}

/* Live stat strip */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 720px;
  margin: var(--sp-lg) auto 0;
}
.stat-tile {
  padding: 14px 16px;
  background: var(--surface-raised);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-md);
  text-align: left;
}
.stat-tile-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 6px;
}
.stat-tile-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px; font-weight: 800;
  color: var(--fg-primary);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-tile.is-warm .stat-tile-value { color: var(--accent-warm); }
.stat-tile.is-ai .stat-tile-value { color: var(--accent-ai); }

/* Search bar */
.search-bar {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  margin: var(--sp-2xl) auto var(--sp-md);
  max-width: 840px;
  padding: 8px;
  background: var(--surface-raised);
  border: 1px solid var(--line-default);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
}
.search-bar .input-wrap > .input {
  height: 48px;
  border: 0; background: transparent;
  padding-left: 44px;
}
.search-bar .input-wrap > .input:focus { background: var(--surface-base); box-shadow: none; }
.search-bar .btn { height: 48px; padding: 0 26px; }

/* Filter chips strip */
.filter-strip {
  display: flex; gap: 8px;
  overflow-x: auto;
  padding: 4px 0 var(--sp-md);
  scroll-snap-type: x proximity;
}
.filter-strip::-webkit-scrollbar { display: none; }
.filter-strip { scrollbar-width: none; }
.filter-chip {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px;
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  border: 1px solid var(--line-default);
  color: var(--fg-secondary);
  font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  transition: var(--dur-micro) var(--ease-out);
  scroll-snap-align: start;
}
.filter-chip:hover { color: var(--fg-primary); border-color: var(--line-strong); }
.filter-chip.is-active {
  background: var(--accent-warm-dim);
  border-color: var(--accent-warm-bd);
  color: var(--accent-warm);
}
.filter-chip .count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700;
  color: var(--fg-dim);
}
.filter-chip.is-active .count { color: var(--accent-warm); }

/* Partner card grid */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--sp-md);
  margin: var(--sp-md) 0 var(--sp-2xl);
}
.partner-card {
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
  padding: 22px;
  background: var(--surface-raised);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-lg);
  transition: var(--dur-short) var(--ease-out);
  cursor: pointer;
  text-decoration: none;
}
.partner-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-default);
  box-shadow: var(--shadow-md);
}
.partner-card-head {
  display: flex; align-items: flex-start; gap: 12px;
}
.partner-avatar {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent-warm-dim), var(--surface-elevated));
  border: 1px solid var(--accent-warm-bd);
  color: var(--accent-warm);
  display: grid; place-items: center;
  font-size: 18px; font-weight: 800;
  flex-shrink: 0;
  letter-spacing: -0.01em;
}
.partner-name {
  font-size: 16px; font-weight: 700;
  color: var(--fg-primary);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.partner-niche {
  font-size: 12px; color: var(--fg-muted);
  margin-top: 3px;
  line-height: 1.4;
}
.partner-quality {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 800;
  color: var(--accent-ai);
  padding: 4px 9px;
  background: var(--accent-ai-dim);
  border: 1px solid var(--accent-ai-bd);
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}
.partner-quality::before { content: "✦"; font-size: 9px; }
.partner-usp {
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-secondary);
}
.partner-meta {
  display: flex; flex-wrap: wrap; gap: 10px;
  font-size: 11.5px; color: var(--fg-muted);
}
.partner-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--fg-quiet); align-self: center; }
.partner-meta .stars { color: var(--accent-warm); font-weight: 700; }
.partner-card-foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line-hairline);
  display: flex; align-items: center; justify-content: space-between;
}
.partner-foot-meta { font-size: 11.5px; color: var(--fg-muted); }
.partner-card .btn { height: 36px; padding: 0 16px; font-size: 12.5px; }

/* Become a partner band */
.become-partner-band {
  margin: var(--sp-2xl) 0;
  padding: 36px 32px;
  background: var(--surface-raised);
  border: 1px solid var(--line-default);
  border-radius: var(--radius-xl);
  display: grid;
  grid-template-columns: 1.5fr auto;
  gap: var(--sp-lg);
  align-items: center;
  position: relative;
  overflow: hidden;
}
.become-partner-band::before {
  content: "";
  position: absolute; top: -60px; right: -60px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-warm-dim), transparent 70%);
  pointer-events: none;
}
.become-partner-band > * { position: relative; }
.band-eyebrow {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-warm);
  margin-bottom: 10px;
}
.band-title {
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 800;
  color: var(--fg-primary);
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin-bottom: 8px;
}
.band-sub {
  font-size: 14.5px; color: var(--fg-secondary);
  line-height: 1.55;
  max-width: 56ch;
}
.band-actions { display: flex; gap: 10px; flex-shrink: 0; }

/* Footer */
.public-footer {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin-top: var(--sp-2xl);
  padding: var(--sp-2xl) var(--sp-lg) var(--sp-xl);
  border-top: 1px solid var(--line-default);
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.02) 100%);
}
.public-footer-row {
  max-width: 1100px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: var(--sp-xl);
}
/* Directory uses the wider canvas — footer follows */
body[data-page="landing"] .public-footer-row,
body[data-page="landing"] .footer-bottom { max-width: 1280px; }
.footer-col h4 {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 14px;
}
.footer-col a {
  display: block;
  font-size: 13px; color: var(--fg-secondary);
  padding: 4px 0;
  transition: color var(--dur-micro) var(--ease-out);
}
.footer-col a:hover { color: var(--fg-primary); }
.footer-brand .auth-slogan { margin-top: 12px; }
.footer-bottom {
  max-width: 1100px; margin: var(--sp-xl) auto 0;
  padding-top: var(--sp-md);
  border-top: 1px solid var(--line-hairline);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11.5px; color: var(--fg-dim);
}

/* Landing/Vetting/Booking responsive */
@media (max-width: 767px) {
  .public-topbar-row { height: 60px; padding: 0 var(--sp-md); }
  .public-nav { gap: 0; }
  .public-nav a { display: none; }
  .public-nav .btn { display: inline-flex; }
  .hero { padding: var(--sp-2xl) 0 var(--sp-xl); }
  .stat-strip { grid-template-columns: 1fr; gap: 8px; }
  .search-bar {
    grid-template-columns: 1fr;
    border-radius: var(--radius-lg);
    padding: 10px;
  }
  .search-bar .btn { height: 52px; }
  .partner-grid { grid-template-columns: 1fr; }
  .become-partner-band {
    grid-template-columns: 1fr;
    padding: 24px 20px;
  }
  .band-actions { width: 100%; flex-direction: column; }
  .band-actions .btn { width: 100%; }
  .public-footer-row { grid-template-columns: 1fr 1fr; gap: var(--sp-lg); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; gap: 8px; align-items: flex-start; }
}

/* ==========================================================================
   24. VETTING — evidence tile + step rail + reject tiles + loop + FAQ
   ========================================================================== */

.evidence-tile {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: var(--sp-xl) auto 0;
  max-width: 920px;
  background: var(--surface-raised);
  border: 1px solid var(--line-default);
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
}
.evidence-tile::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 30%);
  pointer-events: none;
}
.evidence-cell {
  padding: 28px 24px;
  text-align: center;
  position: relative;
}
.evidence-cell + .evidence-cell { border-left: 1px solid var(--line-hairline); }
.evidence-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 14px;
}
.evidence-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(34px, 4vw, 44px);
  font-weight: 800;
  color: var(--fg-primary);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.evidence-cell:first-child .evidence-value { color: var(--fg-secondary); }
.evidence-cell:nth-child(2) .evidence-value { color: var(--accent-ai); }
.evidence-cell:last-child .evidence-value { color: var(--accent-warm); }
.evidence-sub {
  font-size: 11.5px; color: var(--fg-muted);
  margin-top: 8px;
}

/* Section blocks */
.section-block {
  margin: var(--sp-xl) 0;
  text-align: center;
}
.section-eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-warm);
  margin-bottom: 12px;
}
.section-block h2 {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--fg-primary);
  margin: 0 auto 14px;
  max-width: 22ch;
}
.section-block .lead {
  font-size: 15px; line-height: 1.65;
  color: var(--fg-secondary);
  max-width: 60ch;
  margin: 0 auto var(--sp-lg);
}
/* Inside a section-block, content blocks (grids, rails, faqs) revert to left-aligned */
.section-block .steps-row,
.section-block .reject-grid,
.section-block .loop-flow,
.section-block .faq-list,
.section-block .step-pane-body,
.section-block .step-pane-list { text-align: left; }

/* 4-step vetting layout: rail (240) + panel */
.steps-row {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--sp-xl);
  margin-top: var(--sp-lg);
}
.steps-rail {
  display: flex; flex-direction: column;
  gap: 4px;
}
.steps-rail-item {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--dur-micro) var(--ease-out);
  border: 1px solid transparent;
}
.steps-rail-item:hover { background: var(--surface-raised); }
.steps-rail-item.is-active {
  background: var(--surface-raised);
  border-color: var(--line-default);
}
.steps-rail-item.is-active::before {
  content: ""; position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  background: var(--accent-warm);
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 8px var(--accent-warm-glow);
}
.rail-step-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--fg-dim);
}
.steps-rail-item.is-active .rail-step-num { color: var(--accent-warm); }
.rail-step-title {
  font-size: 14px; font-weight: 600;
  color: var(--fg-secondary);
  line-height: 1.3;
}
.steps-rail-item.is-active .rail-step-title { color: var(--fg-primary); font-weight: 700; }

.steps-panel {
  background: var(--surface-raised);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  min-height: 320px;
}
.vetting-pane { display: none; }
.vetting-pane.is-active {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: step-fade var(--dur-medium) var(--ease-out) both;
}

/* ==========================================================================
   27. LEADS — KPI strip + table + side-sheet (transcript view)
   ========================================================================== */

/* KPI strip */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-md);
  margin-bottom: var(--sp-lg);
}
.kpi-card {
  padding: 16px 18px;
  background: var(--surface-raised);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-md);
}
.kpi-label {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 8px;
  display: inline-flex; align-items: center; gap: 6px;
}
.kpi-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 24px; font-weight: 800;
  color: var(--fg-primary);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.kpi-delta {
  font-size: 11px; font-weight: 700;
  margin-top: 6px;
  color: var(--signal-positive);
}
.kpi-delta.is-down { color: var(--signal-risk); }
.kpi-delta.is-neutral { color: var(--fg-muted); }

/* Toolbar row (filter chips + search) */
.toolbar-row {
  display: flex; align-items: center;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-md);
  flex-wrap: wrap;
}
.toolbar-chips {
  display: flex; gap: 6px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.toolbar-search {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px;
  padding: 0 14px 0 12px;
  background: var(--surface-raised);
  border: 1px solid var(--line-default);
  border-radius: var(--radius-sm);
  color: var(--fg-muted);
  font-size: 12.5px;
  min-width: 240px;
  cursor: text;
  transition: var(--dur-micro) var(--ease-out);
}
.toolbar-search:hover { border-color: var(--line-strong); color: var(--fg-primary); }
.toolbar-search svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Data table */
.data-table-wrap {
  background: var(--surface-raised);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--sp-lg);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table thead th {
  text-align: left;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-muted);
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-hairline);
  background: var(--surface-base);
  white-space: nowrap;
}
.data-table thead th.col-num { text-align: right; }
.data-table tbody tr {
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out);
}
.data-table tbody tr:hover { background: var(--surface-interactive); }
.data-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-hairline);
  vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody td.col-num { text-align: right; font-variant-numeric: tabular-nums; }
.cell-name {
  font-weight: 700; color: var(--fg-primary);
  letter-spacing: -0.005em;
}
.cell-name-sub {
  display: block;
  font-size: 11.5px; font-weight: 500;
  color: var(--fg-muted);
  margin-top: 2px;
}
.cell-quality {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 800;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--surface-elevated);
  color: var(--fg-secondary);
}
.cell-quality::before { content: "✦"; font-size: 9px; }
.cell-quality.hi { background: var(--signal-positive-dim); color: var(--signal-positive); }
.cell-quality.med { background: var(--accent-warm-dim); color: var(--accent-warm); }
.cell-quality.lo { background: var(--signal-risk-dim); color: var(--signal-risk); }
.cell-when {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--fg-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cell-status {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cell-status.is-new { background: var(--accent-ai-dim); color: var(--accent-ai); }
.cell-status.is-booked { background: var(--accent-warm-dim); color: var(--accent-warm); }
.cell-status.is-completed { background: var(--signal-positive-dim); color: var(--signal-positive); }
.cell-status.is-pending { background: var(--signal-caution-dim); color: var(--signal-caution); }
.cell-status.is-lost { background: var(--signal-risk-dim); color: var(--signal-risk); }
.cell-action {
  font-size: 11px; font-weight: 700;
  padding: 6px 11px;
  border-radius: var(--radius-sm);
  background: var(--surface-elevated);
  border: 1px solid var(--line-default);
  color: var(--fg-secondary);
  cursor: pointer;
  transition: var(--dur-micro) var(--ease-out);
  white-space: nowrap;
}
.cell-action:hover {
  border-color: var(--accent-warm-bd);
  color: var(--accent-warm);
  background: var(--surface-raised);
}

/* Side sheet (transcript view) */
.side-sheet {
  position: fixed; inset: 0;
  z-index: var(--z-modal);
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-medium) var(--ease-out);
  display: flex;
  justify-content: flex-end;
}
.side-sheet.is-open { opacity: 1; pointer-events: auto; }
.side-sheet-panel {
  width: min(720px, 92vw);
  height: 100%;
  background: var(--surface-base);
  border-left: 1px solid var(--line-strong);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--dur-medium) var(--ease-out);
  box-shadow: -24px 0 80px rgba(0,0,0,0.55);
  overflow: hidden;
}
.side-sheet.is-open .side-sheet-panel { transform: translateX(0); }
.side-sheet-head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--line-hairline);
  background: var(--surface-raised);
  display: flex; align-items: flex-start; gap: 16px;
  flex-shrink: 0;
}
.side-sheet-titles { flex: 1; min-width: 0; }
.side-sheet-title {
  font-size: 18px; font-weight: 800;
  color: var(--fg-primary);
  letter-spacing: -0.015em;
  margin-bottom: 4px;
}
.side-sheet-sub {
  font-size: 12px;
  color: var(--fg-muted);
  display: flex; gap: 8px; align-items: center;
  flex-wrap: wrap;
}
.side-sheet-sub .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--fg-quiet); }
.side-sheet-close {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  background: var(--surface-elevated);
  border: 1px solid var(--line-default);
  color: var(--fg-muted);
  display: grid; place-items: center;
  cursor: pointer;
  transition: var(--dur-micro) var(--ease-out);
  flex-shrink: 0;
}
.side-sheet-close:hover { color: var(--signal-risk); border-color: var(--signal-risk-bd); }
.side-sheet-close svg { width: 14px; height: 14px; stroke-width: 2.4; }
.side-sheet-body {
  flex: 1;
  padding: 22px;
  overflow-y: auto;
}
.side-sheet-section { margin-bottom: var(--sp-lg); }
.side-sheet-section:last-child { margin-bottom: 0; }
.side-sheet-section h4 {
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.side-sheet-section h4 .pulse-dot { width: 5px; height: 5px; }
.summary-card {
  padding: 16px 18px;
  background: var(--accent-ai-dim);
  border: 1px solid var(--accent-ai-bd);
  border-left: 3px solid var(--accent-ai);
  border-radius: var(--radius-md);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--fg-secondary);
}
.summary-card strong { color: var(--fg-primary); font-weight: 700; }
.metric-pills {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.metric-pill {
  flex: 1; min-width: 130px;
  padding: 12px 14px;
  background: var(--surface-raised);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-md);
}
.metric-pill-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 4px;
}
.metric-pill-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 17px; font-weight: 800;
  color: var(--fg-primary);
  letter-spacing: -0.01em;
}
.metric-pill-value.hi { color: var(--signal-positive); }
.metric-pill-value.med { color: var(--accent-warm); }
.action-list {
  display: flex; flex-direction: column;
  gap: 8px;
  list-style: none; padding: 0;
}
.action-list li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  background: var(--surface-raised);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--fg-primary);
}
.action-list .check {
  width: 16px; height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--line-strong);
  display: grid; place-items: center;
  margin-top: 1px;
  flex-shrink: 0;
  cursor: pointer;
  transition: var(--dur-micro) var(--ease-out);
}
.action-list li.is-done .check {
  background: var(--signal-positive);
  border-color: var(--signal-positive);
}
.action-list li.is-done .check svg { opacity: 1; }
.action-list li.is-done .body { color: var(--fg-muted); text-decoration: line-through; }
.action-list .check svg { width: 10px; height: 10px; color: #0A0A0A; opacity: 0; stroke-width: 3; }
.keyword-cloud {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.keyword-chip {
  padding: 4px 10px;
  background: var(--accent-warm-dim);
  border: 1px solid var(--accent-warm-bd);
  color: var(--accent-warm);
  border-radius: var(--radius-pill);
  font-size: 11.5px; font-weight: 600;
}
.transcript {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  line-height: 1.7;
  background: var(--surface-elevated);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  max-height: 360px;
  overflow-y: auto;
}
.transcript-line { margin-bottom: 12px; }
.transcript-line:last-child { margin-bottom: 0; }
.transcript .speaker {
  font-weight: 800;
  color: var(--accent-warm);
  letter-spacing: 0.02em;
}
.transcript .speaker.is-lead { color: var(--accent-ai); }
.transcript .timestamp {
  font-size: 10px;
  color: var(--fg-dim);
  margin-left: 6px;
}
.transcript .body-line {
  display: block;
  margin-top: 4px;
  color: var(--fg-secondary);
}

body.sheet-open { overflow: hidden; }

/* Feedback cards (Submit feedback flow on Dashboard) */
.feedback-card {
  margin-bottom: 14px;
  padding: 16px;
  background: var(--surface-raised);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-short) var(--ease-out);
}
.feedback-card.is-marked-won { border-color: var(--signal-positive-bd); }
.feedback-card.is-marked-pending { border-color: var(--signal-caution-bd); }
.feedback-card.is-marked-lost { border-color: var(--signal-risk-bd); }
.feedback-card-head { margin-bottom: 12px; }
.feedback-card-name { font-size: 14.5px; font-weight: 800; color: var(--fg-primary); letter-spacing: -0.005em; }
.feedback-card-sub { margin-top: 3px; font-size: 12px; color: var(--fg-muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.feedback-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.feedback-option {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 8px;
  background: var(--surface-base);
  border: 1px solid var(--line-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--dur-micro) var(--ease-out);
  font-size: 12px; font-weight: 700;
  color: var(--fg-secondary);
}
.feedback-option:hover { border-color: var(--line-strong); color: var(--fg-primary); }
.feedback-option .feedback-emoji {
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--surface-elevated);
  font-weight: 800;
  font-size: 13px;
  transition: var(--dur-micro);
}
.feedback-option[data-outcome="won"]:hover, .feedback-option[data-outcome="won"].is-active {
  border-color: var(--signal-positive); color: var(--signal-positive); background: var(--signal-positive-dim);
}
.feedback-option[data-outcome="won"].is-active .feedback-emoji { background: var(--signal-positive); color: #0A0A0A; }
.feedback-option[data-outcome="pending"]:hover, .feedback-option[data-outcome="pending"].is-active {
  border-color: var(--signal-caution); color: var(--signal-caution); background: var(--signal-caution-dim);
}
.feedback-option[data-outcome="pending"].is-active .feedback-emoji { background: var(--signal-caution); color: #0A0A0A; }
.feedback-option[data-outcome="lost"]:hover, .feedback-option[data-outcome="lost"].is-active {
  border-color: var(--signal-risk); color: var(--signal-risk); background: var(--signal-risk-dim);
}
.feedback-option[data-outcome="lost"].is-active .feedback-emoji { background: var(--signal-risk); color: #fff; }
.feedback-notes {
  width: 100%;
  padding: 10px 12px;
  background: var(--surface-base);
  border: 1px solid var(--line-default);
  border-radius: var(--radius-sm);
  color: var(--fg-primary);
  font-family: inherit;
  font-size: 12.5px;
  resize: vertical;
  outline: none;
}
.feedback-notes:focus { border-color: var(--accent-warm); box-shadow: 0 0 0 3px var(--accent-warm-dim); }
.feedback-notes::placeholder { color: var(--fg-dim); }

/* Quality block (Great / Okay / Poor) within feedback card */
.feedback-quality { margin-bottom: 10px; }
.feedback-section-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 6px;
}
.feedback-quality-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.quality-btn {
  padding: 9px 8px;
  background: var(--surface-base);
  border: 1px solid var(--line-default);
  border-radius: var(--radius-sm);
  color: var(--fg-secondary);
  font-family: inherit;
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  transition: var(--dur-micro) var(--ease-out);
}
.quality-btn:hover { border-color: var(--line-strong); color: var(--fg-primary); }
.quality-btn.is-active {
  border-color: var(--accent-warm);
  background: var(--accent-warm-dim);
  color: var(--accent-warm);
}

/* Lost-reason chip grid (only shown when outcome = lost) */
.feedback-lost-reasons { margin-bottom: 10px; }
.lost-reason-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.lost-chip {
  padding: 8px 6px;
  background: var(--surface-base);
  border: 1px solid var(--line-default);
  border-radius: var(--radius-sm);
  color: var(--fg-secondary);
  font-family: inherit;
  font-size: 11px; font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: var(--dur-micro) var(--ease-out);
  min-width: 0;
  word-break: break-word;
}
.lost-chip:hover { border-color: var(--line-strong); color: var(--fg-primary); }
.lost-chip.is-active {
  background: var(--signal-risk-dim);
  border-color: var(--signal-risk);
  color: var(--signal-risk);
}
@media (max-width: 480px) {
  .lost-reason-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Quality chip embedded in feedback-card-sub (replaces inline style) */
.feedback-quality-chip { height: auto; padding: 1px 7px; font-size: 10.5px; }

/* Cancel / Submit actions row (bottom of feedback sheet) */
.feedback-actions-row {
  display: flex; gap: 10px;
  margin-top: 14px; padding-top: 18px;
  border-top: 1px solid var(--line-hairline);
}
.feedback-actions-cancel { flex: 1; }
.feedback-actions-submit { flex: 2; }
@media (max-width: 480px) {
  .feedback-actions-row { flex-direction: column-reverse; }
  .feedback-actions-cancel,
  .feedback-actions-submit { flex: 1 1 auto; width: 100%; }
}

/* ==========================================================================
   Deal Results page — page intro, ROI strip, sections, standalone feedback,
   reported history. All used on Dashboard/feedback.html.
   ========================================================================== */

/* Page intro (title + sub + dashboard back link) */
.page-intro {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
  margin-bottom: var(--sp-lg);
}
.page-intro-text { flex: 1; min-width: 0; }
.page-intro-title {
  font-size: 26px; font-weight: 800;
  color: var(--fg-primary);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 6px;
}
.page-intro-sub {
  font-size: 13.5px;
  color: var(--fg-muted);
  margin: 0;
  max-width: 60ch;
  line-height: 1.5;
}
.page-intro-back { flex-shrink: 0; height: 38px; padding: 0 14px; font-size: 12.5px; }
.page-intro-back svg { width: 14px; height: 14px; }
@media (max-width: 640px) {
  .page-intro { flex-direction: column; gap: 10px; }
  .page-intro-title { font-size: 22px; }
  .page-intro-back { align-self: flex-start; }
}

/* ROI summary strip (4 stats, 1 accented) */
.roi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-sm);
  margin-bottom: var(--sp-xl);
}
.roi-stat {
  padding: 18px 18px 16px;
  background: var(--surface-raised);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
}
.roi-stat.is-accent {
  border-color: var(--accent-warm-bd);
  background: linear-gradient(135deg, var(--surface-raised), var(--accent-warm-dim));
}
.roi-stat-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 8px;
}
.roi-stat.is-accent .roi-stat-label { color: var(--accent-warm); }
.roi-stat-value {
  font-size: 28px; font-weight: 800;
  color: var(--fg-primary);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.roi-stat.is-accent .roi-stat-value { color: var(--accent-warm); }
.roi-stat-suffix { font-size: 18px; margin-left: 2px; opacity: 0.8; }
.roi-stat-meta {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--fg-muted);
}
@media (max-width: 900px) {
  .roi-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .roi-stat { padding: 14px; }
  .roi-stat-value { font-size: 22px; }
}

/* Sectioned lists (Awaiting / Reported) */
.results-section { margin-bottom: var(--sp-xl); }
.results-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  margin-bottom: var(--sp-md);
  flex-wrap: wrap;
}
.results-section-title {
  font-size: 16px; font-weight: 800;
  color: var(--fg-primary);
  letter-spacing: -0.01em;
  margin: 0;
  display: inline-flex; align-items: center; gap: 8px;
}
.results-section-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--accent-warm-dim);
  border: 1px solid var(--accent-warm-bd);
  color: var(--accent-warm);
  font-size: 11px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.results-section-sub {
  font-size: 12.5px;
  color: var(--fg-muted);
}
.results-list { display: flex; flex-direction: column; gap: 12px; }

/* Standalone feedback card — same DNA as the sheet variant but with extra layout */
.feedback-card.is-standalone {
  margin-bottom: 0;
  padding: 20px;
}
.feedback-card.is-standalone .feedback-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
}
.feedback-card.is-standalone .feedback-card-name { font-size: 15.5px; }
.feedback-card-actions {
  display: flex; justify-content: flex-end;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--line-hairline);
}
.feedback-card-actions .btn-primary { min-width: 160px; }
@media (max-width: 480px) {
  .feedback-card.is-standalone { padding: 16px; }
  .feedback-card.is-standalone .feedback-card-head { flex-wrap: wrap; }
  .feedback-card-actions .btn-primary { width: 100%; min-width: 0; }
}

/* Status pill (used in headers + reported card tags) */
.status-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.status-pill.is-pending {
  background: var(--signal-caution-dim);
  border-color: var(--signal-caution-bd);
  color: var(--signal-caution);
}
.status-pill.is-won {
  background: var(--signal-positive-dim);
  border-color: var(--signal-positive-bd);
  color: var(--signal-positive);
}
.status-pill.is-lost {
  background: var(--signal-risk-dim);
  border-color: var(--signal-risk-bd);
  color: var(--signal-risk);
}
.status-pill.is-quality-good {
  background: var(--signal-positive-dim);
  border-color: var(--signal-positive-bd);
  color: var(--signal-positive);
}
.status-pill.is-lost-reason {
  background: var(--surface-elevated);
  border-color: var(--line-default);
  color: var(--fg-secondary);
}

/* Reported (history) cards — compact, read-only */
.reported-card {
  padding: 16px 18px;
  background: var(--surface-raised);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--line-default);
}
.reported-card.is-won { border-left-color: var(--signal-positive); }
.reported-card.is-lost { border-left-color: var(--signal-risk); }
.reported-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.reported-card-info { flex: 1; min-width: 0; }
.reported-card-name {
  font-size: 14px; font-weight: 700;
  color: var(--fg-primary);
  letter-spacing: -0.005em;
}
.reported-card-meta {
  margin-top: 2px;
  font-size: 12px;
  color: var(--fg-muted);
}
.quality-inline {
  display: inline-flex; align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--accent-warm-dim);
  color: var(--accent-warm);
  font-size: 10.5px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  margin-left: 2px;
}
.reported-card-tags { display: flex; gap: 6px; flex-wrap: wrap; flex-shrink: 0; }
.reported-card-notes {
  margin: 0;
  font-size: 12.5px;
  color: var(--fg-secondary);
  line-height: 1.55;
}
@media (max-width: 480px) {
  .reported-card { padding: 14px; }
  .reported-card-tags { width: 100%; }
}

/* ==========================================================================
   Bookings page — view toggle, monthly calendar grid, day detail panel,
   day-booking cards, list view. All used on Dashboard/bookings.html.
   ========================================================================== */

/* View toggle (Calendar | List) */
.bookings-view-toggle {
  display: inline-flex;
  padding: 4px;
  background: var(--surface-raised);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}
.view-toggle-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border: 0;
  background: transparent;
  color: var(--fg-muted);
  font-family: inherit;
  font-size: 12.5px; font-weight: 700;
  border-radius: calc(var(--radius-md) - 4px);
  cursor: pointer;
  transition: var(--dur-micro) var(--ease-out);
}
.view-toggle-btn svg { width: 14px; height: 14px; stroke-width: 1.8; }
.view-toggle-btn:hover { color: var(--fg-secondary); }
.view-toggle-btn.is-active {
  background: var(--accent-warm-dim);
  color: var(--accent-warm);
}
@media (max-width: 640px) {
  .bookings-view-toggle { width: 100%; }
  .view-toggle-btn { flex: 1; justify-content: center; }
}

/* Bookings view containers (calendar | list) */
.bookings-view { display: none; }
.bookings-view.is-active { display: block; }
.bookings-view[hidden] { display: none; }

/* Month navigation row */
.month-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: var(--sp-md);
}
.month-nav-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: var(--surface-raised);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-md);
  color: var(--fg-secondary);
  cursor: pointer;
  transition: var(--dur-micro) var(--ease-out);
}
.month-nav-btn:hover { border-color: var(--line-strong); color: var(--fg-primary); }
.month-nav-btn svg { width: 18px; height: 18px; }
.month-nav-title {
  display: flex; align-items: center; gap: 12px;
  flex: 1; justify-content: center;
}
.month-nav-title h2 {
  font-size: 17px; font-weight: 800;
  color: var(--fg-primary);
  letter-spacing: -0.01em;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.month-nav-today {
  padding: 5px 12px;
  background: transparent;
  border: 1px solid var(--line-default);
  border-radius: var(--radius-sm);
  color: var(--fg-muted);
  font-family: inherit;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--dur-micro) var(--ease-out);
}
.month-nav-today:hover { border-color: var(--accent-warm); color: var(--accent-warm); }

/* Calendar grid (7 columns) */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: var(--sp-md);
}
.weekday-cell {
  text-align: center;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-muted);
  padding: 8px 0 4px;
}
.day-cell {
  aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  padding: 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--fg-muted);
  cursor: pointer;
  transition: var(--dur-micro) var(--ease-out);
  font-family: inherit;
  position: relative;
  min-width: 0;
}
.day-cell:not(.is-empty):hover {
  background: var(--surface-raised);
  border-color: var(--line-hairline);
  color: var(--fg-secondary);
}
.day-cell.is-empty { cursor: default; pointer-events: none; }
.day-cell:has(.day-dots) {
  background: var(--surface-raised);
  border-color: var(--line-hairline);
  color: var(--fg-secondary);
}
.day-cell.is-today {
  border-color: var(--line-strong);
  color: var(--fg-primary);
  font-weight: 700;
}
.day-cell.is-selected {
  background: var(--accent-warm-dim);
  border-color: var(--accent-warm);
  color: var(--accent-warm);
  font-weight: 800;
}
.day-num {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.day-dots { display: inline-flex; gap: 3px; }
.day-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  display: inline-block;
}
.day-dot.is-scheduled { background: var(--accent-warm); }
.day-dot.is-completed { background: var(--signal-positive); }
.day-dot.is-cancelled { background: var(--signal-risk); }
.day-count {
  position: absolute;
  top: 4px; right: 6px;
  font-size: 9px; font-weight: 800;
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  .calendar-grid { gap: 3px; }
  .day-cell { padding: 2px; gap: 2px; border-radius: var(--radius-sm); }
  .day-num { font-size: 11.5px; }
  .day-dot { width: 4px; height: 4px; }
  .day-count { top: 2px; right: 3px; font-size: 8px; }
}

/* Calendar legend */
.calendar-legend {
  display: flex; align-items: center; justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 11px; font-weight: 600;
  color: var(--fg-muted);
  margin-bottom: var(--sp-lg);
}
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-item .day-dot { width: 7px; height: 7px; }

/* Day detail panel */
.day-detail-panel {
  background: var(--surface-raised);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
}
.day-detail-panel-head {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: var(--sp-md);
  flex-wrap: wrap;
}
.day-detail-panel-head h3 {
  font-size: 15px; font-weight: 800;
  color: var(--fg-primary);
  letter-spacing: -0.01em;
  margin: 0;
}
.day-detail-panel-meta {
  font-size: 12.5px;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
.day-detail-list { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 480px) {
  .day-detail-panel { padding: 16px; border-radius: var(--radius-md); }
}

/* Day booking row (used in calendar detail + list view) */
.day-booking {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px; align-items: center;
  padding: 14px 16px;
  background: var(--surface-base);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-micro) var(--ease-out);
}
.day-booking:hover { border-color: var(--line-default); }
.day-booking.is-completed { border-left: 3px solid var(--signal-positive); }
.day-booking.is-live { border-left: 3px solid var(--accent-warm); background: linear-gradient(90deg, var(--accent-warm-dim), transparent 30%); }
.day-booking.is-scheduled { border-left: 3px solid var(--line-strong); }
.day-booking.is-cancelled { border-left: 3px solid var(--signal-risk); opacity: 0.6; }

.day-booking-time {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.day-booking-time-icon {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: var(--surface-elevated);
  border-radius: var(--radius-sm);
  color: var(--fg-muted);
  flex-shrink: 0;
}
.day-booking-time-icon.is-warm {
  background: var(--accent-warm-dim);
  color: var(--accent-warm);
  border: 1px solid var(--accent-warm-bd);
}
.day-booking-time-icon svg { width: 16px; height: 16px; }
.day-booking-time-start {
  font-size: 13px; font-weight: 700;
  color: var(--fg-primary);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.day-booking-time-end {
  font-size: 11px;
  color: var(--fg-muted);
  margin: 2px 0 0;
  font-variant-numeric: tabular-nums;
}

.day-booking-info { min-width: 0; }
.day-booking-name {
  font-size: 13.5px; font-weight: 700;
  color: var(--fg-primary);
  margin: 0 0 2px;
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  letter-spacing: -0.005em;
}
.day-booking-contact {
  font-size: 11.5px;
  color: var(--fg-muted);
  margin: 0;
  overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}

.day-booking-actions {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.day-booking-action {
  font-size: 11.5px; font-weight: 700;
  color: var(--accent-warm);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--accent-warm-dim);
  border: 1px solid var(--accent-warm-bd);
  transition: var(--dur-micro) var(--ease-out);
}
.day-booking-action:hover { background: var(--accent-warm); color: #0A0A0A; }
.day-booking-action-btn { height: 36px; padding: 0 14px; font-size: 12.5px; }
.day-booking-icon-btn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--surface-elevated);
  border: 1px solid var(--line-default);
  border-radius: var(--radius-sm);
  color: var(--fg-secondary);
  cursor: pointer;
  transition: var(--dur-micro) var(--ease-out);
}
.day-booking-icon-btn svg { width: 14px; height: 14px; }
.day-booking-icon-btn.is-positive:hover {
  background: var(--signal-positive-dim);
  border-color: var(--signal-positive);
  color: var(--signal-positive);
}
.day-booking-icon-btn.is-risk:hover {
  background: var(--signal-risk-dim);
  border-color: var(--signal-risk);
  color: var(--signal-risk);
}
.day-booking-icon-btn[hidden] { display: none; }

/* Status-pill variants used in bookings */
.status-pill.is-scheduled {
  background: var(--surface-elevated);
  border-color: var(--line-default);
  color: var(--fg-secondary);
}
.status-pill.is-completed {
  background: var(--signal-positive-dim);
  border-color: var(--signal-positive-bd);
  color: var(--signal-positive);
}
.status-pill.is-live {
  background: var(--accent-warm-dim);
  border-color: var(--accent-warm-bd);
  color: var(--accent-warm);
  position: relative; padding-left: 18px;
}
.status-pill.is-live::before {
  content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-warm);
  box-shadow: 0 0 0 0 var(--accent-warm);
  animation: pulse-warm 1.6s infinite;
}
.status-pill.is-cancelled {
  background: var(--signal-risk-dim);
  border-color: var(--signal-risk-bd);
  color: var(--signal-risk);
}

@media (max-width: 640px) {
  .day-booking {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 10px 12px;
    padding: 12px;
  }
  .day-booking-time { grid-row: 1; grid-column: 1; }
  .day-booking-info { grid-row: 1; grid-column: 2; }
  .day-booking-actions {
    grid-row: 2; grid-column: 1 / -1;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .day-booking-action-btn { width: 100%; }
  .day-booking-contact { white-space: normal; }
}

/* List view controls + day groups */
.list-view-controls { margin-bottom: var(--sp-md); }
.list-view-filter {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.list-day-group { margin-bottom: var(--sp-lg); }
.list-day-group-head {
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 10px;
}
.list-day-group .day-detail-list,
.list-day-group { display: flex; flex-direction: column; gap: 10px; }

/* ==========================================================================
   Billing & Plan page — current plan, tier comparison, upgrade preview,
   payment method. All used on Dashboard/billing.html.
   ========================================================================== */

/* Generic billing card surface */
.billing-card {
  padding: 22px 24px;
  background: var(--surface-raised);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp-xl);
}
@media (max-width: 480px) { .billing-card { padding: 18px; border-radius: var(--radius-md); } }

/* Current plan summary card */
.billing-current-plan {
  border-color: var(--accent-warm-bd);
  background: linear-gradient(135deg, var(--surface-raised), var(--accent-warm-dim) 200%);
}
.billing-current-plan-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-bottom: var(--sp-md);
}
.billing-current-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-warm);
  margin-bottom: 6px;
}
.billing-current-name {
  font-size: 28px; font-weight: 800;
  color: var(--fg-primary);
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  line-height: 1;
}
.billing-current-desc {
  font-size: 13px;
  color: var(--fg-muted);
  margin: 0;
  max-width: 50ch;
  line-height: 1.5;
}
.billing-current-price {
  text-align: right; flex-shrink: 0;
  display: flex; flex-direction: column;
  gap: 6px; align-items: flex-end;
}
.billing-price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.billing-price-row.is-recurring {
  padding-top: 8px;
  border-top: 1px dashed var(--line-hairline);
  width: 100%;
  justify-content: flex-end;
}
.billing-price-amount {
  font-size: 28px; font-weight: 800;
  color: var(--fg-primary);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.billing-price-recurring {
  font-size: 18px; font-weight: 800;
  color: var(--accent-warm);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.billing-price-suffix {
  font-size: 12px; color: var(--fg-muted);
  letter-spacing: 0.01em;
}
.billing-renews {
  display: block;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--fg-muted);
}
.billing-renews strong { color: var(--accent-warm); font-weight: 700; }
@media (max-width: 640px) {
  .billing-current-price { align-items: flex-start; text-align: left; width: 100%; }
  .billing-price-row { justify-content: flex-start; }
  .billing-price-row.is-recurring { justify-content: flex-start; }
}

/* Lead-credit balance card */
.lead-credit-card { padding: 22px 24px; }
.lead-credit-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: var(--sp-md);
  padding-bottom: var(--sp-md);
  border-bottom: 1px solid var(--line-hairline);
}
.lead-credit-balance {
  font-size: 32px; font-weight: 800;
  color: var(--accent-warm);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin: 4px 0 6px;
  line-height: 1;
}
.lead-credit-meta {
  font-size: 12px;
  color: var(--fg-muted);
  margin: 0;
}
.lead-credit-topup { flex-shrink: 0; height: 40px; padding: 0 18px; font-size: 13px; }
.lead-credit-breakdown {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-md);
}
.lead-credit-cell {
  display: flex; flex-direction: column;
  gap: 4px;
}
.lead-credit-cell-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-muted);
}
.lead-credit-cell-value {
  font-size: 18px; font-weight: 800;
  color: var(--fg-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.lead-credit-cell-meta {
  display: block;
  margin-top: 2px;
  font-size: 11px; font-weight: 500;
  color: var(--fg-muted);
  letter-spacing: 0;
}
.lead-credit-bar {
  height: 4px;
  background: var(--surface-elevated);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 6px;
}
.lead-credit-bar > span {
  display: block; height: 100%;
  background: var(--accent-warm);
  border-radius: 2px;
}
.lead-credit-bar.is-real > span { background: var(--signal-positive); }
.lead-credit-bar.is-spent > span { background: var(--fg-dim); }
@media (max-width: 900px) {
  .lead-credit-breakdown { grid-template-columns: 1fr; gap: var(--sp-sm); }
}
@media (max-width: 640px) {
  .lead-credit-head { flex-direction: column; }
  .lead-credit-topup { width: 100%; }
}

/* Per-lead price line on tier card */
.tier-card-perlead {
  margin-top: 6px;
  font-size: 12px;
  color: var(--fg-muted);
  letter-spacing: 0;
}
.tier-card-perlead strong {
  color: var(--accent-warm);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Recent charges list */
.charges-list { display: flex; flex-direction: column; gap: 8px; }
.charge-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px; align-items: center;
  padding: 14px 16px;
  background: var(--surface-raised);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-md);
}
.charge-row.is-activation { border-left: 3px solid var(--accent-warm); }
.charge-row.is-restored { border-left: 3px solid var(--signal-positive); }
.charge-row-icon {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: var(--surface-elevated);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-sm);
  color: var(--fg-muted);
  flex-shrink: 0;
}
.charge-row-icon.is-warm {
  background: var(--accent-warm-dim);
  border-color: var(--accent-warm-bd);
  color: var(--accent-warm);
}
.charge-row-icon.is-positive {
  background: var(--signal-positive-dim);
  border-color: var(--signal-positive-bd);
  color: var(--signal-positive);
}
.charge-row-icon svg { width: 16px; height: 16px; }
.charge-row-info { min-width: 0; }
.charge-row-title {
  margin: 0;
  font-size: 13px; font-weight: 700;
  color: var(--fg-primary);
  letter-spacing: -0.005em;
}
.charge-row-meta {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--fg-muted);
  overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.charge-row-amount {
  font-size: 14px; font-weight: 800;
  color: var(--fg-primary);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.charge-row-amount.is-positive { color: var(--signal-positive); }
@media (max-width: 480px) {
  .charge-row {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 8px 12px;
    padding: 12px;
  }
  .charge-row-icon { grid-row: 1; grid-column: 1; }
  .charge-row-info { grid-row: 1; grid-column: 2; }
  .charge-row-amount { grid-row: 2; grid-column: 1 / -1; text-align: right; font-size: 16px; }
  .charge-row-meta { white-space: normal; }
}
.billing-current-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 16px;
  padding-top: var(--sp-md);
  border-top: 1px solid var(--line-hairline);
}
.billing-feature {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600;
  color: var(--fg-secondary);
}
.billing-feature svg {
  width: 14px; height: 14px;
  color: var(--signal-positive);
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .billing-current-plan-head { flex-direction: column; }
  .billing-current-price { text-align: left; }
  .billing-current-name { font-size: 22px; }
  .billing-current-features { grid-template-columns: 1fr; }
}

/* Tier comparison grid (3 cards) */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-md);
}
.tier-card {
  position: relative;
  padding: 22px 22px 18px;
  background: var(--surface-raised);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column;
  transition: border-color var(--dur-short) var(--ease-out);
}
.tier-card:hover { border-color: var(--line-default); }
.tier-card.is-current {
  border-color: var(--accent-warm-bd);
  background: linear-gradient(160deg, var(--surface-raised), var(--accent-warm-dim) 200%);
}
.tier-card.is-recommended {
  border-color: var(--accent-warm);
  box-shadow: 0 0 0 1px var(--accent-warm-bd), 0 24px 60px rgba(197, 160, 89, 0.10);
}
.tier-current-badge,
.tier-recommended-badge {
  position: absolute;
  top: -10px; left: 18px;
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.06em;
}
.tier-current-badge {
  background: var(--surface-elevated);
  border: 1px solid var(--accent-warm-bd);
  color: var(--accent-warm);
}
.tier-recommended-badge {
  background: var(--accent-warm);
  color: #0A0A0A;
}
.tier-card-head { margin-bottom: 14px; }
.tier-card-name {
  display: block;
  font-size: 14px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-primary);
  margin-bottom: 4px;
}
.tier-card-tagline {
  display: block;
  font-size: 12px;
  color: var(--fg-muted);
  margin-bottom: 14px;
  line-height: 1.4;
}
.tier-card-price { display: flex; align-items: baseline; gap: 4px; }
.tier-price-amount {
  font-size: 30px; font-weight: 800;
  color: var(--fg-primary);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.tier-card.is-recommended .tier-price-amount { color: var(--accent-warm); }
.tier-price-suffix {
  font-size: 12.5px; color: var(--fg-muted);
}
.tier-card-features {
  list-style: none;
  margin: 0 0 18px;
  padding: 14px 0 0;
  border-top: 1px solid var(--line-hairline);
  flex: 1;
}
.tier-card-features li {
  display: flex; align-items: flex-start; gap: 8px;
  margin-bottom: 8px;
  font-size: 12.5px;
  line-height: 1.4;
}
.tier-card-features li.is-included { color: var(--fg-secondary); }
.tier-card-features li.is-not-included { color: var(--fg-dim); }
.tier-check {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 1px;
}
.tier-card-features li.is-included .tier-check {
  background: var(--signal-positive-dim);
  color: var(--signal-positive);
}
.tier-card-features li.is-not-included .tier-check {
  background: var(--surface-elevated);
  color: var(--fg-dim);
}
.tier-check svg { width: 11px; height: 11px; }
.tier-card-cta { width: 100%; height: 40px; }
.tier-card-cta:disabled { opacity: 0.7; cursor: default; }

@media (max-width: 900px) {
  .tier-grid { grid-template-columns: 1fr; }
}

/* Upgrade preview card (prorated math) */
.upgrade-preview-card { padding: 22px 24px; }
.upgrade-preview-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0;
  font-size: 13px;
  gap: 12px;
}
.upgrade-preview-label { color: var(--fg-secondary); }
.upgrade-preview-value { color: var(--fg-primary); font-weight: 600; text-align: right; }
.upgrade-preview-value.mono { font-variant-numeric: tabular-nums; }
.upgrade-preview-value.is-accent {
  color: var(--accent-warm);
  font-size: 18px; font-weight: 800;
}
.upgrade-preview-row.is-divider {
  height: 1px; padding: 0; margin: 6px 0;
  background: var(--line-hairline);
}
.upgrade-preview-row.is-total .upgrade-preview-label {
  color: var(--fg-primary);
  font-size: 14px; font-weight: 700;
}
.upgrade-preview-note {
  margin: 14px 0 18px;
  padding: 12px 14px;
  background: var(--surface-base);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  color: var(--fg-muted);
  line-height: 1.5;
}
.upgrade-preview-note strong { color: var(--fg-primary); }
.upgrade-preview-actions {
  display: flex; gap: 10px;
  justify-content: flex-end;
}
@media (max-width: 480px) {
  .upgrade-preview-actions { flex-direction: column-reverse; }
  .upgrade-preview-actions .btn { width: 100%; }
}

/* Payment method card */
.payment-method-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.payment-method-info {
  display: flex; align-items: center; gap: 14px;
  min-width: 0;
}
.payment-method-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--surface-elevated);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-sm);
  color: var(--accent-warm);
  flex-shrink: 0;
}
.payment-method-icon svg { width: 22px; height: 22px; }
.payment-method-name {
  font-size: 14px; font-weight: 700;
  color: var(--fg-primary);
  margin: 0;
}
.payment-method-meta {
  font-size: 12px;
  color: var(--fg-muted);
  margin: 2px 0 0;
}
.payment-method-actions {
  display: flex; gap: 8px;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .payment-method-actions { width: 100%; }
  .payment-method-actions .btn { flex: 1; }
}

/* Coming soon footer note */
.billing-coming-soon {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--surface-base);
  border: 1px dashed var(--line-default);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--fg-muted);
}
.billing-coming-soon svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ==========================================================================
   Lead post-meeting feedback page — chromeless lead-facing surface.
   All used on LeadFeedback/index.html.
   ========================================================================== */
.lf-card { max-width: 540px; }
.lf-stage[hidden] { display: none; }

.lf-q { margin-bottom: var(--sp-md); }
.lf-q-label {
  display: block;
  font-size: 13px; font-weight: 700;
  color: var(--fg-primary);
  margin-bottom: 10px;
}
.lf-q-optional {
  font-weight: 500;
  color: var(--fg-muted);
}

/* Did you hire them? — 3 buttons */
.lf-convert-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.lf-convert-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px;
  background: var(--surface-base);
  border: 1px solid var(--line-default);
  border-radius: var(--radius-sm);
  color: var(--fg-secondary);
  font-family: inherit;
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  transition: var(--dur-micro) var(--ease-out);
}
.lf-convert-btn:hover { border-color: var(--line-strong); color: var(--fg-primary); }
.lf-convert-emoji {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--surface-elevated);
  font-size: 14px; font-weight: 800;
  transition: var(--dur-micro);
}
.lf-convert-btn[data-convert="yes"]:hover,
.lf-convert-btn[data-convert="yes"].is-active {
  border-color: var(--signal-positive);
  background: var(--signal-positive-dim);
  color: var(--signal-positive);
}
.lf-convert-btn[data-convert="yes"].is-active .lf-convert-emoji { background: var(--signal-positive); color: #0A0A0A; }
.lf-convert-btn[data-convert="deciding"]:hover,
.lf-convert-btn[data-convert="deciding"].is-active {
  border-color: var(--signal-caution);
  background: var(--signal-caution-dim);
  color: var(--signal-caution);
}
.lf-convert-btn[data-convert="deciding"].is-active .lf-convert-emoji { background: var(--signal-caution); color: #0A0A0A; }
.lf-convert-btn[data-convert="no"]:hover,
.lf-convert-btn[data-convert="no"].is-active {
  border-color: var(--signal-risk);
  background: var(--signal-risk-dim);
  color: var(--signal-risk);
}
.lf-convert-btn[data-convert="no"].is-active .lf-convert-emoji { background: var(--signal-risk); color: #fff; }

/* Star rating */
.lf-stars {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
}
.lf-star {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  background: var(--surface-base);
  border: 1px solid var(--line-default);
  border-radius: var(--radius-sm);
  color: var(--fg-dim);
  font-size: 22px;
  cursor: pointer;
  font-family: inherit;
  transition: var(--dur-micro) var(--ease-out);
}
.lf-star:hover, .lf-star.is-hover {
  border-color: var(--accent-warm);
  color: var(--accent-warm);
  background: var(--accent-warm-dim);
}
.lf-star.is-filled {
  background: var(--accent-warm);
  border-color: var(--accent-warm);
  color: #0A0A0A;
  box-shadow: 0 4px 16px rgba(197, 160, 89, 0.20);
}
.lf-stars-hint {
  margin: 8px 0 0;
  font-size: 12px; font-weight: 600;
  color: var(--fg-muted);
}
@media (max-width: 480px) {
  .lf-stars { gap: 6px; }
  .lf-star { width: 44px; height: 44px; font-size: 20px; }
}

/* Comment textarea */
.lf-textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--surface-base);
  border: 1px solid var(--line-default);
  border-radius: var(--radius-sm);
  color: var(--fg-primary);
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  outline: none;
  min-height: 80px;
  transition: var(--dur-micro) var(--ease-out);
}
.lf-textarea:focus {
  border-color: var(--accent-warm);
  box-shadow: 0 0 0 3px var(--accent-warm-dim);
}
.lf-textarea::placeholder { color: var(--fg-dim); }

/* Done state */
.lf-done-stage { text-align: center; padding: var(--sp-md) 0; }
.lf-done-icon {
  display: grid; place-items: center;
  width: 72px; height: 72px;
  border-radius: 50%;
  margin: 0 auto var(--sp-md);
  background: var(--signal-positive-dim);
  border: 1px solid var(--signal-positive-bd);
  color: var(--signal-positive);
  animation: lf-pop 0.5s var(--ease-out);
}
.lf-done-icon svg { width: 32px; height: 32px; }
@keyframes lf-pop {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.lf-done-stage h1 {
  font-size: 24px; font-weight: 800;
  color: var(--fg-primary);
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.lf-done-sub {
  font-size: 13.5px;
  color: var(--fg-muted);
  margin: 0 0 var(--sp-md);
  line-height: 1.55;
}
.lf-done-cta { max-width: 320px; margin: 0 auto; }

/* ==========================================================================
   Published pages page — strip + sectioned cards + share prompt.
   Used on Dashboard/published.html.
   ========================================================================== */

.published-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-sm);
  margin-bottom: var(--sp-xl);
}
.published-stat {
  padding: 14px 16px;
  background: var(--surface-raised);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-md);
}
.published-stat-label {
  display: block;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 6px;
}
.published-stat-value {
  font-size: 24px; font-weight: 800;
  color: var(--fg-primary);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.published-stat-value.is-positive { color: var(--signal-positive); }
.published-stat-value.is-warm { color: var(--accent-warm); }
.published-stat-value.is-meta { font-size: 14px; font-weight: 700; color: var(--fg-secondary); }
@media (max-width: 900px) {
  .published-strip { grid-template-columns: repeat(2, 1fr); }
}

.published-section { margin-bottom: var(--sp-xl); }
.published-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  margin-bottom: var(--sp-md);
  flex-wrap: wrap;
}
.published-section-title {
  font-size: 16px; font-weight: 800;
  color: var(--fg-primary);
  letter-spacing: -0.01em;
  margin: 0;
  display: inline-flex; align-items: center; gap: 8px;
}
.published-section-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--accent-warm-dim);
  border: 1px solid var(--accent-warm-bd);
  color: var(--accent-warm);
  font-size: 11px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.published-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-sm);
}
@media (max-width: 900px) { .published-grid { grid-template-columns: 1fr; } }

.published-page-card {
  display: flex; flex-direction: column;
  padding: 16px 18px;
  background: var(--surface-raised);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--line-default);
  transition: border-color var(--dur-micro) var(--ease-out);
}
.published-page-card:hover { border-color: var(--line-default); }
.published-page-card.is-published { border-left-color: var(--signal-positive); }
.published-page-card.is-generating { border-left-color: var(--accent-warm); }
.published-page-card.is-failed { border-left-color: var(--signal-risk); }

.published-page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.published-page-type {
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-muted);
}
.published-page-title {
  font-size: 14.5px; font-weight: 700;
  color: var(--fg-primary);
  letter-spacing: -0.005em;
  line-height: 1.35;
  margin: 0 0 10px;
}
.published-page-url {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  background: var(--surface-base);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-sm);
  color: var(--accent-warm);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; font-weight: 600;
  text-decoration: none;
  word-break: break-all;
  transition: var(--dur-micro) var(--ease-out);
  margin-bottom: 10px;
}
.published-page-url:hover { border-color: var(--accent-warm-bd); background: var(--accent-warm-dim); }
.published-page-url svg { width: 12px; height: 12px; flex-shrink: 0; }
.published-page-url.is-pending {
  color: var(--fg-muted);
  border-style: dashed;
  cursor: default;
}
.published-page-url.is-pending:hover { background: var(--surface-base); border-color: var(--line-hairline); }

.published-page-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap;
  margin-top: auto;
}
.published-page-date {
  font-size: 11px;
  color: var(--fg-muted);
}
.published-page-copy {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: var(--surface-base);
  border: 1px solid var(--line-default);
  border-radius: var(--radius-sm);
  color: var(--fg-secondary);
  font-family: inherit;
  font-size: 11.5px; font-weight: 600;
  cursor: pointer;
  transition: var(--dur-micro) var(--ease-out);
}
.published-page-copy:hover:not(:disabled) {
  border-color: var(--accent-warm-bd);
  color: var(--accent-warm);
  background: var(--accent-warm-dim);
}
.published-page-copy:disabled { opacity: 0.45; cursor: default; }
.published-page-copy svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Status pill — Generating + Published variants for published pages */
.status-pill.is-published {
  background: var(--signal-positive-dim);
  border-color: var(--signal-positive-bd);
  color: var(--signal-positive);
}
.status-pill.is-generating {
  background: var(--accent-warm-dim);
  border-color: var(--accent-warm-bd);
  color: var(--accent-warm);
  display: inline-flex; align-items: center; gap: 5px;
}
.status-pill.is-generating .spinner {
  display: inline-block;
  width: 10px; height: 10px;
  border: 1.5px solid var(--accent-warm-bd);
  border-top-color: var(--accent-warm);
  border-radius: 50%;
  animation: pp-spin 0.8s linear infinite;
}
@keyframes pp-spin { to { transform: rotate(360deg); } }

/* Share-your-page card */
.share-promote-card {
  background: linear-gradient(135deg, var(--surface-raised), var(--accent-warm-dim) 200%);
  border-color: var(--accent-warm-bd);
}
.share-promote-head { margin-bottom: var(--sp-md); }
.share-promote-title {
  font-size: 18px; font-weight: 800;
  color: var(--fg-primary);
  letter-spacing: -0.01em;
  margin: 6px 0 6px;
}
.share-promote-sub {
  font-size: 12.5px;
  color: var(--fg-muted);
  margin: 0;
}
.share-actions {
  display: flex; gap: 10px;
  flex-wrap: wrap;
}
.share-action-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 16px;
  font-size: 12.5px;
}
.share-action-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.share-toast {
  margin: 12px 0 0;
  padding: 8px 12px;
  background: var(--signal-positive-dim);
  border: 1px solid var(--signal-positive-bd);
  border-radius: var(--radius-sm);
  color: var(--signal-positive);
  font-size: 12.5px; font-weight: 700;
}
.share-toast[hidden] { display: none; }
@media (max-width: 640px) {
  .share-actions { flex-direction: column; }
  .share-action-btn { width: 100%; justify-content: center; }
}

/* Snoozed alt-state row (used by Next-Action / Pending-feedback banners) */
.snoozed-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
}
.snoozed-row::before { display: none; } /* drop the next-action gradient decoration */
/* Class-level [hidden] override — class display rules above defeat the UA hidden rule */
.next-action[hidden],
.snoozed-row[hidden],
.feedback-lost-reasons[hidden] { display: none; }
.snoozed-row-text {
  display: flex; align-items: center; gap: 12px;
  font-size: 13.5px; color: var(--fg-secondary);
  flex: 1; min-width: 0;
}
.snoozed-row-text strong { color: var(--fg-primary); }
.snoozed-row-undo { height: 34px; padding: 0 14px; font-size: 12px; flex-shrink: 0; }
@media (max-width: 640px) {
  .snoozed-row { flex-wrap: wrap; gap: 10px; }
  .snoozed-row-text { font-size: 12.5px; flex: 1 1 100%; }
  .snoozed-row-undo { width: 100%; }
}

/* ==========================================================================
   28. ANALYTICS — ROI tile + bar charts + breakdowns + top-leads
   ========================================================================== */
.analytics-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--sp-md);
  margin-bottom: var(--sp-lg);
}
.analytics-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-md);
  margin-bottom: var(--sp-lg);
}

.roi-tile {
  position: relative;
  padding: 28px 32px;
  background: var(--surface-raised);
  border: 1px solid var(--line-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.roi-tile::before {
  content: "";
  position: absolute; top: -80px; right: -80px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-warm-dim), transparent 70%);
  pointer-events: none;
}
.roi-tile > * { position: relative; }
.roi-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-warm);
  margin-bottom: 14px;
}
.roi-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--fg-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.roi-trend {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px;
  font-size: 13px; font-weight: 700;
  color: var(--signal-positive);
}
.roi-trend .vs { color: var(--fg-muted); font-weight: 500; }
.roi-trend svg { width: 12px; height: 12px; stroke-width: 2.4; }
.roi-meta {
  margin-top: 18px;
  display: flex; gap: 22px; flex-wrap: wrap;
}
.roi-meta-item { display: flex; flex-direction: column; gap: 3px; }
.roi-meta-item .k {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-muted);
}
.roi-meta-item .v {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px; font-weight: 800;
  color: var(--fg-primary);
  letter-spacing: -0.01em;
}

.time-range-chips {
  display: inline-flex; gap: 2px;
  background: var(--surface-elevated);
  border: 1px solid var(--line-default);
  border-radius: var(--radius-pill);
  padding: 3px;
}
.time-range-chips button {
  padding: 6px 14px;
  background: transparent;
  color: var(--fg-muted);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: var(--dur-micro) var(--ease-out);
  border: 0;
}
.time-range-chips button:hover { color: var(--fg-primary); }
.time-range-chips button.is-active {
  background: var(--accent-warm-dim);
  color: var(--accent-warm);
}

.chart-card {
  padding: 22px 24px;
  background: var(--surface-raised);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-lg);
}
.chart-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.chart-title {
  font-size: 13px; font-weight: 700;
  color: var(--fg-primary);
  letter-spacing: -0.005em;
}
.chart-legend {
  display: flex; gap: 14px;
  font-size: 11px; color: var(--fg-muted);
}
.chart-legend .lg-dot {
  display: inline-flex; align-items: center; gap: 5px;
}
.chart-legend .lg-dot::before {
  content: ""; width: 8px; height: 8px;
  border-radius: 50%;
}
.chart-legend .lg-dot.warm::before { background: var(--accent-warm); }
.chart-legend .lg-dot.ai::before { background: var(--accent-ai); }

.bars-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  height: 200px;
  align-items: end;
}
.bar-col {
  display: flex; flex-direction: column;
  gap: 6px;
  height: 100%;
  align-items: center;
}
.bar-stack {
  flex: 1;
  display: flex; align-items: flex-end;
  gap: 3px;
  width: 100%;
  justify-content: center;
}
.bar {
  width: 100%; max-width: 16px;
  border-radius: 3px 3px 0 0;
  transition: opacity var(--dur-micro) var(--ease-out);
  background: var(--accent-warm);
}
.bar.is-leads { background: var(--accent-warm); }
.bar.is-bookings { background: var(--accent-ai); }
.bar:hover { opacity: 0.8; }
.bar-label {
  font-size: 10px; font-weight: 700;
  color: var(--fg-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.breakdown-row {
  display: grid;
  grid-template-columns: 110px 1fr 50px;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-hairline);
}
.breakdown-row:last-child { border-bottom: 0; }
.breakdown-label {
  font-size: 12.5px; font-weight: 700;
  color: var(--fg-secondary);
}
.breakdown-bar-wrap {
  height: 8px;
  background: var(--surface-elevated);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.breakdown-bar {
  height: 100%;
  border-radius: inherit;
  transition: width var(--dur-medium) var(--ease-out);
}
.breakdown-bar.hi { background: var(--signal-positive); }
.breakdown-bar.med { background: var(--accent-warm); }
.breakdown-bar.lo { background: var(--signal-risk); }
.breakdown-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 800;
  color: var(--fg-primary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.lost-row, .top-lead-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-hairline);
}
.lost-row:last-child, .top-lead-row:last-child { border-bottom: 0; }
.lost-label, .top-lead-name {
  font-size: 13px; font-weight: 600;
  color: var(--fg-primary);
}
.lost-bar-wrap {
  width: 80px; height: 4px;
  background: var(--surface-elevated);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.lost-bar-fill { height: 100%; background: var(--signal-risk); }
.lost-pct, .top-lead-quality {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lost-pct { color: var(--signal-risk); min-width: 40px; text-align: right; }
.top-lead-quality {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--accent-ai-dim);
  color: var(--accent-ai);
}
.top-lead-quality::before { content: "✦"; font-size: 9px; }
.top-lead-rank {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 800;
  color: var(--accent-warm);
  letter-spacing: 0.04em;
}

@media (max-width: 1023px) {
  .analytics-row, .analytics-row-2 { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .roi-tile { padding: 22px 22px; }
  .roi-meta { gap: 16px; }
  .chart-card { padding: 18px 18px; }
  .bars-grid { gap: 6px; height: 150px; }
  .bar { max-width: 12px; }
  .breakdown-row { grid-template-columns: 80px 1fr 44px; gap: 10px; }
  .breakdown-label { font-size: 11.5px; }
  .lost-row, .top-lead-row { grid-template-columns: 1fr auto; gap: 10px; }
  .lost-bar-wrap { display: none; }
  .top-lead-rank { display: none; }
}

/* ==========================================================================
   29. SCHEDULE — weekly availability editor
   ========================================================================== */
.schedule-toolbar {
  display: flex; align-items: center; gap: var(--sp-md);
  margin-bottom: var(--sp-lg);
  flex-wrap: wrap;
}
.timezone-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: var(--surface-raised);
  border: 1px solid var(--line-default);
  border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600;
  color: var(--fg-secondary);
}
.timezone-pill svg { width: 14px; height: 14px; color: var(--fg-muted); }
.schedule-grid-wrap {
  background: var(--surface-raised);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.day-row-2 {
  display: grid;
  grid-template-columns: 56px 130px 1fr;
  gap: 14px;
  align-items: center;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line-hairline);
}
.day-row-2:last-child { border-bottom: 0; }
.day-row-2.is-off .day-row-name,
.day-row-2.is-off .time-pickers { opacity: 0.45; }

.toggle-switch {
  position: relative;
  width: 40px; height: 22px;
  background: var(--surface-elevated);
  border: 1px solid var(--line-default);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: var(--dur-short) var(--ease-out);
  flex-shrink: 0;
}
.toggle-switch::before {
  content: "";
  position: absolute; left: 2px; top: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--fg-muted);
  transition: var(--dur-short) var(--ease-out);
}
.toggle-switch.is-on {
  background: var(--accent-warm);
  border-color: var(--accent-warm);
}
.toggle-switch.is-on::before {
  left: 20px;
  background: #0A0A0A;
}
.day-row-name {
  font-size: 14px; font-weight: 700;
  color: var(--fg-primary);
  letter-spacing: -0.005em;
}
.day-row-name-sub {
  display: block;
  font-size: 11px; font-weight: 500;
  color: var(--fg-muted);
  margin-top: 3px;
}
.time-pickers {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px;
}
.time-select {
  padding: 7px 28px 7px 12px;
  background: var(--surface-base);
  border: 1px solid var(--line-default);
  border-radius: var(--radius-sm);
  color: var(--fg-primary);
  font-size: 12.5px;
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238A8F9A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  outline: none;
  transition: border-color var(--dur-micro);
}
.time-select:focus { border-color: var(--accent-warm); }
.time-pickers .dash {
  color: var(--fg-muted);
  font-size: 11px;
}

.schedule-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-md);
  margin-top: var(--sp-lg);
}
.option-card {
  padding: 18px 22px;
  background: var(--surface-raised);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-md);
}
.option-card-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 8px;
}
.option-card-value {
  font-size: 16px; font-weight: 700;
  color: var(--fg-primary);
}
.option-card-control {
  margin-top: 10px;
}

@media (max-width: 767px) {
  .day-row-2 { grid-template-columns: 48px 1fr; gap: 10px; padding: 14px 16px; }
  .time-pickers { grid-column: 1 / -1; padding-left: 58px; padding-top: 4px; flex-wrap: wrap; }
  .schedule-options { grid-template-columns: 1fr; }
}

/* ==========================================================================
   30. NOTIFICATIONS — settings cards + channel toggles + CC recipients
   ========================================================================== */
.notif-card {
  padding: 22px 24px;
  background: var(--surface-raised);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp-md);
}
.notif-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
  gap: 12px;
}
.notif-card-title {
  font-size: 15px; font-weight: 800;
  color: var(--fg-primary);
  letter-spacing: -0.01em;
}
.notif-card-sub {
  font-size: 12.5px;
  color: var(--fg-muted);
  margin-bottom: 14px;
}
.notif-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-hairline);
}
.notif-row:last-child { border-bottom: 0; }
.notif-row-text { min-width: 0; }
.notif-row-text strong {
  display: block;
  color: var(--fg-primary);
  font-weight: 700;
  font-size: 13.5px;
  margin-bottom: 3px;
}
.notif-row-text span {
  font-size: 12px;
  color: var(--fg-muted);
  line-height: 1.45;
}
.notif-channels {
  display: flex; gap: 6px;
  flex-shrink: 0;
}
.notif-channel {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px;
  background: var(--surface-base);
  border: 1px solid var(--line-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--fg-muted);
  transition: var(--dur-micro) var(--ease-out);
}
.notif-channel:hover {
  color: var(--fg-primary);
  border-color: var(--line-strong);
}
.notif-channel.is-on {
  background: var(--accent-warm-dim);
  border-color: var(--accent-warm-bd);
  color: var(--accent-warm);
}
.notif-channel svg { width: 11px; height: 11px; stroke-width: 2; }

.cc-list { display: flex; flex-direction: column; gap: 8px; }
.cc-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--surface-base);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-sm);
}
.cc-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--surface-elevated);
  border: 1px solid var(--line-default);
  color: var(--fg-secondary);
  display: grid; place-items: center;
  font-weight: 800; font-size: 12px;
  flex-shrink: 0;
}
.cc-info { flex: 1; min-width: 0; }
.cc-name {
  font-size: 13px; font-weight: 700;
  color: var(--fg-primary);
  letter-spacing: -0.005em;
}
.cc-email {
  font-size: 11.5px; color: var(--fg-muted);
  margin-top: 2px;
  word-break: break-word;
}
.cc-remove {
  background: transparent;
  border: 0;
  color: var(--fg-muted);
  cursor: pointer;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  transition: var(--dur-micro);
  flex-shrink: 0;
}
.cc-remove:hover { color: var(--signal-risk); background: var(--signal-risk-dim); }
.cc-remove svg { width: 14px; height: 14px; stroke-width: 2.2; }
.cc-add-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  background: var(--surface-base);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--fg-muted);
  font-size: 12.5px; font-weight: 700;
  cursor: pointer;
  transition: var(--dur-micro);
  margin-top: 10px;
  font-family: inherit;
}
.cc-add-btn:hover {
  border-color: var(--accent-warm-bd);
  color: var(--accent-warm);
  border-style: solid;
}
.cc-add-btn svg { width: 12px; height: 12px; stroke-width: 2.2; }

.quiet-hours-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 0 8px;
}
.quiet-hours-pickers {
  display: flex; align-items: center; gap: 8px;
}

@media (max-width: 767px) {
  .notif-card { padding: 18px 18px; }
  .notif-row { grid-template-columns: 1fr; gap: 8px; }
  .notif-channels { padding-top: 4px; }
  .quiet-hours-row { grid-template-columns: 1fr; }
  .quiet-hours-pickers { padding-top: 6px; }
}

@media (max-width: 1023px) {
  .kpi-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .kpi-strip { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .kpi-card { padding: 12px 14px; }
  .kpi-value { font-size: 20px; }
  .toolbar-row { flex-direction: column; align-items: stretch; }
  .toolbar-search { display: none; }

  /* Table transforms to stacked cards on mobile (audit doc 03 §3.9) */
  .data-table thead { display: none; }
  .data-table, .data-table tbody { display: block; width: 100%; }
  .data-table tbody tr {
    display: block;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line-hairline);
    cursor: pointer;
    position: relative;
  }
  .data-table tbody tr:last-child { border-bottom: 0; }
  .data-table tbody tr::after { content: ""; display: table; clear: both; } /* clearfix */
  .data-table tbody td {
    display: inline-block;
    padding: 0;
    border: 0;
    vertical-align: middle;
    line-height: 1.3;
  }
  .data-table tbody td:first-child {
    display: block;
    margin-bottom: 10px;
    width: 100%;
  }
  .data-table .col-hide-mobile { display: none !important; }
  /* Quality + Status chips: inline with small spacing */
  .data-table tbody td:nth-child(3),
  .data-table tbody td:nth-child(5) {
    margin-right: 8px;
  }
  /* Action button floats right */
  .data-table tbody td:last-child {
    float: right;
  }
  /* Email + phone wraps cleanly */
  .cell-name-sub {
    font-size: 11.5px;
    word-break: break-word;
    overflow-wrap: break-word;
    margin-top: 3px;
  }
  .cell-quality, .cell-status {
    font-size: 10.5px;
    padding: 3px 8px;
  }
  .cell-action {
    font-size: 10.5px;
    padding: 6px 10px;
  }

  .side-sheet-panel { width: 100%; }
  .side-sheet-head { padding: 14px 16px; }
  .side-sheet-body { padding: 16px; }
  .metric-pills { gap: 6px; }
  .metric-pill { min-width: 100px; padding: 10px 12px; }
  .metric-pill-value { font-size: 15px; }
}
.step-pane-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent-warm);
  margin-bottom: 10px;
}
.step-pane-title {
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--fg-primary);
  margin-bottom: 12px;
}
.step-pane-body {
  font-size: 14.5px; line-height: 1.65;
  color: var(--fg-secondary);
}
.step-pane-list {
  margin-top: var(--sp-md);
  display: flex; flex-direction: column;
  gap: 10px;
  list-style: none; padding: 0;
}
.step-pane-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; line-height: 1.5;
  color: var(--fg-secondary);
}
.step-pane-list li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent-warm);
  margin-top: 9px;
  flex-shrink: 0;
}

/* Reject tiles grid */
.reject-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 12px;
  margin-top: var(--sp-md);
}
.reject-tile {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px;
  background: var(--surface-raised);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-md);
}
.reject-tile-ico {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--signal-risk-dim);
  border: 1px solid var(--signal-risk-bd);
  color: var(--signal-risk);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.reject-tile-ico svg { width: 14px; height: 14px; stroke-width: 2.4; }
.reject-tile-text {
  font-size: 13px; line-height: 1.55;
  color: var(--fg-secondary);
}

/* Loop flow */
.loop-flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: var(--sp-md);
  align-items: stretch;
}
.loop-step {
  position: relative;
  padding: 18px 16px 16px;
  background: var(--surface-raised);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-md);
  text-align: left;
}
.loop-step-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--accent-ai);
  margin-bottom: 6px;
}
.loop-step-title {
  font-size: 13.5px; font-weight: 700;
  color: var(--fg-primary);
  letter-spacing: -0.005em;
  margin-bottom: 4px;
}
.loop-step-sub {
  font-size: 11.5px; color: var(--fg-muted);
  line-height: 1.45;
}
.loop-step:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -8px; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px;
  border-top: 1px solid var(--line-default);
  border-right: 1px solid var(--line-default);
  rotate: 45deg;
}

/* FAQ */
.faq-list {
  display: flex; flex-direction: column;
  gap: 8px;
  max-width: 800px;
  margin: var(--sp-md) auto 0;
}
.faq-item {
  background: var(--surface-raised);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--dur-micro) var(--ease-out);
}
.faq-item:hover { border-color: var(--line-default); }
.faq-item[open] { border-color: var(--line-default); }
.faq-summary {
  list-style: none;
  padding: 18px 22px;
  font-size: 15px; font-weight: 600;
  color: var(--fg-primary);
  letter-spacing: -0.005em;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
}
.faq-summary::-webkit-details-marker { display: none; }
.faq-summary::after {
  content: "";
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--fg-muted);
  border-bottom: 1.5px solid var(--fg-muted);
  rotate: 45deg;
  transition: rotate var(--dur-short) var(--ease-out);
  flex-shrink: 0;
}
.faq-item[open] .faq-summary::after { rotate: -135deg; color: var(--accent-warm); }
.faq-body {
  padding: 0 22px 22px;
  font-size: 14px; line-height: 1.65;
  color: var(--fg-secondary);
}

@media (max-width: 767px) {
  .evidence-tile { grid-template-columns: 1fr; }
  .evidence-cell + .evidence-cell { border-left: 0; border-top: 1px solid var(--line-hairline); }
  .evidence-cell { padding: 20px; }
  .steps-row { grid-template-columns: 1fr; gap: var(--sp-md); }
  .steps-panel { padding: 20px 22px; }
  .loop-flow { grid-template-columns: 1fr; }
  .loop-step:not(:last-child)::after { display: none; }
  .reject-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   25. BOOKING — partner hero + smart-default slot + calendar + confirm
   ========================================================================== */
.booking-canvas {
  max-width: 540px;
  margin: 0 auto;
  padding: var(--sp-xl) var(--sp-lg) var(--sp-3xl);
}
.booking-partner-strip {
  display: flex; align-items: center; gap: 14px;
  padding: 16px;
  background: var(--surface-raised);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp-md);
}
.booking-avatar {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent-warm-dim), var(--surface-elevated));
  border: 1px solid var(--accent-warm-bd);
  color: var(--accent-warm);
  display: grid; place-items: center;
  font-size: 18px; font-weight: 800;
  flex-shrink: 0;
}
.booking-partner-body { flex: 1; min-width: 0; }
.booking-partner-name {
  font-size: 16px; font-weight: 700;
  color: var(--fg-primary);
  letter-spacing: -0.005em;
}
.booking-partner-meta {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--fg-muted);
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.booking-partner-meta .stars { color: var(--accent-warm); font-weight: 700; }
.booking-partner-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--fg-quiet); }

.booking-card {
  background: var(--surface-raised);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.booking-card + .booking-card { margin-top: var(--sp-md); }
.booking-card h2 {
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--fg-primary);
  margin-bottom: 8px;
}
.booking-card h2 .accent { color: var(--accent-warm); }
.booking-card p.sub {
  font-size: 13.5px;
  color: var(--fg-muted);
  line-height: 1.55;
  margin-bottom: var(--sp-md);
}

.smart-slot {
  margin: var(--sp-md) 0 var(--sp-lg);
  padding: 18px 20px;
  background: var(--accent-warm-dim);
  border: 1px solid var(--accent-warm-bd);
  border-radius: var(--radius-md);
}
.smart-slot-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-warm);
  margin-bottom: 8px;
}
.smart-slot-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px; font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--fg-primary);
  font-variant-numeric: tabular-nums;
}
.smart-slot-meta {
  margin-top: 6px;
  font-size: 12.5px; color: var(--fg-muted);
  display: flex; gap: 8px; align-items: center;
}
.smart-slot-meta .left {
  color: var(--signal-caution);
  font-weight: 700;
}

.slots-remaining {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: var(--sp-md);
  padding: 6px 12px;
  background: var(--signal-caution-dim);
  border: 1px solid var(--signal-caution-bd);
  border-radius: var(--radius-pill);
  font-size: 11.5px; font-weight: 700;
  color: var(--signal-caution);
}

/* Calendar mini */
.cal-mini {
  margin-top: var(--sp-md);
}
.cal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.cal-month {
  font-size: 14px; font-weight: 700;
  color: var(--fg-primary);
}
.cal-nav {
  display: flex; gap: 4px;
}
.cal-nav button {
  width: 30px; height: 30px;
  border-radius: var(--radius-sm);
  background: var(--surface-base);
  border: 1px solid var(--line-default);
  color: var(--fg-secondary);
  display: grid; place-items: center;
  cursor: pointer;
  transition: var(--dur-micro) var(--ease-out);
}
.cal-nav button:hover { border-color: var(--accent-warm); color: var(--accent-warm); }
.cal-nav svg { width: 12px; height: 12px; stroke-width: 2.4; }
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-grid .cal-dow {
  text-align: center;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-dim);
  padding: 6px 0;
}
.cal-day {
  aspect-ratio: 1;
  display: grid; place-items: center;
  font-size: 12.5px; font-weight: 600;
  color: var(--fg-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--dur-micro) var(--ease-out);
  position: relative;
}
.cal-day:hover { background: var(--surface-interactive); color: var(--fg-primary); }
.cal-day.is-today { color: var(--accent-warm); font-weight: 700; }
.cal-day.is-selected {
  background: var(--accent-warm);
  color: #0A0A0A;
  font-weight: 800;
}
.cal-day.is-disabled {
  color: var(--fg-quiet);
  cursor: not-allowed;
}
.cal-day.is-disabled:hover { background: transparent; color: var(--fg-quiet); }
.cal-day.has-slots::after {
  content: "";
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent-warm);
}
.cal-day.is-selected.has-slots::after { background: #0A0A0A; }

/* Slot picker */
.slot-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: var(--sp-md);
}
.slot {
  padding: 12px;
  background: var(--surface-base);
  border: 1px solid var(--line-default);
  border-radius: var(--radius-sm);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 600;
  color: var(--fg-secondary);
  cursor: pointer;
  text-align: center;
  transition: var(--dur-micro) var(--ease-out);
}
.slot:hover { border-color: var(--accent-warm); color: var(--accent-warm); }
.slot.is-selected {
  background: var(--accent-warm);
  color: #0A0A0A;
  border-color: var(--accent-warm);
  font-weight: 800;
}
.slot.is-taken {
  color: var(--fg-quiet);
  border-color: var(--line-hairline);
  cursor: not-allowed;
  background: transparent;
  position: relative;
}
.slot.is-taken::after {
  content: "Booked";
  display: block;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-dim);
  margin-top: 2px;
  font-family: var(--font, 'Inter');
}

/* Booking confirmation */
.confirm-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--signal-positive), #34D399);
  color: #fff;
  display: grid; place-items: center;
  margin: 0 auto var(--sp-md);
  box-shadow: 0 12px 28px rgba(16,185,129,0.32);
}
.confirm-icon svg { width: 28px; height: 28px; stroke-width: 3; }

.confirm-summary {
  margin-top: var(--sp-md);
  padding: 16px;
  background: var(--surface-base);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-md);
  display: flex; flex-direction: column; gap: 10px;
}
.confirm-row {
  display: flex; justify-content: space-between;
  font-size: 13px;
}
.confirm-row .k {
  color: var(--fg-muted);
  font-weight: 600;
}
.confirm-row .v {
  color: var(--fg-primary);
  font-weight: 700;
  text-align: right;
}

@media (max-width: 767px) {
  .booking-canvas { padding: var(--sp-md); }
  .booking-card { padding: 20px; }
  .booking-card h2 { font-size: 20px; line-height: 1.2; }
  .smart-slot { padding: 14px 16px; }
  .smart-slot-time { font-size: 18px; }
  .slot-grid { grid-template-columns: 1fr; }
  .slot { padding: 14px 12px; min-height: 48px; font-size: 14px; }
  .cal-grid { gap: 2px; }
  .cal-day { font-size: 13px; min-height: 40px; }
  .cal-grid .cal-dow { padding: 4px 0; font-size: 9.5px; }
  .booking-partner-strip { padding: 12px; gap: 10px; }
  .booking-avatar { width: 44px; height: 44px; font-size: 16px; }
  .booking-partner-name { font-size: 14.5px; }
  .booking-partner-meta { font-size: 11px; gap: 6px; }
  .confirm-summary { padding: 14px; }
  .confirm-row { font-size: 12.5px; flex-wrap: wrap; gap: 4px; }
}

/* ==========================================================================
   26. HUB (index) — landing page for all 6 demo previews
   ========================================================================== */
.hub-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--sp-md) var(--sp-lg) var(--sp-2xl);
}
.hub-hero {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center;
  gap: 12px;
  margin: 0 0 var(--sp-md);
  padding: 0;
}
.hub-logo {
  display: block !important;
  height: 56px;
  width: auto;
  margin: 0;
  opacity: 0.98;
}
/* Slogan: always-visible gold pill */
.hub-slogan {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 16px;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 11px !important;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-warm) !important;
  background: var(--accent-warm-dim);
  border: 1px solid var(--accent-warm-bd);
  border-radius: 999px;
  line-height: 1;
  white-space: nowrap;
  visibility: visible !important;
  opacity: 1 !important;
}
.hub-slogan-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent-warm);
  box-shadow: 0 0 6px var(--accent-warm-glow);
  flex-shrink: 0;
}
.hub-title {
  display: block !important;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(30px, 3.6vw, 42px) !important;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--fg-primary) !important;
  margin: 4px 0 0;
  visibility: visible !important;
  opacity: 1 !important;
}
.hub-desc {
  display: block !important;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 14.5px !important;
  font-weight: 500;
  line-height: 1.55;
  color: var(--fg-secondary) !important;
  max-width: 56ch;
  margin: 0;
  visibility: visible !important;
  opacity: 1 !important;
}
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--sp-md);
  margin-top: 0;
}
@media (max-width: 767px) {
  .hub-shell { padding: var(--sp-md) var(--sp-md) var(--sp-2xl); }
  .hub-hero { margin-bottom: var(--sp-md); gap: 8px; }
  .hub-hero img { height: 48px; }
  .hub-hero .auth-slogan { font-size: 10px; padding: 5px 12px; letter-spacing: 0.2em; }
  .hub-hero h1 { font-size: 26px; margin-top: 2px; }
  .hub-hero p { font-size: 13.5px; max-width: 36ch; }
  .hub-grid { gap: 12px; margin-top: 0; }
  .hub-card { padding: 20px; }
  .hub-card-title { font-size: 17px; }
}
.hub-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 24px;
  background: var(--surface-raised);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-lg);
  transition: var(--dur-short) var(--ease-out);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.hub-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-warm-bd);
  box-shadow: var(--shadow-md);
}
.hub-card-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent-warm);
  text-transform: uppercase;
}
.hub-card-title {
  font-size: 18px; font-weight: 700;
  color: var(--fg-primary);
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.hub-card-desc {
  font-size: 13px; line-height: 1.55;
  color: var(--fg-muted);
  flex: 1;
}
.hub-card-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700;
  color: var(--accent-warm);
  margin-top: 4px;
}
.hub-card-cta svg { width: 12px; height: 12px; stroke-width: 2.4; transition: transform var(--dur-micro) var(--ease-out); }
.hub-card:hover .hub-card-cta svg { transform: translateX(3px); }
.hub-card-status {
  position: absolute;
  top: 14px; right: 14px;
  font-size: 9px; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
}
.hub-card-status.is-ready {
  background: var(--signal-positive-dim);
  border: 1px solid var(--signal-positive-bd);
  color: var(--signal-positive);
}
.hub-card-status.is-todo {
  background: var(--surface-elevated);
  border: 1px solid var(--line-default);
  color: var(--fg-muted);
}