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

:root {
  /* Linear-style light theme — neutral surfaces, single accent */
  --bg:       #F6F7F9;
  --bg2:      #EEF0F3;
  --surf:     #FFFFFF;
  --surf2:    #FAFBFC;
  --surf3:    #F2F3F5;

  /* Single chromatic accent — Linear lavender-blue, used sparingly */
  --primary:  #5E6AD2;
  --primary2: #4F5BC4;
  --primaryDim: rgba(94,106,210,.06);
  --primaryGlow: rgba(94,106,210,.10);

  /* Supporting colors — hairline borders, restrained semantics */
  --bdr:      #E7E8EC;
  --bdr2:     #D7D9DF;
  --green:    #2E9E4F;
  --greenDim: rgba(46,158,79,.05);
  --greenBg:  #F5FBF7;
  --warn:     #B8730E;
  --warnDim:  rgba(184,115,14,.06);
  --warnBg:   #FCF8F0;
  --danger:   #DC2626;

  --white:    #FFFFFF;
  --text:     #3C4049;
  --textBright:#16181D;
  --textMuted:#6B6F76;
  --muted:    #9CA0A8;

  /* Semantic */
  --r:        12px;
  --fH:       'Inter', sans-serif;
  --fB:       'Inter', sans-serif;
  /* --fM kept as a token name for back-compat, but now resolves to Inter so the
     whole app uses ONE typeface. Numeric alignment via font-variant-numeric. */
  --fM:       'Inter', sans-serif;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; overflow:hidden; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--fB);
  display: flex; flex-direction: column;
  line-height: 1.6;
}

/* Subtle dot pattern */
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image: radial-gradient(circle, #E7E8EC 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.22;
}

/* -- TOP NAV (premium refresh) ---------------------------------------- */
.topnav {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:0 24px; height:60px; flex-shrink:0;
  /* Frosted-glass bar: translucent surface + blur reads as depth without a
     heavy shadow. Falls back to the solid --bg where backdrop-filter is off. */
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--bdr);
  position:relative; z-index:100;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 1px 12px rgba(16,18,29,.05);
}
.nav-left { display:flex; align-items:center; gap:13px; min-width:0; flex:0 1 auto; }
.nav-logo {
  height:26px;
  width:auto;
  object-fit:contain;
}
.nav-divider {
  width:1px;
  height:22px;
  background:linear-gradient(var(--bdr2), transparent);
}
.app-name {
  font-family:var(--fH);
  font-weight:650;
  font-size:16px;
  letter-spacing:-0.3px;
  color:var(--textBright);
  white-space:nowrap;
}

.nav-tabs {
  display:flex; gap:3px; flex:0 0 auto;
  background:var(--surf3); padding:4px; border-radius:11px;
  border:1px solid var(--bdr);
  box-shadow: 0 1px 2px rgba(16,18,29,.04) inset;
}
.nav-tab {
  padding:8px 16px; border-radius:8px;
  font-family:var(--fH); font-size:13px; font-weight:550;
  color:var(--textMuted); cursor:pointer;
  transition:color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
  border:1px solid transparent;
  display:flex; align-items:center; gap:7px; white-space:nowrap;
}
.nav-tab:hover { color:var(--text); background:rgba(94,106,210,.06); }
.nav-tab.active {
  color:var(--white);
  /* Subtle vertical gradient + layered shadow gives the active pill a lift
     against the inset track — the "premium segmented control" look. */
  background:linear-gradient(180deg, #6C77DB 0%, var(--primary) 100%);
  box-shadow: 0 1px 1px rgba(255,255,255,.25) inset, 0 3px 10px rgba(94,106,210,.32);
}
.tab-icon { font-size:14px; line-height:1; }

.nav-right { display:flex; align-items:center; gap:10px; flex:0 1 auto; min-width:0; justify-content:flex-end; }
.live-badge {
  display:flex; align-items:center; gap:7px;
  background:var(--greenBg); border:1px solid rgba(5,150,105,.2);
  border-radius:20px; padding:5px 13px;
  font-size:11px; font-family:var(--fM); color:var(--green);
  font-weight:500; white-space:nowrap;
}
.live-dot {
  width:7px; height:7px; background:var(--green); border-radius:50%;
  box-shadow:0 0 0 3px rgba(46,158,79,.12);
  animation:pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
.nav-btn {
  display:flex; align-items:center; gap:6px;
  background:var(--surf); border:1px solid var(--bdr);
  border-radius:9px; padding:8px 14px;
  color:var(--text); font-size:12px; font-weight:500; font-family:var(--fM);
  cursor:pointer; white-space:nowrap;
  transition:color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .06s ease;
}
.nav-btn:hover {
  border-color:rgba(94,106,210,.45);
  color:var(--primary);
  background:var(--primaryDim);
  box-shadow:0 2px 8px rgba(94,106,210,.12);
}
.nav-btn:active { transform:translateY(1px); }
.nav-btn-ico { font-size:13px; line-height:1; }
/* Visual break between status badges (AI Live / provider / MCP) and action buttons */
.nav-sep { width:1px; height:22px; background:var(--bdr2); margin:0 2px; flex:0 0 auto; }

/* -- TOP NAV — responsive collapse (no horizontal overflow) ------------- */
/* Breakpoints are set by MEASURED content width, not round numbers. The three
   nav groups use flex:0 1 auto, so when the full label set (wordmark + 3 tabs +
   3 status pills + 4 labelled buttons ≈ 1340px of content) exceeds the viewport,
   nav-right shrinks below its nowrap content and its children spill LEFT over the
   tabs (no page overflow — it's group-on-group). Verified overlap begins ~1360px,
   so the first collapse fires there; each subsequent step is measured to keep the
   spill from ever reaching the tabs down to 360px. */
/* ≤1360: drop the wordmark + divider (frees ~95px). */
@media (max-width:1360px) {
  .topnav { padding:0 20px; gap:12px; }
  .app-name, .nav-divider { display:none; }
}
/* ≤1200: action buttons icon-only (labels hidden, count badges kept) AND every
   status pill (AI Live / provider / MCP) collapses to just its dot. font-size:0
   hides ALL text regardless of markup — the MCP + provider badges set labels as
   raw text nodes via JS, so a label-span rule would miss them and the wide
   "MCP Disconnected" pill would overflow nav-right into the tabs. Frees ~460px. */
@media (max-width:1200px) {
  .topnav { padding:0 16px; }
  .nav-btn-label { display:none; }
  .nav-btn { padding:8px; gap:0; }
  .live-badge { padding:0; width:26px; height:26px; justify-content:center; gap:0; font-size:0; border-radius:50%; }
  .live-badge .live-dot { width:8px; height:8px; }
}
/* ≤700: icon-only tabs — the last label set to drop. Below this only icons +
   dots remain, so the row stays clear down to the smallest phones. */
@media (max-width:700px) {
  .nav-tab-label { display:none; }
  .nav-tab { padding:8px 12px; }
}
/* ≤560: below this even all-icon content can't fit a 360px phone on one line
   (logo + 3 tab icons + status dots + 4 icon buttons > viewport). Instead of
   letting nav-right compress and spill over the tabs, pin every group to its
   natural size (flex-shrink:0) and let the BAR scroll horizontally within itself.
   The page never scrolls sideways (overflow contained to .topnav); the user
   swipes the dense toolbar — a standard mobile pattern, no overlap, no clipping. */
@media (max-width:560px) {
  .topnav { padding:0 12px; gap:8px; height:56px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; justify-content:flex-start; }
  .topnav::-webkit-scrollbar { display:none; }
  .nav-left, .nav-tabs, .nav-right { flex-shrink:0; }
  .nav-right { gap:7px; }
}
/* Keyboard focus rings (a11y) */
.nav-tab:focus-visible, .nav-btn:focus-visible, .tbtn:focus-visible,
.ebtn:focus-visible, .pc-head:focus-visible, .seg:focus-visible {
  outline:2px solid var(--primary); outline-offset:2px; border-radius:8px;
}

/* -- PAGE CONTAINER ---------------------------------- */
.pages { flex:1; overflow:hidden; position:relative; z-index:1; }
.page {
  position:absolute; inset:0; overflow-y:auto;
  background: var(--bg);
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.page.active { opacity:1; pointer-events:auto; }

/* Clean scrollbar */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-thumb { background: var(--bdr); border-radius:6px; }
::-webkit-scrollbar-track { background:transparent; }

/* -- PROSPECT PAGE ----------------------------------- */
.prospect-page {
  display:flex; align-items:flex-start; justify-content:center;
  padding:42px 24px 48px;
}
.prospect-center {
  width:min(860px, calc(100vw - 32px));
  margin:0 auto;
  animation:fadeUp .5s ease;
}
@keyframes fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

.hero-block { text-align:center; max-width:620px; margin:0 auto 16px; }
.hero-icon {
  width:72px; height:72px; margin:0 auto 24px;
  background: var(--surf);
  border:1px solid var(--bdr);
  border-radius:24px;
  display:flex; align-items:center; justify-content:center;
  font-size:32px;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
}
.hero-block h1 {
  font-family:var(--fH); font-weight:700; font-size:30px;
  color:var(--textBright); letter-spacing:-0.5px; margin-bottom:8px;
  line-height:1.12;
}
.hero-block h1 em {
  font-family:var(--fH); font-style:normal;
  color:var(--primary);
}
.hero-block p {
  font-size:14px; color:var(--textMuted); line-height:1.45;
  max-width:560px; margin:8px auto 0;
}
.hero-proof {
  margin-top:8px; font-size:11.5px; color:var(--textMuted);
}

/* Form sections */
.form-section { margin-bottom:16px; min-width:0; }
.form-label {
  font-family:var(--fH); font-size:12.5px; font-weight:600; letter-spacing:.2px;
  color:var(--textBright); margin-bottom:7px; display:flex; align-items:center; gap:7px;
}
.form-label .opt { font-weight:400; font-size:12px; color:var(--textMuted); }
.form-hint { font-size:11.5px; color:var(--textMuted); margin:-3px 0 7px; line-height:1.35; min-height:16px; }
.section-head {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; margin-bottom:8px;
}
.multi-toggle.compact {
  margin-top:2px; font-size:12px; white-space:nowrap;
  padding:6px 10px;
  border:1px solid rgba(99,102,241,.20);
  border-radius:999px;
  background:rgba(255,255,255,.60);
}
.multi-toggle.compact:hover {
  border-color:rgba(99,102,241,.45);
  background:rgba(99,102,241,.06);
}
.segment-status {
  margin-top:10px; padding:8px 12px;
  border:1px dashed rgba(99,102,241,.34);
  background:rgba(99,102,241,.04); border-radius:10px;
  font-size:12px; color:var(--primary); text-align:center; line-height:1.35;
}
.segment-status.ready {
  border-style:solid; border-color:rgba(16,185,129,.35);
  background:rgba(16,185,129,.06); color:#059669;
}
.multi-toggle {
  display:inline-flex; align-items:center; justify-content:flex-start; gap:8px;
  margin-top:12px; font-size:13px; color:var(--textMuted); cursor:pointer;
  width:auto; max-width:100%;
}
.multi-toggle input { width:16px; height:16px; margin:0; flex:0 0 auto; accent-color:var(--primary); cursor:pointer; }
.multi-toggle span { display:inline; line-height:1.35; white-space:normal; }
.trust-strip {
  margin-top:20px; padding:16px 22px;
  border:1px solid rgba(99,102,241,.14); border-radius:16px;
  background:rgba(255,255,255,.82);
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  box-shadow:0 12px 32px rgba(15,23,42,.055);
}
.trust-item {
  display:grid; grid-template-columns:38px 1fr;
  column-gap:12px; align-items:center; font-size:20px;
}
.trust-icon {
  width:42px; height:42px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(99,102,241,.16), rgba(124,58,237,.12));
  color:#4338ca;
  border:1.5px solid rgba(99,102,241,.28);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.9), 0 2px 6px rgba(99,102,241,.10);
}
.trust-icon svg { width:20px; height:20px; display:block; stroke-width:2.2; }
.trust-item > div { display:flex; flex-direction:column; }
.trust-item strong { display:block; font-size:12px; font-weight:600; color:var(--textBright); line-height:1.3; }
.trust-item span { display:block; margin-top:2px; font-size:11px; color:var(--textMuted); line-height:1.3; }

input, textarea, select {
  width:100%;
  background:var(--surf); border:1px solid var(--bdr);
  border-radius:var(--r); padding:11px 14px;
  color:var(--textBright); font-family:var(--fB); font-size:14px;
  outline:none; resize:none; transition:all .2s;
}
textarea#productDesc { min-height:54px; height:54px; }
input::placeholder, textarea::placeholder { color:var(--muted); }
input:focus, textarea:focus, select:focus {
  border-color:var(--primary);
  box-shadow: 0 0 0 3px var(--primaryDim);
}
select option { background:var(--surf); color:var(--textBright); }

/* Industry segment grid */
.seg-grid { display:grid; grid-template-columns:repeat(4, minmax(145px, 1fr)); gap:10px; }
.seg {
  min-height:58px;
  border:1.5px solid rgba(99,102,241,.32); border-radius:12px;
  padding:10px 12px; cursor:pointer;
  font-size:13px; font-weight:700; color:var(--primary);
  display:flex; align-items:center; justify-content:flex-start; gap:10px;
  background:rgba(255,255,255,.86);
  box-shadow:0 4px 12px rgba(15,23,42,.045);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
  line-height:1.1;
  text-align:left;
}
.seg:hover {
  transform:translateY(-1px);
  border-color:rgba(99,102,241,.75);
  box-shadow:0 12px 26px rgba(99,102,241,.10);
}
.seg-ico {
  width:32px; height:32px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(99,102,241,.14), rgba(124,58,237,.10));
  color:#4338ca;
  border:1px solid rgba(99,102,241,.22);
  flex:0 0 auto;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.8);
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.seg-ico svg { width:18px; height:18px; display:block; stroke-width:2.2; }
.seg.active .seg-ico, .seg:hover .seg-ico {
  background:linear-gradient(135deg, rgba(99,102,241,.26), rgba(124,58,237,.20));
  border-color:rgba(99,102,241,.50);
  transform:scale(1.05);
}
.seg-copy { display:flex; flex-direction:column; align-items:flex-start; }
.seg-copy > span { font-size:12px; font-weight:700; color:var(--primary); }
.seg small { display:block; font-size:10.5px; font-weight:500; color:var(--textMuted); margin-top:2px; }

/* Selected state */
.seg.active {
  background:rgba(99,102,241,.10);
  border-color:#6366f1;
  box-shadow:0 8px 24px rgba(99,102,241,.18);
}
.seg.active .seg-ico {
  background:linear-gradient(135deg, rgba(99,102,241,.28), rgba(124,58,237,.22));
  border-color:rgba(99,102,241,.55);
}
.seg.active .seg-copy > span { color:var(--primary); }
.seg.active small { color:var(--textMuted); }

/* Form rows */
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; margin-top:0; }

/* Stepper */
.stepper { display:flex; }
.stepper input {
  border-radius:0; text-align:center; font-family:var(--fM);
  background:var(--surf2);
}
.stepper, select#emailAngle { height:46px; }
.stepper input { height:46px; }
.step-btn {
  width:46px; height:46px; flex-shrink:0;
  background:var(--surf); border:1px solid var(--bdr);
  color:var(--text); font-size:17px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .2s;
}
.step-btn:first-child { border-radius:var(--r) 0 0 var(--r); border-right:none; }
.step-btn:last-child  { border-radius:0 var(--r) var(--r) 0; border-left:none; }
.step-btn:hover {
  background:var(--primaryDim);
  color:var(--primary);
  border-color:var(--primary);
}

/* Run button */
.run-btn {
  width:100%;
  background: var(--primary);
  border:none; border-radius:var(--r);
  padding:12px 24px; margin-top:10px;
  color:var(--white); font-family:var(--fH); font-size:15px; font-weight:600;
  cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  transition:all .25s;
  letter-spacing:-0.2px;
  box-shadow: 0 4px 14px rgba(99,102,241,.25);
}
.run-btn small { font-size:11px; font-weight:500; opacity:.86; }
.run-btn:hover {
  transform:translateY(-2px);
  box-shadow: 0 8px 24px rgba(99,102,241,.3);
}
.run-btn:active { transform:translateY(0); }
.run-btn:disabled,
.run-btn.disabled {
  opacity:.62; cursor:not-allowed; transform:none;
  box-shadow:none;
  background:linear-gradient(135deg, rgba(99,102,241,.55), rgba(124,58,237,.55));
}
.run-btn:disabled:hover,
.run-btn.disabled:hover { transform:none; box-shadow:none; }
.spin {
  width:18px; height:18px;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:var(--white);
  border-radius:50%;
  animation:spin .8s linear infinite;
  display:none;
}
@keyframes spin { to{transform:rotate(360deg)} }

/* Progress bar */
.prog-bar {
  height:3px; background:var(--bdr);
  flex-shrink:0; display:none; position:relative; z-index:10;
}
.prog-bar.on { display:block; }
.prog-fill {
  height:100%; background: var(--primary);
  width:0%; transition:width .4s ease;
  border-radius:0 3px 3px 0;
}

.status-strip {
  padding:12px 32px; background:var(--surf);
  border-bottom:1px solid var(--bdr);
  font-family:var(--fM); font-size:12px; color:var(--primary);
  display:none; align-items:center; gap:10px; position:relative; z-index:10;
}
.status-strip.on { display:flex; }
.sdot {
  width:6px; height:6px; background:var(--primary); border-radius:50%;
  animation:pulse 1s infinite;
}

/* -- RESULTS PAGE ------------------------------------ */
.results-page { display:flex; flex-direction:column; min-height:100%; }

.rtoolbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px max(24px, calc((100% - 1040px) / 2 + 24px)); border-bottom:1px solid var(--bdr);
  background:var(--surf); backdrop-filter:blur(12px);
  flex-shrink:0; gap:16px; flex-wrap:wrap;
}
.rmeta { display:flex; align-items:center; gap:16px; }
.rcount { font-family:var(--fM); font-size:14px; color:var(--textMuted); }
.rcount strong { color:var(--primary); font-weight:600; }

.chips { display:flex; gap:6px; }
.chip {
  font-family:var(--fM); font-size:11px; padding:5px 12px;
  border-radius:6px; border:1px solid; display:none;
}
.chip.on { display:inline-flex; }
.chip-a   { background:var(--greenBg); border-color:rgba(5,150,105,.2); color:var(--green); }
.chip-b   { background:rgba(59,130,246,.08); border-color:rgba(59,130,246,.2); color:#2563EB; }
.chip-bgt { background:var(--warnBg); border-color:rgba(217,119,6,.2); color:var(--warn); }

.tbtns { display:flex; gap:8px; }
.tbtn {
  display:flex; align-items:center; gap:6px;
  background:var(--surf); border:1px solid var(--bdr);
  border-radius:8px; padding:8px 16px;
  color:var(--text); font-size:12px; font-family:var(--fM);
  cursor:pointer; transition:all .2s;
}
.tbtn:hover { background:var(--surf2); border-color:var(--textMuted); }
.tbtn.primary {
  background:var(--primary); border-color:var(--primary);
  color:var(--white);
}
.tbtn.primary:hover { background:var(--primary2); }

/* Empty state */
.empty {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:80px 30px; text-align:center; gap:16px;
}
.e-icon {
  width:80px; height:80px;
  background: var(--surf);
  border:1px solid var(--bdr);
  border-radius:24px; display:flex; align-items:center; justify-content:center;
  font-size:36px;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
}
.empty h3 { font-family:var(--fH); font-size:24px; font-weight:700; color:var(--textBright);}
.empty p  { font-size:15px; color:var(--textMuted); max-width:400px; line-height:1.7; }
.feat-list { display:flex; flex-direction:column; gap:10px; margin-top:20px; width:100%; max-width:420px; }
.feat {
  display:flex; align-items:flex-start; gap:12px;
  background:var(--surf); border:1px solid var(--bdr);
  border-radius:10px; padding:14px 18px; font-size:14px; color:var(--text); text-align:left;
  transition:all .2s;
}
.feat:hover { border-color:var(--primary); box-shadow: 0 2px 8px rgba(0,0,0,.04); }

/* Prospect cards */
.plist { max-width:1040px; width:100%; margin:0 auto; padding:24px 24px 100px; display:flex; flex-direction:column; gap:16px; }

.pcard {
  background: var(--surf);
  border:1px solid var(--bdr);
  border-radius:12px; overflow:hidden;
  box-shadow: 0 1px 2px rgba(16,18,29,.04);
  transition:border-color .18s ease, box-shadow .18s ease;
  animation:cardIn .3s ease both;
}
@keyframes cardIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.pcard:hover {
  border-color:var(--bdr2);
  box-shadow: 0 2px 8px rgba(16,18,29,.06);
}
.pcard.open { border-color:var(--bdr2); }

.pc-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; cursor:pointer; user-select:none; gap:16px;
}
.pc-left { display:flex; align-items:center; gap:14px; flex:1; min-width:0; }
.av {
  width:46px; height:46px; min-width:46px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--fH); font-size:15px; font-weight:700; color:var(--white);
}
.pmeta { flex:1; min-width:0; }
.pname {
  font-family:var(--fH); font-size:18px; font-weight:700;
  color:var(--textBright); line-height:1.25; letter-spacing:-0.2px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.prole {
  font-size:13px; color:var(--textMuted); margin-top:3px; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; word-break:break-word;
}
.prole a { word-break:break-word; overflow-wrap:anywhere; }

.selectable-text {
  user-select:text; -webkit-user-select:text; cursor:text;
  width:fit-content; max-width:100%;
}
.selectable-text a { cursor:pointer; }
.selectable-text a:hover { text-decoration:underline; }

.pbdgs { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.bdg {
  font-family:var(--fM); font-size:11px; padding:5px 10px;
  border-radius:6px; border:1px solid; white-space:nowrap;
  font-weight:500;
}
.bdg-a    { background:var(--greenBg); border-color:rgba(5,150,105,.2); color:var(--green); }
.bdg-b    { background:rgba(59,130,246,.08); border-color:rgba(59,130,246,.2); color:#2563EB; }
.bdg-ecom { background:rgba(59,130,246,.08); border-color:rgba(59,130,246,.2); color:#2563EB; }
.bdg-fin  { background:rgba(14,165,233,.08); border-color:rgba(14,165,233,.2); color:#0284C7; }
.bdg-hlth { background:rgba(20,184,166,.08); border-color:rgba(20,184,166,.2); color:#0D9488; }
.bdg-edu  { background:rgba(139,92,246,.08); border-color:rgba(139,92,246,.2); color:#7C3AED; }
.bdg-trvl { background:rgba(6,182,212,.08); border-color:rgba(6,182,212,.2); color:#0891B2; }
.bdg-auto { background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.2); color:#DC2626; }
.bdg-re   { background:rgba(245,158,11,.08); border-color:rgba(245,158,11,.2); color:#D97706; }
.bdg-saas { background:rgba(16,185,129,.08); border-color:rgba(16,185,129,.2); color:#059669; }
.bdg-bgt  {
  font-family:var(--fM); font-size:12px; color:var(--warn);
  background:var(--warnBg); border:1px solid rgba(217,119,6,.2);
  border-radius:6px; padding:5px 10px;
}

.chv {
  color:var(--muted); font-size:12px; transition:transform .2s;
  margin-left:8px;
}
.pcard.open .chv { transform:rotate(180deg); }

.pe {
  padding:0 22px 20px; display:none;
}
.pcard.open .pe { display:block; animation:fadeUp .2s ease; }
.divdr {
  height:1px; background: var(--bdr);
  margin-bottom:16px;
}

/* Send-readiness verdict — moved out of the collapsed header into the card body */
.readiness-strip { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:14px; }
.rdy-badge {
  display:inline-flex; align-items:center;
  border-radius:6px; padding:3px 9px;
  font-size:10px; font-weight:500; font-family:var(--fM); letter-spacing:.03em;
}

/* Info boxes — neutral white surface + hairline border. */
.src-box, .overview-box, .contact-box, .trig-box, .pain-box, .hook-box {
  background:var(--surf); border:1px solid var(--bdr);
  border-radius:10px; padding:14px 16px; margin-bottom:10px;
  font-size:14.5px; color:var(--text); line-height:1.65;
}
/* Section labels (eyebrows) — ONE consistent calm grey for every section.
   No more per-section rainbow; this is the core readability fix. */
.src-lbl, .overview-lbl, .contact-lbl, .trig-lbl, .pain-lbl, .hook-lbl {
  font-size:11px; text-transform:uppercase;
  letter-spacing:.05em; margin-bottom:8px; font-weight:700;
  color:var(--text);
}
.contact-info strong { color:var(--textBright); }

/* Sales Kit Snapshot 2-column — score breakdown beside pain calc to use width.
   Collapses to a single column on narrow screens. */
.kit-grid-2 {
  display:grid; grid-template-columns:1fr 1fr; gap:4px 28px; align-items:start;
}
@media (max-width:820px) {
  .kit-grid-2 { grid-template-columns:1fr; }
}

/* ── Sales Kit Snapshot (Phase 2 — feat/icp-precompute) ─────────────────── */
.kit-box {
  background:var(--surf); border:1px solid var(--bdr);
  border-radius:12px; padding:16px 18px; margin-bottom:10px;
  color:var(--text);
}
.kit-head { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.kit-lbl {
  font-size:11px; text-transform:uppercase;
  letter-spacing:.05em; color:var(--text); font-weight:700;
}
.kit-badges { display:flex; align-items:center; gap:6px; }
.kit-tier {
  font-family:var(--fM); font-size:10px; font-weight:500; letter-spacing:.03em;
  padding:3px 9px; border-radius:6px; border:1px solid;
}
.kit-tier-A { color:var(--green);     background:var(--greenBg); border-color:rgba(46,158,79,.25); }
.kit-tier-B { color:var(--warn);      background:var(--warnBg);  border-color:rgba(184,115,14,.25); }
.kit-tier-C { color:var(--textMuted); background:var(--surf3);   border-color:var(--bdr); }
.kit-rec {
  font-family:var(--fM); font-size:10px; font-weight:500;
  padding:3px 9px; border-radius:6px;
  color:var(--textMuted); background:var(--surf3); border:1px solid var(--bdr);
}

/* Hero stat — the one number that matters, set apart */
.kit-stat {
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin:12px 0; padding-bottom:12px; border-bottom:1px solid var(--bdr);
}
.kit-stat-lbl { font-size:13px; color:var(--textMuted); }
.kit-stat-val {
  font-family:var(--fM); font-size:13px; font-weight:400; color:var(--text);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* Breakdowns — identical row layout for BOTH score and pain calc */
.kit-details { margin-top:6px; }
.kit-summary {
  cursor:pointer; outline:none; user-select:none;
  font-size:11px; text-transform:uppercase; letter-spacing:.05em; font-weight:600;
  color:var(--textMuted); padding:6px 0;
}
.kit-summary:hover { color:var(--text); }
.kit-rows { margin-top:2px; }
.kit-row {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:7px 0; font-size:13px;
}
.kit-row + .kit-row { border-top:1px solid var(--bdr); }
.kit-row-lbl { color:var(--text); }
.kit-row-val {
  font-family:var(--fM); color:var(--text);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.kit-row-total { margin-top:4px; padding-top:9px; border-top:1px solid var(--bdr2); }
.kit-row-total .kit-row-lbl,
.kit-row-total .kit-row-val { color:var(--textBright); font-weight:600; }

/* Score row — slim bar + single-tone value (replaces the bare 10/10) */
.kit-score { display:flex; align-items:center; gap:10px; }
.kit-score-bar { width:72px; height:5px; border-radius:999px; background:var(--surf3); overflow:hidden; }
.kit-score-bar i { display:block; height:100%; border-radius:999px; background:var(--primary); }
.kit-score-num {
  font-family:var(--fM); font-size:13px; color:var(--text);
  font-variant-numeric:tabular-nums; min-width:42px; text-align:right;
}

/* Verify-before-sending — one calm, collapsible section (was a wall of amber).
   Collapsed by default; operator expands to see the verification checklist. */
.verify-box {
  margin:10px 0; border:1px solid rgba(184,115,14,.28); border-radius:10px;
  background:var(--warnBg); overflow:hidden;
}
.verify-sum {
  cursor:pointer; outline:none; user-select:none; list-style:none;
  display:flex; align-items:center; gap:8px; padding:9px 14px;
  font-family:var(--fM); font-size:10px; text-transform:uppercase; letter-spacing:.06em;
  font-weight:600; color:var(--warn);
}
.verify-sum::-webkit-details-marker { display:none; }
.verify-sum::before { content:'\25B8'; font-size:9px; }
.verify-box[open] .verify-sum::before { content:'\25BE'; }
.verify-count {
  margin-left:auto; background:rgba(184,115,14,.15); color:var(--warn);
  border-radius:999px; padding:1px 8px; font-size:10px; font-weight:600;
}
.verify-list {
  margin:0; padding:2px 16px 12px 32px;
  color:#7a4d09; font-size:12.5px; line-height:1.6;
}
.verify-list li { margin:5px 0; }

.subj {
  font-size:14.5px; font-family:var(--fM); color:var(--textMuted);
  margin-bottom:14px;
}
.subj strong { color:var(--textBright); font-weight:500; }

.ebody {
  background:var(--surf2); border:1px solid var(--bdr);
  border-radius:var(--r); padding:18px 20px;
  font-size:15.5px; line-height:1.85; color:var(--text);
  white-space:pre-wrap;
}

.eacts {
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--bdr);
}
.ebtn {
  display:inline-flex; align-items:center; gap:7px; flex:0 0 auto;
  white-space:nowrap;
  background:var(--surf); border:1px solid var(--bdr);
  border-radius:8px; padding:8px 13px;
  color:var(--text); font-size:13px; font-weight:500; font-family:var(--fB);
  cursor:pointer; transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.ebtn svg { width:14px; height:14px; flex:0 0 auto; opacity:.65; }
.ebtn:hover { background:var(--surf2); border-color:var(--bdr2); color:var(--textBright); }
.ebtn:hover svg { opacity:1; }
.ebtn-danger { color:var(--danger); }
.ebtn-danger svg { color:var(--danger); }
.ebtn-danger:hover { background:rgba(220,38,38,.05); border-color:rgba(220,38,38,.28); color:var(--danger); }

/* Skeleton loading */
.skel {
  background: var(--surf);
  border:1px solid var(--bdr);
  border-radius:16px; padding:18px 20px;
}
.sl {
  height:11px; background: var(--bdr);
  border-radius:4px; margin-bottom:8px;
  animation:shimmer 1.5s infinite;
}
.sl.m { width:70%; } .sl.s { width:40%; }
@keyframes shimmer { 0%,100%{opacity:.4} 50%{opacity:.7} }

/* -- GUIDE PAGE -------------------------------------- */
.guide-page { padding:56px 32px 100px; display:flex; justify-content:center; }
.guide-center { max-width:720px; width:100%; animation:fadeUp .5s ease; }

.guide-hero {
  background: var(--surf);
  border:1px solid var(--bdr); border-radius:20px;
  padding:32px; margin-bottom:36px; text-align:center;
  box-shadow: 0 4px 20px rgba(0,0,0,.04);
}
.guide-hero h2 {
  font-family:var(--fH); font-size:26px; font-weight:700;
  color:var(--textBright); margin-bottom:10px;
}
.guide-hero p { font-size:15px; color:var(--textMuted); line-height:1.75; }

.g-section { margin-bottom:32px; }
.g-section-title {
  font-family:var(--fH); font-size:15px; font-weight:700; color:var(--textBright);
  display:flex; align-items:center; gap:10px; margin-bottom:16px;
  padding-bottom:10px; border-bottom:1px solid var(--bdr);
}
.g-num {
  width:26px; height:26px;
  background: var(--primary);
  border-radius:8px; display:flex; align-items:center; justify-content:center;
  font-family:var(--fM); font-size:12px; font-weight:700; color:var(--white); flex-shrink:0;
}

.g-card {
  background: var(--surf); border:1px solid var(--bdr); border-radius:14px;
  padding:16px 20px; margin-bottom:12px;
  transition:all .2s;
}
.g-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.g-card-label {
  font-family:var(--fM); font-size:10px; text-transform:uppercase;
  letter-spacing:.8px; color:var(--primary); margin-bottom:8px;
}
.g-card-title {
  font-family:var(--fH); font-size:15px; font-weight:600;
  color:var(--textBright); margin-bottom:8px;
}
.g-card-desc { font-size:14px; color:var(--textMuted); line-height:1.7; }
.g-tip {
  background:var(--primaryDim); border:1px solid rgba(79,70,229,.12);
  border-radius:10px; padding:12px 16px; margin-top:12px;
  font-size:13px; color:var(--text); line-height:1.65;
}
.g-tip strong { color:var(--primary); }

.g-faq {
  border:1px solid var(--bdr); border-radius:12px;
  overflow:hidden; margin-bottom:8px;
  cursor:pointer; transition:all .2s;
  background: var(--surf);
}
.g-faq:hover { border-color:var(--primary); }
.g-faq-q {
  padding:14px 18px; display:flex; align-items:center; justify-content:space-between;
  font-family:var(--fH); font-size:14px; font-weight:600;
  color:var(--textBright); gap:12px;
}
.g-faq-chv { color:var(--muted); font-size:11px; transition:transform .2s; }
.g-faq.open .g-faq-chv { transform:rotate(180deg); }
.g-faq-a {
  display:none; padding:0 18px 16px;
  font-size:14px; color:var(--textMuted); line-height:1.75;
  border-top:1px solid var(--bdr); padding-top:14px;
}
.g-faq.open .g-faq-a { display:block; animation:fadeUp .2s ease; }

.g-warn {
  background:var(--warnBg); border:1px solid rgba(217,119,6,.15);
  border-left:3px solid var(--warn); border-radius:10px;
  padding:14px 18px; font-size:14px; color:#92400E; line-height:1.7; margin-top:14px;
}
.g-warn strong { color:var(--warn); }
.g-tipbox {
  background:var(--greenBg); border:1px solid rgba(5,150,105,.15);
  border-left:3px solid var(--green); border-radius:10px;
  padding:14px 18px; font-size:14px; color:var(--text); line-height:1.7; margin-top:14px;
}
.g-tipbox strong { color:var(--green); }

/* -- MODALS ------------------------------------------ */
.mbg {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.4); z-index:500;
  align-items:center; justify-content:center;
  backdrop-filter:blur(4px);
}
.mbg.open { display:flex; }
.modal {
  background: var(--surf); border:1px solid var(--bdr); border-radius:20px;
  padding:36px; width:90%; max-width:480px;
  box-shadow: 0 24px 80px rgba(0,0,0,.15);
}
.modal h2 {
  font-family:var(--fH); font-size:20px; font-weight:700;
  color:var(--textBright); margin-bottom:10px;
}
.modal p  { font-size:14px; color:var(--textMuted); margin-bottom:18px; line-height:1.7; }
.modal-note {
  background:var(--warnBg); border:1px solid rgba(217,119,6,.15);
  border-radius:10px; padding:12px 16px;
  font-size:13px; color:#92400E; margin-bottom:18px; line-height:1.6;
}
.mbtns { display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }
.mbtn-c {
  background:var(--surf); border:1px solid var(--bdr);
  border-radius:10px; padding:12px 22px; color:var(--textMuted);
  font-family:var(--fB); font-size:14px; cursor:pointer; transition:all .2s;
}
.mbtn-c:hover { background:var(--surf2); color:var(--text); }
.mbtn-s {
  background: var(--primary);
  border:none; border-radius:10px; padding:12px 24px;
  color:var(--white); font-family:var(--fH); font-size:14px; font-weight:600;
  cursor:pointer; transition:all .2s;
}
.mbtn-s:hover {
  background:var(--primary2);
  box-shadow: 0 4px 16px rgba(79,70,229,.3);
}

.csv-pre {
  background:var(--surf2); border:1px solid var(--bdr);
  border-radius:10px; padding:14px; font-family:var(--fM); font-size:11px;
  color:var(--text); white-space:pre-wrap; word-break:break-all;
  max-height:180px; overflow-y:auto; margin-bottom:18px;
}
.env-block {
  background:var(--surf2); border:1px solid var(--bdr);
  border-radius:10px; padding:14px 18px; font-family:var(--fM); font-size:11px;
  color:var(--text); line-height:2.2; margin-top:10px;
}
.env-block .ek { color:var(--primary); }
.env-block .em { color:var(--muted); }

/* ── MCP CONNECT BANNER + PER-CARD MCP BUTTONS (Step 3 of Card Kit) ────── */
.mcp-banner {
  background: rgba(37,99,235,.08); border-bottom: 1px solid rgba(37,99,235,.22);
  padding: 10px 18px; font-size: 13px; color: #1e40af;
  display: flex; align-items: center; justify-content: center; gap: 14px;
}
.mcp-banner-text { line-height: 1.5; }
.mcp-banner-btn {
  background: #2563EB; color: #fff; border: none; border-radius: 6px;
  padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background 0.18s ease;
}
.mcp-banner-btn:hover { background: #1d4ed8; }

/* MCP buttons share the neutral .ebtn look; they only differ when disabled
   (MCP not connected) — dimmed + not-allowed, tooltip explains why. */
.ebtn-mcp:disabled {
  background:var(--surf2); color:var(--muted);
  border-color:var(--bdr); cursor:not-allowed;
}
.ebtn-mcp:disabled svg { opacity:.4; }

/* ── MCP MODALS ─────────────────────────────────────────────────────────── */
.mcp-modal {
  width: 92vw; padding: 0; overflow: hidden;
  display: flex; flex-direction: column; max-height: 88vh;
}
.mcp-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 28px 14px; border-bottom: 1px solid var(--bdr);
}
.mcp-modal-header h2 {
  font-family: var(--fH); font-size: 18px; font-weight: 700;
  color: var(--textBright); margin: 0;
}
.mcp-modal-close {
  background: transparent; border: none; font-size: 26px;
  color: var(--textMuted); cursor: pointer; line-height: 1; padding: 0 6px;
}
.mcp-modal-close:hover { color: var(--text); }
.mcp-modal-body {
  padding: 18px 28px; overflow-y: auto; flex: 1;
  font-size: 14px; color: var(--text); line-height: 1.7;
}
.mcp-modal-footer {
  padding: 14px 28px 22px; border-top: 1px solid var(--bdr); margin-top: 0;
}

/* Markdown surface for Kit modal output */
.mcp-md h2 { font-size: 17px; font-weight: 700; color: var(--textBright); margin: 16px 0 8px; }
.mcp-md h3 { font-size: 14px; font-weight: 600; color: var(--textBright); margin: 14px 0 6px; }
.mcp-md h4 { font-size: 12px; font-weight: 600; color: var(--textMuted); text-transform: uppercase; letter-spacing: 0.05em; margin: 12px 0 4px; }
.mcp-md p  { margin: 8px 0; }
.mcp-md ul { margin: 8px 0 8px 22px; padding: 0; }
.mcp-md li { margin: 4px 0; }
.mcp-md code { background: var(--surf2); padding: 1px 5px; border-radius: 3px; font-family: var(--fM); font-size: 12px; }

.mcp-internal-banner {
  background: rgba(217,119,6,.08); border: 1px solid rgba(217,119,6,.25);
  border-radius: 8px; padding: 10px 14px; font-size: 12px; font-weight: 600;
  color: #92400E; margin-bottom: 14px; letter-spacing: 0.02em;
}

.mcp-spinner {
  width: 32px; height: 32px; border-radius: 50%;
  border: 3px solid rgba(37,99,235,.18); border-top-color: #2563EB;
  margin: 0 auto; animation: mcp-spin 0.9s linear infinite;
}
@keyframes mcp-spin { to { transform: rotate(360deg); } }

/* Sequence Preview modal form */
.mcp-seq-meta {
  display: grid; grid-template-columns: 2fr 1fr; gap: 14px; margin-bottom: 18px;
  padding-bottom: 14px; border-bottom: 1px dashed var(--bdr);
}
.mcp-seq-lbl {
  display: block; font-family: var(--fM); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--textMuted); margin-bottom: 4px; margin-top: 8px;
}
.mcp-seq-meta input,
.mcp-seq-subj,
.mcp-seq-body,
.mcp-seq-recipient {
  width: 100%; box-sizing: border-box;
  padding: 8px 12px; border-radius: 6px;
  border: 1px solid var(--bdr); background: var(--bg);
  color: var(--textBright); font-size: 13px; font-family: inherit;
}
.mcp-seq-body { font-family: var(--fM); font-size: 12px; line-height: 1.55; resize: vertical; min-height: 140px; }
.mcp-seq-cadence-pill {
  display: inline-block; padding: 8px 12px; border-radius: 6px;
  background: rgba(99,102,241,.08); color: #6366F1; font-size: 12px; font-weight: 600;
  border: 1px solid rgba(99,102,241,.18);
}
.mcp-seq-row {
  background: var(--surf2); border: 1px solid var(--bdr); border-radius: 10px;
  padding: 14px 16px; margin-bottom: 12px;
}
.mcp-seq-row-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
}
.mcp-seq-row-num { font-weight: 700; color: var(--textBright); font-size: 13px; }
.mcp-seq-row-meta { font-family: var(--fM); font-size: 11px; color: var(--textMuted); }

/* Queue Panel rows */
.mcp-queue-meta {
  font-size: 12px; color: var(--textMuted); margin-bottom: 14px;
  padding-bottom: 10px; border-bottom: 1px dashed var(--bdr);
}
.mcp-queue-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-radius: 8px; border: 1px solid var(--bdr);
  background: var(--surf2); margin-bottom: 8px; gap: 12px;
}
.mcp-queue-row-main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.mcp-queue-status {
  font-size: 10px; padding: 2px 8px; border-radius: 4px;
  font-family: var(--fM); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; white-space: nowrap;
}
.mcp-queue-subj {
  font-size: 13px; color: var(--textBright);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mcp-queue-row-side {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.mcp-queue-when { font-family: var(--fM); font-size: 11px; color: var(--textMuted); }

/* Global queue panel additions — company-name pill and recipient sub-row.
   Reused by the per-card View Queue when showCompany is off (those CSS
   selectors stay no-op since the elements don't render). */
.mcp-queue-company {
  font-size: 11px; font-weight: 700; color: var(--textBright);
  padding: 2px 8px; border-radius: 4px; background: rgba(37,99,235,.08);
  border: 1px solid rgba(37,99,235,.18); font-family: var(--fM);
  letter-spacing: .02em; white-space: nowrap; max-width: 180px;
  overflow: hidden; text-overflow: ellipsis;
  transition: background .15s ease;
}
.mcp-queue-company:hover { background: rgba(37,99,235,.16); }
.mcp-queue-company-edit {
  font-size: 11px; font-weight: 600; color: #6B7280;
  padding: 2px 8px; border-radius: 4px; background: transparent;
  border: 1px dashed var(--bdr2); font-family: var(--fM);
  letter-spacing: .02em; white-space: nowrap;
  cursor: pointer; transition: all .15s ease;
}
.mcp-queue-company-edit:hover {
  background: rgba(37,99,235,.06); color: #2563EB;
  border-color: rgba(37,99,235,.3); border-style: solid;
}
.mcp-queue-recipient {
  grid-column: 1 / -1; font-family: var(--fM); font-size: 11px;
  color: var(--textMuted); margin: 4px 0 0 32px;
}
/* Global rows stack title + recipient on two lines, vs single line for
   the per-card view (where recipient is redundant because the panel
   header already shows the filter email). */
.mcp-queue-row-global {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 8px;
}
.mcp-queue-row-global .mcp-queue-row-main {
  flex: 1; min-width: 0;
}
.mcp-queue-row-global .mcp-queue-row-side {
  justify-self: end;
}

/* Warning + error states inside modals */
.mcp-warn {
  background: rgba(217,119,6,.08); border: 1px solid rgba(217,119,6,.25);
  border-radius: 6px; padding: 10px 12px; font-size: 12px; color: #92400E;
}
.mcp-error {
  background: rgba(220,38,38,.05); border: 1px solid rgba(220,38,38,.25);
  border-radius: 10px; padding: 14px 16px;
}
.mcp-error-title { font-weight: 700; color: #DC2626; margin-bottom: 6px; font-size: 14px; }
.mcp-error-msg { color: var(--text); font-size: 13px; margin-bottom: 8px; }
.mcp-error-detail {
  background: var(--surf2); border-radius: 6px; padding: 10px;
  font-family: var(--fM); font-size: 11px; color: var(--text);
  white-space: pre-wrap; word-break: break-all; max-height: 420px; overflow-y: auto;
  line-height: 1.5;
}
.mcp-error-aux {
  background: rgba(99,102,241,.06); border: 1px solid rgba(99,102,241,.18);
  border-radius: 6px; padding: 8px 10px; margin: 8px 0;
  font-family: var(--fM); font-size: 11px; color: var(--text); line-height: 1.5;
}
.mcp-error-aux strong { color: #6366F1; }

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .seg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-row { grid-template-columns: 1fr; }
  .trust-strip { grid-template-columns: 1fr 1fr; }
  .plist { padding:16px 16px 80px; }
  .rtoolbar { padding:14px 16px; }
  .pc-head { padding:16px; }
  .pe { padding:0 16px 16px; }
}
/* Card header: on narrow screens let the badges drop to their own row under the
   name instead of crowding the avatar/title. */
@media (max-width: 640px) {
  .pc-head { flex-wrap:wrap; }
  .pc-left { width:100%; }
  .pbdgs { width:100%; margin-top:10px; padding-left:60px; flex-wrap:wrap; }
  .pbdgs .chv { margin-left:auto; }
}
@media (max-width: 480px) {
  .seg-grid { grid-template-columns: 1fr; }
  .trust-strip { grid-template-columns: 1fr; }
}