/* ═══════════════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════════════ */
:root {
  /* Color Palette */
  --canvas: #EEEFE9;
  --surface: #FFFFFF;
  --surface-dark: #121310;
  --ink: #121310;
  --body: #4D4F46;
  --mute: #6C6E63;
  --hairline: #BFC1B7;
  --amber: #F7A501;
  --green: #2F7A4F;
  --red: #A3341E;

  /* Typography */
  --font-sans: 'Inter', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* Spacing */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 80px; --sp-10: 120px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 32px;
  --radius-pill: 9999px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-reveal: 800ms;
}

/* ═══════════════════════════════════════════════════
   RESET + BASE
═══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--font-sans);
  background: linear-gradient(135deg, #F8F9F5 0%, var(--canvas) 100%);
  color: var(--body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
input { font: inherit; border: none; background: none; outline: none; }

/* ═══════════════════════════════════════════════════
   LAYOUT (Full Width)
═══════════════════════════════════════════════════ */
.container {
  max-width: 1536px;
  width: 92%;
  margin: 0 auto;
}
.section { padding: var(--sp-10) 0; }

/* ═══════════════════════════════════════════════════
   TYPOGRAPHY
═══════════════════════════════════════════════════ */
.pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.pill-badge.dark {
  background: var(--surface-dark);
  border-color: rgba(255,255,255,0.2);
  color: var(--surface);
}

.pill-badge .dot {
  width: 8px; height: 8px;
  background: var(--amber);
  border-radius: 50%;
}

h1, h2, h3, h4, .headline-xl, .headline-lg, .headline-md {
  font-family: var(--font-mono);
  text-transform: uppercase;
  color: var(--ink);
}

.headline-xl {
  font-size: clamp(42px, 5vw, 72px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.headline-lg {
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 700;
  line-height: 1.15;
}

.body-lg {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.7;
  color: var(--mute);
}

.mono { font-family: var(--font-mono); text-transform: uppercase; }

/* ═══════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════ */
.btn-primary, .btn-secondary, .nav-cta, .btn-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.05em;
  border-radius: var(--radius-pill);
  transition: transform var(--duration-fast) var(--ease-spring),
              box-shadow var(--duration-fast) ease,
              background var(--duration-fast) ease;
}

.btn-primary, .nav-cta {
  padding: var(--sp-4) var(--sp-6);
  background: var(--ink);
  color: var(--surface);
}

.btn-primary:hover, .nav-cta:hover {
  transform: translateY(-2px);
  background: #000;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.btn-secondary {
  padding: var(--sp-4) var(--sp-6);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--hairline);
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  border-color: var(--mute);
}

.btn-primary:disabled, .btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ═══════════════════════════════════════════════════
   SIDEBAR LAYOUT (For Dashboard & Deals)
═══════════════════════════════════════════════════ */
.layout-app { display: flex; height: 100vh; overflow: hidden; }

.sidebar {
  width: 280px; background: var(--surface); border-right: 1px solid var(--hairline);
  display: flex; flex-direction: column; padding: var(--sp-6) 0; height: 100%;
}
.sidebar-logo { padding: 0 var(--sp-6); margin-bottom: var(--sp-8); }
.sidebar-logo img { height: 40px; }

.nav-links-sidebar {
  display: flex; flex-direction: column; gap: var(--sp-2); padding: 0 var(--sp-4); flex: 1;
}
.nav-links-sidebar a {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  color: var(--mute); text-decoration: none; font-family: var(--font-mono); font-size: 13px; font-weight: 600; text-transform: uppercase; border-radius: var(--radius-sm); transition: all 0.2s;
}
.nav-links-sidebar a:hover { background: var(--canvas); color: var(--ink); }
.nav-links-sidebar a.active { background: var(--ink); color: var(--surface); }

.sidebar-footer {
  padding: var(--sp-6) var(--sp-6) 0; border-top: 1px solid var(--hairline); display: flex; align-items: center; justify-content: space-between;
}
.user-profile-sidebar { display: flex; align-items: center; gap: var(--sp-3); }
.user-avatar { width: 36px; height: 36px; border-radius: 50%; background: #E2E4DC; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 700; font-size: 14px; color: var(--ink); }
.user-info-sidebar { display: flex; flex-direction: column; }
.user-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.user-role { font-size: 12px; color: var(--mute); }

.main-content { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow-y: auto; background: var(--canvas); }

.topbar {
  flex-shrink: 0;
  height: 80px; background: var(--surface); border-bottom: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: space-between; padding: 0 var(--sp-6);
  position: sticky; top: 0; z-index: 10;
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: var(--sp-4); }
.topbar-right { gap: var(--sp-6); }
.topbar-title { font-family: var(--font-mono); font-size: 20px; font-weight: 600; color: var(--ink); text-transform: uppercase; }
.workspace-controls { display:grid; grid-template-columns:minmax(220px,1fr) auto; gap:14px 20px; align-items:center; }
.workspace-eyebrow, .conversation-selector label { font-family:var(--font-mono); font-size:10px; color:var(--amber); font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.workspace-subtitle, .workspace-link-status { color:var(--mute); font-size:12px; line-height:1.45; margin-top:4px; }
.workspace-actions { display:flex; align-items:end; gap:12px; flex-wrap:wrap; }
.conversation-selector { display:flex; flex-direction:column; gap:5px; min-width:260px; }
.conversation-selector .form-input { padding:8px 10px; font-size:12px; }
.workspace-link-status { grid-column:1 / -1; margin-top:-3px; }

/* ═══════════════════════════════════════════════════
   SCROLL-TRIGGERED REVEAL ANIMATION
═══════════════════════════════════════════════════ */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity var(--duration-reveal) var(--ease-out), transform var(--duration-reveal) var(--ease-out);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-stagger > .reveal:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 100ms; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 200ms; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 300ms; }

/* ═══════════════════════════════════════════════════
   NAVBAR
═══════════════════════════════════════════════════ */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent;
  transition: background var(--duration-normal) ease, border-color var(--duration-normal) ease;
}
.navbar.scrolled {
  background: rgba(250, 251, 248, 0.95);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--hairline);
}
.navbar-inner, .nav-container {
  display: flex; align-items: center; justify-content: space-between; height: 100px;
  max-width: 1536px; width: 92%; margin: 0 auto;
}
.logo { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-weight: 700; font-size: 24px; text-transform: uppercase;}
.logo img { height: 48px; width: auto; }
.nav-links { display: flex; gap: var(--sp-6); list-style: none; position: absolute; left: 50%; transform: translateX(-50%); }
.nav-links a { font-family: var(--font-mono); font-size: 14px; font-weight: 600; text-transform: uppercase; color: var(--mute); }
.nav-links a:hover { color: var(--ink); }
@media (max-width: 900px) { .nav-links { display: none; } }

.user-profile {
  display: flex; align-items: center; gap: var(--sp-4);
}
.user-info { display: flex; flex-direction: column; align-items: flex-end; }
.user-name { font-weight: 600; font-size: 14px; }
.user-role { font-size: 12px; color: var(--mute); font-family: var(--font-mono); text-transform: uppercase; }
.nav-user { display: flex; align-items: center; gap: var(--sp-3); }
.user-avatar { width: 40px; height: 40px; background: var(--amber); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #000; font-family: var(--font-mono); }

/* ═══════════════════════════════════════════════════
   BENTO COMPONENTS
═══════════════════════════════════════════════════ */
.bento-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  border: 1px solid var(--hairline);
  display: flex; flex-direction: column;
}

.bento-header {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--sp-4);
}

.bento-header h3 { font-size: 18px; letter-spacing: 0; }

.overview-stats { display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--sp-5); margin-bottom:var(--sp-5); }
.overview-label { font-family:var(--font-mono); text-transform:uppercase; font-size:11px; color:var(--mute); margin-bottom:var(--sp-3); }
.overview-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); }
.analytics-stats { display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--sp-5); margin-bottom:var(--sp-6); }
.analytics-grid, .integration-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--sp-5); }
.integration-grid { grid-template-columns:repeat(3, 1fr); }
.overview-list { display:flex; flex-direction:column; gap:8px; }
.overview-row { display:flex; flex-direction:column; gap:3px; padding:12px; border-radius:var(--radius-sm); background:var(--canvas); border:1px solid transparent; }
.overview-row:hover { border-color:var(--amber); }
.overview-row strong { color:var(--ink); font-size:14px; }.overview-row span { color:var(--mute); font-family:var(--font-mono); font-size:11px; }
.overview-link { color:var(--amber); font-family:var(--font-mono); font-size:11px; text-transform:uppercase; font-weight:700; }

/* ═══════════════════════════════════════════════════
   AUTH (LOGIN/SIGNUP) PAGE
═══════════════════════════════════════════════════ */
.page-auth { display: flex; align-items: center; justify-content: center; background: var(--canvas); }
.auth-container {
  width: 100%; max-width: 440px;
  background: var(--surface);
  padding: var(--sp-8);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0,0,0,0.05);
  border: 1px solid var(--hairline);
  margin-top: 80px;
}
.auth-header { text-align: center; margin-bottom: var(--sp-6); }
.auth-title { font-size: 28px; margin-bottom: var(--sp-2); }
.auth-header p { color: var(--mute); }

.auth-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.form-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.form-label { font-family: var(--font-mono); font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--mute); }
.form-input {
  width: 100%; padding: 14px 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: #FAFBFA;
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}
.form-input:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(247, 165, 1, 0.1); }
.form-input-wrapper { position: relative; }
.password-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--mute); }
.password-toggle:hover { color: var(--ink); }

.divider {
  display: flex; align-items: center; text-align: center;
  margin: var(--sp-6) 0; color: var(--mute); font-family: var(--font-mono); font-size: 12px; text-transform: uppercase;
}
.divider::before, .divider::after { content: ''; flex: 1; border-bottom: 1px solid var(--hairline); }
.divider:not(:empty)::before { margin-right: 16px; }
.divider:not(:empty)::after { margin-left: 16px; }

/* ═══════════════════════════════════════════════════
   DEALS LIST PAGE
═══════════════════════════════════════════════════ */
.page-deals { padding-top: 100px; }
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-6); }
.deals-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: var(--sp-6); }
.deal-card {
  background: var(--surface); padding: var(--sp-6); border-radius: var(--radius-lg);
  border: 1px solid var(--hairline); transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}
.deal-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.06); border-color: var(--amber); }
.deal-company { font-size: 24px; font-weight: 600; margin-bottom: 4px; }
.deal-stage { display: inline-block; padding: 4px 12px; background: rgba(247, 165, 1, 0.1); color: var(--amber); font-family: var(--font-mono); font-size: 12px; border-radius: 99px; margin-bottom: 16px; font-weight: 600; }
.deal-meta { display: flex; justify-content: space-between; color: var(--mute); font-size: 14px; margin-bottom: 16px; }
.deal-updated { font-family: var(--font-mono); font-size: 12px; color: var(--mute); border-top: 1px solid var(--hairline); padding-top: 12px; }

/* ═══════════════════════════════════════════════════
   DASHBOARD PAGE
═══════════════════════════════════════════════════ */
.main-wrapper { max-width: 1536px; width: 92%; margin: 0 auto; }

.search-bar {
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  width: 320px;
}
.search-bar input {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 14px;
}
.search-bar svg { color: var(--mute); }

.hero-terminal-card {
  background: rgba(0, 0, 0, 0.03); /* slight darkness and transparency */
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.hero-terminal-header {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: var(--sp-4);
}
.hero-terminal-title {
  font-family: var(--font-mono);
  font-size: 24px;
  text-transform: uppercase;
  display: flex; align-items: center; gap: var(--sp-3);
  color: var(--amber);
}

/* Creative Data Visualizations */
.viz-mono-bar {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 2px;
  display: flex; align-items: center; gap: var(--sp-3);
}
.viz-mono-bar .track { color: var(--mute); opacity: 0.3; }
.viz-mono-bar .fill { color: var(--amber); }
.viz-mono-bar.success .fill { color: var(--green); }
.viz-mono-bar.risk .fill { color: var(--red); }
.viz-value-xl {
  font-family: var(--font-mono);
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}
.viz-value-xl.company-title {
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tag-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: start; }
.dashboard-col { display: flex; flex-direction: column; gap: var(--sp-6); }

/* MEDDIC Grid */
.meddic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.meddic-item { display: flex; align-items: center; gap: var(--sp-2); padding: 12px; background: var(--canvas); border-radius: var(--radius-md); font-family: var(--font-sans); font-size: 14px; color: var(--mute); border: 1px solid transparent; transition: all 0.3s; }
.meddic-item.confirmed { background: rgba(47, 122, 79, 0.05); color: var(--ink); border-color: rgba(47, 122, 79, 0.2); }
.meddic-item.confirmed svg { color: var(--green); }

/* Evidence List & Audit Log (Fixed Height Stream Cards) */
.bento-card-fixed {
  height: 380px;
  display: flex;
  flex-direction: column;
}
.bento-card-fixed .bento-header {
  flex-shrink: 0;
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
}
.bento-card-fixed .card-scroll-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 6px;
}

/* Empty states for stream panels */
.stream-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 220px;
  padding: 24px;
  text-align: center;
  background: rgba(0, 0, 0, 0.015);
  border: 1px dashed var(--hairline);
  border-radius: var(--radius-md);
}
.stream-empty-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--amber);
  margin-bottom: 12px;
}
.stream-empty-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 4px;
}
.stream-empty-subtitle {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--mute);
  line-height: 1.5;
  max-width: 250px;
}

/* Custom sleek scrollbar for internal panel lists */
.card-scroll-body::-webkit-scrollbar,
.evidence-list::-webkit-scrollbar,
.audit-log::-webkit-scrollbar {
  width: 5px;
}
.card-scroll-body::-webkit-scrollbar-track,
.evidence-list::-webkit-scrollbar-track,
.audit-log::-webkit-scrollbar-track {
  background: transparent;
}
.card-scroll-body::-webkit-scrollbar-thumb,
.evidence-list::-webkit-scrollbar-thumb,
.audit-log::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 4px;
}
.card-scroll-body::-webkit-scrollbar-thumb:hover,
.evidence-list::-webkit-scrollbar-thumb:hover,
.audit-log::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

/* Evidence List */
.evidence-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); padding: 0; margin: 0; }
.evidence-item { padding: 12px; border: 1px solid rgba(247, 165, 1, 0.3); border-left: 3px solid var(--amber); background: var(--canvas); border-radius: var(--radius-md); transition: border-color 0.2s; }
.evidence-item:hover { border-color: var(--amber); }
.evidence-source { font-family: var(--font-mono); font-size: 11px; color: var(--mute); text-transform: uppercase; margin-bottom: 4px; }
.evidence-claim { font-size: 13px; color: var(--ink); font-weight: 500; line-height: 1.45; }
.evidence-confidence { font-family: var(--font-mono); font-size: 11px; color: var(--green); }

/* Audit Log */
.audit-log { display: flex; flex-direction: column; gap: var(--sp-2); padding: 0; margin: 0; }
.audit-entry { display: flex; gap: var(--sp-3); padding: 10px 12px; background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--radius-md); align-items: flex-start; }
.audit-time { font-family: var(--font-mono); font-size: 11px; color: var(--mute); white-space: nowrap; padding-top: 2px; }
.audit-event { font-size: 13px; color: var(--ink); line-height: 1.4; word-break: break-word; }

/* Pulse Indicator */
.pulse-indicator { width: 12px; height: 12px; background: var(--yellow, #F7A501); border-radius: 50%; box-shadow: 0 0 0 0 rgba(247, 165, 1, 0.7); animation: pulse-yellow 2s infinite; }
@keyframes pulse-yellow { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(247, 165, 1, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(247, 165, 1, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(247, 165, 1, 0); } }

/* ═══════════════════════════════════════════════════
   CALL PAGE (ORB & CONTROLS)
═══════════════════════════════════════════════════ */
.page-call { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; overflow-x: hidden; overflow-y: auto; background: var(--canvas); }
.call-container { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(32px, 6vh, 72px) 20px 36px; }
.call-header { text-align: center; margin-bottom: clamp(24px, 5vh, 56px); }
.call-title { font-size: 32px; font-weight: 700; margin-bottom: 8px; }
.call-status { font-family: var(--font-mono); color: var(--mute); text-transform: uppercase; letter-spacing: 0.1em; }

/* Orb Animation (Abstract, no mic) */
.orb-container { position: relative; width: min(300px, 72vw); height: min(300px, 72vw); display: flex; align-items: center; justify-content: center; margin-bottom: clamp(28px, 5vh, 56px); }
.orb-inner { width: 160px; height: 160px; background: linear-gradient(135deg, var(--ink), #333); border-radius: 50%; box-shadow: 0 24px 64px rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 10; position: relative; }
.wave { position: absolute; width: 160px; height: 160px; border: 2px solid rgba(247, 165, 1, 0.5); border-radius: 50%; animation: pulse-ring 2.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; box-sizing: border-box; }
.wave:nth-child(2) { animation-delay: 0.8s; border-color: rgba(247, 165, 1, 0.3); }
.wave:nth-child(3) { animation-delay: 1.6s; border-color: rgba(247, 165, 1, 0.1); }
@keyframes pulse-ring { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2.5); opacity: 0; } }

/* Voice Animation States (WhisperFlow-inspired, DealForge aesthetic) */
.orb-container .wave { animation-play-state: paused; transition: border-color 0.4s ease, opacity 0.4s ease; }
.orb-container .orb-inner { transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease, border-color 0.3s ease; }

.orb-container.state-idle .wave { animation-play-state: paused; opacity: 0.15; border-color: rgba(255, 255, 255, 0.2); }
.orb-container.state-idle .orb-inner { transform: scale(1); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4); border: 1.5px solid rgba(255, 255, 255, 0.1); }

.orb-container.state-customer-speaking .wave { animation-play-state: running; border-color: rgba(46, 213, 115, 0.45); animation-duration: 2.2s; }
.orb-container.state-customer-speaking .wave:nth-child(2) { border-color: rgba(46, 213, 115, 0.25); }
.orb-container.state-customer-speaking .wave:nth-child(3) { border-color: rgba(46, 213, 115, 0.1); }
.orb-container.state-customer-speaking .orb-inner { transform: scale(1.04); box-shadow: 0 0 44px rgba(46, 213, 115, 0.35), 0 20px 50px rgba(0, 0, 0, 0.5); border: 2px solid rgba(46, 213, 115, 0.7); }

.orb-container.state-agent-speaking .wave { animation-play-state: running; border-color: rgba(247, 165, 1, 0.65); animation-duration: 1.8s; }
.orb-container.state-agent-speaking .wave:nth-child(2) { border-color: rgba(247, 165, 1, 0.35); }
.orb-container.state-agent-speaking .wave:nth-child(3) { border-color: rgba(247, 165, 1, 0.15); }
.orb-container.state-agent-speaking .orb-inner { transform: scale(1.06); box-shadow: 0 0 54px rgba(247, 165, 1, 0.45), 0 24px 60px rgba(0, 0, 0, 0.5); border: 2px solid rgba(247, 165, 1, 0.85); }

.orb-container.state-processing .wave { animation: pulse-breathing 2s ease-in-out infinite; border-color: rgba(255, 255, 255, 0.25); }
.orb-container.state-processing .orb-inner { animation: orb-breathe 2s ease-in-out infinite; box-shadow: 0 0 32px rgba(255, 255, 255, 0.15); border: 1.5px solid rgba(255, 255, 255, 0.3); }

.orb-container.state-muted .wave { animation-play-state: paused; border-color: var(--red); opacity: 0.2; }
.orb-container.state-muted .orb-inner { transform: scale(0.96); border: 2px solid var(--red); box-shadow: 0 8px 24px rgba(163, 52, 30, 0.3); }

@keyframes pulse-breathing { 0%, 100% { transform: scale(1); opacity: 0.2; } 50% { transform: scale(1.4); opacity: 0.5; } }
@keyframes orb-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }

/* Controls */
.call-controls { display: flex; align-items: center; gap: var(--sp-4); background: var(--surface); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-pill); box-shadow: 0 12px 48px rgba(0,0,0,0.05); border: 1px solid var(--hairline); }
.btn-control { width: 48px; height: 48px; border-radius: 50%; background: var(--canvas); color: var(--ink); transition: background 0.2s, color 0.2s, transform 0.2s; }
.btn-control:hover { background: var(--hairline); transform: scale(1.05); }
.meeting-panel { width:min(600px, 100%); margin-top:28px; padding:20px; border:1px solid rgba(247, 165, 1, .35); border-radius:var(--radius-md); background:var(--surface); box-shadow:0 16px 40px rgba(0,0,0,.05); }
.meeting-panel[hidden] { display:none; }
.meeting-panel-header { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; border-bottom:1px solid var(--hairline); padding-bottom:14px; margin-bottom:12px; }
.meeting-panel h2 { margin:2px 0 0; font-size:19px; }.meeting-eyebrow,.meeting-slots-label { font-family:var(--font-mono); color:var(--amber); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.meeting-panel p { color:var(--mute); line-height:1.5; font-size:13px; }
.meeting-form { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }.meeting-form label { display:flex; flex-direction:column; gap:6px; color:var(--mute); font-family:var(--font-mono); font-size:11px; text-transform:uppercase; }.meeting-form label:nth-child(1),.meeting-form label:nth-child(2),.meeting-form button { grid-column:1 / -1; }.meeting-form .form-input { width:100%; background:var(--canvas); font-family:var(--font-sans); text-transform:none; }
.meeting-slots { margin-top:16px; }.meeting-slot-buttons { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }.meeting-slot { padding:8px 10px; font-family:var(--font-mono); font-size:11px; }.meeting-result { min-height:1.5em; margin:14px 0 0!important; }.meeting-result.success { color:var(--green); }.meeting-result.error { color:var(--red); }

/* Keep the primary call control in the initial desktop viewport on short laptop
   screens. The same component sizing remains unchanged on normal-height screens. */
@media (max-height: 700px) and (min-width: 641px) {
  .call-container { justify-content: flex-start; padding: 18px 20px 24px; }
  .call-header { margin-bottom: 14px; }
  .call-header p { margin-top: 8px !important; }
  .call-title { font-size: 26px; }
  .orb-container { width: 180px; height: 180px; margin-bottom: 16px; }
  .orb-inner, .wave { width: 112px; height: 112px; }
  .call-controls { position: sticky; bottom: 12px; z-index: 2; }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE OVERRIDES
═══════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .dashboard-grid { grid-template-columns: 1fr; }
  .user-info { display: none; }
  .overview-stats { grid-template-columns:repeat(2, 1fr); }
  .overview-grid { grid-template-columns:1fr; }
  .analytics-stats { grid-template-columns:repeat(2, 1fr); }.analytics-grid { grid-template-columns:1fr; }.integration-grid { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 640px) {
  html, body { overflow-x:hidden; }
  .layout-app { height:auto; min-height:100vh; overflow:visible; flex-direction:column; }
  .sidebar { width:100%; min-width:0; height:auto; padding:12px 0 0; border-right:0; border-bottom:1px solid var(--hairline); }
  .sidebar-logo { padding:0 16px; margin-bottom:12px; }.sidebar-logo img { height:32px; }
  .nav-links-sidebar { width:100%; min-width:0; flex:0 0 auto; flex-direction:row; gap:0; overflow-x:auto; overscroll-behavior-x:contain; padding:0 8px; scrollbar-width:none; }
  .nav-links-sidebar::-webkit-scrollbar { display:none; }
  .nav-links-sidebar a { flex:0 0 auto; gap:8px; padding:10px 12px; white-space:nowrap; font-size:11px; border-radius:0; }
  .sidebar-footer { display:none; }
  .main-content { width:100%; min-width:0; overflow:visible; }
  .topbar { position:static; height:auto; min-height:0; padding:12px 16px; align-items:stretch; flex-direction:column; gap:10px; }
  .topbar-left, .topbar-right { width:100%; min-width:0; flex-wrap:wrap; gap:8px; }
  .topbar-left { align-items:flex-start; }.topbar-right { justify-content:space-between; }
  .topbar-title { max-width:100%; font-size:14px; line-height:1.35; overflow-wrap:anywhere; }
  .conversation-selector { width:100%; margin-left:0 !important; flex-wrap:wrap; }
  .conversation-selector select { width:100% !important; }
  .workspace-controls { grid-template-columns:1fr; }
  .workspace-actions { align-items:stretch; }
  .workspace-actions .btn-secondary { width:100%; }
  .conversation-selector { min-width:0; }
  #btn-resume-call { margin-left:0!important; padding:8px 10px!important; font-size:10px!important; }
  #call-link-status { flex-basis:100%; max-width:100%; margin-left:0!important; overflow-wrap:anywhere; }
  .search-bar { width:auto; min-width:0; flex:1 1 180px; max-width:100%; }
  .user-profile { flex:0 0 auto; }.user-avatar { flex:0 0 auto; }
  .container { width:100%; min-width:0; padding-left:16px!important; padding-right:16px!important; }
  .overview-stats { grid-template-columns:1fr 1fr; gap:12px; }.bento-card { padding:20px; }.viz-value-xl { font-size:30px; }
  .integration-grid { grid-template-columns:1fr; }.dashboard-grid { width:100%; min-width:0; gap:16px; }.dashboard-grid > *, .dashboard-col, .bento-card { min-width:0; }.meddic-grid { grid-template-columns:1fr; }
  .hero-terminal-header { align-items:flex-start; flex-direction:column; gap:10px; }.hero-terminal-title { font-size:19px; line-height:1.35; }.audit-entry { align-items:flex-start; flex-direction:column; gap:4px; }
  #deals-list { overflow-x:auto; }
  .page-call { height:auto; min-height:100vh; overflow:auto; }.call-container { padding:48px 20px 36px; justify-content:flex-start; }.call-header { margin-bottom:32px; }.orb-container { width:230px; height:230px; margin-bottom:32px; }.orb-inner,.wave { width:130px; height:130px; }
  .meeting-form { grid-template-columns:1fr; }.meeting-form label,.meeting-form button { grid-column:auto; }.meeting-panel { padding:16px; }.meeting-panel-header { flex-direction:column; }
}

/* ═══════════════════════════════════════════════════
   LANDING PAGE SPECIFICS
═══════════════════════════════════════════════════ */
.hero { padding-top: calc(80px + var(--sp-6)); padding-bottom: var(--sp-10); min-height: 90vh; display: flex; align-items: center; }
.hero-bento { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); width: 100%; }
.bento-left { gap: var(--sp-6); align-items: flex-start; border: none; background: transparent; box-shadow: none; padding-left: 0; }
.bento-right { padding: 0; overflow: hidden; position: relative; background: transparent; min-height: 600px; border: none; box-shadow: none; }
.bento-right img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); }
.hero-actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-2); }
@media (max-width: 900px) { .hero-bento { grid-template-columns: 1fr; } .bento-right { min-height: 400px; } }

.social-proof { background: var(--surface); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: var(--sp-8) 0; }
.stats-row { display: flex; justify-content: space-around; gap: var(--sp-6); flex-wrap: wrap; }
.stat-item { text-align: center; }
.stat-number { font-size: 56px; font-weight: 700; color: var(--ink); font-family: var(--font-mono); line-height: 1; margin-bottom: 8px; }
.stat-label { font-family: var(--font-mono); font-size: 14px; font-weight: 600; text-transform: uppercase; color: var(--mute); }

.problem { padding: var(--sp-10) 0; }
.problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-10); align-items: center; }
.problem-content { display: flex; flex-direction: column; gap: var(--sp-6); }
.pain-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-4); }
.pain-list li { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: 16px; color: var(--ink); line-height: 1.5; font-family: var(--font-sans); }
.pain-list .icon { color: var(--red); font-weight: 700; font-family: var(--font-mono); }
.problem-visual img { width: 100%; border-radius: var(--radius-lg); box-shadow: 0 24px 48px rgba(0,0,0,0.1); }
@media (max-width: 900px) { .problem-grid { grid-template-columns: 1fr; } }

.solution { padding: var(--sp-10) 0; background: var(--surface); border-top: 1px solid var(--hairline); }
.solution-header { text-align: center; max-width: 800px; margin: 0 auto var(--sp-10); }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.feature-card { background: var(--canvas); border: 1px solid rgba(0,0,0,0.05); border-radius: var(--radius-md); padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); transition: transform var(--duration-normal) var(--ease-spring); }
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.06); }
.feature-icon { font-family: var(--font-mono); font-weight: 700; color: var(--amber); font-size: 16px; }
.feature-card h3 { font-size: 20px; }
.feature-card p { font-family: var(--font-sans); font-size: 16px; color: var(--mute); line-height: 1.6; }
@media (max-width: 900px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .features-grid { grid-template-columns: 1fr; } }

.how-it-works { padding: var(--sp-10) 0; }
.how-header { text-align: center; max-width: 800px; margin: 0 auto var(--sp-9); }
.steps-container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-10); align-items: center; }
.steps-list { display: flex; flex-direction: column; gap: var(--sp-6); }
.step-item { display: flex; gap: var(--sp-4); padding: var(--sp-4); border-left: 2px solid var(--hairline); background: var(--surface); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.step-number { font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--amber); }
.step-content h3 { font-size: 18px; margin-bottom: 8px; }
.step-content p { font-family: var(--font-sans); color: var(--mute); line-height: 1.6; }
.step-visual img { width: 100%; border-radius: var(--radius-lg); box-shadow: 0 24px 48px rgba(0,0,0,0.1); }
@media (max-width: 900px) { .steps-container { grid-template-columns: 1fr; } }

.demo-preview { padding: var(--sp-10) 0; background: var(--surface); border-top: 1px solid var(--hairline); }
.demo-header { text-align: center; max-width: 100%; margin: 0 auto var(--sp-8); display: flex; flex-direction: column; align-items: center; }
.demo-header h2 { white-space: nowrap; font-size: clamp(14px, 3.5vw, 42px); }
.demo-terminal { background: var(--surface-dark); border-radius: var(--radius-md); padding: var(--sp-6); max-width: 900px; margin: 0 auto; font-family: var(--font-mono); font-size: 15px; color: rgba(255, 255, 255, 0.85); box-shadow: 0 32px 64px rgba(0,0,0,0.2); }
.terminal-header { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-6); padding-bottom: var(--sp-4); border-bottom: 1px solid rgba(255, 255, 255, 0.1); justify-content: space-between; }
.terminal-dots { display: flex; gap: 8px; }
.terminal-dot { width: 12px; height: 12px; border-radius: 50%; }
.terminal-dot.red { background: #FF5F57; } .terminal-dot.yellow { background: #FEBC2E; } .terminal-dot.green { background: #28C840; }
.terminal-title { font-size: 12px; color: rgba(255,255,255,0.4); text-transform: uppercase; }
.terminal-line { margin-bottom: var(--sp-4); display: flex; gap: var(--sp-4); opacity: 0; animation: terminal-in 0.4s forwards; }
.t-num { color: rgba(255,255,255,0.2); user-select: none; min-width: 24px; }
.t-content { flex: 1; line-height: 1.6; }
@keyframes terminal-in { to { opacity: 1; } }
.terminal-line:nth-child(1) { animation-delay: 0.2s; } .terminal-line:nth-child(2) { animation-delay: 0.8s; } .terminal-line:nth-child(3) { animation-delay: 1.4s; } .terminal-line:nth-child(4) { animation-delay: 2.0s; }
.t-prompt { color: var(--amber); font-weight: 600; } .t-muted { color: rgba(255, 255, 255, 0.4); } .t-red { color: #E85D5D; } .t-success { color: var(--green); }

.faq { padding: var(--sp-10) 0; }
.faq-header { max-width: 800px; margin-bottom: var(--sp-8); }
.faq-list { max-width: 1000px; display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--hairline); overflow: hidden; background: var(--surface); padding: 0 var(--sp-4); }
.faq-item:first-child { border-top: 1px solid var(--hairline); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.faq-item:last-child { border-radius: 0 0 var(--radius-md) var(--radius-md); }
.faq-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: var(--sp-5) 0; font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--ink); cursor: pointer; text-transform: uppercase; }
.faq-trigger::-webkit-details-marker { display: none; }
.faq-chevron { font-size: 24px; transition: transform var(--duration-normal) var(--ease-out); color: var(--amber); font-weight: 400; }
.faq-item[open] .faq-chevron { transform: rotate(45deg); }
.faq-answer { padding: 0 0 var(--sp-5) 0; font-family: var(--font-sans); font-size: 16px; color: var(--mute); line-height: 1.6; max-width: 800px; }

.final-cta { background: var(--surface-dark); padding: var(--sp-10) 0; text-align: center; color: var(--surface); margin: var(--sp-6) auto; border-radius: var(--radius-lg); max-width: 1536px; width: 92%; }
.final-cta .headline-lg { color: var(--surface); margin-bottom: var(--sp-4); }
.final-cta .body-lg { color: rgba(255,255,255,0.7); max-width: 640px; margin: 0 auto var(--sp-7); }
.cta-actions { display: flex; gap: var(--sp-4); justify-content: center; flex-wrap: wrap; }
.final-cta .btn-primary { background: var(--amber); color: var(--ink); }
.final-cta .btn-secondary { background: transparent; color: var(--surface); border-color: rgba(255,255,255,0.2); }
.final-cta .btn-secondary:hover { background: rgba(255,255,255,0.1); border-color: var(--surface); }

/* ═══════════════════════════════════════════════════
   RESPONSIVE APPLICATION SHELL
   The manager app is a distinct product surface from the marketing site. On
   tablet and phone it becomes a vertical shell with a touch-scrollable
   navigation rail rather than squeezing the desktop sidebar beside content.
═══════════════════════════════════════════════════ */
@media (max-width: 960px) {
  html, body { min-width: 0; overflow-x: hidden; }
  .layout-app { display: block; height: auto; min-height: 100svh; overflow: visible; }
  .sidebar { width: 100%; min-width: 0; height: auto; min-height: 0; padding: 12px 0 0; border-right: 0; border-bottom: 1px solid var(--hairline); }
  .sidebar-logo { padding: 0 20px; margin-bottom: 12px; }
  .sidebar-logo img { height: 34px; }
  .nav-links-sidebar { width: 100%; min-width: 0; flex: 0 0 auto; flex-direction: row; gap: 2px; overflow-x: auto; overscroll-behavior-x: contain; padding: 0 12px; scrollbar-width: none; }
  .nav-links-sidebar::-webkit-scrollbar { display: none; }
  .nav-links-sidebar a { flex: 0 0 auto; gap: 8px; padding: 11px 13px; border-radius: 8px 8px 0 0; white-space: nowrap; font-size: 11px; }
  .sidebar-footer { display: none; }
  .main-content { display: block; width: 100%; min-width: 0; min-height: 0; overflow: visible; }
  .topbar { position: static; height: auto; min-height: 0; padding: 14px 20px; align-items: stretch; flex-direction: column; gap: 12px; }
  .topbar-left, .topbar-right { width: 100%; min-width: 0; flex-wrap: wrap; gap: 10px; }
  .topbar-left { align-items: center; }
  .topbar-right { justify-content: space-between; }
  .topbar-title { max-width: 100%; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
  .user-info { display: none; }
  .search-bar { width: min(100%, 460px); flex: 1 1 220px; }
  .main-content > .container, .main-content > main.container, .main-content > .dashboard-grid { width: 100%; min-width: 0; padding-left: 20px !important; padding-right: 20px !important; }
  .page-dashboard .dashboard-grid { grid-template-columns: 1fr; margin-top: 20px !important; gap: 20px; }
  .dashboard-col { gap: 20px; }
  .agent-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; }
  .integration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-stats, .overview-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deal-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px !important; }
  #create-deal-form { grid-template-columns: minmax(0, 1fr) minmax(140px, .45fr) auto !important; }
  .page-call { min-height: 100svh; }
}

@media (max-width: 640px) {
  .sidebar-logo { padding: 0 16px; }
  .sidebar-logo img { height: 30px; }
  .nav-links-sidebar { padding: 0 8px; }
  .nav-links-sidebar a { padding: 10px 11px; }
  .topbar { padding: 12px 16px; }
  .topbar-left { align-items: flex-start; }
  .topbar-title { font-size: 14px; }
  .main-content > .container, .main-content > main.container, .main-content > .dashboard-grid { padding-left: 16px !important; padding-right: 16px !important; }
  .bento-card, .hero-terminal-card { padding: 18px; }
  .bento-header { align-items: flex-start; gap: 10px; }
  .bento-header h3 { font-size: 16px; line-height: 1.35; }
  .overview-stats, .analytics-stats, .integration-grid, .agent-status-grid, .deal-summary-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .overview-grid, .analytics-grid, .dashboard-grid { gap: 16px; }
  .deal-summary-grid > div { padding-bottom: 12px; border-bottom: 1px solid var(--hairline); }
  .deal-summary-grid > div:last-child { padding-bottom: 0; border-bottom: 0; }
  #create-deal-form { grid-template-columns: 1fr !important; }
  #create-deal-form label, #create-deal-form button { min-width: 0; }
  .hubspot-link-form { flex-direction: column; }
  .hubspot-link-form .btn-secondary { width: 100%; }
  #hubspot-sync-toggle-wrap { align-items: flex-start !important; }
  .deals-table, .deals-table tbody, .deals-table tr, .deals-table td { display: block; width: 100%; }
  .deals-table thead { display: none; }
  .deals-table tbody { display: grid; gap: 12px; }
  .deals-table tr { border: 1px solid var(--hairline) !important; border-radius: var(--radius-md); padding: 6px 14px; background: var(--surface); }
  .deals-table td { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0 !important; border-bottom: 1px solid var(--hairline); text-align: right; }
  .deals-table td:last-child { border-bottom: 0; }
  .deals-table td::before { content: attr(data-label); flex: 0 0 auto; color: var(--mute); font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-align: left; text-transform: uppercase; }
  .deals-table td:first-child { justify-content: flex-start; }
  .deals-table td:first-child::before { display: none; }
  .deals-table .pill-badge { margin-left: auto; }
  .page-call .call-container { padding: 32px 16px 28px; }
  .call-title { font-size: 25px; }
  .orb-container { width: 210px; height: 210px; margin-bottom: 24px; }
  .orb-inner, .wave { width: 120px; height: 120px; }
  .call-controls { width: 100%; max-width: 360px; justify-content: space-between; gap: 10px; padding: 10px; }
  .btn-start-call { flex: 1; min-width: 0; padding-left: 14px; padding-right: 14px; }
  .captions-container { height: 240px !important; margin-top: 24px !important; }
  .meeting-panel { margin-top: 20px; padding: 16px; }
  .meeting-panel-header { flex-direction: column; }
  .meeting-form { grid-template-columns: 1fr; }
  .meeting-form label, .meeting-form button { grid-column: auto; }
  .navbar-inner, .nav-container { width: calc(100% - 32px); height: 72px; }
  .logo img { height: 36px; }
  .nav-cta { padding: 10px 12px; font-size: 11px; }
  .hero { padding-top: 104px; min-height: auto; }
  .headline-xl { font-size: clamp(34px, 10vw, 48px); }
  .bento-right { min-height: 280px; }
  .stat-number { font-size: 40px; }
  .demo-terminal { padding: 18px; font-size: 12px; overflow-x: auto; }
  .terminal-line { min-width: 480px; }
  .auth-container { margin: 96px 16px 24px; padding: 28px 20px; }
  .auth-title { font-size: 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-7); }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
}

.footer { padding: var(--sp-8) 0; border-top: 1px solid var(--hairline); background: var(--canvas); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--sp-8); margin-bottom: var(--sp-8); }
.footer-col h4 { font-family: var(--font-mono); font-size: 14px; margin-bottom: var(--sp-4); color: var(--ink); }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-col a { font-family: var(--font-mono); font-size: 14px; text-transform: uppercase; color: var(--mute); font-weight: 600; }
.footer-bottom { display: flex; justify-content: space-between; font-size: 12px; color: var(--mute); font-family: var(--font-mono); text-transform: uppercase; }

/* ═══════════════════════════════════════════════════
   DASHBOARD ENTERPRISE FINALIZATION STYLES
═══════════════════════════════════════════════════ */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.status-confirmed {
  background: rgba(47, 122, 79, 0.12);
  color: var(--green);
  border: 1px solid rgba(47, 122, 79, 0.3);
}
.status-likely {
  background: rgba(247, 165, 1, 0.12);
  color: var(--amber);
  border: 1px solid rgba(247, 165, 1, 0.3);
}
.status-needs-confirmation {
  background: rgba(108, 110, 99, 0.12);
  color: var(--mute);
  border: 1px solid rgba(108, 110, 99, 0.25);
}
.status-not-provided {
  background: transparent;
  color: var(--mute);
  border: 1px dashed var(--hairline);
}

.dashboard-row-3 {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-6);
  align-items: start;
}
.dashboard-row-2 {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  align-items: start;
}
.dashboard-row-full {
  grid-column: 1 / -1;
}

@media (max-width: 1024px) {
  .dashboard-row-3 {
    grid-template-columns: 1fr;
  }
  .dashboard-row-2 {
    grid-template-columns: 1fr;
  }
}