/* Outreach Radar — warm-paper report aesthetic.
   Ink is near-black with a green cast and carries the chrome; emerald is the
   ONE signal colour and is spent deliberately (the mark, scores, positives,
   progress). Four typefaces, each with a job: Newsreader for display,
   Schibsted Grotesk for body, Urbanist for UI, Spline Sans Mono for labels
   and numbers — mono uppercase micro-type is most of what makes a report read
   as considered rather than as an app.
   Deliberately light-only: a demo link is a sales artefact, and a prospect on
   a dark-mode phone must see the same page the seller saw. */
:root {
  color-scheme: light;
  --page: #efece4;
  --surface: #ffffff;
  --surface-2: #faf8f2;
  --ink: #1c1b18;
  --ink-2: #56524a;
  --muted: #8a8678;
  --hairline: #efeade;
  --border: #e7e2d6;
  --accent: #1b2620;
  --accent-deep: #0f1713;
  --accent-soft: #ece8de;
  --accent-ink: #ffffff;
  --brand: #0c7d5f;
  --brand-deep: #075940;
  --brand-soft: #e5efe9;
  --good: #0d7d6b;
  --warn: #b7791f;
  --bad: #b23a2c;
  --s1: #0c7d5f; --s2: #c26a26; --s3: #2b6cb0; --s4: #a8801a; --s5: #a3527c; --s6: #6b6a62;
  --s-other: #a8a496;
  --chip-cur-bg: #e5efe9;
  --chip-ex-bg: rgba(194, 106, 38, 0.13);
  --shadow: 0 1px 2px rgba(28, 27, 24, 0.03), 0 8px 24px -14px rgba(28, 27, 24, 0.22);
  --shadow-lift: 0 2px 6px rgba(28, 27, 24, 0.05), 0 26px 60px -22px rgba(28, 27, 24, 0.34);
  --serif: "Newsreader", Georgia, serif;
  --sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ui: "Urbanist", system-ui, -apple-system, sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, "SFMono-Regular", monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
/* the hidden attribute must win over any display we set (bit us in demo mode:
   the fixed Seller field stayed visible because .field sets display:block) */
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  color: var(--ink);
  font: 14px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1300px 640px at 10% -8%, rgba(12, 125, 95, 0.08), transparent 58%),
    radial-gradient(1100px 620px at 96% -2%, rgba(183, 121, 31, 0.07), transparent 55%),
    radial-gradient(1100px 900px at 88% 108%, rgba(12, 125, 95, 0.05), transparent 60%),
    linear-gradient(168deg, #f5f2ea 0%, var(--page) 42%, #eae5d9 100%);
  background-attachment: fixed;
  background-size: 200% 200%;
  animation: bgshift 30s ease infinite;
}
@keyframes bgshift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
main { max-width: 1180px; margin: 0 auto; padding: 16px 24px 96px; }

/* ── top bar ── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px; border-bottom: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(12px) saturate(150%);
  position: sticky; top: 0; z-index: 30;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 15px; height: 15px; border-radius: 50%; flex: none;
  border: 3.5px solid var(--accent); position: relative;
  display: inline-block;
}
.brand-mark::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 1.5px solid var(--accent); opacity: 0.35;
  animation: ping 2.6s var(--ease) infinite;
}
@keyframes ping { 0% { transform: scale(0.6); opacity: 0.5; } 80%, 100% { transform: scale(1.4); opacity: 0; } }
.brand-name { font-family: var(--serif); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.brand-tag { color: var(--muted); font-size: 12px; margin-left: 2px; }
.topbar-right { display: flex; gap: 8px; align-items: center; }
.run-picker {
  background: var(--surface); color: var(--ink-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 12px; font: 12.5px var(--sans); max-width: 280px;
}

/* ── panels & typography ── */
.panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 20px 22px; margin-top: 14px; box-shadow: var(--shadow);
}
h1 { font-family: var(--serif); font-size: 26px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 6px; }
h2 { font-family: var(--serif); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 10px; }
.h-sub { font-family: var(--sans); color: var(--muted); font-weight: 450; font-size: 12.5px; margin-left: 6px; }
.lede { color: var(--ink-2); margin: 0 0 16px; max-width: 62ch; }
.fine { color: var(--muted); font-size: 12px; margin: 10px 0 0; }

/* ── form ── */
.form-panel { max-width: 760px; margin-left: auto; margin-right: auto; margin-top: 28px; padding: 26px 28px; }
.field { display: block; margin-bottom: 13px; }
.field-label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 5px; }
.field-hint { color: var(--muted); font-weight: 450; }
textarea, input[type="text"], input[type="number"] {
  width: 100%; background: var(--page); color: var(--ink);
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
  font: inherit; resize: vertical; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
textarea:focus, input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  background: var(--surface);
}
.form-row { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.field.small { width: 130px; margin-bottom: 0; }
.check { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 13px; padding-bottom: 9px; }
.check.subtle { justify-content: flex-end; gap: 6px; color: var(--muted); font-size: 11.5px; padding: 0; margin-top: 12px; }
.check.subtle input { width: 12px; height: 12px; accent-color: var(--accent); }

/* suggestion pills (demo mode + future saved profiles) */
.pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.pill {
  font: 12px var(--sans); font-weight: 550; cursor: pointer; text-align: left;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-2);
  border-radius: 999px; padding: 4px 12px; transition: all 0.18s var(--ease);
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pill:hover { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-soft); }

/* ── optional pre-flight count lookup ── */
.peek { margin-top: 12px; }
.linkbtn {
  font: inherit; font-size: 13px; font-weight: 600; color: var(--accent-deep);
  background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.linkbtn:hover { text-decoration-color: var(--accent); }
.linkbtn[disabled] { color: var(--muted); cursor: default; text-decoration: none; }
.count-out { margin-top: 10px; border: 1px solid var(--hairline); border-radius: 12px; overflow: hidden; background: var(--page); }
.count-row { display: flex; align-items: baseline; gap: 12px; padding: 9px 12px; font-size: 13px; }
.count-row + .count-row { border-top: 1px solid var(--hairline); }
.count-co { font-weight: 600; flex: 1; min-width: 0; }
.count-co small { display: block; font-weight: 400; color: var(--muted); font-size: 11px; }
.count-n { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.count-n b { font-weight: 650; }
.count-use {
  font: inherit; font-size: 11.5px; color: var(--accent-deep); background: none; border: 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px; padding: 0;
}
.btn {
  font: inherit; font-weight: 600; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  padding: 9px 18px; transition: all 0.22s var(--ease);
}
.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.btn.primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--ink-2); }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-soft); }
.btn.tiny { padding: 3px 12px; font-size: 12px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* ── progress ── */
.progress-head { display: flex; justify-content: space-between; align-items: baseline; }
.elapsed { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.stages { list-style: none; margin: 12px 0 0; padding: 0; }
.stages li { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hairline); }
.stages li:first-child { border-top: 0; }
.st-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; background: var(--hairline); }
.st-dot.running { background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
.st-dot.done { background: var(--good); }
.st-dot.error { background: var(--bad); }
.st-dot.skipped { background: var(--muted); }
@keyframes pulse { 50% { opacity: 0.35; } }
.st-body { flex: 1; }
.st-name { font-weight: 600; }
.st-sub { color: var(--ink-2); font-size: 12.5px; margin-top: 2px; white-space: pre-line; }
.logbox { margin-top: 14px; color: var(--muted); font-size: 12px; }
.logbox pre {
  background: var(--page); border: 1px solid var(--hairline); border-radius: 10px;
  padding: 10px 12px; max-height: 220px; overflow: auto; font-size: 11.5px; line-height: 1.55;
}

/* ── seller brief ── */
.brief-head { display: flex; justify-content: space-between; align-items: center; }
.brief p { margin: 6px 0; color: var(--ink-2); max-width: 78ch; }
.brief .tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.tag {
  background: var(--page); border: 1px solid var(--hairline); color: var(--ink-2);
  border-radius: 999px; padding: 3px 11px; font-size: 12px;
}
.brief .k { font-weight: 700; color: var(--accent-deep); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 12px; font-family: var(--sans); }

/* ── target strip ── */
.target-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.target-chip {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 9px 14px; box-shadow: var(--shadow); font-size: 12.5px; color: var(--ink-2);
}
.target-chip .t-name { font-weight: 650; color: var(--ink); font-size: 13.5px; }
.target-chip .t-domain { color: var(--muted); margin-left: 6px; }
.partial { color: var(--s2); font-weight: 600; }

/* ── charts ── */
.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 980px) { .charts { grid-template-columns: 1fr; } }
.chart-flex { display: flex; gap: 18px; align-items: flex-start; }
.donut-wrap { position: relative; flex: none; width: 240px; }
.donut { display: block; width: 240px; height: 240px; }
.donut path { transition: opacity 0.12s ease; cursor: pointer; }
.donut path:focus { outline: none; }
.donut.has-hover path { opacity: 0.38; }
.donut.has-hover path.hot { opacity: 1; }
.donut-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; pointer-events: none;
}
.donut-n { font-family: var(--serif); font-size: 28px; font-weight: 600; }
.donut-cap { font-size: 11.5px; color: var(--muted); }
.tooltip {
  position: absolute; z-index: 20; pointer-events: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-lift); padding: 7px 10px; font-size: 12px; min-width: 130px;
}
.tooltip .tt-val { font-weight: 650; font-size: 13px; }
.tooltip .tt-seg { color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.tt-key { display: inline-block; width: 10px; height: 3px; border-radius: 2px; }

.side { flex: 1; min-width: 0; }
.legend { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.legend li {
  display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px; cursor: pointer;
}
.legend li:hover, .legend li.hot { background: var(--page); }
.sw { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.legend .lg-name { flex: 1; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legend .lg-n { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.legend .lg-pct { color: var(--muted); width: 40px; text-align: right; font-variant-numeric: tabular-nums; }
.side-hint { color: var(--muted); font-size: 11.5px; margin: 10px 0 0; }

.seg-panel { border-top: 1px solid var(--hairline); margin-top: 10px; padding-top: 8px; }
.seg-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.seg-name { font-weight: 650; font-size: 13px; }
.seg-people { list-style: none; margin: 0; padding: 0; max-height: 230px; overflow-y: auto; }
.seg-people li { border-top: 1px solid var(--hairline); }
.seg-people li:first-child { border-top: 0; }
.seg-person {
  display: flex; gap: 9px; width: 100%; text-align: left; background: none; border: 0;
  padding: 7px 6px; cursor: pointer; font: inherit; color: inherit; border-radius: 8px; align-items: baseline;
}
.seg-person:hover { background: var(--page); }
.sp-rank { flex: none; color: var(--muted); font-size: 11px; width: 18px; font-variant-numeric: tabular-nums; }
.sp-main { flex: 1; min-width: 0; }
.sp-name { font-weight: 600; font-size: 12.5px; }
.sp-tag { color: var(--ink-2); font-size: 11.5px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sp-score { flex: none; font-size: 11px; font-weight: 650; color: var(--accent-deep); font-variant-numeric: tabular-nums; }
.sp-ext { flex: none; color: var(--muted); font-size: 11px; }

/* ── people cards ── */
.people-panel { margin-top: 14px; }
.people-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.chips { display: flex; gap: 6px; }
.chip {
  font: inherit; font-size: 12.5px; padding: 5px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-2);
  transition: all 0.18s var(--ease);
}
.chip:hover { border-color: var(--accent); color: var(--accent-deep); }
.chip.active { background: var(--ink); color: var(--surface); border-color: var(--ink); font-weight: 600; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(370px, 1fr)); gap: 12px; margin-top: 14px; align-items: start; }
.card {
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
  overflow: hidden; box-shadow: var(--shadow); transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.card:hover { box-shadow: var(--shadow-lift); }
.card-head {
  display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left;
  background: none; border: 0; padding: 13px 14px; cursor: pointer; font: inherit; color: inherit;
}
.card-head:hover { background: var(--page); }
.rank-badge {
  flex: none; width: 26px; height: 26px; border-radius: 9px; background: var(--page);
  border: 1px solid var(--hairline); color: var(--ink-2); font-size: 11.5px; font-weight: 650;
  display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums;
}
.card-main { flex: 1; min-width: 0; }
.card-name-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.card-head .card-co { flex: none; max-width: 34%; text-align: right; font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.card-name { font-weight: 650; font-size: 14px; min-width: 0; overflow-wrap: break-word; }
.badge { font-size: 10.5px; font-weight: 650; padding: 2px 8px; border-radius: 999px; letter-spacing: 0.02em; }
.badge.cur { background: var(--chip-cur-bg); color: var(--accent-deep); }
.badge.ex { background: var(--chip-ex-bg); color: var(--s2); }
.card-roles { display: flex; flex-wrap: wrap; gap: 3px 16px; font-size: 12px; margin-top: 3px; }
.card-roles .role-then { color: var(--muted); }
.card-roles .role-now { color: var(--ink-2); font-weight: 550; }
.card-tag { color: var(--ink-2); font-size: 12.5px; margin-top: 2px; }
.card-why { color: var(--muted); font-size: 12px; margin-top: 5px; }
.scorebar { height: 4px; border-radius: 2px; background: var(--hairline); margin-top: 9px; overflow: hidden; }
.scorebar i { display: block; height: 100%; border-radius: 2px; background: var(--accent); }
.card-score { flex: none; text-align: right; }
.cs-n { font-family: var(--serif); font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; }
.cs-cap { display: block; color: var(--muted); font-size: 10.5px; }
.chev { flex: none; color: var(--muted); transition: transform 0.15s; margin-top: 3px; }
.card.open .chev { transform: rotate(90deg); }
.card-body { border-top: 1px solid var(--hairline); padding: 14px 16px; display: none; }
.card.open .card-body { display: block; }
.msg-subject { font-weight: 650; font-size: 13px; margin-bottom: 6px; }
.msg-body { color: var(--ink-2); font-size: 13px; line-height: 1.65; }
/* paragraphs carry the spacing now, so pre-wrap only has to hold the line
   breaks inside one — a sign-off, an address block */
.msg-body p { white-space: pre-wrap; margin: 0 0 10px; }
.msg-body p:last-child { margin-bottom: 0; }
.msg-loading { color: var(--muted); font-size: 12.5px; }
.spinner {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--hairline); border-top-color: var(--accent);
  animation: spin 0.8s linear infinite; vertical-align: -2px; margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.card-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
.linkout { color: var(--accent-deep); text-decoration: none; font-size: 12.5px; font-weight: 600; }
.linkout:hover { text-decoration: underline; }

/* ── proposal overlay (B2) ── */
.pdf-overlay {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.pdf-overlay[hidden] { display: none; }
.pdf-scrim { position: absolute; inset: 0; background: rgba(10, 14, 11, 0.55); backdrop-filter: blur(4px); }
.pdf-card {
  position: relative; width: min(1060px, 96vw); height: min(92vh, 780px);
  background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-lift);
  display: flex; flex-direction: column; overflow: hidden;
  animation: overlay-in 0.3s var(--ease);
}
@keyframes overlay-in { from { opacity: 0; transform: translateY(14px) scale(0.985); } }
.pdf-head {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  border-bottom: 1px solid var(--hairline); flex: none;
}
.pdf-title { font-family: var(--serif); font-weight: 600; font-size: 15px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdf-open-new { color: var(--muted); font-size: 12px; text-decoration: none; }
.pdf-open-new:hover { color: var(--accent-deep); }
.pdf-close {
  flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink-2); cursor: pointer; font-size: 15px; line-height: 1;
}
.pdf-close:hover { border-color: var(--accent); color: var(--accent-deep); }
.pdf-frame { flex: 1; border: 0; width: 100%; background: var(--page); }
.pdf-foot {
  flex: none; display: flex; align-items: center; gap: 14px; padding: 8px 16px;
  border-top: 1px solid var(--hairline); font-size: 12px; color: var(--muted);
}
.pdf-foot a { color: var(--accent-deep); font-weight: 600; text-decoration: none; }
.pdf-foot a:hover { text-decoration: underline; }

/* ── banners & footer ── */
.banner { border-radius: 12px; padding: 12px 16px; margin-top: 14px; font-size: 13px; }
.banner.error { background: color-mix(in srgb, var(--bad) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent); color: var(--ink); }
.runfoot { color: var(--muted); font-size: 11.5px; margin-top: 22px; text-align: center; }
.runfoot code { background: var(--page); padding: 1px 6px; border-radius: 5px; }

/* ── live run: progress strip, bars, skeletons ── */
.runstrip { position: sticky; top: 60px; z-index: 20; padding: 14px 20px;
  background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); }
.runstrip-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.runstrip-label { font-weight: 650; font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.runstrip-right { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.pbar { height: 6px; border-radius: 3px; background: var(--hairline); overflow: hidden; position: relative; }
.pbar.big { height: 8px; border-radius: 4px; }
.pbar i {
  display: block; height: 100%; border-radius: inherit; background: var(--accent);
  transition: width 0.6s cubic-bezier(0.25, 1, 0.4, 1);
}
.pbar.good i { background: var(--good); }
.pbar.indet i {
  width: 32% !important; position: absolute; left: 0;
  animation: slide 1.3s ease-in-out infinite;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
@keyframes slide { 0% { left: -32%; } 100% { left: 100%; } }
.tracks { margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px 22px; }
.track { font-size: 12px; }
.track-head { display: flex; justify-content: space-between; margin-bottom: 4px; }
.track-name { color: var(--ink-2); font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.track-stat { color: var(--muted); font-variant-numeric: tabular-nums; flex: none; margin-left: 8px; }
.track.done .track-name { color: var(--muted); font-weight: 500; }

/* shimmer skeletons */
.sk {
  background: linear-gradient(100deg, var(--hairline) 40%, color-mix(in srgb, var(--hairline) 40%, var(--surface)) 50%, var(--hairline) 60%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: 6px;
}
@keyframes shimmer { to { background-position: -200% 0; } }
.sk-line { height: 13px; margin: 9px 0; }
.sk-line.w60 { width: 60%; } .sk-line.w80 { width: 80%; } .sk-line.w95 { width: 95%; }
.sk-chips { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.sk-chip { height: 24px; width: 130px; border-radius: 999px; }
.sk-chip.w2 { width: 200px; }
.skeleton-note { color: var(--ink-2); font-size: 13px; display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 1.2s ease-in-out infinite; flex: none; }

/* skeleton donut: spinning dashed ring while data is on its way */
.sk-donut {
  position: absolute; inset: 16px; border-radius: 50%;
  border: 22px solid var(--hairline);
  mask: conic-gradient(#000 0 78%, transparent 78% 100%);
  -webkit-mask: conic-gradient(#000 0 78%, transparent 78% 100%);
  animation: spin 2.6s linear infinite;
}
.donut-wrap.loading svg.donut { visibility: hidden; }
.donut-wrap:not(.loading) .sk-donut { display: none; }
.side-progress { margin-bottom: 10px; display: grid; gap: 8px; }
.side-progress:empty { display: none; }

/* skeleton people cards */
.card.sk-card { padding: 14px; box-shadow: none; }
.card.sk-card .sk-line { margin: 7px 0; }
.populate { animation: fadein 0.5s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px) } }

/* ── tabs ── */
.tabbar {
  max-width: 1180px; margin: 16px auto 0; padding: 0 24px;
  display: flex; gap: 0;
}
.tabbar { justify-content: flex-start; }
.tab {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 8px 20px; border-radius: 999px;
  border: 1px solid transparent;
  background: transparent; color: var(--muted);
  transition: all 0.2s var(--ease);
}
.tab + .tab { margin-left: 6px; }
.tab:hover { color: var(--ink-2); background: var(--surface); border-color: var(--border); }
.tab.active {
  background: var(--ink); color: var(--surface);
  border-color: var(--ink);
}

/* ── collapsible panels ── */
.collapse-panel.closed .collapse-body { display: none; }
.collapse-body { margin-top: 4px; }
.collapse-body p { margin: 6px 0; color: var(--ink-2); max-width: 80ch; }
.kv-list { list-style: none; margin: 6px 0; padding: 0; }
.kv-list li { display: flex; gap: 9px; padding: 4px 0; color: var(--ink-2); font-size: 13px; }
.kv-list li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-top: 6px; }

/* PESTLE / 5C tiles */
.fw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-top: 8px; }
.fw-tile { background: var(--page); border: 1px solid var(--hairline); border-radius: 12px; padding: 12px 14px; }
.fw-tile h3 { margin: 0 0 6px; font-family: var(--sans); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-deep); }
.fw-tile ul { margin: 0; padding: 0 0 0 16px; color: var(--ink-2); font-size: 12.5px; }
.fw-tile li { margin: 4px 0; }

/* SWOT quadrants */
.swot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
@media (max-width: 700px) { .swot-grid { grid-template-columns: 1fr; } }
.swot-grid .fw-tile.s h3 { color: var(--good); }
.swot-grid .fw-tile.w h3 { color: var(--s2); }
.swot-grid .fw-tile.o h3 { color: var(--s3); }
.swot-grid .fw-tile.t h3 { color: var(--bad); }
.entry-note {
  margin-top: 12px; background: var(--accent-soft); border-radius: 12px;
  padding: 12px 16px; color: var(--ink); font-size: 13px;
  border-left: 3px solid var(--accent);
}

/* opportunity cards */
.opps { display: grid; gap: 12px; margin-top: 14px; }
.opp { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; box-shadow: var(--shadow); transition: box-shadow 0.25s var(--ease); }
.opp:hover { box-shadow: var(--shadow-lift); }
.opp-head { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; background: none; border: 0; padding: 14px 16px; cursor: pointer; font: inherit; color: inherit; }
.opp-head:hover { background: var(--page); }
.opp-main { flex: 1; min-width: 0; }
.opp-entity-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.opp-entity { font-weight: 650; font-size: 14.5px; }
.badge.tcust { background: var(--chip-cur-bg); color: var(--accent-deep); }
.badge.tdist { background: var(--chip-ex-bg); color: var(--s2); }
.badge.tcoll { background: rgba(43, 108, 176, 0.12); color: var(--s3); }
.opp-title { color: var(--ink-2); font-size: 13px; margin-top: 3px; }
.opp-scores { flex: none; display: flex; gap: 6px; }
.score-chip { text-align: center; background: var(--page); border: 1px solid var(--hairline); border-radius: 9px; padding: 4px 9px; min-width: 46px; }
.score-chip b { display: block; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.score-chip span { font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.urg-high b { color: var(--bad); } .urg-medium b { color: var(--s4); } .urg-low b { color: var(--muted); }
.opp-body { border-top: 1px solid var(--hairline); padding: 14px 18px; display: none; }
.opp.open .opp-body { display: block; }
.opp.open .chev { transform: rotate(90deg); }
.opp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px; }
@media (max-width: 820px) { .opp-cols { grid-template-columns: 1fr; } }
.opp-k { font-weight: 700; color: var(--accent-deep); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; margin: 10px 0 2px; }
.target-box { margin-top: 12px; background: var(--page); border: 1px solid var(--hairline); border-radius: 12px; padding: 10px 14px; font-size: 13px; }
.target-box b { color: var(--ink); }
.opp-actions { margin-top: 12px; display: flex; gap: 8px; }

/* ── demo mode (P-28) ── */
.demo-bar {
  max-width: 1132px; margin: 12px 24px 0; padding: 10px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 12px; font-size: 12.5px;
}
@media (min-width: 1180px) { .demo-bar { margin-left: auto; margin-right: auto; } }
.demo-name { color: var(--ink-2); }
.demo-name b { color: var(--accent-deep); }
.demo-quota { color: var(--accent-deep); font-weight: 600; }

/* the spotlight-and-scrim tour was replaced by the dock + ring (see the
   ATLAS-GRADE block below): one overlay fewer, page never dimmed */
.demo-right { display: flex; align-items: center; gap: 10px; }

/* ═══ sales-grade report surfaces (2026-08-16) ═══ */

/* report hero — the first thing a shared link shows */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 140% at 88% -20%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 58%),
    linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--accent-soft) 45%, var(--surface)));
  border: 1px solid var(--border); border-radius: 20px;
  padding: 26px 28px 22px; margin-top: 14px; box-shadow: var(--shadow);
}
.hero::after {
  content: ""; position: absolute; right: -70px; top: -70px; width: 260px; height: 260px;
  border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  box-shadow: inset 0 0 0 26px color-mix(in srgb, var(--accent) 5%, transparent);
  pointer-events: none;
}
.hero-main { position: relative; max-width: 84ch; }
.hero-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-deep);
}
.hero-title {
  font-family: var(--serif); font-size: clamp(22px, 2.6vw, 31px); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.14; margin: 7px 0 0;
}
.hero-sub { color: var(--ink-2); font-size: 13.5px; margin: 8px 0 0; max-width: 90ch; }
.stat-row {
  position: relative; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px;
}
.stat {
  flex: 1 1 132px; background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid var(--border); border-radius: 13px; padding: 11px 14px;
  backdrop-filter: blur(6px);
}
.stat b {
  display: block; font-family: var(--serif); font-size: 25px; font-weight: 600;
  line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.stat span { display: block; font-size: 10.5px; color: var(--muted); margin-top: 3px;
  text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; }
.stat.accent b { color: var(--accent-deep); }

/* section headers with an eyebrow rule */
.panel > h2 { position: relative; padding-left: 13px; }
.panel > h2::before {
  content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 3px;
  border-radius: 2px; background: var(--accent);
}

/* score ring on person cards, replacing the flat number */
.score-ring { position: relative; width: 46px; height: 46px; flex: none; }
.score-ring svg { transform: rotate(-90deg); display: block; }
.score-ring .sr-bg { stroke: var(--hairline); }
.score-ring .sr-fg { stroke: var(--accent); transition: stroke-dashoffset 0.8s var(--ease); }
.score-ring .sr-n {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink);
}
.card-score .cs-cap { text-align: center; margin-top: 2px; }

/* avatar monogram */
.avatar {
  flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
  font-weight: 700; font-size: 13px; color: var(--accent-deep); background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}
.avatar.ex { color: var(--s2); background: var(--chip-ex-bg); border-color: color-mix(in srgb, var(--s2) 22%, transparent); }
.rank-pip {
  position: absolute; top: -5px; left: -5px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 6px; background: var(--ink); color: var(--surface); font-size: 10px;
  font-weight: 700; display: grid; place-items: center; font-variant-numeric: tabular-nums;
}
.avatar-wrap { position: relative; flex: none; }

/* opportunity cards: rank medallion + urgency accent */
.opp { position: relative; }
.opp::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--hairline);
}
.opp.u-high::before { background: var(--bad); }
.opp.u-medium::before { background: var(--s4); }
.opp.u-low::before { background: var(--s-other); }
.opp-rank {
  flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-deep); font-weight: 700; font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

/* share toast */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: var(--ink); color: var(--surface); font-size: 13px; font-weight: 600;
  padding: 10px 18px; border-radius: 999px; box-shadow: var(--shadow-lift); z-index: 300;
  animation: overlay-in 0.3s var(--ease);
}

/* demo bar: make it read as a presentation banner, not a notice */
.demo-bar {
  background: linear-gradient(90deg, var(--accent-soft), color-mix(in srgb, var(--accent-soft) 40%, var(--surface)));
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
}
.demo-name { font-size: 13px; }
.demo-name b { font-family: var(--serif); font-size: 15px; }

/* ═══════════════════════════════════════════════════════════════════════
   ATLAS-GRADE REPORT SURFACES (2026-08-16)
   Everything below either re-spends the emerald deliberately or adds the
   report furniture: masthead, signal pipe, three surfaces, folds, and the
   guided-walkthrough chrome.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── the emerald, spent on purpose ─────────────────────────────────────
   The retheme made --accent near-black. These are the places that were
   emerald because they MEAN something (identity, score, progress, good),
   not because emerald happened to be the accent. */
.brand-mark { border-color: var(--brand); }
.brand-mark::after { border-color: var(--brand); }
.score-ring .sr-fg { stroke: var(--brand); }
.scorebar i { background: var(--brand); }
.pbar i { background: var(--brand); }
.pbar.indet i { background: linear-gradient(90deg, transparent, var(--brand), transparent); }
.st-dot.running { background: var(--brand); }
.pulse-dot { background: var(--brand); }
.spinner { border-top-color: var(--brand); }
.kv-list li::before { background: color-mix(in srgb, var(--brand) 55%, var(--border)); }
.panel > h2::before { background: var(--brand); }
.badge.cur, .badge.tcust { background: var(--chip-cur-bg); color: var(--brand-deep); }
.avatar { color: var(--brand-deep); background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 20%, transparent); }
.stat.accent b { color: var(--brand-deep); }
.hero-eyebrow { color: var(--brand-deep); }
.entry-note { background: var(--brand-soft); border-left-color: var(--brand); }
.check.subtle input { accent-color: var(--brand); }
.opp-rank { background: var(--accent-soft); color: var(--accent-deep); }

/* micro-type: mono, uppercase, letterspaced — the report's connective tissue */
.hero-eyebrow, .stat span, .fw-tile h3, .opp-k, .brief .k, .score-chip span,
.fold-num, .pzl, .mast-for, .mast-by, .lane .lc { font-family: var(--mono); }
.btn, .chip, .tab, .pill, .lane .ln { font-family: var(--ui); font-weight: 700; }
.btn { letter-spacing: 0.005em; }

/* ── masthead: the prospect's cover ────────────────────────────────────
   Given real height and a quiet field of its own so the page opens on the
   brand rather than on a control. */
.mast {
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(760px 420px at 82% -30%, rgba(12, 125, 95, 0.13), transparent 62%),
    radial-gradient(620px 360px at 8% 120%, rgba(183, 121, 31, 0.10), transparent 60%),
    linear-gradient(178deg, #fdfcf8, var(--surface-2));
}
.mast::after {
  /* a quiet radar sweep, far enough back to read as texture */
  content: ""; position: absolute; right: -80px; top: -150px; width: 540px; height: 540px;
  border-radius: 50%; pointer-events: none; opacity: 0.85;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(12, 125, 95, 0.16) 34deg, transparent 62deg);
  mask: radial-gradient(closest-side, transparent 34%, #000 36%, #000 99%, transparent);
  -webkit-mask: radial-gradient(closest-side, transparent 34%, #000 36%, #000 99%, transparent);
  animation: sweep 7s linear infinite;
}
@keyframes sweep { to { transform: rotate(360deg); } }
.mast-inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 34px 24px 30px; }
.mast-brand { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.mast-logo {
  flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  font-family: var(--serif); font-weight: 600; font-size: 19px; letter-spacing: -0.02em;
  color: var(--surface); background: linear-gradient(140deg, var(--accent), #33463c);
  box-shadow: 0 12px 26px -14px rgba(28, 27, 24, 0.8);
}
.mast-brand-t { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.mast-for { font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.mast-co { font-family: var(--serif); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin-top: 3px; }
.mast-by {
  margin-left: auto; font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.mast-by b { color: var(--brand-deep); }
.mast-title {
  font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 4.4vw, 50px);
  line-height: 1.06; letter-spacing: -0.028em; margin: 22px 0 0;
  /* 20ch broke a 50px headline after four or five words and left half the
     masthead empty. The sweep decoration owns the right ~460px, so this is
     as wide as the line can run before the two collide. */
  max-width: 27ch;
}
.mast-title em { font-style: italic; color: var(--brand-deep); }
.mast-dek { color: var(--ink-2); font-size: 15px; line-height: 1.55; margin: 12px 0 0; max-width: 78ch; }
.mast-row { display: flex; align-items: center; gap: 16px; margin-top: 22px; flex-wrap: wrap; }
.mast-meta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 620px) { .mast-by { margin-left: 0; width: 100%; } .mast-inner { padding: 26px 20px 24px; } }

/* ── what Radar does: signals → radar → outputs ────────────────────────── */
.whatwrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.pipe {
  display: flex; align-items: stretch; gap: 12px; margin: 24px 0 0; padding: 16px 18px 13px;
  background: linear-gradient(115deg, rgba(12, 125, 95, 0.05), var(--surface) 45%, rgba(183, 121, 31, 0.05));
  border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 16px 38px -28px rgba(28, 27, 24, 0.55);
}
.pz { display: flex; flex-direction: column; min-width: 0; }
.pzl {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 9px; white-space: nowrap;
}
.pzsrc { flex: 1.3; }
.pfeed { position: relative; flex: 1; min-height: 104px; overflow: hidden; }
.pchip {
  position: absolute; left: -2%; display: flex; align-items: center; gap: 7px;
  font-family: var(--ui); font-size: 11.5px; font-weight: 600; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 13px; white-space: nowrap; box-shadow: 0 4px 12px -7px rgba(28, 27, 24, 0.35);
  animation: feed 18s linear infinite; opacity: 0;
}
.pchip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex: none; }
@keyframes feed {
  0% { left: -6%; transform: scale(1.16); opacity: 0; }
  6% { opacity: 1; transform: scale(1.1); }
  55% { transform: scale(0.92); }
  92% { opacity: 0.9; }
  100% { left: 97%; transform: scale(0.5); opacity: 0; }
}
.parrow {
  flex: none; align-self: center; width: 32px; height: 3px; margin-top: 14px; position: relative;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 45%, #fff) 0 7px, transparent 7px 14px);
  animation: march 1s linear infinite;
}
.parrow::after {
  content: ""; position: absolute; right: -7px; top: -4.5px;
  border-left: 8px solid color-mix(in srgb, var(--accent) 55%, #fff);
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
@keyframes march { to { background-position: 14px 0; } }
.pzhub { flex: none; align-items: center; justify-content: center; }
.phub {
  width: 84px; height: 84px; border-radius: 50%; margin: auto; position: relative;
  background: linear-gradient(135deg, var(--accent), #3a4d43); color: #fff;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 28px -12px rgba(28, 27, 24, 0.7);
}
.phub::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid var(--brand); animation: hubpulse 2.2s ease-out infinite;
}
@keyframes hubpulse { 0% { transform: scale(0.95); opacity: 0.75; } 100% { transform: scale(1.4); opacity: 0; } }
.phubcap { font-family: var(--mono); font-size: 9.5px; color: var(--muted); text-align: center; margin-top: 8px; white-space: nowrap; }
.pzmet { flex: 1; }
.pmet { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; align-content: center; flex: 1; }
.pmpill {
  font-family: var(--ui); font-size: 10.5px; font-weight: 700; border-radius: 999px;
  padding: 6px 10px; text-align: center; white-space: nowrap;
  background: linear-gradient(180deg, #fff, var(--surface-2)); border: 1px solid var(--border);
  color: var(--ink-2); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(28, 27, 24, 0.07);
  animation: memboss 12s ease infinite;
}
.pmpill:nth-child(2) { animation-delay: 2s; } .pmpill:nth-child(3) { animation-delay: 4s; }
.pmpill:nth-child(4) { animation-delay: 6s; } .pmpill:nth-child(5) { animation-delay: 8s; }
.pmpill:nth-child(6) { animation-delay: 10s; }
@keyframes memboss {
  0%, 18%, 100% { transform: none; color: var(--ink-2); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(28, 27, 24, 0.07); }
  7% { transform: translateY(-3px); color: var(--ink); box-shadow: inset 0 1px 0 #fff, 0 10px 18px -9px rgba(28, 27, 24, 0.4); }
}
.pzout { flex: 1; }
.pout {
  flex: 1; display: flex; flex-direction: column; justify-content: center; background: #fff;
  border: 1.5px solid color-mix(in srgb, var(--brand) 34%, var(--border)); border-radius: 14px;
  padding: 11px 13px; box-shadow: 0 10px 22px -14px rgba(12, 125, 95, 0.5);
}
.pout .po1 { font-family: var(--serif); font-weight: 600; font-size: 14.5px; display: flex; align-items: center; gap: 8px; }
.pout .po1 .up { font-family: var(--mono); font-size: 10px; color: #fff; background: var(--brand); border-radius: 999px; padding: 1px 8px; }
.pout .spark { stroke-dasharray: 120; stroke-dashoffset: 120; animation: draw 5.5s ease-out infinite; }
@keyframes draw { 0% { stroke-dashoffset: 120; } 55%, 82% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@media (max-width: 940px) { .pipe { display: none; } }

/* the three surfaces, as the way in to them */
.lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0 4px; }
@media (max-width: 860px) { .lanes { grid-template-columns: 1fr; } }
.lane {
  text-align: left; cursor: pointer; border-radius: 16px; padding: 18px 18px 16px;
  background: linear-gradient(180deg, #fff, var(--surface-2)); border: 1px solid var(--border);
  box-shadow: 0 10px 24px -20px rgba(28, 27, 24, 0.6);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.lane:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--brand) 30%, var(--border)); }
.lane.lit {
  transform: translateY(-4px); border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(12, 125, 95, 0.14), 0 22px 44px -24px rgba(12, 125, 95, 0.6);
}

/* The lane the body below belongs to. Three cards that navigate, with content
   appearing underneath them, need to say WHICH card the content came from —
   otherwise they read as decoration. The card lifts onto the page's own
   background and spills a short gradient downward, so the eye follows it into
   the body instead of treating the two as unrelated blocks. */
.lanes { position: relative; }
.lane { position: relative; }
.lane.on {
  border-color: color-mix(in srgb, var(--brand) 55%, var(--border));
  background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--brand) 5%, var(--surface-2)));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 16%, transparent),
              0 18px 38px -26px rgba(12, 125, 95, 0.55);
}
.lane.on .ln { color: var(--brand-deep); }
.lane.on::after {
  content: ""; position: absolute; left: 6%; right: 6%; top: calc(100% - 1px);
  height: 46px; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 13%, transparent), transparent 78%);
  /* narrows as it falls, so it reads as a connection rather than a shadow */
  clip-path: polygon(0 0, 100% 0, 78% 100%, 22% 100%);
}
@media (max-width: 860px) { .lane.on::after { display: none; } }
@media (prefers-reduced-motion: reduce) { .lane { transition: none; } }
.lane .lni { display: block; width: 30px; height: 30px; margin-bottom: 11px; }
.lane .lni svg { display: block; width: 30px; height: 30px; fill: none; stroke: var(--brand); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lane .lni svg .f { fill: var(--brand); stroke: none; }
.lane .lni svg .p { stroke: var(--muted); }
.lane .ln { display: block; font-family: var(--serif); font-weight: 600; font-size: 19px; letter-spacing: -0.015em; color: var(--ink); }
.lane .lc { display: block; margin-top: 7px; font-family: var(--sans); font-size: 12px; line-height: 1.5; color: var(--ink-2); letter-spacing: 0; }

/* ── section bands: headings carry the structure, not paragraphs ──────── */
.secband { text-align: center; margin: 40px 0 18px; }
.secband h2 {
  font-family: var(--serif); font-size: clamp(21px, 2.5vw, 27px); font-weight: 600;
  letter-spacing: -0.02em; margin: 0; padding: 0;
}
.secband h2::before { content: none; }
.secband .sub {
  display: block; margin-top: 6px; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted);
}

/* ── folds: every section closed until asked for ───────────────────────── */
.collapse-panel { padding: 0; overflow: hidden; }
.fold-head {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: none; border: 0; padding: 17px 22px; cursor: pointer; font: inherit; color: inherit;
  transition: background 0.2s var(--ease);
}
.fold-head:hover { background: var(--surface-2); }
.fold-num {
  flex: none; font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; color: var(--muted);
  width: 22px; font-variant-numeric: tabular-nums;
}
.fold-t { flex: 1; min-width: 0; }
.fold-t h2 { margin: 0; padding: 0; font-size: 19px; }
.fold-t h2::before { content: none; }
.fold-peek {
  display: block; margin-top: 3px; font-size: 12px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fold-chev { flex: none; color: var(--muted); font-size: 20px; line-height: 1; transition: transform 0.28s var(--ease); }
.collapse-panel:not(.closed) .fold-chev { transform: rotate(90deg); color: var(--brand-deep); }
.collapse-panel:not(.closed) .fold-head { border-bottom: 1px solid var(--hairline); }
.collapse-panel .collapse-body { padding: 16px 22px 20px; margin-top: 0; }
.collapse-panel.closed .collapse-body { display: none; }
/* People-tab folds: the fold IS the card, so the two chart cards inside it read
   as tiles — the same treatment .fw-tile gets inside the research folds. */
.collapse-body > .charts { margin-top: 0; }
.collapse-body .chart-card {
  background: var(--page); border: 1px solid var(--hairline);
  box-shadow: none; margin-top: 0; border-radius: 12px;
}
/* the filter chips cannot live in the fold head (it is a button), so they sit
   at the top of the body, right-aligned where the head used to hold them */
.collapse-body > .chips { justify-content: flex-end; margin: -4px 0 2px; }

/* the same fold, on the People tab's brief */
.brief.collapse-panel .collapse-body { padding: 16px 22px 20px; }

/* the pre-open beat: it IS already loaded, but a report that thinks for a
   moment before it opens reads as work being done rather than a div toggling */
.fold-think { padding: 18px 22px 22px; }
.fold-think .ft-l {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--muted); display: flex; align-items: center; gap: 9px; margin-bottom: 12px;
}
.fold-think .ft-l::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand);
  animation: pulse 1s ease-in-out infinite;
}
.fold-think .ft-bar { height: 3px; border-radius: 2px; background: var(--hairline); overflow: hidden; position: relative; }
.fold-think .ft-bar i {
  position: absolute; left: -34%; width: 34%; height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  animation: slide 1.15s ease-in-out infinite;
}
.fold-think .sk { margin-top: 14px; }

/* ── framework tiles: same size, first lines only, click to open ───────── */
.fw-grid { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 10px; }
.fw-tile {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px;
  padding: 13px 15px 12px; cursor: pointer; position: relative;
  height: 148px; overflow: hidden;
  transition: height 0.35s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.fw-tile:hover { border-color: color-mix(in srgb, var(--brand) 32%, var(--border)); box-shadow: var(--shadow); }
.fw-tile.open { height: auto; padding-bottom: 32px; background: var(--surface); box-shadow: var(--shadow); }
.fw-tile h3 { margin: 0 0 8px; font-size: 9.5px; letter-spacing: 0.13em; color: var(--muted); font-weight: 600; }
.fw-tile ul { margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--ink-2); }
.fw-tile li { margin: 0 0 7px; padding-left: 13px; position: relative; line-height: 1.5; }
.fw-tile li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 5px; height: 5px;
  border-radius: 50%; background: color-mix(in srgb, var(--brand) 45%, var(--border));
}
/* the fade + the "…" affordance: what tells you there is more behind the card */
.fw-tile::after {
  content: "…more"; position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 15px 9px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  color: var(--muted); text-align: right;
  background: linear-gradient(180deg, transparent, var(--surface-2) 58%);
  pointer-events: none;
}
.fw-tile.open::after { content: "less"; background: linear-gradient(180deg, transparent, var(--surface) 58%); }
.fw-tile.short::after { content: none; }
.swot-grid .fw-tile { height: 168px; }
.swot-grid .fw-tile.s h3 { color: var(--good); } .swot-grid .fw-tile.w h3 { color: var(--s2); }
.swot-grid .fw-tile.o h3 { color: var(--s3); } .swot-grid .fw-tile.t h3 { color: var(--bad); }

/* long prose inside a fold: clamp it, click to open the rest */
.clampable { position: relative; cursor: pointer; }
.clampable .cl-txt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.clampable.open .cl-txt { display: block; }
.clampable .cl-more {
  display: block; margin-top: 6px; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.clampable:hover .cl-more { color: var(--brand-deep); }

/* ── guided walkthrough ────────────────────────────────────────────────── */
.wt-focus {
  box-shadow: 0 0 0 2.5px var(--brand), 0 0 0 9px rgba(12, 125, 95, 0.14),
              0 26px 60px -26px rgba(12, 125, 95, 0.55) !important;
  border-radius: 18px; transition: box-shadow 0.45s var(--ease); position: relative; z-index: 6;
}
#wtbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  transform: translateY(150%); transition: transform 0.42s var(--ease); padding: 0 0 16px;
}
#wtbar.on { transform: none; }
.wtinner {
  position: relative; max-width: 840px; margin: 0 auto; overflow: hidden;
  background: linear-gradient(120deg, #16211b, #0b120e); color: #fff;
  border-radius: 18px; padding: 16px 19px; box-shadow: 0 34px 74px -22px rgba(0, 0, 0, 0.62);
  display: flex; gap: 16px; align-items: center;
}
.wtinner .wtsec { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.15em; text-transform: uppercase; color: #79c0a8; }
.wtinner .wtsay { font-family: var(--serif); font-size: 17.5px; line-height: 1.38; margin-top: 4px; }
.wtinner .wtsay b { color: #a8dbc8; font-weight: 600; }
.wtinner .wtcol { flex: 1; min-width: 0; }
.wtctrl { display: flex; gap: 8px; align-items: center; flex: none; }
.wtctrl button {
  border: 1px solid rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.08); color: #fff;
  border-radius: 10px; padding: 8px 12px; cursor: pointer; font-family: var(--ui); font-weight: 700; font-size: 12px;
}
.wtctrl button:hover { background: rgba(255, 255, 255, 0.16); }
.wtprog {
  position: absolute; left: 0; top: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--brand), #79c0a8); border-radius: 999px; transition: width 0.5s var(--ease);
}
@media (max-width: 620px) { .wtinner { margin: 0 12px; padding: 13px 14px; } .wtinner .wtsay { font-size: 15px; } }

#wttimer {
  position: fixed; top: 14px; right: 16px; z-index: 130; display: none; align-items: center; gap: 12px;
  background: linear-gradient(120deg, #16211b, #0b120e); color: #fff; border-radius: 15px;
  padding: 11px 17px; box-shadow: 0 22px 46px -18px rgba(0, 0, 0, 0.6);
}
#wttimer.on { display: inline-flex; }
#wttimer .rec { width: 9px; height: 9px; border-radius: 50%; background: #ff6a5a; animation: pulse2 1.4s ease-in-out infinite; }
@keyframes pulse2 { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
#wttimer .tl { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.14em; color: #79c0a8; }
#wttimer .tt { font-family: var(--mono); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; }
#wttimer .tt b { color: #79c0a8; }

#wtconfirm {
  position: fixed; right: 18px; bottom: 112px; z-index: 135; width: 300px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px 17px;
  box-shadow: var(--shadow-lift); display: none; flex-direction: column; gap: 12px;
}
#wtconfirm.on { display: flex; animation: cfin 0.25s var(--ease); }
@keyframes cfin { from { opacity: 0; transform: translateY(8px); } }
#wtconfirm .cft { font-family: var(--serif); font-size: 15px; line-height: 1.35; }
#wtconfirm .cfr { display: flex; gap: 8px; justify-content: flex-end; }
#wtconfirm button { font-family: var(--ui); font-weight: 700; font-size: 12.5px; border-radius: 10px; padding: 8px 13px; cursor: pointer; border: 1px solid var(--border); }
#wtconfirm .keep { background: var(--surface-2); color: var(--ink-2); }
#wtconfirm .close { background: var(--accent); color: #fff; border-color: var(--accent); }

/* the walkthrough button — the one place on the page that shimmers */
.wtbtn {
  display: inline-flex; align-items: center; gap: 11px; color: #fff; border: none; border-radius: 15px;
  padding: 14px 26px; font-family: var(--ui); font-weight: 800; font-size: 16px; cursor: pointer;
  background: linear-gradient(110deg, var(--accent), #17614c 34%, #0c7d5f 50%, #17614c 66%, var(--accent));
  background-size: 250% 100%; animation: sheen 3.4s linear infinite, wtpulse 2.9s ease-in-out infinite;
  box-shadow: 0 18px 40px -14px rgba(12, 125, 95, 0.7);
}
.wtbtn:hover { filter: brightness(1.08); }
.wtbtn .pi { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); align-items: center; justify-content: center; font-size: 11px; }
@keyframes sheen { to { background-position: -250% 0; } }
@keyframes wtpulse {
  0%, 100% { box-shadow: 0 18px 40px -14px rgba(12, 125, 95, 0.7), 0 0 0 0 rgba(12, 125, 95, 0.36); }
  55% { box-shadow: 0 18px 40px -14px rgba(12, 125, 95, 0.7), 0 0 0 13px transparent; }
}

/* ── the entry gate: one gesture, and the walkthrough has its voice ─────
   Browsers refuse audible media without a user gesture, so anything that
   starts by itself starts silent — and a silent narrated walkthrough is
   worse than none. Making Play the way in means the gesture is always in
   hand before the first word. */
#autotourgate {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px;
  background:
    radial-gradient(900px 520px at 20% 0%, rgba(12, 125, 95, 0.34), transparent 60%),
    radial-gradient(820px 500px at 88% 100%, rgba(183, 121, 31, 0.22), transparent 58%),
    rgba(9, 14, 11, 0.9);
  backdrop-filter: blur(9px); animation: atgIn 0.45s var(--ease) both;
}
@keyframes atgIn { from { opacity: 0; } }
.atg-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 22px;
  padding: 38px 42px 30px; max-width: 545px; width: 100%; text-align: center;
  box-shadow: 0 56px 116px -36px rgba(6, 10, 8, 0.8); animation: atgUp 0.5s var(--ease) both;
}
@keyframes atgUp { from { transform: translateY(16px); opacity: 0; } }
.atg-mark { font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); }
.atg-mark b { color: var(--brand-deep); font-weight: 600; }
.atg-card h3 {
  font-family: var(--serif); font-weight: 600; font-size: clamp(25px, 3.4vw, 33px); line-height: 1.12;
  letter-spacing: -0.022em; margin: 14px 0 10px;
}
.atg-card h3 em { font-style: italic; color: var(--brand-deep); }
.atg-card p { margin: 0 auto 24px; max-width: 40ch; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.atg-card .wtbtn { font-size: 17px; padding: 15px 30px; }
.atg-meta { margin-top: 13px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); }
.atg-skip {
  display: block; margin: 20px auto 0; background: none; border: none; cursor: pointer;
  font-family: var(--ui); font-weight: 600; font-size: 12.5px; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.atg-skip:hover { color: var(--ink-2); }
@media (max-width: 560px) { .atg-card { padding: 28px 22px 24px; } }

/* ── the opening beat: a radar sweep while the report settles ──────────── */
#radarboot {
  position: fixed; inset: 0; z-index: 210; display: grid; place-items: center;
  background: linear-gradient(168deg, #f7f4ec, var(--page) 55%, #e9e4d7);
  transition: opacity 0.55s var(--ease);
}
#radarboot.out { opacity: 0; pointer-events: none; }
.rb-in { text-align: center; }
.rb-scope { position: relative; width: 156px; height: 156px; margin: 0 auto 26px; }
.rb-scope i {
  position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(12, 125, 95, 0.28);
  animation: rbping 2.6s var(--ease) infinite;
}
.rb-scope i:nth-child(2) { inset: 26px; animation-delay: 0.5s; }
.rb-scope i:nth-child(3) { inset: 52px; animation-delay: 1s; }
@keyframes rbping { 0% { transform: scale(0.85); opacity: 0.15; } 45% { opacity: 0.65; } 100% { transform: scale(1.06); opacity: 0; } }
.rb-scope .rb-sweep {
  position: absolute; inset: 0; border-radius: 50%; border: 0;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(12, 125, 95, 0.34) 46deg, transparent 74deg);
  animation: sweep 1.5s linear infinite;
}
.rb-scope .rb-dot {
  position: absolute; inset: auto; width: 9px; height: 9px; border-radius: 50%; background: var(--brand);
  left: 50%; top: 50%; margin: -4.5px 0 0 -4.5px; box-shadow: 0 0 0 6px rgba(12, 125, 95, 0.16); border: 0;
  animation: none;
}
.rb-t { font-family: var(--serif); font-size: 21px; font-weight: 600; letter-spacing: -0.015em; }
.rb-s {
  margin-top: 9px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--muted); min-height: 15px;
}

/* ── chrome tuned to the paper ─────────────────────────────────────────── */
.topbar { background: color-mix(in srgb, var(--surface) 76%, transparent); }
.panel { border-radius: 18px; }
.tabbar { margin-top: 20px; }
.tab { font-size: 12.5px; letter-spacing: 0.01em; }
.tab.active { background: var(--accent); border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); }
.btn.primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
.btn.ghost:hover { border-color: var(--brand); color: var(--brand-deep); background: var(--brand-soft); }
.chip.active { background: var(--accent); border-color: var(--accent); }
.pill:hover { border-color: var(--brand); color: var(--brand-deep); background: var(--brand-soft); }
.hero { border-radius: 22px; }
.opps { gap: 10px; }
.opp { border-radius: 16px; }
/* opportunity summaries are trimmed in the head; the body carries the detail */
.opp-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.demo-bar { background: linear-gradient(90deg, var(--surface), var(--surface-2)); border-color: var(--border); border-radius: 14px; }
.demo-name b { color: var(--brand-deep); }
.demo-quota { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-2); font-weight: 500; }
.toast { background: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  body, .pchip, .parrow, .pmpill, .pout .spark, .phub::after, .mast::after,
  .rb-scope i, .rb-scope .rb-sweep, .wtbtn, .brand-mark::after { animation: none !important; }
}

/* ── person cards: one size at rest ────────────────────────────────────
   An ex-employee card carries a Then/Now pair and a longer "why", so left to
   itself it ran twice the height of a current-employee card and the grid went
   ragged. Closed cards clamp to the same shape; opening one lifts the clamp. */
.cards { align-items: stretch; }
.card:not(.open) .card-tag,
.card:not(.open) .card-why { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.card:not(.open) .card-tag { -webkit-line-clamp: 2; }
.card:not(.open) .card-why { -webkit-line-clamp: 2; }
.card:not(.open) .card-roles > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.card:not(.open) .card-head { min-height: 132px; align-items: flex-start; }
.card .card-head { transition: background 0.2s var(--ease); }

/* ── phone ──────────────────────────────────────────────────────────────
   The masthead is a cover, not an essay: three lines of dek and the play
   button above the fold. The topbar wrapped off-screen on a 390px viewport
   and took the whole page into a horizontal scroll with it. */
.mast-dek { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; gap: 8px; padding: 10px 16px; }
  .brand-tag { display: none; }
  .topbar-right { width: 100%; }
  .run-picker { flex: 1; min-width: 0; max-width: none; }
  .mast-title { font-size: clamp(26px, 8.5vw, 34px); }
  .mast-dek { font-size: 14px; }
  .whatwrap { padding: 0 16px; }
  main { padding: 12px 16px 90px; }
  .tabbar { padding: 0 16px; }
  .fold-head { padding: 15px 16px; gap: 10px; }
  .collapse-panel .collapse-body, .brief.collapse-panel .collapse-body { padding: 14px 16px 18px; }
  .fw-tile { height: 132px; }
  #wttimer { top: 10px; right: 10px; padding: 8px 12px; }
  #wttimer .tt { font-size: 13px; }
  .cards { grid-template-columns: 1fr; }
  /* the donut sat beside its legend in a fixed 240px + 250px row, which is
     wider than a phone — it took the whole page into a sideways scroll */
  .chart-flex { flex-direction: column; gap: 12px; }
  .donut-wrap { width: 100%; max-width: 232px; margin: 0 auto; }
  .donut { width: 100%; height: auto; }
  .side { width: 100%; }
  /* the score chips crushed the company name into a two-word column */
  .opp-head { flex-wrap: wrap; padding-right: 34px; }
  .opp-main { flex: 1 1 100%; }
  .opp-scores { order: 3; margin-top: 10px; }
  .opp-head .chev { position: absolute; right: 14px; top: 16px; }
  .opp-title { -webkit-line-clamp: 3; }
  .secband { margin: 30px 0 14px; }
}

/* which roster a company's people will come from, shown on the count peek */
.count-src { display: block; margin-top: 3px; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase; }
.count-src { color: var(--brand-deep); }

/* ── the opening beat: the seller's own posts ──────────────────────────────
   Reconstructed from the post data, not screenshotted. LinkedIn gates most
   post pages behind auth and its media urls expire within weeks; rebuilding
   the card keeps it legible, themeable and intact months later.

   Laid out as a column with the headline IN FLOW. It used to be absolutely
   positioned, which on a phone dropped it straight through the cards. */
#postwall {
  position: fixed; inset: 0; z-index: 62; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: clamp(18px, 3.4vh, 34px);
  padding: clamp(20px, 4vh, 48px) clamp(16px, 4vw, 48px);
  pointer-events: none; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 38%, rgba(27,38,32,0.94), rgba(10,15,13,0.985));
  opacity: 0; transition: opacity 0.5s var(--ease);
}
#postwall.on { opacity: 1; }
.pw-line {
  flex: none; text-align: center; max-width: 22ch;
  font-family: var(--serif); font-size: clamp(24px, 4.6vw, 44px); line-height: 1.15;
  color: #fff; letter-spacing: -0.022em; text-wrap: balance;
}
.pw-line em { color: #6ee7b7; font-style: italic; }
.pw-line .pw-eyebrow {
  display: block; margin-bottom: 10px; font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.42); font-weight: 400;
}
.pw-cards { display: flex; gap: clamp(10px, 1.4vw, 20px); align-items: stretch; min-height: 0; }
.pw-card {
  width: clamp(210px, 21vw, 290px); background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 22px 54px rgba(0,0,0,0.5);
  opacity: 0; transform: translateY(22px) scale(0.975);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
  display: flex; flex-direction: column;
}
.pw-card.in { opacity: 1; transform: none; }
.pw-head { display: flex; align-items: center; gap: 9px; padding: 11px 13px 7px; flex: none; }
.pw-ava {
  width: 32px; height: 32px; border-radius: 8px; flex: none; background: var(--brand-soft);
  color: var(--brand-deep); display: flex; align-items: center; justify-content: center;
  font-family: var(--ui); font-weight: 700; font-size: 11.5px;
}
.pw-who { min-width: 0; }
.pw-who b { display: block; font-size: 12px; color: var(--ink); font-weight: 650;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-who span { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-text {
  padding: 0 13px 10px; font-size: 12px; line-height: 1.45; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  /* the clamp bounds LINES; in a stretched flex column the box still grows and
     a spare line slides out behind the image below it */
  flex: 0 0 auto; max-height: calc(3 * 1.45em);
}
.pw-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  background: var(--page); margin-top: auto; flex: none; }

/* Phones: the headline is the message, the cards are the evidence. Two cards
   side by side stay legible where three stacked would push the line off-screen. */
/* Phones: the headline carries the message and the post IMAGE carries the
   recognition — it is their own product creative. Body copy at this width is
   two clipped lines nobody reads, and the meta line wraps the header to three
   rows, so both go. Name plus picture is the crisp version. */
@media (max-width: 760px) {
  #postwall { justify-content: flex-start; padding-top: 11vh; gap: 22px; }
  .pw-line { font-size: clamp(23px, 6.4vw, 34px); max-width: 15ch; }
  .pw-cards { gap: 10px; }
  .pw-card { width: 43vw; }
  .pw-card:nth-child(3) { display: none; }
  .pw-text { display: none; }
  .pw-who span { display: none; }
  .pw-who b { font-size: 11.5px; }
  .pw-head { padding: 10px 11px; }
  .pw-img { aspect-ratio: 1 / 1; }
}
@media (max-height: 620px) { .pw-img { display: none; } }

/* ═══════════════════════════════════════════════════════════════════════
   V2 THEME (2026-08-27) — previewed on one report before rolling out.
   Scoped under html.v2, which app.js sets for allow-listed demos (and for
   any page opened with ?v2=1; ?classic=1 wins and turns it off).

   What v2 changes, per the founder's review of the live reports:
   · the emerald/dark-green family becomes a warm terracotta that matches
     the paper background — green survives nowhere in this theme
   · Schibsted Grotesk and Spline Sans Mono both become Urbanist
   · the signal-pipe illustration is gone; the three lane cards remain
   · the wordmark goes; "Prepared for X" is the identity of the page
   · the positioning line (the goal) sits in its own bordered highlight
   · a calmer, editorial boot screen replaces the radar sweep
   ═══════════════════════════════════════════════════════════════════════ */
html.v2 {
  --brand: #d45f2b;
  --brand-deep: #a8431a;
  --brand-soft: #f8e7da;
  --accent: #33241a;
  --accent-deep: #221710;
  --accent-soft: #f3ebe0;
  --good: #b05b1d;            /* "positive" reads warm here, not green */
  --chip-cur-bg: #ede8db;
  --chip-ex-bg: rgba(212, 95, 43, 0.14);
  --sans: "Urbanist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Urbanist", system-ui, -apple-system, sans-serif;
}
html.v2 body {
  font-size: 14.5px;
  background:
    radial-gradient(1300px 640px at 10% -8%, rgba(212, 95, 43, 0.09), transparent 58%),
    radial-gradient(1100px 620px at 96% -2%, rgba(183, 121, 31, 0.08), transparent 55%),
    radial-gradient(1100px 900px at 88% 108%, rgba(212, 95, 43, 0.05), transparent 60%),
    linear-gradient(168deg, #f6f2e9 0%, var(--page) 42%, #efe7d8 100%);
  background-attachment: fixed;
}
/* Urbanist runs wider than Spline Sans Mono at the same tracking — pull the
   micro-labels in a touch so they keep their whisper */
html.v2 .hero-eyebrow, html.v2 .stat span, html.v2 .fw-tile h3, html.v2 .opp-k,
html.v2 .brief .k, html.v2 .score-chip span, html.v2 .fold-num, html.v2 .mast-for,
html.v2 .mast-by, html.v2 .secband .sub, html.v2 .mast-meta, html.v2 .atg-mark,
html.v2 .atg-meta { font-weight: 700; letter-spacing: 0.09em; }

/* ── the wordmark goes; the prospect carries the page ── */
html.v2 .brand-mark, html.v2 .brand-name { display: none; }
html.v2 .brand-tag {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); margin-left: 0;
}
html.v2 .mast-logo { display: none; }
html.v2 .mast-brand { align-items: flex-start; }
html.v2 .mast-for { font-size: 12px; letter-spacing: 0.22em; color: var(--brand-deep); }
html.v2 .mast-co {
  font-size: clamp(27px, 3.6vw, 40px); line-height: 1.05; margin-top: 6px;
  letter-spacing: -0.02em;
}
html.v2 .mast-title { font-size: clamp(26px, 3.7vw, 42px); margin-top: 18px; }
html.v2 .mast {
  background:
    radial-gradient(760px 420px at 82% -30%, rgba(212, 95, 43, 0.12), transparent 62%),
    radial-gradient(620px 360px at 8% 120%, rgba(183, 121, 31, 0.10), transparent 60%),
    linear-gradient(178deg, #fdfbf7, var(--surface-2));
}
html.v2 .mast::after {
  background: conic-gradient(from 0deg, transparent 0deg, rgba(212, 95, 43, 0.14) 34deg, transparent 62deg);
}

/* ── the illustration section is gone; the lanes stay ── */
html.v2 .pipe { display: none; }

/* ── positioning line: the goal, in its own frame ── */
html.v2 .hero-sub {
  display: block; margin-top: 14px; max-width: 72ch;
  padding: 13px 18px; font-size: 16.5px; line-height: 1.5; font-weight: 650;
  color: var(--brand-deep);
  background: linear-gradient(180deg, #fffdf9, var(--brand-soft));
  border: 1.5px solid color-mix(in srgb, var(--brand) 34%, var(--border));
  border-left: 4px solid var(--brand);
  border-radius: 14px;
}

/* ── every hard-coded green, re-inked warm ── */
html.v2 .lane.lit {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(212, 95, 43, 0.14), 0 22px 44px -24px rgba(212, 95, 43, 0.6);
}
html.v2 .lane.on::after { background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 13%, transparent), transparent 78%); }
html.v2 .wt-focus {
  box-shadow: 0 0 0 2.5px var(--brand), 0 0 0 9px rgba(212, 95, 43, 0.14),
              0 26px 60px -26px rgba(212, 95, 43, 0.55) !important;
}
html.v2 .pout {
  border-color: color-mix(in srgb, var(--brand) 34%, var(--border));
  box-shadow: 0 10px 22px -14px rgba(212, 95, 43, 0.5);
}
html.v2 .wtbtn {
  background: linear-gradient(110deg, #b34a1c, #d45f2b 34%, #e77a3e 50%, #d45f2b 66%, #b34a1c);
  background-size: 250% 100%;
  box-shadow: 0 18px 40px -14px rgba(212, 95, 43, 0.7);
}
@keyframes wtpulse2 {
  0%, 100% { box-shadow: 0 18px 40px -14px rgba(212, 95, 43, 0.7), 0 0 0 0 rgba(212, 95, 43, 0.36); }
  55% { box-shadow: 0 18px 40px -14px rgba(212, 95, 43, 0.7), 0 0 0 13px transparent; }
}
html.v2 .wtbtn { animation: sheen 3.4s linear infinite, wtpulse2 2.9s ease-in-out infinite; }
html.v2 .wtinner { background: linear-gradient(120deg, #241811, #140c07); }
html.v2 .wtinner .wtsec { color: #eba473; }
html.v2 .wtinner .wtsay b { color: #f4c9a4; }
html.v2 .wtprog { background: linear-gradient(90deg, var(--brand), #eba473); }
html.v2 #wttimer { background: linear-gradient(120deg, #241811, #140c07); }
html.v2 #wttimer .tl, html.v2 #wttimer .tt b { color: #eba473; }
html.v2 #autotourgate {
  background:
    radial-gradient(900px 520px at 20% 0%, rgba(212, 95, 43, 0.30), transparent 60%),
    radial-gradient(820px 500px at 88% 100%, rgba(183, 121, 31, 0.22), transparent 58%),
    rgba(16, 10, 6, 0.9);
}
html.v2 #postwall { background: radial-gradient(120% 80% at 50% 38%, rgba(40, 26, 18, 0.94), rgba(15, 9, 5, 0.985)); }
html.v2 .pw-line em { color: #f2a56e; }

/* ── people cards: entry points lead ── */
html.v2 .cards-band { grid-column: 1 / -1; margin: 6px 0 -2px; }
html.v2 .cards-band:first-child { margin-top: 0; }
html.v2 .cards-band h3 {
  font-family: var(--serif); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin: 0;
}
html.v2 .cards-band .cb-sub {
  display: block; margin-top: 3px; font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
html.v2 .card.entry { border-color: color-mix(in srgb, var(--brand) 36%, var(--border)); }
html.v2 .card.entry::before {
  content: ""; display: block; height: 3px;
  background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 25%, transparent));
}
html.v2 .badge.own { background: var(--brand); color: #fff; }
html.v2 .badge.snr { background: var(--accent); color: #fff; }
html.v2 .entry-mark {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--brand-soft); border: 1.5px solid color-mix(in srgb, var(--brand) 40%, transparent);
  color: var(--brand-deep); font-family: var(--mono); font-size: 8.5px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; text-align: center; line-height: 1.2;
}

/* ── boot: editorial, not radar ── */
html.v2 #radarboot { background: linear-gradient(168deg, #f8f4ec, var(--page) 55%, #eee6d6); }
.rb2 { text-align: center; padding: 0 24px; max-width: 640px; }
.rb2-eyebrow {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--brand-deep);
  display: inline-flex; align-items: center; gap: 10px;
}
.rb2-eyebrow::before, .rb2-eyebrow::after {
  content: ""; width: 26px; height: 1px; background: color-mix(in srgb, var(--brand) 45%, transparent);
}
.rb2-name {
  font-family: var(--serif); font-size: clamp(30px, 5vw, 48px); font-weight: 600;
  letter-spacing: -0.025em; line-height: 1.08; margin-top: 14px; color: var(--ink);
  animation: rb2up 0.7s var(--ease) both;
}
@keyframes rb2up { from { opacity: 0; transform: translateY(10px); } }
.rb2-bar {
  width: min(300px, 60vw); height: 2px; border-radius: 2px; margin: 26px auto 0;
  background: color-mix(in srgb, var(--brand) 16%, var(--hairline)); overflow: hidden; position: relative;
}
.rb2-bar i {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px;
  background: linear-gradient(90deg, var(--brand), #eba473);
  animation: rb2fill 2.6s var(--ease) both;
}
@keyframes rb2fill { 0% { width: 0; } 60% { width: 72%; } 100% { width: 96%; } }
.rb2-status {
  margin-top: 16px; font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); min-height: 15px;
  transition: opacity 0.3s var(--ease);
}
@media (prefers-reduced-motion: reduce) { .rb2-name, .rb2-bar i { animation: none; } .rb2-bar i { width: 90%; } }

/* ── v2 post wall: the card looks like where it came from ──
   Bigger, breathing cards — the old wall read as three cramped tiles. */
html.v2 .pw-cards { gap: clamp(14px, 2vw, 26px); }
html.v2 .pw-card {
  width: clamp(240px, 25vw, 340px); border-radius: 12px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55);
}
/* a section of their website: browser chrome, their domain, their image */
html.v2 .pw-card.pw-web { background: #fdfcfa; }
html.v2 .pw-chrome {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; flex: none;
  background: #efece6; border-bottom: 1px solid #e2ded4;
}
html.v2 .pw-dots { display: inline-flex; gap: 5px; flex: none; }
html.v2 .pw-dots i { width: 8px; height: 8px; border-radius: 50%; background: #d5d0c4; }
html.v2 .pw-dots i:first-child { background: #e8a49a; }
html.v2 .pw-dots i:nth-child(2) { background: #e6cf9a; }
html.v2 .pw-dots i:nth-child(3) { background: #b7cfae; }
html.v2 .pw-url {
  flex: 1; min-width: 0; background: #fff; border: 1px solid #e2ded4; border-radius: 999px;
  padding: 3px 12px; font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  color: #6b675c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.v2 .pw-web .pw-img { margin-top: 0; aspect-ratio: 16 / 10; }
html.v2 .pw-webbody { padding: 12px 15px 14px; }
html.v2 .pw-webhead {
  font-family: var(--serif); font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink);
}
html.v2 .pw-webtext { margin-top: 5px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
/* a LinkedIn post: round avatar, name + meta, text, image, icon-only action row
   (counts would be invented numbers — never shown) */
html.v2 .pw-card.pw-li { background: #fff; }
html.v2 .pw-li .pw-head { padding: 12px 14px 8px; }
html.v2 .pw-li .pw-ava {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand-deep); font-size: 14px;
}
html.v2 .pw-li .pw-who b { font-size: 13px; }
html.v2 .pw-li .pw-who span {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0; text-transform: none;
}
html.v2 .pw-li .pw-text {
  font-size: 13px; line-height: 1.5; -webkit-line-clamp: 4; max-height: calc(4 * 1.5em);
  padding: 0 14px 10px;
}
html.v2 .pw-actions {
  display: flex; align-items: center; justify-content: space-around;
  border-top: 1px solid #ebe8e0; padding: 8px 6px; flex: none; margin-top: auto;
}
html.v2 .pw-act {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: 11.5px; font-weight: 650; color: #6b675c;
}
@media (max-width: 760px) {
  html.v2 .pw-card { width: 44vw; }
  html.v2 .pw-webbody { padding: 10px 12px 12px; }
  html.v2 .pw-webhead { font-size: 14.5px; }
  html.v2 .pw-webtext { display: none; }
  html.v2 .pw-actions { display: none; }
}

/* ── a visitor's own run: where it ended up ──────────────────────────────
   Someone who filled in the form and pressed Run needs the outcome in
   words, and a link to the page the run now lives on — the report itself
   scrolls far past the point where "it worked" is obvious. */
.rundone {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  border-radius: 14px; padding: 13px 18px; margin-top: 14px;
  font-size: 14px; border: 1px solid var(--border); background: var(--surface);
}
.rundone b { font-weight: 700; }
.rundone span { color: var(--ink-2); }
.rundone.ok {
  border-color: color-mix(in srgb, var(--brand) 38%, var(--border));
  background: linear-gradient(180deg, #fffdf9, var(--brand-soft));
}
.rundone.bad { border-color: color-mix(in srgb, var(--bad) 32%, var(--border)); background: color-mix(in srgb, var(--bad) 5%, var(--surface)); }
.rundone-link { margin-left: auto; font-weight: 700; color: var(--brand-deep); text-decoration: none; white-space: nowrap; }
.rundone-link:hover { text-decoration: underline; }
@media (max-width: 620px) { .rundone-link { margin-left: 0; } }