/* ═════════════════════════════════════════════════════════════════
   SoloDial Design System
   Dark-first. Fraunces display serif + DM Sans body + JetBrains Mono.
   Components: sd-btn, sd-input, sd-card, sd-badge, sd-stat, sd-tabs,
   sd-section, sd-empty, sd-form-group, sd-breadcrumb, sd-hero, sd-chip.
   ═════════════════════════════════════════════════════════════════ */

:root {
  /*. Surface tokens (dark-first). */
  --bg-body: #09090c;
  --bg-sidebar: #0b0b10;
  --bg-sidebar-hover: rgba(82,82,91,0.18);
  --bg-active: rgba(129,140,248,0.12);
  --bg-active-border: rgba(129,140,248,0.55);
  --bg-card: #101017;
  --bg-card-hover: #14141c;
  --bg-card-raised: #17171f;
  --bg-input: #12121a;
  --bg-input-hover: #161622;
  --bg-topbar: rgba(9,9,12,0.85);
  --bg-overlay: rgba(3,3,6,0.72);

  /*. Text tokens. */
  --text-primary: #f5f5f7;
  --text-secondary: #c4c4cc;
  --text-tertiary: #8a8a95;
  --text-muted: #5b5b67;
  --text-faint: #3d3d47;
  --text-accent: #a5b4fc;
  --text-accent-bright: #c7d2fe;
  --text-on-accent: #ffffff;
  --text-link: #a5b4fc;
  --text-link-hover: #c7d2fe;

  /*. Border tokens. */
  --border-default: rgba(80,80,95,0.22);
  --border-subtle: rgba(80,80,95,0.12);
  --border-strong: rgba(120,120,140,0.40);
  --border-focus: rgba(129,140,248,0.65);

  /*. Accent palette, Primary: deep indigo/violet
     Signal: electric lime (success / live state)
     Warm: honey amber (warning / info)
     Alert: coral rose (error)                     */
  --accent: #6366f1;
  --accent-bright: #818cf8;
  --accent-deep: #4338ca;
  --signal: #a3e635;
  --signal-deep: #65a30d;
  --warm: #fbbf24;
  --warm-deep: #d97706;
  --alert: #fb7185;
  --alert-deep: #e11d48;

  /*. Status surface pairs (bg / text / border). */
  --status-success-bg: rgba(163,230,53,0.10);
  --status-success-fg: #bef264;
  --status-success-bd: rgba(163,230,53,0.28);
  --status-warn-bg: rgba(251,191,36,0.10);
  --status-warn-fg: #fcd34d;
  --status-warn-bd: rgba(251,191,36,0.28);
  --status-error-bg: rgba(251,113,133,0.12);
  --status-error-fg: #fda4af;
  --status-error-bd: rgba(251,113,133,0.30);
  --status-info-bg: rgba(129,140,248,0.12);
  --status-info-fg: #a5b4fc;
  --status-info-bd: rgba(129,140,248,0.30);
  --status-neutral-bg: rgba(113,113,122,0.14);
  --status-neutral-fg: #d4d4d8;
  --status-neutral-bd: rgba(113,113,122,0.30);

  /*. Shadows. */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.35);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.40);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.55);
  --shadow-glow: 0 0 48px rgba(99,102,241,0.28);
  --shadow-focus: 0 0 0 3px rgba(129,140,248,0.25);

  /*. Radii. */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 9999px;

  /*. Typographic scale, Using a 1.22 ratio from 14 → display sizes.        */
  --fs-micro: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: 26px;
  --fs-3xl: 34px;
  --fs-4xl: 46px;
  --fs-5xl: 62px;
  --fs-6xl: 82px;

  /*. Spacing scale. */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 44px;
  --sp-9: 60px;
  --sp-10: 88px;

  /*. Legacy tokens (back-compat for existing markup). */
  --flash-success-bg: var(--status-success-bg);
  --flash-success-border: var(--status-success-bd);
  --flash-success-text: var(--status-success-fg);
  --flash-error-bg: var(--status-error-bg);
  --flash-error-border: var(--status-error-bd);
  --flash-error-text: var(--status-error-fg);
  --shadow-sidebar: 1px 0 0 var(--border-default);
  --logo-accent: var(--accent-bright);
  --logo-text: #ffffff;
  --logo-filter: none;
  --user-avatar-bg: rgba(99,102,241,0.20);
  --user-avatar-text: var(--accent-bright);

  /*. Font families. */
  --ff-display: "Fraunces", "Iowan Old Style", "Palatino"Georgia, serif;
  --ff-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --ff-mono: "JetBrains Mono", "SF Mono"Menlo, Consolas, monospace;

  /*. Marketing-surface tokens (dark default). */
  --mkt-body-bg: #09090c;
  --mkt-body-gradient:
    radial-gradient(1000px 500px at 50% -10%, rgba(99,102,241,0.14), transparent 60%),
    radial-gradient(700px 400px at 85% 40%, rgba(163,230,53,0.06), transparent 70%),
    radial-gradient(600px 300px at 10% 60%, rgba(251,113,133,0.05), transparent 70%);
  --mkt-nav-bg: rgba(9,9,12,0.55);
  --mkt-grain-opacity: 0.06;
  --mkt-glass: rgba(17,17,24,0.55);
  --mkt-glass-strong: rgba(17,17,24,0.65);
  --mkt-glass-deep: rgba(17,17,24,0.85);
  --mkt-eyebrow-bg: rgba(17,17,24,0.55);
  --mkt-row-art-bg: linear-gradient(140deg, rgba(99,102,241,0.16), rgba(17,17,24,0.7));
  --mkt-row-art-glow: radial-gradient(circle at 20% 20%, rgba(129,140,248,0.28), transparent 40%);
  --mkt-phone-frame-bg: linear-gradient(180deg, rgba(17,17,24,0.95), rgba(9,9,12,0.95));
  --mkt-phone-frame-border: rgba(129,140,248,0.35);
  --mkt-waveform-color: var(--signal);
  --mkt-waveform-color-strong: #22c55e;
}

/* ═════════ LIGHT MODE (clean CSS-var inversion) ═════════ */
html.light {
  --bg-body: #f7f7f9;
  --bg-sidebar: #ffffff;
  --bg-sidebar-hover: rgba(17,17,24,0.04);
  --bg-active: rgba(99,102,241,0.08);
  --bg-active-border: rgba(99,102,241,0.55);
  --bg-card: #ffffff;
  --bg-card-hover: #fafafb;
  --bg-card-raised: #ffffff;
  --bg-input: #f5f5f7;          /* off-white so fields are visible on white cards */
  --bg-input-hover: #eeeef2;
  --bg-topbar: rgba(255,255,255,0.88);
  --bg-overlay: rgba(17,17,24,0.45);

  --text-primary: #0f0f14;
  --text-secondary: #2a2a33;     /* was #35353f, darker for better card contrast */
  --text-tertiary: #4b4b55;      /* was #5b5b67, darker on white */
  --text-muted: #6a6a74;         /* was #8a8a95, now ~6.4:1 on white */
  --text-faint: #9a9aa3;         /* was #b8b8c0 */
  --text-accent: #4338ca;
  --text-accent-bright: #3730a3;
  --text-link: #4f46e5;
  --text-link-hover: #3730a3;

  --border-default: rgba(17,17,24,0.22);      /* stronger so inputs read */
  --border-subtle:  rgba(17,17,24,0.08);
  --border-strong:  rgba(17,17,24,0.38);

  /* Semantic accents, the dark-mode lime / coral / amber are too pale on
     white. Override to WCAG-friendly versions so every pulse dot, chip,
     waveform, icon, and badge that uses these tokens stays readable. */
  --signal: #15803d;        /* was #a3e635 (lime) */
  --signal-deep: #14532d;
  --alert: #dc2626;         /* was #fb7185 (coral) */
  --alert-deep: #991b1b;
  --warm: #b45309;          /* was #fbbf24 (amber) */
  --warm-deep: #78350f;
  --accent-bright: #4f46e5; /* was #818cf8, brighter-on-dark variant */

  --status-success-fg: #166534;
  --status-success-bg: rgba(22,163,74,0.10);
  --status-success-bd: rgba(22,163,74,0.35);
  --status-warn-fg: #92400e;
  --status-warn-bg: rgba(217,119,6,0.10);
  --status-warn-bd: rgba(217,119,6,0.35);
  --status-error-fg: #991b1b;
  --status-error-bg: rgba(220,38,38,0.10);
  --status-error-bd: rgba(220,38,38,0.35);
  --status-info-fg: #3730a3;
  --status-info-bg: rgba(99,102,241,0.10);
  --status-info-bd: rgba(99,102,241,0.35);
  --status-neutral-fg: #3f3f46;
  --status-neutral-bg: rgba(113,113,122,0.10);
  --status-neutral-bd: rgba(113,113,122,0.30);

  --shadow-xs: 0 1px 2px rgba(17,17,24,0.05);
  --shadow-sm: 0 2px 6px rgba(17,17,24,0.06);
  --shadow-md: 0 10px 30px rgba(17,17,24,0.08);
  --shadow-lg: 0 24px 60px rgba(17,17,24,0.12);
  --shadow-glow: 0 0 48px rgba(99,102,241,0.20);
  --shadow-focus: 0 0 0 4px rgba(79,70,229,0.18);
  --border-focus: #4f46e5;

  --logo-filter: invert(1);

  /*. Marketing-surface tokens (light mode). */
  --mkt-body-bg: #fafbfc;
  --mkt-body-gradient:
    radial-gradient(1100px 520px at 50% -10%, rgba(99,102,241,0.10), transparent 55%),
    radial-gradient(720px 420px at 85% 35%, rgba(34,197,94,0.07), transparent 70%),
    radial-gradient(640px 320px at 10% 55%, rgba(251,113,133,0.06), transparent 70%);
  --mkt-nav-bg: rgba(255,255,255,0.78);
  --mkt-grain-opacity: 0.04;
  --mkt-glass: rgba(255,255,255,0.75);
  --mkt-glass-strong: #ffffff;
  --mkt-glass-deep: #ffffff;
  --mkt-eyebrow-bg: rgba(255,255,255,0.85);
  --mkt-row-art-bg: linear-gradient(140deg, rgba(99,102,241,0.10), rgba(255,255,255,0.92));
  --mkt-row-art-glow: radial-gradient(circle at 20% 20%, rgba(99,102,241,0.18), transparent 45%);
  --mkt-phone-frame-bg: linear-gradient(180deg, #ffffff, #f5f5f7);
  --mkt-phone-frame-border: rgba(99,102,241,0.25);
  --mkt-waveform-color: #16a34a;
  --mkt-waveform-color-strong: #15803d;
}

/* ═════════════════════ BASE ═════════════════════ */

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

html, body { background: var(--bg-body); color: var(--text-primary); }

body {
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}

code, pre, kbd, samp { font-family: var(--ff-mono); font-size: 0.92em; }

/* Selection */
::selection { background: rgba(129,140,248,0.35); color: var(--text-primary); }

/* Focus ring, subtle and consistent */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-color: var(--border-focus);
}

/* ═════════════════════ TYPOGRAPHY ═════════════════════ */

.sd-display {
  font-family: var(--ff-display);
  font-weight: 500;
  font-style: normal;
  letter-spacing: -0.025em;
  line-height: 1.02;
  font-variation-settings: "SOFT" 25, "WONK" 0, "opsz" 144;
  color: var(--text-primary);
}
.sd-display em {
  font-style: italic;
  font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 144;
  color: var(--text-accent-bright);
}

.sd-h1 { font-size: var(--fs-4xl); line-height: 1.08; letter-spacing: -0.02em; font-weight: 600; color: var(--text-primary); }
.sd-h2 { font-size: var(--fs-3xl); line-height: 1.12; letter-spacing: -0.018em; font-weight: 600; color: var(--text-primary); }
.sd-h3 { font-size: var(--fs-2xl); line-height: 1.2; letter-spacing: -0.012em; font-weight: 600; color: var(--text-primary); }
.sd-h4 { font-size: var(--fs-xl); line-height: 1.3; font-weight: 600; color: var(--text-primary); }
.sd-lede { font-size: var(--fs-lg); color: var(--text-secondary); line-height: 1.55; }
.sd-body { font-size: var(--fs-base); color: var(--text-secondary); line-height: 1.6; }
.sd-body-tight { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.55; }
.sd-caption { font-size: var(--fs-xs); color: var(--text-tertiary); line-height: 1.5; }
.sd-micro { font-size: var(--fs-micro); color: var(--text-muted); line-height: 1.4; }
.sd-eyebrow {
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-tertiary);
}
.sd-mkt-section .sd-eyebrow,
.sd-hero .sd-eyebrow,
.sd-pitch .sd-eyebrow {
  color: var(--text-accent-bright);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.sd-mkt-section .sd-eyebrow::before,
.sd-hero .sd-eyebrow::before,
.sd-pitch .sd-eyebrow::before {
  content: "";
  width: 20px;
  height: 1px;
  background: linear-gradient(to right, transparent, currentColor);
  flex-shrink: 0;
}

.sd-mono { font-family: var(--ff-mono); }

.sd-text-muted    { color: var(--text-muted); }
.sd-text-tertiary { color: var(--text-tertiary); }
.sd-text-secondary{ color: var(--text-secondary); }
.sd-text-primary  { color: var(--text-primary); }
.sd-text-accent   { color: var(--text-accent); }
.sd-text-signal   { color: var(--signal); }
.sd-text-warm     { color: var(--warm); }
.sd-text-alert    { color: var(--alert); }

/* ═════════════════════ LAYOUT & SURFACES ═════════════════════ */

.sd-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-bottom: var(--sp-7);
}
.sd-page-header__title { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.012em; color: var(--text-primary); margin: 0; }
.sd-page-header__subtitle { margin: 6px 0 0; color: var(--text-tertiary); font-size: var(--fs-sm); }
.sd-page-header__actions { display: flex; gap: var(--sp-3); align-items: center; flex-shrink: 0; }

.sd-section-title {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin: 0 0 var(--sp-3);
}

/*. Cards. */
.sd-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  position: relative;
}
.sd-card--flush { padding: 0; overflow: hidden; }
.sd-card--tight { padding: var(--sp-5); }
.sd-card--raised { background: var(--bg-card-raised); box-shadow: var(--shadow-sm); }
.sd-card--interactive { transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; }
.sd-card--interactive:hover { border-color: var(--border-strong); background: var(--bg-card-hover); }
a.sd-card, button.sd-card { display: block; text-align: left; cursor: pointer; color: inherit; }

.sd-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--border-default);
}
.sd-card__title { font-size: var(--fs-lg); font-weight: 600; color: var(--text-primary); margin: 0; }
.sd-card__body { padding: var(--sp-6); }

.sd-divider { height: 1px; background: var(--border-default); border: 0; margin: var(--sp-6) 0; }

/*. Stat cards. */
.sd-stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  transition: border-color 0.15s ease, background 0.15s ease;
  position: relative;
  overflow: hidden;
}
.sd-stat:hover { border-color: var(--border-strong); background: var(--bg-card-hover); }
.sd-stat__label { font-size: var(--fs-xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; }
.sd-stat__value { font-family: var(--ff-display); font-weight: 500; font-size: var(--fs-3xl); letter-spacing: -0.02em; color: var(--text-primary); line-height: 1; font-variation-settings: "opsz" 144; }
.sd-stat__delta { font-size: var(--fs-xs); color: var(--text-tertiary); }
.sd-stat__delta--up { color: var(--signal); }
.sd-stat__delta--down { color: var(--alert); }
.sd-stat--accent::after {
  content: "";
  position: absolute;
  right: -20px;
  top: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(129,140,248,0.25), transparent 70%);
  pointer-events: none;
}

/*. Empty states. */
.sd-empty {
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--sp-9) var(--sp-6);
  text-align: center;
  background: var(--bg-card);
}
.sd-empty__icon {
  width: 56px; height: 56px;
  margin: 0 auto var(--sp-4);
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-active);
  color: var(--text-accent);
}
.sd-empty__title { font-family: var(--ff-display); font-size: var(--fs-xl); color: var(--text-primary); margin: 0 0 var(--sp-2); font-weight: 500; }
.sd-empty__body { color: var(--text-tertiary); font-size: var(--fs-sm); max-width: 32em; margin: 0 auto var(--sp-5); }

/*. Breadcrumbs. */
.sd-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}
.sd-breadcrumb a {
  color: var(--text-tertiary);
  text-decoration: none;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  transition: background 0.12s ease, color 0.12s ease;
}
.sd-breadcrumb a:hover { color: var(--text-primary); background: var(--bg-sidebar-hover); }
.sd-breadcrumb__sep { color: var(--text-faint); user-select: none; }
.sd-breadcrumb__current { color: var(--text-secondary); padding: 2px 8px; }

/*. Section headers (inline). */
.sd-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.sd-section__title { font-size: var(--fs-lg); font-weight: 600; color: var(--text-primary); margin: 0; }

/* ═════════════════════ BUTTONS ═════════════════════ */

.sd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 10px 18px;
  border-radius: var(--radius-md);
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  font-weight: 550;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.08s ease, box-shadow 0.2s;
  border: 1px solid transparent;
  white-space: nowrap;
  text-decoration: none;
  color: var(--text-primary);
  background: var(--bg-card);
  border-color: var(--border-default);
}
.sd-btn:hover { background: var(--bg-card-hover); border-color: var(--border-strong); }
.sd-btn:active { transform: translateY(0.5px); }
.sd-btn:disabled.sd-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.sd-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.sd-btn--primary {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 50%, #4338ca 100%);
  color: #ffffff;
  border-color: transparent;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.22) inset,
    0 14px 28px -10px rgba(99,102,241,0.55),
    0 0 0 1px rgba(99,102,241,0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.sd-btn--primary:hover {
  background: linear-gradient(135deg, #7c7ff5 0%, #6366f1 50%, #4f46e5 100%);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.28) inset,
    0 18px 36px -10px rgba(99,102,241,0.65),
    0 0 0 1px rgba(99,102,241,0.50),
    0 0 28px -6px rgba(34,197,94,0.25);
}

.sd-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}
.sd-btn--ghost:hover { background: var(--bg-sidebar-hover); color: var(--text-primary); border-color: transparent; }

.sd-btn--outline {
  background: transparent;
  border-color: var(--border-default);
  color: var(--text-primary);
}
.sd-btn--outline:hover { background: var(--bg-card-hover); border-color: var(--border-strong); }

.sd-btn--signal {
  background: var(--signal);
  color: #1a2d03;
  border-color: transparent;
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 10px 30px -14px rgba(163,230,53,0.55);
}
.sd-btn--signal:hover { background: #b4ef47; }

.sd-btn--danger {
  background: rgba(251,113,133,0.12);
  color: var(--alert);
  border-color: rgba(251,113,133,0.35);
}
.sd-btn--danger:hover { background: rgba(251,113,133,0.18); border-color: rgba(251,113,133,0.55); }

.sd-btn--lg { padding: 14px 26px; font-size: var(--fs-base); border-radius: var(--radius-md); }
.sd-btn--xl { padding: 18px 34px; font-size: var(--fs-lg); border-radius: var(--radius-lg); }
.sd-btn--sm { padding: 7px 12px; font-size: var(--fs-xs); border-radius: var(--radius-sm); }
.sd-btn--block { width: 100%; }
.sd-btn--icon { padding: 10px; aspect-ratio: 1; }

/*. Icon button (square). */
.sd-icon-btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
  background: var(--bg-card);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.sd-icon-btn:hover { color: var(--text-primary); border-color: var(--border-strong); background: var(--bg-card-hover); }
.sd-icon-btn svg { width: 16px; height: 16px; }

/* ═════════════════════ FORMS ═════════════════════ */

.sd-form-group { display: flex; flex-direction: column; gap: 4px; }
.sd-help { font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 6px; line-height: 1.5; }

/* Vertical rhythm inside a card. Any card that holds a form
   should get this class so every direct child gets a predictable
   24px gap, no more hand-coded margin-top on individual groups. */
.sd-form-card {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.sd-form-card > .sd-eyebrow { margin-bottom: 0; }

/* Multi-column form row. Breakpoint stacks to one column below
   620px. Use --2 or --3 to set the column count. */
.sd-form-row {
  display: grid;
  gap: 16px;
}
.sd-form-row--2 { grid-template-columns: 1fr 1fr; }
.sd-form-row--3 { grid-template-columns: 1.2fr 1.2fr 0.8fr; }
@media (max-width: 680px) {
  .sd-form-row--2,
  .sd-form-row--3 { grid-template-columns: 1fr; }
}

/* ═════════════════════════════════════════════════════════════════
   VARIABLE REFERENCE GUIDE — inline collapsible grid under a field.
   Click any variable to insert it at the cursor of the target input.
   ═════════════════════════════════════════════════════════════════ */
.sd-var-ref {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: 12px;
}
.sd-var-ref[open] {
  padding-bottom: 16px;
}
.sd-var-ref__summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-accent-bright);
  padding: 2px 0;
  user-select: none;
}
.sd-var-ref__summary::-webkit-details-marker { display: none; }
.sd-var-ref__chevron {
  display: inline-flex;
  transition: transform 0.2s ease;
}
.sd-var-ref[open] .sd-var-ref__chevron { transform: rotate(180deg); }

.sd-var-ref__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 24px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border-subtle);
}
@media (max-width: 640px) {
  .sd-var-ref__grid { grid-template-columns: 1fr; gap: 4px; }
}

.sd-var-ref__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  background: none;
  border: none;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: background 0.15s ease;
  min-width: 0;
}
.sd-var-ref__item:hover {
  background: var(--bg-card-hover);
}
.sd-var-ref__name {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-accent-bright);
  flex-shrink: 0;
  white-space: nowrap;
}
.sd-var-ref__item:hover .sd-var-ref__name {
  text-decoration: underline;
}
.sd-var-ref__label {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sd-var-ref__item[draggable="true"] {
  cursor: grab;
}
.sd-var-ref__item[draggable="true"]:active {
  cursor: grabbing;
}

/* Field highlight while a variable row is being dragged over it */
.sd-var-drop-target {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35) !important;
  border-color: rgba(99, 102, 241, 0.55) !important;
}

/* ═════════════════════════════════════════════════════════════════
   VARIABLE AUTOCOMPLETE — floating menu that appears when the user
   types "{{" in a variable-capable field. Filters by prefix as they
   type, Enter / Tab / click inserts the full {{NAME}} token.
   ═════════════════════════════════════════════════════════════════ */
.sd-var-autocomplete {
  position: absolute;
  z-index: 60;
  min-width: 320px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow:
    0 24px 60px -12px rgba(17, 17, 24, 0.28),
    0 0 0 1px rgba(99, 102, 241, 0.08);
  padding: 6px;
  animation: sd-var-ac-in 0.16s ease-out;
}
@keyframes sd-var-ac-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sd-var-autocomplete__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  background: none;
  border: none;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease;
}
.sd-var-autocomplete__item:hover,
.sd-var-autocomplete__item.is-active {
  background: color-mix(in srgb, #6366f1 12%, var(--bg-card));
}
.sd-var-autocomplete__name {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-accent-bright);
  flex-shrink: 0;
  white-space: nowrap;
}
.sd-var-autocomplete__item.is-active .sd-var-autocomplete__name {
  color: #4f46e5;
}
.sd-var-autocomplete__label {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sd-var-autocomplete__item.is-active .sd-var-autocomplete__label {
  color: var(--text-secondary);
}

/* ═════════════════════════════════════════════════════════════════
   PRESET LIST EDITOR — structured rows for admin presets page
   ═════════════════════════════════════════════════════════════════ */
.sd-preset-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sd-preset-empty {
  padding: 24px 20px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--fs-sm);
  background: var(--bg-input);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
}
.sd-preset-entry {
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.sd-preset-entry:hover {
  border-color: var(--border-strong);
  box-shadow: 0 6px 20px -10px rgba(17,17,24,0.12);
}
.sd-preset-entry__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, rgba(99,102,241,0.04), transparent);
}
.sd-preset-entry__label {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.sd-preset-entry__index {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-accent-bright);
  background: rgba(99,102,241,0.10);
  border: 1px solid rgba(99,102,241,0.22);
  padding: 3px 8px;
  border-radius: 6px;
  flex-shrink: 0;
}
.sd-preset-entry__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs-base);
  color: var(--text-primary);
  letter-spacing: -0.004em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sd-preset-entry__remove {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.sd-preset-entry__remove:hover {
  color: var(--alert);
  border-color: var(--alert);
  background: rgba(220,38,38,0.08);
}
.sd-preset-entry__body {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sd-preset-entry__tag {
  font-family: var(--ff-body);
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-style: italic;
}
details.sd-preset-entry > summary {
  cursor: pointer;
  list-style: none;
}
details.sd-preset-entry > summary::-webkit-details-marker { display: none; }
details.sd-preset-entry > summary::after {
  content: "▾";
  margin-left: auto;
  color: var(--text-tertiary);
  font-size: 14px;
  transition: transform 0.2s ease;
  order: 0;
  padding-right: 8px;
}
details.sd-preset-entry[open] > summary::after {
  transform: rotate(180deg);
}

/* Simple name + text row editor (used by /admin/presets) */
.sd-preset-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.sd-preset-row:last-child { border-bottom: none; padding-bottom: 6px; }
.sd-preset-row:first-child { padding-top: 6px; }
.sd-preset-row__fields {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sd-preset-row__remove {
  flex-shrink: 0;
  margin-top: 28px;
  background: none;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.sd-preset-row__remove:hover {
  color: var(--alert);
  border-color: var(--alert);
  background: rgba(220,38,38,0.08);
}

/* Rails button_to wraps every button in its own <form>. Make that
   wrapper transparent to flex/grid layouts so a trash button in a
   row doesn't collapse into a block. */
form.button_to { display: contents; }

/* ═════════════════════════════════════════════════════════════════
   TRIGGER LIST — functions/actions available to a voice agent
   ═════════════════════════════════════════════════════════════════ */
.sd-trigger-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sd-trigger {
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: 14px;
  padding: 14px 16px;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.sd-trigger--on {
  border-color: rgba(99,102,241,0.45);
  background: color-mix(in srgb, #6366f1 4%, var(--bg-input));
}
.sd-trigger__head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.sd-trigger__icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text-tertiary);
  border: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sd-trigger--on .sd-trigger__icon {
  color: #4f46e5;
  background: rgba(99,102,241,0.12);
  border-color: rgba(99,102,241,0.40);
}
.sd-trigger__meta { flex: 1; min-width: 0; }
.sd-trigger__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  letter-spacing: -0.003em;
}
.sd-trigger__desc {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  line-height: 1.45;
  margin-top: 2px;
}
.sd-trigger__body {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-subtle);
}
.sd-trigger--on .sd-trigger__body {
  display: block;
}
.sd-trigger:not(.sd-trigger--on) .sd-trigger__body {
  display: none;
}
.sd-trigger__missing {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  padding: 8px 12px;
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.28);
  border-radius: 8px;
}
.sd-trigger__missing svg {
  color: #b45309;
  flex-shrink: 0;
}
.sd-trigger__builtin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--signal-deep);
  padding: 6px 10px;
  background: rgba(34,197,94,0.10);
  border: 1px solid rgba(34,197,94,0.28);
  border-radius: 6px;
}

/* ─── Grouped actions & connections (new unified UI) ─── */
.sd-action-group {
  border: 1px solid var(--border-default);
  border-radius: 14px;
  background: var(--bg-input);
  overflow: hidden;
  position: relative;
}
.sd-action-group::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--group-accent, var(--accent));
  opacity: 0.85;
}
.sd-action-group__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px 12px;
}
.sd-action-group__icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--group-accent, var(--accent)) 12%, transparent);
  color: var(--group-accent, var(--accent));
  border: 1px solid color-mix(in srgb, var(--group-accent, var(--accent)) 28%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sd-action-group__meta { flex: 1; min-width: 0; }
.sd-action-group__title {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--fs-base);
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.sd-action-group__desc {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  margin-top: 2px;
  line-height: 1.45;
}
.sd-action-group__picker {
  padding: 0 18px 14px;
}
.sd-action-group__picker .sd-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  margin-bottom: 6px;
  display: block;
}
.sd-action-group__missing {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  padding: 8px 12px;
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.28);
  border-radius: 8px;
}
.sd-action-group__missing svg { color: #b45309; flex-shrink: 0; }
.sd-action-group__missing a {
  color: var(--text-accent-bright);
  font-weight: 600;
  margin-left: 4px;
  text-decoration: none;
}
.sd-action-group__list {
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
}
.sd-action-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  cursor: pointer;
  border-top: 1px solid var(--border-subtle);
  transition: background 0.15s ease;
}
.sd-action-row:first-child { border-top: none; }
.sd-action-row:hover {
  background: color-mix(in srgb, var(--group-accent, var(--accent)) 4%, transparent);
}
.sd-action-row__icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text-tertiary);
  border: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sd-action-row--on .sd-action-row__icon {
  color: var(--group-accent, var(--accent));
  background: color-mix(in srgb, var(--group-accent, var(--accent)) 12%, transparent);
  border-color: color-mix(in srgb, var(--group-accent, var(--accent)) 32%, transparent);
}
.sd-action-row__meta { flex: 1; min-width: 0; }
.sd-action-row__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--text-primary);
}
.sd-action-row__desc {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  line-height: 1.4;
  margin-top: 1px;
}

/* ─── SIP / PBX info card inside Phone line section ─── */
.sd-sip-card {
  --sip-accent: var(--text-tertiary);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--sip-accent);
  border-radius: 12px;
  background: var(--bg-input);
  overflow: hidden;
}
.sd-sip-card.sd-sip-live    { --sip-accent: #22c55e; }
.sd-sip-card.sd-sip-pending { --sip-accent: #f59e0b; }
.sd-sip-card.sd-sip-off     { --sip-accent: #94a3b8; }
.sd-sip-card.sd-sip-none    { --sip-accent: var(--border-default); border-style: dashed; }
.sd-sip-card__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px 12px;
}
.sd-sip-card__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--sip-accent) 14%, transparent);
  color: var(--sip-accent);
  border: 1px solid color-mix(in srgb, var(--sip-accent) 32%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sd-sip-card__icon--muted {
  background: var(--bg-card);
  color: var(--text-tertiary);
  border-color: var(--border-default);
}
.sd-sip-card__meta { flex: 1; min-width: 0; }
.sd-sip-card__eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
  font-weight: 600;
}
.sd-sip-card__title {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--fs-base);
  color: var(--text-primary);
  margin-top: 2px;
  letter-spacing: -0.003em;
}
.sd-sip-card__sub {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  margin-top: 3px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sd-sip-card__status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.sd-sip-card__last {
  font-size: 10px;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.sd-sip-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.sd-sip-pill--live {
  background: rgba(34, 197, 94, 0.14);
  color: #15803d;
  border: 1px solid rgba(34, 197, 94, 0.35);
}
.sd-sip-pill--pending {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.35);
}
.sd-sip-pill--off {
  background: var(--bg-card);
  color: var(--text-tertiary);
  border: 1px solid var(--border-default);
}
.sd-sip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
  animation: sd-sip-pulse 2s ease-in-out infinite;
}
@keyframes sd-sip-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
.sd-sip-pill--off .sd-sip-dot,
.sd-sip-pill--pending .sd-sip-dot { animation: none; }
.sd-sip-card__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 12px;
  border-top: 1px dashed var(--border-subtle);
  flex-wrap: wrap;
}

/* ═════════════════════════════════════════════════════════════════
   CONCIERGE INVITE CARD — big banner above the wizard
   ═════════════════════════════════════════════════════════════════ */
.sd-concierge-invite {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 28px 32px;
  margin-bottom: 32px;
  border-radius: 22px;
  border: 1px solid rgba(99, 102, 241, 0.42);
  background: linear-gradient(135deg, #0f0f1e 0%, #1a1a2e 100%);
  box-shadow:
    0 32px 70px -20px rgba(99, 102, 241, 0.45),
    0 0 0 1px rgba(99, 102, 241, 0.25),
    0 0 80px -20px rgba(99, 102, 241, 0.30);
  overflow: hidden;
  isolation: isolate;
  animation: sd-invite-in 0.6s ease-out;
}
html.light .sd-concierge-invite {
  background:
    linear-gradient(135deg, #ffffff 0%, #f5f5ff 100%);
  border-color: rgba(99, 102, 241, 0.35);
  box-shadow:
    0 28px 60px -18px rgba(99, 102, 241, 0.25),
    0 0 0 1px rgba(99, 102, 241, 0.15);
}
@keyframes sd-invite-in {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sd-concierge-invite.is-dismissing {
  animation: sd-invite-out 0.28s ease-in forwards;
}
@keyframes sd-invite-out {
  to { opacity: 0; transform: scale(0.96) translateY(-8px); }
}

.sd-concierge-invite__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.sd-concierge-invite__orb {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.55), transparent 70%);
  top: -180px;
  right: -120px;
  filter: blur(30px);
  animation: sd-invite-drift 18s ease-in-out infinite alternate;
}
.sd-concierge-invite__orb--2 {
  top: auto;
  right: auto;
  bottom: -200px;
  left: -100px;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(34,197,94,0.35), transparent 70%);
  animation-duration: 24s;
  animation-direction: alternate-reverse;
}
@keyframes sd-invite-drift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-4%, 6%) scale(1.08); }
}
.sd-concierge-invite__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black, transparent 90%);
  opacity: 0.55;
}
html.light .sd-concierge-invite__grid {
  background-image:
    linear-gradient(to right,  rgba(99,102,241,0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(99,102,241,0.08) 1px, transparent 1px);
}

.sd-concierge-invite > *:not(.sd-concierge-invite__bg):not(.sd-concierge-invite__close) {
  position: relative;
  z-index: 1;
}

/* Avatar with breathing animation and two radar rings */
.sd-concierge-invite__avatar {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 22px;
  background: linear-gradient(135deg, #818cf8, #4f46e5 60%, #4338ca);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 18px 40px -12px rgba(99, 102, 241, 0.75),
    inset 0 2px 0 rgba(255,255,255,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.18);
  flex-shrink: 0;
  animation: sd-invite-breathe 3.2s ease-in-out infinite;
}
@keyframes sd-invite-breathe {
  0%, 100% { transform: scale(1);    box-shadow: 0 18px 40px -12px rgba(99,102,241,0.75), inset 0 2px 0 rgba(255,255,255,0.35); }
  50%      { transform: scale(1.06); box-shadow: 0 24px 60px -10px rgba(99,102,241,1),    inset 0 2px 0 rgba(255,255,255,0.50); }
}
.sd-concierge-invite__ring {
  position: absolute;
  inset: -6px;
  border-radius: 26px;
  border: 2px solid rgba(129, 140, 248, 0.6);
  opacity: 0;
  animation: sd-invite-ring 2.4s ease-out infinite;
  pointer-events: none;
}
.sd-concierge-invite__ring--2 { animation-delay: 1.2s; }
@keyframes sd-invite-ring {
  0%   { transform: scale(0.90); opacity: 0.85; }
  70%  { transform: scale(1.35); opacity: 0;    }
  100% { transform: scale(1.35); opacity: 0;    }
}

.sd-concierge-invite__copy {
  min-width: 0;
}
.sd-concierge-invite__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.18);
  border: 1px solid rgba(99, 102, 241, 0.40);
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #a5b4fc;
  margin-bottom: 14px;
}
html.light .sd-concierge-invite__kicker {
  background: rgba(99, 102, 241, 0.10);
  color: #4338ca;
}
.sd-concierge-invite__pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #a5b4fc;
  box-shadow: 0 0 8px #a5b4fc;
  animation: sd-pulse 1.8s ease-in-out infinite;
}
html.light .sd-concierge-invite__pulse {
  background: #4f46e5;
  box-shadow: 0 0 8px #4f46e5;
}
.sd-concierge-invite__title {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.1;
  color: #ffffff;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
}
html.light .sd-concierge-invite__title { color: var(--text-primary); }
.sd-concierge-invite__title em {
  font-style: italic;
  background: linear-gradient(120deg, #a5b4fc, #818cf8 50%, #4ade80);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
html.light .sd-concierge-invite__title em {
  background: linear-gradient(120deg, #4f46e5, #6366f1 50%, #15803d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.sd-concierge-invite__sub {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.70);
  line-height: 1.55;
  max-width: 56ch;
  margin: 0;
}
html.light .sd-concierge-invite__sub { color: var(--text-tertiary); }

.sd-concierge-invite__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  flex-shrink: 0;
}
.sd-concierge-invite__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px;
  border: none;
  border-radius: 14px;
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(135deg, #818cf8, #4f46e5 55%, #4338ca);
  box-shadow:
    0 18px 40px -12px rgba(99, 102, 241, 0.75),
    0 0 0 1px rgba(255, 255, 255, 0.10) inset;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.sd-concierge-invite__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.30) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: sd-invite-shimmer 3.6s ease-in-out infinite;
  animation-delay: 1.2s;
  pointer-events: none;
}
@keyframes sd-invite-shimmer {
  0%, 70% { transform: translateX(-100%); }
  100%    { transform: translateX(100%); }
}
.sd-concierge-invite__btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 24px 50px -10px rgba(99, 102, 241, 0.90),
    0 0 0 1px rgba(255, 255, 255, 0.20) inset;
}
.sd-concierge-invite__skip {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--fs-xs);
  cursor: pointer;
  padding: 4px;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.20);
}
html.light .sd-concierge-invite__skip {
  color: var(--text-tertiary);
  text-decoration-color: var(--border-default);
}
.sd-concierge-invite__skip:hover {
  color: rgba(255, 255, 255, 0.9);
}
html.light .sd-concierge-invite__skip:hover { color: var(--text-primary); }

.sd-concierge-invite__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}
html.light .sd-concierge-invite__close {
  background: var(--bg-card);
  border-color: var(--border-default);
  color: var(--text-tertiary);
}
.sd-concierge-invite__close:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.12);
}
html.light .sd-concierge-invite__close:hover {
  color: var(--text-primary);
  background: var(--bg-card-hover);
}

@media (max-width: 820px) {
  .sd-concierge-invite {
    grid-template-columns: 1fr;
    padding: 22px 22px 24px;
    gap: 18px;
  }
  .sd-concierge-invite__avatar { width: 68px; height: 68px; border-radius: 18px; }
  .sd-concierge-invite__cta { align-items: flex-start; width: 100%; }
  .sd-concierge-invite__btn { width: 100%; justify-content: center; }
}

/* ═════════════════════════════════════════════════════════════════
   ONBOARDING CONCIERGE — slide-over chat panel + field pulse
   ═════════════════════════════════════════════════════════════════ */
.sd-concierge-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 17, 24, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.sd-concierge-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.sd-concierge-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(440px, 100vw);
  background: var(--bg-card-raised);
  border-left: 1px solid var(--border-default);
  box-shadow: -24px 0 60px -20px rgba(17, 17, 24, 0.28);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(.2,.7,.2,1);
  z-index: 70;
  display: flex;
  flex-direction: column;
}
.sd-concierge-panel.is-open {
  transform: translateX(0);
}

.sd-concierge-panel__head {
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--border-subtle);
  background:
    radial-gradient(ellipse 360px 120px at 30% 0%, rgba(99,102,241,0.10), transparent 70%),
    linear-gradient(180deg, rgba(99,102,241,0.06), transparent);
}
.sd-concierge-panel__avatar {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px -6px rgba(99,102,241,0.55);
}
.sd-concierge-panel__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs-base);
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.sd-concierge-panel__sub {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}
.sd-concierge-panel__close {
  background: none;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.sd-concierge-panel__close:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.sd-concierge-panel__log {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background:
    radial-gradient(ellipse 500px 300px at 100% 0%, rgba(34,197,94,0.04), transparent 70%),
    var(--bg-card-raised);
}

.sd-concierge-bubble {
  max-width: 82%;
  padding: 12px 16px;
  border-radius: 18px;
  font-size: var(--fs-sm);
  line-height: 1.45;
  animation: sd-concierge-bubble-in 0.25s ease-out;
  word-wrap: break-word;
}
@keyframes sd-concierge-bubble-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sd-concierge-bubble--assistant {
  align-self: flex-start;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  border-bottom-left-radius: 6px;
}
.sd-concierge-bubble--user {
  align-self: flex-end;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #ffffff;
  border-bottom-right-radius: 6px;
  box-shadow: 0 8px 20px -8px rgba(99,102,241,0.45);
}

.sd-concierge-panel__status {
  padding: 8px 20px;
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-style: italic;
  border-top: 1px solid var(--border-subtle);
}
.sd-concierge-panel__status.is-success {
  color: var(--signal-deep);
  font-weight: 600;
  font-style: normal;
}

.sd-concierge-panel__foot {
  padding: 14px 16px 16px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: flex-end;
  gap: 10px;
  background: var(--bg-card-raised);
}
.sd-concierge-panel__input {
  flex: 1;
  resize: none;
  max-height: 140px;
  padding: 12px 14px;
  background: var(--bg-input);
  border: 1.5px solid var(--border-default);
  border-radius: 12px;
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s ease;
}
.sd-concierge-panel__input:focus {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
}
.sd-concierge-panel__send {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #ffffff;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px -6px rgba(99,102,241,0.55);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sd-concierge-panel__send:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -6px rgba(99,102,241,0.65);
}

.sd-concierge-panel__finish {
  position: absolute;
  bottom: 82px;
  left: 20px;
  right: 20px;
  padding: 14px 16px;
  background: rgba(34,197,94,0.10);
  border: 1px solid rgba(34,197,94,0.35);
  border-radius: 14px;
  display: flex;
  justify-content: center;
  animation: sd-concierge-bubble-in 0.3s ease-out;
}

body.sd-concierge-open { overflow: hidden; }

/* Field pulse: when the concierge fills a form field, flash a
   soft ring so the user sees where the answer landed. */
.sd-concierge-pulse {
  animation: sd-concierge-pulse 1.6s ease-out;
}
@keyframes sd-concierge-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(99,102,241,0.55); }
  30%  { box-shadow: 0 0 0 8px rgba(99,102,241,0.32); }
  70%  { box-shadow: 0 0 0 12px rgba(99,102,241,0.08); }
  100% { box-shadow: 0 0 0 0 rgba(99,102,241,0); }
}

/* Mobile: panel takes full width */
@media (max-width: 620px) {
  .sd-concierge-panel { width: 100vw; }
}

/* Message template editor row */
.sd-template-row {
  padding: 16px 18px;
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sd-template-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.sd-template-row__meta { min-width: 0; }
.sd-template-row__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  letter-spacing: -0.003em;
}
.sd-template-row__desc {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  margin-top: 3px;
  line-height: 1.45;
}
.sd-template-row__hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--text-tertiary);
  padding: 6px 10px;
  background: var(--bg-card);
  border: 1px dashed var(--border-subtle);
  border-radius: 6px;
  align-self: flex-start;
}

/* Small select variant, used inside a trigger body */
.sd-select--sm {
  font-size: var(--fs-sm);
  padding: 8px 12px;
  padding-right: 32px;
}

/* Toggle switch, iOS-style */
.sd-toggle {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  cursor: pointer;
}
.sd-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}
.sd-toggle__track {
  display: block;
  width: 42px;
  height: 24px;
  background: var(--border-default);
  border-radius: 999px;
  transition: background 0.22s ease;
  position: relative;
}
.sd-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 0.22s ease;
}
.sd-toggle input:checked ~ .sd-toggle__track {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
}
.sd-toggle input:checked ~ .sd-toggle__track .sd-toggle__thumb {
  transform: translateX(18px);
}
.sd-toggle input:focus ~ .sd-toggle__track {
  box-shadow: 0 0 0 4px rgba(99,102,241,0.18);
}

/* ═════════════════════════════════════════════════════════════════
   FILE DROP ZONE — big dashed box for uploading training material
   ═════════════════════════════════════════════════════════════════ */
.sd-drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 36px 24px;
  background: var(--bg-input);
  border: 2px dashed var(--border-default);
  border-radius: 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.sd-drop-zone:hover,
.sd-drop-zone.is-over {
  border-color: var(--section-accent, var(--text-accent-bright));
  background: color-mix(in srgb, var(--section-accent, #6366f1) 8%, var(--bg-input));
  transform: translateY(-1px);
}
.sd-drop-zone__icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--section-accent, #f59e0b) 18%, transparent);
  color: var(--section-accent, #f59e0b);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--section-accent, #f59e0b) 30%, transparent);
}
.sd-drop-zone__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs-base);
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.sd-drop-zone__hint {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}
.sd-drop-zone__picked {
  margin-top: 8px;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--text-accent-bright);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* File row list (attached training files) */
.sd-file-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  transition: border-color 0.15s ease;
}
.sd-file-row:hover {
  border-color: var(--border-strong);
}
.sd-file-row__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--bg-active);
  color: var(--text-accent-bright);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sd-file-row__meta {
  flex: 1;
  min-width: 0;
}
.sd-file-row__name {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sd-file-row__sub {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.sd-file-row__remove {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.sd-file-row__remove:hover {
  color: var(--alert);
  border-color: var(--alert);
  background: rgba(220,38,38,0.08);
}

/* ═════════════════════════════════════════════════════════════════
   SECTION CARD — collapsible card with per-section accent color.
   Used everywhere we want to group form fields / content into a
   visually distinct section that can be hidden or shown.
   Set --section-accent on the element to pick the accent.
   ═════════════════════════════════════════════════════════════════ */
.sd-section-card,
.sd-preset-section {
  background: var(--bg-card-raised);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--section-accent, var(--preset-accent, var(--text-accent-bright)));
  border-radius: 18px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sd-section-card:hover,
.sd-preset-section:hover {
  border-color: var(--border-strong);
  border-left-color: var(--section-accent, var(--preset-accent, var(--text-accent-bright)));
  box-shadow: 0 18px 40px -18px rgba(17,17,24,0.16);
}
.sd-section-card > summary,
.sd-preset-section > summary {
  list-style: none;
  cursor: pointer;
}
.sd-section-card > summary::-webkit-details-marker,
.sd-preset-section > summary::-webkit-details-marker { display: none; }

.sd-section-card__head,
.sd-preset-section__head {
  padding: 20px 24px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
}
.sd-section-card__head::after,
.sd-preset-section__head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--border-subtle);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.sd-section-card[open] .sd-section-card__head::after,
.sd-preset-section[open] .sd-preset-section__head::after { opacity: 1; }

.sd-section-card__icon,
.sd-preset-section__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--section-accent, var(--preset-accent, #6366f1)) 18%, transparent);
  color: var(--section-accent, var(--preset-accent, #6366f1));
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--section-accent, var(--preset-accent, #6366f1)) 30%, transparent);
}
.sd-section-card__meta,
.sd-preset-section__meta {
  flex: 1;
  min-width: 0;
}
.sd-section-card__title-row,
.sd-preset-section__title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.sd-section-card__title,
.sd-preset-section__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs-lg);
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.008em;
}
.sd-section-card__badge,
.sd-preset-section__badge {
  font-family: var(--ff-mono);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sd-preset-section__badge--overridden {
  background: color-mix(in srgb, var(--preset-accent, #6366f1) 14%, transparent);
  border-color: color-mix(in srgb, var(--preset-accent, #6366f1) 35%, transparent);
  color: var(--preset-accent, #6366f1);
}
.sd-preset-section__badge--overridden .sd-badge__dot {
  background: var(--preset-accent, #6366f1);
  box-shadow: 0 0 6px var(--preset-accent, #6366f1);
}
.sd-section-card__count,
.sd-preset-section__count {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--text-tertiary);
  margin-left: auto;
}
.sd-section-card__desc,
.sd-preset-section__desc {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.sd-section-card__chevron,
.sd-preset-section__chevron {
  flex-shrink: 0;
  align-self: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  transition: transform 0.25s ease, background 0.2s ease;
}
.sd-section-card > summary:hover .sd-section-card__chevron,
.sd-preset-section > summary:hover .sd-preset-section__chevron {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}
.sd-section-card[open] .sd-section-card__chevron,
.sd-preset-section[open] .sd-preset-section__chevron {
  transform: rotate(180deg);
}

.sd-section-card__body,
.sd-preset-section__body {
  padding: 22px 24px 24px;
  background: var(--bg-card-raised);
}

@media (max-width: 640px) {
  .sd-section-card__head,
  .sd-preset-section__head { padding: 16px 18px; gap: 12px; }
  .sd-section-card__icon,
  .sd-preset-section__icon { width: 38px; height: 38px; border-radius: 10px; }
  .sd-section-card__title,
  .sd-preset-section__title { font-size: var(--fs-base); }
  .sd-section-card__count,
  .sd-preset-section__count { display: none; }
  .sd-section-card__body,
  .sd-preset-section__body { padding: 18px 18px 20px; }
}
.sd-label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.003em;
}
.sd-label .sd-required { color: var(--alert); }
.sd-error { font-size: var(--fs-xs); font-weight: 500; color: var(--alert); margin-top: 6px; }

.sd-input,
.sd-select,
.sd-textarea {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1.5px solid var(--border-default);
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1.4;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: 0 1px 2px rgba(17, 17, 27, 0.04);
}
.sd-input::placeholder,
.sd-textarea::placeholder {
  color: var(--text-muted);
  font-weight: 400;
  opacity: 0.85;
}
.sd-input:hover,
.sd-select:hover,
.sd-textarea:hover {
  background: var(--bg-input-hover);
  border-color: var(--border-strong);
}
.sd-input:focus,
.sd-select:focus,
.sd-textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
  background: var(--bg-input-hover);
}
.sd-textarea { min-height: 96px; resize: vertical; line-height: 1.6; }
.sd-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%238a8a95' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
.sd-input--lg { padding: 14px 18px; font-size: var(--fs-base); }
.sd-input--mono { font-family: var(--ff-mono); font-size: var(--fs-xs); }

.sd-checkbox {
  width: 16px; height: 16px;
  border-radius: 4px;
  border: 1px solid var(--border-strong);
  background: var(--bg-input);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  position: relative;
  transition: all 0.15s;
  flex-shrink: 0;
}
.sd-checkbox:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.sd-checkbox:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.25' d='m3.5 8.5 3 3 6-6'/%3E%3C/svg%3E") center no-repeat;
}

.sd-toggle-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-input);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.sd-toggle-row:hover { border-color: var(--border-strong); background: var(--bg-input-hover); }
.sd-toggle-row__title { font-size: var(--fs-sm); font-weight: 550; color: var(--text-primary); display: block; }
.sd-toggle-row__desc  { font-size: var(--fs-xs); color: var(--text-tertiary); display: block; margin-top: 2px; }

.sd-input-group {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-input);
  overflow: hidden;
  transition: border-color 0.15s;
}
.sd-input-group:focus-within { border-color: var(--border-focus); box-shadow: var(--shadow-focus); }
.sd-input-group__prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  border-right: 1px solid var(--border-subtle);
}
.sd-input-group input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 11px 14px;
  color: var(--text-primary);
  font-size: var(--fs-sm);
  outline: none;
}

/* ═════════════════════ BADGES & CHIPS ═════════════════════ */

.sd-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  font-size: var(--fs-micro);
  font-weight: 550;
  border-radius: var(--radius-pill);
  border: 1px solid var(--status-neutral-bd);
  background: var(--status-neutral-bg);
  color: var(--status-neutral-fg);
  line-height: 1.4;
  letter-spacing: 0.01em;
}
.sd-badge--success { background: var(--status-success-bg); color: var(--status-success-fg); border-color: var(--status-success-bd); }
.sd-badge--warn    { background: var(--status-warn-bg);    color: var(--status-warn-fg);    border-color: var(--status-warn-bd); }
.sd-badge--error   { background: var(--status-error-bg);   color: var(--status-error-fg);   border-color: var(--status-error-bd); }
.sd-badge--info    { background: var(--status-info-bg);    color: var(--status-info-fg);    border-color: var(--status-info-bd); }
.sd-badge__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.06);
}
.sd-badge--pulse .sd-badge__dot {
  animation: sd-pulse 2s ease-in-out infinite;
}
@keyframes sd-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}

.sd-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}
.sd-chip--active { border-color: var(--accent-bright); background: var(--bg-active); color: var(--text-accent-bright); }

.sd-kbd {
  display: inline-block;
  padding: 2px 7px;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-bottom-width: 2px;
  border-radius: 4px;
}

/* ═════════════════════ TABLES ═════════════════════ */

.sd-table-wrap {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-card);
}
.sd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.sd-table thead th {
  text-align: left;
  padding: 12px 18px;
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-default);
  background: rgba(255,255,255,0.01);
}
.sd-table tbody td {
  padding: 13px 18px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
}
.sd-table tbody tr:last-child td { border-bottom: 0; }
.sd-table tbody tr { transition: background 0.12s; }
.sd-table tbody tr:hover { background: var(--bg-card-hover); cursor: pointer; }

/* ═════════════════════ TABS ═════════════════════ */

.sd-tabs {
  display: inline-flex;
  padding: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  gap: 2px;
}
.sd-tabs__item {
  padding: 8px 16px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-tertiary);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.sd-tabs__item:hover { color: var(--text-primary); }
.sd-tabs__item[aria-selected="true"].sd-tabs__item.active {
  background: var(--bg-card-raised);
  color: var(--text-primary);
  box-shadow: var(--shadow-xs);
}

/* ═════════════════════ SIDEBAR ═════════════════════ */

.sd-sidebar { background: var(--bg-sidebar); box-shadow: var(--shadow-sidebar); }
.sd-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  font-size: var(--fs-sm);
  font-weight: 500;
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  transition: all 0.12s ease;
  border-left: 2px solid transparent;
  position: relative;
  text-decoration: none;
}
.sd-nav-link:hover { background: var(--bg-sidebar-hover); color: var(--text-primary); }
.sd-nav-link.active {
  background: var(--bg-active);
  color: var(--text-accent-bright);
  border-left-color: var(--bg-active-border);
  font-weight: 600;
}
.sd-nav-link.active svg { color: var(--text-accent-bright); }

.sd-section-label {
  padding: 6px 12px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.sd-user-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--user-avatar-bg);
  display: flex; align-items: center; justify-content: center;
  color: var(--user-avatar-text);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

/* ─── Sidebar company switcher ─── */
.sd-company-switch {
  position: relative;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-default);
}
.sd-company-switch__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  color: inherit;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.sd-company-switch__btn:hover {
  background: var(--bg-hover, color-mix(in srgb, var(--text-primary) 4%, transparent));
  border-color: var(--border-strong);
}
.sd-company-switch__avatar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--user-avatar-bg);
  color: var(--user-avatar-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.sd-company-switch__meta { flex: 1; min-width: 0; }
.sd-company-switch__label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
  font-weight: 600;
}
.sd-company-switch__name {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.sd-company-switch__chevron {
  color: var(--text-tertiary);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
.sd-company-switch.is-open .sd-company-switch__chevron {
  transform: rotate(180deg);
}
.sd-company-switch__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 12px;
  right: 12px;
  z-index: 40;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  box-shadow: 0 12px 30px -12px rgba(0,0,0,0.35);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 60vh;
  overflow-y: auto;
}
.sd-company-switch__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  width: 100%;
}
.sd-company-switch__item:hover {
  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
}
.sd-company-switch__item.is-current {
  color: var(--signal-deep);
  font-weight: 600;
  cursor: default;
}
.sd-company-switch__item.is-current:hover { background: transparent; }
.sd-company-switch__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}
.sd-company-switch__sep {
  height: 1px;
  background: var(--border-subtle);
  margin: 4px 0;
}

/* Sidebar user block, clickable shortcut to the profile page. */
.sd-sidebar-user {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  padding: 6px 22px 6px 8px;
  margin: -6px -8px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  transition: background 0.15s ease;
  position: relative;
}
.sd-sidebar-user:hover {
  background: var(--bg-elevated, rgba(255, 255, 255, 0.04));
}
.sd-sidebar-user:hover .sd-user-avatar {
  transform: scale(1.04);
  transition: transform 0.15s ease;
}
.sd-sidebar-user::after {
  content: "›";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  line-height: 1;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.sd-sidebar-user:hover::after {
  opacity: 0.7;
  transform: translateY(-50%) translateX(2px);
}

.sd-theme-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  transition: all 0.15s;
  cursor: pointer;
  border: none;
  background: transparent;
}
.sd-theme-btn:hover { background: var(--bg-sidebar-hover); color: var(--text-primary); }

/* ═════════════════════ FLASH / ALERTS ═════════════════════ */

.sd-flash-success,
.sd-flash-error {
  padding: 12px 24px;
  font-size: var(--fs-sm);
  border-bottom: 1px solid;
}
.sd-flash-success { background: var(--status-success-bg); border-color: var(--status-success-bd); color: var(--status-success-fg); }
.sd-flash-error   { background: var(--status-error-bg);   border-color: var(--status-error-bd);   color: var(--status-error-fg); }

.sd-impersonation-bar {
  background: var(--warm-deep);
  color: white;
  text-align: center;
  padding: 8px;
  font-size: var(--fs-sm);
  font-weight: 500;
}

/* ═════════════════════ MOBILE OVERLAY ═════════════════════ */

.sd-overlay { background: var(--bg-overlay); backdrop-filter: blur(4px); }
.sd-sidebar nav::-webkit-scrollbar { display: none; }
.sd-sidebar nav { -ms-overflow-style: none; scrollbar-width: none; }

/* ═════════════════════ VOICE CONFIG (existing) ═════════════════════ */

.sd-voice-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 12px;
  border-radius: var(--radius-md);
  border: 2px solid var(--border-default);
  background: var(--bg-card);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
  min-width: 0;
}
.sd-voice-card:hover { border-color: rgba(129,140,248,0.35); }
.sd-voice-selected {
  border-color: var(--accent-bright) !important;
  background: var(--bg-active) !important;
  box-shadow: 0 0 0 1px var(--accent-bright);
}
.sd-voice-unselected { opacity: 0.7; }
.sd-voice-unselected:hover { opacity: 1; }
.sd-voice-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}

/* Sliders */
.sd-slider-container { position: relative; padding: 24px 0 40px; user-select: none; touch-action: none; }
.sd-slider-track {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: var(--border-default);
  cursor: pointer;
}
.sd-slider-track::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-bright), rgba(129,140,248,0.3));
  opacity: 0.4;
}
.sd-slider-thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent-bright);
  box-shadow: 0 0 0 4px var(--bg-body), 0 0 0 5px var(--accent-bright);
  pointer-events: none;
  transition: left 0.1s ease;
}
.sd-slider-label {
  position: absolute;
  top: 100%;
  transform: translateX(-50%);
  margin-top: 12px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--accent-bright);
  white-space: nowrap;
  pointer-events: none;
  transition: left 0.1s ease;
}
.sd-slider-endpoints {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-micro);
  color: var(--text-muted);
  margin-top: 4px;
}

/* ═════════════════════ CHAT BUBBLES ═════════════════════ */

.sd-chat { display: flex; flex-direction: column; gap: 12px; max-width: 100%; }
.sd-bubble {
  max-width: 80%;
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  font-size: var(--fs-sm);
  line-height: 1.5;
  word-wrap: break-word;
}
.sd-bubble-caller {
  align-self: flex-start;
  background: var(--bg-input);
  color: var(--text-primary);
  border-bottom-left-radius: 4px;
}
.sd-bubble-agent {
  align-self: flex-end;
  background: var(--bg-active);
  color: var(--text-accent-bright);
  border-bottom-right-radius: 4px;
}
.sd-bubble-label {
  font-size: var(--fs-micro);
  font-weight: 600;
  margin-bottom: 4px;
}
.sd-bubble-caller .sd-bubble-label { color: var(--text-muted); }
.sd-bubble-agent .sd-bubble-label  { color: var(--text-accent); }

/* Chat row wrapper for call transcripts. Each row carries a
   tiny speaker label above the bubble and aligns the whole
   thing left or right based on who was talking. */
.sd-chat-row {
  display: flex;
  flex-direction: column;
  max-width: 82%;
}
.sd-chat-row--caller {
  align-items: flex-start;
  align-self: flex-start;
}
.sd-chat-row--agent {
  align-items: flex-end;
  align-self: flex-end;
}
.sd-chat-meta {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--text-tertiary);
  margin-bottom: 4px;
  padding: 0 6px;
}
.sd-chat-row--agent .sd-chat-meta { color: var(--text-accent-bright); }
.sd-chat-row .sd-bubble {
  max-width: 100%;
}

/* Real-chat transcript styling for call log show page. Agent
   bubbles are solid indigo with white text, caller bubbles are
   neutral, matching the SMS conversation view in appointments. */
.sd-transcript-chat {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sd-transcript-chat__row {
  display: flex;
}
.sd-transcript-chat__row.is-agent  { justify-content: flex-end; }
.sd-transcript-chat__row.is-caller { justify-content: flex-start; }
.sd-transcript-chat__bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 18px;
  font-size: var(--fs-sm);
  line-height: 1.45;
  word-wrap: break-word;
}
.sd-transcript-chat__row.is-agent .sd-transcript-chat__bubble {
  background: #4f46e5;
  color: #ffffff;
  border-bottom-right-radius: 6px;
}
.sd-transcript-chat__row.is-caller .sd-transcript-chat__bubble {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-bottom-left-radius: 6px;
}
.sd-transcript-chat__bubble p {
  margin: 0;
}
.sd-transcript-chat__meta {
  font-size: 10px;
  margin-top: 5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.sd-transcript-chat__row.is-agent .sd-transcript-chat__meta {
  color: rgba(255, 255, 255, 0.65);
  text-align: right;
}
.sd-transcript-chat__row.is-caller .sd-transcript-chat__meta {
  color: var(--text-tertiary);
}

/* Numbered setup steps used on the Microsoft Teams setup page
   and anywhere else a wizard walks the user through an
   external configuration flow. */
.sd-setup-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.sd-setup-steps > li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--bg-input);
}
.sd-setup-steps__num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--fs-base);
}
.sd-setup-steps__title {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--fs-base);
  color: var(--text-primary);
  margin-bottom: 6px;
}
.sd-setup-steps__body {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.55;
}
.sd-setup-steps__body p {
  margin: 0 0 8px;
}
.sd-setup-steps__body p:last-child { margin-bottom: 0; }
.sd-setup-steps__body code {
  background: var(--bg-card);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.92em;
}

/* Integration logos, white chip for transparent PNGs */
.sd-integration-logo {
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  object-fit: contain;
  background: #ffffff;
  padding: 4px;
}

/* ═════════════════════ LIVE WAVEFORM (hero) ═════════════════════ */

.sd-wave {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 28px;
}
.sd-wave span {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.85;
  animation: sd-wave-bounce 1.2s ease-in-out infinite;
}
.sd-wave span:nth-child(1) { height: 30%; animation-delay: -1.1s; }
.sd-wave span:nth-child(2) { height: 60%; animation-delay: -0.9s; }
.sd-wave span:nth-child(3) { height: 90%; animation-delay: -0.7s; }
.sd-wave span:nth-child(4) { height: 45%; animation-delay: -0.5s; }
.sd-wave span:nth-child(5) { height: 75%; animation-delay: -0.3s; }
.sd-wave span:nth-child(6) { height: 55%; animation-delay: -0.1s; }
.sd-wave span:nth-child(7) { height: 85%; animation-delay:  0.1s; }
.sd-wave span:nth-child(8) { height: 35%; animation-delay:  0.3s; }
@keyframes sd-wave-bounce {
  0%, 100% { transform: scaleY(0.4); opacity: 0.5; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

/* ═════════════════════ MARKETING, global helpers ═════════════════════ */

.sd-mkt-body {
  background: var(--mkt-body-bg);
  color: var(--text-primary);
  background-image: var(--mkt-body-gradient);
  background-attachment: fixed;
}

/* Subtle grain overlay (SVG noise, inline) */
.sd-grain::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--mkt-grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.sd-mkt-nav {
  position: fixed;
  top: 34px; left: 0; right: 0;
  z-index: 40;
  backdrop-filter: saturate(1.3) blur(18px);
  -webkit-backdrop-filter: saturate(1.3) blur(18px);
  background: var(--mkt-nav-bg);
  border-bottom: 1px solid var(--border-subtle);
}
@media (max-width: 620px) {
  .sd-mkt-nav { top: 30px; }
}
.sd-mkt-nav__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.sd-mkt-nav__links {
  display: none;
  gap: 28px;
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
}
@media (min-width: 900px) { .sd-mkt-nav__links { display: flex; } }
.sd-mkt-nav__links a { color: inherit; text-decoration: none; transition: color 0.15s; }
.sd-mkt-nav__links a:hover { color: var(--text-primary); }

.sd-mkt-nav__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sd-mkt-nav__ctas {
  display: none;
  align-items: center;
  gap: 10px;
}
@media (min-width: 900px) {
  .sd-mkt-nav__ctas { display: flex; }
}

/* Mobile hamburger button */
.sd-mkt-nav__burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.sd-mkt-nav__burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.sd-mkt-nav__burger:hover {
  border-color: var(--border-strong);
}
.sd-mkt-nav.is-open .sd-mkt-nav__burger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.sd-mkt-nav.is-open .sd-mkt-nav__burger span:nth-child(2) {
  opacity: 0;
}
.sd-mkt-nav.is-open .sd-mkt-nav__burger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
@media (min-width: 900px) {
  .sd-mkt-nav__burger { display: none; }
}

/* Mobile drawer */
.sd-mkt-nav__drawer {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-default);
  box-shadow: 0 20px 40px -10px rgba(17,17,24,0.18);
  padding: 16px 24px 22px;
  flex-direction: column;
  gap: 2px;
  animation: sd-drawer-in 0.22s ease-out;
}
.sd-mkt-nav.is-open .sd-mkt-nav__drawer { display: flex; }
@keyframes sd-drawer-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sd-mkt-nav__drawer a {
  display: block;
  padding: 14px 8px;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--border-subtle);
  transition: color 0.15s;
}
.sd-mkt-nav__drawer a:last-child { border-bottom: none; }
.sd-mkt-nav__drawer a:hover { color: var(--text-accent-bright); }
.sd-mkt-nav__drawer-cta {
  margin-top: 10px;
  padding: 14px 16px !important;
  background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  text-align: center;
  border-bottom: none !important;
}
@media (min-width: 900px) {
  .sd-mkt-nav__drawer { display: none !important; }
}

body.sd-mobile-nav-open {
  overflow: hidden;
}

.sd-hero {
  position: relative;
  padding: 160px 24px 110px;
  max-width: 1240px;
  margin: 0 auto;
  z-index: 1;
}
@media (max-width: 720px) {
  .sd-hero {
    padding: 110px 20px 60px;
  }
  .sd-hero__trust {
    margin-top: 32px;
    padding-top: 22px;
    gap: 14px 22px;
  }
  .sd-hero__cta {
    width: 100%;
  }
  .sd-hero__cta .sd-btn {
    flex: 1;
    justify-content: center;
  }
}
.sd-hero__inner { max-width: 900px; }
.sd-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--mkt-eyebrow-bg);
  backdrop-filter: blur(8px);
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  margin-bottom: 28px;
}
.sd-hero__eyebrow .sd-badge__dot { background: var(--signal); box-shadow: 0 0 8px var(--signal); }
.sd-hero__title {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(44px, 7.5vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.028em;
  margin: 0 0 28px;
  font-variation-settings: "SOFT" 30, "opsz" 144;
  color: var(--text-primary);
}
.sd-hero__title em {
  font-style: italic;
  font-variation-settings: "SOFT" 80, "WONK" 1, "opsz" 144;
  background: linear-gradient(120deg, #6366f1 0%, #22c55e 55%, #f59e0b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.sd-hero__lede {
  font-size: clamp(16px, 1.6vw, 20px);
  color: var(--text-tertiary);
  max-width: 620px;
  line-height: 1.55;
  margin: 0 0 36px;
}
.sd-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

.sd-hero__trust {
  display: flex;
  gap: 24px 36px;
  flex-wrap: wrap;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--border-subtle);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.sd-hero__trust > span { display: inline-flex; align-items: center; gap: 8px; }
.sd-hero__trust svg { color: var(--signal); width: 14px; height: 14px; }

.sd-hero-demo {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 48px auto 0;
  padding: 0;
  border: 1px solid var(--mkt-phone-frame-border);
  border-radius: var(--radius-xl);
  background: var(--mkt-phone-frame-bg);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-lg), 0 0 80px rgba(99,102,241,0.18);
  overflow: hidden;
}
@media (min-width: 1100px) {
  .sd-hero-demo {
    position: absolute;
    right: 24px;
    top: 180px;
    width: 380px;
    max-width: none;
    margin: 0;
  }
}
.sd-hero-demo__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 14px;
}
.sd-hero-demo__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-bright));
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 600; font-size: 14px;
}
.sd-hero-demo__title { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); }
.sd-hero-demo__sub { font-size: var(--fs-xs); color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.sd-hero-demo__sub::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 8px var(--signal); animation: sd-pulse 2s ease-in-out infinite; }

.sd-mkt-section {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: 110px 24px;
  z-index: 1;
}
@media (max-width: 720px) {
  .sd-mkt-section { padding: 64px 20px; }
  .sd-mkt-section__header { margin-bottom: 40px; }
  .sd-chapter { margin-bottom: 16px; padding: 0 4px; gap: 14px; }
  .sd-chapter__num { font-size: 48px; }
  .sd-chapter__label { font-size: 9px; letter-spacing: 0.18em; }
}
.sd-mkt-section--tint::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  background:
    linear-gradient(180deg, transparent 0%, rgba(99,102,241,0.05) 10%, rgba(99,102,241,0.05) 90%, transparent 100%),
    radial-gradient(ellipse 900px 400px at 50% 50%, rgba(34,197,94,0.055), transparent 70%);
  pointer-events: none;
}
.sd-mkt-section--tight { padding: 64px 24px; }
.sd-mkt-section__header { max-width: 720px; margin: 0 auto 64px; text-align: center; }
.sd-mkt-section__title {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(32px, 4.5vw, 54px);
  letter-spacing: -0.022em;
  line-height: 1.06;
  color: var(--text-primary);
  margin: 0 0 18px;
}
.sd-mkt-section__title em { font-style: italic; color: var(--text-accent-bright); font-variation-settings: "SOFT" 80, "WONK" 1, "opsz" 144; }
.sd-mkt-section__lede {
  font-size: var(--fs-lg);
  color: var(--text-tertiary);
  line-height: 1.55;
  margin: 0;
}

.sd-mkt-feature {
  padding: 28px;
  background: var(--mkt-glass);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}
html.light .sd-mkt-feature { box-shadow: var(--shadow-sm); }
html.light .sd-mkt-feature:hover { box-shadow: var(--shadow-md); }
.sd-mkt-feature:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.sd-mkt-feature__icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: var(--bg-active);
  color: var(--text-accent-bright);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.sd-mkt-feature__title { font-family: var(--ff-display); font-weight: 500; font-size: var(--fs-xl); color: var(--text-primary); margin: 0 0 10px; }
.sd-mkt-feature__body  { font-size: var(--fs-sm); color: var(--text-tertiary); line-height: 1.6; margin: 0; }

/* Price card (marketing) */
.sd-price {
  padding: 32px;
  background: var(--mkt-glass-strong);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  position: relative;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}
.sd-price:hover { border-color: var(--border-strong); transform: translateY(-2px); }
html.light .sd-price { box-shadow: var(--shadow-sm); }
html.light .sd-price:hover { box-shadow: var(--shadow-md); }
.sd-price--featured {
  border-color: rgba(99,102,241,0.55);
  background: linear-gradient(180deg, rgba(99,102,241,0.08), var(--mkt-glass-strong) 60%);
  box-shadow: 0 0 64px -24px rgba(99,102,241,0.55);
}
html.light .sd-price--featured { box-shadow: 0 24px 60px -28px rgba(99,102,241,0.45), var(--shadow-sm); }
.sd-price__tag {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: white;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
}
.sd-price__name { font-size: var(--fs-sm); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; margin: 0 0 14px; }
.sd-price__value {
  font-family: var(--ff-display);
  font-size: 56px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144;
}
.sd-price__unit { color: var(--text-muted); font-size: var(--fs-sm); }
.sd-price__note { font-size: var(--fs-xs); color: var(--text-muted); margin: 8px 0 28px; }
.sd-price__features { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.sd-price__features li { font-size: var(--fs-sm); color: var(--text-secondary); display: flex; align-items: flex-start; gap: 10px; }
.sd-price__features svg { color: var(--signal); flex-shrink: 0; margin-top: 3px; }

/* Feature-detail (marketing Features page) */
.sd-mkt-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
  padding: 80px 0;
  border-top: 1px solid var(--border-subtle);
}
.sd-mkt-row:first-of-type { border-top: 0; }
@media (min-width: 900px) { .sd-mkt-row { grid-template-columns: 5fr 6fr; gap: 72px; } .sd-mkt-row--flip > :first-child { order: 2; } }
.sd-mkt-row__copy .sd-eyebrow { margin-bottom: 16px; display: inline-block; }
.sd-mkt-row__copy h3 {
  font-family: var(--ff-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text-primary);
  margin: 0 0 18px;
}
.sd-mkt-row__copy p { font-size: var(--fs-lg); color: var(--text-tertiary); line-height: 1.6; margin: 0 0 20px; }
.sd-mkt-row__art {
  position: relative;
  aspect-ratio: 4/3;
  background: var(--mkt-row-art-bg);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: 24px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
html.light .sd-mkt-row__art { box-shadow: var(--shadow-md); }
.sd-mkt-row__art::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--mkt-row-art-glow);
  pointer-events: none;
}

/* Marketing footer */
.sd-mkt-footer {
  border-top: 1px solid var(--border-subtle);
  margin-top: 80px;
  padding: 64px 24px 40px;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1;
}
.sd-mkt-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
@media (max-width: 800px) { .sd-mkt-footer__grid { grid-template-columns: 1fr 1fr; } }
.sd-mkt-footer h4 {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin: 0 0 16px;
  font-weight: 600;
}
.sd-mkt-footer a {
  display: block;
  color: var(--text-tertiary);
  text-decoration: none;
  font-size: var(--fs-sm);
  padding: 4px 0;
  transition: color 0.15s;
}
.sd-mkt-footer a:hover { color: var(--text-primary); }
.sd-mkt-footer__bottom {
  padding-top: 24px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

/* ═════════════════════ ANIMATIONS ═════════════════════ */

@keyframes sd-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sd-fade-in { animation: sd-fade-in 0.6s cubic-bezier(0.2,0.7,0.1,1) both; }
.sd-stagger > * { animation: sd-fade-in 0.6s cubic-bezier(0.2,0.7,0.1,1) both; }
.sd-stagger > *:nth-child(1) { animation-delay: 0.05s; }
.sd-stagger > *:nth-child(2) { animation-delay: 0.12s; }
.sd-stagger > *:nth-child(3) { animation-delay: 0.19s; }
.sd-stagger > *:nth-child(4) { animation-delay: 0.26s; }
.sd-stagger > *:nth-child(5) { animation-delay: 0.33s; }
.sd-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.sd-stagger > *:nth-child(7) { animation-delay: 0.47s; }
.sd-stagger > *:nth-child(8) { animation-delay: 0.54s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═════════════════════ LEGACY TAILWIND REMAPPING ═════════════════════
   Existing pages still use zinc-* classes. Keep them looking right
   in both themes via a minimal compat layer (no !important spray). */

.bg-zinc-900\/50.bg-zinc-900\/40.bg-zinc-900\/60 { background-color: var(--bg-card); }
.bg-zinc-900       { background-color: var(--bg-card); }
.bg-zinc-800.bg-zinc-800\/80   { background-color: var(--bg-input); }
.bg-zinc-800\/30.bg-zinc-800\/50   { background-color: var(--bg-card-hover); }
.bg-\[\#0a0a0f\].bg-\[\#0c0c12\].bg-\[\#0c0c14\]   { background-color: var(--bg-body); }

.text-zinc-100 { color: var(--text-primary); }
.text-zinc-200 { color: var(--text-primary); }
.text-zinc-300 { color: var(--text-secondary); }
.text-zinc-400 { color: var(--text-tertiary); }
.text-zinc-500 { color: var(--text-muted); }
.text-zinc-600 { color: var(--text-faint); }
.text-white    { color: var(--text-primary); }

.border-zinc-800.border-zinc-800\/50.border-zinc-800\/30 { border-color: var(--border-default); }
.border-zinc-700.border-zinc-700\/30 { border-color: var(--border-strong); }
.border-zinc-600     { border-color: var(--border-strong); }

.hover\:border-zinc-700:hover.hover\:border-zinc-600:hover { border-color: var(--border-strong); }
.hover\:bg-zinc-800\/30:hover.hover\:bg-zinc-800\/50:hover { background-color: var(--bg-card-hover); }
.hover\:bg-zinc-700:hover     { background-color: var(--bg-input-hover); }

/* Status surface classes used across app */
.bg-emerald-900\/50.bg-emerald-900\/30  { background: var(--status-success-bg); }
.text-emerald-400    { color: var(--status-success-fg); }
.border-emerald-700\/30 { border-color: var(--status-success-bd); }

.bg-amber-900\/50    { background: var(--status-warn-bg); }
.text-amber-400      { color: var(--status-warn-fg); }
.border-amber-700\/30{ border-color: var(--status-warn-bd); }

.bg-red-900\/50.bg-red-900\/30      { background: var(--status-error-bg); }
.text-red-400        { color: var(--status-error-fg); }
.border-red-700\/30  { border-color: var(--status-error-bd); }

.bg-blue-900\/50     { background: var(--status-info-bg); }
.text-blue-400       { color: var(--status-info-fg); }

.bg-violet-900\/50   { background: rgba(167,139,250,0.12); }
.text-violet-400     { color: #c4b5fd; }

.bg-indigo-950\/30   { background: var(--bg-active); }
.bg-indigo-900\/30   { background: var(--bg-active); }
.text-indigo-400     { color: var(--text-accent-bright); }
.text-indigo-300     { color: var(--text-accent-bright); }
.hover\:text-indigo-300:hover { color: var(--text-accent-bright); }
.border-indigo-500\/50.border-indigo-500\/30.border-indigo-800\/30 { border-color: rgba(129,140,248,0.45); }
.bg-indigo-600       { background-color: var(--accent); }
.bg-indigo-600:hover.hover\:bg-indigo-500:hover { background-color: var(--accent-bright); }

.text-cyan-400       { color: #67e8f9; }

/* Old gradient-text helper used by marketing, redirect to display-em look */
.gradient-text {
  background: linear-gradient(135deg, var(--accent-bright), var(--signal) 60%, #67e8f9);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Glow used by featured price card */
.glow { box-shadow: 0 0 64px -24px rgba(129,140,248,0.55); }

/* ═════════════════════════════════════════════════════════════════
   VOICE-FIRST MOCKUP COMPONENTS
   Call cards, call transcripts, SIP panels, call-log rows, waveforms.
   These replace the chat-bubble imagery so every visual reads as
   "phone call," not "text chat."
   ═════════════════════════════════════════════════════════════════ */

/*. Phone-frame: a window styled like the app's call-detail view. */
.sd-phone-frame {
  background: var(--mkt-phone-frame-bg);
  border: 1px solid var(--mkt-phone-frame-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
html.light .sd-phone-frame {
  box-shadow:
    0 30px 80px -20px rgba(34,197,94,0.28),
    0 20px 50px -15px rgba(99,102,241,0.25),
    0 0 0 1px rgba(34,197,94,0.12);
}
html:not(.light) .sd-phone-frame {
  box-shadow:
    0 30px 80px -20px rgba(34,197,94,0.40),
    0 20px 50px -15px rgba(99,102,241,0.30),
    0 0 0 1px rgba(34,197,94,0.25);
}

.sd-phone-frame__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, rgba(128,128,140,0.06), transparent);
}
.sd-phone-frame__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(128,128,140,0.35);
}
.sd-phone-frame__dot:nth-child(1) { background: #ff5f57; }
.sd-phone-frame__dot:nth-child(2) { background: #ffbd2e; }
.sd-phone-frame__dot:nth-child(3) { background: #28c840; }
.sd-phone-frame__title {
  margin-left: 10px;
  font-size: var(--fs-micro);
  color: var(--text-muted);
  font-family: var(--ff-mono);
  letter-spacing: 0.03em;
}

/*. Live call card: header + waveform + transcript + footer. */
.sd-callcard {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sd-callcard__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
}

/* ═════════════════════════════════════════════════════════════════
   CALL SCENE — caller avatar, signal path with particles, AI orb
   ═════════════════════════════════════════════════════════════════ */
.sd-callscene {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 4px 18px;
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
}
.sd-callscene__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  min-width: 0;
}
.sd-callscene__avatar {
  position: relative;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sd-callscene__avatar--caller { --cs-ring: rgba(99,102,241,0.55); }
.sd-callscene__avatar--ai     { --cs-ring: rgba(34,197,94,0.65); }

.sd-callscene__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72px;
  height: 72px;
  margin-left: -36px;
  margin-top: -36px;
  border-radius: 50%;
  border: 1.5px solid var(--cs-ring);
  opacity: 0;
  animation: sd-cs-radar 2.4s cubic-bezier(.2,.6,.2,1) infinite;
  pointer-events: none;
}
.sd-callscene__ring:nth-of-type(2) { animation-delay: 0.8s; }
.sd-callscene__ring:nth-of-type(3) { animation-delay: 1.6s; }

@keyframes sd-cs-radar {
  0%   { transform: scale(0.72); opacity: 0.9; }
  60%  { opacity: 0.25; }
  100% { transform: scale(2.30); opacity: 0;   }
}

.sd-callscene__face {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #818cf8 0%, #4338ca 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 10px 26px -8px rgba(67, 56, 202, 0.60),
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.12);
}
.sd-callscene__face--ai {
  background: linear-gradient(135deg, #34d399 0%, #15803d 100%);
  box-shadow:
    0 10px 26px -8px rgba(21, 128, 61, 0.65),
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.18);
  animation: sd-cs-breathe 2.8s ease-in-out infinite;
}
@keyframes sd-cs-breathe {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 10px 26px -8px rgba(21, 128, 61, 0.60),
                inset 0 1px 0 rgba(255,255,255,0.35);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 14px 36px -6px rgba(21, 128, 61, 0.90),
                0 0 0 6px rgba(34,197,94,0.12),
                inset 0 1px 0 rgba(255,255,255,0.45);
  }
}

.sd-callscene__meta { min-width: 0; max-width: 100%; }
.sd-callscene__name {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.1;
  letter-spacing: -0.005em;
}
.sd-callscene__phone {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 4px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sd-callscene__status {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: var(--ff-mono);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.sd-callscene__status--calling {
  background: rgba(99,102,241,0.10);
  color: #4f46e5;
}
.sd-callscene__status--answering {
  background: rgba(34,197,94,0.12);
  color: #15803d;
}
.sd-callscene__status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
  animation: sd-cs-dot 1.2s ease-in-out infinite;
}
@keyframes sd-cs-dot {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}

.sd-callscene__path {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  overflow: hidden;
}
.sd-callscene__line {
  position: absolute;
  left: 6%; right: 6%;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: linear-gradient(to right,
    rgba(99,102,241,0) 0%,
    rgba(99,102,241,0.55) 12%,
    rgba(99,102,241,0.55) 48%,
    rgba(34,197,94,0.55) 52%,
    rgba(34,197,94,0.55) 88%,
    rgba(34,197,94,0) 100%);
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(99,102,241,0.25), 0 0 12px rgba(34,197,94,0.25);
}
.sd-callscene__particle {
  position: absolute;
  top: 50%;
  left: 6%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  margin-left: -5px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #86efac 45%, rgba(34,197,94,0) 75%);
  box-shadow: 0 0 14px rgba(34,197,94,0.9), 0 0 24px rgba(34,197,94,0.45);
  opacity: 0;
  animation: sd-cs-particle 2.4s linear infinite;
}
@keyframes sd-cs-particle {
  0%   { left: 6%;  opacity: 0;   transform: translate(0, 0) scale(0.6); }
  12%  { opacity: 1; transform: translate(0, 0) scale(1); }
  50%  { left: 50%; opacity: 1;   transform: translate(0, 0) scale(1.15); }
  88%  { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { left: 94%; opacity: 0;   transform: translate(0, 0) scale(0.6); }
}
.sd-callscene__pill {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  background: var(--bg-card);
  border: 1px solid rgba(34,197,94,0.45);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-primary);
  box-shadow:
    0 4px 14px -4px rgba(34,197,94,0.40),
    0 0 0 4px rgba(34,197,94,0.08);
}
.sd-callscene__pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: sd-cs-dot 1.2s ease-in-out infinite;
}

@media (max-width: 520px) {
  .sd-callscene {
    grid-template-columns: 1fr auto 1fr;
    gap: 6px;
    padding: 8px 2px 16px;
  }
  .sd-callscene__avatar { width: 58px; height: 58px; }
  .sd-callscene__ring   { width: 58px; height: 58px; margin-left: -29px; margin-top: -29px; }
  .sd-callscene__face   { width: 42px; height: 42px; }
  .sd-callscene__name   { font-size: 12px; }
  .sd-callscene__phone  { font-size: 9px; }
  .sd-callscene__path   { height: 58px; min-width: 90px; }
  .sd-callscene__status { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sd-callscene__ring,
  .sd-callscene__particle,
  .sd-callscene__face--ai,
  .sd-callscene__status-dot,
  .sd-callscene__pill-dot { animation: none !important; }
  .sd-callscene__ring { opacity: 0; }
}
.sd-callcard__phoneicon {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-active);
  color: var(--text-accent-bright);
  flex-shrink: 0;
}
.sd-callcard__direction {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  font-weight: 600;
}
.sd-callcard__from {
  font-family: var(--ff-mono);
  font-size: var(--fs-sm);
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-top: 2px;
}
.sd-callcard__caller {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  margin-top: 2px;
}
.sd-callcard__timer {
  margin-left: auto;
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.sd-callcard__timer::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 10px var(--signal);
  animation: sd-pulse 1.8s ease-in-out infinite;
}

/*. The big waveform that says "this is audio, not text". */
.sd-bigwave {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  height: 64px;
  padding: 0 6px;
  position: relative;
  mask-image: linear-gradient(to right, transparent 0%, black 7%, black 93%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 7%, black 93%, transparent 100%);
}
.sd-bigwave::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--mkt-waveform-color) 25%, var(--mkt-waveform-color) 75%, transparent);
  opacity: 0.30;
  pointer-events: none;
}
.sd-bigwave span {
  display: block;
  width: 4px;
  border-radius: 3px;
  background: linear-gradient(180deg, #34d399, var(--mkt-waveform-color-strong, #15803d));
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.55), 0 0 18px rgba(34, 197, 94, 0.25);
  animation-name: sd-wave-eq;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  will-change: height, opacity;
}

/* Each bar: its own duration + negative delay so the wave reads as
   organic, never synced. Uses direct height animation so motion is
   always dramatic regardless of scale/transform quirks. */
.sd-bigwave span:nth-child(1)  { animation-duration: 0.95s; animation-delay: -0.10s; }
.sd-bigwave span:nth-child(2)  { animation-duration: 1.30s; animation-delay: -0.45s; }
.sd-bigwave span:nth-child(3)  { animation-duration: 0.80s; animation-delay: -0.25s; }
.sd-bigwave span:nth-child(4)  { animation-duration: 1.45s; animation-delay: -0.60s; }
.sd-bigwave span:nth-child(5)  { animation-duration: 1.05s; animation-delay: -0.15s; }
.sd-bigwave span:nth-child(6)  { animation-duration: 1.20s; animation-delay: -0.80s; }
.sd-bigwave span:nth-child(7)  { animation-duration: 0.85s; animation-delay: -0.35s; }
.sd-bigwave span:nth-child(8)  { animation-duration: 1.55s; animation-delay: -0.05s; }
.sd-bigwave span:nth-child(9)  { animation-duration: 0.90s; animation-delay: -0.70s; }
.sd-bigwave span:nth-child(10) { animation-duration: 1.40s; animation-delay: -0.22s; }
.sd-bigwave span:nth-child(11) { animation-duration: 1.10s; animation-delay: -0.48s; }
.sd-bigwave span:nth-child(12) { animation-duration: 0.75s; animation-delay: -0.28s; }
.sd-bigwave span:nth-child(13) { animation-duration: 1.35s; animation-delay: -0.88s; }
.sd-bigwave span:nth-child(14) { animation-duration: 1.00s; animation-delay: -0.16s; }
.sd-bigwave span:nth-child(15) { animation-duration: 0.82s; animation-delay: -0.55s; }
.sd-bigwave span:nth-child(16) { animation-duration: 1.25s; animation-delay: -0.33s; }

@keyframes sd-wave-eq {
  0%   { height: 10%;  opacity: 0.55; }
  100% { height: 98%;  opacity: 1;    }
}

@media (prefers-reduced-motion: reduce) {
  .sd-bigwave span {
    animation: none !important;
    height: 60%;
    opacity: 0.75;
  }
}

/* ═════════════════════════════════════════════════════════════════
   VOICE WAVE — three SVG sine paths scrolling at different speeds
   with an amplitude modulation that simulates speaking volume.
   ═════════════════════════════════════════════════════════════════ */
.sd-voicewave-wrap {
  height: 74px;
  padding: 8px 6px;
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 7%, black 93%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 7%, black 93%, transparent 100%);
}
.sd-voicewave-canvas {
  display: block;
  width: 100%;
  height: 100%;
  filter:
    drop-shadow(0 0 8px rgba(34, 197, 94, 0.55))
    drop-shadow(0 0 20px rgba(34, 197, 94, 0.25));
}

/*. Call transcript (timestamps, speaker labels, NOT chat bubbles). */
.sd-transcript {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: var(--fs-xs);
}
.sd-transcript__row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.55;
}
.sd-transcript__ts {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  padding-top: 1px;
}
.sd-transcript__speaker {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  padding-top: 1px;
  min-width: 56px;
}
.sd-transcript__speaker--agent  { color: var(--accent-bright); }
.sd-transcript__speaker--caller { color: var(--text-tertiary); }
.sd-transcript__line {
  color: var(--text-secondary);
  font-size: var(--fs-xs);
}
html.light .sd-transcript__speaker--agent { color: var(--accent-deep); }

/*. Call badge strip under transcript: "Recording · Transcribing · PCI masked". */
.sd-callbadges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}
.sd-callbadges .sd-badge { font-size: 10px; padding: 3px 9px; }

/*. Call-log row: inline rows that look like the dashboard's recent-calls table. */
.sd-callog {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-card);
}
.sd-callog__row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--fs-xs);
}
.sd-callog__row:last-child { border-bottom: 0; }
.sd-callog__dir {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sd-callog__dir--in  { background: var(--status-info-bg); color: var(--status-info-fg); }
.sd-callog__dir--out { background: rgba(167,139,250,0.15); color: #a78bfa; }
html.light .sd-callog__dir--out { color: #6d28d9; background: rgba(109,40,217,0.10); }
.sd-callog__num {
  font-family: var(--ff-mono);
  color: var(--text-primary);
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sd-callog__dur {
  font-family: var(--ff-mono);
  color: var(--text-tertiary);
  font-size: 10px;
}
.sd-callog__status {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/*. SIP / PBX panel: shows the "we register as an extension" story. */
.sd-sip {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sd-sip__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-xs);
}
.sd-sip__label {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
  font-weight: 600;
}
.sd-sip__value {
  font-family: var(--ff-mono);
  color: var(--text-primary);
  font-weight: 500;
}
.sd-sip__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 4px;
}
.sd-sip__name {
  font-family: var(--ff-display);
  font-weight: 500;
  color: var(--text-primary);
  font-size: var(--fs-base);
}

/*. Stats strip mimicking the redesigned dashboard. */
.sd-mkt-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.sd-mkt-stats__cell {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 12px;
}
.sd-mkt-stats__label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 4px;
}
.sd-mkt-stats__value {
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 144;
}

/*. Phone handset icon container (used in incoming-call visuals). */
.sd-handset {
  width: 56px; height: 56px;
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, var(--accent-bright), var(--accent));
  color: white;
  box-shadow: 0 10px 28px -10px rgba(99,102,241,0.6), inset 0 1px 0 rgba(255,255,255,0.25);
  flex-shrink: 0;
}
.sd-handset--ringing { animation: sd-ring 1.2s ease-in-out infinite; }
@keyframes sd-ring {
  0%, 100% { transform: rotate(0); }
  10%, 30% { transform: rotate(-12deg); }
  20%, 40% { transform: rotate(12deg); }
  50%      { transform: rotate(0); }
}

/*. Dial pad (for outbound campaign visual). */
.sd-dialpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.sd-dialpad__key {
  aspect-ratio: 1.25;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-family: var(--ff-display);
  font-weight: 500;
  color: var(--text-primary);
  font-size: 20px;
  line-height: 1;
}
.sd-dialpad__key small {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-top: 3px;
}
.sd-dialpad__key--call {
  background: var(--signal);
  color: #1a2d03;
  border-color: transparent;
}

/* ═════════════════════════════════════════════════════════════════
   LINE ICON SYSTEM
   sd_icon helper outputs these. Inherit color via currentColor,
   size via width/height attributes, cleanly style-able inline.
   ═════════════════════════════════════════════════════════════════ */

.sd-icon {
  display: inline-block;
  vertical-align: -0.125em;   /* visually align with text baseline */
  flex-shrink: 0;
}

/* ═════════════════════════════════════════════════════════════════
   INDUSTRY PICKER & WIZARD CARDS (non-technical wizard)
   Big, tactile picture cards. Tapping one picks it; selected gets a
   lime ring. Designed to feel like iOS Shortcuts, not Rails admin.
   ═════════════════════════════════════════════════════════════════ */

.industry-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 640px) { .industry-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .industry-grid { grid-template-columns: repeat(4, 1fr); } }

.industry-card {
  --industry-color: #6366F1;
  position: relative;
  padding: 22px 18px;
  border: 2px solid color-mix(in srgb, var(--industry-color) 18%, var(--border-default));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--industry-color) 4%, var(--bg-card));
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.1s ease, box-shadow 0.18s ease, background 0.18s ease;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-height: 128px;
  text-align: left;
  overflow: hidden;
}
.industry-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--industry-color);
  opacity: 0.75;
}
.industry-card:hover {
  border-color: color-mix(in srgb, var(--industry-color) 55%, var(--border-strong));
  background: color-mix(in srgb, var(--industry-color) 8%, var(--bg-card));
  transform: translateY(-1px);
  box-shadow: 0 6px 20px -12px color-mix(in srgb, var(--industry-color) 45%, transparent);
}
html.light .industry-card:hover { box-shadow: 0 6px 20px -12px color-mix(in srgb, var(--industry-color) 50%, transparent); }

.industry-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--industry-color) 14%, transparent);
  color: var(--industry-color);
  margin-bottom: 4px;
  border: 1px solid color-mix(in srgb, var(--industry-color) 28%, transparent);
}
.industry-card--selected .industry-card__icon {
  background: rgba(21,128,61,0.15);
  color: var(--signal-deep);
}
.industry-card__label {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs-base);
  letter-spacing: -0.005em;
  color: var(--text-primary);
  line-height: 1.2;
}
.industry-card__tag {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  line-height: 1.4;
}
.industry-card--selected {
  border-color: var(--signal-deep);
  box-shadow: 0 0 0 3px rgba(21,128,61,0.18);
  background: var(--status-success-bg);
}
.industry-card--selected::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--signal-deep);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m5 10 3 3 7-7'/%3E%3C/svg%3E");
  background-size: 14px;
  background-repeat: no-repeat;
  background-position: center;
}

/* ═════════════════════════════════════════════════════════════════
   VOICE CARD WITH PREVIEW BUTTON
   ═════════════════════════════════════════════════════════════════ */

.voice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 640px) { .voice-grid { grid-template-columns: repeat(4, 1fr); } }

.voice-tile {
  position: relative;
  padding: 16px 14px 14px;
  border: 2px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.voice-tile:hover { border-color: var(--border-strong); }

/* Gender-tinted backgrounds. Subtle so the selected-state
   green still reads as the primary signal. */
.voice-tile--male {
  background: color-mix(in srgb, #3b82f6 6%, var(--bg-card));
  border-color: color-mix(in srgb, #3b82f6 22%, var(--border-default));
}
.voice-tile--male .voice-tile__avatar {
  background: color-mix(in srgb, #3b82f6 16%, transparent) !important;
  color: #1d4ed8 !important;
}
.voice-tile--male:hover {
  border-color: color-mix(in srgb, #3b82f6 45%, var(--border-strong));
}
.voice-tile--female {
  background: color-mix(in srgb, #ec4899 6%, var(--bg-card));
  border-color: color-mix(in srgb, #ec4899 22%, var(--border-default));
}
.voice-tile--female .voice-tile__avatar {
  background: color-mix(in srgb, #ec4899 16%, transparent) !important;
  color: #be185d !important;
}
.voice-tile--female:hover {
  border-color: color-mix(in srgb, #ec4899 45%, var(--border-strong));
}

.voice-tile input[type="radio"] { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.voice-tile input[type="radio"]:checked + .voice-tile__content {
  /* handled via a separate rule below */
}
.voice-tile.is-selected {
  border-color: var(--signal-deep);
  background: var(--status-success-bg);
  box-shadow: 0 0 0 3px rgba(21,128,61,0.15);
}
.voice-tile__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.voice-tile.is-selected .voice-tile__avatar {
  background: rgba(21,128,61,0.15) !important;
  color: var(--signal-deep) !important;
}
.voice-tile__name {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.voice-tile__desc {
  font-size: var(--fs-micro);
  color: var(--text-tertiary);
  line-height: 1.35;
}
.voice-tile__preview {
  margin-top: 6px;
  padding: 5px 10px;
  border: 1px solid var(--border-default);
  background: var(--bg-input);
  border-radius: var(--radius-pill);
  font-size: var(--fs-micro);
  font-weight: 500;
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.15s;
  z-index: 2;
  position: relative;
}
.voice-tile__preview:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
  background: var(--bg-input-hover);
}
.voice-tile.is-speaking .voice-tile__preview {
  color: var(--signal-deep);
  border-color: var(--signal-deep);
  background: var(--status-success-bg);
}
.voice-tile.is-speaking .voice-tile__preview::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal-deep);
  margin-right: 4px;
  animation: sd-pulse 0.8s ease-in-out infinite;
}

/* ═════════════════════════════════════════════════════════════════
   LANGUAGE PICKER
   ═════════════════════════════════════════════════════════════════ */

.lang-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (min-width: 640px) { .lang-grid { grid-template-columns: repeat(6, 1fr); } }

.lang-tile {
  border: 2px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  padding: 12px 8px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.lang-tile:hover { border-color: var(--border-strong); }
.lang-tile__flag { font-family: var(--ff-mono); font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: 0.04em; color: var(--text-accent-bright); padding: 6px 10px; border-radius: 6px; background: var(--bg-active); }
.lang-tile__name { font-size: var(--fs-xs); font-weight: 500; color: var(--text-primary); }
.lang-tile.is-selected {
  border-color: var(--signal-deep);
  background: var(--status-success-bg);
  box-shadow: 0 0 0 2px rgba(21,128,61,0.12);
}

/* ═════════════════════════════════════════════════════════════════
   PICK A STYLE (greeting / personality). oversized radio cards
   ═════════════════════════════════════════════════════════════════ */

.style-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.style-card {
  padding: 16px 18px;
  border: 2px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.style-card:hover { border-color: var(--border-strong); }
.style-card__icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--bg-active);
  color: var(--text-accent-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.style-card.industry-card--selected .style-card__icon {
  background: rgba(21,128,61,0.15);
  color: var(--signal-deep);
}
.style-card__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs-base);
  color: var(--text-primary);
  letter-spacing: -0.005em;
  margin-bottom: 3px;
}
.style-card__desc {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  line-height: 1.45;
}
.style-card.industry-card--selected {
  /* reuse selection visual */
  background: var(--status-success-bg);
  border-color: var(--signal-deep);
  box-shadow: 0 0 0 3px rgba(21,128,61,0.12);
}

/*. Theme-aware logo wrapper, Both logo variants are in the DOM at all times; CSS shows the one
   matching the current theme so there's no FOUC when toggling. */
.sd-logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.sd-logo__dark,
.sd-logo__light { display: none; }
html:not(.light) .sd-logo__dark { display: inline-block; }
html.light        .sd-logo__light { display: inline-block; }

/*. Theme toggle button (used on marketing nav). */
.sd-theme-toggle {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-default);
  background: var(--mkt-eyebrow-bg);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.sd-theme-toggle:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.sd-theme-toggle svg { width: 16px; height: 16px; }
html.light .sd-theme-toggle .sd-icon-moon { display: block; }
html.light .sd-theme-toggle .sd-icon-sun  { display: none; }
html:not(.light) .sd-theme-toggle .sd-icon-moon { display: none; }
html:not(.light) .sd-theme-toggle .sd-icon-sun  { display: block; }

/* ═════════════════════════════════════════════════════════════════
   SAVINGS COMPARISON
   ═════════════════════════════════════════════════════════════════ */
.sd-savings {
  position: relative;
}
.sd-savings__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
  background: var(--bg-card-raised);
  border: 1px solid var(--border-subtle);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.sd-savings__col {
  padding: 36px 40px;
  position: relative;
}
.sd-savings__col--old {
  background: linear-gradient(180deg, rgba(239,68,68,0.035), transparent 70%);
}
.sd-savings__col--new {
  background: linear-gradient(180deg, rgba(21,128,61,0.05), transparent 70%);
}
.sd-savings__headline {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs-lg);
  color: var(--text-secondary);
  letter-spacing: -0.005em;
  margin-bottom: 10px;
}
.sd-savings__big {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(42px, 6vw, 64px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.sd-savings__big--old {
  color: var(--text-tertiary);
  position: relative;
}
.sd-savings__big--old::after {
  content: "";
  position: absolute;
  left: -6px;
  right: 28%;
  top: 52%;
  height: 3px;
  background: rgba(239,68,68,0.7);
  transform: rotate(-5deg);
  transform-origin: left center;
  border-radius: 2px;
}
.sd-savings__big--new {
  color: var(--text-primary);
}
.sd-savings__per {
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: 0;
}
.sd-savings__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sd-savings__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
  line-height: 1.5;
}
.sd-savings__list li strong {
  color: var(--text-primary);
  font-weight: 600;
}
.sd-savings__bullet {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  margin-top: 1px;
}
.sd-savings__bullet--minus {
  background: rgba(239,68,68,0.10);
  color: #b91c1c;
}
.sd-savings__bullet--plus {
  background: rgba(21,128,61,0.12);
  color: var(--signal-deep);
}
.sd-savings__vs {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  background: var(--bg-card);
  border-left: 1px solid var(--border-subtle);
  border-right: 1px solid var(--border-subtle);
}
.sd-savings__vs span {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 18px;
  color: var(--text-tertiary);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: 0.1em;
  text-transform: lowercase;
}
.sd-savings__bar {
  margin-top: 18px;
  padding: 36px 40px;
  text-align: center;
  background: linear-gradient(135deg, rgba(21,128,61,0.10), rgba(99,102,241,0.08));
  border: 1px solid rgba(21,128,61,0.30);
  border-radius: 22px;
  position: relative;
  overflow: hidden;
}
.sd-savings__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(21,128,61,0.15), transparent 60%);
  pointer-events: none;
}
.sd-savings__bar-label {
  position: relative;
  font-family: var(--ff-display);
  font-style: italic;
  font-size: var(--fs-base);
  color: var(--text-tertiary);
  margin-bottom: 6px;
}
.sd-savings__bar-number {
  position: relative;
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(56px, 10vw, 120px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--signal-deep);
  display: inline-flex;
  align-items: flex-start;
  gap: 4px;
}
.sd-savings__bar-currency {
  font-size: 0.45em;
  font-weight: 400;
  margin-top: 0.25em;
  color: var(--signal-deep);
  opacity: 0.75;
}
.sd-savings__bar-sub {
  position: relative;
  margin-top: 14px;
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
  font-style: italic;
}
@media (max-width: 760px) {
  .sd-savings__grid { grid-template-columns: 1fr; }
  .sd-savings__col { padding: 28px 24px; }
  .sd-savings__vs {
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    padding: 10px;
  }
  .sd-savings__vs span { writing-mode: horizontal-tb; transform: none; }
  .sd-savings__bar { padding: 28px 20px; }
}

/* ═════════════════════════════════════════════════════════════════
   FLOW + INTEGRATIONS
   ═════════════════════════════════════════════════════════════════ */
.sd-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 14px;
}
.sd-flow__step {
  background: var(--bg-card-raised);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 22px 20px;
  text-align: center;
  transition: all 0.2s ease;
}
.sd-flow__step--active {
  border-color: rgba(99,102,241,0.40);
  background: linear-gradient(180deg, rgba(99,102,241,0.08), var(--bg-card-raised));
  box-shadow: 0 0 0 4px rgba(99,102,241,0.08), var(--shadow-sm);
}
.sd-flow__icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--bg-active);
  color: var(--text-accent-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}
.sd-flow__step--active .sd-flow__icon {
  background: rgba(99,102,241,0.15);
}
.sd-flow__label {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs-base);
  color: var(--text-primary);
  margin-bottom: 4px;
  letter-spacing: -0.005em;
}
.sd-flow__sub {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-style: italic;
}
.sd-flow__arrow {
  color: var(--text-tertiary);
  opacity: 0.5;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 720px) {
  .sd-flow {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .sd-flow__arrow {
    transform: rotate(90deg);
    padding: 4px 0;
  }
}

.sd-integrations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  max-width: 1080px;
  margin: 0 auto;
}
.sd-integration {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  transition: all 0.18s ease;
}
.sd-integration:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.sd-integration__icon,
.sd-integration__logo {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  color: var(--text-accent-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
html:not(.light) .sd-integration__logo {
  background: #f4f4f5;
}
.sd-integration__logo img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.sd-integration__textmark {
  font-family: var(--ff-display);
  font-weight: 500;
  font-style: italic;
  font-size: 13px;
  color: #18181b;
  letter-spacing: -0.01em;
  text-align: center;
  padding: 0 4px;
  white-space: nowrap;
}
.sd-integration__name {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.sd-integration__desc {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
  line-height: 1.3;
}
.sd-integration__text { min-width: 0; flex: 1; }

/* ═════════════════════════════════════════════════════════════════
   ELEVATOR PITCH, large editorial pull-quote just under hero
   ═════════════════════════════════════════════════════════════════ */
.sd-pitch {
  max-width: 880px;
  margin: 0 auto;
  padding: 60px 28px 30px;
  text-align: center;
  position: relative;
}
.sd-pitch__rule {
  width: 48px;
  height: 2px;
  background: var(--text-accent-bright);
  opacity: 0.55;
  margin: 0 auto 26px;
  border-radius: 2px;
}
.sd-pitch__body {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: var(--text-primary);
  max-width: 44ch;
  margin: 0 auto;
}
.sd-pitch__body em {
  font-style: italic;
  color: var(--text-accent-bright);
  font-weight: 500;
}
.sd-pitch__kicker {
  display: block;
  margin-top: 16px;
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
}
@media (max-width: 640px) {
  .sd-pitch { padding: 40px 20px 20px; }
  .sd-pitch__body { font-size: 20px; }
}

/* ═════════════════════════════════════════════════════════════════
   PITCH V2 — capability grid + setup speed strip
   ═════════════════════════════════════════════════════════════════ */
.sd-pitch-v2 {
  max-width: 1240px;
  margin: 0 auto;
  padding: 90px 24px 100px;
}
.sd-pitch-v2__header {
  max-width: 720px;
  margin: 0 auto 60px;
  text-align: center;
}
.sd-pitch-v2__header .sd-mkt-section__title {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(40px, 5.2vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin: 18px 0 18px;
}
.sd-pitch-v2__header .sd-mkt-section__title em {
  font-style: italic;
  background: linear-gradient(120deg, #6366f1 0%, #22c55e 55%, #f59e0b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.sd-pitch-v2__header .sd-mkt-section__lede {
  font-size: var(--fs-base);
  color: var(--text-tertiary);
  line-height: 1.55;
  max-width: 56ch;
  margin: 0 auto;
}

.sd-caps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 70px;
}
.sd-cap {
  position: relative;
  padding: 26px 26px 30px;
  background: var(--bg-card-raised);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
  overflow: hidden;
  isolation: isolate;
}
.sd-cap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, rgba(99,102,241,0.06), transparent 60%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: -1;
}
.sd-cap:hover {
  transform: translateY(-3px);
  border-color: rgba(99,102,241,0.45);
  box-shadow: 0 22px 46px -16px rgba(99,102,241,0.28);
}
.sd-cap:hover::before { opacity: 1; }

.sd-cap__badge {
  position: absolute;
  top: 18px;
  right: 22px;
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--text-tertiary);
  opacity: 0.65;
}
.sd-cap__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(99,102,241,0.20), rgba(99,102,241,0.04));
  border: 1px solid rgba(99,102,241,0.24);
  color: var(--text-accent-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.sd-cap__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs-lg);
  line-height: 1.18;
  letter-spacing: -0.008em;
  color: var(--text-primary);
  margin: 0;
}
.sd-cap__body {
  color: var(--text-tertiary);
  font-size: var(--fs-sm);
  line-height: 1.55;
  margin: 0;
}

/* Hero capability: spans all columns with an elaborate gradient */
.sd-cap--hero {
  grid-column: 1 / -1;
  padding: 44px 48px 44px;
  background:
    radial-gradient(ellipse 600px 320px at 90% 20%, rgba(34,197,94,0.16), transparent 65%),
    radial-gradient(ellipse 480px 300px at 10% 80%, rgba(251,146,60,0.12), transparent 65%),
    linear-gradient(140deg, rgba(99,102,241,0.18), rgba(99,102,241,0.04) 70%);
  border: 1px solid rgba(99,102,241,0.42);
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 36px;
  align-items: center;
}
.sd-cap--hero:hover {
  transform: translateY(-2px);
  border-color: rgba(99,102,241,0.55);
}
.sd-cap--hero .sd-cap__badge {
  position: static;
  opacity: 0.75;
  margin-bottom: 14px;
}
.sd-cap--hero .sd-cap__title {
  font-size: clamp(32px, 3.8vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.sd-cap--hero .sd-cap__title em {
  font-style: italic;
  background: linear-gradient(120deg, #6366f1, #22c55e 60%, #f59e0b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.sd-cap--hero .sd-cap__body {
  font-size: var(--fs-base);
  color: var(--text-secondary);
  max-width: 48ch;
  margin-top: 14px;
}
.sd-cap__hero-left { min-width: 0; }
.sd-cap__hero-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.sd-cap__tags {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}
.sd-cap__tags span {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 16px;
  background: var(--bg-card);
  border: 1px solid rgba(99,102,241,0.30);
  border-radius: 999px;
  color: var(--text-accent-bright);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .sd-caps { grid-template-columns: 1fr 1fr; }
  .sd-cap--hero {
    grid-template-columns: 1fr;
    padding: 32px;
    gap: 20px;
  }
  .sd-cap__hero-right { justify-content: flex-start; }
  .sd-cap__tags {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
  }
}
@media (max-width: 580px) {
  .sd-caps { grid-template-columns: 1fr; }
  .sd-cap--hero .sd-cap__title { font-size: 32px; }
}

/* ═════════════════════════════════════════════════════════════════
   SETUP SPEED STRIP — four steps with an animated traveling particle
   ═════════════════════════════════════════════════════════════════ */
.sd-speed {
  padding: 48px 44px;
  background:
    radial-gradient(ellipse 800px 260px at 50% 0%, rgba(34,197,94,0.18), transparent 70%),
    linear-gradient(145deg, rgba(34,197,94,0.10), rgba(99,102,241,0.08) 70%);
  border: 1px solid rgba(34,197,94,0.32);
  border-radius: 28px;
  position: relative;
  overflow: hidden;
}
.sd-speed::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,  rgba(34,197,94,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(34,197,94,0.05) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 20%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 20%, transparent 85%);
  pointer-events: none;
}
.sd-speed__header {
  text-align: center;
  margin-bottom: 36px;
  position: relative;
}
.sd-speed__header h3 {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(28px, 3.2vw, 44px);
  margin: 10px 0 10px;
  color: var(--text-primary);
  letter-spacing: -0.018em;
  line-height: 1.05;
}
.sd-speed__header h3 em {
  font-style: italic;
  color: var(--signal-deep);
}
.sd-speed__header p {
  color: var(--text-tertiary);
  font-size: var(--fs-sm);
  margin: 0;
  max-width: 48ch;
  margin: 0 auto;
}

.sd-speed__steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  max-width: 920px;
  margin: 0 auto 34px;
  position: relative;
}
.sd-speed__step {
  text-align: center;
  padding: 22px 14px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  min-width: 0;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.sd-speed__step:hover {
  transform: translateY(-2px);
  border-color: rgba(34,197,94,0.45);
}
.sd-speed__num {
  font-family: var(--ff-display);
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
  background: linear-gradient(135deg, #22c55e, #15803d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  margin-bottom: 10px;
}
.sd-speed__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.sd-speed__time {
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
  margin-top: 6px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sd-speed__line {
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, rgba(34,197,94,0.20), rgba(34,197,94,0.55), rgba(34,197,94,0.20));
  border-radius: 2px;
  position: relative;
  min-width: 20px;
}
.sd-speed__line::after {
  content: "";
  position: absolute;
  left: 0;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 14px rgba(34,197,94,0.9);
  animation: sd-speed-travel 3.4s linear infinite;
}
.sd-speed__line:nth-of-type(2)::after { animation-delay: -1.1s; }
.sd-speed__line:nth-of-type(3)::after { animation-delay: -2.2s; }
@keyframes sd-speed-travel {
  0%   { left: 0%;   opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { left: calc(100% - 8px); opacity: 0; }
}

.sd-speed__total {
  text-align: center;
  padding-top: 22px;
  border-top: 1px dashed rgba(34,197,94,0.35);
  position: relative;
}
.sd-speed__total-eyebrow {
  display: block;
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}
.sd-speed__total-value {
  display: block;
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #22c55e, #15803d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.sd-speed__total-kicker {
  display: block;
  font-family: var(--ff-display);
  font-style: italic;
  font-size: var(--fs-base);
  color: var(--text-secondary);
  margin-top: 8px;
}

@keyframes sd-speed-travel-v {
  0%   { top: 0%;   opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { top: calc(100% - 8px); opacity: 0; }
}
@media (max-width: 760px) {
  .sd-speed { padding: 32px 22px; }
  .sd-speed__steps {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .sd-speed__line {
    height: 24px;
    width: 2px;
    margin: 0 auto;
    background: linear-gradient(to bottom, rgba(34,197,94,0.20), rgba(34,197,94,0.55), rgba(34,197,94,0.20));
  }
  .sd-speed__line::after {
    top: 0; left: -3px;
    animation-name: sd-speed-travel-v;
  }
}

/* ═════════════════════════════════════════════════════════════════
   LIVE TICKER STRIP — thin editorial strip at the very top of the page
   ═════════════════════════════════════════════════════════════════ */
.sd-ticker {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 41;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px 24px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  overflow: hidden;
}
.sd-ticker::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 420px 60px at 50% 0%, rgba(99,102,241,0.06), transparent 80%);
  pointer-events: none;
}
.sd-ticker__pulse {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--signal-deep);
  box-shadow: 0 0 0 0 rgba(21,128,61,0.55);
  animation: sd-pulse 2s ease-out infinite;
  flex-shrink: 0;
}
@keyframes sd-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(21,128,61,0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(21,128,61,0); }
  100% { box-shadow: 0 0 0 0 rgba(21,128,61,0); }
}
.sd-ticker__label { position: relative; }
.sd-ticker__count {
  position: relative;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  text-transform: none;
}
.sd-ticker__sep {
  position: relative;
  opacity: 0.3;
  font-weight: 300;
}
@media (max-width: 620px) {
  .sd-ticker { gap: 10px; padding: 8px 16px; font-size: 10px; }
  .sd-ticker__count { font-size: 11px; }
  .sd-ticker__sep { display: none; }
}

/* ═════════════════════════════════════════════════════════════════
   SCROLL REVEAL — subtle stagger as sections enter the viewport
   ═════════════════════════════════════════════════════════════════ */
[data-controller~="reveal"] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(.2,.65,.2,1), transform 0.8s cubic-bezier(.2,.65,.2,1);
  will-change: opacity, transform;
}
[data-controller~="reveal"].is-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-controller~="reveal"] { opacity: 1; transform: none; transition: none; }
}

/* ═════════════════════════════════════════════════════════════════
   EDITORIAL CHAPTER MARKER — big display number + rule + mono label
   ═════════════════════════════════════════════════════════════════ */
.sd-chapter {
  max-width: 1100px;
  margin: 0 auto 10px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 22px;
}
.sd-chapter__num {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(56px, 7vw, 88px);
  line-height: 0.85;
  letter-spacing: -0.035em;
  flex-shrink: 0;
  background: linear-gradient(140deg, #6366f1 0%, #22c55e 65%, #f59e0b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  opacity: 0.38;
}
.sd-chapter__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--border-strong), transparent 95%);
  position: relative;
}
.sd-chapter__rule::before {
  content: "";
  position: absolute;
  left: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-accent-bright);
  opacity: 0.7;
}
.sd-chapter__label {
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ═════════════════════════════════════════════════════════════════
   HERO ATMOSPHERE — layered gradient mesh that drifts behind the hero
   ═════════════════════════════════════════════════════════════════ */
.sd-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.sd-hero::before {
  content: "";
  position: absolute;
  inset: -10% -5% -10% -5%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 720px 440px at 12% 8%,  rgba(99,102,241,0.28), transparent 60%),
    radial-gradient(ellipse 640px 560px at 88% 48%, rgba(34,197,94,0.18),  transparent 65%),
    radial-gradient(ellipse 520px 420px at 56% 92%, rgba(251,146,60,0.14), transparent 65%),
    radial-gradient(ellipse 380px 300px at 30% 85%, rgba(168,85,247,0.12), transparent 65%);
  animation: sd-hero-drift 22s ease-in-out infinite alternate;
}
.sd-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  var(--border-subtle) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border-subtle) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 20%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 20%, transparent 85%);
  opacity: 0.35;
}
@keyframes sd-hero-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-2%, 1.5%, 0) scale(1.03); }
  100% { transform: translate3d(1.5%, -1%, 0) scale(1.01); }
}
@media (prefers-reduced-motion: reduce) {
  .sd-hero::before { animation: none; }
}

/* ═════════════════════════════════════════════════════════════════
   GRAIN OVERLAY — fine noise on raised cards for premium feel
   ═════════════════════════════════════════════════════════════════ */
.sd-card--raised {
  position: relative;
  isolation: isolate;
}
.sd-card--raised::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.sd-card--raised > * { position: relative; z-index: 1; }

/* ═════════════════════════════════════════════════════════════════
   LIVE TRANSCRIPT TYPING CURSOR — blinking block at end of current line
   ═════════════════════════════════════════════════════════════════ */
.sd-transcript__line::after {
  content: "";
}
.sd-transcript__row[data-hero-call-target="row"] .sd-transcript__line {
  position: relative;
  min-height: 1.4em;
}

/* ═════════════════════════════════════════════════════════════════
   LIGHT-MODE TAILWIND REMAP
   A large number of authenticated pages were written against
   hardcoded Tailwind dark classes (bg-zinc-900/50, text-zinc-400,
   border-zinc-800, bg-indigo-950/40, etc). In light mode those
   render as dark gray blocks on a white background which is
   unreadable. Rather than rewrite 20+ templates, this block
   remaps the common offenders to theme-aware variables so every
   page reads correctly in both themes.
   ═════════════════════════════════════════════════════════════════ */
html.light [class*="bg-zinc-9"],
html.light [class*="bg-zinc-8"],
html.light .bg-black {
  background-color: var(--bg-card) !important;
}
html.light [class*="border-zinc-8"],
html.light [class*="border-zinc-7"] {
  border-color: var(--border-default) !important;
}
html.light [class*="text-zinc-3"],
html.light [class*="text-zinc-4"] {
  color: var(--text-secondary) !important;
}
html.light [class*="text-zinc-5"] {
  color: var(--text-tertiary) !important;
}
html.light [class*="text-zinc-6"],
html.light [class*="text-zinc-7"] {
  color: var(--text-muted) !important;
}
html.light .text-white,
html.light [class*="text-zinc-1"],
html.light [class*="text-zinc-2"] {
  color: var(--text-primary) !important;
}

/* Indigo tints used by the original dark theme for selected /
   active / accent surfaces. Re-tint for light mode. */
html.light [class*="bg-indigo-9"],
html.light [class*="bg-indigo-95"] {
  background-color: rgba(99, 102, 241, 0.08) !important;
}
html.light [class*="bg-indigo-6"] {
  background-color: #4f46e5 !important;
  color: #ffffff !important;
}
html.light [class*="border-indigo-7"],
html.light [class*="border-indigo-5"] {
  border-color: rgba(99, 102, 241, 0.35) !important;
}
html.light [class*="text-indigo-3"],
html.light [class*="text-indigo-4"] {
  color: var(--text-accent-bright) !important;
}

/* Emerald / red / amber status tints */
html.light [class*="bg-emerald-9"] {
  background-color: rgba(34, 197, 94, 0.12) !important;
}
html.light [class*="text-emerald-4"],
html.light [class*="text-emerald-3"] {
  color: var(--signal-deep) !important;
}
html.light [class*="bg-red-9"] {
  background-color: rgba(220, 38, 38, 0.10) !important;
}
html.light [class*="text-red-4"],
html.light [class*="text-red-3"] {
  color: var(--alert-deep) !important;
}
html.light [class*="bg-amber-9"],
html.light [class*="bg-yellow-9"] {
  background-color: rgba(245, 158, 11, 0.12) !important;
}
html.light [class*="text-amber-4"],
html.light [class*="text-yellow-4"] {
  color: #92400e !important;
}
html.light [class*="bg-blue-9"] {
  background-color: rgba(37, 99, 235, 0.10) !important;
}
html.light [class*="text-blue-4"],
html.light [class*="text-blue-3"] {
  color: #1d4ed8 !important;
}

/* Raw input elements inside these legacy pages — they still have
   bg-zinc-800 borders etc that our input selectors skipped. Give
   them the same treatment as .sd-input for consistency. */
html.light select.bg-zinc-800,
html.light input.bg-zinc-800,
html.light textarea.bg-zinc-800 {
  background-color: var(--bg-input) !important;
  border: 1.5px solid var(--border-default) !important;
  color: var(--text-primary) !important;
}
html.light select.bg-zinc-800:focus,
html.light input.bg-zinc-800:focus,
html.light textarea.bg-zinc-800:focus {
  border-color: var(--border-focus) !important;
  box-shadow: var(--shadow-focus) !important;
  outline: none !important;
}