/* =====================================================================
   PERMIT SOLUTIONS — OPERATOR CONSOLE
   Modern, light, vibrant. Indigo / purple / pink gradient accents.
===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  /* Brand colors sampled directly from PERMIT SOLUTIONS LOGO.avif */
  --brand-orange:        #FC8418;
  --brand-orange-2:      #F4A53D;   /* lighter, for two-stop gradients */
  --brand-orange-soft:   #FFEDD5;
  --brand-navy:          #24303C;
  --brand-navy-2:        #3B4E66;   /* mid-navy for hover/focus states */
  --brand-navy-soft:     #E4E8EE;

  /* Surfaces -- warm off-white to harmonize with the orange */
  --bg:           #faf8f4;
  --bg-soft:      #f1edE5;
  --surface:      #ffffff;
  --surface-2:    #fdfaf5;
  --border:       #e7e2d6;
  --border-hi:    #cfc8b8;

  /* Text */
  --ink:          #1a232e;
  --ink-2:        #2d3a48;
  --ink-mute:     #6b7280;
  --ink-dim:      #9ba3ad;

  /* Primary aliases that drive most components -- pointed at the brand */
  --indigo:       var(--brand-orange);
  --indigo-soft:  var(--brand-orange-soft);
  --purple:       var(--brand-navy);
  --purple-soft:  var(--brand-navy-soft);

  /* Supporting palette */
  --pink:         #d4451f;
  --pink-soft:    #ffe2d6;
  --blue:         #2c5d92;
  --blue-soft:    #e0ebf6;
  --cyan:         #0ea5e9;
  --cyan-soft:    #d6f1ff;
  --emerald:      #10b981;
  --emerald-soft: #d8fbef;
  --amber:        #d97706;
  --amber-soft:   #fef3c7;
  --orange:       var(--brand-orange);
  --orange-soft:  var(--brand-orange-soft);
  --red:          #dc2626;
  --red-soft:     #ffdedc;

  /* Gradients -- centered on the brand orange-to-navy spectrum */
  --grad-brand:    linear-gradient(135deg, #FC8418 0%, #F4A53D 45%, #24303C 100%);
  --grad-brand-r:  linear-gradient(90deg,  #FC8418 0%, #F4A53D 45%, #24303C 100%);
  --grad-blue:     linear-gradient(135deg, #3B4E66 0%, #24303C 100%);
  --grad-orange:   linear-gradient(135deg, #FC8418 0%, #F4A53D 100%);
  --grad-emerald:  linear-gradient(135deg, #10b981 0%, #14b8a6 100%);
  --grad-pink:     linear-gradient(135deg, #FC8418 0%, #d4451f 100%);

  /* Shadows */
  --shadow-sm:    0 1px 2px rgba(36,48,60,0.05);
  --shadow:       0 1px 3px rgba(36,48,60,0.06), 0 4px 16px rgba(36,48,60,0.05);
  --shadow-lg:    0 8px 28px rgba(36,48,60,0.12), 0 2px 6px rgba(36,48,60,0.06);
  --shadow-glow:  0 0 0 4px rgba(252,132,24,0.18);
}

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

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  background-image:
    radial-gradient(at 5%   0%,  rgba(252,132,24,0.12) 0px, transparent 45%),
    radial-gradient(at 95%  5%,  rgba(244,165,61,0.10) 0px, transparent 50%),
    radial-gradient(at 50% 100%, rgba(36,48,60,0.06) 0px, transparent 50%);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--indigo); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--purple); }

code, .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.92em; }

::selection { background: var(--indigo-soft); color: var(--ink); }

/* ===== Topbar ===== */
.topbar {
  background: rgba(255,255,255,0.78);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
  padding: 16px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 50;
  position: relative;
}
.topbar::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--grad-brand-r);
  opacity: 0.85;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}
.brand:hover { text-decoration: none; }
.brand-logo {
  height: 38px;
  width: auto;
  display: block;
}
.brand-text { display: flex; flex-direction: column; gap: 2px; }
.brand-name {
  font-size: 13.5px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--brand-navy);
  line-height: 1;
}
.brand-sub {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--brand-orange);
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1;
}
.topnav { display: flex; gap: 4px; }
.topnav a {
  font-size: 13px;
  letter-spacing: 0.02em;
  font-weight: 500;
  color: var(--ink-mute);
  padding: 8px 16px;
  border-radius: 8px;
  transition: all 0.18s ease;
}
.topnav a:hover {
  color: var(--ink);
  background: var(--bg-soft);
}
.topnav a.active {
  color: var(--indigo);
  background: var(--indigo-soft);
}

/* ===== Container / Layout ===== */
.container {
  max-width: 1280px;
  margin: 36px auto;
  padding: 0 32px 96px 32px;
}

.hero {
  margin-bottom: 36px;
}
.hero h1 {
  font-size: 40px;
  font-weight: 700;
  margin: 0 0 8px 0;
  letter-spacing: -0.025em;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub {
  margin: 0;
  color: var(--ink-mute);
  font-size: 15px;
  letter-spacing: -0.005em;
  max-width: 760px;
}

.section-heading {
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-mute);
  margin: 44px 0 18px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-heading::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--grad-brand);
}
.section-heading::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border) 0%, transparent 100%);
}

/* ===== Flashes ===== */
.flashes { margin-bottom: 20px; display: flex; flex-direction: column; gap: 10px; }
.flash {
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--indigo);
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.flash-info    { border-left-color: var(--indigo);  }
.flash-success { border-left-color: var(--emerald); background: linear-gradient(90deg, var(--emerald-soft) 0%, var(--surface) 60%); }
.flash-warning { border-left-color: var(--amber);   background: linear-gradient(90deg, var(--amber-soft)   0%, var(--surface) 60%); }
.flash-error   { border-left-color: var(--red);     background: linear-gradient(90deg, var(--red-soft)     0%, var(--surface) 60%); }

/* ===== Task Banner ===== */
.task-banner {
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--indigo);
  border-radius: 14px;
  margin-bottom: 28px;
  display: flex;
  gap: 12px;
  align-items: center;
  box-shadow: var(--shadow);
}
.task-banner::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--indigo);
  box-shadow: 0 0 0 4px rgba(252,132,24,0.22);
  animation: pulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulse {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%      { transform: scale(1.4);  opacity: 0.6; }
}
.task-banner.task-error   { border-left-color: var(--red);     background: linear-gradient(90deg, var(--red-soft)     0%, var(--surface) 50%); }
.task-banner.task-error::before   { background: var(--red);     box-shadow: 0 0 0 4px rgba(220,38,38,0.22);  }
.task-banner.task-success { border-left-color: var(--emerald); background: linear-gradient(90deg, var(--emerald-soft) 0%, var(--surface) 50%); }
.task-banner.task-success::before { background: var(--emerald); box-shadow: 0 0 0 4px rgba(16,185,129,0.20); animation: none; }

/* ===== Conversion Funnel ===== */
.funnel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 36px;
}
.funnel-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px 24px 22px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.funnel-card::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 4px;
  background: var(--grad-blue);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}
.funnel-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.funnel-card .funnel-label {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 12px;
  font-weight: 700;
}
.funnel-card .funnel-value {
  font-family: 'Inter', sans-serif;
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -0.03em;
}
.funnel-card .funnel-foot {
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.005em;
}
/* Funnel-stage gradient ribbons + colored numbers */
.funnel-card.stage-mailed::before   { background: var(--grad-blue);    }
.funnel-card.stage-mailed   .funnel-value { background: var(--grad-blue);    -webkit-background-clip: text; background-clip: text; color: transparent; }
.funnel-card.stage-call::before     { background: var(--grad-orange);  }
.funnel-card.stage-call     .funnel-value { background: var(--grad-orange);  -webkit-background-clip: text; background-clip: text; color: transparent; }
.funnel-card.stage-contract::before { background: var(--grad-emerald); }
.funnel-card.stage-contract .funnel-value { background: var(--grad-emerald); -webkit-background-clip: text; background-clip: text; color: transparent; }
.funnel-card.stage-revenue::before  { background: var(--grad-pink);    }
.funnel-card.stage-revenue  .funnel-value { background: var(--grad-pink);    -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 38px; }

/* Mini progress bar inside funnel cards */
.conv-bar {
  height: 6px;
  background: var(--bg-soft);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 14px;
}
.conv-bar > span {
  display: block;
  height: 100%;
  background: var(--grad-blue);
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}
.stage-call     .conv-bar > span { background: var(--grad-orange);  }
.stage-contract .conv-bar > span { background: var(--grad-emerald); }
.stage-revenue  .conv-bar > span { background: var(--grad-pink);    }

/* ===== Stat Strip ===== */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 32px;
}
.stat-strip .stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.18s ease;
}
.stat-strip .stat:hover { box-shadow: var(--shadow); }
.stat-strip .stat-label {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 6px;
  font-weight: 600;
}
.stat-strip .stat-value {
  font-family: 'Inter', sans-serif;
  font-size: 26px;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.stat-strip .stat-foot { font-size: 11.5px; color: var(--ink-dim); margin-top: 4px; }

/* ===== Action Cards ===== */
.action-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 36px;
}
.action-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.18s ease;
}
.action-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-hi);
}
.action-card::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--grad-brand-r);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.action-card:hover::before { opacity: 1; }

.action-card h3 {
  margin: 0 0 8px 0;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.012em;
}
.action-card p {
  margin: 0 0 16px 0;
  font-size: 13px;
  color: var(--ink-mute);
  flex-grow: 1;
  line-height: 1.6;
}
.action-card-send {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--grad-brand) border-box;
}
.action-card-send::before { opacity: 1; background: var(--grad-brand-r); }
.action-card input[type="text"] {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  padding: 11px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink);
  border-radius: 8px;
  margin-bottom: 12px;
  letter-spacing: 0.10em;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.action-card input[type="text"]:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: var(--shadow-glow);
}
.action-card-send .send-date-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 4px 0 6px 0;
}
.action-card input[type="date"] {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink);
  border-radius: 8px;
  margin-bottom: 12px;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.action-card input[type="date"]:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: var(--shadow-glow);
}
.action-card input[type="date"]:disabled {
  background: var(--bg-soft);
  color: var(--ink-dim);
}

/* ===== Buttons ===== */
button, .btn {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  font-weight: 600;
  padding: 11px 22px;
  border: none;
  background: var(--grad-brand);
  color: #fff;
  cursor: pointer;
  border-radius: 10px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  box-shadow: 0 4px 14px rgba(252,132,24,0.35);
}
button:hover, .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(252,132,24,0.45);
}
button:active, .btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(252,132,24,0.35);
}
button:disabled {
  background: var(--bg-soft);
  color: var(--ink-dim);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
button.btn-danger {
  background: linear-gradient(135deg, var(--orange) 0%, var(--pink) 100%);
  box-shadow: 0 4px 14px rgba(252,132,24,0.32);
}
button.btn-danger:hover { box-shadow: 0 6px 20px rgba(252,132,24,0.45); }
button.btn-secondary {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border-hi);
  box-shadow: var(--shadow-sm);
}
button.btn-secondary:hover { background: var(--bg-soft); box-shadow: var(--shadow); }

/* ===== Tables ===== */
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  font-size: 12.5px;
  margin-bottom: 32px;
  box-shadow: var(--shadow-sm);
}
.data-table th, .data-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.data-table th {
  background: var(--bg-soft);
  color: var(--ink-mute);
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 10.5px;
  text-transform: uppercase;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background 0.12s ease; }
.data-table tbody tr:hover td { background: var(--indigo-soft); }
.cell-narrative { font-size: 11.5px; color: var(--ink-mute); max-width: 320px; }

/* ===== Status Pill ===== */
.status {
  display: inline-block;
  font-size: 10.5px;
  padding: 4px 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  font-weight: 700;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-mute);
}
.status-mailed, .status-created           { color: var(--blue);    border-color: rgba(44,93,146,0.25);  background: var(--blue-soft);    }
.status-in-transit, .status-in_transit     { color: var(--orange);  border-color: rgba(249,115,22,0.25);  background: var(--orange-soft);  }
.status-delivered                         { color: var(--emerald); border-color: rgba(16,185,129,0.25);  background: var(--emerald-soft); }
.status-returned, .status-returned-to-sender { color: var(--red);   border-color: rgba(220,38,38,0.25);   background: var(--red-soft);     }
.status-failed, .status-error             { color: var(--red);     border-color: rgba(220,38,38,0.25);   background: var(--red-soft);     }
.status-warning                           { color: var(--amber);   border-color: rgba(245,158,11,0.25);  background: var(--amber-soft);   }
.status-unknown                           { color: var(--ink-mute);                                                                       }

/* Event-type badges */
.event-call     { color: var(--orange);  border-color: rgba(249,115,22,0.25); background: var(--orange-soft);  }
.event-text     { color: var(--blue);    border-color: rgba(44,93,146,0.25); background: var(--blue-soft);    }
.event-email    { color: var(--cyan);    border-color: rgba(6,182,212,0.25);  background: var(--cyan-soft);    }
.event-meeting  { color: var(--purple);  border-color: rgba(36,48,60,0.25); background: var(--purple-soft);  }
.event-contract { color: var(--emerald); border-color: rgba(16,185,129,0.30); background: var(--emerald-soft); }
.event-declined { color: var(--red);     border-color: rgba(220,38,38,0.25);  background: var(--red-soft);     }
.event-no_response { color: var(--ink-mute);                                                                   }
.event-note     { color: var(--ink-mute);                                                                     }

/* ===== Forms ===== */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.form-row.single { grid-template-columns: 1fr; }
.form-field label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 6px;
  font-weight: 700;
}
.form-field input, .form-field select, .form-field textarea {
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 11px 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink);
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-field textarea { font-family: inherit; min-height: 80px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: var(--shadow-glow);
}

/* Inline log-event mini form */
.log-event-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px 28px;
  margin-bottom: 32px;
  box-shadow: var(--shadow);
}
.log-event-card h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

/* ===== Footer ===== */
.footer {
  border-top: 1px solid var(--border);
  padding: 16px 32px;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--surface);
}

/* ===== Empty State ===== */
.empty-state {
  background: var(--surface);
  padding: 56px 32px;
  border: 2px dashed var(--border);
  border-radius: 16px;
  text-align: center;
  color: var(--ink-mute);
  font-size: 14.5px;
}

/* ===== Senior Review Strip ===== */
.review-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.review-pill {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.review-pill:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.review-pill .dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ink-dim);
  flex-shrink: 0;
}
.review-pill strong {
  font-family: 'Inter', sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.review-pill .lbl {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 700;
}
.review-pending  .dot { background: var(--orange);  box-shadow: 0 0 0 4px rgba(252,132,24,0.22);  animation: pulse 1.4s ease-in-out infinite; }
.review-pending  strong { background: var(--grad-orange); -webkit-background-clip: text; background-clip: text; color: transparent; }
.review-approved .dot { background: var(--emerald); box-shadow: 0 0 0 4px rgba(16,185,129,0.20); }
.review-approved strong { background: var(--grad-emerald); -webkit-background-clip: text; background-clip: text; color: transparent; }
.review-rejected .dot { background: var(--red);     box-shadow: 0 0 0 4px rgba(220,38,38,0.22);  }
.review-rejected strong { color: var(--red); }

/* ===== Intake Form ===== */
.intake-form { padding: 28px 30px; }

.intake-section {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0;
  margin-bottom: 14px;
  background: var(--surface-2);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.intake-section:hover { border-color: var(--border-hi); }
.intake-section[open], .intake-section-open {
  background: var(--surface);
  border-color: var(--border-hi);
  box-shadow: var(--shadow-sm);
}
.intake-section-emphasis {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--grad-brand) border-box;
}

.intake-section-title {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
  padding: 16px 20px;
  cursor: pointer;
  display: block;
  list-style: none;
  position: relative;
  user-select: none;
}
.intake-section-title::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--ink-mute);
  font-weight: 400;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center;
}
details[open] .intake-section-title::after { content: "−"; background: var(--indigo-soft); color: var(--indigo); }
.intake-section-open .intake-section-title::after { content: ""; background: transparent; }
.intake-section-title::-webkit-details-marker { display: none; }

.intake-section .form-row,
.intake-section-open .form-row {
  padding: 0 20px;
}
.intake-section .form-row:last-of-type {
  padding-bottom: 18px;
}
.intake-section-open > .form-row:first-of-type { padding-top: 4px; }
.intake-section-open > .form-row:last-of-type  { padding-bottom: 20px; }

/* Radio + checkbox rows */
.radio-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 4px 0;
}
.radio-row label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  transition: all 0.15s ease;
}
.radio-row label:hover { border-color: var(--indigo); background: var(--indigo-soft); }
.radio-row input[type="radio"] { accent-color: var(--indigo); }

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  padding: 4px 0;
}
.checkbox-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.checkbox-grid label:hover { border-color: var(--indigo); background: var(--indigo-soft); }
.checkbox-grid input[type="checkbox"] { accent-color: var(--indigo); }

/* ===== Field hint + case typeahead context ===== */
.field-hint {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ink-dim);
  font-weight: 500;
  margin-left: 6px;
}
.case-context {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.case-context.case-context-ok {
  background: var(--emerald-soft);
  color: var(--ink);
  border: 1px solid rgba(16,185,129,0.30);
}
.case-context.case-context-ok strong {
  color: var(--emerald);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.case-context.case-context-warn {
  background: var(--amber-soft);
  color: var(--ink-2);
  border: 1px solid rgba(217,119,6,0.30);
}

/* ===== Score Badge ===== */
.score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  letter-spacing: -0.02em;
}
.score-hot {
  background: linear-gradient(135deg, var(--pink) 0%, var(--orange) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 20px rgba(252,132,24,0.45);
}
.score-warm {
  background: var(--grad-orange);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 18px rgba(252,132,24,0.32);
}
.score-cold {
  background: var(--surface);
  border-color: var(--blue);
  color: var(--blue);
}

/* Temperature pill */
.temp-hot   { color: var(--pink);    border-color: rgba(252,132,24,0.35);  background: var(--pink-soft);    }
.temp-warm  { color: var(--orange);  border-color: rgba(252,132,24,0.32);  background: var(--orange-soft);  }
.temp-cold  { color: var(--blue);    border-color: rgba(44,93,146,0.25);  background: var(--blue-soft);    }

/* Review status pill */
.review-status.review-pending  { color: var(--orange);  border-color: rgba(252,132,24,0.32);  background: var(--orange-soft);  }
.review-status.review-approved { color: var(--emerald); border-color: rgba(16,185,129,0.30);  background: var(--emerald-soft); }
.review-status.review-rejected { color: var(--red);     border-color: rgba(220,38,38,0.30);   background: var(--red-soft);     }

/* Disposition pill */
.disp-book_consult    { color: var(--blue);    border-color: rgba(44,93,146,0.30);  background: var(--blue-soft);    }
.disp-send_quote      { color: var(--cyan);    border-color: rgba(6,182,212,0.30);   background: var(--cyan-soft);    }
.disp-send_info       { color: var(--ink-mute); }
.disp-followup        { color: var(--orange);  border-color: rgba(252,132,24,0.32);  background: var(--orange-soft);  }
.disp-needs_research  { color: var(--amber);   border-color: rgba(217,119,6,0.30);  background: var(--amber-soft);   }
.disp-not_qualified   { color: var(--red);     border-color: rgba(220,38,38,0.30);   background: var(--red-soft);     }
.disp-contract_signed { color: var(--emerald); border-color: rgba(16,185,129,0.35);  background: var(--emerald-soft); }

/* Approve / Reject inline buttons */
.inline-review { display: flex; gap: 6px; }
.btn-approve, .btn-reject {
  font-size: 10.5px;
  padding: 7px 14px;
  letter-spacing: 0.08em;
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}
.btn-approve { background: var(--grad-emerald); box-shadow: 0 4px 12px rgba(16,185,129,0.30); }
.btn-approve:hover { box-shadow: 0 6px 18px rgba(16,185,129,0.45); }
.btn-reject  { background: linear-gradient(135deg, var(--red) 0%, #fb7185 100%); box-shadow: 0 4px 12px rgba(220,38,38,0.30); }
.btn-reject:hover { box-shadow: 0 6px 18px rgba(239,68,68,0.45); }

/* Highlight pending intakes in the table */
.intake-row.review-pending  td:first-child { box-shadow: inset 3px 0 0 var(--orange);  }
.intake-row.review-approved td:first-child { box-shadow: inset 3px 0 0 var(--emerald); }
.intake-row.review-rejected td:first-child { box-shadow: inset 3px 0 0 var(--red);     opacity: 0.55; }

/* ===== Universal Quick Search (topbar) ===== */
.quick-search {
  flex-grow: 1;
  max-width: 480px;
  margin: 0 24px;
  position: relative;
  display: flex;
  align-items: center;
}
.quick-search input {
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  padding: 10px 38px 10px 38px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink);
  border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.quick-search input::placeholder { color: var(--ink-dim); }
.quick-search input:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: var(--shadow-glow);
}
.quick-search .qs-icon {
  position: absolute;
  left: 12px;
  font-size: 14px;
  color: var(--ink-mute);
  pointer-events: none;
}
.quick-search .qs-kbd {
  position: absolute;
  right: 10px;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--ink-mute);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 7px;
}

.qs-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-height: 380px;
  overflow-y: auto;
  z-index: 90;
}
.qs-item {
  display: grid;
  grid-template-columns: 16px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--ink);
  transition: background 0.12s ease;
}
.qs-item:last-child { border-bottom: none; }
.qs-item:hover, .qs-item.qs-active { background: var(--indigo-soft); }
.qs-mark {
  grid-row: 1 / 3;
  align-self: center;
  text-align: center;
  color: var(--indigo);
  font-size: 12px;
}
.qs-line1 { font-size: 13px; color: var(--ink); }
.qs-line2 { font-size: 11.5px; color: var(--ink-mute); }
.qs-empty { padding: 18px; text-align: center; color: var(--ink-mute); font-size: 13px; }

/* ===== Toast notifications ===== */
.toast-stack {
  position: fixed;
  top: 80px;
  right: 24px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 380px;
  pointer-events: none;
}
.toast {
  pointer-events: all;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--indigo);
  border-radius: 12px;
  padding: 12px 16px 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.28s cubic-bezier(0.16,1,0.3,1), opacity 0.2s ease;
}
.toast.toast-in { transform: translateX(0); opacity: 1; }
.toast.toast-out { transform: translateX(120%); opacity: 0; }
.toast-icon {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--indigo);
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(252,132,24,0.20);
}
.toast-msg { flex-grow: 1; line-height: 1.4; }
.toast-close {
  background: none;
  border: none;
  color: var(--ink-mute);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0 4px;
  border-radius: 4px;
  box-shadow: none;
}
.toast-close:hover { color: var(--ink); background: var(--bg-soft); transform: none; box-shadow: none; }
.toast-info    .toast-icon { background: var(--indigo);  box-shadow: 0 0 0 4px rgba(252,132,24,0.20); }
.toast-info                { border-left-color: var(--indigo);  }
.toast-success .toast-icon { background: var(--emerald); box-shadow: 0 0 0 4px rgba(16,185,129,0.18); }
.toast-success             { border-left-color: var(--emerald); }
.toast-warning .toast-icon { background: var(--amber);   box-shadow: 0 0 0 4px rgba(217,119,6,0.20); }
.toast-warning             { border-left-color: var(--amber);   }
.toast-error   .toast-icon { background: var(--red);     box-shadow: 0 0 0 4px rgba(220,38,38,0.20);  }
.toast-error               { border-left-color: var(--red);     }

/* ===== Charts row ===== */
.charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 36px;
}
.chart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 24px 18px;
  box-shadow: var(--shadow-sm);
  height: 280px;
  display: flex;
  flex-direction: column;
}
.chart-title {
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 14px 0;
  font-weight: 700;
}
.chart-card canvas { flex-grow: 1; max-height: 220px; }

/* ===== Action Items / Overdue widget ===== */
.overdue-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 32px;
}
.overdue-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--orange);
  border-radius: 12px;
  padding: 12px 16px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.overdue-item:hover { transform: translateX(2px); box-shadow: var(--shadow); color: var(--ink); }
.overdue-body { flex-grow: 1; }
.overdue-line1 { font-size: 13.5px; color: var(--ink); }
.overdue-line2 { font-size: 12px; color: var(--ink-mute); margin-top: 2px; }

/* ===== Inline action buttons in table rows ===== */
.col-actions { width: 1%; white-space: nowrap; text-align: right; }
.col-actions form.inline-quick { display: inline-block; }
.btn-tiny {
  font-size: 10.5px;
  padding: 6px 10px;
  letter-spacing: 0.04em;
  border-radius: 6px;
  margin-left: 4px;
}
.btn-tiny-success {
  background: var(--grad-emerald) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 3px 10px rgba(16,185,129,0.25);
}
.case-link {
  color: var(--indigo);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.12s ease;
}
.case-link:hover { color: var(--purple); text-decoration: underline; }

/* ===== Keyword chips ===== */
.kw-chip {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  margin: 1px 3px 1px 0;
  border-radius: 999px;
  background: var(--indigo-soft);
  color: var(--indigo);
  border: 1px solid rgba(252,132,24,0.25);
}

/* ===== Lead Detail Page ===== */
.lead-hero-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.lead-breadcrumb { font-size: 12px; color: var(--ink-mute); margin: 0 0 4px 0; }
.lead-breadcrumb a { color: var(--ink-mute); }
.lead-breadcrumb a:hover { color: var(--indigo); }
.lead-hero-actions { flex-shrink: 0; }

.lead-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.lead-col { display: flex; flex-direction: column; gap: 18px; }
.lead-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
}
.lead-card-title {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 14px 0;
  font-weight: 700;
}
.lead-card-desc { font-size: 13px; color: var(--ink-mute); margin: 0 0 14px 0; }
.lead-card-cta { margin-top: 12px; display: inline-block; }

.lead-kv { display: flex; flex-direction: column; gap: 6px; }
.lead-kv .kv {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px;
  font-size: 13px;
  padding: 4px 0;
}
.lead-kv .k {
  color: var(--ink-mute);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 700;
  align-self: center;
}
.lead-kv .v { color: var(--ink); }

.violation-block { margin-top: 16px; }
.vb-label {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 6px;
  font-weight: 700;
}
.violation-block p {
  font-size: 13px;
  color: var(--ink);
  margin: 0;
  background: var(--bg-soft);
  border-radius: 8px;
  padding: 10px 12px;
  line-height: 1.55;
}

.empty-inline {
  font-size: 13px;
  color: var(--ink-mute);
  background: var(--bg-soft);
  padding: 12px 14px;
  border-radius: 8px;
  margin: 0;
}

/* Intake summary cards (lead detail page) */
.intake-summary {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
  background: var(--surface-2);
}
.intake-summary.review-pending  { border-left: 3px solid var(--orange);  }
.intake-summary.review-approved { border-left: 3px solid var(--emerald); }
.intake-summary.review-rejected { border-left: 3px solid var(--red);     opacity: 0.65; }
.intake-summary-head { display: flex; gap: 12px; align-items: center; }
.intake-summary-meta { flex-grow: 1; }
.intake-summary-meta > div:first-child { display: flex; gap: 6px; flex-wrap: wrap; }
.intake-summary-sub  { font-size: 12px; color: var(--ink-mute); margin-top: 4px; }
.intake-summary-notes { margin-top: 10px; }
.intake-summary-notes p { margin: 0; font-size: 13px; color: var(--ink); background: var(--bg-soft); border-radius: 6px; padding: 8px 10px; }
.intake-summary-next { margin-top: 8px; font-size: 12px; color: var(--ink-mute); }

/* Quick event mini form */
.quick-event-form button { margin-top: 4px; }

/* Timeline */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--border);
  border-radius: 1px;
}
.timeline-item {
  position: relative;
  padding-left: 24px;
  padding-bottom: 16px;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
  position: absolute;
  left: 0;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--indigo);
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--indigo-soft);
}
.timeline-item.event-call     .timeline-dot { background: var(--orange);  box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--orange-soft); }
.timeline-item.event-text     .timeline-dot { background: var(--blue); }
.timeline-item.event-email    .timeline-dot { background: var(--cyan); }
.timeline-item.event-meeting  .timeline-dot { background: var(--purple); }
.timeline-item.event-contract .timeline-dot { background: var(--emerald); box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--emerald-soft); }
.timeline-item.event-declined .timeline-dot { background: var(--red); }
.timeline-item.event-no_response .timeline-dot,
.timeline-item.event-note     .timeline-dot { background: var(--ink-dim); }

.timeline-head {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.timeline-date { font-size: 11.5px; color: var(--ink-mute); }
.timeline-contact { font-size: 12px; color: var(--ink-mute); margin-bottom: 4px; }
.timeline-notes { margin: 4px 0 0 0; font-size: 13px; color: var(--ink); background: var(--bg-soft); padding: 8px 10px; border-radius: 6px; }

/* ===== Responsive overrides for new components ===== */
@media (max-width: 1024px) {
  .charts-row, .lead-grid { grid-template-columns: 1fr; }
  .quick-search { max-width: 100%; margin: 0; }
  .lead-hero-row { flex-direction: column; align-items: flex-start; }
}

/* ===== Login Screen ===== */
.login-body {
  background: var(--bg);
  background-image:
    radial-gradient(at 50%   0%, rgba(252,132,24,0.18) 0px, transparent 45%),
    radial-gradient(at 50% 100%, rgba(36,48,60,0.10)   0px, transparent 50%);
  background-attachment: fixed;
  min-height: 100vh;
}
.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 36px 32px 28px;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.login-card::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--grad-brand-r);
}
.login-logo {
  display: block;
  height: 80px;
  margin: 0 auto 14px;
}
.login-brand {
  text-align: center;
  font-size: 16px;
  letter-spacing: 0.20em;
  font-weight: 700;
  color: var(--brand-navy);
}
.login-sub {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--brand-orange);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 26px;
}
.login-flashes { margin-bottom: 16px; display: flex; flex-direction: column; gap: 8px; }
.login-form .form-field { margin-bottom: 14px; }
.login-form input {
  width: 100%;
  padding: 12px 14px;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.login-form input:focus {
  outline: none;
  border-color: var(--brand-orange);
  box-shadow: var(--shadow-glow);
}
.login-btn {
  width: 100%;
  padding: 13px 18px;
  font-size: 13px;
  letter-spacing: 0.10em;
  margin-top: 6px;
}
.login-foot {
  text-align: center;
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-top: 22px;
}

/* ===== Topbar user pill ===== */
.topbar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 18px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}
.tu-name {
  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--brand-navy);
}
.tu-logout {
  font-size: 14px;
  color: var(--ink-mute);
  text-decoration: none;
  line-height: 1;
  padding: 0 4px;
  transform: scaleX(-1);
  display: inline-block;
}
.tu-logout:hover { color: var(--brand-orange); }

/* ===== Upload form ===== */
.upload-form input[type="file"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px dashed var(--border-hi);
  border-radius: 10px;
  background: var(--bg-soft);
  font-size: 13px;
  cursor: pointer;
}
.upload-form input[type="file"]:hover { border-color: var(--brand-orange); }

/* ===== Lob-not-configured notice on the Mail card ===== */
.lob-blocker {
  background: var(--brand-orange-soft);
  border: 1px solid rgba(252,132,24,0.32);
  border-left: 3px solid var(--brand-orange);
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--ink-2);
  margin: 0 0 14px 0;
  line-height: 1.55;
}
.lob-blocker strong { color: var(--brand-orange); display: inline-block; margin-right: 4px; }
.lob-blocker a { font-weight: 600; }

/* ===== Transmission Banner: "TRANSMITTING LETTERS" ===== */
.transmit-banner {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 26px;
  align-items: center;
  background:
    linear-gradient(135deg, rgba(252,132,24,0.10) 0%, rgba(36,48,60,0.06) 60%, rgba(252,132,24,0.04) 100%),
    var(--surface);
  border: 1px solid var(--brand-orange);
  border-radius: 18px;
  padding: 22px 28px;
  margin-bottom: 32px;
  box-shadow: 0 12px 36px rgba(252,132,24,0.15), var(--shadow-lg);
  overflow: hidden;
}
.transmit-banner::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--grad-brand-r);
  animation: transmit-bar-flow 2.4s linear infinite;
  background-size: 200% 100%;
}
@keyframes transmit-bar-flow {
  0%   { background-position: 0%   0%; }
  100% { background-position: 200% 0%; }
}

/* The big concentric pulsing beacon on the left */
.transmit-beacon {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}
.transmit-beacon .core {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--brand-orange);
  box-shadow: 0 0 18px rgba(252,132,24,0.65);
  animation: beacon-core 1.4s ease-in-out infinite;
}
@keyframes beacon-core {
  0%, 100% { transform: translate(-50%,-50%) scale(1);   box-shadow: 0 0 14px rgba(252,132,24,0.55); }
  50%      { transform: translate(-50%,-50%) scale(1.15); box-shadow: 0 0 26px rgba(252,132,24,0.85); }
}
.transmit-beacon .ring {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0.4);
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 2px solid var(--brand-orange);
  opacity: 0;
  animation: beacon-ring 2.2s cubic-bezier(0,0.6,0.4,1) infinite;
}
.transmit-beacon .ring.r1 { animation-delay: 0s;    }
.transmit-beacon .ring.r2 { animation-delay: 0.55s; }
.transmit-beacon .ring.r3 { animation-delay: 1.1s;  }
@keyframes beacon-ring {
  0%   { transform: translate(-50%,-50%) scale(0.35); opacity: 0.85; border-color: var(--brand-orange); }
  60%  { opacity: 0.4;  border-color: var(--brand-orange-2); }
  100% { transform: translate(-50%,-50%) scale(1.6);  opacity: 0;    border-color: var(--brand-navy);   }
}

.transmit-text { min-width: 0; }
.transmit-title {
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--brand-orange);
  margin-bottom: 4px;
}
.transmit-sub {
  font-size: 13px;
  color: var(--ink-mute);
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.transmit-bar {
  height: 6px;
  background: var(--bg-soft);
  border-radius: 999px;
  overflow: hidden;
}
.transmit-bar > span {
  display: block;
  height: 100%;
  background: var(--grad-orange);
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 0 12px rgba(252,132,24,0.55);
}

.transmit-counter {
  flex-shrink: 0;
  text-align: right;
}
.tc-num {
  font-family: 'Inter', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--brand-navy);
  letter-spacing: -0.02em;
  line-height: 1;
}
.tc-num .tc-slash { color: var(--ink-dim); margin: 0 2px; font-weight: 500; }
.tc-num #tc-done  { background: var(--grad-orange); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tc-label {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 700;
  margin-top: 4px;
}

/* ===== In-button beacon (on the Mail Today's Letters button) ===== */
.btn-beacon {
  display: inline-block;
  position: relative;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  vertical-align: middle;
}
.btn-beacon .core {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: beacon-core 1.0s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(255,255,255,0.85);
}
.btn-beacon .ring {
  position: absolute;
  left: 50%; top: 50%;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.8);
  transform: translate(-50%, -50%) scale(0.4);
  opacity: 0;
  animation: btn-beacon-ring 1.4s cubic-bezier(0,0.6,0.4,1) infinite;
}
.btn-beacon .ring.r1 { animation-delay: 0s;    }
.btn-beacon .ring.r2 { animation-delay: 0.45s; }
@keyframes btn-beacon-ring {
  0%   { transform: translate(-50%,-50%) scale(0.35); opacity: 0.85; }
  100% { transform: translate(-50%,-50%) scale(1.5);  opacity: 0;    }
}
.btn-transmitting {
  background: var(--grad-orange) !important;
  box-shadow: 0 0 0 4px rgba(252,132,24,0.20), 0 6px 22px rgba(252,132,24,0.45) !important;
  cursor: progress !important;
  letter-spacing: 0.16em !important;
}

/* Lead-source radio styling tweak so it stands out at the top of the form */
.lead-source-radio { padding: 4px 0 6px; }
.lead-source-radio label {
  background: var(--surface);
  border: 1px solid var(--border);
  font-weight: 500;
}
.lead-source-radio input[type="radio"]:checked + ::before { /* keeps native */ }
.lead-source-radio label:has(input:checked) {
  border-color: var(--brand-orange);
  background: var(--brand-orange-soft);
  color: var(--brand-orange);
}

/* ===== Animated count-up entry ===== */
.count-up { opacity: 0; transform: translateY(8px); animation: rise 0.6s cubic-bezier(0.16,1,0.3,1) forwards; }
.count-up.delay-1 { animation-delay: 0.05s; }
.count-up.delay-2 { animation-delay: 0.12s; }
.count-up.delay-3 { animation-delay: 0.19s; }
.count-up.delay-4 { animation-delay: 0.26s; }
@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .funnel       { grid-template-columns: repeat(2, 1fr); }
  .stat-strip   { grid-template-columns: repeat(2, 1fr); }
  .action-grid  { grid-template-columns: 1fr; }
  .review-strip { grid-template-columns: 1fr; }
  .topbar       { flex-direction: column; gap: 12px; align-items: flex-start; }
  .topnav       { flex-wrap: wrap; }
  .form-row     { grid-template-columns: 1fr; }
}