/* ============================================================
   VARONIS INTEL — Redesign 2026
   Design system: density-first, Bloomberg-inspired, flight-checklist UX
   Brand: Electric Blue #0077FF · Cyber Green #8BE000 · Rich Black #010203
   ============================================================ */

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

:root {
  --v-blue:        #0077FF;
  --v-blue-dark:   #005FCC;
  --v-blue-dim:    rgba(0,119,255,0.12);
  --v-blue-edge:   rgba(0,119,255,0.08);
  --v-green:       #8BE000;
  --v-green-dim:   rgba(139,224,0,0.12);
  --v-black:       #010203;
  --v-white:       #FFFFFF;
  --v-red:         #FF4444;
  --v-red-dim:     rgba(255,68,68,0.12);
  --v-amber:       #F5A623;
  --v-amber-dim:   rgba(245,166,35,0.12);

  /* Surfaces */
  --s0: #010203;
  --s1: #080C10;
  --s2: #0D1320;
  --s3: #131B28;
  --s4: #1A2233;
  --s5: #212C3D;

  /* Text */
  --t1: #FFFFFF;
  --t2: rgba(255,255,255,0.72);
  --t3: rgba(255,255,255,0.45);
  --t4: rgba(255,255,255,0.22);

  /* Rules */
  --r1: rgba(255,255,255,0.08);
  --r2: rgba(255,255,255,0.04);
  --rb: rgba(0,119,255,0.18);

  --font: 'Inter', -apple-system, sans-serif;
  --radius: 5px;
  --radius-lg: 10px;

  /* ── Container width ──
     The outer page chrome (masthead, intake area, brief shell) is capped
     at this width. Internal prose-heavy sections (talking points, opener
     copy, what-to-know list) are bounded *separately* via max-width on the
     specific sections so they stay readable (~75ch).
     Default 1440px works well 1080p–1440p. Bumped progressively for
     ultrawide (3440×1440) and 4K so the layout actually uses the screen
     instead of leaving 2000px of grey. */
  --container-max: 1440px;
}

/* Scale the chrome up on widescreen and ultrawide displays. The two
   variables that change with viewport: --container-max (how wide the layout
   goes) and the html base font-size (how big text is). Internal prose
   sections stay bounded so reading line-length doesn't degrade. */
@media (min-width: 1700px) {
  :root { --container-max: 1640px; }
  html { font-size: 17px; }
}
@media (min-width: 2100px) {
  :root { --container-max: 1880px; }
  html { font-size: 18px; }
}
@media (min-width: 2800px) {
  :root { --container-max: 2200px; }
  html { font-size: 19px; }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body { background: var(--s0); color: var(--t1); font-family: var(--font); line-height: 1.5; min-height: 100vh; }
a { color: var(--v-blue); text-decoration: none; }
a:hover { color: #3396FF; }

/* ── LOCK SCREEN ── */
.lock-screen { position:fixed; inset:0; z-index:9999; background:var(--v-black); display:flex; align-items:center; justify-content:center; }
.lock-bg { position:absolute; inset:0; background:radial-gradient(ellipse 60% 50% at 50% 0%, rgba(0,119,255,0.10) 0%, transparent 70%); pointer-events:none; }
.lock-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(0,119,255,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,119,255,0.04) 1px,transparent 1px); background-size:60px 60px; pointer-events:none; }
.lock-card { position:relative; z-index:1; background:var(--s2); border:1px solid var(--rb); border-radius:var(--radius-lg); padding:48px 40px; width:100%; max-width:400px; text-align:center; box-shadow:0 24px 80px rgba(0,0,0,0.6); }
.lock-badge { margin-bottom:24px; }
.lock-portal-name { font-size:10px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--v-blue); margin-top:10px; display:block; }
.lock-title { font-size:24px; font-weight:800; letter-spacing:-0.02em; margin-bottom:6px; }
.lock-sub { font-size:13px; color:var(--t3); margin-bottom:28px; }
.lock-input { width:100%; background:var(--s4); border:1px solid var(--r1); border-radius:var(--radius); padding:12px 16px; color:var(--t1); font-family:var(--font); font-size:15px; outline:none; text-align:center; letter-spacing:0.1em; margin-bottom:12px; transition:border-color 0.15s,box-shadow 0.15s; }
.lock-input:focus { border-color:var(--v-blue); box-shadow:0 0 0 3px var(--v-blue-dim); }
.lock-input.error { border-color:var(--v-red); box-shadow:0 0 0 3px var(--v-red-dim); }
.lock-input::placeholder { color:var(--t4); letter-spacing:0; }
.lock-btn { width:100%; background:var(--v-blue); border:none; border-radius:var(--radius); padding:13px; color:#fff; font-family:var(--font); font-size:14px; font-weight:700; cursor:pointer; transition:background 0.15s,transform 0.1s; }
.lock-btn:hover { background:var(--v-blue-dark); transform:translateY(-1px); }
.lock-error { display:none; color:var(--v-red); font-size:12px; margin-top:10px; padding:8px 12px; background:var(--v-red-dim); border-radius:var(--radius); border:1px solid rgba(255,68,68,0.2); }
.lock-error.show { display:block; }
.lock-footer { font-size:10px; color:var(--t4); margin-top:20px; }
@keyframes lockShake { 0%,100%{transform:translateX(0)} 15%{transform:translateX(-8px)} 30%{transform:translateX(8px)} 45%{transform:translateX(-5px)} 60%{transform:translateX(5px)} 75%{transform:translateX(-3px)} 90%{transform:translateX(3px)} }

/* ── MASTHEAD ── */
.masthead { background:var(--v-black); border-bottom:1px solid var(--r1); position:sticky; top:0; z-index:100; height:56px; }
.masthead-inner { max-width: var(--container-max); margin:0 auto; padding:0 24px; height:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.v-logo-wrap { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.v-logo-div { width:1px; height:20px; background:var(--r1); }
.v-portal-tag { font-size:10px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--v-blue); }
.v-nav { display:flex; align-items:center; gap:3px; }
.v-nav-btn { font-family:var(--font); font-size:12px; font-weight:600; color:var(--t3); background:transparent; border:1px solid transparent; border-radius:var(--radius); padding:5px 12px; cursor:pointer; transition:all 0.15s; }
.v-nav-btn:hover { color:var(--t1); border-color:var(--r1); }
.v-nav-btn.active { color:var(--v-blue); background:var(--v-blue-edge); border-color:var(--rb); }
.v-live-badge { display:flex; align-items:center; gap:6px; font-size:10px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--v-green); background:var(--v-green-dim); border:1px solid rgba(139,224,0,0.2); padding:4px 10px; border-radius:20px; }
.v-live-dot { width:6px; height:6px; border-radius:50%; background:var(--v-green); animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* ── TICKER BAND ── */
.adv-ticker-wrap { background:var(--v-black); border-bottom:1px solid var(--r1); display:flex; flex-direction:column; padding:6px 0 0; }
.adv-ticker-label { font-size:8px; font-weight:800; letter-spacing:0.22em; text-transform:uppercase; color:var(--v-green); padding:0 0 5px 24px; }
.adv-ticker-scroll { overflow:hidden; width:100%; border-top:1px solid var(--r1); padding:6px 0; }
.adv-ticker-track { display:flex; align-items:center; white-space:nowrap; flex-shrink:0; animation:tickerScroll 32s linear infinite; }
.adv-ticker-wrap:hover .adv-ticker-track { animation-play-state:paused; }
@keyframes tickerScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.adv-ticker-item { font-family:var(--font); font-size:11px; color:var(--t2); padding:0 40px 0 0; display:inline-flex; align-items:center; gap:7px; flex-shrink:0; }
.adv-ticker-item strong { color:var(--t1); font-weight:700; }
.adv-ticker-dot { width:5px; height:5px; border-radius:50%; background:var(--v-green); flex-shrink:0; }

/* ── INTAKE FORM ── */
.intake-page { min-height: calc(100vh - 56px); display:flex; flex-direction:column; }
.intake-hero { background:var(--v-black); padding:48px 0 40px; border-bottom:1px solid var(--r1); position:relative; overflow:hidden; flex-shrink:0; }
.intake-hero-glow { position:absolute; top:-80px; left:50%; transform:translateX(-50%); width:700px; height:300px; background:radial-gradient(ellipse,rgba(0,119,255,0.1) 0%,transparent 65%); pointer-events:none; }
.intake-hero-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(0,119,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,119,255,0.03) 1px,transparent 1px); background-size:48px 48px; pointer-events:none; }
.intake-inner { max-width: var(--container-max); margin:0 auto; padding:0 24px; position:relative; z-index:1; }
.intake-eyebrow { font-size:10px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--v-blue); display:flex; align-items:center; gap:7px; margin-bottom:14px; }
.intake-title { font-size:36px; font-weight:800; letter-spacing:-0.03em; line-height:1.08; margin-bottom:10px; }
.intake-title .accent { color:var(--v-blue); }
.intake-sub { font-size:14px; color:var(--t3); max-width:520px; line-height:1.6; }

.intake-body { flex:1; padding:32px 0 48px; }
.intake-grid { max-width: var(--container-max); margin:0 auto; padding:0 24px; display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }

.intake-card { background:var(--s2); border:1px solid var(--r1); border-radius:var(--radius-lg); padding:28px; }
.intake-card-title { font-size:11px; font-weight:800; letter-spacing:0.18em; text-transform:uppercase; color:var(--t3); margin-bottom:20px; padding-bottom:12px; border-bottom:1px solid var(--r1); display:flex; align-items:center; justify-content:space-between; }
.intake-field { margin-bottom:18px; }
.intake-label { font-size:12px; font-weight:700; color:var(--t2); margin-bottom:7px; display:flex; align-items:center; gap:6px; }
.intake-label-opt { font-size:9px; font-weight:500; color:var(--t4); background:var(--s4); border-radius:10px; padding:2px 7px; }
.intake-input { width:100%; background:var(--s1); border:1px solid var(--r1); border-radius:var(--radius); padding:10px 14px; color:var(--t1); font-family:var(--font); font-size:14px; outline:none; transition:border-color 0.15s,box-shadow 0.15s; }
.intake-input:focus { border-color:var(--v-blue); box-shadow:0 0 0 3px var(--v-blue-dim); }
.intake-input::placeholder { color:var(--t4); }
.intake-textarea { width:100%; background:var(--s1); border:1px solid var(--r1); border-radius:var(--radius); padding:10px 14px; color:var(--t1); font-family:var(--font); font-size:14px; outline:none; resize:vertical; min-height:80px; transition:border-color 0.15s,box-shadow 0.15s; }
.intake-textarea:focus { border-color:var(--v-blue); box-shadow:0 0 0 3px var(--v-blue-dim); }
.intake-textarea::placeholder { color:var(--t4); }

/* ════════════════════════════════════════════════════
   COMPACT HERO — shown to returning reps instead of the big hero.
   ════════════════════════════════════════════════════ */
.intake-hero-compact {
  background: var(--v-black);
  border-bottom: 1px solid var(--r1);
  padding: 14px 24px;
  flex-shrink: 0;
}
.intake-hero-compact .intake-eyebrow {
  margin-bottom: 0;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
}

/* ════════════════════════════════════════════════════
   STRUCTURED INTAKE FORM — replaces the NL input + advanced panel.
   Single tight row of fields, with optional context underneath.
   ════════════════════════════════════════════════════ */
.intake-form-card {
  max-width: var(--container-max);
  margin: 16px auto 0;
  padding: 0 24px;
}
.intake-form-row {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1fr 1fr auto;
  gap: 12px;
  align-items: end;
  background: var(--s2);
  border: 1px solid var(--r1);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  position: relative;
}
.intake-form-field {
  display: flex; flex-direction: column;
  min-width: 0;
}
.intake-form-field-account { position: relative; }
.intake-form-field-go { align-self: end; }

.intake-form-label {
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--t3);
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.intake-form-icon { font-size: 12px; }
.intake-form-req {
  background: var(--v-amber-dim, rgba(247,181,79,0.12));
  color: var(--v-amber, #BA7517);
  font-size: 9px; font-weight: 700;
  padding: 2px 7px; border-radius: 10px;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.intake-form-opt {
  font-size: 9px; font-weight: 500;
  color: var(--t4);
  background: var(--s4);
  padding: 2px 7px; border-radius: 10px;
  letter-spacing: 0.04em; text-transform: lowercase;
}

.intake-form-input,
.intake-form-select {
  width: 100%;
  background: var(--s1);
  border: 1px solid var(--rb);
  border-radius: var(--radius);
  padding: 10px 12px;
  color: var(--t1);
  font-family: var(--font);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
  height: 38px;
}
.intake-form-input:focus,
.intake-form-select:focus {
  border-color: var(--v-blue);
  box-shadow: 0 0 0 2px var(--v-blue-dim);
}
.intake-form-input::placeholder { color: var(--t4); }
.intake-form-select { cursor: pointer; }

.go-btn-primary {
  height: 38px;
  padding: 0 18px;
  font-weight: 700;
  white-space: nowrap;
  /* Reset rules inherited from base .go-btn that misalign in the grid cell */
  margin-top: 0;
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.005em;
}

/* Optional context field — full width, lighter visual treatment */
.intake-context-row {
  background: var(--s2);
  border: 1px solid var(--r1);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: 12px 18px 14px;
  margin-top: -1px;
  display: flex; flex-direction: column;
}
.intake-context-row .intake-form-label {
  margin-bottom: 6px;
}

/* Recents row */
.intake-recents-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 4px 0;
  flex-wrap: wrap;
}
.intake-recents-label {
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--t4);
  flex-shrink: 0;
}
.intake-recents-list {
  display: flex; gap: 6px; flex-wrap: wrap;
  flex: 1; min-width: 0;
}
.intake-recents-clear {
  background: transparent; border: none;
  color: var(--t4); font-family: var(--font);
  font-size: 11px; cursor: pointer;
  padding: 4px 8px;
}
.intake-recents-clear:hover { color: var(--t2); }

/* ── Calendar integration coming-soon placeholder ──
   Non-interactive card that telegraphs the next feature shipping. The
   "Coming soon" pill is the visual anchor — it leaves no ambiguity that
   this is forthcoming, not broken. Sits below the recents row so it's
   contextual but doesn't compete with the primary action (typing a
   company name into the form above). */
.intake-cal-coming {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--s2);
  border: 1px dashed var(--r1);
  border-radius: var(--radius);
  /* Slightly muted relative to the form above. The dashed border subtly
     signals "future" without being shouty. */
  opacity: 0.85;
  transition: opacity 0.2s;
}
.intake-cal-coming:hover {
  opacity: 1;
}
.intake-cal-coming-icon {
  font-size: 22px;
  line-height: 1.3;
  flex-shrink: 0;
  /* Slight vertical offset so the icon centres against the headline rather
     than sitting at the top of the card */
  margin-top: 1px;
}
.intake-cal-coming-text {
  flex: 1;
  min-width: 0;
}
.intake-cal-coming-head {
  font-size: 13px;
  font-weight: 700;
  color: var(--t2);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.intake-cal-coming-pill {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v-blue);
  background: var(--v-blue-dim, rgba(0, 122, 255, 0.08));
  padding: 2px 8px;
  border-radius: 10px;
  /* Lock the pill width so it doesn't get squeezed at narrow viewports */
  flex-shrink: 0;
}
.intake-cal-coming-sub {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--t3);
}

@media (max-width: 768px) {
  .intake-cal-coming {
    margin-top: 12px;
    padding: 12px 14px;
    gap: 10px;
  }
  .intake-cal-coming-icon { font-size: 20px; }
  .intake-cal-coming-sub { font-size: 11px; }
}

@media (max-width: 1100px) {
  .intake-form-row {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .intake-form-field-obj { grid-column: 1 / 2; }
  .intake-form-field-go  { grid-column: 2 / 4; }
}
@media (max-width: 768px) {
  .intake-form-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .intake-form-field-obj,
  .intake-form-field-go { grid-column: 1; }
  .go-btn-primary { width: 100%; }
}

/* ════════════════════════════════════════════════════
   COMPANY PICKER DROPDOWN
   ════════════════════════════════════════════════════ */
.company-picker { position: relative; }
.company-picker-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--s1);
  border: 1px solid var(--rb);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  z-index: 100;
  max-height: 360px;
  overflow-y: auto;
  padding: 4px 0;
}
.cp-section-label {
  font-size: 9px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--t4);
  padding: 8px 14px 4px;
}
.cp-section-label:not(:first-child) {
  border-top: 1px solid var(--r1);
  margin-top: 4px;
  padding-top: 10px;
}
.cp-item {
  padding: 8px 14px;
  cursor: pointer;
  transition: background-color 0.1s;
  display: flex; flex-direction: column;
}
.cp-item:hover,
.cp-item-active {
  background: var(--v-blue-dim);
}
.cp-item-name {
  font-size: 13px; font-weight: 600;
  color: var(--t1);
}
.cp-item-name strong {
  color: var(--v-blue);
  font-weight: 800;
}
.cp-item-sub {
  font-size: 11px; color: var(--t4);
  margin-top: 1px;
}
.cp-item-recent .cp-item-name::before {
  content: '↻ ';
  color: var(--v-blue);
  margin-right: 4px;
  font-size: 11px;
}
.cp-item-freetext .cp-item-name::before {
  content: '+ ';
  color: var(--t3);
  font-weight: 700;
}
.cp-empty {
  padding: 14px;
  font-size: 12px;
  color: var(--t4);
  font-style: italic;
  text-align: center;
}

/* Competitor grid */
.comp-pick-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.comp-pick-btn { background:var(--s1); border:1px solid var(--r1); border-radius:var(--radius); padding:8px 10px; cursor:pointer; transition:all 0.15s; text-align:left; }
.comp-pick-btn:hover { border-color:var(--v-blue); background:var(--v-blue-edge); }
.comp-pick-btn.active { border-color:var(--v-blue); background:var(--v-blue-dim); box-shadow:0 0 0 1px var(--v-blue); }
.comp-pick-name { font-family:var(--font); font-size:12px; font-weight:700; color:var(--t1); }
.comp-pick-type { font-family:var(--font); font-size:9px; color:var(--t3); margin-top:2px; }

/* Objective radios */
.obj-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:12px; }
.obj-btn { background:var(--s1); border:1px solid var(--r1); border-radius:var(--radius); padding:9px 12px; cursor:pointer; text-align:left; transition:all 0.15s; font-family:var(--font); }
.obj-btn:hover { border-color:var(--v-blue); }
.obj-btn.active { border-color:var(--v-green); background:var(--v-green-dim); box-shadow:0 0 0 1px var(--v-green); }
.obj-btn-label { font-size:12px; font-weight:700; color:var(--t1); }
.obj-btn-sub { font-size:10px; color:var(--t3); margin-top:2px; }

/* CRM integration button */
.crm-row { display:flex; gap:8px; margin-top:4px; }
.crm-btn { flex:1; background:var(--s3); border:1px dashed var(--r1); border-radius:var(--radius); padding:10px 12px; cursor:pointer; transition:all 0.15s; text-align:center; font-family:var(--font); opacity:0.7; }
.crm-btn:hover { opacity:1; border-color:var(--t3); }
.crm-btn-label { font-size:11px; font-weight:700; color:var(--t2); }
.crm-btn-sub { font-size:9px; color:var(--t4); margin-top:2px; }
.crm-badge { font-size:8px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--v-amber); background:var(--v-amber-dim); border:1px solid rgba(245,166,35,0.2); padding:1px 6px; border-radius:3px; margin-left:5px; }

/* Go button */
.go-btn { width:100%; background:var(--v-blue); border:none; border-radius:var(--radius); padding:14px; color:#fff; font-family:var(--font); font-size:15px; font-weight:800; cursor:pointer; transition:background 0.15s,transform 0.1s; letter-spacing:-0.01em; margin-top:16px; }
.go-btn:hover { background:var(--v-blue-dark); transform:translateY(-1px); }

/* ── PROGRESS SCREEN ── */
.progress-page { min-height:calc(100vh - 56px); display:flex; align-items:center; justify-content:center; padding:40px 24px; }
.progress-card { background:var(--s2); border:1px solid var(--r1); border-radius:var(--radius-lg); padding:36px 40px; width:100%; max-width:560px; }
.progress-header { display:flex; align-items:center; gap:16px; margin-bottom:28px; }
.progress-spinner { width:32px; height:32px; border-radius:50%; flex-shrink:0; border:2px solid var(--v-blue-edge); border-top-color:var(--v-blue); animation:spin 0.75s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.progress-title { font-size:17px; font-weight:700; color:var(--t1); margin-bottom:3px; }
.progress-subtitle { font-size:13px; color:var(--t3); }
.progress-steps { display:flex; flex-direction:column; gap:10px; }
.progress-step { display:flex; align-items:center; gap:12px; background:var(--s3); border:1px solid var(--r1); border-radius:var(--radius); padding:11px 14px; }
.ps-icon { font-size:15px; flex-shrink:0; }
.ps-label { flex:1; font-size:13px; color:var(--t2); }
.ps-status { font-size:13px; flex-shrink:0; }

/* ── BRIEF OUTPUT ── */
.brief-page { min-height:calc(100vh - 56px); padding-bottom:80px; }

/* Top strip */
.brief-strip { background:var(--s1); border-bottom:1px solid var(--r1); padding:0 24px; position:sticky; top:56px; z-index:90; }
.brief-strip-inner { max-width: var(--container-max); margin:0 auto; height:52px; display:flex; align-items:center; gap:16px; justify-content:space-between; }
.brief-strip-left { display:flex; align-items:center; gap:12px; min-width:0; overflow:hidden; }
.brief-co-name { font-size:16px; font-weight:800; color:var(--t1); letter-spacing:-0.02em; white-space:nowrap; }
.brief-strip-sep { color:var(--t4); }
.brief-co-meta { font-size:12px; color:var(--t3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brief-obj-pill { font-size:11px; font-weight:700; color:var(--v-green); background:var(--v-green-dim); border:1px solid rgba(139,224,0,0.2); padding:3px 10px; border-radius:20px; white-space:nowrap; flex-shrink:0; }
.brief-strip-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.brief-action-btn { font-family:var(--font); font-size:12px; font-weight:600; padding:5px 14px; border-radius:var(--radius); cursor:pointer; transition:all 0.15s; border:1px solid var(--r1); background:transparent; color:var(--t3); }
.brief-action-btn:hover { color:var(--t1); border-color:var(--t3); }
.brief-action-btn.primary { background:var(--v-blue); border-color:var(--v-blue); color:#fff; }
.brief-action-btn.primary:hover { background:var(--v-blue-dark); }

/* Cheat sheet print card */
.cheat-panel { background:var(--s2); border:1px solid var(--rb); border-radius:var(--radius-lg); padding:20px 24px; margin:16px 24px; max-width: var(--container-max); margin-left:auto; margin-right:auto; display:none; }
.cheat-panel.show { display:block; }
.cheat-title { font-size:10px; font-weight:800; letter-spacing:0.18em; text-transform:uppercase; color:var(--v-blue); margin-bottom:12px; }
.cheat-items { display:flex; flex-direction:column; gap:6px; }
.cheat-item { font-size:13px; color:var(--t2); padding:6px 0; border-bottom:1px solid var(--r2); display:flex; gap:10px; }
.cheat-bullet { color:var(--v-green); font-weight:800; flex-shrink:0; }

/* Brief content wrapper */
.brief-content { max-width: var(--container-max); margin:0 auto; padding:20px 24px 0; }

/* ── SKIM MODE ──
   Toggled via the "Skim" button in the action strip. Hides everything
   marked with .fivemin-skim-hide so a rep walking into a meeting with
   30 seconds of attention sees only header + breach strip + opener.
   The wrappers we hide:
     - "What else to know" list (full triggers list)
     - "More to say if conversation moves" details
     - "Background context" loading-facts details
   What stays visible:
     - Person header (name, role, account)
     - Empty-state banner (if shown)
     - Cares-about / recent-posts panel
     - Account context line
     - Past-breach strip (or "No public breach" clean variant)
     - Suggested opener(s) — including the recommended chip
   The state is intentionally NOT persisted across briefs — every new
   brief opens in full mode. Reps who want skim toggle into it. */
.brief-content.skim-mode .fivemin-skim-hide {
  display: none !important;
}
/* When skim is active, also tighten the bottom of the brief slightly so
   the layout doesn't feel orphaned with so much content removed. */
.brief-content.skim-mode .fivemin-card {
  padding-bottom: 18px;
}

/* Skim button — uses a slightly different visual when active so reps can
   see at a glance which mode they're in. */
.brief-skim-btn { /* base styling inherited from brief-action-btn */ }

/* ── WHY NOW SECTION ── */
.section-head { font-size:9px; font-weight:800; letter-spacing:0.2em; text-transform:uppercase; color:var(--t3); margin-bottom:10px; display:flex; align-items:center; gap:10px; }
.section-head::after { content:''; flex:1; height:1px; background:var(--r1); }

.triggers-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px; margin-bottom:16px; }
.trigger-card { background:var(--s2); border:1px solid var(--r1); border-radius:var(--radius); padding:14px 16px; }
.trigger-card-head { display:flex; align-items:flex-start; gap:8px; margin-bottom:6px; }
.trigger-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:4px; }
.dot-hot   { background:#FF6B6B; box-shadow:0 0 6px rgba(255,107,107,0.5); }
.dot-warm  { background:var(--v-amber); }
.dot-cool  { background:var(--t4); }
.trigger-headline { font-size:13px; font-weight:700; color:var(--t1); line-height:1.3; flex:1; }
.trigger-sowhat { font-size:12px; color:var(--v-green); line-height:1.5; margin-bottom:8px; font-weight:600; }
.trigger-meta { display:flex; align-items:center; justify-content:space-between; }
.trigger-date { font-size:10px; color:var(--t4); }
.trigger-source { font-size:10px; color:var(--v-blue); }

/* ── TWO-COLUMN GRID ── */
.brief-cols { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.brief-cols-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.brief-cols-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-bottom:12px; }

/* ══════════════════════════════════════════════════
   SDR RESEARCH MODE
   Phone-first layout: each contact gets a card with the
   phone script as the prominent block and the email below.
   When multiple contacts are returned, cards stack in a grid
   so reps can scan side-by-side on desktop.
   ══════════════════════════════════════════════════ */
.sdr-summary-card { /* shares all .fivemin-card styles */ }

.sdr-outreach-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (min-width: 1100px) {
  .sdr-outreach-grid:has(> :nth-child(2)) {
    /* If 2+ contacts, show in 2-col grid on desktop */
    grid-template-columns: 1fr 1fr;
  }
}

.sdr-outreach-card {
  background: var(--s2);
  border: 1px solid var(--r1);
  border-radius: var(--radius);
  padding: 16px;
  display: flex; flex-direction: column;
  gap: 12px;
}
.sdr-outreach-head { display:flex; flex-direction:column; gap:3px; padding-bottom: 8px; border-bottom: 1px solid var(--r1); }
.sdr-outreach-name { font-size: 15px; font-weight: 800; color: var(--t1); display: flex; align-items: center; gap: 8px; letter-spacing: -0.005em; }
.sdr-outreach-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--v-blue); color: white; font-size: 11px; font-weight: 800; }
.sdr-outreach-role { font-size: 11.5px; color: var(--t3); padding-left: 30px; }

.sdr-why-them {
  font-size: 11.5px; color: var(--t2);
  background: var(--v-blue-dim); padding: 8px 11px;
  border-radius: var(--radius); border-left: 3px solid var(--v-blue);
  line-height: 1.5;
}
.sdr-why-label { font-weight: 800; color: var(--v-blue); margin-right: 4px; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; }

/* Phone script block — primary output, slightly elevated visual treatment */
.sdr-phone-section {
  background: var(--s3);
  border: 1px solid var(--rb);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.sdr-section-head {
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--v-blue);
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--r1);
  display: flex; align-items: center; justify-content: space-between;
}
.sdr-script { display: flex; flex-direction: column; gap: 8px; }
.sdr-script-line {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 12.5px; line-height: 1.5;
}
.sdr-script-label {
  font-size: 9px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--t4);
  padding-top: 2px;
}
.sdr-script-text { color: var(--t1); }
.sdr-script-line-ask {
  background: var(--v-blue-edge);
  border-left: 3px solid var(--v-blue);
  border-radius: var(--radius);
  padding: 8px 10px;
  margin: 4px 0;
}
.sdr-script-line-ask .sdr-script-label { color: var(--v-blue); padding-top: 0; }
.sdr-script-line-ask .sdr-script-text { font-weight: 600; }
.sdr-script-line-obj { background: var(--s4); border-radius: var(--radius); padding: 6px 10px; }
.sdr-script-line-obj .sdr-script-label { color: var(--t3); padding-top: 0; }
.sdr-script-line-obj .sdr-script-text { color: var(--t2); font-size: 12px; font-style: italic; }

/* Email block — secondary visual weight */
.sdr-email-section {
  background: var(--s2);
  border: 1px dashed var(--r1);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.sdr-email { display: flex; flex-direction: column; gap: 8px; }
.sdr-email-subj {
  font-size: 12.5px; color: var(--t1);
  background: var(--s3); padding: 6px 10px; border-radius: 4px;
}
.sdr-email-label { font-size: 9px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t4); margin-right: 6px; }
.sdr-email-body {
  font-size: 12.5px; color: var(--t1); line-height: 1.6;
  white-space: pre-wrap;
}

/* Voicemail / LinkedIn fallback grid — generic across all contacts */
.sdr-fallback-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 768px) { .sdr-fallback-grid { grid-template-columns: 1fr; } }
.sdr-vm-text { font-size: 12.5px; color: var(--t1); line-height: 1.6; white-space: pre-wrap; }

/* Recommended-contacts list when no contact name was provided */
.sdr-rec-list { display: flex; flex-direction: column; gap: 12px; }
.sdr-rec-item { padding: 10px 12px; background: var(--s3); border-radius: var(--radius); border: 1px solid var(--r1); }
.sdr-rec-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
.sdr-rec-num { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--v-blue-dim); color: var(--v-blue); font-size: 11px; font-weight: 800; }
.sdr-rec-name-block { flex: 1; min-width: 0; }
.sdr-rec-name { font-size: 13px; font-weight: 700; color: var(--t1); }
.sdr-rec-role { font-size: 11px; color: var(--t3); margin-top: 1px; }
.sdr-rec-line { font-size: 11.5px; color: var(--t2); line-height: 1.5; padding-left: 32px; margin-top: 4px; }
.sdr-rec-label { font-size: 9px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--v-blue); margin-right: 4px; }

@media print {
  .sdr-outreach-grid { grid-template-columns: 1fr !important; }
  .sdr-outreach-card { page-break-inside: avoid; border: 1px solid #ccc !important; }
  .sdr-section-head .copy-btn { display: none !important; }
  .brief-mode-toggle-row { display: none !important; }
  #sdr-context-wrap { display: block !important; }
}

/* ── INFO CARDS ── */
.info-card { background:var(--s2); border:1px solid var(--r1); border-radius:var(--radius); overflow:hidden; }
.info-card-head { font-size:9px; font-weight:800; letter-spacing:0.18em; text-transform:uppercase; color:var(--v-blue); padding:10px 14px; border-bottom:1px solid var(--r1); background:var(--v-blue-edge); display:flex; align-items:center; gap:6px; justify-content:space-between; }
.info-card-head-actions { display:flex; gap:6px; }
.info-card-body { padding:14px; }

/* ── ACCOUNT SNAPSHOT (Wikipedia infobox style) ── */
.snapshot-kv { display:grid; grid-template-columns:auto 1fr; gap:4px 14px; margin-bottom:10px; }
.sk-label { font-size:10px; font-weight:700; color:var(--t4); letter-spacing:0.06em; text-transform:uppercase; padding:3px 0; white-space:nowrap; }
.sk-value { font-size:12px; color:var(--t2); padding:3px 0; }
.sk-value.highlight { color:var(--t1); font-weight:700; }

/* Tech stack signals */
.tech-stack-grid { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.tech-pill { font-size:10px; font-weight:700; padding:3px 9px; border-radius:3px; border:1px solid; }
.tech-green  { background:var(--v-green-dim);  border-color:rgba(139,224,0,0.25); color:var(--v-green); }
.tech-amber  { background:var(--v-amber-dim);  border-color:rgba(245,166,35,0.25); color:var(--v-amber); }
.tech-blue   { background:var(--v-blue-dim);   border-color:rgba(0,119,255,0.25);  color:var(--v-blue); }
.tech-grey   { background:var(--s3);           border-color:var(--r1);              color:var(--t3); }

/* ── ATTENDEE PROFILE CARD ── */
.attendee-block { padding:12px 0; border-bottom:1px solid var(--r2); }
.attendee-block:last-child { border-bottom:none; padding-bottom:0; }
.attendee-header { display:flex; align-items:flex-start; gap:10px; margin-bottom:8px; }
.attendee-photo { width:36px; height:36px; border-radius:50%; object-fit:cover; border:1px solid var(--r1); flex-shrink:0; }
.attendee-photo-placeholder { width:36px; height:36px; border-radius:50%; background:var(--s4); border:1px solid var(--r1); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; color:var(--v-blue); flex-shrink:0; }
.attendee-name { font-size:14px; font-weight:800; color:var(--t1); letter-spacing:-0.01em; line-height:1.2; }
.attendee-title { font-size:11px; color:var(--t3); margin-top:2px; }
.attendee-li { font-size:10px; font-weight:700; color:var(--v-blue); background:var(--v-blue-dim); padding:2px 7px; border-radius:3px; margin-left:6px; vertical-align:middle; }

/* Inline citation chip — shown next to facts grounded in a web search result.
   Clicking opens the source in a new tab. Designed to be visually quiet so it
   doesn't compete with the fact itself, but obviously interactive. */
.cite-chip {
  display:inline-block;
  font-size:9px;
  font-weight:700;
  color:var(--t3);
  background:var(--s4);
  padding:1px 6px;
  border-radius:3px;
  margin-left:6px;
  vertical-align:1px;
  text-decoration:none;
  letter-spacing:0.02em;
  transition:all 0.15s;
  white-space:nowrap;
}
.cite-chip:hover { color:var(--v-blue); background:var(--v-blue-dim); }
@media print {
  .cite-chip { background:transparent; color:#666; border:1px solid #ccc; }
}

/* ══════════════════════════════════════════════════
   FULL-BRIEF TOGGLE — collapses the deep brief content behind
   a "Show full brief" button. 5-min card stays visible above.
   ══════════════════════════════════════════════════ */
.brief-mode-toggle-row {
  display: flex; flex-direction: column; align-items: stretch;
  margin: 24px 0 8px;
  max-width: var(--container-max);
}
.brief-mode-toggle-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  background: linear-gradient(180deg, var(--s2), var(--s3));
  border: 1px solid var(--rb);
  border-radius: var(--radius);
  color: var(--t1); font-family: var(--font);
  font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all 0.18s;
  text-align: left;
}
.brief-mode-toggle-btn:hover {
  border-color: var(--v-blue);
  background: linear-gradient(180deg, var(--s3), var(--s4));
}
.brief-mode-toggle-btn.open {
  border-color: var(--v-blue);
  background: var(--v-blue-dim);
}
.bmt-icon { font-size: 16px; }
.bmt-label { flex: 1; letter-spacing: -0.005em; }
.bmt-status { display: inline-flex; align-items: center; }
.bmt-tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  background: var(--v-green); color: var(--v-black);
  border-radius: 50%; font-size: 11px; font-weight: 800;
}
.bmt-arrow { font-size: 12px; color: var(--t3); transition: transform 0.2s; }
.brief-mode-toggle-btn.open .bmt-arrow { transform: rotate(180deg); color: var(--v-blue); }
.brief-mode-toggle-hint {
  font-size: 11px; color: var(--t4); padding: 6px 4px 0 22px;
  letter-spacing: 0.01em;
}

/* ══════════════════════════════════════════════════
   SKELETON PLACEHOLDERS — shown when user toggles to Full
   while deep call is still loading.
   ══════════════════════════════════════════════════ */
.deep-loading-pulse {
  font-size: 10px; font-weight: 700; color: var(--v-blue);
  letter-spacing: 0.06em; text-transform: lowercase;
  margin-left: 8px; font-family: var(--font);
  animation: pulse-text 1.4s ease-in-out infinite;
}
@keyframes pulse-text { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }

.triggers-row-skeleton .trigger-card-skeleton {
  background: var(--s2); border-color: var(--r1); pointer-events: none;
}
.skeleton-line {
  height: 10px; background: linear-gradient(90deg, var(--s3) 0%, var(--s4) 50%, var(--s3) 100%);
  background-size: 200% 100%;
  border-radius: 3px; margin: 7px 0;
  animation: skeleton-shimmer 1.6s linear infinite;
}
.skeleton-line-100 { width: 100%; }
.skeleton-line-90  { width: 90%; }
.skeleton-line-70  { width: 70%; }
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.dot-skeleton { background: var(--s4) !important; }

@media print {
  .brief-mode-toggle-row { display: none !important; }
  /* Always show full brief content when printing */
  #full-brief-wrap { display: block !important; }
  .triggers-row-skeleton, .deep-loading-pulse { display: none !important; }
}

/* ══════════════════════════════════════════════════
   SHARE DIALOG — modal for the stateless share-URL feature.
   ══════════════════════════════════════════════════ */
.share-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(1,2,3,0.75);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: shareIn 0.18s ease;
}
@keyframes shareIn { from { opacity: 0; } to { opacity: 1; } }
.share-card {
  background: var(--s2);
  border: 1px solid var(--rb);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 600px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
}
.share-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--r1);
}
.share-title {
  font-size: 16px; font-weight: 700; color: var(--t1);
  letter-spacing: -0.01em;
}
.share-close {
  background: transparent; border: none;
  color: var(--t3); cursor: pointer;
  font-family: var(--font); font-size: 18px;
  padding: 4px 8px; line-height: 1;
}
.share-close:hover { color: var(--t1); }
.share-body { padding: 18px 20px 20px; }
.share-desc {
  font-size: 13px; color: var(--t2); line-height: 1.5;
  margin: 0 0 14px;
}
.share-url-row {
  display: flex; gap: 8px;
  margin-bottom: 8px;
}
.share-url-input {
  flex: 1;
  background: var(--s4);
  border: 1px solid var(--r1);
  border-radius: var(--radius);
  padding: 10px 12px;
  color: var(--t2);
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 11px;
  outline: none;
  text-overflow: ellipsis;
}
.share-url-input:focus { border-color: var(--v-blue); }
.share-copy-btn {
  background: var(--v-blue); border: none;
  border-radius: var(--radius);
  padding: 0 16px;
  color: white;
  font-family: var(--font);
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.share-copy-btn:hover { background: var(--v-blue-dark); }
.share-copy-btn.share-copy-done { background: var(--v-green); color: var(--v-black); }
.share-meta {
  font-size: 10px; color: var(--t4);
  letter-spacing: 0.05em;
}

/* Email dialog field stack — replaces the inline single-row pattern when
   the dialog needs labelled fields (To + CC). Each .email-field is a
   labelled input. Actions (Send button) sit below in their own row. */
.email-field {
  margin-bottom: 12px;
}
.email-field-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: 4px;
}
.email-field-opt {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--t4);
  font-size: 10px;
  margin-left: 6px;
}
.email-field .share-url-input {
  width: 100%;
  font-family: var(--font);
  font-size: 13px;
}
.email-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
  margin-bottom: 8px;
}
.email-actions .share-copy-btn {
  padding: 8px 20px;
  font-size: 12px;
}
@media (max-width: 600px) {
  .share-url-row { flex-direction: column; }
  .share-copy-btn { padding: 10px 16px; }
}

/* ══════════════════════════════════════════════════
   IN-MEETING MODE — fullscreen big-text reader for use
   during a call. Six items, vertically stacked, generous
   spacing, designed for arm's-length reading.
   ══════════════════════════════════════════════════ */
.meeting-mode {
  position: fixed; inset: 0; z-index: 10000;
  background: #050810;
  background-image:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(0,119,255,0.08) 0%, transparent 70%),
    linear-gradient(180deg, #050810 0%, #020308 100%);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: mmIn 0.25s ease;
}
@keyframes mmIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.mm-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(12px);
}
.mm-head-left { min-width: 0; }
.mm-head-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.mm-eyebrow {
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--v-blue);
  margin-bottom: 4px;
}
.mm-title {
  font-size: 18px; font-weight: 700;
  color: var(--t1);
  letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mm-clock {
  font-family: 'Consolas','Monaco',monospace;
  font-size: 14px; font-weight: 600;
  color: var(--t3);
  letter-spacing: 0.05em;
}
.mm-close {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  padding: 8px 16px;
  color: var(--t2);
  font-family: var(--font);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.mm-close:hover { background: rgba(255,255,255,0.12); color: var(--t1); }

.mm-body {
  flex: 1;
  overflow-y: auto;
  padding: 32px 0;
}
.mm-grid {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.mm-item {
  display: grid;
  grid-template-columns: 60px 60px 1fr;
  gap: 20px;
  align-items: start;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 24px 28px;
  transition: border-color 0.2s;
}
.mm-item:hover { border-color: rgba(0,119,255,0.25); }
.mm-item-num {
  font-size: 36px; font-weight: 200;
  color: var(--v-blue);
  letter-spacing: -0.02em;
  line-height: 1;
}
.mm-item-icon {
  font-size: 32px;
  line-height: 1;
  text-align: center;
}
.mm-item-text { min-width: 0; }
.mm-item-label {
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--t3);
  margin-bottom: 8px;
}
.mm-item-body {
  font-size: 22px; font-weight: 600;
  color: var(--t1);
  letter-spacing: -0.01em;
  line-height: 1.4;
}
.mm-item-sub {
  font-size: 16px;
  color: var(--t2);
  line-height: 1.5;
  margin-top: 10px;
  font-weight: 400;
}
.mm-footer {
  flex-shrink: 0;
  text-align: center;
  padding: 14px;
  font-size: 11px;
  color: var(--t4);
  letter-spacing: 0.1em;
  border-top: 1px solid rgba(255,255,255,0.04);
  background: rgba(0,0,0,0.2);
}

/* Mobile / tablet — phone-in-lap use case */
@media (max-width: 768px) {
  .mm-head { padding: 14px 16px; }
  .mm-title { font-size: 14px; }
  .mm-clock { display: none; }
  .mm-close { padding: 6px 12px; font-size: 11px; }
  .mm-grid { padding: 0 14px; gap: 14px; }
  .mm-item {
    grid-template-columns: 36px 1fr;
    grid-template-rows: auto auto;
    padding: 16px;
    gap: 12px;
  }
  .mm-item-icon { display: none; }
  .mm-item-num { font-size: 28px; align-self: center; }
  .mm-item-label { font-size: 10px; margin-bottom: 6px; }
  .mm-item-body { font-size: 17px; }
  .mm-item-sub { font-size: 14px; }
}
@media print {
  .meeting-mode { display: none !important; }
}

.attendee-role-badge { font-size:9px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; padding:2px 7px; border-radius:3px; }
.role-champion  { background:var(--v-green-dim);  color:var(--v-green); }
.role-economic  { background:var(--v-blue-dim);   color:var(--v-blue); }
.role-technical { background:var(--v-amber-dim);  color:var(--v-amber); }
.role-blocker   { background:var(--v-red-dim);    color:var(--v-red); }
.role-unknown   { background:var(--s4);           color:var(--t3); }
.attendee-cares { font-size:12px; color:var(--t2); line-height:1.5; margin-top:6px; }
.attendee-cares-label { font-size:9px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--t4); margin-right:5px; }

/* ── TALKING POINTS ── */
.tp-list { display:flex; flex-direction:column; gap:10px; }
.tp-item { background:var(--s3); border:1px solid var(--r1); border-radius:var(--radius); padding:12px 14px; }
.tp-pain { font-size:12px; color:var(--t2); line-height:1.5; margin-bottom:8px; }
.tp-ask { font-size:12.5px; font-weight:700; color:var(--t1); padding:8px 12px; background:var(--v-blue-edge); border-left:3px solid var(--v-blue); border-radius:3px; line-height:1.5; }
.tp-ask::before { content:"ASK: "; color:var(--v-blue); font-size:9px; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; vertical-align:middle; margin-right:4px; }

/* ── DEAL CONTEXT (SFDC placeholder) ── */
.deal-kv { display:flex; flex-direction:column; gap:6px; }
.deal-row { display:flex; justify-content:space-between; align-items:center; padding:5px 0; border-bottom:1px solid var(--r2); }
.deal-row:last-child { border-bottom:none; }
.deal-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--t4); }
.deal-value { font-size:12px; font-weight:600; color:var(--t2); }
.deal-value.good  { color:var(--v-green); }
.deal-value.warn  { color:var(--v-amber); }
.deal-value.sfdc  { color:var(--v-blue); font-size:10px; font-weight:700; }
.sfdc-badge { font-size:9px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:var(--v-amber); background:var(--v-amber-dim); border:1px solid rgba(245,166,35,0.2); padding:1px 6px; border-radius:3px; }

/* ── SECURITY STACK ── */
.stack-grid { display:flex; flex-wrap:wrap; gap:5px; }
.stack-pill { font-size:10px; font-weight:700; padding:4px 10px; border-radius:3px; border:1px solid; display:flex; align-items:center; gap:5px; }
.stack-comp   { background:var(--v-amber-dim); border-color:rgba(245,166,35,0.25); color:var(--v-amber); }
.stack-comp-note { font-size:9px; font-weight:400; color:var(--t3); }
.stack-neutral { background:var(--s3); border-color:var(--r1); color:var(--t3); }

/* ── EXPANDABLE SECTIONS ── */
.expand-section { border:1px solid var(--r1); border-radius:var(--radius); overflow:hidden; margin-bottom:10px; }
.expand-toggle { width:100%; background:var(--s3); border:none; padding:11px 14px; color:var(--t3); font-family:var(--font); font-size:12px; font-weight:600; cursor:pointer; display:flex; justify-content:space-between; align-items:center; transition:all 0.15s; text-align:left; }
.expand-toggle:hover { color:var(--t1); background:var(--s4); }
.expand-body { display:none; padding:14px; background:var(--s2); border-top:1px solid var(--r1); }
.expand-body.open { display:block; }
.expand-arrow { transition:transform 0.2s; font-size:10px; }
.expand-toggle.open .expand-arrow { transform:rotate(180deg); }

/* ── MISC COMPONENTS ── */
.varonis-ref-block { background:var(--v-green-dim); border:1px solid rgba(139,224,0,0.25); border-radius:var(--radius); padding:10px 13px; margin-bottom:10px; font-size:12px; color:var(--v-green); font-weight:600; display:flex; align-items:flex-start; gap:8px; }
.incident-block { background:var(--v-red-dim); border:1px solid rgba(255,68,68,0.2); border-left:3px solid var(--v-red); border-radius:var(--radius); padding:10px 13px; font-size:12px; color:var(--v-red); line-height:1.6; margin-bottom:8px; }
.invest-block { background:var(--v-blue-edge); border:1px solid var(--rb); border-left:3px solid var(--v-blue); border-radius:var(--radius); padding:10px 13px; font-size:12px; color:var(--t2); line-height:1.6; margin-bottom:8px; }
.drivers-block { background:var(--v-green-dim); border:1px solid rgba(139,224,0,0.2); border-left:3px solid var(--v-green); border-radius:var(--radius); padding:10px 13px; font-size:12px; color:var(--v-green); font-weight:600; line-height:1.65; margin-bottom:8px; }
.activity-block { background:var(--s3); border-left:3px solid var(--v-amber); border-radius:var(--radius); padding:10px 13px; font-size:12px; color:var(--t2); line-height:1.6; margin-bottom:8px; }
.tags-row { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:8px; }
.tag-pill { font-size:10px; background:var(--s3); border:1px solid var(--r1); border-radius:3px; padding:2px 8px; color:var(--t3); }
.desc-text { font-size:12.5px; color:var(--t2); line-height:1.65; margin-bottom:8px; }
.micro-label { font-size:9px; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:var(--t4); margin-bottom:5px; margin-top:10px; }
.li-link { font-size:10px; font-weight:700; color:var(--v-blue); background:var(--v-blue-dim); padding:2px 7px; border-radius:3px; }
.li-activity-link { font-size:11px; font-weight:600; color:var(--v-blue); }
.opener-block { background:var(--v-blue-edge); border:1px solid var(--rb); border-left:3px solid var(--v-blue); border-radius:var(--radius); padding:10px 13px; font-size:13px; color:var(--t1); font-style:italic; line-height:1.6; margin-top:10px; }
.opener-label { font-size:8px; font-weight:800; letter-spacing:0.14em; text-transform:uppercase; color:var(--v-blue); margin-bottom:5px; }

/* ── Regulations summary grid (Issue #16) ── */
.regs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.reg-card {
  background: var(--s3);
  border: 1px solid var(--r1);
  border-left: 3px solid var(--v-amber);
  border-radius: var(--radius);
  padding: 8px 11px;
}
.reg-card-name {
  font-size: 11.5px; font-weight: 800; color: var(--t1);
  letter-spacing: 0.02em;
  margin-bottom: 3px;
}
.reg-card-why {
  font-size: 11px; color: var(--t2); line-height: 1.45;
}

/* Progress bar in card */
.bic-progress-wrap { padding:8px 0; }
.bic-progress-label { font-size:12px; color:var(--t3); margin-bottom:7px; }
.bic-progress-bar { height:3px; background:var(--s4); border-radius:2px; overflow:hidden; margin-bottom:5px; }
.bic-progress-fill { height:100%; width:0%; background:var(--v-blue); border-radius:2px; transition:width 0.3s ease; }
.bic-progress-note { font-size:10px; color:var(--t4); }
@keyframes loadPulse { 0%,100%{opacity:0.4} 50%{opacity:1} }
.loading-pulse { color:var(--t4); font-style:italic; animation:loadPulse 1.5s ease-in-out infinite; font-size:12px; }

/* ── BATTLECARD (reused from previous) ── */
.battlecard { animation:bcIn 0.2s ease; }
@keyframes bcIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.bc-header { background:linear-gradient(135deg,var(--s2),var(--s3)); border:1px solid var(--rb); border-radius:var(--radius-lg); padding:24px 28px; margin-bottom:10px; display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:16px; }
.bc-comp-eyebrow { font-size:9px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--v-blue); margin-bottom:6px; }
.bc-comp-name { font-size:26px; font-weight:800; letter-spacing:-0.03em; margin-bottom:7px; }
.bc-comp-deck { font-size:13px; color:var(--t2); line-height:1.6; max-width:520px; }
.bc-signals { display:flex; gap:6px; flex-wrap:wrap; }
.bc-sig { font-size:10px; font-weight:600; padding:4px 10px; border-radius:20px; }
.bc-sig-risk  { background:var(--v-red-dim); color:var(--v-red); border:1px solid rgba(255,68,68,0.2); }
.bc-sig-watch { background:var(--v-amber-dim); color:var(--v-amber); border:1px solid rgba(245,166,35,0.2); }
.bc-sig-good  { background:var(--v-green-dim); color:var(--v-green); border:1px solid rgba(139,224,0,0.2); }
.bc-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px; }
.bc-zone { background:var(--s2); border:1px solid var(--r1); border-radius:var(--radius); padding:18px 20px; }
.bc-zone-full { grid-column:1/-1; }
.bc-zone-label { font-size:8px; font-weight:800; letter-spacing:0.22em; text-transform:uppercase; color:var(--v-blue); margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.bc-zone-label::after { content:''; flex:1; height:1px; background:var(--rb); }
.brief-list { display:flex; flex-direction:column; gap:10px; }
.brief-item { display:flex; gap:10px; align-items:flex-start; }
.brief-num { width:20px; height:20px; border-radius:50%; flex-shrink:0; background:var(--v-blue-dim); border:1px solid var(--v-blue); color:var(--v-blue); font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.brief-text { font-size:12.5px; color:var(--t2); line-height:1.6; }
.brief-text strong { color:var(--t1); font-weight:700; }
.win-list { display:flex; flex-direction:column; gap:10px; }
.win-item { border:1px solid var(--r1); border-left:3px solid var(--v-green); border-radius:3px; padding:10px 12px; background:rgba(139,224,0,0.03); }
.win-advantage { font-size:11px; font-weight:700; color:var(--v-green); margin-bottom:4px; }
.win-body { font-size:12px; color:var(--t2); line-height:1.55; margin-bottom:7px; }
.win-say-label { font-size:8px; font-weight:800; letter-spacing:0.14em; text-transform:uppercase; color:var(--t4); margin-bottom:3px; display:flex; align-items:center; gap:6px; }
.win-say-text { font-size:12px; font-style:italic; color:var(--v-blue); line-height:1.5; }
.obj-list { display:flex; flex-direction:column; gap:12px; }
.obj-item {}
.obj-attack { font-size:12px; font-weight:700; color:var(--v-red); margin-bottom:4px; }
.obj-attack::before { content:'"'; opacity:0.5; }
.obj-attack::after  { content:'"'; opacity:0.5; }
.obj-response { font-size:12px; color:var(--t2); line-height:1.6; padding-left:10px; border-left:2px solid var(--r1); }
.obj-response strong { color:var(--v-green); font-weight:600; }
.risk-list { display:flex; flex-direction:column; gap:8px; }
.risk-item { display:flex; gap:9px; align-items:flex-start; background:var(--s3); border-radius:var(--radius); padding:10px 12px; border:1px solid var(--r1); }
.risk-icon { font-size:13px; flex-shrink:0; margin-top:1px; }
.risk-title { font-size:11px; font-weight:700; color:var(--v-amber); margin-bottom:3px; }
.risk-detail { font-size:11.5px; color:var(--t3); line-height:1.5; }
.risk-ask { font-size:10px; color:var(--v-blue); font-weight:600; margin-top:4px; }
.proof-list { display:flex; flex-direction:column; gap:8px; }
.proof-item { display:flex; gap:9px; align-items:flex-start; }
.proof-badge { font-size:8px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; padding:2px 7px; border-radius:3px; flex-shrink:0; margin-top:2px; white-space:nowrap; }
.pb-financial { background:var(--v-amber-dim); color:var(--v-amber); }
.pb-g2        { background:rgba(255,100,0,0.1); color:#ff7040; }
.pb-gartner   { background:var(--v-blue-edge); color:var(--v-blue); }
.pb-customer  { background:var(--v-green-dim); color:var(--v-green); }
.proof-text { font-size:12px; color:var(--t2); line-height:1.5; }
.prac-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:8px; }
.prac-card { background:var(--s3); border:1px solid var(--r1); border-radius:var(--radius); padding:13px 15px; }
.prac-tag { font-size:8px; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; padding:2px 7px; border-radius:3px; display:inline-block; margin-bottom:8px; }
.pt-win   { background:var(--v-green-dim); color:var(--v-green); }
.pt-risk  { background:var(--v-red-dim);   color:var(--v-red); }
.pt-market{ background:var(--v-blue-edge); color:var(--v-blue); }
.pt-impl  { background:var(--v-amber-dim); color:var(--v-amber); }
.prac-editorial { font-size:10px; color:var(--t3); margin-bottom:8px; font-style:italic; }
.prac-quote { font-size:12px; line-height:1.65; color:var(--t2); font-style:italic; padding:8px 11px; background:var(--s4); border-radius:3px; margin-bottom:6px; }
.prac-attribution { font-size:10px; color:var(--t4); }
.qs-list { display:flex; flex-direction:column; gap:7px; }
.qs-item { display:flex; gap:9px; align-items:flex-start; background:var(--s3); border:1px solid var(--r1); border-radius:3px; padding:9px 12px; }
.qs-num { width:18px; height:18px; border-radius:50%; flex-shrink:0; background:var(--v-blue-dim); border:1px solid var(--v-blue); color:var(--v-blue); font-size:9px; font-weight:800; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.qs-text { font-size:12px; color:var(--t2); line-height:1.5; font-style:italic; }
.ai-panel { background:var(--s2); border:1px solid var(--r1); border-radius:var(--radius); overflow:hidden; }
.ai-panel-header { background:var(--s3); padding:11px 16px; border-bottom:1px solid var(--r1); display:flex; align-items:center; gap:9px; }
.ai-dot { width:7px; height:7px; border-radius:50%; background:var(--v-blue); animation:pulse 2s infinite; }
.ai-title { font-size:12px; font-weight:700; }
.ai-messages { padding:14px 16px; min-height:120px; max-height:280px; overflow-y:auto; display:flex; flex-direction:column; gap:9px; }
.ai-msg { display:flex; gap:7px; align-items:flex-start; }
.ai-msg.user { flex-direction:row-reverse; }
.ai-avatar { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:800; flex-shrink:0; }
.ai-msg.bot  .ai-avatar { background:var(--v-blue-dim); color:var(--v-blue); border:1px solid var(--v-blue); }
.ai-msg.user .ai-avatar { background:var(--s4); color:var(--t3); }
.ai-bubble { font-size:12.5px; line-height:1.65; color:var(--t2); background:var(--s3); border-radius:7px; padding:9px 12px; max-width:85%; }
.ai-msg.user .ai-bubble { background:var(--v-blue-dim); color:var(--t1); border:1px solid rgba(0,119,255,0.25); }
.ai-typing { display:flex; gap:4px; align-items:center; padding:6px 0; }
.ai-typing span { width:5px; height:5px; border-radius:50%; background:var(--v-blue); animation:typing 1.2s infinite; }
.ai-typing span:nth-child(2){animation-delay:.2s} .ai-typing span:nth-child(3){animation-delay:.4s}
@keyframes typing{0%,60%,100%{opacity:.2;transform:scale(.8)}30%{opacity:1;transform:scale(1)}}
.ai-chips { padding:7px 13px 9px; display:flex; flex-wrap:wrap; gap:5px; }
.ai-chip { font-size:10px; background:var(--s3); border:1px solid var(--r1); border-radius:12px; padding:4px 10px; color:var(--t3); cursor:pointer; transition:all 0.15s; }
.ai-chip:hover { border-color:var(--v-blue); color:var(--v-blue); }
.ai-input-row { padding:10px 12px; border-top:1px solid var(--r1); display:flex; gap:7px; }
.ai-input { flex:1; background:var(--s4); border:1px solid var(--r1); border-radius:var(--radius); padding:8px 12px; color:var(--t1); font-family:var(--font); font-size:12px; outline:none; transition:border-color 0.15s; }
.ai-input:focus { border-color:var(--v-blue); }
.ai-input::placeholder { color:var(--t4); }
.ai-send { background:var(--v-blue); border:none; border-radius:var(--radius); padding:8px 14px; color:#fff; font-family:var(--font); font-size:12px; font-weight:700; cursor:pointer; transition:background 0.15s; }
.ai-send:hover { background:var(--v-blue-dark); }
.deep-toggle { width:100%; background:transparent; border:1px solid var(--r1); border-radius:var(--radius); padding:12px 16px; color:var(--t3); font-family:var(--font); font-size:12px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; margin-top:8px; transition:all 0.15s; }
.deep-toggle:hover { border-color:var(--v-blue); color:var(--t1); }
.deep-toggle.open .arrow { transform:rotate(180deg); }
.arrow { transition:transform 0.2s; }
.deep-body { display:none; background:var(--s2); border:1px solid var(--r1); border-top:none; border-radius:0 0 var(--radius) var(--radius); padding:20px; margin-top:-1px; }
.deep-body.show { display:block; }
.deep-h3 { font-size:14px; font-weight:700; margin-bottom:8px; margin-top:18px; }
.deep-h3:first-child { margin-top:0; }
.deep-p { font-size:12.5px; line-height:1.7; color:var(--t2); margin-bottom:12px; }
.deep-p:last-child { margin-bottom:0; }
.deep-p strong { color:var(--t1); font-weight:600; }
.bc-regional-bar { background:var(--s2); border:1px solid var(--r1); border-radius:var(--radius); padding:8px 14px; margin-bottom:8px; display:flex; flex-wrap:wrap; align-items:center; gap:4px 0; font-family:var(--font); font-size:11px; line-height:1.5; cursor:pointer; transition:background 0.15s; }
.bc-regional-bar:hover { background:var(--s3); border-color:var(--v-blue); }
.rb-total { font-weight:700; color:var(--t1); flex-shrink:0; }
.rb-div { color:var(--t4); padding:0 7px; flex-shrink:0; }
.rb-region { color:var(--t3); flex-shrink:0; }
.rb-region b { color:var(--t1); font-weight:700; }
.rb-warn { color:var(--v-amber); }
.rb-angle { color:var(--v-green); font-weight:600; flex-shrink:0; }
.rb-expand-icon { font-size:8px; color:var(--v-blue); margin-right:7px; flex-shrink:0; transition:transform 0.2s; }
.rb-hint { margin-left:auto; font-size:9px; color:var(--t4); padding-left:10px; }
.bc-regional-expanded { background:var(--s2); border:1px solid var(--r1); border-top:none; border-radius:0 0 var(--radius) var(--radius); padding:12px 14px 8px; margin-bottom:8px; margin-top:-8px; }
.bc-regional-source { font-size:9px; color:var(--t4); margin-top:8px; padding-top:6px; border-top:1px solid var(--r2); }
.copy-btn { background:transparent; border:1px solid var(--r1); border-radius:3px; padding:1px 6px; color:var(--t3); font-family:var(--font); font-size:9px; font-weight:700; cursor:pointer; transition:all 0.15s; vertical-align:middle; margin-left:5px; }
.copy-btn:hover { border-color:var(--v-green); color:var(--v-green); }

/* ── BATTLECARDS VIEW ── */
.bc-view-hero { background:var(--v-black); padding:36px 0 28px; border-bottom:1px solid var(--r1); }
.bc-hero-inner { max-width: var(--container-max); margin:0 auto; padding:0 24px; }
.selector-section { padding:24px 0; border-bottom:1px solid var(--r1); }
.sel-inner { max-width: var(--container-max); margin:0 auto; padding:0 24px; }
.selector-label { font-size:9px; font-weight:800; letter-spacing:0.2em; text-transform:uppercase; color:var(--t3); margin-bottom:12px; }
.comp-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:7px; }
.comp-btn { background:var(--s2); border:1px solid var(--r1); border-radius:var(--radius); padding:13px 12px; cursor:pointer; transition:all 0.18s; text-align:left; display:flex; flex-direction:column; gap:4px; }
.comp-btn:hover { border-color:var(--v-blue); background:var(--v-blue-edge); transform:translateY(-1px); }
.comp-btn.active { border-color:var(--v-blue); background:var(--v-blue-dim); box-shadow:0 0 0 1px var(--v-blue); }
.comp-btn-name { font-family:var(--font); font-size:12px; font-weight:700; color:var(--t1); }
.comp-btn-type { font-family:var(--font); font-size:9px; color:var(--t3); }
.comp-btn-freq { display:flex; align-items:center; gap:5px; margin-top:2px; }
.freq-dot { width:5px; height:5px; border-radius:50%; flex-shrink:0; }
.freq-hot  { background:var(--v-red); }
.freq-warm { background:var(--v-amber); }
.freq-cool { background:var(--v-green); }
.freq-label { font-family:var(--font); font-size:9px; color:var(--t4); }
.battlecard-section { padding:20px 0 40px; }
.bc-section-inner { max-width: var(--container-max); margin:0 auto; padding:0 24px; }

/* ── COMPARISON TABLE ── */
.comparison-section { border-bottom:1px solid var(--r1); padding:24px 0; background:var(--s1); }
.comp-table-wrap { max-width: var(--container-max); margin:0 auto; padding:0 24px; }

/* ── MOBILE ── */
@media (max-width:768px) {
  /* ── Lock screen ── */
  .lock-card { margin:12px; padding:28px 18px; }
  .lock-title { font-size:20px; }

  /* ── Masthead ── */
  .masthead-inner { padding:0 14px; }
  .v-logo-div, .v-portal-tag { display:none; }
  .v-nav { display:none; } /* replaced by bottom tab bar feel via strip buttons */

  /* ── Ticker ── */
  .adv-ticker-label { padding-left:14px; font-size:7px; }
  .adv-ticker-item  { font-size:10px; padding:0 28px 0 0; }

  /* ── Intake hero ── */
  .intake-inner { padding:0 14px; }
  .intake-title { font-size:24px; }
  .intake-sub   { font-size:13px; }
  .intake-body  { padding:16px 0 32px; }
  .intake-grid  { grid-template-columns:1fr; padding:0 14px; gap:12px; }
  .intake-card  { padding:20px 16px; }

  /* ── Competitor + objective pickers ── */
  .comp-pick-grid { grid-template-columns:1fr 1fr; }
  .obj-grid       { grid-template-columns:1fr 1fr; }
  .crm-row        { flex-direction:column; }

  /* ── Brief strip — slim on mobile ── */
  .brief-strip-inner { padding:0 14px; height:44px; }
  .brief-co-meta, .brief-obj-pill { display:none; }
  .brief-co-name { font-size:13px; }
  /* Keep only essential action buttons */
  .brief-action-btn { padding:4px 8px; font-size:11px; }

  /* ── Cheat panel ── */
  .cheat-panel { margin:10px 14px 0; padding:14px 16px; }

  /* ── Brief content ── */
  .brief-content { padding:12px 14px 0; }

  /* ── Why now triggers ── */
  .triggers-row { grid-template-columns:1fr; }
  .trigger-card { padding:12px 14px; }
  .trigger-headline { font-size:12px; }

  /* ── Three-column collapses to single ── */
  .brief-cols, .brief-cols-2, .brief-cols-3 { grid-template-columns:1fr; }

  /* ── Info cards ── */
  .info-card-head { font-size:8px; padding:8px 12px; }
  .info-card-body { padding:12px; }
  .snapshot-kv { grid-template-columns:auto 1fr; gap:3px 10px; }
  .sk-label { font-size:9px; }
  .sk-value  { font-size:11px; }
  .tech-stack-grid { gap:4px; }
  .tech-pill { font-size:9px; padding:2px 7px; }

  /* ── Attendee card ── */
  .attendee-photo, .attendee-photo-placeholder { width:30px; height:30px; font-size:12px; }
  .attendee-name { font-size:13px; }
  .attendee-title { font-size:10px; }

  /* ── Talking points ── */
  .tp-item { padding:10px 12px; }
  .tp-pain { font-size:10px; }
  .tp-ask  { font-size:11.5px; padding:7px 10px; }

  /* ── Deal context ── */
  .deal-label { font-size:9px; }
  .deal-value { font-size:11px; }

  /* ── Expand sections ── */
  .expand-toggle { padding:10px 12px; font-size:11px; }
  .expand-body   { padding:12px; }
  .agenda-item-title { font-size:12px; }
  .agenda-item-sub   { font-size:10.5px; }
  .artifacts-grid { grid-template-columns:1fr; }

  /* ── Battlecard ── */
  .bc-header { padding:16px; flex-direction:column; gap:10px; }
  .bc-comp-name { font-size:20px; }
  .bc-comp-deck { font-size:12px; }
  .bc-grid { grid-template-columns:1fr; }
  .bc-zone { padding:14px; }
  .bc-regional-bar { font-size:10px; padding:7px 12px; }
  .rb-hint { display:none; }
  .prac-grid { grid-template-columns:1fr; }
  .win-body, .obj-response, .risk-detail, .proof-text { font-size:11.5px; }
  .deep-toggle { font-size:11px; padding:10px 14px; }
  .deep-body   { padding:14px; }

  /* ── AI chat ── */
  .ai-messages { max-height:200px; }
  .ai-bubble { font-size:11.5px; }
  .ai-chip   { font-size:9.5px; }

  /* ── Comparison table ── */
  .comp-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* ── Selector ── */
  .sel-inner { padding:0 14px; }
  .comp-grid { grid-template-columns:1fr 1fr; gap:6px; }
  .comp-btn  { padding:10px; }
  .comp-btn-name { font-size:11px; }
}


/* ── Agenda section ── */
.agenda-wrap { }
.agenda-header { display:flex; align-items:center; margin-bottom:14px; }
.agenda-title { font-size:13px; font-weight:700; color:var(--t1); }
.agenda-item { display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--r2); align-items:flex-start; }
.agenda-item:last-child { border-bottom:none; }
.agenda-num { width:22px; height:22px; border-radius:50%; background:var(--v-blue-dim); border:1px solid var(--v-blue); color:var(--v-blue); font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
.agenda-item-title { font-size:13px; font-weight:700; color:var(--t1); margin-bottom:2px; }
.agenda-item-sub { font-size:11.5px; color:var(--t3); line-height:1.5; }

/* ── Artifacts section ── */
.artifacts-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px; }
.artifact-card { background:var(--s3); border:1px solid var(--r1); border-radius:var(--radius); padding:13px 14px; display:flex; flex-direction:column; gap:5px; }
.artifact-icon { font-size:20px; }
.artifact-title { font-size:12px; font-weight:700; color:var(--t1); }
.artifact-desc { font-size:11px; color:var(--t3); line-height:1.5; flex:1; }
.artifact-link { font-size:11px; font-weight:600; color:var(--v-blue); margin-top:4px; }


/* ── Atlas AI talking point highlight ── */
.tp-item-atlas {
  border-left: 3px solid var(--v-green);
  background: rgba(139,224,0,0.04);
}
.tp-ask-atlas {
  border-left-color: var(--v-green) !important;
}

/* ── Mobile bottom nav (shows when v-nav is hidden) ── */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--v-black);
  border-top: 1px solid var(--r1);
  z-index: 200;
  padding: 0;
  height: 52px;
}
.mobile-nav-inner {
  display: flex;
  height: 100%;
}
.mobile-nav-btn {
  flex: 1;
  background: transparent;
  border: none;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  color: var(--t3);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: color 0.15s;
  padding: 0;
}
.mobile-nav-btn.active { color: var(--v-blue); }
.mobile-nav-icon { font-size: 17px; line-height: 1; }

@media (max-width:768px) {
  .mobile-nav { display: flex; }
  /* Add bottom padding to portal so content isn't hidden behind nav */
  #portal { padding-bottom: 52px; }
}

/* ══════════════════════════════════════════════════
   5-MINUTE MODE
   Hides everything except: triggers, talking points,
   the opener/ask lines of contact. Depth on demand.
   ══════════════════════════════════════════════════ */
.mode-5min .info-card .expand-section,
.mode-5min .info-card .drivers-block,
.mode-5min .info-card .incident-block,
.mode-5min .info-card .invest-block,
.mode-5min .info-card .varonis-ref-block,
.mode-5min .info-card .tech-stack-grid,
.mode-5min .info-card .tags-row,
.mode-5min .info-card .activity-block,
.mode-5min .info-card .li-activity-link,
.mode-5min .info-card .desc-text,
.mode-5min .info-card .micro-label,
.mode-5min .info-card .snapshot-kv { display: none; }

/* Keep: photo + name + role badge + persona cares + opener + tp-ask */
.mode-5min .info-card .attendee-block { padding: 8px 0; }
.mode-5min .info-card .persona-cares  { display: flex; }
.mode-5min .info-card .opener-block   { display: block; }
.mode-5min .tp-ctx  { display: none !important; }
.mode-5min .tp-ctx-btn { display: none; }

/* In 5-min mode, keep triggers and talking points fully visible */
.mode-5min .triggers-row,
.mode-5min .tp-list,
.mode-5min .tp-item { display: block; }

/* Deal context and battlecard: collapse in 5-min mode */
.mode-5min .info-card ~ .section-head ~ .info-card { }
.mode-5min #brief-battlecard-section { display: none; }
.mode-5min .bc-zone:not(.bc-zone-first) { display: none; }
.mode-5min .deep-toggle,
.mode-5min .bc-regional-bar,
.mode-5min .ai-panel { display: none; }

/* ══════════════════════════════════════════════════
   PERSONA CARES + ROLE-IN-DEAL
   ══════════════════════════════════════════════════ */
.persona-cares {
  font-size: 11.5px; color: var(--t2); line-height: 1.55;
  padding: 8px 12px; margin: 8px 0 6px;
  background: var(--v-blue-edge); border-left: 3px solid var(--v-blue);
  border-radius: 3px; display: flex; align-items: flex-start; gap: 6px;
}
.persona-cares-label {
  font-size: 8px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--v-blue);
  white-space: nowrap; margin-top: 2px; margin-right: 4px; flex-shrink: 0;
}

/* ══════════════════════════════════════════════════
   TALKING POINT CARDS (one-line scripts)
   ══════════════════════════════════════════════════ */
.tp-label {
  font-size: 9px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--t4); margin-bottom: 5px;
}
.tp-ctx-btn {
  font-size: 10px; font-weight: 600; color: var(--v-blue);
  background: transparent; border: none; cursor: pointer;
  padding: 4px 0 0; display: block; transition: color 0.15s;
}
.tp-ctx-btn:hover { color: #3396FF; }
.tp-ctx {
  font-size: 12px; color: var(--t3); line-height: 1.6;
  padding: 8px 0 2px; border-top: 1px solid var(--r2); margin-top: 6px;
}

/* Strip active button highlight */
.brief-action-btn.active {
  background: var(--v-blue-dim);
  border-color: var(--rb);
  color: var(--v-blue);
}

/* ══════════════════════════════════════════════════
   NATURAL LANGUAGE INPUT
   ══════════════════════════════════════════════════ */
.nl-input-wrap {
  max-width: var(--container-max); margin: 0 auto;
  padding: 20px 24px 0;
}
.nl-input-inner { max-width: 860px; }
.nl-label {
  font-size: 12px; font-weight: 700; color: var(--t2);
  margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
}
.nl-row { display: flex; gap: 8px; }
.nl-input {
  flex: 1; background: var(--s1); border: 1px solid var(--rb);
  border-radius: var(--radius); padding: 12px 16px;
  color: var(--t1); font-family: var(--font); font-size: 14px;
  outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.nl-input:focus { border-color: var(--v-blue); box-shadow: 0 0 0 3px var(--v-blue-dim); }
.nl-input::placeholder { color: var(--t4); }
.nl-parse-btn {
  background: var(--v-blue); border: none; border-radius: var(--radius);
  padding: 12px 20px; color: white; font-family: var(--font);
  font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: background 0.15s;
}
.nl-parse-btn:hover { background: var(--v-blue-dark); }

/* Helper sentence under the NL input — does the teaching work that the
   visible form used to do, since the form is now collapsed by default. */
.nl-helper {
  font-size: 12.5px; color: var(--t3); margin: 0 0 12px;
  line-height: 1.5; max-width: 720px;
}
.nl-helper strong { color: var(--t2); font-weight: 700; }

/* Format-hint chips — labelled breakdown of a good prompt, shown beneath the
   input so the rep sees what each part of the placeholder corresponds to. */
.nl-format-hint {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px;
}
.nl-format-chip {
  font-size: 11px; color: var(--t3);
  background: var(--s2); border: 1px solid var(--r1);
  padding: 4px 10px; border-radius: 14px;
  display: inline-flex; align-items: center; gap: 6px;
}
.nl-format-chip em { font-style: normal; color: var(--t1); font-weight: 600; }
.nl-format-key {
  font-size: 9px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--v-blue);
}

/* Advanced (form) panel toggle. Closed by default — keeps the natural-language
   path as the unambiguous primary choice. */
.intake-advanced {
  max-width: var(--container-max); margin: 0 auto; padding: 0 24px;
}
.intake-advanced-toggle {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; margin-top: 24px;
  background: var(--s2); border: 1px solid var(--r1); border-radius: var(--radius);
  color: var(--t2); font-family: var(--font); cursor: pointer;
  text-align: left; transition: all 0.15s;
}
.intake-advanced-toggle:hover { background: var(--s3); border-color: var(--rb); }
.intake-advanced-toggle-label {
  font-size: 13px; font-weight: 700; color: var(--t1);
}
.intake-advanced-toggle-sub {
  font-size: 11.5px; color: var(--t3); flex: 1;
  margin-left: 4px;
}
.intake-advanced-arrow {
  font-size: 14px; color: var(--t3); transition: transform 0.2s;
}
.intake-advanced-toggle.open .intake-advanced-arrow {
  transform: rotate(180deg);
  color: var(--v-blue);
}
.intake-advanced-toggle.open {
  border-color: var(--v-blue);
  background: var(--v-blue-dim);
}
.intake-advanced-body {
  padding-top: 16px;
}

/* Action row: Clear + Generate side-by-side at the bottom of the form. */
.intake-action-row {
  display: flex; gap: 10px; margin-top: 16px; align-items: center;
}
.intake-clear-btn {
  background: transparent; border: 1px solid var(--r1);
  border-radius: var(--radius); padding: 10px 16px;
  color: var(--t3); font-family: var(--font); font-size: 12px;
  font-weight: 600; cursor: pointer; transition: all 0.15s;
  white-space: nowrap;
}
.intake-clear-btn:hover { color: var(--t1); border-color: var(--t3); background: var(--s2); }
.intake-action-row .go-btn { flex: 1; margin-top: 0; }

@media (max-width: 768px) {
  .nl-input-wrap { padding: 14px 14px 0; }
  .nl-row { flex-direction: column; }
  .nl-format-hint { gap: 4px; }
  .nl-format-chip { font-size: 10.5px; padding: 3px 8px; }
  .intake-advanced { padding: 0 14px; }
  .intake-advanced-toggle { flex-wrap: wrap; }
  .intake-advanced-toggle-sub { width: 100%; margin-left: 0; }
}
.nl-confirm-strip {
  max-width: var(--container-max);
  margin: 16px auto 0;
  padding: 14px 18px;
  background: linear-gradient(180deg, var(--v-blue-dim), rgba(0,119,255,0.04));
  border: 1px solid var(--rb);
  border-radius: var(--radius);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  animation: nlConfirmIn 0.25s ease;
}
@keyframes nlConfirmIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nl-conf-label {
  font-size: 9px; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--v-blue);
  flex-shrink: 0;
}
.nl-conf-pills { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; align-items: center; }
.nl-conf-pill {
  font-size: 12px; font-weight: 600; color: var(--t1);
  background: var(--s4); border: 1px solid var(--r1);
  padding: 4px 10px; border-radius: 14px;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; transition: all 0.15s;
  font-family: var(--font);
}
.nl-conf-pill:hover {
  border-color: var(--v-blue);
  background: var(--v-blue-dim);
  color: var(--t1);
}
.nl-conf-pill-edit {
  font-size: 10px; color: var(--t4); margin-left: 2px;
  transition: color 0.15s;
}
.nl-conf-pill:hover .nl-conf-pill-edit { color: var(--v-blue); }

/* Empty-state pill — "+ Add company" — visually different so it reads as
   an affordance to add, not a value to edit. */
.nl-conf-pill-empty {
  background: transparent;
  border: 1px dashed var(--r1);
  color: var(--t3);
  font-weight: 600;
}
.nl-conf-pill-empty:hover {
  border-style: solid;
  border-color: var(--v-blue);
  color: var(--v-blue);
  background: var(--v-blue-dim);
}

/* Required-and-empty (account) — amber border to nudge the rep */
.nl-conf-pill-required {
  border-color: var(--v-amber, #d4943a);
  border-style: solid;
  color: var(--v-amber, #d4943a);
  background: var(--v-amber-dim, rgba(247,181,79,0.10));
}
.nl-conf-pill-required:hover {
  border-color: var(--v-amber, #d4943a);
  background: var(--v-amber, #d4943a);
  color: white;
}

/* Inline editors that replace pills during editing */
.nl-conf-pill-editor {
  font-family: var(--font);
  font-size: 12px;
  border: 1px solid var(--v-blue);
  background: white;
  color: var(--t1);
  border-radius: 14px;
  padding: 4px 10px;
  outline: none;
  min-width: 160px;
  height: 26px;
  box-sizing: border-box;
}
.nl-conf-pill-editor:focus {
  box-shadow: 0 0 0 2px var(--v-blue-dim);
}
.nl-conf-pill-editor-input { min-width: 200px; }
.nl-conf-pill-editor-select { padding-right: 24px; cursor: pointer; }

.nl-conf-actions { display: flex; gap: 8px; flex-shrink: 0; }
.nl-conf-cancel {
  background: transparent; border: 1px solid var(--r1);
  border-radius: var(--radius); padding: 6px 12px;
  color: var(--t3); font-family: var(--font); font-size: 12px;
  font-weight: 600; cursor: pointer; transition: all 0.15s;
}
.nl-conf-cancel:hover { color: var(--t1); border-color: var(--t3); }
.nl-conf-go {
  background: var(--v-blue); border: none;
  border-radius: var(--radius); padding: 6px 14px;
  color: white; font-family: var(--font); font-size: 12px;
  font-weight: 700; cursor: pointer; transition: background 0.15s;
}
.nl-conf-go:hover:not(:disabled) { background: var(--v-blue-dark); }
.nl-conf-go.nl-conf-go-disabled,
.nl-conf-go:disabled {
  background: var(--s4);
  color: var(--t4);
  cursor: not-allowed;
}
.nl-conf-go.nl-conf-go-disabled:hover,
.nl-conf-go:disabled:hover {
  background: var(--s4);
}

/* Warn-state strip when account is missing — amber border on the whole strip */
.nl-confirm-warn {
  background: linear-gradient(180deg, var(--v-amber-dim, rgba(247,181,79,0.10)), rgba(247,181,79,0.03));
  border-color: var(--v-amber, #d4943a);
}
.nl-conf-helper {
  width: 100%;
  font-size: 12px; color: var(--t2); line-height: 1.5;
  padding-top: 4px;
}
.nl-conf-helper em {
  font-style: normal; color: var(--t1); font-weight: 600;
  background: var(--s2); padding: 1px 6px; border-radius: 3px;
}

/* Disabled state for the structured-form Generate button */
.go-btn.go-btn-disabled,
.go-btn:disabled {
  background: var(--s4) !important;
  color: var(--t4) !important;
  cursor: not-allowed !important;
  border-color: var(--r1) !important;
  box-shadow: none !important;
}
.go-btn.go-btn-disabled:hover,
.go-btn:disabled:hover {
  background: var(--s4) !important;
  transform: none !important;
}

@media (max-width: 768px) {
  .nl-confirm-strip { flex-direction: column; align-items: flex-start; }
  .nl-conf-actions { width: 100%; }
  .nl-conf-go, .nl-conf-cancel { flex: 1; }
}

@media (max-width: 768px) {
  .nl-input-wrap { padding: 14px 14px 0; }
  .nl-row { flex-direction: column; }
}

/* ══════════════════════════════════════════════════
   5-MINUTE CARD
   ══════════════════════════════════════════════════ */
.fivemin-card {
  background: var(--s2); border: 1px solid var(--rb);
  border-radius: var(--radius-lg); padding: 20px 22px;
  margin-bottom: 14px;
}
.fivemin-header {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 12px; margin-bottom: 14px;
}
.fivemin-title {
  font-size: 11px; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--v-blue); margin-bottom: 4px;
}
.fivemin-situation {
  font-size: 15px; font-weight: 800; color: var(--t1);
  letter-spacing: -0.02em; line-height: 1.2;
}
.fivemin-expand-btn {
  font-family: var(--font); font-size: 11px; font-weight: 700;
  color: var(--v-blue); background: var(--v-blue-dim);
  border: 1px solid var(--rb); border-radius: 20px;
  padding: 5px 14px; cursor: pointer; white-space: nowrap;
  transition: all 0.15s; flex-shrink: 0;
}
.fivemin-expand-btn:hover { background: var(--v-blue-edge); }
.fivemin-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.fivemin-section-label {
  font-size: 9px; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--t4);
  margin-bottom: 8px; margin-top: 2px;
}
.fivemin-trigger {
  display: flex; gap: 8px; align-items: flex-start;
  margin-bottom: 10px;
}
.fivemin-trigger-headline {
  font-size: 12px; font-weight: 700; color: var(--t1);
  margin-bottom: 3px; line-height: 1.3;
}
.fivemin-trigger-ask {
  font-size: 12px; font-weight: 700; color: var(--v-blue);
  line-height: 1.4;
}
.fivemin-tp {
  display: flex; flex-direction: column; gap: 3px;
  margin-bottom: 10px; padding: 8px 10px;
  background: var(--s3); border-radius: var(--radius);
  border-left: 2px solid var(--v-blue);
}
.fivemin-tp-label {
  font-size: 9px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--v-blue);
}
.fivemin-tp-ask {
  font-size: 12px; font-weight: 600; color: var(--t1); line-height: 1.4;
}
.fivemin-priority {
  font-size: 12px; color: var(--v-green); font-weight: 600;
  line-height: 1.6; padding: 8px 12px;
  background: var(--v-green-dim); border-radius: var(--radius);
  border-left: 2px solid var(--v-green);
}

@media (max-width: 768px) {
  .fivemin-cols { grid-template-columns: 1fr; gap: 8px; }
  .fivemin-situation { font-size: 13px; }
}

/* ══════════════════════════════════════════════════
   SOURCE / CONFIDENCE BADGES
   ══════════════════════════════════════════════════ */
.src-badge {
  display: inline-block; font-size: 8px; font-weight: 800;
  padding: 1px 4px; border-radius: 3px; vertical-align: middle;
  margin-left: 4px; cursor: help;
}
.src-confirmed { background: var(--v-green-dim); color: var(--v-green); border: 1px solid rgba(139,224,0,0.25); }
.src-likely    { background: var(--v-amber-dim);  color: var(--v-amber); border: 1px solid rgba(245,166,35,0.25); }
.src-inferred  { background: var(--s4); color: var(--t4); border: 1px solid var(--r1); }

/* ══════════════════════════════════════════════════
   TRIGGER ASK LINE (in full triggers-row)
   ══════════════════════════════════════════════════ */
.trigger-ask {
  font-size: 12px; font-weight: 700; color: var(--v-blue);
  padding: 6px 10px; margin: 6px 0 2px;
  background: var(--v-blue-edge); border-left: 2px solid var(--v-blue);
  border-radius: 3px; line-height: 1.4;
}

/* ── Intake OR divider ── */
.intake-or-divider {
  display: flex; align-items: center; gap: 14px;
  max-width: var(--container-max); margin: 20px auto 0; padding: 0 24px;
}
.intake-or-line { flex: 1; height: 1px; background: var(--r1); }
.intake-or-text {
  font-size: 11px; font-weight: 600; color: var(--t4);
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}

/* ── Fivemin loading state ── */
.fivemin-loading {
  padding: 12px 0 4px;
  font-size: 13px; color: var(--t4);
}

@media (max-width:768px) {
  .intake-or-divider { padding: 0 14px; }
}

/* ── 5-min card contact row ── */
.fivemin-contact-row {
  padding: 7px 0;
  border-top: 1px solid var(--r2);
}
.fivemin-contact-name {
  font-size: 13px; font-weight: 700; color: var(--t1); margin-bottom: 3px;
}
.fivemin-contact-role {
  font-size: 11px; font-weight: 400; color: var(--t3); margin-left: 6px;
}
.fivemin-contact-opener {
  font-size: 12px; color: var(--v-blue); line-height: 1.45; font-style: italic;
}

/* ── 5-min card account snapshot strip ── */
.fivemin-account-strip {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px; padding: 8px 0 6px;
  border-top: 1px solid var(--r1); margin-top: 6px;
  font-size: 11.5px;
}
.fas-label {
  font-size: 9px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--t4);
}
.fas-value { color: var(--t1); font-weight: 600; margin-left: 4px; }
.fas-sep { color: var(--t4); padding: 0 4px; }
.fivemin-drivers {
  font-size: 12px; color: var(--v-green); font-weight: 600;
  line-height: 1.55; padding: 8px 10px; margin: 6px 0;
  background: var(--v-green-dim); border-left: 2px solid var(--v-green);
  border-radius: 3px;
}
.fivemin-incident {
  font-size: 11.5px; color: var(--v-red); font-weight: 600;
  padding: 6px 10px; margin: 4px 0 6px;
  background: var(--v-red-dim); border-left: 2px solid var(--v-red);
  border-radius: 3px;
}
/* ASK question lifted into the incident strip itself — replaces what used to
   be a duplicate "Hot trigger" repetition of the breach. The question is
   what makes the breach actionable in a meeting; sitting it inside the strip
   keeps the visual prominence without doubling the same fact across two
   sections. Slightly smaller, indented, and tinted slightly differently from
   the breach text to read as commentary on it rather than another item. */
.fivemin-incident-ask {
  margin-top: 6px;
  padding-top: 6px;
  padding-left: 16px;
  border-top: 1px dashed var(--v-red);
  font-size: 11px;
  font-weight: 700;
  color: var(--v-red);
  line-height: 1.4;
  letter-spacing: 0.005em;
  position: relative;
}
.fivemin-incident-ask::before {
  content: '↳';
  position: absolute;
  left: 2px;
  top: 6px;
  opacity: 0.6;
  font-weight: 400;
}

/* "Limited public information" banner — appears when the deep research call
   returned very few populated fields. Quieter than the breach strip,
   informational tone. */
.fivemin-emptystate {
  background: var(--s2);
  border: 1px solid var(--r1);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin: 6px 0 10px;
  font-size: 11.5px;
  line-height: 1.5;
}
.fivemin-emptystate-head {
  font-weight: 700;
  color: var(--t2);
  margin-bottom: 4px;
}
.fivemin-emptystate-body {
  color: var(--t3);
}

/* "No public breach" variant — same structural prominence as the breach
   strip, but in a quieter neutral tone. The rep still gets a defensible
   opener even when nothing dramatic has happened. */
.fivemin-incident-clean {
  color: var(--t2);
  background: var(--s2);
  border-left-color: var(--t4);
}
.fivemin-incident-head-clean {
  color: var(--t3);
}
.fivemin-incident-clean .fivemin-incident-ask {
  color: var(--v-blue);
  border-top-color: var(--r1);
}

/* ── Collapsible battlecard zones ── */
.bc-zone-collapsible { padding: 0; }
.bc-zone-toggle {
  width: 100%; text-align: left; background: none; border: none;
  font-family: var(--font); font-size: 11px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--t2); cursor: pointer; padding: 12px 16px;
  display: flex; justify-content: space-between; align-items: center;
  transition: color 0.15s;
}
.bc-zone-toggle:hover { color: var(--t1); }
.bc-zone-arrow { font-size: 12px; color: var(--t4); }
.bc-zone-body { padding: 0 16px 14px; }

/* ── 5-min featured trigger ── */
.fivemin-trigger-featured {
  background: var(--v-red-dim);
  border-left: 3px solid var(--v-red);
  border-radius: var(--radius);
  padding: 8px 10px;
  margin-bottom: 4px;
}
.fivemin-trigger-featured .fivemin-trigger-headline { font-size: 13px; }

/* ── Resources bar (replaces ticker) ── */
.resources-bar {
  background: var(--s1); border-bottom: 1px solid var(--r1);
  padding: 0; min-height: 36px;
}
.resources-bar-inner {
  max-width: var(--container-max); margin: 0 auto;
  padding: 0 24px; display: flex; align-items: center;
  gap: 10px; height: 36px; overflow: hidden;
}
.resources-bar-label {
  font-size: 9px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--t4);
  white-space: nowrap; flex-shrink: 0;
}
.resources-links {
  display: flex; gap: 4px; flex: 1; overflow: hidden; align-items: center;
}
.resource-link {
  font-size: 11px; font-weight: 600; color: var(--t2);
  background: var(--s3); border: 1px solid var(--r1);
  border-radius: 20px; padding: 3px 10px;
  white-space: nowrap; transition: all 0.15s; text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px;
}
.resource-link:hover { background: var(--v-blue-dim); border-color: var(--rb); color: var(--v-blue); }
.resources-bar-note {
  font-size: 10px; color: var(--t4); white-space: nowrap; flex-shrink: 0; margin-left: auto;
}

/* ── Brief age indicator ── */
.brief-age {
  font-size: 10px; color: var(--t4); white-space: nowrap;
}

/* ── Competitive AI strip button ── */
.comp-ai-btn {
  background: var(--v-blue-dim) !important;
  border-color: var(--rb) !important;
  color: var(--v-blue) !important;
}

/* ── SFDC placeholder ── */
.sfdc-placeholder {
  display: flex; flex-direction: column; align-items: center;
  padding: 18px 12px; gap: 8px; text-align: center;
}
.sfdc-ph-icon { font-size: 22px; opacity: 0.5; }
.sfdc-ph-text { font-size: 12px; font-weight: 700; color: var(--t2); }
.sfdc-ph-sub { font-size: 11px; color: var(--t4); line-height: 1.5; max-width: 240px; }
.sfdc-ph-btn {
  font-family: var(--font); font-size: 11px; font-weight: 700;
  color: var(--v-amber); background: var(--v-amber-dim);
  border: 1px solid rgba(245,166,35,0.3); border-radius: 20px;
  padding: 5px 14px; cursor: pointer; margin-top: 4px;
  transition: all 0.15s;
}
.sfdc-ph-btn:hover { background: rgba(245,166,35,0.2); }

/* ── Mobile fixes ── */
@media (max-width: 768px) {
  .resources-bar-inner { gap: 6px; padding: 0 14px; }
  .resources-bar-note { display: none; }
  .resource-link { font-size: 10px; padding: 2px 8px; }
  .fivemin-card { padding: 14px; }
  .brief-age { display: none; } /* too cramped on mobile strip */
  .comp-ai-btn { display: none !important; } /* accessed via battlecard scroll on mobile */
}

/* ══════════════════════════════════════════════════════════
   RECENT BRIEFS BAR
══════════════════════════════════════════════════════════ */
.recent-briefs-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 24px; background: var(--s2);
  border-bottom: 1px solid var(--r1); flex-wrap: wrap;
}
.recent-briefs-label {
  font-size: 10px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--t4); white-space: nowrap; flex-shrink: 0;
}
.recent-briefs-list { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.recent-brief-chip {
  font-family: var(--font); font-size: 11px; font-weight: 600;
  color: var(--t2); background: var(--s3); border: 1px solid var(--r1);
  border-radius: 20px; padding: 4px 12px; cursor: pointer; white-space: nowrap;
  transition: all 0.15s; max-width: 280px; overflow: hidden; text-overflow: ellipsis;
}
.recent-brief-chip:hover { background: var(--v-blue-dim); border-color: var(--rb); color: var(--v-blue); }
.recent-briefs-clear {
  font-family: var(--font); font-size: 10px; color: var(--t4); background: none;
  border: none; cursor: pointer; padding: 4px 6px; flex-shrink: 0;
  transition: color 0.15s;
}
.recent-briefs-clear:hover { color: var(--v-red); }

/* ══════════════════════════════════════════════════════════
   REFINE BRIEF — persistent chip + expandable input

   The Refine action moved out of the More menu and onto a persistent
   chip below the strip (strip-refine-row). Click the chip to expand
   into an input field. Click the × or submit to collapse back to chip.

   This makes Refine a primary affordance — not buried two clicks deep
   in More — without taking up a slot in the strip's main button row.
══════════════════════════════════════════════════════════ */
.strip-refine-row {
  display: flex; align-items: center; gap: 8px;
  max-width: 1440px; margin: 8px auto 0; padding: 0 24px;
}
.strip-refine-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px dashed var(--rb);
  border-radius: 999px; padding: 6px 14px;
  font-family: var(--font); font-size: 12px; font-weight: 500;
  color: var(--t3); cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.strip-refine-chip:hover {
  border-color: var(--v-blue); color: var(--v-blue);
  background: var(--v-blue-dim);
  border-style: solid;
}
.strip-refine-chip-icon { font-size: 12px; }
.strip-refine-chip-label { letter-spacing: 0.005em; }

.strip-refine-wrap {
  display: flex; align-items: center; gap: 0;
  animation: stripRefineIn 0.2s ease;
}
@keyframes stripRefineIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
.strip-refine-input {
  font-family: var(--font); font-size: 12px; font-weight: 500;
  background: var(--s3); border: 1px solid var(--v-blue);
  border-radius: 4px 0 0 4px; padding: 6px 12px;
  color: var(--t1); outline: none; min-width: 380px; flex: 1;
  transition: border-color 0.15s;
}
.strip-refine-input:focus { background: var(--s2); }
.strip-refine-btn {
  font-family: var(--font); font-size: 12px; font-weight: 700;
  background: var(--v-blue); color: white; border: 1px solid var(--v-blue);
  border-radius: 0; padding: 6px 12px; cursor: pointer;
  transition: opacity 0.15s;
}
.strip-refine-btn:hover { opacity: 0.85; }
.strip-refine-cancel {
  font-family: var(--font); font-size: 16px; font-weight: 500;
  background: var(--s3); color: var(--t3);
  border: 1px solid var(--rb); border-left: none;
  border-radius: 0 4px 4px 0; padding: 4px 10px; cursor: pointer;
  line-height: 1; transition: color 0.15s, background 0.15s;
}
.strip-refine-cancel:hover { color: var(--t1); background: var(--s2); }

/* ══════════════════════════════════════════════════════════
   MOBILE STRIP OVERFLOW MENU
══════════════════════════════════════════════════════════ */
.strip-overflow-wrap { position: relative; display: none; } /* hidden on desktop */
.strip-overflow-btn { font-size: 16px !important; letter-spacing: 0.05em; }
.strip-overflow-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 200;
  background: var(--s2); border: 1px solid var(--r1); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3); min-width: 180px;
  overflow: hidden;
}
.sof-btn {
  display: block; width: 100%; text-align: left;
  font-family: var(--font); font-size: 12px; font-weight: 600;
  color: var(--t2); background: none; border: none;
  padding: 10px 16px; cursor: pointer; transition: background 0.12s;
}
.sof-btn:hover { background: var(--s3); color: var(--t1); }

/* ══════════════════════════════════════════════════════════
   VISUAL TIER HIERARCHY — section head tiers
══════════════════════════════════════════════════════════ */
/* Tier 1: Hot trigger featured in brief (already styled via fivemin-trigger-featured) */
/* Tier 2: Section heads get clearer weight distinction */
.section-head-t1 {
  font-size: 9px; font-weight: 900; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--v-blue);
  border-bottom: 2px solid var(--v-blue); padding-bottom: 6px; margin: 16px 0 10px;
}
.section-head-t2 {
  font-size: 9px; font-weight: 800; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--t2);
  border-bottom: 1px solid var(--r2); padding-bottom: 5px; margin: 14px 0 8px;
}

/* ══════════════════════════════════════════════════════════
   LINKEDIN TIMELINE
══════════════════════════════════════════════════════════ */
.li-timeline { display: flex; flex-direction: column; gap: 10px; }
.li-timeline-item {
  padding: 8px 10px; background: var(--s3);
  border-left: 2px solid var(--rb); border-radius: 0 var(--radius) var(--radius) 0;
}
.li-timeline-date {
  font-size: 9px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--v-blue); margin-bottom: 3px;
}
.li-timeline-text { font-size: 12px; color: var(--t2); line-height: 1.5; }

/* ══════════════════════════════════════════════════════════
   DATA CONFIDENCE INDICATOR
══════════════════════════════════════════════════════════ */
.data-confidence-row {
  display: flex; align-items: center; gap: 4px;
  font-size: 9.5px; color: var(--t4); padding: 8px 0 2px;
  border-top: 1px solid var(--r1); margin-top: 10px;
}
.dc-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
}
.dc-verified { background: var(--v-green); }
.dc-inferred { background: var(--v-amber); }

/* ══════════════════════════════════════════════════════════
   MOBILE OVERRIDES
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Show overflow menu, hide verbose strip buttons */
  .strip-overflow-wrap { display: block; }
  .brief-action-btn:not(#mode-btn):not([onclick="resetBrief()"]):not(.strip-overflow-btn) {
    display: none !important;
  }
  /* Refine input goes full width */
  .strip-refine-input { width: 100% !important; }
  .strip-refine-wrap { width: 100%; }
  /* Recent briefs bar scrolls horizontally */
  .recent-briefs-list { flex-wrap: nowrap; overflow-x: auto; }
}

/* ══════════════════════════════════════════════════════════
   R3 — MOBILE-FIRST PASS (May 2026)
   The benchmark review flagged the rep's mobile experience as
   under-served. This block addresses:
   - touch targets too small for thumbs (was 8-12px tall, iOS
     minimum is 44px)
   - the 5-min card not making full use of narrow viewports
   - the action strip overflow menu being too cramped
   - opener variants stacking awkwardly when their angle labels
     don't have room to breathe
   - the loading screen wasting vertical space on phones
   Uses existing 768px breakpoint where possible, plus a tighter
   480px breakpoint for phone-only refinements.
══════════════════════════════════════════════════════════ */

/* Phone + small tablet */
@media (max-width: 768px) {
  /* ─── Touch targets ─── */
  /* The inline "more"/"less" toggles and citation chips were the worst
     offenders — barely tap-able. Bump them to a thumb-friendly size while
     keeping them visually unobtrusive. */
  .fm-show-more {
    padding: 6px 8px;
    font-size: 11px;
    /* Inline-block ensures the padding actually creates a hit area
       (anchors and buttons are inline by default and ignore vertical
       padding for pointer events in some browsers). */
    display: inline-block;
    vertical-align: baseline;
    /* Keep the visual weight light — the hit area is bigger than the
       visible text but the styling stays minimal. */
    margin: 0 -2px;
  }
  .cite-chip {
    padding: 4px 8px;
    font-size: 10.5px;
    /* Slightly bigger than desktop so reps can tap to source mid-meeting */
  }
  /* Strip overflow button gets a real hit area. The font-size:16px in the
     base rule was just glyph size — the button itself was tiny. */
  .strip-overflow-btn {
    min-width: 44px;
    min-height: 36px;
    padding: 6px 10px !important;
    font-size: 18px !important;
  }
  /* Overflow menu items — bigger tap targets, more breathing room */
  .strip-overflow-menu .sof-btn,
  .strip-more-menu .sof-btn {
    padding: 12px 14px;
    font-size: 13px;
    min-height: 44px;
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
  }
  .strip-overflow-menu,
  .strip-more-menu {
    /* Slightly wider on mobile so menu items don't truncate */
    min-width: 220px;
  }

  /* ─── 5-min card density ─── */
  /* Existing rule sets padding:14px which is fine, but the inner content
     can use more horizontal space than desktop margins suggest. */
  .fivemin-card {
    /* Slightly tighter vertical, same horizontal */
    padding: 14px 14px 16px;
  }

  /* Header: avatar + name. On narrow screens, allow the name+meta to wrap
     naturally inline. The meta carries its own leading " · " separator
     in the markup so it reads cleanly whether on the same line or wrapped. */
  .fivemin-person-name {
    font-size: 17px;
    line-height: 1.3;
  }
  .fivemin-person-meta {
    font-size: 12.5px;
  }
  .fivemin-eyebrow {
    font-size: 10px;
    letter-spacing: 0.16em;
    margin-bottom: 6px;
  }

  /* ─── Account context line ─── */
  /* Wraps cleanly already, just tighten the line-height for denser packing */
  .fivemin-context-line {
    line-height: 1.5;
    padding: 8px 0 10px;
    font-size: 11px;
  }

  /* ─── Past-breach strip ─── */
  /* Ensure the ASK below the breach text is clearly delineated even on
     a narrow screen. Slightly tighter padding so it doesn't dominate. */
  .fivemin-incident {
    padding: 8px 12px;
    margin: 4px 0 8px;
  }
  .fivemin-incident-head { font-size: 9px; }
  .fivemin-incident-ask {
    font-size: 11.5px;
    padding-left: 14px;
  }
  /* "No public breach" clean variant — same structural treatment */
  .fivemin-incident-clean { padding: 8px 12px; }

  /* ─── Empty-state banner ─── */
  /* The "Limited public information on…" banner gets a touch more padding
     on mobile so the body text doesn't crowd the head. */
  .fivemin-emptystate {
    padding: 12px;
    margin: 6px 0 12px;
  }
  .fivemin-emptystate-body { line-height: 1.55; }

  /* ─── Things-to-know list ─── */
  /* Slightly more vertical padding per item on mobile so each thing has
     room to breathe with the new sowhat sub-line. */
  .fivemin-thing {
    padding: 8px 0;
    gap: 10px;
  }
  .fivemin-thing-text {
    font-size: 12.5px;
    line-height: 1.5;
  }
  .fivemin-thing-sowhat {
    font-size: 12px;
    margin-top: 4px;
  }

  /* ─── Compact contact panel ─── */
  /* The two cells already stack at 768px (rule earlier in the file). On
     phones we want them to feel like cards, not lists — slightly more
     padding helps the cares_about line and the personalised badge land. */
  .fivemin-contact-cell {
    padding: 10px 12px;
  }
  .fivemin-cell-text { font-size: 12px; line-height: 1.5; }

  /* ─── Lead-card / opener block ─── */
  /* Already stacks at 768px. Bump padding so each opener feels like a
     proper card the rep can read at a glance. */
  .fivemin-leadcard {
    padding: 14px 14px 12px;
  }
  .fivemin-leadcard-dual {
    padding: 14px 14px 12px;
  }
  .fivemin-leadcard-grid {
    gap: 10px;
  }
  .fivemin-leadcard-option {
    padding: 12px 14px;
  }
  .fivemin-leadcard-eyebrow {
    /* Allow the eyebrow + sub-line to wrap cleanly */
    line-height: 1.4;
  }
  .fivemin-leadcard-eyebrow-sub {
    display: block;
    margin-top: 2px;
    /* Visually subordinate when it wraps to its own line */
    font-weight: 500;
    color: rgba(255,255,255,0.55);
  }
  .fivemin-leadcard-angle {
    /* The "Breach hook" / "M&A hook" label needs to be more prominent
       on mobile so the rep can scan which opener is which. */
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .fivemin-leadcard-ask {
    font-size: 14px;
    line-height: 1.4;
  }

  /* ─── "More to say" details ─── */
  .fivemin-more {
    padding-top: 12px;
    margin: 14px 0 8px;
  }
  .fivemin-more-summary {
    /* Bigger tap target for the disclosure */
    padding: 6px 0;
    font-size: 12px;
  }
  .fivemin-more-line {
    /* Stack label-above-text on mobile so the question gets full width */
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .fivemin-more-label {
    margin-bottom: 0;
  }

  /* ─── Loading screen ─── */
  /* Existing min-height 60vh was fine; the 40px/48px padding was wasteful
     on small viewports. */
  .brief-loading-wrap {
    padding: 24px 14px;
    min-height: 50vh;
  }
  .brief-loading-card {
    padding: 24px 20px;
    max-width: 100%;
  }

  /* ─── Strip on mobile, refined ─── */
  /* The existing rule at line 1201 already shrinks the strip-inner. Here
     we add a small refinement: the strip-recent-wrap dropdown doesn't
     need the full button label — just the icon. (The Recent button is
     already hidden on mobile by the broader rule above, but if we ever
     promote it back this keeps it sane.) */
  .strip-overflow-menu {
    /* Anchor the menu against the viewport edge so it never clips off-screen */
    right: 0;
    max-width: calc(100vw - 28px);
  }
}

/* Phone-only refinements — narrower than ~480px (small phones in portrait,
   plus folded foldables). Targets the tightest viewports where every pixel
   matters. */
@media (max-width: 480px) {
  /* Strip company name shrinks further so the right-hand action area has
     room for the overflow menu without forcing horizontal scroll. The strip
     stays at top:56px (under the masthead, which is 56px tall on mobile too). */
  .brief-co-name { font-size: 12px; }
  .brief-strip-inner {
    padding: 0 10px;
    gap: 8px;
    height: 42px;
  }

  /* Card padding tightens further */
  .fivemin-card { padding: 12px; }

  /* Avatar shrinks slightly to give more room for the name */
  .fivemin-avatar {
    width: 40px; height: 40px;
    font-size: 13px;
  }
  .fivemin-person-name { font-size: 16px; }

  /* Brief content margins */
  .brief-content { padding: 10px 12px 0; }
}

/* ── Lock screen API key field ── */
.lock-api-row { margin-top: 12px; text-align: center; }
.lock-api-toggle {
  background: none; border: none; font-family: var(--font);
  font-size: 11px; color: var(--t4); cursor: pointer;
  text-decoration: underline; padding: 0; transition: color 0.15s;
}
.lock-api-toggle:hover { color: var(--t2); }

/* ══════════════════════════════════════════════════
   BRIEF LOADING CARD (Option C single-call UX)
══════════════════════════════════════════════════ */
.brief-loading-wrap {
  display: flex; align-items: center; justify-content: center;
  min-height: 60vh; padding: 40px 24px;
}
.brief-loading-card {
  background: var(--s2); border: 1px solid var(--r1);
  border-radius: var(--radius-lg); padding: 40px 48px;
  max-width: 420px; width: 100%; text-align: center;
}
.brief-loading-title {
  font-size: 20px; font-weight: 800; color: var(--t1);
  letter-spacing: -0.02em; margin-bottom: 6px;
}
.brief-loading-sub {
  font-size: 12px; color: var(--t4); margin-bottom: 28px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brief-loading-steps {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 28px; text-align: left;
}
.bls-item {
  font-size: 13px; color: var(--t4); padding: 8px 12px;
  border-radius: var(--radius); transition: all 0.3s ease;
  border: 1px solid transparent;
}
.bls-item.bls-active {
  color: var(--t1); background: var(--s3);
  border-color: var(--rb); font-weight: 600;
}
.bls-item.bls-done {
  color: var(--v-green); font-weight: 600;
}

/* ── R1: Live narration + phase chips ──
   The narration line is what makes the wait FEEL alive — it updates every
   5-7 seconds with a plausible-progress message that references the real
   company name. The dot to its left animates so the rep sees movement
   even between text changes. The phase chips below mark genuine progress
   from the parallel calls (account/contacts/signals) — they go from
   pending (grey dot) to done (filled blue dot) when each promise resolves. */
.brief-loading-narration {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--s3);
  border: 1px solid var(--rb);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 14px;
  text-align: left;
  /* Slightly elevated above the phase chips so it reads as the primary
     "what's happening right now" surface */
  min-height: 42px;
}
.brief-loading-narration-pulse {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--v-blue);
  /* Pulse animation makes the dot feel alive even when the text hasn't
     changed yet. Subtle so it doesn't overpower the text. */
  animation: brief-narration-pulse 1.4s ease-in-out infinite;
}
@keyframes brief-narration-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.2); }
}
.brief-loading-narration-text {
  font-size: 13px;
  color: var(--t1);
  line-height: 1.4;
  font-weight: 500;
  /* When the text changes, fade-in animation gives a smooth visual cue */
  transition: opacity 0.2s ease-out;
}
@keyframes brief-narration-fadein {
  from { opacity: 0.3; transform: translateY(2px); }
  to   { opacity: 1;   transform: translateY(0); }
}
.brief-loading-narration-fade {
  animation: brief-narration-fadein 0.3s ease-out;
}

/* Phase chips — pending (grey) and done (blue). The dot is the indicator;
   the label stays the same colour either way. */
.brief-loading-phases {
  display: flex;
  gap: 14px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  justify-content: center;
}
.blp-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--t4);
  letter-spacing: 0.04em;
}
.blp-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--t4);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.blp-item.blp-done .blp-dot {
  background: var(--v-blue);
  border-color: var(--v-blue);
}
.blp-item.blp-done {
  color: var(--t2);
}

@media (max-width: 768px) {
  .brief-loading-narration {
    padding: 10px 12px;
    min-height: 38px;
  }
  .brief-loading-narration-text {
    font-size: 12.5px;
  }
  .brief-loading-phases {
    gap: 10px;
    margin-bottom: 18px;
  }
  .blp-item {
    font-size: 10.5px;
  }
}

.brief-loading-bar {
  height: 3px; background: var(--s3); border-radius: 2px; overflow: hidden;
}
.brief-loading-fill {
  height: 100%; background: var(--v-blue); border-radius: 2px; width: 0%;
}

/* ── 5-min card show more / show less ── */
.fm-show-more {
  background: none; border: none; padding: 0 2px;
  font-family: var(--font); font-size: 10px; font-weight: 700;
  color: var(--v-blue); cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px; transition: opacity 0.15s;
}
.fm-show-more:hover { opacity: 0.7; }
.fm-show-more-red { color: var(--v-red); }

/* ════════════════════════════════════════════════════════
   ALL 18-FIXES STYLESHEET ADDITIONS
════════════════════════════════════════════════════════ */

/* ── #4 Inline toast (replaces alert) ── */
.vi-toast {
  position: fixed; bottom: 32px; left: 50%;
  transform: translate(-50%, 60px);
  background: var(--s2); color: var(--t1);
  border: 1px solid var(--r1);
  border-radius: var(--radius-lg);
  padding: 12px 22px; font-family: var(--font);
  font-size: 13px; font-weight: 600;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 10000; max-width: 90vw;
}
.vi-toast-show { opacity: 1; transform: translate(-50%, 0); }
.vi-toast-error { border-color: var(--v-red); border-left-width: 3px; }
.vi-toast-warn { border-color: var(--v-amber); border-left-width: 3px; }
.vi-toast-info { border-color: var(--v-blue); border-left-width: 3px; }

/* ── #11 Input error shake ── */
@keyframes inputShake {
  0%,100% { transform: translateX(0); border-color: var(--v-red); }
  25% { transform: translateX(-6px); border-color: var(--v-red); }
  75% { transform: translateX(6px); border-color: var(--v-red); }
}
.input-error-shake { animation: inputShake 0.5s ease; }

/* ── #3 Example chips on intake hero ── */
.intake-example-row {
  display: flex; align-items: center; gap: 8px;
  margin-top: 16px; flex-wrap: wrap; justify-content: center;
}
.intake-example-label {
  font-size: 11px; color: var(--t4);
  letter-spacing: 0.05em;
}
.intake-example-chip {
  font-family: var(--font); font-size: 11.5px; font-weight: 600;
  background: var(--s3); color: var(--t2);
  border: 1px solid var(--r1); border-radius: 20px;
  padding: 5px 14px; cursor: pointer;
  transition: all 0.15s ease;
}
.intake-example-chip:hover {
  background: var(--v-blue-dim); border-color: var(--rb);
  color: var(--v-blue); transform: translateY(-1px);
}

/* ── #5 More menu in strip ── */
.strip-more-wrap, .strip-recent-wrap, .strip-coname-wrap { position: relative; display: inline-block; }
.strip-more-btn { font-weight: 700 !important; }
.strip-more-menu, .strip-recent-menu {
  position: absolute; top: calc(100% + 6px); z-index: 200;
  background: var(--s2); border: 1px solid var(--r1);
  border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  min-width: 200px; max-width: 320px; overflow: hidden;
}
/* Right-anchored for action menus on the right side of the strip */
.strip-more-menu { right: 0; }
/* Left-anchored for the Recent menu since it now hangs off the
   company name in strip-left */
.strip-recent-menu { left: 0; }

/* Company name button — turns the account name into a clickable handle
   for the Recent dropdown. Looks like static text with a subtle caret
   when recents exist. No hover state when there's no caret (i.e., nothing
   to click). */
.strip-coname-btn {
  background: transparent; border: none; padding: 0;
  font-family: var(--font); cursor: pointer;
  display: inline-flex; align-items: baseline; gap: 2px;
}
.strip-coname-btn:hover .strip-coname-caret { color: var(--v-blue); }
.strip-coname-caret {
  font-size: 11px; color: var(--t4); transition: color 0.12s;
}
.strip-recent-empty {
  padding: 14px 16px; font-size: 12px; color: var(--t4);
  font-style: italic; text-align: center;
}
.strip-recent-item {
  display: block; width: 100%; text-align: left;
  font-family: var(--font); font-size: 12px; font-weight: 500;
  color: var(--t2); background: none; border: none;
  padding: 10px 16px; cursor: pointer;
  transition: background 0.12s; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.strip-recent-item:hover { background: var(--s3); color: var(--t1); }

/* ── #1 Long-wait UX — elapsed + reassurance ── */
.brief-loading-meta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 12px; font-size: 11px; color: var(--t4);
}
.brief-loading-meta-sep { color: var(--t4); opacity: 0.5; }
.brief-loading-reassure {
  margin-top: 12px; font-size: 12px; color: transparent;
  min-height: 18px; transition: color 0.3s ease;
}
.brief-loading-reassure-info { color: var(--v-blue); font-weight: 600; }
.brief-loading-reassure-warn { color: var(--v-amber); font-weight: 600; }

/* ── #2 Error card translation ── */
.brief-error-card {
  margin: 60px auto; max-width: 480px;
  padding: 32px 28px;
  background: var(--s2); border: 1px solid var(--r1);
  border-radius: var(--radius-lg); text-align: center;
}
.brief-error-icon { font-size: 36px; margin-bottom: 14px; }
.brief-error-title {
  font-size: 17px; font-weight: 800; color: var(--t1);
  margin-bottom: 10px; letter-spacing: -0.01em;
}
.brief-error-msg {
  font-size: 13.5px; color: var(--t2); line-height: 1.6;
  margin-bottom: 22px;
}
.brief-error-details {
  margin-bottom: 20px; text-align: left;
  background: var(--s3); border-radius: var(--radius);
  padding: 8px 12px; font-size: 11px;
}
.brief-error-details summary {
  cursor: pointer; color: var(--t4); font-weight: 600;
  list-style: none;
}
.brief-error-details summary::-webkit-details-marker { display: none; }
.brief-error-details summary::after { content: ' ▾'; opacity: 0.6; }
.brief-error-details[open] summary::after { content: ' ▴'; }
.brief-error-details code {
  display: block; margin-top: 8px; padding: 8px;
  background: var(--s1); border-radius: 3px;
  font-family: 'SF Mono', Monaco, Consolas, monospace;
  font-size: 11px; color: var(--t3); word-break: break-word;
}
.brief-error-actions {
  display: flex; gap: 10px; justify-content: center;
}
.brief-error-btn-primary {
  background: var(--v-blue); border: none; border-radius: var(--radius);
  padding: 10px 22px; color: white; font-family: var(--font);
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: opacity 0.15s;
}
.brief-error-btn-primary:hover { opacity: 0.9; }
.brief-error-btn-secondary {
  background: var(--s3); border: 1px solid var(--r1); border-radius: var(--radius);
  padding: 10px 22px; color: var(--t2); font-family: var(--font);
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: all 0.15s;
}
.brief-error-btn-secondary:hover { background: var(--s2); color: var(--t1); }

/* ── #15 In-meeting hint inside 5-min card ── */
.fivemin-meeting-hint {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px; padding: 10px 14px;
  background: linear-gradient(90deg, rgba(0,119,255,0.08), rgba(0,119,255,0.02));
  border: 1px solid rgba(0,119,255,0.2);
  border-left: 3px solid var(--v-blue);
  border-radius: var(--radius);
}
.fivemin-meeting-hint-icon { font-size: 16px; flex-shrink: 0; }
.fivemin-meeting-hint-text {
  flex: 1; font-size: 11.5px; color: var(--t2);
  line-height: 1.4;
}
.fivemin-meeting-hint-btn {
  flex-shrink: 0; font-family: var(--font); font-size: 11px;
  font-weight: 700; color: var(--v-blue);
  background: rgba(0,119,255,0.1); border: 1px solid var(--rb);
  border-radius: 20px; padding: 5px 12px; cursor: pointer;
  transition: all 0.15s;
}
.fivemin-meeting-hint-btn:hover {
  background: var(--v-blue); color: white;
}

/* ══════════════════════════════════════════════════
   5-MIN CARD — DIRECTION B REDESIGN
   Person-first header, single visual anchor (lead-with),
   compact contact panel, severity-glyph things-list.
   ══════════════════════════════════════════════════ */

.fivemin-header-v2 {
  margin-bottom: 12px;
}
.fivemin-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--v-blue);
  margin-bottom: 8px;
}
.fivemin-person-row {
  display: flex; align-items: center; gap: 12px;
}
.fivemin-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  flex-shrink: 0;
  background: var(--v-blue-dim);
  color: var(--v-blue);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px;
  letter-spacing: 0.02em;
  border: 1px solid var(--rb);
}
.fivemin-person-text { flex: 1; min-width: 0; }
.fivemin-person-name {
  font-size: 16px; font-weight: 800; color: var(--t1);
  letter-spacing: -0.01em; line-height: 1.25;
}
.fivemin-person-meta {
  font-size: 13px; font-weight: 500; color: var(--t3);
  letter-spacing: 0;
}
.fivemin-situation-v2 {
  font-size: 11.5px; color: var(--t3);
  margin-top: 2px;
}

/* Compact context line — replaces the verbose label/value strip */
.fivemin-context-line {
  font-size: 11.5px; color: var(--t3);
  line-height: 1.5;
  padding: 8px 0 10px;
  border-top: 1px dashed var(--r1);
  margin-bottom: 10px;
}

/* Past-breach strip — kept dedicated, but a slightly tightened look */
.fivemin-incident-head {
  font-size: 9px; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--v-red);
  margin-bottom: 4px;
}

/* "Lead with this" dark anchor card */
.fivemin-leadcard {
  background: linear-gradient(180deg, #0c1729 0%, #061222 100%);
  border: 1px solid #1a2a45;
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 12px 0;
  color: #e8ecf2;
}
.fivemin-leadcard-eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase; color: #85B7EB;
  margin-bottom: 6px;
}
.fivemin-leadcard-eyebrow-sub {
  color: #6b88a8; font-weight: 600; letter-spacing: 0.04em;
  text-transform: none; font-size: 10px;
}
.fivemin-leadcard-angle {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #85B7EB;
  margin-bottom: 4px;
}
.fivemin-leadcard-ask {
  font-size: 13.5px; font-weight: 600; line-height: 1.5;
  color: #f5f7fa;
  letter-spacing: -0.005em;
}
.fivemin-leadcard-why {
  font-size: 11px; color: #a8b6c8; margin-top: 6px;
  line-height: 1.5; font-style: italic;
}

/* Dual-variant grid — two angles side-by-side */
.fivemin-leadcard-dual { padding: 14px 16px 12px; }
.fivemin-leadcard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 6px;
}
.fivemin-leadcard-option {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding: 10px 12px;
  cursor: default;
  /* Position relative so the recommended chip / accent border can sit
     visually on top of the card without disturbing flow. */
  position: relative;
}
/* The model's top pick gets a subtle accent: brighter background, blue-tinted
   border. Strong enough that a rep glancing at the card immediately sees
   which is the default; quiet enough that it doesn't overpower the second
   variant (which is still a valid choice). */
.fivemin-leadcard-option-recommended {
  background: rgba(0, 122, 255, 0.06);
  border-color: rgba(0, 122, 255, 0.35);
}
/* Header row inside each option — angle label on the left, optional
   "Recommended" chip on the right. Flex so they stay on one line and the
   chip hugs the right edge. */
.fivemin-leadcard-option-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.fivemin-leadcard-rec-chip {
  display: inline-block;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v-blue);
  background: rgba(0, 122, 255, 0.12);
  padding: 2px 7px;
  border-radius: 9px;
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .fivemin-leadcard-grid { grid-template-columns: 1fr; }
  /* On mobile both cards stack — keep the chip but slightly smaller */
  .fivemin-leadcard-rec-chip { font-size: 8px; padding: 2px 6px; }
}

/* Compact contact panel — two cells side-by-side */
.fivemin-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
@media (max-width: 768px) {
  .fivemin-contact-grid { grid-template-columns: 1fr; }
}
.fivemin-contact-cell {
  background: var(--s3);
  border-radius: var(--radius);
  padding: 8px 12px;
  border: 1px solid var(--r1);
}
/* When the cares-about line is genuinely model-grounded with a verifiable
   source, the cell gets a subtle blue-tinted accent so a rep glancing at
   the brief can see at a glance "this content is specific, not template".
   Strong enough to notice; quiet enough to not dominate the card. */
.fivemin-contact-cell-personalised {
  background: rgba(0, 122, 255, 0.04);
  border-color: rgba(0, 122, 255, 0.25);
}
/* Provenance line beneath the cares-about text: "Based on <anchor> →".
   The whole thing is a clickable link to the source URL. Builds trust in
   the personalised content by making it falsifiable in one tap. */
.fivemin-cell-source {
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--t4);
  margin-top: 5px;
}
.fivemin-cell-source-link {
  color: var(--v-blue);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px dotted rgba(0, 122, 255, 0.4);
  padding-bottom: 1px;
  transition: border-color 0.15s, color 0.15s;
}
.fivemin-cell-source-link:hover {
  color: var(--v-blue);
  border-bottom-color: var(--v-blue);
}
.fivemin-cell-source-arrow {
  font-weight: 400;
  font-size: 10px;
  margin-left: 1px;
}
.fivemin-cell-label {
  font-size: 9px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--t4);
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* "specific" badge — surfaces when the cares-about line is model-generated
   from this person's actual activity, vs the role-based fallback. Quiet but
   visible; builds trust in the personalised content. */
.fivemin-cell-badge {
  display: inline-block;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--v-blue);
  background: var(--v-blue-dim, rgba(0, 122, 255, 0.08));
  padding: 1px 6px;
  border-radius: 8px;
  line-height: 1.4;
}
/* "Generic" variant — muted gray, signals to the rep that this is a
   role-based fallback rather than research-backed content. The colour
   shift is the calibration cue — without it, a generic line and a
   personalised line look identical to the rep. */
.fivemin-cell-badge-generic {
  color: var(--t4);
  background: var(--s2);
  border: 1px dashed var(--rb);
  padding: 0 5px;
}

/* "Unverified" pill on triggers that have no source URL. Same calibration
   role: tells the rep this signal didn't come with a citation, so they
   should treat it as a lead to confirm rather than a fact to quote. */
.trigger-unverified {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--v-amber, #BA7517);
  background: var(--v-amber-dim, rgba(247, 181, 79, 0.08));
  padding: 1px 6px;
  border-radius: 8px;
  line-height: 1.4;
  border: 1px solid var(--v-amber, #BA7517);
}
.fivemin-cell-text {
  font-size: 11.5px; line-height: 1.45; color: var(--t2);
}
.fivemin-also-meeting {
  font-size: 10.5px; color: var(--t4);
  padding: 0 4px 8px; line-height: 1.5;
  font-style: italic;
}

/* Section label v2 — smaller, less aggressive than the v1 version */
.fivemin-section-label-v2 {
  font-size: 10px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--t3);
  margin: 4px 0 8px;
}

/* "Three things to know" list with severity glyphs */
.fivemin-things {
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: 12px;
}
.fivemin-thing {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  align-items: start;
  padding: 6px 0;
}
.fivemin-thing-glyph {
  font-size: 12px; font-weight: 800;
  text-align: center; line-height: 1.4;
  flex-shrink: 0;
}
.fivemin-thing-glyph.glyph-red    { color: var(--v-red); }
.fivemin-thing-glyph.glyph-amber  { color: var(--v-amber, #BA7517); }
.fivemin-thing-glyph.glyph-neutral { color: var(--t4); }
.fivemin-thing-text {
  font-size: 12px; line-height: 1.45; color: var(--t1);
  font-weight: 500;
}
/* Quiet "why this matters for Varonis" sub-line under each trigger headline.
   Visually subordinate but italicised for emphasis on the connection to
   data security. */
.fivemin-thing-sowhat {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--t3);
  font-style: italic;
  margin-top: 3px;
  font-weight: 500;
}
/* Confidence pip — small visual that tells the rep how much to lean on this
   signal. Three states driven by priority + recency + source presence:
     high (filled blue)  = recent + high-priority + sourced — lean on it
     med  (outlined)     = recent or notable + sourced — worth referencing
     low  (dotted)       = older / single-source / unsourced — context only
   The pip is intentionally small and unobtrusive. Reps who hover get a
   tooltip explaining the intent; reps who don't still get a subtle
   "this differs from the others" cue from the visual treatment. */
.fivemin-thing-conf {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: 2px;
  vertical-align: 1px;
  /* Cursor:help so the tooltip affordance is discoverable */
  cursor: help;
}
.fivemin-thing-conf-high {
  background: var(--v-blue);
  border: 1px solid var(--v-blue);
}
.fivemin-thing-conf-med {
  background: transparent;
  border: 1.5px solid var(--v-blue);
}
.fivemin-thing-conf-low {
  background: transparent;
  border: 1.5px dotted var(--t4);
}
/* On mobile, the pip is slightly larger so it's still discriminable
   when reps glance at the brief on a phone */
@media (max-width: 768px) {
  .fivemin-thing-conf {
    width: 9px;
    height: 9px;
    margin-left: 3px;
  }
}

/* Collapsible "more to say" section */
.fivemin-more {
  margin: 12px 0 8px;
  border-top: 1px dashed var(--r1);
  padding-top: 10px;
}
.fivemin-more-summary {
  font-size: 11px; font-weight: 700; color: var(--t3);
  cursor: pointer;
  letter-spacing: 0.02em;
  padding: 4px 0;
  user-select: none;
  list-style: none;
  display: flex; align-items: center; gap: 6px;
}
.fivemin-more-summary::-webkit-details-marker { display: none; }
.fivemin-more-summary:hover { color: var(--t1); }
.fivemin-more-summary-arrow {
  display: inline-block;
  transition: transform 0.15s;
  font-size: 10px;
}
.fivemin-more[open] .fivemin-more-summary-arrow {
  transform: rotate(180deg);
}
.fivemin-more-body {
  padding: 8px 0 4px;
  display: flex; flex-direction: column; gap: 8px;
}
.fivemin-more-line {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 10px;
  font-size: 11.5px;
  line-height: 1.5;
}
.fivemin-more-label {
  font-size: 9px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--v-blue);
  padding-top: 2px;
}
.fivemin-more-text {
  color: var(--t1);
}
@media (max-width: 768px) {
  .fivemin-more-line { grid-template-columns: 1fr; gap: 2px; }
}


@media (max-width: 768px) {
  .intake-example-row { flex-direction: column; align-items: stretch; }
  .intake-example-chip { font-size: 11px; padding: 6px 12px; text-align: center; }
  .strip-more-menu, .strip-recent-menu {
    min-width: 180px; max-width: 90vw;
    right: -8px;
  }
  .vi-toast { bottom: 80px; font-size: 12px; padding: 10px 16px; }
  /* In-meeting hint stacks on mobile */
  .fivemin-meeting-hint { flex-wrap: wrap; }
  .fivemin-meeting-hint-text { flex-basis: 100%; }
  .fivemin-meeting-hint-btn { margin-left: auto; }
  /* Brief error stays readable */
  .brief-error-card { margin: 24px 12px; padding: 24px 18px; }
}

/* ── Loading state: rotating sales tips ── */
.brief-loading-tip-wrap {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--r1);
  text-align: left;
}
.brief-loading-tip-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v-blue);
  margin-bottom: 8px;
  transition: opacity 0.25s ease;
}
.brief-loading-tip {
  font-size: 13px;
  line-height: 1.55;
  color: var(--t2);
  min-height: 60px;
  transition: opacity 0.25s ease;
  font-weight: 500;
}
@media (max-width: 600px) {
  .brief-loading-tip { font-size: 12.5px; }
  .brief-loading-tip-wrap { margin-top: 22px; padding-top: 18px; }
}

/* ── Cancel button on loading screen ──
   Quiet recovery affordance. Reps who entered the wrong account or just
   don't want to wait can abort the brief — aborting also stops the
   in-flight Anthropic API calls so we don't pay for orphaned responses.
   Visually quiet (text-button styling, muted colour) so it doesn't
   compete with the loading content; underline on hover for affordance. */
.brief-loading-cancel {
  display: block;
  margin: 22px auto 0;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--r1);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  color: var(--t3);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.brief-loading-cancel:hover {
  color: var(--t1);
  border-color: var(--t3);
  background: var(--s3);
}
@media print {
  .brief-loading-cancel { display: none; }
}

/* ════════════════════════════════════════════════════
   LOADING FACT CARDS — training-data cycler that replaces
   the static tip rotation when synthesiseLoadingFacts returns.
   ════════════════════════════════════════════════════ */
.loading-fact-card {
  text-align: left;
  padding: 4px 0;
  min-height: 100px;
  transition: opacity 0.25s ease;
}
.loading-fact-card-fading {
  opacity: 0;
}
.loading-fact-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v-blue);
  margin-bottom: 8px;
}
.loading-fact-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--t1);
  letter-spacing: -0.005em;
  margin-bottom: 8px;
  line-height: 1.35;
}
.loading-fact-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--t2);
  font-weight: 500;
}

.loading-fact-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
}
.loading-fact-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--r1);
  transition: background 0.25s ease, transform 0.25s ease;
}
.loading-fact-dot-active {
  background: var(--v-blue);
  transform: scale(1.4);
}

/* ════════════════════════════════════════════════════
   POST-BRIEF "BACKGROUND CONTEXT" DETAILS ELEMENT
   Sits at the bottom of the 5-min card with all the cards
   the rep saw on the loading screen, for later reference.
   ════════════════════════════════════════════════════ */
.brief-loadingfacts {
  margin: 12px 0 8px;
  border-top: 1px dashed var(--r1);
  padding-top: 10px;
}
.brief-loadingfacts-summary {
  font-size: 11px;
  font-weight: 700;
  color: var(--t3);
  cursor: pointer;
  letter-spacing: 0.02em;
  padding: 4px 0;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.brief-loadingfacts-summary::-webkit-details-marker { display: none; }
.brief-loadingfacts-summary:hover { color: var(--t1); }
.brief-loadingfacts-arrow {
  display: inline-block;
  transition: transform 0.15s;
  font-size: 10px;
  margin-left: auto;
}
.brief-loadingfacts[open] .brief-loadingfacts-arrow {
  transform: rotate(180deg);
}
.brief-loadingfacts-body {
  padding: 10px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.brief-loadingfacts-card {
  background: var(--s3);
  border: 1px solid var(--r1);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.brief-loadingfacts-eyebrow {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v-blue);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.brief-loadingfacts-verify {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--v-amber, #BA7517);
  background: var(--v-amber-dim, rgba(247,181,79,0.12));
  padding: 1px 6px;
  border-radius: 8px;
}
.brief-loadingfacts-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 4px;
  line-height: 1.4;
}
.brief-loadingfacts-bodytext {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--t2);
}

/* ── TIMING PANEL ──────────────────────────────────
   Surfaces per-call durations when ?debug=1 is set on the URL or
   localStorage.viDebugTiming === '1'. Hidden in normal usage. The slowest
   call sets wall-clock time (because they run in parallel); the panel sorts
   by duration descending so the bottleneck is always at the top. */
.brief-timing-panel {
  margin-top: 18px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px dashed var(--r1);
  border-radius: var(--radius);
  font-size: 11px;
  color: var(--t3);
}
.brief-timing-panel summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--t2);
  padding: 4px 0;
  list-style: none;
}
.brief-timing-panel summary::-webkit-details-marker { display: none; }
.brief-timing-body {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.brief-timing-row {
  display: grid;
  grid-template-columns: 130px 1fr 50px;
  align-items: center;
  gap: 8px;
}
.brief-timing-label {
  font-size: 11px;
  color: var(--t2);
  font-weight: 500;
}
.brief-timing-bar {
  height: 6px;
  background: var(--s3);
  border-radius: 3px;
  overflow: hidden;
}
.brief-timing-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.2s ease;
}
.brief-timing-fill-ok { background: var(--v-blue); }
.brief-timing-fill-fail { background: var(--v-red, #d73a49); }
.brief-timing-ms {
  font-size: 11px;
  color: var(--t2);
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.brief-timing-note {
  margin-top: 8px;
  font-size: 10.5px;
  color: var(--t4);
  font-style: italic;
  line-height: 1.4;
}
@media print {
  .brief-timing-panel { display: none; }
}

/* ── Error card timing block ──
   Surfaces per-call timings inside the error card. Particularly useful for
   timeouts: lists the calls that completed/rejected before abort fired, plus
   a "Still in flight" line naming the calls that were hanging when we
   gave up. Visible on every error path — no debug flag required. */
.brief-error-timing {
  margin: 16px 0;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px dashed var(--r1);
  border-radius: var(--radius);
  text-align: left;
}
.brief-error-timing-head {
  font-size: 11px;
  font-weight: 700;
  color: var(--t2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.brief-error-timing-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
  color: var(--t2);
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
}
.brief-error-timing-missing {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--r1);
  color: var(--v-amber, #BA7517);
}

/* ════════════════════════════════════════════════════
   ULTRAWIDE / 4K SCALING
   ════════════════════════════════════════════════════
   The base layout is designed for 1080p–1440p displays. On ultrawide
   (3440×1440) and 4K (3840×2160) screens the 1440px content cap leaves
   2000+ pixels of empty space, and the 12-14px body text feels small at
   typical viewing distance.
   
   Strategy:
     1. --container-max bumps in steps (handled in :root @media above)
     2. html base font-size bumps in steps (handled above) — affects
        inherited/relative-sized text
     3. The most-read brief content elements get explicit pixel bumps
        below — for elements where the font-size is set in px directly
     4. Internal prose sections stay bounded so reading line-length
        doesn't degrade past ~85ch
   
   The breakpoints map roughly to: 1700px = high-res laptop or smaller
   widescreen; 2100px = 1440p centred or partial 4K; 2800px = full 4K
   or ultrawide. */

@media (min-width: 1700px) {
  /* Talking-points body & ask */
  .tp-ctx { font-size: 13.5px; }
  .tp-ask { font-size: 14px; }
  /* Battlecard zone copy */
  .bc-comp-deck { font-size: 14px; max-width: 640px; }
  /* Five-min card cells */
  .fivemin-cell-text { font-size: 13.5px; }
  .fivemin-cell-label { font-size: 9.5px; }
  /* "What else to know" / things to know list */
  .fivemin-thing-text { font-size: 14px; }
  .fivemin-thing-sowhat { font-size: 12.5px; }
  /* Trigger headlines (in the brief and elsewhere) */
  .fivemin-trigger-headline, .trigger-headline { font-size: 14.5px; }
  .fivemin-trigger-ask, .trigger-ask { font-size: 13px; }
  /* Recommended opener */
  .opener-block { font-size: 14.5px; }
  /* Bound prose-heavy sections so lines stay readable (~78 characters) */
  .tp-ctx, .tp-ask, .bc-comp-deck, .opener-block,
  .fivemin-thing-text, .fivemin-thing-sowhat,
  .fivemin-trigger-headline, .fivemin-trigger-ask {
    max-width: 78ch;
  }
}

@media (min-width: 2100px) {
  .tp-ctx { font-size: 14.5px; }
  .tp-ask { font-size: 15px; }
  .bc-comp-deck { font-size: 15px; max-width: 720px; }
  .fivemin-cell-text { font-size: 14.5px; }
  .fivemin-cell-label { font-size: 10px; }
  .fivemin-thing-text { font-size: 15px; }
  .fivemin-thing-sowhat { font-size: 13px; }
  .fivemin-trigger-headline, .trigger-headline { font-size: 15.5px; }
  .fivemin-trigger-ask, .trigger-ask { font-size: 13.5px; }
  .opener-block { font-size: 15.5px; }
}

@media (min-width: 2800px) {
  /* At full 4K / ultrawide, give more breathing room.
     Beyond this, more font-size starts to feel oversized — better to
     just have generous whitespace. */
  .tp-ctx { font-size: 15px; }
  .tp-ask { font-size: 15.5px; }
  .bc-comp-deck { font-size: 15.5px; max-width: 800px; }
  .fivemin-cell-text { font-size: 15px; }
  .fivemin-thing-text { font-size: 15.5px; }
  .fivemin-thing-sowhat { font-size: 13.5px; }
  .fivemin-trigger-headline, .trigger-headline { font-size: 16px; }
  .opener-block { font-size: 16px; }
}

/* ── Masthead settings cog ──
   Sits next to the live badge. Quiet treatment — the icon is muted at rest,
   brightens slightly on hover. Opens the admin dashboard in a new tab so
   the rep doesn't lose their in-progress brief context. */
.masthead-cog {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.masthead-cog:hover {
  color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.08);
}
.masthead-cog:focus-visible {
  outline: 2px solid var(--v-blue);
  outline-offset: 2px;
}

/* ── ALTERNATE-PATH ROW: Email me when ready ──
   Sits below the form, between the input row and the recents row.
   Visually quiet so it reads as an alternate path rather than
   competing with the primary Generate CTA. Inline label + link-style
   button, centered. Generous vertical padding so it feels deliberate
   rather than crammed. */
.intake-alt-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 16px 4px;
  font-size: 12px;
}
.intake-alt-label {
  color: var(--t4);
  letter-spacing: 0.005em;
}
.intake-alt-btn {
  background: transparent;
  border: none;
  color: var(--v-blue);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius);
  transition: color 0.15s, background 0.15s;
}
.intake-alt-btn:hover:not(:disabled) {
  color: var(--v-blue);
  background: var(--v-blue-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.intake-alt-btn:disabled {
  color: var(--t4);
  cursor: not-allowed;
  opacity: 0.6;
}


/* ══════════════════════════════════════════════════════════
   "WHAT'S NEW SINCE LAST TIME" BANNER

   Renders at the top of the brief content when the server-side
   diff (api/brief.js -> computeWhatsNew) returns new triggers
   that weren't in any prior brief for the same account.

   Visual treatment is deliberately subtle — this is a "FYI before
   you read" overlay, not an alert. Light blue accent, low contrast,
   dismissible. Disappears with the next brief render.
══════════════════════════════════════════════════════════ */
.whats-new-banner {
  margin: 0 24px 12px;
  max-width: 1440px;
  background: linear-gradient(135deg, rgba(0, 122, 255, 0.06) 0%, rgba(0, 122, 255, 0.03) 100%);
  border: 1px solid rgba(0, 122, 255, 0.2);
  border-left: 3px solid var(--v-blue);
  border-radius: var(--radius);
  padding: 12px 16px;
  animation: whatsNewIn 0.3s ease;
}
@keyframes whatsNewIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }

.whats-new-eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.whats-new-icon {
  font-size: 13px;
}
.whats-new-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v-blue);
  flex: 1;
}
.whats-new-close {
  background: transparent;
  border: none;
  color: var(--t4);
  font-size: 14px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.15s;
}
.whats-new-close:hover { color: var(--t1); }

.whats-new-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.whats-new-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--t2);
}
.whats-new-list li + li {
  border-top: 1px solid rgba(0, 122, 255, 0.08);
}
.whats-new-pill {
  display: inline-block;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 8px;
  flex-shrink: 0;
}
.whats-new-pill.hot   { background: rgba(232, 76, 89, 0.12); color: #c8102e; }
.whats-new-pill.warm  { background: rgba(247, 181, 79, 0.12); color: #BA7517; }
.whats-new-pill.cool  { background: rgba(72, 101, 129, 0.10); color: #486581; }
.whats-new-date {
  font-size: 10.5px;
  color: var(--t4);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.whats-new-headline {
  color: var(--t1);
  font-weight: 500;
  flex: 1;
}