/* ═════════════════════════════════════════════════════════════════
   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;

  /* Phase-category accents. Every shipped feature in Phase A-F picks
     ONE of these as its --hero-accent, so the product grows into a
     coherent system instead of looking bolted on. Names match the
     product-roadmap phases (A Receptionist, B Active, C Intelligence,
     D Channels, E Enterprise depth, F Packaging). */
  --cat-a: #F59E0B;
  --cat-b: #60D394;
  --cat-c: #6265F5;
  --cat-d: #60B8FF;
  --cat-e: #64748B;
  --cat-f: #A78BFA;

  /*. 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%);
  /* App-surface atmosphere: a much quieter version of the marketing
     body gradient so /dashboard and /call_logs aren't visually flat
     next to /features. Tuned down so it reads as "the room has
     depth" rather than "we painted the walls". */
  --app-body-gradient:
    radial-gradient(1100px 560px at 88% -8%, rgba(99,102,241,0.07), transparent 62%),
    radial-gradient(900px 500px at 8% 40%, rgba(163,230,53,0.025), transparent 70%);
  --app-grain-opacity: 0.022;
  --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%);
  /* Light-mode app atmosphere: much quieter wash. */
  --app-body-gradient:
    radial-gradient(1100px 520px at 88% -5%, rgba(99,102,241,0.05), transparent 60%),
    radial-gradient(900px 420px at 8% 45%, rgba(34,197,94,0.025), transparent 70%);
  --app-grain-opacity: 0.018;
  --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";
}

/* App-surface atmosphere: carries a quiet breath of the marketing
   radial-gradient wash into the app so /dashboard, /call_logs, etc.
   aren't visually flat next to /features. Attached to the body so
   scrolling doesn't drag the gradient through long pages. Skipped
   on marketing (.sd-mkt-body has its own louder version) and on
   deck-print surfaces (html.light scoped differently). */
body:not(.sd-mkt-body):not(.sd-deck-body) {
  background-image: var(--app-body-gradient);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* Paper-grain overlay for app pages. Tuned a hair below marketing's
   6% so it reads as weave texture, not visible noise. Rendered in
   a fixed pseudo-element on the html element so it lives above
   the gradient but below every interactive layer. */
body:not(.sd-mkt-body):not(.sd-deck-body)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--app-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;
}

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

/* Editorial flourish carried over from marketing: page-header
   eyebrows get a leading typographic rule so "Phase A · Receptionist"
   reads with the same book-spine character as the feature pages.
   Applies only inside .sd-page-header so section eyebrows stay
   plain where density matters. */
.sd-page-header .sd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.sd-page-header .sd-eyebrow::before {
  content: "";
  width: 20px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  display: inline-block;
}
.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); }

/* ── Inline help "?" pip ──
   Companion to ApplicationHelper#info_tip. Used wherever a label
   has unavoidable technical jargon (PSTN, SIP, A2P, QA score,
   etc.) so the operator gets a plain-English translation without
   leaving the page. The tooltip bubble uses CSS only so it works
   without JS; the title= attribute is the keyboard/SR fallback. */
.sd-info-tip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  margin-left: 6px; vertical-align: middle;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text-tertiary) 22%, transparent);
  color: var(--text-secondary);
  font-family: var(--ff-mono); font-size: 10px; font-weight: 700;
  cursor: help; user-select: none; position: relative;
  transition: background 120ms ease, color 120ms ease;
}
.sd-info-tip:hover, .sd-info-tip:focus-visible {
  background: var(--text-accent-bright, #6366f1);
  color: #fff; outline: none;
}
.sd-info-tip::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%; bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  background: var(--bg-overlay, #0f1117);
  color: #f5f5f7;
  font-family: var(--ff-body, system-ui); font-size: 12px; font-weight: 500;
  letter-spacing: -0.005em; line-height: 1.45;
  padding: 8px 12px; border-radius: 8px;
  white-space: normal; max-width: 280px;
  width: max-content;
  box-shadow: 0 8px 24px -10px rgba(15, 23, 42, 0.45);
  opacity: 0; pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
  z-index: 1000;
  text-transform: none;
}
.sd-info-tip::before {
  content: "";
  position: absolute;
  left: 50%; bottom: calc(100% + 4px);
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--bg-overlay, #0f1117);
  opacity: 0;
  transition: opacity 140ms ease;
}
.sd-info-tip:hover::after,
.sd-info-tip:focus-visible::after {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
.sd-info-tip:hover::before,
.sd-info-tip:focus-visible::before { opacity: 1; }


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

.sd-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-bottom: var(--sp-7);
  flex-wrap: wrap;
}
/* Below tablet, the title column takes the row by itself and the
   actions stack on a new line, so an "Import CSV / Add contact"
   pair never gets pushed off the right edge of a 375px viewport.
   Action buttons themselves get the freedom to wrap individually. */
.sd-page-header__actions {
  flex-wrap: wrap;
  margin-left: auto;
}
@media (max-width: 640px) {
  .sd-page-header__actions {
    width: 100%;
    margin-left: 0;
  }
}
.sd-page-header__title {
  font-family: var(--ff-display);
  font-size: var(--fs-2xl);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.08;
  color: var(--text-primary);
  margin: 0;
  font-variation-settings: "opsz" 144;
}
.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; flex-wrap: wrap; }

.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;
}
/* Marketing-carryover: a barely-there top-edge highlight on every
   card. Reads as material depth without adding shadow weight, and
   stays visible in both dark + light modes because the gradient
   sits on whatever --bg-card resolves to. pointer-events: none so
   it never swallows a click. */
.sd-card::before {
  content: "";
  position: absolute;
  left: 14px; right: 14px; top: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--text-primary) 10%, transparent) 50%,
    transparent 100%);
  pointer-events: none;
}
.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); }

/* Interactive cards. Hover state is gated behind an actual anchor or
   button tag, or the --link modifier, because a bare hover effect on
   a non-clickable card is a promise the UI never keeps. Three usage
   modes:
     <a class="sd-card"> ... </a>               -> whole card is the link
     <button class="sd-card"> ... </button>     -> whole card triggers an action
     <div class="sd-card sd-card--link">        -> stretched-link pattern, needs
        ... nested content ...                    one child anchor with
        <a class="sd-stretched-link" href>        .sd-stretched-link inside
     </div>                                       (keeps nested buttons working). */
a.sd-card,
button.sd-card,
.sd-card--link {
  display: block;
  text-align: left;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
a.sd-card:hover,
button.sd-card:hover,
.sd-card--link:hover {
  border-color: var(--border-strong);
  background: var(--bg-card-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
a.sd-card:focus-visible,
button.sd-card:focus-visible,
.sd-card--link:focus-within {
  outline: 2px solid color-mix(in srgb, var(--accent-deep) 60%, transparent);
  outline-offset: 2px;
  border-color: var(--border-strong);
}
a.sd-card:active,
button.sd-card:active,
.sd-card--link:active { transform: translateY(0); }

/* Legacy --interactive modifier: keep working for any existing markup,
   but treat it as a visual hover only (no click affordance of its own).
   New code should use a.sd-card / button.sd-card / .sd-card--link. */
.sd-card--interactive { transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; }
a.sd-card--interactive:hover,
button.sd-card--interactive:hover,
.sd-card--interactive.sd-card--link:hover { transform: translateY(-1px); }

/* Stretched-link pattern: lets a <div class="sd-card sd-card--link">
   stay a div (so it can still contain buttons / actions) while making
   the whole card surface clickable via a nested <a class="sd-stretched-link">.
   The anchor's ::after fills the card; nested interactive elements
   (buttons, links) that need to keep their own click behaviour add
   .sd-click-through so they sit above the overlay. */
.sd-card--link { position: relative; }
.sd-stretched-link {
  position: static;
  color: inherit;
  text-decoration: none;
}
.sd-stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: auto;
}
.sd-click-through { position: relative; z-index: 2; }

/* Arrow affordance: any .sd-card--link / a.sd-card can opt into a
   chevron that slides in on hover so the user KNOWS the card is
   clickable before they hover. Purely visual, decorative. */
.sd-card--hint-arrow { padding-right: calc(var(--sp-6) + 18px); }
.sd-card--hint-arrow::after {
  content: "→";
  position: absolute;
  right: var(--sp-6);
  top: 50%;
  transform: translate(8px, -50%);
  opacity: 0;
  color: var(--text-tertiary);
  font-size: var(--fs-lg);
  transition: transform 0.18s ease, opacity 0.18s ease, color 0.18s ease;
  pointer-events: none;
}
a.sd-card.sd-card--hint-arrow:hover::after,
button.sd-card.sd-card--hint-arrow:hover::after,
.sd-card--link.sd-card--hint-arrow:hover::after {
  opacity: 1;
  transform: translate(0, -50%);
  color: var(--text-primary);
}

.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.
   Baseline .sd-stat is static: a bordered box that shows a number.
   Hover and transform effects are reserved for the anchor / button /
   --link variants, because a hover that goes nowhere is a bug. */
.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);
  position: relative;
  overflow: hidden;
}
a.sd-stat,
button.sd-stat,
.sd-stat--link {
  text-decoration: none;
  cursor: pointer;
  color: inherit;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
a.sd-stat:hover,
button.sd-stat:hover,
.sd-stat--link:hover {
  border-color: var(--border-strong);
  background: var(--bg-card-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
a.sd-stat:focus-visible,
button.sd-stat:focus-visible,
.sd-stat--link:focus-within {
  outline: 2px solid color-mix(in srgb, var(--accent-deep) 60%, transparent);
  outline-offset: 2px;
  border-color: var(--border-strong);
}
.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); }

/* Accented empty states. When the component is passed an accent
   (cat_a..f), the dashed border, the icon halo, and any inline
   button inside the slot pick up that hue so the empty /call_logs
   reads as cat-d, /people as cat-c, and so on. The decoration is
   restrained on purpose (8% tinted background, 35% tinted dashed
   border, 24% tinted icon halo) so the empty state still feels
   like part of the same UI, just lifted. */
.sd-empty--accented {
  border-color: color-mix(in srgb, var(--accent-hex, var(--text-tertiary)) 38%, var(--border-default));
  background: color-mix(in srgb, var(--accent-hex, transparent) 4%, var(--bg-card));
}
.sd-empty--accented .sd-empty__icon {
  background: color-mix(in srgb, var(--accent-hex, transparent) 14%, var(--bg-active));
  color: var(--accent-hex, var(--text-accent));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-hex, transparent) 8%, transparent);
}
.sd-empty--accented .sd-btn--primary,
.sd-empty--accented .sd-btn.sd-btn--accent {
  background: var(--accent-hex);
  border-color: var(--accent-hex);
  color: #fff;
}

/*. 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 {
  /* Keeps the rendered glyph at 34px but guarantees a 44px touch
     target per Apple HIG + WCAG 2.5.5. Padding is transparent so
     the visual chrome doesn't grow. */
  min-width: 44px;
  min-height: 44px;
  padding: 5px;
  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; }

/* ═════════════════════ MODAL ═════════════════════ */
/* Centered modal used by the post-scrape verification flow.
   Backdrop covers the viewport, modal panel is centered, max-width
   640px on desktop, full-width with 16px margins on mobile. */
.sd-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: color-mix(in srgb, var(--bg-body) 60%, #000 40%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
  animation: sd-modal-fade-in 160ms ease-out;
}
.sd-modal {
  width: 100%;
  max-width: 640px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
  padding: 24px 28px;
  animation: sd-modal-rise 220ms ease-out;
}
.sd-modal__header { margin-bottom: 20px; }
.sd-modal__body { width: 100%; }
.sd-modal__footer { width: 100%; }
@keyframes sd-modal-fade-in {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes sd-modal-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

/* Native range input styled to match SoloDial's palette. We swapped
   the old custom-JS sliders over to <input type="range"> because the
   hand-rolled version silently broke on drag (the thumb's
   pointer-events:none collapsed the hit target below the track). */
.sd-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 20px;
  background: transparent;
  cursor: pointer;
  margin: 0;
  padding: 0;
}
.sd-range:focus { outline: none; }
.sd-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-bright) 0%, var(--accent-bright) var(--sd-range-pct, 50%), var(--border-default) var(--sd-range-pct, 50%), var(--border-default) 100%);
}
.sd-range::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--border-default);
}
.sd-range::-moz-range-progress {
  height: 6px;
  border-radius: 3px;
  background: var(--accent-bright);
}
.sd-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent-bright);
  border: 3px solid var(--bg-body);
  box-shadow: 0 0 0 1px var(--accent-bright);
  margin-top: -7px;
  cursor: grab;
}
.sd-range::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent-bright);
  border: 3px solid var(--bg-body);
  box-shadow: 0 0 0 1px var(--accent-bright);
  cursor: grab;
}
.sd-range:active::-webkit-slider-thumb { cursor: grabbing; }
.sd-range:active::-moz-range-thumb     { cursor: grabbing; }

.sd-range-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 8px 0 4px;
}
.sd-range-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--accent-bright);
  white-space: nowrap;
  min-width: 92px;
  text-align: right;
}

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

/* Shimmering sweep for the scraping progress bar. A subtle moving
   highlight keeps visual motion even when the bar's width hasn't
   moved between server polls, so the user always sees the job is
   alive. */
@keyframes sd-shimmer {
  0%   { background-position: -100% 0; }
  100% { background-position:  200% 0; }
}

/* ═════════════════════ 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: 0; 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);
}
.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;
  }
  /* Fixed card height so the phone frame reads as a consistent
     screen-shaped window regardless of whether the sent-confirmation
     panel is open. Sized to comfortably hold the avatar row +
     status pills + waveform + 4 chat bubbles + sent panel + live
     badges at the bottom, with a small buffer. */
  .sd-hero-demo { height: 740px; z-index: 3; }
  /* Only reserve the 940px of vertical space on heroes that actually
     host the absolute-positioned phone frame. Pages like /pricing and
     /trust reuse .sd-hero without a demo and would otherwise inherit
     hundreds of px of dead space. :has() is well-supported in all
     browsers we care about. */
  .sd-hero:has(.sd-hero-demo) { min-height: 940px; }
}

/* ── Compact overrides for the hero phone card ─────────────────
   Everything inside .sd-hero-demo is scaled down from the defaults
   defined earlier in this file so the whole call card lives
   inside a fixed 620px frame on desktop (and a natural-height
   frame on mobile, where the card is not absolute-positioned).
   Kept in one block here so the sizing model is easy to re-tune. */
.sd-hero-demo .sd-callcard          { padding: 12px 14px; gap: 8px; }
.sd-hero-demo .sd-callscene         { padding: 4px 2px 10px; gap: 6px; }
.sd-hero-demo .sd-callscene__side   { gap: 8px; }
.sd-hero-demo .sd-callscene__avatar,
.sd-hero-demo .sd-callscene__ring   { width: 52px; height: 52px; }
.sd-hero-demo .sd-callscene__ring   { margin-left: -26px; margin-top: -26px; }
.sd-hero-demo .sd-callscene__face   { width: 38px; height: 38px; }
.sd-hero-demo .sd-callscene__face svg { width: 16px; height: 16px; }
.sd-hero-demo .sd-callscene__role   { font-size: 8px; margin-bottom: 3px; }
.sd-hero-demo .sd-callscene__name   { font-size: 12px; }
.sd-hero-demo .sd-callscene__phone  { font-size: 9px; }
.sd-hero-demo .sd-callscene__status { font-size: 8px; padding: 2px 6px; }
.sd-hero-demo .sd-callscene__pill   { font-size: 9px; padding: 2px 7px; }
.sd-hero-demo .sd-callstatus        { padding: 6px 0 0; margin-top: 2px; gap: 4px; }
.sd-hero-demo .sd-callstatus__pill  { padding: 2px 7px; font-size: 9px; }
.sd-hero-demo .sd-voicewave-wrap    { height: 40px; }
.sd-hero-demo .sd-chat              { gap: 6px; min-height: 0; }
.sd-hero-demo .sd-chat .sd-transcript__row { min-height: 40px; }
.sd-hero-demo .sd-chat__bubble      { padding: 6px 10px; font-size: 11px; border-radius: 12px; }
.sd-hero-demo .sd-chat__meta        { font-size: 9px; margin-bottom: 2px; gap: 8px; }
.sd-hero-demo .sd-sent.is-sent      { max-height: 120px; padding: 7px 10px 9px; margin-top: 6px; }
.sd-hero-demo .sd-sent__head        { font-size: 9px; margin-bottom: 4px; gap: 6px; }
.sd-hero-demo .sd-sent__check       { width: 13px; height: 13px; }
.sd-hero-demo .sd-sent__check svg   { width: 8px; height: 8px; }
.sd-hero-demo .sd-sent__channel     { font-size: 10.5px; gap: 6px; }
.sd-hero-demo .sd-sent__chan-label  { font-size: 8px; min-width: 38px; }
.sd-hero-demo .sd-callbadges        { padding-top: 6px; gap: 4px; }
.sd-hero-demo .sd-callbadges .sd-badge { font-size: 9px; padding: 2px 7px; }
.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).
    Reserves vertical space for the final (all-revealed) state so the
    hero card doesn't pump-and-grow as rows type in one-by-one. On
    mobile the lines wrap 2-3x so we bump the reservation up in the
    narrow-viewport media query below. */
.sd-transcript {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: var(--fs-xs);
  min-height: 200px;
  overflow: hidden;
}
@media (max-width: 640px) {
  .sd-transcript {
    min-height: 320px; /* lines wrap to 2-3 on phone widths */
  }
}
.sd-transcript__row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.55;
  /* Reserve a minimum row height so the card doesn't jump when the
     line is still empty during the type-out animation. */
  min-height: 1.55em;
}
.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); }

/* ── Bubble-style transcript (used on the hero call card) ───────
   Layered ON TOP of .sd-transcript, so .sd-chat wins when both
   classes are present on the container and the rows. Keeps the
   .sd-transcript__line hook the hero-call controller types into.

   HEIGHT LOCK: each row reserves its final multi-line height even
   when the bubble is still empty or mid-typing, so the card does
   not grow and push the rest of the page as the animation runs.
   Particularly important on mobile where a two-line bubble is
   ~25px taller than its empty state, times four rows. Without
   this lock, scrolling past the hero jumps on every animation
   cycle. */
.sd-chat {
  display: flex; flex-direction: column; gap: 10px;
  padding-right: 2px;
  min-height: 260px;
}
@media (max-width: 640px) {
  .sd-chat { min-height: 340px; }
}
.sd-chat .sd-transcript__row {
  display: flex;
  grid-template-columns: none;
  align-items: flex-end;
  min-height: 56px;
}
@media (max-width: 640px) {
  .sd-chat .sd-transcript__row { min-height: 74px; }
}
.sd-chat__row--agent  { justify-content: flex-end; }
.sd-chat__row--caller { justify-content: flex-start; }
.sd-chat__bubble {
  max-width: 78%;
  padding: 9px 13px;
  border-radius: 16px;
  font-size: var(--fs-xs);
  line-height: 1.45;
  position: relative;
  word-wrap: break-word;
}
.sd-chat__row--agent .sd-chat__bubble {
  background: #4f46e5;
  color: #ffffff;
  border-bottom-right-radius: 4px;
}
.sd-chat__row--caller .sd-chat__bubble {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-bottom-left-radius: 4px;
}
.sd-chat__meta {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 3px;
}
.sd-chat__row--agent .sd-chat__meta  { color: rgba(255,255,255,0.78); }
.sd-chat__row--caller .sd-chat__meta { color: var(--text-tertiary); }
.sd-chat__ts {
  font-weight: 500; letter-spacing: 0.04em; text-transform: none;
  opacity: 0.85;
}
.sd-chat .sd-transcript__line {
  color: inherit;
  font-size: var(--fs-xs);
  margin: 0;
}

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

/* Role label under each avatar on the hero call card. Keeps
   Jennifer / Sam as recognizable names, but frames the caller
   vs AI agent roles explicitly so a first-time visitor gets
   who-is-who without reading every line of copy. */
.sd-callscene__role {
  font-family: var(--ff-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.sd-callscene__role--ai {
  color: color-mix(in srgb, var(--signal-deep, #16a34a) 70%, var(--text-primary));
}

/* Recording / transcribing / encrypted strip. Sits above the
   waveform so the three trust signals land next to the call arc. */
.sd-callstatus {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 0 2px;
  border-top: 1px dashed var(--border-subtle);
  margin-top: 4px;
}
.sd-callstatus__pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  font-family: var(--ff-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-tertiary);
}
.sd-callstatus__pill--rec {
  color: #b91c1c;
  background: color-mix(in srgb, #dc2626 8%, transparent);
  border-color: color-mix(in srgb, #dc2626 32%, transparent);
}
.sd-callstatus__pill--rec .sd-callstatus__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #dc2626;
  box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55);
  animation: sd-callstatus-blink 1.4s ease-out infinite;
}
@keyframes sd-callstatus-blink {
  0%   { box-shadow: 0 0 0 0   rgba(220, 38, 38, 0.55); opacity: 1; }
  70%  { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0);   opacity: 0.85; }
  100% { box-shadow: 0 0 0 0   rgba(220, 38, 38, 0);   opacity: 1; }
}
.sd-callstatus__pill--live {
  color: var(--signal-deep, #16a34a);
  background: color-mix(in srgb, #16a34a 8%, transparent);
  border-color: color-mix(in srgb, #16a34a 32%, transparent);
}
.sd-callstatus__wave {
  display: inline-flex; align-items: flex-end; gap: 2px;
  height: 10px;
}
.sd-callstatus__wave span {
  display: block; width: 2px; background: currentColor;
  border-radius: 1px;
  animation: sd-callstatus-wave 1s ease-in-out infinite;
}
.sd-callstatus__wave span:nth-child(1) { animation-delay: 0s;    height: 6px; }
.sd-callstatus__wave span:nth-child(2) { animation-delay: 0.15s; height: 8px; }
.sd-callstatus__wave span:nth-child(3) { animation-delay: 0.3s;  height: 4px; }
.sd-callstatus__wave span:nth-child(4) { animation-delay: 0.45s; height: 7px; }
@keyframes sd-callstatus-wave {
  0%, 100% { transform: scaleY(0.6); }
  50%      { transform: scaleY(1.4); }
}
.sd-callstatus__pill--quiet {
  color: var(--text-tertiary);
}
.sd-callstatus__pill--quiet svg { color: var(--text-muted); }

/* Confirmation-sent reveal. Hidden by default (height:0, opacity:0)
   so it reserves no space. The hero-call controller adds .is-sent
   after the transcript animation completes, which slides + fades
   the panel in. The reserve-height pattern keeps mobile scroll
   stable under the pre-existing .sd-chat min-height lock. */
.sd-sent {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.4s ease, max-height 0.5s ease, margin 0.4s ease;
  margin-top: 0;
  padding: 0;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, #16a34a 28%, transparent);
  background: color-mix(in srgb, #16a34a 7%, var(--bg-card));
}
.sd-sent.is-sent {
  opacity: 1;
  max-height: 220px;
  margin-top: 10px;
  padding: 10px 12px 12px;
}
.sd-sent__head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--ff-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--signal-deep, #16a34a);
  margin-bottom: 8px;
}
.sd-sent__check {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--signal-deep, #16a34a);
  color: #ffffff;
  display: inline-flex; align-items: center; justify-content: center;
}
.sd-sent__check svg { width: 10px; height: 10px; }
.sd-sent__body {
  display: flex; flex-direction: column; gap: 6px;
}
.sd-sent__channel {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 11.5px; color: var(--text-secondary); line-height: 1.4;
}
.sd-sent__chan-label {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--ff-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-tertiary);
  min-width: 44px; flex-shrink: 0;
}
.sd-sent__chan-label svg { width: 10px; height: 10px; }

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

/* ═══════════════════════════════════════════════════════════════════════
   PITCH DECKS (DecksController views)
   16:9 full-bleed slides in a vertical scroll-snap container. Matches
   the SoloDial marketing aesthetic 1:1 — Fraunces display, DM Sans body,
   JetBrains Mono for data, indigo/emerald/amber accents, grain texture.
   Print media query collapses the chrome and forces each slide onto its
   own page so Cmd-P → Save as PDF outputs a clean PowerPoint equivalent.
   ═══════════════════════════════════════════════════════════════════════ */

.sd-deck-body { overflow-x: hidden; }
.sd-deck {
  scroll-snap-type: y mandatory;
  width: 100%;
}

.sd-slide {
  position: relative;
  width: 100%;
  min-height: 100vh;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 96px;
  overflow: hidden;
  --slide-accent: #6265F5;
}
@media (max-width: 1100px) { .sd-slide { padding: 56px 48px; } }
@media (max-width: 720px)  { .sd-slide { padding: 40px 24px; min-height: 100svh; } }

.sd-slide__inner {
  max-width: 1240px;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* Accent-tinted backdrop. Each slide can override --slide-accent. */
.sd-slide::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%,  color-mix(in srgb, var(--slide-accent) 10%, transparent), transparent 60%),
    radial-gradient(ellipse 50% 40% at 90% 110%, color-mix(in srgb, var(--slide-accent) 8%,  transparent), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Slide number, bottom-left. Hidden on title slides with .sd-slide--cover. */
.sd-slide__num {
  position: absolute; bottom: 32px; left: 96px;
  font-family: var(--ff-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 600;
  z-index: 2;
}
.sd-slide--cover .sd-slide__num { display: none; }

/* Eyebrow — the mono-cap chapter label at the top of most slides. */
.sd-slide__eyebrow {
  display: inline-block;
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; font-weight: 700;
  color: var(--slide-accent);
  padding: 5px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--slide-accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--slide-accent) 28%, transparent);
  margin-bottom: 22px;
}

/* Display headline. Italic on the second half is expected (use <em>). */
.sd-slide__title {
  font-family: var(--ff-display); font-weight: 400;
  font-size: clamp(44px, 6vw, 84px);
  line-height: 1.02; letter-spacing: -0.03em;
  color: var(--text-primary);
  margin: 0 0 22px;
}
.sd-slide__title em {
  font-style: italic; font-weight: 400;
  color: var(--slide-accent);
}
.sd-slide__title--gradient em {
  background: linear-gradient(92deg, #6265F5, #16a34a 55%, #d97706 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.sd-slide__lede {
  font-family: var(--ff-display); font-weight: 300;
  font-size: clamp(20px, 1.8vw, 28px); line-height: 1.35;
  color: var(--text-secondary);
  margin: 0 0 30px; max-width: 58ch;
}
.sd-slide__lede em { font-style: italic; color: var(--slide-accent); font-weight: 400; }

.sd-slide__body {
  color: var(--text-secondary); font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.6; max-width: 68ch;
}
.sd-slide__body strong { color: var(--text-primary); font-weight: 600; }

/* Pills strip. */
.sd-slide__pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.sd-slide__pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--slide-accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--slide-accent) 25%, transparent);
  color: var(--text-primary);
  font-family: var(--ff-display); font-style: italic; font-size: 14px;
}

/* Two-column + three-column layouts. */
.sd-slide__grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.sd-slide__grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) {
  .sd-slide__grid-2, .sd-slide__grid-3 { grid-template-columns: 1fr; gap: 20px; }
}

/* Content card (for grid cells). */
.sd-slide__card {
  padding: 24px 26px; border-radius: 14px;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: 10px;
}
.sd-slide__card--accent {
  border-color: color-mix(in srgb, var(--slide-accent) 35%, var(--border-subtle));
  background: color-mix(in srgb, var(--slide-accent) 5%, var(--bg-card));
}
.sd-slide__card h3 {
  font-family: var(--ff-display); font-weight: 500;
  font-size: 21px; line-height: 1.2;
  letter-spacing: -0.01em; color: var(--text-primary);
  margin: 0;
}
.sd-slide__card h3 em { font-style: italic; color: var(--slide-accent); font-weight: 500; }
.sd-slide__card__tag {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 700;
  color: var(--slide-accent); margin-bottom: 4px;
}
.sd-slide__card__body { color: var(--text-tertiary); font-size: 14.5px; line-height: 1.55; margin: 0; }

/* Bullet list matching marketing-site bullets. */
.sd-slide__bullets {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.sd-slide__bullet {
  display: grid; grid-template-columns: 16px 1fr; gap: 12px;
  font-size: 15px; color: var(--text-secondary); line-height: 1.55;
}
.sd-slide__bullet::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--slide-accent); margin-top: 8px;
}
.sd-slide__bullet strong { color: var(--text-primary); font-weight: 600; }

/* Numbered stepper (for onboarding wizard slides). */
.sd-slide__steps {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
  margin-top: 30px;
}
@media (max-width: 900px) { .sd-slide__steps { grid-template-columns: repeat(2, 1fr); } }
.sd-slide__step {
  padding: 18px 16px; border-radius: 12px;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: 6px;
}
.sd-slide__step__num {
  font-family: var(--ff-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--slide-accent);
}
.sd-slide__step h4 {
  font-family: var(--ff-display); font-weight: 500; font-size: 15.5px;
  color: var(--text-primary); margin: 0;
}
.sd-slide__step p { font-size: 13px; color: var(--text-tertiary); line-height: 1.5; margin: 0; }

/* Screenshot frame (used where a real app screenshot should go). */
.sd-slide__screen {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px; border-radius: 16px;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  box-shadow: 0 30px 60px -30px rgba(15,15,30,0.22);
}
.sd-slide__screen__bar {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 4px 10px;
  border-bottom: 1px solid var(--border-subtle);
}
.sd-slide__screen__dot { width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1; }
.sd-slide__screen__dot:nth-child(1) { background: #ff5f57; }
.sd-slide__screen__dot:nth-child(2) { background: #ffbd2e; }
.sd-slide__screen__dot:nth-child(3) { background: #28c840; }
.sd-slide__screen__title {
  margin-left: 10px;
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.06em;
  color: var(--text-muted);
}
.sd-slide__screen img {
  width: 100%; border-radius: 8px; display: block;
}
/* Placeholder frame when a real screenshot isn't there yet. */
.sd-slide__screen__ph {
  aspect-ratio: 16/10;
  display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--slide-accent) 8%, var(--bg-card)), var(--bg-card));
  border: 1px dashed color-mix(in srgb, var(--slide-accent) 35%, var(--border-subtle));
  border-radius: 8px;
  font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-tertiary);
  text-align: center; padding: 20px;
}

/* Architecture diagram — flat SVG-style boxes with connecting lines. */
.sd-arch {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px;
  margin-top: 16px;
}
@media (max-width: 900px) { .sd-arch { grid-template-columns: 1fr; } }
.sd-arch__col {
  padding: 18px 16px; border-radius: 12px;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
}
.sd-arch__col__title {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.15em;
  text-transform: uppercase; font-weight: 700; color: var(--slide-accent);
  margin-bottom: 10px;
}
.sd-arch__item {
  padding: 7px 10px; border-radius: 6px;
  border: 1px solid var(--border-subtle);
  font-family: var(--ff-mono); font-size: 12px; font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 6px;
  background: color-mix(in srgb, var(--slide-accent) 4%, var(--bg-card));
}
.sd-arch__flow {
  margin-top: 16px;
  padding: 12px 16px; border-radius: 8px;
  background: color-mix(in srgb, var(--slide-accent) 6%, var(--bg-card));
  font-family: var(--ff-mono); font-size: 11.5px; color: var(--text-secondary);
  border-left: 3px solid var(--slide-accent);
}

/* Cover slide. */
.sd-slide--cover { text-align: center; }
.sd-slide--cover .sd-slide__inner { max-width: 900px; }
.sd-slide--cover .sd-slide__title {
  font-size: clamp(64px, 8vw, 120px);
  margin-bottom: 18px;
}
.sd-slide--cover .sd-slide__lede { font-size: clamp(22px, 2.4vw, 34px); margin-left: auto; margin-right: auto; max-width: 48ch; }
.sd-slide--cover .sd-slide__pills { justify-content: center; }
.sd-slide__cover-mark { display: inline-flex; margin-bottom: 24px; opacity: 0.95; }

/* Chrome (nav counter + brand mark, screen only). */
.sd-deck-chrome {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: 50;
  display: inline-flex; align-items: center; gap: 18px;
  padding: 8px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--bg-card) 92%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-default);
  box-shadow: 0 10px 30px -10px rgba(15,15,30,0.25);
  font-family: var(--ff-mono); font-size: 11px; color: var(--text-tertiary);
}
.sd-deck-chrome__brand { display: inline-flex; align-items: center; gap: 8px; }
.sd-deck-chrome__mark { display: block; }
.sd-deck-chrome__title { color: var(--text-primary); font-weight: 600; }
.sd-deck-chrome__counter { letter-spacing: 0.1em; color: var(--text-primary); }
.sd-deck-chrome__hint { opacity: 0.6; }
@media (max-width: 720px) { .sd-deck-chrome__hint { display: none; } }

/* ── Print: each slide = one landscape page. Chrome hidden. ────── */
@media print {
  @page { size: 1280px 720px; margin: 0; }
  html, body { background: #ffffff !important; }
  .sd-deck-chrome { display: none !important; }
  .sd-deck { scroll-snap-type: none !important; }
  .sd-slide {
    min-height: 720px !important;
    height: 720px !important;
    width: 1280px !important;
    break-after: page;
    page-break-after: always;
    break-inside: avoid;
    padding: 56px 72px !important;
  }
  .sd-slide:last-child { break-after: auto; page-break-after: auto; }
}

/* Decks are forced into light mode by the layout (html.light), so
   no dark-mode override is needed here. If dark-mode decks become a
   requirement later, scope rules to html:not(.light) .sd-slide. */

/* ═══════════════════ FEATURE CHAPTER NAV ══════════════════════
   Turns the four /features/* pages into a book. Top rail shows
   the table of contents with the current chapter marked in its
   own accent. Bottom end pagination gives a prev/next card pair
   so the reader moves through the arc in order without bouncing
   back to the home page. */

.sd-chapter-rail {
  max-width: 1140px;
  margin: 24px auto 0;
  padding: 0 24px;
  position: relative;
  z-index: 3;
}
.sd-chapter-rail__eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--ff-mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 10px;
}
.sd-chapter-rail__rule {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--border-default), transparent);
}
.sd-chapter-rail__list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
@media (max-width: 760px) {
  .sd-chapter-rail__list {
    grid-template-columns: repeat(2, 1fr);
  }
}
.sd-chapter-rail__item a {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 14px 12px 14px 2px;
  text-decoration: none;
  color: var(--text-tertiary);
  position: relative;
  transition: color .18s ease;
}
.sd-chapter-rail__item a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--ch-accent, var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.sd-chapter-rail__item a:hover { color: var(--text-primary); }
.sd-chapter-rail__item a:hover::after { transform: scaleX(0.35); }
.sd-chapter-rail__item--active a {
  color: var(--text-primary);
  font-weight: 500;
}
.sd-chapter-rail__item--active a::after { transform: scaleX(1); }
.sd-chapter-rail__num {
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 11px; letter-spacing: 0.1em;
  color: var(--ch-accent, var(--accent));
  min-width: 22px;
}
.sd-chapter-rail__name {
  font-family: var(--ff-display);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* Bottom prev/next, editorial pagination with hanging roman numeral */
/* Chapter-end pagination. Sits right below the end of a chapter's
   body so the reader's eye lands on it the moment the content
   ends. The "next chapter" card is the primary action and gets a
   loud, solid-accent-fill treatment (full color brick, inverted
   dark text, oversized arrow) so it reads as a destination, not
   an adornment. The "previous chapter" card stays a thin ghost
   link, it's a back action, not a forward promise. */
.sd-chapter-end {
  max-width: 1140px;
  margin: 32px auto 40px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(140px, 0.7fr) 1.3fr;
  gap: 18px;
  position: relative; z-index: 3;
}
@media (max-width: 760px) {
  .sd-chapter-end {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}
.sd-chapter-end__placeholder { display: block; }
.sd-chapter-end__link {
  position: relative;
  overflow: hidden;
  display: grid;
  column-gap: 18px;
  row-gap: 4px;
  padding: 28px 28px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  color: inherit;
  text-decoration: none;
  transition: transform .22s cubic-bezier(.2,.7,.2,1),
              border-color .22s ease,
              box-shadow .25s ease,
              background .25s ease;
}

/* ── Previous (ghost back link, minimal weight) ── */
.sd-chapter-end__link--prev {
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  background: transparent;
  border-color: color-mix(in srgb, var(--ch-accent, var(--accent)) 20%, var(--border-default));
  padding: 20px 22px;
  text-align: left;
  align-self: stretch;
}
.sd-chapter-end__link--prev:hover {
  transform: translateX(-3px);
  border-color: color-mix(in srgb, var(--ch-accent, var(--accent)) 55%, var(--border-default));
  background: color-mix(in srgb, var(--ch-accent, var(--accent)) 6%, transparent);
}
.sd-chapter-end__link--prev .sd-chapter-end__arrow {
  grid-row: 1 / span 2;
  align-self: center;
  color: color-mix(in srgb, var(--ch-accent, var(--accent)) 85%, var(--text-muted));
  font-size: 36px;
}
.sd-chapter-end__link--prev .sd-chapter-end__title {
  font-size: clamp(18px, 2vw, 22px);
  color: var(--text-primary);
}
.sd-chapter-end__link--prev .sd-chapter-end__teaser { display: none; }

/* ── Next (solid fill, the dominant invitation) ──
   This is the brick, a saturated block of the chapter's accent
   color with inverse dark text. Reads as a destination at a
   glance from across the page. */
.sd-chapter-end__link--next {
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  text-align: right;
  padding: 30px 32px;
  background: var(--ch-accent, var(--accent));
  border-color: var(--ch-accent, var(--accent));
  color: #0a0a0f;
  box-shadow: 0 2px 0 0 color-mix(in srgb, var(--ch-accent, var(--accent)) 70%, #000),
              0 16px 40px -14px color-mix(in srgb, var(--ch-accent, var(--accent)) 60%, transparent);
}
.sd-chapter-end__link--next::before {
  /* Embossed highlight strip along the top edge, sells the "solid
     button" feel without being loud. */
  content: "";
  position: absolute;
  left: 14px; right: 14px; top: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.55) 50%,
    transparent 100%);
  pointer-events: none;
}
.sd-chapter-end__link--next::after {
  /* Second, subtler highlight just below the top, for paper/vinyl
     material feel. Always on. */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.12) 0%,
    transparent 40%);
  pointer-events: none;
  border-radius: inherit;
}
.sd-chapter-end__link--next:hover {
  transform: translateY(-3px);
  box-shadow: 0 3px 0 0 color-mix(in srgb, var(--ch-accent, var(--accent)) 70%, #000),
              0 22px 52px -14px color-mix(in srgb, var(--ch-accent, var(--accent)) 75%, transparent);
  filter: saturate(1.15);
}
.sd-chapter-end__link--next:active { transform: translateY(-1px); }

/* Column layout for --next: meta top-right, title below, teaser
   below that, oversized arrow filling the right column. */
.sd-chapter-end__link--next .sd-chapter-end__meta   { grid-row: 1; grid-column: 1; text-align: right; }
.sd-chapter-end__link--next .sd-chapter-end__title  { grid-row: 2; grid-column: 1; text-align: right; }
.sd-chapter-end__link--next .sd-chapter-end__teaser { grid-row: 3; grid-column: 1; text-align: right; margin-left: auto; }
.sd-chapter-end__link--next .sd-chapter-end__arrow  {
  grid-row: 1 / span 3; grid-column: 2;
  align-self: center;
  color: #0a0a0f;
  font-size: clamp(56px, 6vw, 72px);
  font-weight: 200;
  line-height: 1;
  position: relative;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
}

.sd-chapter-end__arrow {
  transition: transform .26s cubic-bezier(.2,.7,.2,1);
}
.sd-chapter-end__link--next:hover .sd-chapter-end__arrow { transform: translateX(8px); }
.sd-chapter-end__link--prev:hover .sd-chapter-end__arrow { transform: translateX(-4px); }

/* Micro-label + chapter number. Inside --next, colors are a dark
   semi-transparent tint of the text color so they read like
   stamped ink on the accent fill. */
.sd-chapter-end__meta {
  display: inline-flex; flex-direction: column; gap: 3px;
}
.sd-chapter-end__label {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
}
.sd-chapter-end__link--next .sd-chapter-end__label { color: rgba(10,10,15,0.75); }
.sd-chapter-end__link--prev .sd-chapter-end__label { color: var(--text-muted); }
.sd-chapter-end__link--next .sd-chapter-end__label::after,
.sd-chapter-end__link--prev .sd-chapter-end__label::before {
  content: "";
  width: 18px; height: 1px;
  background: currentColor;
  display: inline-block;
  opacity: 0.65;
}
.sd-chapter-end__num {
  font-family: var(--ff-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em;
}
.sd-chapter-end__link--next .sd-chapter-end__num { color: rgba(10,10,15,0.8); }
.sd-chapter-end__link--prev .sd-chapter-end__num {
  color: var(--ch-accent, var(--accent));
}
.sd-chapter-end__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(28px, 3.2vw, 38px);
  line-height: 1.02;
  letter-spacing: -0.028em;
  align-self: end;
}
.sd-chapter-end__link--next .sd-chapter-end__title { color: #0a0a0f; }
.sd-chapter-end__teaser {
  font-size: 14px;
  line-height: 1.5;
  margin-top: 4px;
  max-width: 44ch;
}
.sd-chapter-end__link--next .sd-chapter-end__teaser { color: rgba(10,10,15,0.72); }

/* ═════════════════════ SHARED FEATURE SYSTEM ═════════════════════

   Every shipped Phase A-F feature renders inside this system:
     .sd-feature-hero         asymmetric tinted header
     .sd-capability-row       toggle + title + description row
     .sd-toggle-pill          segmented OFF/ON control
     .sd-phone-preview        stylized phone screen for previews
     .sd-activity-rail        vertical timeline for status surfaces
     .sd-chip-strip           inserter chips (variables, tags)
     .sd-empty-state          unified empty state (reuses existing)
     .sd-skeleton             loading shimmer block

   Features pick ONE --hero-accent from --cat-a..f and use it as
   their single coordinating colour. All component internals key off
   --hero-accent so a single CSS variable tints the whole feature.
*/

/* ---- Feature hero ---- */
.sd-feature-hero {
  position: relative;
  padding: 28px 30px 30px;
  margin-bottom: 24px;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: flex-start;
}
.sd-feature-hero__glow {
  position: absolute;
  top: -40%;
  right: -15%;
  width: 55%;
  height: 200%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--hero-accent, var(--accent)) 30%, transparent),
    transparent 70%);
  filter: blur(44px);
  pointer-events: none;
}
.sd-feature-hero__content { position: relative; min-width: 0; }
.sd-feature-hero__title {
  margin: 6px 0 8px;
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.sd-feature-hero__tagline {
  color: var(--text-tertiary);
  max-width: 62ch;
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.sd-feature-hero__actions {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.sd-feature-hero__deco {
  position: absolute;
  right: -20px;
  bottom: -30px;
  width: 180px;
  height: 180px;
  color: color-mix(in srgb, var(--hero-accent, var(--accent)) 22%, transparent);
  pointer-events: none;
}

/* ---- Toggle pill (segmented OFF/ON) ---- */
.sd-toggle-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border-radius: 999px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  user-select: none;
  flex-shrink: 0;
}
.sd-toggle-pill > span {
  padding: 5px 12px;
  border-radius: 999px;
  color: var(--text-muted);
  transition: color .15s ease, background .15s ease;
  z-index: 1;
}
.sd-toggle-pill--on > span:last-child,
.sd-toggle-pill[data-on="true"] > span:last-child {
  background: var(--hero-accent, var(--accent));
  color: #0b0b0f;
  font-weight: 600;
}
.sd-toggle-pill--off > span:first-child,
.sd-toggle-pill[data-on="false"] > span:first-child {
  background: var(--bg-card);
  color: var(--text-secondary);
}

/* ---- Capability row ---- */
.sd-capability-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.sd-capability-row:hover {
  border-color: color-mix(in srgb, var(--hero-accent, var(--accent)) 35%, var(--border-default));
}
.sd-capability-row__icon {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--hero-accent, var(--accent)) 12%, transparent);
  color: var(--hero-accent, var(--accent));
  flex-shrink: 0;
}
.sd-capability-row__title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
}
.sd-capability-row__description {
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  line-height: 1.45;
}
.sd-capability-row__meta {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
}
@media (max-width: 640px) {
  /* On phones, drop the "last-used" meta column so the title and
     toggle have breathing room instead of squeezing into four
     columns. */
  .sd-capability-row {
    grid-template-columns: auto 1fr auto;
  }
  .sd-capability-row__meta { display: none; }
}

/* ---- Chip strip for variable inserters ---- */
.sd-chip-strip {
  display: flex;
  gap: 6px;
  padding: 8px 2px;
  flex-wrap: wrap;
}
.sd-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px dashed color-mix(in srgb, var(--hero-accent, var(--accent)) 45%, var(--border-subtle));
  background: color-mix(in srgb, var(--hero-accent, var(--accent)) 6%, var(--bg-card));
  color: var(--text-secondary);
  font-family: var(--ff-mono);
  font-size: 11px;
  cursor: pointer;
  transition: background .12s ease, transform .12s ease;
}
.sd-chip:hover {
  background: color-mix(in srgb, var(--hero-accent, var(--accent)) 14%, var(--bg-card));
  color: var(--text-primary);
  transform: translateY(-1px);
}

/* ---- Phone preview (stylized SMS screen) ---- */
.sd-phone-preview {
  position: sticky;
  top: 24px;
  align-self: start;
  max-width: 340px;
  width: 100%;
}
.sd-phone-preview__screen {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--hero-accent, var(--accent)) 8%, var(--bg-elevated, var(--bg-card))) 0%,
    var(--bg-elevated, var(--bg-card)) 100%);
  border: 1px solid var(--border-default);
  border-radius: 26px;
  padding: 22px 16px 16px;
  box-shadow: var(--shadow-md);
  min-height: 380px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sd-phone-preview__header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}
.sd-phone-preview__thread {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 10px;
  flex: 1;
}
.sd-phone-preview__bubble {
  padding: 10px 13px;
  border-radius: 18px;
  max-width: 86%;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  align-self: flex-start;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.sd-phone-preview__bubble--them {
  border-bottom-left-radius: 4px;
}
.sd-phone-preview__bubble--us {
  background: color-mix(in srgb, var(--hero-accent, var(--accent)) 22%, var(--bg-card));
  border-color: color-mix(in srgb, var(--hero-accent, var(--accent)) 40%, var(--border-default));
  color: var(--text-primary);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.sd-phone-preview__legend {
  text-align: center;
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 6px;
}

/* ---- Activity rail (vertical status timeline) ---- */
.sd-activity-rail {
  list-style: none;
  margin: 0; padding: 0;
  position: relative;
  border-left: 1px solid var(--border-subtle);
  padding-left: 0;
}
.sd-activity-rail__item {
  position: relative;
  padding: 12px 0 12px 22px;
  margin-left: 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
}
.sd-activity-rail__item:last-child { border-bottom: none; }
.sd-activity-rail__dot {
  position: absolute;
  left: -16px;
  top: 18px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--dot-color, var(--hero-accent, var(--accent)));
  box-shadow: 0 0 0 3px var(--bg-page, var(--bg-card));
}
.sd-activity-rail__title {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-primary);
}
.sd-activity-rail__snippet {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  margin-top: 2px;
  max-width: 52ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sd-activity-rail__meta {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 3px;
}

/* ---- Skeleton ---- */
.sd-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--bg-subtle, rgba(255,255,255,0.04));
  border-radius: var(--radius-sm);
}
.sd-skeleton::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: sd-shimmer 1.6s linear infinite;
}

/* ---- Bento grid (variable span dashboard cards) ---- */
.sd-bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.sd-bento {
  grid-column: span 6;
  padding: 20px 22px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: 12px;
  min-height: 140px;
}
.sd-bento[data-span="3"]  { grid-column: span 3; }
.sd-bento[data-span="4"]  { grid-column: span 4; }
.sd-bento[data-span="6"]  { grid-column: span 6; }
.sd-bento[data-span="8"]  { grid-column: span 8; }
.sd-bento[data-span="12"] { grid-column: span 12; }
@media (max-width: 900px) {
  .sd-bento, .sd-bento[data-span]  { grid-column: span 12; }
}
.sd-bento__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px;
}
.sd-bento__delta {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
}
.sd-bento__delta--up   { color: #60d394; background: color-mix(in srgb, #60d394 15%, transparent); }
.sd-bento__delta--down { color: #f87171; background: color-mix(in srgb, #f87171 15%, transparent); }
.sd-bento__huge {
  font-size: clamp(40px, 6vw, 60px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--hero-accent, var(--text-primary));
}

/* Sparkline */
.sd-sparkline {
  width: 100%; height: 80px;
  display: flex; align-items: flex-end; gap: 2px;
}
.sd-sparkline__bar {
  flex: 1;
  background: color-mix(in srgb, var(--hero-accent, var(--cat-c)) 35%, var(--border-default));
  min-height: 2px;
  border-radius: 2px 2px 0 0;
  transition: background .15s ease;
}
.sd-sparkline__bar:hover {
  background: var(--hero-accent, var(--cat-c));
}
.sd-sparkline__bar--zero { opacity: 0.3; }

/* Heatmap */
.sd-heatmap {
  display: grid;
  grid-template-columns: 32px repeat(24, 1fr);
  gap: 2px;
}
.sd-heatmap__row-label {
  font-family: var(--ff-mono);
  font-size: 9px;
  color: var(--text-muted);
  display: flex; align-items: center;
  padding-right: 4px;
}
.sd-heatmap__cell {
  aspect-ratio: 1 / 1;
  border-radius: 2px;
  background: color-mix(in srgb, var(--hero-accent, var(--cat-c)) calc(var(--intensity) * 100%), var(--bg-elevated, var(--bg-subtle)));
}
.sd-heatmap__hour-legend {
  grid-column: 2 / -1;
  display: grid; grid-template-columns: repeat(24, 1fr);
  font-family: var(--ff-mono);
  font-size: 9px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 4px;
}

/* Funnel */
.sd-funnel {
  display: flex; flex-direction: column; gap: 6px;
}
.sd-funnel__stage {
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--hero-accent, var(--cat-c)) calc(var(--intensity, 1) * 20%), var(--bg-elevated, var(--bg-subtle)));
  border-left: 3px solid var(--hero-accent, var(--cat-c));
  font-size: var(--fs-sm);
}

/* ---- Scorecard (QA scoring, E1) ---- */
.sd-scorecard {
  padding: 22px 24px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: 14px;
}
.sd-scorecard__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
}
.sd-scorecard__overall {
  display: flex; align-items: baseline; gap: 6px;
}
.sd-scorecard__overall .sd-display {
  font-size: clamp(36px, 4vw, 48px);
  color: var(--hero-accent, var(--cat-e));
  letter-spacing: -0.025em;
}
.sd-scorecard__cat {
  display: grid;
  grid-template-columns: 120px 140px 1fr;
  gap: 14px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border-subtle);
}
.sd-scorecard__cat:last-child { border-bottom: none; }
.sd-scorecard__cat-name {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  text-transform: capitalize;
}
.sd-scorecard__bar {
  display: flex;
  gap: 3px;
}
.sd-scorecard__bar span {
  flex: 1;
  height: 14px;
  border-radius: 2px;
  background: var(--bg-subtle, var(--border-subtle));
}
.sd-scorecard__bar span.filled {
  background: var(--hero-accent, var(--cat-e));
}
.sd-scorecard__cat-why {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  line-height: 1.5;
}

.sd-badge--score {
  font-family: var(--ff-mono);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
}

/* ---- Live supervisor tiles (D3) ---- */
.sd-stations {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sd-stations__head {
  display: flex; justify-content: space-between; align-items: baseline;
}
.sd-stations__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.sd-station-tile {
  position: relative;
  padding: 16px 18px 14px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: 10px;
  overflow: hidden;
}
.sd-station-tile__accent {
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--hero-accent, var(--cat-d));
}
.sd-station-tile__head {
  display: flex; justify-content: space-between; align-items: flex-start;
}
.sd-station-tile__caller {
  font-weight: 600;
  color: var(--text-primary);
}
.sd-station-tile__phone {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}
.sd-station-tile__duration {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.sd-station-tile__snippet {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  line-height: 1.45;
  padding: 8px 10px;
  background: var(--bg-subtle, rgba(255,255,255,0.03));
  border-radius: var(--radius-sm);
  min-height: 46px;
}
.sd-station-tile__actions {
  display: flex; gap: 6px;
}
.sd-station-tile__pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cat-d);
  box-shadow: 0 0 0 0 var(--cat-d);
  animation: sd-station-pulse 1.6s ease-out infinite;
  display: inline-block;
}
@keyframes sd-station-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cat-d) 60%, transparent); }
  70%  { box-shadow: 0 0 0 10px color-mix(in srgb, var(--cat-d) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cat-d) 0%, transparent); }
}

/* ---- Conversations (D1) ---- */
/* Conversation shell: no fixed viewport math anymore. Outer page
   scrolls naturally; the compose bar inside .sd-conv-pane is
   sticky to the bottom of the viewport so the reply box never
   ends up below the fold no matter how the page chrome stacks
   up. */
.sd-conv-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  /* overflow stays visible; sticky needs a scrolling ancestor and
     we want the page itself, not this element, to be that ancestor. */
}
@media (max-width: 780px) {
  .sd-conv-layout { grid-template-columns: 1fr; }
}
.sd-conv-rail {
  border-right: 1px solid var(--border-subtle);
  /* Pinned to the top of the viewport so the thread list stays
     visible while the user reads through a long thread. */
  position: sticky;
  top: 16px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  align-self: start;
}
@media (max-width: 780px) {
  .sd-conv-rail {
    position: static;
    max-height: 240px;
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
  }
}
.sd-conv-rail__head {
  position: sticky; top: 0; z-index: 1;
  padding: 14px 16px 10px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: 10px;
}
/* Slim pill bar that sits under the eyebrow and lets the operator
   re-sort or filter the rail without a dropdown. Pills use cat-d for
   the active state to anchor them to the page's accent. */
.sd-conv-rail__filters {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.sd-conv-rail__filter {
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-tertiary);
  text-decoration: none;
  white-space: nowrap;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.sd-conv-rail__filter:hover {
  background: color-mix(in srgb, var(--cat-d) 8%, transparent);
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--cat-d) 30%, var(--border-subtle));
}
.sd-conv-rail__filter.active {
  background: color-mix(in srgb, var(--cat-d) 16%, transparent);
  border-color: color-mix(in srgb, var(--cat-d) 50%, var(--border-default));
  color: var(--text-primary);
  font-weight: 600;
}
.sd-conv-rail__item {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}
.sd-conv-rail__item:hover {
  background: color-mix(in srgb, var(--cat-d) 6%, transparent);
}
.sd-conv-rail__item.active {
  background: color-mix(in srgb, var(--cat-d) 14%, transparent);
  border-left: 3px solid var(--cat-d);
  padding-left: 13px;
}
.sd-conv-rail__name {
  font-weight: 600; font-size: var(--fs-sm); color: var(--text-primary);
}
.sd-conv-rail__preview {
  color: var(--text-tertiary); font-size: var(--fs-xs);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  margin-top: 2px; max-width: 220px;
}
.sd-conv-rail__num {
  font-size: 11px; color: var(--text-tertiary);
  margin-top: 1px;
  letter-spacing: -0.01em;
}
.sd-conv-rail__via {
  font-size: 11px; color: var(--text-tertiary);
  margin-top: 2px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  max-width: 220px;
}
.sd-conv-rail__via strong { color: var(--text-secondary); font-weight: 600; }
.sd-conv-rail__via-num {
  font-family: var(--ff-mono); font-size: 10px; color: var(--text-muted); margin-left: 4px;
}
.sd-conv-rail__time {
  font-family: var(--ff-mono); font-size: 10px; color: var(--text-muted);
}
.sd-conv-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sd-conv-pane__head {
  /* Header pins to the top so the user always knows which thread
     they're in even after scrolling deep into the history. */
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--bg-card);
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center; gap: 4px;
}
/* The pane carries the per-caller class so a thin tinted strip on
   top of the header reinforces the contact's identity and matches
   the avatar/rail color at a glance. The strip is intentionally
   subtle (3px) so it reads as belonging to a thread, not as
   chrome. */
.sd-conv-pane {
  position: relative;
}
.sd-conv-pane::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 3px;
  background: var(--caller-hue, var(--cat-d));
  pointer-events: none;
  z-index: 5;
}
.sd-thread {
  list-style: none;
  padding: 20px;
  margin: 0;
  display: flex; flex-direction: column; gap: 12px;
  /* Bottom padding leaves room for the sticky compose so the last
     bubble never sits behind it. */
  padding-bottom: 90px;
}
.sd-thread__date {
  text-align: center; font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
  margin: 10px 0 4px;
}
.sd-thread__event {
  display: grid; grid-template-columns: 28px 1fr auto;
  gap: 10px; align-items: flex-start;
}
.sd-thread__icon {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-subtle);
  color: var(--text-tertiary);
}
.sd-thread__bubble {
  padding: 10px 14px; border-radius: 14px;
  background: var(--bg-subtle); color: var(--text-primary);
  font-size: var(--fs-sm); line-height: 1.5;
  max-width: 62ch;
}
.sd-thread__event[data-from="us"] .sd-thread__bubble {
  background: color-mix(in srgb, var(--cat-d) 22%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--cat-d) 45%, var(--border-default));
}
.sd-thread__event--call .sd-thread__bubble {
  background: color-mix(in srgb, var(--cat-c) 14%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--cat-c) 30%, var(--border-default));
}
/* Per-caller hue for inbound bubbles. The 2px left rule is the
   only colored detail on the bubble itself, restraint over flair:
   you spot the same caller across a long thread without the
   stream looking like a bag of skittles. */
.sd-thread__event[data-from="them"] .sd-thread__bubble {
  border-left: 3px solid var(--caller-hue, var(--border-default));
  padding-left: 12px;
}

/* ---- Per-caller palette ----
   Eight curated hues, picked for visual distinctness at small
   sizes (32-36px) and for sitting alongside the cat-d accent
   without clashing. The class lands on the rail item, the
   conversation pane head, and the inbound-bubble container so
   --caller-hue cascades to every element that needs it. */
.sd-caller-c0 { --caller-hue: #0d9488; }
.sd-caller-c1 { --caller-hue: #d97706; }
.sd-caller-c2 { --caller-hue: #e11d48; }
.sd-caller-c3 { --caller-hue: #4f46e5; }
.sd-caller-c4 { --caller-hue: #059669; }
.sd-caller-c5 { --caller-hue: #c026d3; }
.sd-caller-c6 { --caller-hue: #ea580c; }
.sd-caller-c7 { --caller-hue: #0891b2; }

.sd-caller-avatar {
  display: inline-grid; place-items: center;
  border-radius: 50%;
  background: var(--caller-hue);
  color: #fff;
  font-family: var(--ff-mono);
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--caller-hue) 35%, transparent),
    0 4px 10px -6px color-mix(in srgb, var(--caller-hue) 50%, transparent);
}
.sd-conv-rail__item .sd-caller-avatar {
  margin-top: 2px;
}
.sd-conv-pane__head .sd-caller-avatar {
  margin-right: 12px;
}
/* Active rail item picks up the caller's hue in its left rule and
   tinted background so the selected thread reads as belonging to
   that contact, not just to "the active state". */
.sd-conv-rail__item.active {
  background: color-mix(in srgb, var(--caller-hue, var(--cat-d)) 10%, transparent);
  border-left: 3px solid var(--caller-hue, var(--cat-d));
  padding-left: 13px;
}
.sd-thread__time {
  text-align: right; font-family: var(--ff-mono);
  font-size: 10px; color: var(--text-muted);
  padding-top: 6px; white-space: nowrap;
}
/* Compose bar sticks to the bottom of the viewport so the reply
   field is always one click away. The sticky context is the page
   itself: the parents (.sd-conv-pane, .sd-conv-layout) deliberately
   leave overflow visible so this pins to the screen, not to the
   layout box. */
.sd-compose {
  position: sticky;
  bottom: 0;
  z-index: 5;
  padding: 12px 16px;
  border-top: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-card) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 -10px 24px -16px rgba(15, 23, 42, 0.28);
  display: flex; gap: 10px; align-items: flex-end;
}
.sd-compose__input {
  flex: 1; resize: vertical; min-height: 40px;
}

/* ---- Vertical template picker cards ---- */
.sd-template-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  text-align: left;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease;
  color: var(--text-primary);
}
.sd-template-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--hero-accent, var(--accent)) 45%, var(--border-default));
}
.sd-template-card__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--hero-accent, var(--accent)) 14%, transparent);
  color: var(--hero-accent, var(--accent));
}
.sd-template-card__name {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.sd-template-card__industry {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sd-template-card__desc {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
  line-height: 1.5;
}
.sd-template-card__includes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-subtle);
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--text-muted);
}
.sd-template-card__includes dt { letter-spacing: 0.08em; text-transform: uppercase; }
.sd-template-card__includes dd {
  margin: 0; color: var(--text-secondary); font-weight: 500;
}
.sd-template-card__cta {
  margin-top: auto;
  color: var(--hero-accent, var(--accent));
  font-weight: 600;
  font-size: var(--fs-sm);
  padding-top: 4px;
}

/* ---- Transcript rail (speaker-labeled, deposition style) ---- */
.sd-transcript {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.sd-transcript__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
}
.sd-transcript__legend {
  display: flex; gap: 14px;
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}
.sd-transcript__dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.sd-transcript__dot--agent  { background: var(--cat-c); }
.sd-transcript__dot--caller { background: #94a3b8; }
.sd-transcript__segment {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border-subtle);
}
.sd-transcript__segment:last-child { border-bottom: none; }
.sd-transcript__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sd-transcript__speaker {
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sd-transcript__speaker--agent  { color: var(--cat-c); }
.sd-transcript__speaker--caller { color: #94a3b8; }
.sd-transcript__text {
  color: var(--text-primary);
  line-height: 1.6;
  font-size: var(--fs-sm);
}

/* ---- Pill filter (navigation chips) ---- */
.sd-pill-filter {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
.sd-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-decoration: none;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.sd-pill:hover {
  background: color-mix(in srgb, var(--hero-accent, var(--accent)) 10%, var(--bg-card));
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--hero-accent, var(--accent)) 30%, var(--border-default));
}
.sd-pill--active {
  background: color-mix(in srgb, var(--hero-accent, var(--accent)) 20%, var(--bg-card));
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--hero-accent, var(--accent)) 55%, var(--border-default));
}

/* ---- Claim chip (shared inbox) ---- */
.sd-claim-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px 2px 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--hero-accent, var(--cat-a)) 16%, var(--bg-card));
  color: var(--text-primary);
  border: 1px solid color-mix(in srgb, var(--hero-accent, var(--cat-a)) 42%, var(--border-default));
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.sd-claim-chip__avatar {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--hero-accent, var(--cat-a));
  color: #0b0b0f;
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 700;
}

/* ---- Tile grid + tool tile (gallery pattern) ---- */
.sd-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.sd-tool-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px 16px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  transition: border-color .15s ease, transform .15s ease;
}
.sd-tool-tile:hover {
  border-color: color-mix(in srgb, var(--hero-accent, var(--accent)) 35%, var(--border-default));
  transform: translateY(-1px);
}
.sd-tool-tile__accent {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--hero-accent, var(--accent));
  opacity: 0;
  transition: opacity .15s ease;
}
.sd-tool-tile[data-enabled="true"] .sd-tool-tile__accent {
  opacity: 1;
}
.sd-tool-tile__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
}
.sd-tool-tile__icon {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--hero-accent, var(--accent)) 14%, transparent);
  color: var(--hero-accent, var(--accent));
  flex-shrink: 0;
}
.sd-tool-tile__name {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.sd-tool-tile__desc {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
  line-height: 1.5;
}
.sd-tool-tile__foot {
  margin-top: auto;
  padding-top: 10px;
  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);
}

/* Channel chooser used by the follow-up editor: SMS vs AI
   callback. Two cards side-by-side; whichever holds the checked
   radio gets the highlight + accent ring. Radios are visually
   hidden but stay accessible to screen readers and keyboards. */
.sd-channel-pick {
  border: 0;
  margin: 12px 0 0;
  padding: 0;
}
.sd-channel-pick__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 640px) {
  .sd-channel-pick__row { grid-template-columns: 1fr; }
}
.sd-channel-pick__option {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.sd-channel-pick__option:hover {
  background: color-mix(in srgb, var(--hero-accent, var(--accent)) 5%, var(--bg-card));
}
.sd-channel-pick__option--on {
  border-color: var(--hero-accent, var(--accent));
  background: color-mix(in srgb, var(--hero-accent, var(--accent)) 10%, var(--bg-card));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hero-accent, var(--accent)) 18%, transparent);
}
.sd-channel-pick__radio {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.sd-channel-pick__icon {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--hero-accent, var(--accent)) 12%, transparent);
  color: var(--hero-accent, var(--accent));
}
.sd-channel-pick__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.sd-channel-pick__copy strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* Intent tab strip used by the follow-up SMS editor. The dot fills
   when that intent has an enabled, non-blank template so the user
   can scan which intents are wired up at a glance. */
.sd-intent-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding: 4px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--hero-accent, var(--accent)) 6%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--hero-accent, var(--accent)) 18%, var(--border-default));
}
.sd-intent-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: calc(var(--radius-md) - 4px);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: background 120ms ease, color 120ms ease;
}
.sd-intent-tab:hover {
  background: color-mix(in srgb, var(--hero-accent, var(--accent)) 10%, transparent);
  color: var(--text-primary);
}
.sd-intent-tab--active {
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.sd-intent-tab__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: color-mix(in srgb, var(--text-tertiary) 40%, transparent);
  box-shadow: inset 0 0 0 1px var(--border-default);
}
.sd-intent-tab__dot--on {
  background: var(--hero-accent, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hero-accent, var(--accent)) 22%, transparent);
}

/* IVR menu row: at desktop widths, digit + destination + value + label
   sit in a four-column grid; at phone widths, each row gets its own
   stack so the destination select isn't an unreadable 60px chip. */
.sd-ivr-row {
  display: grid;
  grid-template-columns: 56px minmax(140px, 1.1fr) minmax(0, 1.6fr) minmax(120px, 1fr);
  gap: 10px;
  align-items: center;
}
.sd-ivr-row > input,
.sd-ivr-row > select {
  min-width: 0;
}
.sd-ivr-row > input[aria-label="Digit"] {
  width: 100%;
  padding-left: 6px;
  padding-right: 6px;
  font-size: 1.05rem;
}
@media (max-width: 980px) {
  .sd-ivr-row {
    grid-template-columns: 56px 1fr;
    grid-auto-rows: auto;
  }
  .sd-ivr-row > :nth-child(3),
  .sd-ivr-row > :nth-child(4) {
    grid-column: 1 / -1;
  }
}

/* Two-column "editor + sticky preview" layout used by follow-up
   SMS, branding, and IVR. Collapses to a single column on phones
   so the preview stacks under the editor instead of squeezing the
   editor into an unreadable column. */
.sd-split-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  align-items: start;
}
.sd-split-preview--narrow { grid-template-columns: minmax(0, 1fr) 300px; }
@media (max-width: 860px) {
  .sd-split-preview,
  .sd-split-preview--narrow { grid-template-columns: 1fr; }
  .sd-split-preview > aside.sd-phone-preview,
  .sd-split-preview > aside { position: static; max-width: 100%; }
}

/* Card footer convention used by form-heavy feature pages. */
.sd-form-footer {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
  padding-top: 14px;
  margin-top: 16px;
  border-top: 1px solid var(--border-subtle);
}
.sd-form-footer__secondary {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}