/* Maelstrom AI — design system
   Black + white from the mark; two-side pairing accents from the logo's twin swirls:
   side A (you) = maelstrom red, side B (counterpart) = maelstrom yellow. */

:root {
  --ink: #0d0d0f;
  --ink-2: #1a1a1e;
  --ink-3: #2a2a31;
  --porcelain: #fafafa;
  --card: #ffffff;
  --line: #e4e4e7;
  --muted: #5a5a63;
  --side-a: #d8283f;          /* maelstrom red — your side */
  --side-a-soft: #fbe5e8;
  --side-b: #c9930f;          /* maelstrom amber — their side (readable on white) */
  --side-b-bright: #f5c842;   /* logo yellow — for use on black */
  --side-b-soft: #faf0d0;
  --danger: #a33b3b;
  --radius: 10px;
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Public Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--porcelain);
  line-height: 1.55;
  font-size: 16px;
}
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--side-a); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.mono { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.02em; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; border: 0; border-radius: 8px;
  padding: 12px 22px; font-weight: 600; font-size: 0.95rem;
  text-decoration: none; transition: transform 0.12s ease, background 0.12s ease;
}
.btn:active { transform: translateY(1px); }
/* A button that can't be used must look it. Without this, a disabled
   .btn-primary stayed bright red and a click silently did nothing (the
   interview's "Review my intent", 19 Oct 2026). aria-disabled is for buttons
   that stay clickable so they can explain why they won't act. */
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn:disabled:active, .btn[aria-disabled="true"]:active { transform: none; }
.btn-primary:disabled:hover, .btn-primary[aria-disabled="true"]:hover { background: var(--side-a); }
.btn-primary { background: var(--side-a); color: #fff; }
.btn-primary:hover { background: #b31f33; }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--ink-3); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: var(--ink-2); }
.btn-quiet { background: none; border: none; color: var(--muted); font-size: 0.85rem; text-decoration: underline; }

/* ---------- landing: nav ---------- */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 0;
}
.nav.on-ink { color: #fff; }
.wordmark {
  font-family: var(--display); font-weight: 700; font-size: 1.25rem;
  letter-spacing: -0.01em; text-decoration: none; display: flex; align-items: center; gap: 9px;
}
.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links a { text-decoration: none; font-size: 0.92rem; opacity: 0.85; }
.nav-links a:hover { opacity: 1; }
@media (max-width: 720px) { .nav-links a.hide-m { display: none; } }

/* ---------- landing: hero ---------- */
.hero { background: var(--ink); color: #fff; padding-bottom: 88px; }
.hero-grid {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px;
  align-items: center; padding-top: 64px;
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; padding-top: 40px; } }
.hero h1 {
  font-family: var(--display); font-weight: 700; letter-spacing: -0.025em;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.08;
}
.hero h1 em { font-style: normal; color: var(--side-b-bright); }
.hero p.lede { margin-top: 20px; font-size: 1.08rem; color: #c9c9cf; max-width: 46ch; }
.hero-ctas { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero .fineprint { margin-top: 16px; font-size: 0.8rem; color: #8b8b94; }

:root { --badge-clearance: 0px; }
/* Third-party overlays cluster in the bottom-right on small screens, where they
   overlap most. Give the launcher more room there. */
@media (max-width: 700px) { :root { --badge-clearance: 52px; } }

/* the pair-lock: two mirrored intent cards meeting at a seam */
.pairlock { position: relative; display: grid; gap: 0; }
.pair-row {
  /* minmax(0, 1fr), not 1fr.
     A grid item defaults to min-width:auto, so a `1fr` column refuses to shrink
     below its CONTENT. With two of them plus a 44px seam on a 360px phone, the
     row was wider than the screen — which is the horizontal overflow and the
     page shifting sideways. minmax(0, …) lets the columns actually be flexible. */
  display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
  align-items: stretch;
  /* Height is locked to the tallest example by JS on load and on resize. Without
     it, each rotation resizes the row and shoves the whole page — worst on
     mobile, where headlines wrap to four lines instead of two. */
  min-height: var(--pair-row-height, 128px);
  contain: layout;
}
.pair-card {
  background: var(--card); color: var(--ink); border-radius: var(--radius);
  padding: 18px 18px 16px; min-height: 128px;
  /* The card fills the locked row rather than setting it. */
  height: 100%;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  display: flex; flex-direction: column; gap: 8px;
}
.pair-card .rolekey { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.04em; }
.pair-card.side-a { border-top: 3px solid var(--side-a); }
.pair-card.side-b { border-top: 3px solid var(--side-b); text-align: right; }
.pair-card.side-a .rolekey { color: var(--side-a); }
.pair-card.side-b .rolekey { color: var(--side-b); }
.pair-card h3, .pair-card .pc-head { font-family: var(--display); font-size: 1.02rem; font-weight: 600; line-height: 1.25; }
.pair-card .crit { font-size: 0.78rem; color: var(--muted); margin-top: auto; }
.pair-seam { display: flex; align-items: center; justify-content: center; }
.pair-seam .lock {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55);
}
.pair-seam .lock img { width: 100%; height: 100%; border-radius: 50%; display: block; }
.pair-anim .pair-card.side-a { animation: slide-a 6s ease-in-out infinite; }
.pair-anim .pair-card.side-b { animation: slide-b 6s ease-in-out infinite; }
.pair-anim .lock { animation: lock-pulse 6s ease-in-out infinite; }
@keyframes slide-a { 0%, 12% { transform: translateX(-26px); opacity: 0.35; } 30%, 82% { transform: none; opacity: 1; } 100% { transform: translateX(-26px); opacity: 0.35; } }
@keyframes slide-b { 0%, 12% { transform: translateX(26px); opacity: 0.35; } 30%, 82% { transform: none; opacity: 1; } 100% { transform: translateX(26px); opacity: 0.35; } }
@keyframes lock-pulse { 0%, 12% { transform: scale(0.6); opacity: 0; } 34%, 80% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.6); opacity: 0; } }
.pair-caption { margin-top: 14px; text-align: center; font-size: 0.8rem; color: #8b8b94; }

/* ---------- landing: sections ---------- */
.section { padding: 84px 0; }
.section.alt { background: #f2f2f3; }
.eyebrow {
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--side-a); margin-bottom: 14px;
}
.section h2 {
  font-family: var(--display); font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(1.6rem, 3vw, 2.3rem); max-width: 24ch; line-height: 1.15;
}
.section .sub { margin-top: 14px; color: var(--muted); max-width: 58ch; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.step .k { font-family: var(--mono); font-size: 0.7rem; color: var(--muted); }
.step h3 { font-family: var(--display); font-size: 1.05rem; margin: 10px 0 8px; }
.step p { font-size: 0.9rem; color: var(--muted); }
.step[data-side="a"] { border-top: 3px solid var(--side-a); }
.step[data-side="b"] { border-top: 3px solid var(--side-b); }
.step[data-side="ab"] { border-top: 3px solid; border-image: linear-gradient(90deg, var(--side-a), var(--side-b)) 1; }

.rolegrid { margin-top: 44px; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.rolecat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.rolecat h4 { font-family: var(--display); font-size: 0.95rem; margin-bottom: 8px; }
.rolecat ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.rolecat li { font-size: 0.82rem; color: var(--muted); }
.rolecat li::before { content: "⇄ "; color: var(--side-b); font-weight: 600; }

.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
@media (max-width: 860px) { .pillars { grid-template-columns: 1fr; } }
.pillar { border-left: 3px solid var(--side-a); padding: 4px 0 4px 20px; }
.pillar:nth-child(even) { border-color: var(--side-b); }
.pillar h3 { font-family: var(--display); font-size: 1.08rem; margin-bottom: 8px; }
.pillar p { font-size: 0.92rem; color: var(--muted); }

.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
@media (max-width: 860px) { .tiers { grid-template-columns: 1fr; } }
.tier { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; }
.tier.featured { border: 2px solid var(--ink); position: relative; }
.tier .badge {
  position: absolute; top: -12px; left: 24px; background: var(--ink); color: #fff;
  font-size: 0.7rem; padding: 3px 10px; border-radius: 20px; font-family: var(--mono);
}
.tier h3 { font-family: var(--display); font-size: 1.2rem; }
.tier .price { font-family: var(--display); font-size: 1.9rem; font-weight: 700; margin: 10px 0 2px; }
.tier .per { font-size: 0.8rem; color: var(--muted); }
.tier ul { list-style: none; padding: 0; margin: 18px 0 24px; display: flex; flex-direction: column; gap: 9px; }
.tier li { font-size: 0.88rem; padding-left: 20px; position: relative; }
.tier li::before { content: "—"; position: absolute; left: 0; color: var(--side-a); }
.tier .btn { margin-top: auto; text-align: center; }

/* Seat picker — Team tier only. Sits above the button, which is pinned to the
   bottom by margin-top:auto, so adding this does not change card heights. */
.seats { margin: 0 0 18px; }
.seats-label {
  display: block; font-size: 0.78rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 7px;
}
.seats-control { display: flex; align-items: stretch; gap: 0; }
.seats-btn {
  width: 38px; flex: 0 0 38px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font-family: var(--display); font-size: 1.1rem; line-height: 1;
  cursor: pointer; transition: background 0.12s, border-color 0.12s;
}
.seats-btn:first-child { border-radius: 8px 0 0 8px; }
.seats-btn:last-child  { border-radius: 0 8px 8px 0; }
.seats-btn:hover:not(:disabled) { background: var(--porcelain); border-color: var(--ink-3); }
.seats-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.seats-btn:focus-visible, .seats-input:focus-visible {
  outline: 2px solid var(--side-b); outline-offset: -1px; z-index: 1; position: relative;
}
.seats-input {
  flex: 1 1 auto; min-width: 0; text-align: center;
  border: 1px solid var(--line); border-left: 0; border-right: 0;
  background: var(--card); color: var(--ink);
  font-family: var(--mono); font-size: 0.95rem; padding: 8px 4px;
}
/* The spinners duplicate the − / + buttons and crowd a narrow field. */
.seats-input::-webkit-outer-spin-button,
.seats-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.seats-input { -moz-appearance: textfield; appearance: textfield; }
.seats-total {
  margin-top: 9px; font-family: var(--display); font-size: 1.05rem;
  font-weight: 600; color: var(--ink);
}

.footer { background: var(--ink); color: #93a3bc; padding: 40px 0; font-size: 0.85rem; }
.footer .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

/* ---------- app ---------- */
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.demo-bar {
  background: var(--side-b-soft); color: #7a5a09; font-size: 0.8rem;
  text-align: center; padding: 7px 14px;
}
.demo-bar b { font-family: var(--mono); }
.app-top { background: var(--card); border-bottom: 1px solid var(--line); }
.app-top .wrap { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; }
.app-main { flex: 1; padding: 34px 0 70px; }

.quota { display: flex; align-items: center; gap: 12px; font-size: 0.85rem; color: var(--muted); }
.quota .pips { display: flex; gap: 5px; }
.quota .pip { width: 22px; height: 8px; border-radius: 4px; background: var(--line); }
.quota .pip.used { background: var(--side-a); }

.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.panel + .panel { margin-top: 22px; }
.panel h2 { font-family: var(--display); font-size: 1.25rem; margin-bottom: 6px; }
.panel .hint { color: var(--muted); font-size: 0.9rem; margin-bottom: 18px; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 0.85rem; font-weight: 600; }
.field input, .field select, .field textarea {
  font-family: var(--body); font-size: 0.95rem; padding: 11px 13px;
  border: 1.5px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--side-a); outline: none; }
.field .note { font-size: 0.78rem; color: var(--muted); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .two-col { grid-template-columns: 1fr; } }

/* intake chat */
.chip {
  border: 1.5px solid var(--line); background: #fff; border-radius: 20px;
  padding: 7px 14px; font-size: 0.85rem;
}
.chip:hover { border-color: var(--side-a); color: var(--side-a); }
.chat-input { display: flex; gap: 10px; margin-top: 8px; }
.chat-input input { flex: 1; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: 8px; font-size: 0.95rem; }

/* intents & candidates */
.intent-line {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border: 1px solid var(--line); border-left: 3px solid var(--side-a);
  border-radius: 8px; padding: 14px 16px; margin-bottom: 10px; background: #fff;
}
.intent-line .rolekey { font-family: var(--mono); font-size: 0.7rem; color: var(--side-a); }
.intent-line h4 { font-size: 0.95rem; font-weight: 600; }

.cand {
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  padding: 20px; margin-bottom: 14px; display: grid; gap: 12px;
}
.cand-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cand-head .who { font-family: var(--display); font-size: 1.05rem; font-weight: 600; }
.cand-head .who .anon { color: var(--muted); font-style: italic; font-weight: 400; }
.cand-head .score { font-family: var(--mono); font-size: 0.75rem; color: var(--side-b); }
.cand .their-intent { border-left: 3px solid var(--side-b); padding-left: 14px; }
.cand .their-intent .rolekey { font-family: var(--mono); font-size: 0.7rem; color: var(--side-b); }
.cand .their-intent p { font-size: 0.9rem; color: var(--muted); margin-top: 4px; }
.reasons { display: flex; flex-wrap: wrap; gap: 7px; }
.reason {
  font-size: 0.76rem; background: var(--side-a-soft); color: var(--side-a);
  border-radius: 20px; padding: 4px 11px;
}
.cand-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.verified-tag { font-size: 0.72rem; color: var(--side-a); font-weight: 600; }

.locked {
  border: 1.5px dashed var(--line); border-radius: var(--radius); padding: 18px 20px;
  color: var(--muted); font-size: 0.9rem; display: flex; justify-content: space-between;
  align-items: center; gap: 14px; flex-wrap: wrap; background: transparent;
}

/* matches & thread */
.match-line {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; margin-bottom: 10px;
  background: #fff; text-align: left; width: 100%;
}
.match-line .pairmark { color: var(--side-b); font-weight: 700; }
.thread { display: flex; flex-direction: column; gap: 10px; max-height: 380px; overflow-y: auto; padding: 6px 2px; }
.msg { max-width: 74%; padding: 11px 14px; border-radius: 13px; font-size: 0.92rem; }
.msg.me { background: var(--ink); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.msg.them { background: var(--porcelain); border: 1px solid var(--line); align-self: flex-start; border-bottom-left-radius: 4px; }
.msg.system { align-self: center; background: var(--side-a-soft); color: var(--side-a); font-size: 0.8rem; max-width: 92%; }
.thread-tools { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; align-items: center; }
.metric-tag { font-family: var(--mono); font-size: 0.75rem; color: var(--side-a); }

.back { background: none; border: none; color: var(--muted); font-size: 0.85rem; margin-bottom: 16px; }
.back:hover { color: var(--ink); }
.empty { color: var(--muted); font-size: 0.9rem; padding: 8px 0; }

/* ---------- wordmark with logo mark ---------- */
.wordmark img.mark { width: 30px; height: 30px; border-radius: 50%; display: block; }
.hero-eye { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.hero-eye img { width: 58px; height: 58px; border-radius: 50%; }
.hero-eye .mono { color: #8b8b94; }

/* ---------- Maelstrom assistant widget ---------- */
.ai-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  /* Netlify's "Powered by Netlify" badge sits bottom-right on free projects and
     covers this. The badge is removable in project settings, but the launcher
     should not depend on that — an overlay we do not control must never bury
     the only support affordance on the page. */
  bottom: calc(22px + var(--badge-clearance, 0px));
  width: 60px; height: 60px; border-radius: 50%; border: 3px solid var(--side-b-bright);
  background: var(--ink); padding: 0; overflow: hidden;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease;
}
.ai-fab:hover { transform: scale(1.06); }
.ai-fab img { width: 100%; height: 100%; display: block; }
.ai-panel {
  position: fixed; right: 22px; bottom: 94px; z-index: 60;
  bottom: calc(94px + var(--badge-clearance, 0px));
  width: min(390px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 130px));
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  display: flex; flex-direction: column; overflow: hidden;
}
.ai-panel[hidden] { display: none; }
.ai-head {
  background: var(--ink); color: #fff; padding: 13px 16px;
  display: flex; align-items: center; gap: 10px;
}
.ai-head img { width: 28px; height: 28px; border-radius: 50%; }
.ai-head .t { font-family: var(--display); font-weight: 600; font-size: 0.95rem; }
.ai-head .s { font-size: 0.72rem; color: #a9a9b2; }
.ai-head .live-dot { margin-left: auto; font-family: var(--mono); font-size: 0.65rem; color: var(--side-b-bright); }
.ai-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--porcelain); }
.ai-msg { max-width: 85%; padding: 10px 13px; border-radius: 12px; font-size: 0.88rem; line-height: 1.45; }
.ai-msg.ai { background: #fff; border: 1px solid var(--line); align-self: flex-start; border-bottom-left-radius: 4px; }
.ai-msg.me { background: var(--ink); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.ai-msg.ai a:not(.btn) { color: var(--side-a); font-weight: 600; }
.ai-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); background: #fff; }
.ai-input input {
  flex: 1; padding: 10px 13px; border: 1.5px solid var(--line); border-radius: 8px;
  font-family: var(--body); font-size: 0.9rem;
}
.ai-input input:focus { border-color: var(--side-a); outline: none; }
.ai-typing { font-size: 0.75rem; color: var(--muted); padding: 0 4px; }

/* ---------- Rooms ---------- */
.room-card {
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  padding: 18px 20px; margin-bottom: 12px;
  border-left: 3px solid var(--side-b);
}
.room-card .room-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.room-card h4 { font-family: var(--display); font-size: 1.02rem; font-weight: 600; }
.room-card .room-role { font-family: var(--mono); font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.room-code {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 0.9rem; letter-spacing: 0.08em;
  background: var(--porcelain); border: 1px dashed var(--line);
  border-radius: 6px; padding: 6px 12px; margin: 12px 0 10px;
}
.room-meta { font-size: 0.84rem; color: var(--muted); margin-bottom: 12px; }
.room-actions { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.room-actions .btn { padding: 9px 16px; font-size: 0.87rem; }
.room-roster { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.room-roster .rm {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  font-size: 0.85rem; padding: 5px 0;
}
.room-roster .rm .rk { font-family: var(--mono); font-size: 0.68rem; color: var(--side-b); }
.room-roster .rm .nm { color: var(--ink); }
.room-roster .rm .vf { color: var(--side-a); font-size: 0.72rem; font-weight: 600; }

/* Pro-locked feature surface — visible to everyone, gated on click */
.locked-feature {
  border: 1.5px dashed var(--side-b); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--side-b-soft) 0%, #fff 100%);
  padding: 22px; text-align: left;
}
.locked-feature .lf-tag {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--side-b); font-weight: 600;
}
.locked-feature h4 { font-family: var(--display); font-size: 1.06rem; margin: 8px 0 8px; }
.locked-feature p { font-size: 0.9rem; color: var(--muted); margin-bottom: 14px; max-width: 56ch; }

.room-prompt {
  border: 1px solid var(--line); border-left: 3px solid var(--side-a);
  background: var(--side-a-soft); border-radius: 8px; padding: 14px 16px; margin-bottom: 12px;
}
.room-prompt p { font-size: 0.89rem; margin-bottom: 10px; }
.room-prompt .rp-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.room-prompt .btn { padding: 8px 15px; font-size: 0.85rem; }

.copied { color: var(--side-a); font-size: 0.78rem; font-weight: 600; }

/* ---------- policy pages ---------- */
.policy-head { background: var(--ink); color: #fff; padding-bottom: 46px; }
.policy-head h1 {
  font-family: var(--display); font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-top: 34px;
}
.policy-head .meta { margin-top: 12px; font-family: var(--mono); font-size: 0.78rem; color: #8b8b94; }
.policy-nav { display: flex; gap: 18px; margin-top: 20px; flex-wrap: wrap; }
.policy-nav a { font-size: 0.87rem; color: #c9c9cf; text-decoration: none; border-bottom: 1px solid transparent; }
.policy-nav a:hover, .policy-nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--side-b-bright); }

.policy { max-width: 760px; margin: 0 auto; padding: 52px 24px 90px; }
.policy .intro {
  background: var(--side-b-soft); border-left: 3px solid var(--side-b);
  padding: 16px 20px; border-radius: 0 8px 8px 0; margin-bottom: 34px; font-size: 0.93rem;
}
.policy h2 {
  font-family: var(--display); font-size: 1.22rem; font-weight: 600;
  margin: 38px 0 12px; padding-top: 14px; border-top: 1px solid var(--line);
}
.policy h2:first-of-type { border-top: 0; padding-top: 0; }
.policy h3 { font-family: var(--display); font-size: 1rem; font-weight: 600; margin: 22px 0 8px; }
.policy p { margin-bottom: 13px; font-size: 0.95rem; }
.policy ul, .policy ol { margin: 0 0 15px 20px; padding: 0; }
.policy li { font-size: 0.95rem; margin-bottom: 7px; }
.policy a:not(.btn) { color: var(--side-a); }   /* :not(.btn): a button keeps its own colours (it was red on red on the capital page, 19 Oct 2026) */
.policy strong { font-weight: 600; }
.policy table { width: 100%; border-collapse: collapse; margin-bottom: 18px; font-size: 0.88rem; }
.policy th, .policy td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.policy th { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.policy .toc {
  background: var(--porcelain); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 22px; margin-bottom: 34px;
}
.policy .toc ol { margin: 8px 0 0 18px; }
.policy .toc li { margin-bottom: 4px; font-size: 0.88rem; }
.policy .placeholder {
  background: var(--side-a-soft); color: var(--side-a); font-family: var(--mono);
  font-size: 0.85rem; padding: 1px 6px; border-radius: 4px; font-weight: 600;
}
.policy .changelog { font-size: 0.85rem; color: var(--muted); }
.policy .changelog li { font-size: 0.85rem; }
.consent-line { font-size: 0.76rem; color: var(--muted); margin-top: 12px; line-height: 1.5; }
.consent-line a { color: var(--muted); text-decoration: underline; }
.footer-links { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { color: #fff; }

/* ---------- verification ---------- */
.tier-ladder { display: flex; flex-direction: column; gap: 0; margin: 16px 0 18px; }
.tier-step {
  display: flex; align-items: flex-start; gap: 14px; padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.tier-step:last-child { border-bottom: 0; }
.tier-dot {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; margin-top: 2px;
  border: 2px solid var(--line); background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700; color: var(--muted);
}
.tier-step.done .tier-dot { background: var(--side-a); border-color: var(--side-a); color: #fff; }
.tier-step.current .tier-dot { border-color: var(--side-b); color: var(--side-b); box-shadow: 0 0 0 3px var(--side-b-soft); }
.tier-step .tier-body { flex: 1; }
.tier-step h5 { font-family: var(--display); font-size: 0.94rem; font-weight: 600; margin-bottom: 3px; }
.tier-step p { font-size: 0.84rem; color: var(--muted); margin: 0; }
.tier-step.done h5::after { content: " ✓"; color: var(--side-a); }

.badge-tier {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.72rem; font-weight: 600; padding: 3px 9px; border-radius: 20px;
}
.badge-tier[data-tier="0"] { background: var(--porcelain); color: var(--muted); }
.badge-tier[data-tier="1"] { background: var(--side-b-soft); color: #7a5a09; }
.badge-tier[data-tier="2"] { background: var(--side-a-soft); color: var(--side-a); }
.badge-tier[data-tier="3"] { background: var(--side-a); color: #fff; }

.dns-record {
  font-family: var(--mono); font-size: 0.82rem; background: var(--ink); color: #e8e8ec;
  padding: 14px 16px; border-radius: 8px; margin: 12px 0; overflow-x: auto;
  display: flex; flex-direction: column; gap: 6px;
}
.dns-record .row { display: flex; gap: 12px; }
.dns-record .k { color: #8b8b94; min-width: 58px; }
.honest-note {
  font-size: 0.82rem; color: var(--muted); border-left: 3px solid var(--line);
  padding-left: 14px; margin-top: 14px;
}

/* ---------- calendar ---------- */
.cal-providers { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.cal-connected {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border: 1px solid var(--line); border-left: 3px solid var(--side-a);
  border-radius: 8px; padding: 14px 16px; background: #fff; flex-wrap: wrap;
}
.cal-connected .who { font-size: 0.9rem; }
.cal-connected .who b { font-weight: 600; }
.slot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1.5px solid var(--line); border-radius: 8px; padding: 11px 14px;
  font-size: 0.9rem; background: #fff;
}
.slot:hover { border-color: var(--side-a); }
.slot .when { font-weight: 600; }
.slot .btn { padding: 7px 14px; font-size: 0.82rem; }

/* ---------- billing polish ---------- */
.billing-alert {
  border-left: 3px solid var(--side-a); background: var(--side-a-soft);
  border-radius: 0 8px 8px 0; padding: 14px 16px; margin: 14px 0; font-size: 0.89rem;
}
.billing-alert b { color: var(--side-a); }
.seat-picker { display: flex; align-items: center; gap: 10px; margin: 14px 0; flex-wrap: wrap; }
.seat-picker label { font-size: 0.86rem; font-weight: 600; }
.seat-stepper { display: flex; align-items: center; border: 1.5px solid var(--line); border-radius: 8px; overflow: hidden; }
.seat-stepper button {
  border: 0; background: #fff; width: 34px; height: 38px; font-size: 1.1rem; color: var(--ink);
}
.seat-stepper button:hover { background: var(--porcelain); }
.seat-stepper input {
  width: 54px; height: 38px; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  text-align: center; font-family: var(--mono); font-size: 0.95rem;
}
.seat-total { font-size: 0.88rem; color: var(--muted); }
.seat-total b { color: var(--ink); font-family: var(--display); font-size: 1.05rem; }

/* ---------- FAQ ---------- */
.faq-section { margin-bottom: 40px; }
.faq-section h2 { border-top: 1px solid var(--line); padding-top: 20px; margin-bottom: 16px; }
.faq-item {
  border: 1px solid var(--line); border-radius: 8px; margin-bottom: 9px;
  background: #fff; overflow: hidden;
}
.faq-item[open] { border-color: var(--side-a); }
.faq-item summary {
  cursor: pointer; padding: 15px 18px; font-weight: 600; font-size: 0.96rem;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-family: var(--mono); font-size: 1.15rem; color: var(--side-a); flex-shrink: 0;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item summary:hover { color: var(--side-a); }
.faq-answer { padding: 0 18px 17px; border-top: 1px solid var(--line); padding-top: 14px; }
.faq-answer p { font-size: 0.93rem; color: var(--muted); margin: 0; line-height: 1.65; }
.faq-answer b { color: var(--ink); }

/* ---------- profiles ---------- */
.profile-preview {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 18px;
}
.profile-banner {
  height: 96px; background: linear-gradient(120deg, var(--accent, var(--side-a)) 0%, var(--ink) 100%);
  background-size: cover; background-position: center;
}
.profile-id { display: flex; gap: 14px; padding: 0 20px 18px; margin-top: -30px; align-items: flex-end; }
.avatar {
  width: 68px; height: 68px; border-radius: 50%; border: 3px solid #fff; background: var(--porcelain);
  object-fit: cover; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--muted);
}
.avatar.org { border-radius: 12px; }
.profile-id .who { padding-bottom: 4px; }
.profile-id h4 { font-family: var(--display); font-size: 1.08rem; }
.profile-id .sub { font-size: 0.86rem; color: var(--muted); }
.color-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0 16px; }
.swatch {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer;
}
.swatch[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 2px #fff inset; }
.locked-inline {
  font-size: 0.78rem; color: var(--side-b); background: var(--side-b-soft);
  padding: 2px 8px; border-radius: 20px; margin-left: 8px;
}

/* ---------- members & permissions ---------- */
.member-row {
  border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; margin-bottom: 10px; background: #fff;
}
.member-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.member-head .avatar { width: 38px; height: 38px; border-width: 0; font-size: 0.95rem; }
.member-head .nm { font-weight: 600; font-size: 0.94rem; }
.member-head .em { font-size: 0.8rem; color: var(--muted); }
.member-head .spacer { margin-left: auto; }
.preset-tag {
  font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 3px 9px; border-radius: 20px; background: var(--porcelain); color: var(--muted);
}
.preset-tag[data-preset="owner"] { background: var(--side-a); color: #fff; }
.preset-tag[data-preset="admin"] { background: var(--side-a-soft); color: var(--side-a); }
.preset-tag[data-preset="managed"] { background: var(--side-b-soft); color: #7a5a09; }
.preset-tag[data-preset="custom"] { background: var(--ink); color: #fff; }
.perm-editor { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; }
.perm-group { margin-bottom: 14px; }
.perm-group h5 {
  font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); margin-bottom: 8px;
}
.perm-toggle { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; font-size: 0.87rem; }
.perm-toggle input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--side-a); }
.perm-toggle .pt-body { flex: 1; }
.perm-toggle .pt-help { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
.route-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; font-size: 0.86rem; }
.route-row select { padding: 8px 11px; border: 1.5px solid var(--line); border-radius: 8px; font-family: var(--body); }
.route-arrow { color: var(--side-b); font-weight: 700; }

/* ---------- gate strip ---------- */
.gate-strip {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 1px solid var(--line); border-left: 3px solid var(--side-b);
  background: linear-gradient(90deg, var(--side-b-soft) 0%, #fff 60%);
  border-radius: 0 8px 8px 0; padding: 14px 18px; margin-bottom: 22px;
}
.gate-strip.verified { border-left-color: var(--side-a); background: linear-gradient(90deg, var(--side-a-soft) 0%, #fff 60%); }
.gate-strip .gs-body { flex: 1; min-width: 240px; }
.gate-strip h4 { font-family: var(--display); font-size: 0.98rem; margin-bottom: 3px; }
.gate-strip p { font-size: 0.84rem; color: var(--muted); margin: 0; }
.gate-steps { display: flex; gap: 6px; align-items: center; margin-top: 10px; }
.gate-pip {
  font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 3px 10px; border-radius: 20px; background: var(--porcelain); color: var(--muted);
}
.gate-pip.done { background: var(--side-a); color: #fff; }
.gate-pip.now { background: var(--ink); color: #fff; }

/* ---------- scheduler ---------- */
.sched-zones {
  display: flex; align-items: stretch; gap: 0; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; margin-bottom: 16px;
}
.sched-zone { flex: 1; padding: 14px 16px; }
.sched-zone.them { background: var(--porcelain); }
.sched-zone .zl {
  font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted); margin-bottom: 4px;
}
.sched-zone .zt { font-family: var(--display); font-size: 1.18rem; font-weight: 700; }
.sched-zone .zd { font-size: 0.8rem; color: var(--muted); }
.sched-delta {
  display: flex; align-items: center; justify-content: center; padding: 0 14px;
  background: linear-gradient(180deg, var(--side-a) 0%, var(--side-b) 100%); color: #fff;
  font-family: var(--mono); font-size: 0.7rem; text-align: center; min-width: 78px;
}

.slot-card {
  border: 1.5px solid var(--line); border-radius: var(--radius); background: #fff;
  padding: 14px 16px; margin-bottom: 10px;
}
.slot-card:hover { border-color: var(--side-a); }
.slot-times { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.slot-time { flex: 1; min-width: 150px; }
.slot-time .st-l {
  font-family: var(--mono); font-size: 0.64rem; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--muted);
}
.slot-time .st-v { font-family: var(--display); font-size: 1.02rem; font-weight: 600; }
.slot-time.mine .st-v { color: var(--side-a); }
.slot-time.theirs .st-v { color: var(--side-b); }
.slot-sep { color: var(--line); font-size: 1.3rem; padding: 0 12px; }
.slot-warnings { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.slot-warn {
  font-size: 0.78rem; color: #7a5a09; background: var(--side-b-soft);
  padding: 5px 11px; border-radius: 6px;
}
.slot-warn[data-code="different_day"] { color: #8a2331; background: var(--side-a-soft); }
.slot-actions { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.slot-actions .btn { padding: 8px 15px; font-size: 0.85rem; }

.avail-grid { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 18px; }
.avail-day {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px;
}
.avail-day .dl { font-weight: 600; font-size: 0.88rem; width: 92px; }
.avail-day.off { opacity: 0.55; }
.avail-day input[type="time"] {
  border: 1.5px solid var(--line); border-radius: 6px; padding: 6px 9px;
  font-family: var(--mono); font-size: 0.85rem;
}
.avail-day .to { color: var(--muted); font-size: 0.82rem; }
.avail-day input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--side-a); }

.meeting-card {
  border: 1px solid var(--line); border-left: 3px solid var(--side-a);
  border-radius: 8px; padding: 14px 16px; margin-bottom: 10px; background: #fff;
}
.meeting-card.confirmed { background: var(--side-a-soft); }
.meeting-card .mc-status {
  font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--side-a);
}

/* ---------- warmth & lifecycle ---------- */
.warmth {
  font-family: var(--mono); font-size: 0.6rem; text-transform: uppercase;
  letter-spacing: 0.07em; padding: 2px 7px; border-radius: 20px; white-space: nowrap;
}
.warmth[data-w="new"] { background: var(--side-a-soft); color: var(--side-a); }
.warmth[data-w="active"] { background: var(--side-a); color: #fff; }
.warmth[data-w="cooling"] { background: var(--side-b-soft); color: #7a5a09; }
.warmth[data-w="dormant"] { background: #f0e0e2; color: #8a2331; }
.warmth[data-w="archived"] { background: var(--porcelain); color: var(--muted); }
.keep-pin { color: var(--side-b); font-size: 0.8rem; }

.cp-banner {
  border-left: 3px solid var(--side-b); background: var(--side-b-soft);
  border-radius: 0 8px 8px 0; padding: 12px 15px; margin-bottom: 14px; font-size: 0.86rem;
}
.cp-banner.urgent { border-left-color: var(--side-a); background: var(--side-a-soft); }
.cp-banner .cb-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.cp-banner .btn { padding: 7px 14px; font-size: 0.82rem; }

/* ---------- notifications ---------- */
.notif-list { display: flex; flex-direction: column; gap: 8px; }
.notif {
  border: 1px solid var(--line); border-left: 3px solid var(--side-b); border-radius: 0 8px 8px 0;
  padding: 12px 15px; background: #fff; font-size: 0.88rem;
}
.notif.unread { background: var(--porcelain); }
.notif[data-kind="archiving"] { border-left-color: var(--muted); }
.notif[data-kind="attendance"] { border-left-color: var(--side-a); }
.notif .nt { font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--muted); margin-bottom: 3px; }
.notif .na { margin-top: 8px; display: flex; gap: 8px; }
.notif .na .btn { padding: 6px 12px; font-size: 0.8rem; }

.engagement-row { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.8rem; color: var(--muted); margin-top: 10px; }
.engagement-row b { color: var(--ink); }

/* refunded introduction credits, shown distinctly from the plan allowance */
.quota .pip.credit { background: var(--side-b-soft); box-shadow: inset 0 0 0 1.5px var(--side-b); }
.quota .pip.credit.used { background: var(--side-b); box-shadow: none; }

/* ---------- API reference ---------- */
.api-ep { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 14px; background: #fff; }
.api-ep-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.api-method {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.05em;
  padding: 3px 9px; border-radius: 5px; color: #fff;
}
.api-method[data-m="GET"] { background: var(--side-a); }
.api-method[data-m="POST"] { background: var(--ink); }
.api-method[data-m="PUT"], .api-method[data-m="PATCH"] { background: var(--side-b); }
.api-method[data-m="DELETE"] { background: var(--danger); }
.api-path { font-family: var(--mono); font-size: 0.88rem; color: var(--ink); font-weight: 600; }
.api-cost {
  font-family: var(--mono); font-size: 0.66rem; color: var(--muted);
  background: var(--porcelain); padding: 2px 8px; border-radius: 20px; margin-left: auto;
}
.api-scope { font-family: var(--mono); font-size: 0.66rem; color: var(--side-a); background: var(--side-a-soft); padding: 2px 8px; border-radius: 20px; }
.api-summary { font-weight: 600; font-size: 0.93rem; margin-bottom: 6px !important; }
.api-desc { font-size: 0.88rem; color: var(--muted); }
.api-params { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 0.85rem; }
.api-params th { text-align: left; font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted); padding: 7px 10px; border-bottom: 1px solid var(--line); }
.api-params td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.api-params code { font-family: var(--mono); font-size: 0.82rem; color: var(--side-a); }
.api-code {
  background: var(--ink); color: #e8e8ec; padding: 16px 18px; border-radius: 8px;
  font-family: var(--mono); font-size: 0.82rem; overflow-x: auto; line-height: 1.6; margin: 12px 0;
}

/* ---------- API dashboard panel ---------- */
.key-row { border: 1px solid var(--line); border-radius: 8px; padding: 13px 16px; margin-bottom: 9px; background: #fff; }
.key-row.revoked { opacity: 0.5; }
.key-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.key-prefix { font-family: var(--mono); font-size: 0.82rem; color: var(--ink); }
.key-env { font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 7px; border-radius: 20px; background: var(--side-a-soft); color: var(--side-a); }
.key-env[data-env="test"] { background: var(--side-b-soft); color: #7a5a09; }
.key-scopes { font-size: 0.75rem; color: var(--muted); margin-top: 5px; }
.key-reveal {
  background: var(--ink); color: #e8e8ec; font-family: var(--mono); font-size: 0.8rem;
  padding: 14px 16px; border-radius: 8px; margin: 12px 0; word-break: break-all;
}
.key-reveal .warn { color: var(--side-b-bright); display: block; margin-bottom: 8px; font-size: 0.75rem; }
.usage-bar { height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; margin: 10px 0 6px; }
.usage-fill { height: 100%; background: var(--side-a); }
.usage-fill.over { background: var(--side-b); }
.usage-meta { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--muted); flex-wrap: wrap; gap: 10px; }

/* ---------- app directory ---------- */
.dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 26px; }
.dir-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; background: #fff;
  display: flex; flex-direction: column; }
.dir-card.featured { border-color: var(--side-a); }
.dir-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.dir-logo { width: 42px; height: 42px; border-radius: 10px; background: var(--porcelain);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-family: var(--display); font-weight: 700; color: var(--muted); }
.dir-card h3 { font-family: var(--display); font-size: 1.02rem; }
.dir-cat { font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted); }
.dir-tagline { font-size: 0.88rem; color: var(--muted); flex: 1; margin-bottom: 12px; }
.dir-meta { display: flex; justify-content: space-between; align-items: center;
  font-size: 0.78rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 11px; }
.dir-perms { font-family: var(--mono); font-size: 0.68rem; }
.dir-featured-tag { font-family: var(--mono); font-size: 0.6rem; text-transform: uppercase;
  letter-spacing: 0.07em; background: var(--side-a); color: #fff; padding: 2px 7px; border-radius: 20px; }
.dir-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.dir-filter { border: 1.5px solid var(--line); background: #fff; border-radius: 20px;
  padding: 6px 14px; font-size: 0.84rem; }
.dir-filter[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }

/* ---------- review queue ---------- */
.review-card { border: 1px solid var(--line); border-left: 3px solid var(--side-b);
  border-radius: 0 8px 8px 0; padding: 16px 18px; margin-bottom: 12px; background: #fff; }
.review-flag { font-size: 0.8rem; padding: 6px 11px; border-radius: 6px; margin-bottom: 5px; }
.review-flag[data-level="attention"] { background: var(--side-a-soft); color: var(--side-a); }
.review-flag[data-level="warning"] { background: var(--side-b-soft); color: #7a5a09; }

/* ---------- app analytics ---------- */
.an-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 14px; margin: 14px 0; }
.an-stat { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.an-stat .n { font-family: var(--display); font-size: 1.35rem; font-weight: 700; }
.an-stat .n.bad { color: var(--side-a); }
.an-stat .n.good { color: var(--side-a); }
.an-stat .l { font-family: var(--mono); font-size: 0.6rem; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--muted); margin-top: 2px; }
.an-spark { display: flex; align-items: flex-end; gap: 2px; height: 46px; margin: 10px 0 4px; }
.an-bar { flex: 1; min-width: 3px; border-radius: 2px 2px 0 0; background: var(--side-a); opacity: 0.85; }
.an-bar.out { background: var(--side-b); }
.an-spark-legend { display: flex; gap: 14px; font-size: 0.72rem; color: var(--muted); }
.an-swatch { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; }
.an-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; margin-top: 10px; }
.an-table th { text-align: left; font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted); padding: 6px 9px; border-bottom: 1px solid var(--line); }
.an-table td { padding: 7px 9px; border-bottom: 1px solid var(--line); }
.an-table td.err { color: var(--side-a); }
.an-hint { font-size: 0.82rem; padding: 9px 12px; border-radius: 6px; margin-bottom: 6px; }
.an-hint[data-level="attention"] { background: var(--side-a-soft); color: var(--side-a); }
.an-hint[data-level="warning"] { background: var(--side-b-soft); color: #7a5a09; }
.an-hint[data-level="ok"] { background: var(--porcelain); color: var(--muted); }

/* ---------- incremental consent ---------- */
.consent-new { border: 1.5px solid var(--side-a); border-radius: 8px; padding: 14px 16px; margin-bottom: 12px;
  background: var(--side-a-soft); }
.consent-existing { border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; opacity: 0.75; }
.consent-scope { display: flex; gap: 9px; padding: 5px 0; font-size: 0.87rem; align-items: flex-start; }
.consent-scope .mark { color: var(--side-a); font-weight: 700; }
.consent-scope.sensitive .mark { color: var(--danger); }

/* ---------- submission checklist ---------- */
.chk-item { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 0.86rem; }
.chk-item:last-child { border-bottom: 0; }
.chk-mark { flex-shrink: 0; width: 18px; font-weight: 700; }
.chk-item[data-state="ok"] .chk-mark { color: var(--side-a); }
.chk-item[data-state="blocking"] .chk-mark { color: var(--danger); }
.chk-item[data-state="optional"] .chk-mark { color: var(--side-b); }
.chk-item[data-state="info"] .chk-mark { color: var(--muted); }
.chk-fix { color: var(--muted); font-size: 0.79rem; margin-top: 3px; }
.chk-summary { font-size: 0.86rem; padding: 10px 13px; border-radius: 6px; margin-bottom: 10px; }
.chk-summary.ready { background: var(--side-a-soft); color: var(--side-a); }
.chk-summary.blocked { background: var(--side-b-soft); color: #7a5a09; }
.replay-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.replay-log { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); margin-top: 8px; }

/* ---------- demand watch capture ---------- */
.watch-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; margin-top: 10px; }
@media (max-width: 640px) { .watch-row { grid-template-columns: 1fr; } }

/* ---------- invites ---------- */
.invite-box { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; background: #fff; }
.invite-why { background: var(--side-b-soft); border-radius: 8px; padding: 12px 14px; font-size: 0.87rem;
  margin-bottom: 14px; color: #6b4f08; }
.invite-funnel { display: flex; gap: 16px; flex-wrap: wrap; margin: 14px 0; }
.invite-stat .n { font-family: var(--display); font-size: 1.4rem; font-weight: 700; }
.invite-stat .l { font-family: var(--mono); font-size: 0.6rem; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--muted); }
.invite-list { font-size: 0.83rem; margin-top: 10px; }
.invite-list li { padding: 6px 0; border-bottom: 1px solid var(--line); list-style: none;
  display: flex; gap: 10px; align-items: baseline; }
.invite-status { font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase;
  letter-spacing: 0.06em; padding: 2px 7px; border-radius: 20px; margin-left: auto; }
.invite-status[data-s="qualified"] { background: var(--side-a); color: #fff; }
.invite-status[data-s="joined"] { background: var(--side-a-soft); color: var(--side-a); }
.invite-status[data-s="opened"] { background: var(--side-b-soft); color: #7a5a09; }
.invite-status[data-s="sent"] { background: var(--porcelain); color: var(--muted); }
.invite-status[data-s="declined"], .invite-status[data-s="expired"] { background: var(--porcelain); color: var(--muted); }

/* ---------- warm paths ---------- */
.warm { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem;
  background: var(--side-a-soft); color: var(--side-a); border-radius: 20px;
  padding: 4px 11px; margin-top: 8px; }
.warm[data-s="moderate"] { background: var(--side-b-soft); color: #7a5a09; }
.warm[data-s="weak"] { background: var(--porcelain); color: var(--muted); }
.warm-note { font-size: 0.76rem; color: var(--muted); margin-top: 6px; }

/* ---------- intent freshness ---------- */
.fresh-ask { border-left: 3px solid var(--side-b); background: var(--side-b-soft);
  border-radius: 0 8px 8px 0; padding: 13px 16px; margin-bottom: 12px; font-size: 0.87rem; color: #6b4f08; }
.fresh-ask.paused { border-left-color: var(--muted); background: var(--porcelain); color: var(--muted); }
.fresh-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* ---------- invite from a gap ---------- */
.gap-invite { border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 18px 20px; margin-top: 16px; background: var(--porcelain); }

/* ---------- customer journey ---------- */
.journey {
  border: 1px solid var(--line); border-left: 3px solid var(--side-a);
  border-radius: 0 var(--radius) var(--radius) 0; background: #fff;
  padding: 20px 22px; margin-bottom: 20px;
}
.journey-head { display: flex; align-items: flex-start; gap: 12px; }
.journey-head h3 { font-family: var(--display); font-size: 1.12rem; }
.journey-head .btn-quiet { margin-left: auto; }
.journey-why { font-size: 0.9rem; color: var(--muted); margin: 8px 0 14px; }
.journey-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.journey-fill { height: 100%; background: linear-gradient(90deg, var(--side-a), var(--side-b)); }
.journey-meta { display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 0.68rem; color: var(--muted); margin-top: 7px; }
.journey-actions { margin-top: 14px; }
.journey-list { margin: 16px 0 0; padding: 0; list-style: none; }
.journey-step { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line);
  font-size: 0.87rem; align-items: baseline; }
.journey-step.done { color: var(--muted); }
.journey-step.done b { font-weight: 500; }
.journey-step.current b { color: var(--side-a); }
.journey-mark { width: 16px; flex-shrink: 0; color: var(--side-a); }
.journey-step.done .journey-mark { color: var(--side-a); }
.journey-step:not(.done):not(.current) .journey-mark { color: var(--line); }
.journey-hint { display: block; color: var(--muted); font-size: 0.8rem; margin-top: 2px; }

/* the panel a journey step points at, briefly, so it can be found */
.journey-target { animation: journeyPulse 1.8s ease-out; }
@keyframes journeyPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(214, 40, 57, 0); }
  15%      { box-shadow: 0 0 0 4px rgba(214, 40, 57, 0.18); }
}

/* ---------- match outcome feedback ---------- */
.outcome-ask { border: 1px solid var(--line); border-left: 3px solid var(--side-b);
  border-radius: 0 8px 8px 0; padding: 14px 16px; margin-bottom: 10px; font-size: 0.88rem; }
.outcome-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.outcome-reasons { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.outcome-reason { text-align: left; border: 1px solid var(--line); background: #fff;
  border-radius: 6px; padding: 8px 12px; font-size: 0.85rem; }
.outcome-reason:hover { border-color: var(--side-a); }
.outcome-private { font-size: 0.78rem; color: var(--muted); margin-top: 10px; }
.quality-tip { background: var(--side-b-soft); border-radius: 8px; padding: 12px 14px;
  font-size: 0.86rem; color: #6b4f08; margin-top: 12px; }

/* ---------- mobile: stop the page moving ---------- */
/* Nothing may exceed the viewport. One overflowing element makes the whole page
   scroll sideways, and every tap lands slightly off. */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, table, pre { max-width: 100%; }

@media (max-width: 700px) {
  /* Two cards side by side on a phone gives each about 150px, which is narrower
     than the words in them. Stacked, each gets the full width and the headline
     wraps to two lines instead of six. */
  .pair-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    /* The height is locked by JS for the side-by-side layout; stacked, the
       content decides and the lock would leave a gap. */
    min-height: 0 !important;
  }
  /* The seam badge belongs between two columns. Stacked, there is no seam. */
  .pair-row > .pair-seam, .pairlock .seam { display: none; }
  .pair-card { min-height: 0; height: auto; }
  .pair-card h3, .pair-card .pc-head { font-size: 0.98rem; }

  /* Long unbroken strings — role keys like advertiser_seeking_publishers — are
     what actually forced the overflow in the intent cards. */
  .pair-card .rolekey, .pc-key, .rolekey { word-break: break-word; overflow-wrap: anywhere; }

  /* Any wide grid degrades to one column rather than overflowing. */
  .watch-row, .crm-row, .invite-funnel { grid-template-columns: minmax(0, 1fr); }
  .wrap { padding-left: 16px; padding-right: 16px; }
}

/* ---------- mobile scheduling ---------- */
/* Most people confirm a meeting from a phone, one-handed, mid-something-else.
   The dual-clock picker is careful desktop work that needs its own treatment
   here rather than a shrunk-down version of the same thing. */
@media (max-width: 700px) {
  .slot { padding: 14px 15px; }
  /* Both clock readings stack instead of competing for width — the whole point
     of the feature is that neither reading is secondary. */
  .slot-times { display: grid; grid-template-columns: 1fr; gap: 3px; }
  .slot-times .theirs { color: var(--muted); font-size: 0.86rem; }
  /* Thumb-sized targets. A 32px button is a mis-tap on a phone. */
  .slot-actions .btn, .cand-actions .btn, .fresh-actions .btn,
  .outcome-actions .btn, .journey-actions .btn {
    min-height: 46px; padding-left: 18px; padding-right: 18px;
  }
  .outcome-reason { min-height: 46px; }
  /* Full-width primary actions: the common case on a phone is one obvious next
     step, not a row of equals. */
  .slot-actions, .outcome-actions, .fresh-actions { flex-direction: column; align-items: stretch; }
  .slot-actions .btn, .outcome-actions .btn, .fresh-actions .btn { width: 100%; }
  .slot-actions .btn-quiet, .fresh-actions .btn-quiet { width: 100%; padding: 12px; }
  /* Timezone warnings must not be truncated on the screen where they matter
     most — a "different day" warning is the one that ruins a meeting. */
  .slot-warn { white-space: normal; line-height: 1.45; }
  .sched-zones { flex-direction: column; align-items: flex-start; gap: 4px; }
  /* Keep the confirm action reachable without scrolling back up. */
  .cp-pane { max-height: none; }
}

/* ---------- offline ---------- */
.offline-bar {
  background: var(--ink); color: #f4f4f6; font-size: 0.85rem; line-height: 1.5;
  padding: 10px 18px; text-align: center; position: sticky; top: 0; z-index: 200;
}
.offline-bar::before { content: '\25cf'; color: var(--side-b-bright, #f0b429); margin-right: 8px; }
body.is-offline .btn-primary { opacity: 0.55; }

/* ---------- draft restored ---------- */
.draft-note {
  background: var(--side-b-soft); color: #6b4f08; border-radius: 8px;
  padding: 10px 13px; font-size: 0.85rem; margin-bottom: 12px;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.draft-note button { margin-left: auto; }

/* ---------- intake example ---------- */
.example-card {
  border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 16px 18px; background: var(--porcelain); margin-bottom: 16px;
}
.example-card .ex-label { font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--muted); margin-bottom: 6px; }
.example-card h4 { font-family: var(--display); font-size: 0.98rem; margin-bottom: 5px; }
.example-card p { font-size: 0.86rem; color: var(--muted); line-height: 1.55; }
.example-card .ex-actions { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- outcome loop ---------- */
.loop-card { border: 1px solid var(--line); border-left: 3px solid var(--side-a);
  border-radius: 0 8px 8px 0; padding: 15px 17px; margin-bottom: 10px; background: #fff; }
.loop-card .loop-basis { font-family: var(--mono); font-size: 0.65rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted); margin-bottom: 5px; }
.loop-change { font-size: 0.92rem; font-weight: 600; }
.loop-actions { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.loop-applied { font-size: 0.85rem; color: var(--muted); padding: 8px 0;
  border-bottom: 1px solid var(--line); }
.loop-applied b { color: var(--ink); }

/* ---------- relationship CRM ---------- */
.crm-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.crm-filter { font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.06em; padding: 5px 11px; border-radius: 20px; border: 1px solid var(--line);
  background: #fff; cursor: pointer; }
.crm-filter[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

.crm-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 13px 0;
  border-bottom: 1px solid var(--line); align-items: start; }
.crm-row.overdue { border-left: 3px solid var(--side-a); padding-left: 12px; margin-left: -15px; }
.crm-name { font-weight: 600; font-size: 0.95rem; }
.crm-sub { font-size: 0.82rem; color: var(--muted); margin-top: 2px; }
.crm-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; align-items: center; }
.crm-tag { font-family: var(--mono); font-size: 0.62rem; background: var(--porcelain);
  border-radius: 20px; padding: 2px 8px; color: var(--muted); }
.crm-stage { font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase;
  letter-spacing: 0.06em; padding: 2px 8px; border-radius: 20px; }
.crm-stage[data-s="active"] { background: var(--side-a); color: #fff; }
.crm-stage[data-s="exploring"] { background: var(--side-b-soft); color: #7a5a09; }
.crm-stage[data-s="waiting"] { background: var(--porcelain); color: var(--muted); }
.crm-stage[data-s="paused"] { background: var(--porcelain); color: var(--muted); }
.crm-stage[data-s="done"] { background: #0f766e; color: #fff; }
.crm-stage[data-s="closed"] { background: var(--porcelain); color: var(--muted); }
.crm-due { font-size: 0.76rem; color: var(--muted); }
.crm-due.overdue { color: var(--side-a); font-weight: 600; }

.crm-detail { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px;
  margin-top: 14px; background: #fff; }
.crm-note { border-left: 2px solid var(--line); padding: 8px 0 8px 12px; margin-bottom: 8px;
  font-size: 0.88rem; white-space: pre-wrap; }
.crm-note.pinned { border-left-color: var(--side-b); background: var(--side-b-soft);
  border-radius: 0 6px 6px 0; padding-right: 10px; }
.crm-note-meta { font-family: var(--mono); font-size: 0.62rem; color: var(--muted); margin-top: 4px;
  display: flex; gap: 8px; align-items: center; }
.crm-private { font-size: 0.78rem; color: var(--muted); background: var(--porcelain);
  border-radius: 6px; padding: 9px 12px; margin-bottom: 12px; }
.crm-empty { font-size: 0.86rem; color: var(--muted); padding: 18px 0; }
.import-summary { background: var(--porcelain); border-radius: 8px; padding: 13px 15px;
  font-size: 0.86rem; margin-top: 10px; }
.import-summary b { color: var(--ink); }
.import-warn { background: var(--side-b-soft); color: #6b4f08; border-radius: 6px;
  padding: 9px 12px; font-size: 0.84rem; margin-top: 8px; }

/* ---------- dashboard navigation ---------- */
/* Eleven stacked panels meant a new user scrolled past billing and API keys to
   reach their introductions. Sections put the thing they came for first. */
.dashnav { position: sticky; top: 0; z-index: 40; background: var(--porcelain);
  border-bottom: 1px solid var(--line); margin: 0 -20px 20px; padding: 0 20px; }
.dashnav-inner { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.dashnav-inner::-webkit-scrollbar { display: none; }
.dashnav button { background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 12px 14px; font: 500 0.88rem var(--body); color: var(--muted);
  cursor: pointer; white-space: nowrap; }
.dashnav button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--side-a); }
.dashnav button:focus-visible { outline: 2px solid var(--side-a); outline-offset: -2px; }
.dashnav .badge { display: inline-block; min-width: 17px; padding: 0 5px; margin-left: 6px;
  background: var(--side-a); color: #fff; border-radius: 20px;
  font: 600 0.68rem var(--mono); text-align: center; }
@media (max-width: 700px) { .dashnav { margin: 0 -16px 16px; padding: 0 16px; } }

/* ---------- keyboard navigation ---------- */
.kbd-active { outline: 2px solid var(--side-a); outline-offset: 3px; border-radius: 4px; }
.kbd-hint { font-family: var(--mono); font-size: 0.62rem; color: var(--muted);
  border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
.kbd-help { position: fixed; inset: 0; background: rgba(11,11,13,0.6); z-index: 300;
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.kbd-help-card { background: #fff; border-radius: var(--radius); padding: 26px 28px;
  max-width: 420px; width: 100%; }
.kbd-help-card h3 { font-family: var(--display); font-size: 1.1rem; margin-bottom: 14px; }
.kbd-help-row { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0;
  border-bottom: 1px solid var(--line); font-size: 0.87rem; }
.kbd-help-row:last-of-type { border-bottom: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- section empty states ---------- */
.section-empty {
  border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 20px 22px; margin-bottom: 18px; background: var(--porcelain);
  font-size: 0.9rem; color: var(--muted); line-height: 1.6;
}
/* The panel a section switch moves focus into should not draw a focus ring —
   it is a scroll target, not a control. */
.panel:focus { outline: none; }
.panel:focus-visible { outline: 2px solid var(--side-a); outline-offset: 3px; }

/* ---------- FAQ search ---------- */
.faq-search { margin: 0 0 22px; }
.faq-search input {
  width: 100%; padding: 13px 15px; font-size: 1rem; font-family: var(--body);
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink);
}
.faq-search input:focus { outline: 2px solid var(--side-a); outline-offset: -1px; border-color: transparent; }
.faq-count { font-family: var(--mono); font-size: 0.7rem; color: var(--muted); margin-top: 8px;
  min-height: 1em; }

/* ---------- error boundary ---------- */
.boundary-banner {
  background: var(--side-a); color: #fff; font-size: 0.86rem; line-height: 1.5;
  padding: 10px 16px; display: flex; gap: 12px; align-items: center;
  position: sticky; top: 0; z-index: 250;
}
.boundary-banner button {
  background: rgba(255,255,255,0.16); color: #fff; border: 0; border-radius: 6px;
  padding: 5px 11px; font: 600 0.8rem var(--body); cursor: pointer;
}
.boundary-banner button:last-child { margin-left: auto; padding: 5px 9px; font-size: 1rem; }
.boundary-banner button:hover { background: rgba(255,255,255,0.26); }

/* ---------- navigation and panel icons ---------- */
.dashnav button { display: inline-flex; align-items: center; gap: 7px; }
.nav-icon { flex-shrink: 0; opacity: 0.75; }
.dashnav button[aria-selected="true"] .nav-icon { opacity: 1; color: var(--side-a); }
.panel-icon { vertical-align: -3px; margin-right: 8px; color: var(--side-a); opacity: 0.85; }
/* On a phone the labels crowd out; the icons carry the meaning and the selected
   tab keeps its label so you always know where you are. */
@media (max-width: 560px) {
  .dashnav button { padding: 11px 12px; }
  .dashnav button .tab-label { display: none; }
  .dashnav button[aria-selected="true"] .tab-label { display: inline; }
}

/* ---------- guided assistant ---------- */
.ai-options { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.ai-option {
  display: block; width: 100%; text-align: left; background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 13px;
  font: 500 0.87rem var(--body); cursor: pointer; text-decoration: none;
}
.ai-option:hover:not(:disabled) { border-color: var(--side-a); color: var(--side-a); }
.ai-option:disabled { opacity: 0.4; cursor: default; }
.ai-option:focus-visible { outline: 2px solid var(--side-a); outline-offset: 2px; }
.ai-steps { margin: 8px 0 0 18px; font-size: 0.87rem; line-height: 1.6; }
.ai-steps li { margin-bottom: 6px; }
.ai-link { display: inline-block; margin-top: 8px; font-weight: 600; font-size: 0.87rem;
  color: var(--side-a); }

/* ---------- sample-data banner ---------- */
.demo-banner {
  background: var(--side-b-soft); color: #6b4f08; border-radius: 8px;
  padding: 11px 14px; margin-bottom: 16px; font-size: 0.86rem; line-height: 1.55;
}

/* ---------- capital portal ---------- */
.cap-pairs { display: grid; gap: 8px; margin: 16px 0 20px; }
.cap-pair { display: grid; grid-template-columns: minmax(0,1fr) 32px minmax(0,1fr);
  align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; font-size: 0.9rem; }
.cap-a { font-weight: 600; }
.cap-b { font-weight: 600; text-align: right; }
.cap-arrow { text-align: center; color: var(--side-b); font-size: 1.05rem; }
.cap-points { display: grid; gap: 12px; margin: 14px 0 24px; }
.cap-points > div { border-left: 3px solid var(--side-a); padding: 10px 0 10px 14px;
  font-size: 0.92rem; line-height: 1.6; }
.cap-cta { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px;
  margin-top: 32px; background: var(--porcelain); }
.cap-cta .btn { margin-right: 8px; margin-top: 10px; }
@media (max-width: 700px) {
  .cap-pair { grid-template-columns: minmax(0,1fr); gap: 4px; }
  .cap-b { text-align: left; }
  .cap-arrow { text-align: left; }
}

/* ---------- industry picker ---------- */
.ind-picker { display: grid; gap: 8px; }
.ind-picker input, .ind-picker select { width: 100%; padding: 11px 13px; font-size: 0.95rem;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); }
.ind-results { display: grid; gap: 4px; }
.ind-hit { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 12px; font: 500 0.88rem var(--body); cursor: pointer; }
.ind-hit:hover { border-color: var(--side-a); color: var(--side-a); }
.ind-group { font-family: var(--mono); font-size: 0.62rem; color: var(--muted); flex-shrink: 0; }
.ind-chosen { display: flex; flex-wrap: wrap; gap: 6px; }
.ind-tag { display: inline-flex; align-items: center; gap: 6px; background: var(--side-a);
  color: #fff; border-radius: 20px; padding: 4px 8px 4px 12px; font-size: 0.82rem; }
.ind-tag button { background: none; border: 0; color: #fff; cursor: pointer; font-size: 1rem;
  line-height: 1; padding: 0 2px; }

/* ---------- sign in: dark, on-brand card with six-digit code entry ---------- */
.signin-card {
  background: radial-gradient(120% 90% at 50% 0%, #2a1018 0%, var(--ink) 55%);
  color: #f4f4f6; border: 1px solid #2a2a31; text-align: center;
  max-width: 520px; margin: 24px auto; padding: 40px 32px;
  box-shadow: 0 30px 80px -30px rgba(216, 40, 63, .45);
}
.signin-card h2 { color: #fff; }
.signin-card .hint { color: #b9b9c2; }
.signin-card .hint b { color: var(--side-b-bright); }
.signin-mark { border-radius: 50%; margin: 0 auto 14px; display: block;
  box-shadow: 0 0 0 4px rgba(245, 200, 66, .15), 0 0 40px rgba(216, 40, 63, .35);
  animation: signin-spin 18s linear infinite; }
@keyframes signin-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .signin-mark { animation: none; } }
.signin-card .field { text-align: left; }
.signin-card .field label { color: #d8d8de; }
.signin-card .field input { background: #15151a; color: #fff; border-color: #34343c; }
.signin-card .btn-primary { width: 100%; padding: 14px; font-size: 1rem; }
.code-label { display: block; font-weight: 600; margin: 6px 0 14px; color: #d8d8de; }
.code-boxes { display: flex; justify-content: center; align-items: center; gap: 8px; }
.code-box {
  width: 52px; height: 64px; text-align: center; font: 600 1.7rem/1 'IBM Plex Mono', ui-monospace, monospace;
  color: #fff; background: #15151a; border: 1.5px solid #3a3a44; border-radius: 12px;
  caret-color: var(--side-b-bright); transition: border-color .15s, box-shadow .15s, transform .15s;
}
.code-box:focus { outline: none; border-color: var(--side-b-bright); box-shadow: 0 0 0 4px rgba(245, 200, 66, .18); transform: translateY(-2px); }
.code-box.filled { border-color: var(--side-a); }
.code-boxes.bad .code-box { border-color: var(--side-a); animation: code-shake .35s; }
.code-boxes.good .code-box { border-color: #3ccf7a; }
@keyframes code-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.code-gap { width: 10px; height: 2px; background: #3a3a44; border-radius: 2px; }
.code-status { min-height: 1.4em; margin: 14px 0 4px; font-size: .9rem; color: #b9b9c2; }
.code-status.err { color: #ff8fa0; }
.code-actions { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }
.signin-card .btn-quiet { color: var(--side-b-bright); }
.signin-card .btn-quiet:disabled { color: #6b6b75; cursor: default; }
@media (max-width: 420px) { .code-box { width: 42px; height: 54px; font-size: 1.4rem; } .code-boxes { gap: 6px; } }

/* [hidden] must win over .quota { display: flex } — "Sign out" showed on the sign-in screen. */
.quota[hidden] { display: none; }

/* ---------- interview: one question per slide (owner, 16 Oct 2026) ---------- */
.intake-stage {
  position: relative; overflow: hidden; color: #f4f4f6;
  background:
    radial-gradient(90% 70% at 85% -10%, rgba(245, 200, 66, .16), transparent 60%),
    radial-gradient(90% 80% at 0% 0%, rgba(216, 40, 63, .28), transparent 55%),
    var(--ink);
  border: 1px solid #2a2a31; border-radius: 22px;
  padding: 26px 34px 30px; margin: 18px 0 30px; min-height: 520px;
  box-shadow: 0 40px 90px -40px rgba(216, 40, 63, .5);
}
.intake-vortex {                      /* the maelstrom: a slow, faint vortex behind the slide */
  position: absolute; width: min(560px, 120vw); height: auto; right: -220px; bottom: -260px;
  opacity: .07; pointer-events: none; animation: signin-spin 60s linear infinite;
}
.intake-top { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }
.intake-back { background: none; border: none; color: #c9c9d2; font-weight: 600; cursor: pointer; padding: 6px 0; }
.intake-back:hover { color: var(--side-b-bright); }
.intake-progress { flex: 1; height: 6px; border-radius: 6px; background: #26262d; overflow: hidden; }
.intake-progress-bar { height: 100%; width: 0; border-radius: 6px;
  background: linear-gradient(90deg, var(--side-a), var(--side-b-bright)); transition: width .45s cubic-bezier(.2,.8,.2,1); }
.intake-count { font: 500 .8rem/1 'IBM Plex Mono', ui-monospace, monospace; color: #9a9aa5; min-width: 52px; text-align: right; }
.intake-slide { position: relative; z-index: 1; padding-top: 34px; max-width: 720px; }
.intake-slide.in-next { animation: slide-in-next .42s cubic-bezier(.2,.8,.2,1); }
.intake-slide.in-back { animation: slide-in-back .42s cubic-bezier(.2,.8,.2,1); }
@keyframes slide-in-next { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: none; } }
@keyframes slide-in-back { from { opacity: 0; transform: translateX(-46px); } to { opacity: 1; transform: none; } }
.intake-kicker { font: 500 .78rem/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .14em;
  text-transform: uppercase; color: var(--side-b-bright); margin: 0 0 12px; }
.intake-q { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800; color: #fff;
  font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.12; letter-spacing: -.02em; margin: 0 0 10px; }
.intake-help { color: #b9b9c2; font-size: 1rem; margin: 0 0 24px; max-width: 600px; }
.slide-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.intake-stage .chip.big {
  background: #17171c; color: #eeeef2; border: 1.5px solid #34343c; border-radius: 999px;
  padding: 12px 20px; font-size: .98rem; font-weight: 600; cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
}
.intake-stage .chip.big:hover { border-color: var(--side-b-bright); transform: translateY(-2px);
  box-shadow: 0 10px 24px -14px rgba(245, 200, 66, .7); }
.intake-stage .chip.big.on { background: linear-gradient(135deg, var(--side-a), #a51c30); border-color: var(--side-a); color: #fff; }
.slide-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.intake-stage .btn-primary { padding: 13px 26px; font-size: 1rem; }
.intake-stage .btn-ghost { color: #eeeef2; border-color: #4a4a54; }
.btn-launch { background: linear-gradient(135deg, var(--side-a), #e0533a 60%, var(--side-b-bright)); color: #111 !important;
  font-weight: 800; box-shadow: 0 14px 30px -14px rgba(245, 200, 66, .8); }
.intake-stage .ind-picker input, .intake-stage .ind-picker select, .intake-stage textarea, .range-row input {
  width: 100%; background: #15151a; color: #fff; border: 1.5px solid #34343c; border-radius: 12px;
  padding: 13px 14px; font-size: 1rem; }
.intake-stage .ind-picker input:focus, .intake-stage textarea:focus, .range-row input:focus {
  outline: none; border-color: var(--side-b-bright); box-shadow: 0 0 0 4px rgba(245, 200, 66, .15); }
.intake-stage .ind-picker { display: grid; gap: 10px; max-width: 560px; }
.intake-stage .ind-hit { background: #1d1d23; color: #eee; border-color: #34343c; }
.intake-stage .ind-tag { background: rgba(216, 40, 63, .2); color: #fff; border: 1px solid var(--side-a); }
.intake-stage .ind-tag button { color: #fff; }
.custom-range { margin-top: 18px; color: #c9c9d2; }
.custom-range summary { cursor: pointer; color: var(--side-b-bright); font-weight: 600; }
.range-row { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; margin-top: 12px; }
.range-row label { display: grid; gap: 6px; font-size: .85rem; flex: 1; min-width: 140px; }
.range-err { color: #ff8fa0; min-height: 1.2em; margin: 6px 0 0; }
.summary-box { max-width: 640px; }
.summary-meta { text-align: right; font-size: .82rem; color: #9a9aa5; margin-top: 6px; }
.summary-meta.short { color: var(--side-b-bright); font-weight: 600; text-align: left; font-size: .9rem; animation: summary-nudge .35s ease; }
@keyframes summary-nudge { 0%,100% { transform: translateX(0) } 25% { transform: translateX(-5px) } 75% { transform: translateX(5px) } }
/* Why a slide's Continue isn't ready yet (app.js gate()). */
.slide-hint { margin: 10px 0 0; min-height: 1.2em; font-size: .9rem; font-weight: 600; color: var(--side-b-bright); flex-basis: 100%; }
.slide-hint.nudge { animation: summary-nudge .35s ease; }
@media (prefers-reduced-motion: reduce) { .summary-meta.short, .slide-hint.nudge { animation: none; } }
.review-list { margin: 0; max-width: 640px; border-top: 1px solid #2a2a31; }
.review-row { display: grid; grid-template-columns: 160px 1fr auto; gap: 14px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid #2a2a31; }
.review-row dt { color: #9a9aa5; font-size: .85rem; }
.review-row dd { margin: 0; color: #fff; white-space: pre-wrap; }
.intake-stage .btn-quiet { color: var(--side-b-bright); }
.intake-trail { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.trail-chip { font-size: .78rem; color: #c9c9d2; border: 1px solid #34343c; border-radius: 999px; padding: 5px 11px; }
.intake-stage .example-card { margin-top: 26px; background: rgba(255,255,255,.04); border: 1px solid #34343c; color: #ddd; }
.intake-stage .example-card h4 { color: #fff; }
.intake-stage .example-card .ex-label { color: var(--side-b-bright); }
@media (max-width: 640px) {
  .intake-stage { padding: 20px 18px 24px; border-radius: 16px; }
  .review-row { grid-template-columns: 1fr auto; }
  .review-row dt { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .intake-slide.in-next, .intake-slide.in-back, .intake-vortex { animation: none; }
  .intake-progress-bar { transition: none; }
}

/* Phone header: the quota sentence wrapped into three lines beside the wordmark. */
@media (max-width: 600px) {
  .app-top #quota-label { display: none; }
  .app-top .wordmark { font-size: 1.05rem; white-space: nowrap; }
}

/* ---------- Who's looking for you (17 Oct 2026) ---------- */
.demand-panel { border-top: 3px solid var(--side-b); }
.demand-lead { font-size: 1.02rem; margin: 0 0 14px; }
.demand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.demand-card { border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: #fff;
  display: flex; flex-direction: column; gap: 10px; transition: box-shadow .15s, transform .15s; }
.demand-card:hover { box-shadow: 0 12px 30px -18px rgba(13, 13, 15, .35); transform: translateY(-2px); }
.demand-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.demand-when { font-size: .78rem; color: var(--muted); }
.demand-summary { margin: 0; font-size: .95rem; line-height: 1.45; }
.demand-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.demand-tag { font-size: .75rem; background: var(--side-b-soft); color: #6b4e05; border-radius: 999px; padding: 3px 9px; }
.demand-actions { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.demand-msg { font-size: .85rem; color: var(--muted); }
.demand-note { margin-top: 14px; }

/* ---------- Devices and your data ---------- */
.device-list { list-style: none; margin: 0 0 14px; padding: 0; border-top: 1px solid var(--line); }
.device { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 11px 0; border-bottom: 1px solid var(--line); }
.device-name { font-weight: 600; }
.device-here { font-size: .72rem; background: var(--side-a-soft); color: var(--side-a); border-radius: 999px; padding: 2px 8px; margin-left: 6px; }
.device-when { color: var(--muted); font-size: .85rem; }
.device-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------- Anonymous-card opt-in on the interview's review slide ---------- */
.demand-optin { margin-top: 22px; max-width: 640px; padding: 16px; border: 1px dashed #4a4a54; border-radius: 14px; }
.optin-row { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; color: #eeeef2; }
.optin-row input { margin-top: 4px; accent-color: var(--side-b-bright); width: 18px; height: 18px; }
.demand-optin textarea { margin-top: 12px; }
.optin-note { font-size: .82rem; color: #9a9aa5; margin: 8px 0 0; }

/* ---------- live Developer API panel ---------- */
.api-h { font-size: 1rem; margin: 22px 0 10px; }
.scope-set { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; display: grid; gap: 6px; }
.scope-set legend { font-size: .85rem; font-weight: 600; padding: 0 6px; }
.scope-set .optin-row { color: var(--ink); font-size: .85rem; }
.reveal-value { display: block; margin-top: 8px; padding: 8px 10px; background: #fff; border-radius: 8px; word-break: break-all; }
.rp-block { margin: 6px 0 14px; color: var(--ink); font-size: .9rem; }

/* Recovery and notification settings (security-ui.js, 17 Oct 2026) */
.rec-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.rec-row h4 { margin: 0 0 4px; }
.rec-row .hint { margin: 0; }
.rec-codes { columns: 2; margin: 10px 0 14px; padding-left: 1.4em; font-family: var(--mono, 'IBM Plex Mono', monospace); }
.rec-codes li { margin: 2px 0; }
.rec-reveal .btn, .rec-reveal .btn-quiet { margin: 4px 6px 0 0; }
.notif-table { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.notif-table th, .notif-table td { text-align: left; padding: 8px 0; border-top: 1px solid var(--line); font-weight: 400; vertical-align: middle; }
.notif-table td { width: 40%; padding-left: 12px; }
.quiet-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.signin-alt { margin-top: 14px; text-align: center; }
@media (max-width: 640px) {
  .rec-row { flex-direction: column; align-items: flex-start; }
  .rec-codes { columns: 1; }
  .notif-table td { white-space: normal; }
}

/* Openings (openings-ui.js) and warm path / vouch (counterparts-ui.js), 17 Oct 2026 */
.op-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.op-tab { border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: 4px 12px; font: inherit; font-size: .86rem; cursor: pointer; color: var(--ink); }
.op-tab[aria-selected="true"] { background: var(--ink); color: var(--paper, #fff); border-color: var(--ink); }
.op-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.op-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.op-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.op-top h4 { margin: 0; }
.op-reasons { margin: 8px 0 0; padding-left: 1.1em; font-size: .9rem; color: var(--muted); }
.op-actions { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.cp-warm { margin-top: 14px; }
.cp-vouch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.cp-vouch .hint { margin: 0; flex: 1 1 220px; }

/* Counterparts panel (counterparts-ui.js). It shipped without styles; these
   give it the list-and-detail layout its markup describes. 17 Oct 2026. */
.cp-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.cp-stat { flex: 1 1 90px; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.cp-stat .n { font-family: var(--display, inherit); font-size: 1.4rem; font-weight: 700; line-height: 1.1; }
.cp-stat .l { font-size: .78rem; color: var(--muted); }
.cp-layout { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 16px; align-items: start; }
.cp-list { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cp-list-head { padding: 8px 12px; font-size: .78rem; color: var(--muted); border-bottom: 1px solid var(--line); }
.cp-item { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; background: transparent; border: 0;
  border-bottom: 1px solid var(--line); padding: 10px 12px; font: inherit; color: inherit; cursor: pointer; }
.cp-item:last-child { border-bottom: 0; }
.cp-item:hover { background: var(--porcelain, #f6f6f7); }
.cp-item[aria-selected="true"] { background: var(--side-a-soft); box-shadow: inset 3px 0 0 var(--side-a); }
.cp-item .avatar { width: 34px; height: 34px; flex: none; font-size: .8rem; }
.cp-body { min-width: 0; }
.cp-name { font-weight: 600; display: flex; align-items: center; gap: 6px; }
.cp-sub { font-size: .82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-meta { font-size: .76rem; margin-top: 3px; }
.cp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--side-a); display: inline-block; }
.cp-detail { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; min-width: 0; }
.cp-hero-banner { height: 64px; background: linear-gradient(120deg, var(--accent, var(--side-a)), var(--side-b)); background-size: cover; background-position: center; }
.cp-hero-id { display: flex; gap: 12px; align-items: flex-start; padding: 8px 20px 0; }
.cp-hero-id .avatar { width: 56px; height: 56px; border: 3px solid var(--card); margin-top: -36px; }
.cp-hero-id h3 { margin: 0; }
.cp-hero-id .sub { font-size: .88rem; color: var(--muted); }
.cp-pairing { padding: 10px 20px 0; font-size: .86rem; color: var(--muted); }
.cp-tabs { display: flex; gap: 4px; padding: 12px 20px 0; border-bottom: 1px solid var(--line); }
.cp-tab { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 8px 10px; font: inherit; font-size: .9rem; color: var(--muted); cursor: pointer; }
.cp-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--side-a); font-weight: 600; }
.badge-count { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px; border-radius: 999px; background: var(--side-a); color: #fff; font-size: .72rem; text-align: center; }
.cp-pane { padding: 16px 20px 20px; }
.cp-facts { display: grid; gap: 6px; margin-bottom: 14px; }
.cp-fact { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; font-size: .92rem; }
.cp-fact .fl { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; }
.cp-empty { color: var(--muted); font-size: .9rem; }
.cp-chat { overflow: auto; }
.cp-compose { display: flex; gap: 8px; margin-top: 10px; }
.cp-compose input { flex: 1; }
@media (max-width: 760px) {
  .cp-layout { grid-template-columns: minmax(0, 1fr); }
  .cp-fact { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
.photo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* Files in a conversation (attachments-ui.js) */
.thread-files { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
.files-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.files-head .k { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.file-pick { cursor: pointer; }
.file-list { list-style: none; margin: 8px 0 0; padding: 0; }
.file-list li { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; overflow-wrap: anywhere; }
/* Reputation from behaviour (reputation-ui.js) */
.rep { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 8px 0; font-size: .86rem; }
.rep-badge { background: var(--side-a); color: #fff; border-radius: 999px; padding: 1px 9px; font-size: .74rem; font-weight: 600; }
.rep-lines { color: var(--ink); }
.rep-note { flex-basis: 100%; color: var(--muted); font-size: .76rem; }
/* Introductions members make (Phase 8.1) */
.intro-by { border-left: 3px solid var(--side-b); padding: 6px 10px; margin: 8px 0; font-size: .9rem; background: var(--side-b-soft); border-radius: 0 8px 8px 0; }
.intro-by q { display: block; margin-top: 2px; color: var(--ink); }
/* Deal room (dealroom-ui.js), member introductions (intro-ui.js), live rooms */
.deal-sec { margin-bottom: 20px; }
.deal-sec h4 { margin: 0 0 4px; }
.dr-notes { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.dr-note { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; }
.dr-meta { font-size: .76rem; color: var(--muted); }
.dr-body { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px; }
.dr-actions { display: flex; gap: 10px; margin-top: 4px; }
.dr-edit { width: 100%; }
.dr-timeline { list-style: none; margin: 8px 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); }
.dr-timeline li { position: relative; padding: 4px 0 4px 8px; font-size: .9rem; }
.dr-timeline li::before { content: ""; position: absolute; left: -20px; top: 11px; width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.dr-timeline li[data-kind="matched"]::before, .dr-timeline li[data-kind="meeting_held"]::before { background: var(--side-a); }
.dr-when { display: inline-block; min-width: 9.5em; color: var(--muted); font-size: .78rem; margin-right: 6px; }
.cp-introduce { margin-top: 14px; }
.intro-form { margin-top: 10px; }
.made-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.made-status { font-size: .76rem; margin-left: 6px; color: var(--muted); }
.made-status[data-s="connected"] { color: var(--side-a); font-weight: 600; }
.room-attendees { margin-top: 10px; }
.room-attendees summary { cursor: pointer; font-size: .9rem; }
/* This device: install and push (pwa.js) */
.device-push { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px; }
.dp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.crm-export { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.crm-export-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.crm-export-row .k { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-right: 4px; }

/* ===================== Sidebar navigation (sidenav.js, 19 Oct 2026) =====================
   Computers ≥ 900px: fixed sidebar, collapsible to an icon rail.
   Phones: bottom bar + "More" drawer. The tab bar stays in the page for
   keyboard and screen-reader users of older flows, but is hidden while the
   sidebar is on screen (it would be the same list twice). */
:root { --sn-w: 252px; --sn-rail: 68px; }
.sidenav, .sn-bar, .sn-drawer { display: none; }

.sn-icon { flex: none; transform-origin: 50% 50%; }
.sn-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (min-width: 900px) {
  body.has-sidenav .sidenav { display: flex; }
  body.has-sidenav .app-shell { padding-left: var(--sn-w); transition: padding-left .2s ease; }
  body.has-sidenav.sidenav-collapsed .app-shell { padding-left: var(--sn-rail); }
  body.has-sidenav .dashnav { display: none; }
  body.has-sidenav .app-top .wordmark { visibility: hidden; }
}
.sidenav {
  position: fixed; inset: 0 auto 0 0; z-index: 70; width: var(--sn-w);
  flex-direction: column; background: #fff; border-right: 1px solid var(--line);
  transition: width .2s ease;
}
.sidenav.collapsed { width: var(--sn-rail); }
.sn-brand { display: flex; align-items: center; gap: 10px; padding: 14px 20px; font-family: var(--display);
  font-weight: 700; font-size: 1.05rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.sn-brand img { flex: none; border-radius: 50%; }
.sn-scroll { flex: 1; overflow-y: auto; padding: 10px 10px 16px; scrollbar-width: thin; }
.sn-group { margin-bottom: 8px; }
.sn-section, .sn-item, .sn-collapse {
  display: flex; align-items: center; gap: 11px; width: 100%; min-height: 36px; padding: 7px 10px;
  border: 0; border-radius: 8px; background: none; font: inherit; color: var(--ink-2, #1a1a1e);
  text-decoration: none; cursor: pointer; text-align: left; position: relative;
}
.sn-section { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.sn-section .sn-icon { width: 16px; height: 16px; }
.sn-section.is-active { color: var(--side-a); }
.sn-items { list-style: none; margin: 0; padding: 0; }
.sn-item { font-size: .9rem; }
.sn-item:hover, .sn-section:hover, .sn-collapse:hover { background: var(--porcelain); }
.sn-item.is-current { background: var(--side-a-soft); color: var(--ink); font-weight: 600; }
.sn-item.is-current::before { content: ""; position: absolute; left: -10px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--side-a); }
.sn-item.is-current .sn-icon { color: var(--side-a); }
.sn-item:focus-visible, .sn-section:focus-visible, .sn-collapse:focus-visible, .sn-bar-btn:focus-visible, .sn-brand:focus-visible { outline: 2px solid var(--side-a); outline-offset: -2px; }
.sn-badge { margin-left: auto; min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--side-a); color: #fff;
  font-size: .7rem; font-weight: 700; line-height: 18px; text-align: center; letter-spacing: 0; }
.sn-collapse { border-top: 1px solid var(--line); border-radius: 0; padding: 12px 20px; color: var(--muted); font-size: .85rem; }
.sn-collapse .sn-icon { transition: transform .2s ease; }

/* Collapsed rail: icons only; the section headings become thin dividers. */
.sidenav.collapsed .sn-label, .sidenav.collapsed .sn-badge { display: none; }
.sidenav.collapsed .sn-brand, .sidenav.collapsed .sn-collapse { justify-content: center; padding-left: 0; padding-right: 0; }
.sidenav.collapsed .sn-section { justify-content: center; min-height: 10px; padding: 4px 0; margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0; }
.sidenav.collapsed .sn-section .sn-icon { display: none; }
.sidenav.collapsed .sn-item { justify-content: center; padding: 8px 0; }
.sidenav.collapsed .sn-item.is-current::before { left: -10px; }
.sidenav.collapsed .sn-collapse .sn-icon { transform: rotate(180deg); }
.sidenav.collapsed .sn-group:has(.sn-badge) .sn-section::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--side-a); }

/* ---- phones ---- */
@media (max-width: 899px) {
  body.has-sidenav .sn-bar { display: flex; }
  body.has-sidenav .dashnav { display: none; }
  body.has-sidenav .app-main { padding-bottom: 96px; }
  body.has-sidenav { --badge-clearance: 66px; }
  body.has-sidenav .sn-drawer:not([hidden]) { display: block; }
}
.sn-bar { position: fixed; inset: auto 0 0 0; z-index: 75; background: #fff; border-top: 1px solid var(--line);
  padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); justify-content: space-around; }
.sn-bar-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border: 0;
  background: none; font: inherit; font-size: .7rem; color: var(--muted); cursor: pointer; position: relative; border-radius: 10px; }
.sn-bar-btn.is-active { color: var(--side-a); font-weight: 600; }
.sn-bar-badge { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--side-a); color: #fff; font-size: .62rem; line-height: 16px; font-weight: 700; }
.sn-drawer { position: fixed; inset: 0; z-index: 280; background: rgba(11, 11, 13, 0); transition: background .2s ease; }
.sn-drawer.open { background: rgba(11, 11, 13, .5); }
.sn-drawer-panel { position: absolute; inset: auto 0 0 0; max-height: 82vh; overflow-y: auto; background: #fff;
  border-radius: 16px 16px 0 0; padding: 8px 10px calc(16px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .22s ease; }
.sn-drawer.open .sn-drawer-panel { transform: none; }
.sn-drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 10px 6px; }

/* ---- icon motion: once when a destination becomes current, and on hover ---- */
@keyframes sn-ring   { 0%,100% { transform: rotate(0) } 20% { transform: rotate(14deg) } 40% { transform: rotate(-12deg) } 60% { transform: rotate(8deg) } 80% { transform: rotate(-4deg) } }
@keyframes sn-pulse  { 0%,100% { transform: scale(1) } 45% { transform: scale(1.18) } }
@keyframes sn-spin   { from { transform: rotate(0) } to { transform: rotate(180deg) } }
@keyframes sn-bob    { 0%,100% { transform: translateY(0) } 45% { transform: translateY(-2.5px) } }
@keyframes sn-shake  { 0%,100% { transform: translateX(0) } 25% { transform: translateX(-1.8px) } 75% { transform: translateX(1.8px) } }
@keyframes sn-flip   { 0%,100% { transform: perspective(40px) rotateX(0) } 50% { transform: perspective(40px) rotateX(55deg) } }
@keyframes sn-blink  { 0%,100% { transform: scaleY(1) } 45% { transform: scaleY(.15) } }
@keyframes sn-tick   { 0%,100% { transform: rotate(0) } 50% { transform: rotate(-16deg) } }
:is(.sn-item, .sn-section, .sn-bar-btn):is(:hover, :focus-visible, .is-current, .is-active) .sn-icon[data-anim] {
  animation: .55s ease-out 1 both; }
:is(.sn-item, .sn-section, .sn-bar-btn):is(:hover, :focus-visible, .is-current, .is-active) .sn-icon[data-anim="ring"]  { animation-name: sn-ring;  transform-origin: 50% 10%; }
:is(.sn-item, .sn-section, .sn-bar-btn):is(:hover, :focus-visible, .is-current, .is-active) .sn-icon[data-anim="pulse"] { animation-name: sn-pulse; }
:is(.sn-item, .sn-section, .sn-bar-btn):is(:hover, :focus-visible, .is-current, .is-active) .sn-icon[data-anim="spin"]  { animation-name: sn-spin; }
:is(.sn-item, .sn-section, .sn-bar-btn):is(:hover, :focus-visible, .is-current, .is-active) .sn-icon[data-anim="bob"]   { animation-name: sn-bob; }
:is(.sn-item, .sn-section, .sn-bar-btn):is(:hover, :focus-visible, .is-current, .is-active) .sn-icon[data-anim="shake"] { animation-name: sn-shake; }
:is(.sn-item, .sn-section, .sn-bar-btn):is(:hover, :focus-visible, .is-current, .is-active) .sn-icon[data-anim="flip"]  { animation-name: sn-flip; }
:is(.sn-item, .sn-section, .sn-bar-btn):is(:hover, :focus-visible, .is-current, .is-active) .sn-icon[data-anim="blink"] { animation-name: sn-blink; }
:is(.sn-item, .sn-section, .sn-bar-btn):is(:hover, :focus-visible, .is-current, .is-active) .sn-icon[data-anim="tick"]  { animation-name: sn-tick; }
@media (prefers-reduced-motion: reduce) {
  .sidenav, .sn-drawer, .sn-drawer-panel, body.has-sidenav .app-shell, .sn-collapse .sn-icon { transition: none !important; }
  .sn-icon { animation: none !important; }
}

#cand-list .respond-ok { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: #fff7df;
  border-left: 3px solid var(--side-b); font-weight: 600; animation: pp-rise .4s ease both; }
/* ---------- out of introductions: plans pop-up (owner, 20 Oct 2026) ---------- */
.plans-pop { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; }
.pp-backdrop { position: absolute; inset: 0; background: rgba(8, 8, 11, .62); backdrop-filter: blur(3px);
  animation: pp-fade .25s ease both; }
.plans-pop .pp-card { position: relative; width: min(860px, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
  margin: 0; min-height: 0; animation: pp-pop .5s cubic-bezier(.18, 1.25, .4, 1) both; }
.plans-pop.closing .pp-backdrop { animation: pp-fade .2s ease reverse both; }
.plans-pop.closing .pp-card { animation: pp-out .2s ease both; }
@keyframes pp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pp-pop { 0% { opacity: 0; transform: translateY(28px) scale(.86); } 100% { opacity: 1; transform: none; } }
@keyframes pp-out { to { opacity: 0; transform: translateY(12px) scale(.94); } }
.pp-x { position: absolute; top: 14px; right: 16px; z-index: 2; background: none; border: none; color: #9a9aa5;
  font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.pp-x:hover { color: #fff; background: #23232a; }
.plans-pop .intake-top { padding-right: 36px; }
.pp-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pp-plan { position: relative; background: #141418; border: 1.5px solid #2f2f37; border-radius: 16px;
  padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 6px;
  animation: pp-rise .5s cubic-bezier(.2, .8, .2, 1) both; }
.pp-plan:nth-child(2) { animation-delay: .08s; } .pp-plan:nth-child(3) { animation-delay: .16s; }
@keyframes pp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.pp-plan.best { border-color: var(--side-a); box-shadow: 0 18px 40px -22px rgba(216, 40, 63, .8); }
.pp-plan.current { opacity: .75; }
.pp-plan h3 { margin: 0; color: #fff; font: 800 1.15rem/1.2 'Bricolage Grotesque', system-ui, sans-serif; }
.pp-price { margin: 0; color: #b9b9c2; font-size: .9rem; }
.pp-price b { color: #fff; font-size: 1.6rem; margin-right: 2px; }
.pp-plan ul { list-style: none; margin: 6px 0 12px; padding: 0; color: #c9c9d2; font-size: .9rem; flex: 1; }
.pp-plan li { padding: 3px 0 3px 18px; position: relative; }
.pp-plan li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 7px; height: 7px; border-radius: 50%;
  background: var(--side-b-bright); }
.pp-plan .btn { text-align: center; }
.pp-badge { position: absolute; top: -11px; left: 16px; background: linear-gradient(135deg, var(--side-a), #a51c30);
  color: #fff; font: 600 .7rem/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 9px; border-radius: 999px; }
.pp-current { font: 500 .78rem/1 'IBM Plex Mono', ui-monospace, monospace; color: #9a9aa5; text-transform: uppercase;
  letter-spacing: .1em; padding: 10px 0; }
.plans-pop .pp-later { color: #b9b9c2; }
.plans-pop .pp-later:hover { color: var(--side-b-bright); }
#cand-list .locked { cursor: pointer; }
@media (max-width: 720px) {
  .pp-plans { grid-template-columns: 1fr; }
  .plans-pop .pp-card { padding: 22px 18px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-backdrop, .plans-pop .pp-card, .pp-plan { animation: none; }
}

/* ---------- match + message banner, unread, call links (owner, 21 Oct 2026) ---------- */
.top-banner { position: fixed; top: 12px; left: 50%; z-index: 950; width: min(640px, calc(100% - 32px));
  transform: translate(-50%, -140%); opacity: 0; pointer-events: none;
  transition: transform .5s cubic-bezier(.18, 1.25, .4, 1), opacity .3s ease; }
.top-banner.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.top-banner.leaving { transform: translate(-50%, -140%); opacity: 0; transition-duration: .3s; }
.tb-card { position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; padding: 16px 16px 16px 22px;
  color: #f4f4f6; border: 1px solid #2a2a31; border-radius: 18px;
  background: radial-gradient(80% 140% at 100% 0%, rgba(245, 200, 66, .16), transparent 60%),
              radial-gradient(80% 140% at 0% 0%, rgba(216, 40, 63, .3), transparent 55%), var(--ink);
  box-shadow: 0 24px 60px -24px rgba(216, 40, 63, .6); }
.tb-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, var(--side-a), var(--side-b-bright)); }
.tb-text { flex: 1; min-width: 0; }
.tb-kicker { margin: 0 0 4px; font: 500 .72rem/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .14em;
  text-transform: uppercase; color: var(--side-b-bright); }
.tb-title { margin: 0; font: 800 1.08rem/1.25 'Bricolage Grotesque', system-ui, sans-serif; color: #fff; }
.tb-body { margin: 4px 0 0; color: #c9c9d2; font-size: .9rem; overflow-wrap: anywhere; }
.top-banner[data-kind="message"] .tb-body { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tb-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.tb-x { background: none; border: none; color: #9a9aa5; font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.tb-x:hover { color: #fff; background: #23232a; }
.top-banner[data-kind="match"] .tb-card::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .09) 45%, transparent 60%);
  transform: translateX(-100%); animation: tb-sheen 1.4s .5s ease both; }
@keyframes tb-sheen { to { transform: translateX(100%); } }
@media (max-width: 560px) {
  .tb-card { flex-wrap: wrap; }
  .tb-actions { width: 100%; justify-content: space-between; }
}
.badge-count.unread { background: var(--side-a); font-weight: 700; }
.cp-new { font: 600 .62rem/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase;
  color: var(--side-a); border: 1px solid currentColor; border-radius: 999px; padding: 3px 6px; }
.sn-item .sn-item-badge { margin-left: auto; }
.slot-link { margin: 0 0 14px; }
.slot-link input { width: 100%; }
.slot-link .hint { font-weight: 400; margin-left: 6px; }
.mc-link { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.mc-link input { flex: 1; min-width: 200px; }
.mc-link [data-link-msg] { flex-basis: 100%; margin: 0; }
.mc-link-url { color: var(--muted); font: 500 .78rem/1.3 'IBM Plex Mono', ui-monospace, monospace; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
  .top-banner, .top-banner.leaving { transition: opacity .2s ease; transform: translate(-50%, 0); }
  .top-banner:not(.show) { transform: translate(-50%, -140%); }
  .top-banner[data-kind="match"] .tb-card::after { animation: none; }
}

/* ---------- connections, "already said yes", required call link (owner, 22 Oct 2026) ---------- */
.conn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 12px 0; }
.conn-card { border: 1.5px solid var(--line, #e6e6ea); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 8px; background: #fff; }
.conn-card.on { border-color: var(--side-a); box-shadow: 0 10px 26px -18px rgba(216, 40, 63, .55); }
.conn-head { display: flex; align-items: center; gap: 10px; }
.conn-head h4 { margin: 0; font-size: 1rem; }
.conn-sub { color: var(--muted); font-size: .8rem; }
.conn-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; color: #fff; flex-shrink: 0; }
.conn-icon[data-p="google"] { background: #4285f4; }
.conn-icon[data-p="microsoft"] { background: #0f6cbd; }
.conn-icon[data-p="zoom"] { background: #0b5cff; }
.conn-state { margin-left: auto; font: 600 .68rem/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase;
  color: var(--side-a); border: 1px solid currentColor; border-radius: 999px; padding: 4px 7px; }
.conn-does { margin: 0; font-size: .9rem; }
.conn-sees { margin: 0; font-size: .82rem; color: var(--muted); flex: 1; }
.conn-who { margin: 0; font: 500 .8rem/1.3 'IBM Plex Mono', ui-monospace, monospace; overflow-wrap: anywhere; }
.conn-card .btn { align-self: flex-start; }
.cand.they-said-yes { border-color: var(--side-b); box-shadow: 0 14px 32px -22px rgba(245, 200, 66, .9); }
.yes-flag { margin: -4px 0 12px; padding: 10px 12px; border-radius: 10px; background: #fff7df; border-left: 3px solid var(--side-b); font-size: .9rem; }
.yes-flag b { color: #8a5a00; }
fieldset.slot-link { border: 0; padding: 0; }
fieldset.slot-link legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.link-make { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.link-opt { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--line, #e6e6ea); border-radius: 999px; padding: 7px 12px; cursor: pointer; font-size: .88rem; }
.link-opt:has(input:checked) { border-color: var(--side-a); background: #fff1f3; }

/* ---------- referrals, web search backup, billing portal (owner, 22 Oct 2026) ---------- */
.ref-card { border: 1.5px solid var(--side-b); border-radius: 14px; padding: 16px; margin-bottom: 18px;
  background: linear-gradient(135deg, #fffaf0, #fff); }
.ref-kicker { margin: 0; font: 500 .72rem/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: #8a5a00; }
.ref-reward { margin: 6px 0 12px; font-size: 1rem; }
.ref-link { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ref-link input { flex: 1; min-width: 220px; font: 500 .9rem/1.2 'IBM Plex Mono', ui-monospace, monospace; }
.ref-stats { display: flex; flex-wrap: wrap; gap: 16px; margin: 12px 0 4px; font-size: .9rem; color: var(--muted); }
.ref-stats b { color: var(--ink, #111); font-size: 1.05rem; }
.web-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.web-bar select { max-width: 100%; }
.web-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.web-item { display: flex; gap: 12px; justify-content: space-between; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.web-item.saved { border-color: var(--side-b); background: #fffaf0; }
.web-main { min-width: 0; }
.web-title { font-weight: 700; color: var(--ink, #111); }
.web-domain { display: block; color: var(--muted); font: 500 .78rem/1.4 'IBM Plex Mono', ui-monospace, monospace; }
.web-snip { margin: 6px 0 0; font-size: .9rem; color: #444; overflow-wrap: anywhere; }
.web-act { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex-shrink: 0; }
.web-saved { font: 600 .7rem/1 'IBM Plex Mono', ui-monospace, monospace; text-transform: uppercase; color: #8a5a00; }
.gap-web { margin: 10px 0 12px; padding: 12px; border-radius: 10px; background: #f6f7fb; }
.portal-row { margin-top: 14px; }
@media (max-width: 560px) { .web-item { flex-direction: column; } .web-act { flex-direction: row; align-items: center; } }

/* ---------- shareable intent pages, founding cohorts (owner, 22 Oct 2026) ---------- */
.share-toggle { margin-left: 10px; }
.share-box, .cohort-body { border: 1.5px solid var(--side-b); border-radius: 14px; padding: 14px 16px; margin: 8px 0 14px; background: #fffaf0; }
.share-box textarea, .cohort-body textarea { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.share-note { margin: 0 0 10px; font-size: .9rem; }
.share-actions { display: flex; gap: 10px; align-items: center; margin: 8px 0; }
.share-link { margin-top: 8px; }
.cohort-box { margin-top: 12px; }
.cohort-box > summary { cursor: pointer; font-weight: 700; }

/* Programmes (owner, 31 Oct 2026; 12.1–12.3): the member's card, the join notice, the workspace. */
.programme-box { margin-top: 12px; }
.programme-box > summary { cursor: pointer; font-weight: 700; }
.programme-body { border: 1.5px solid var(--side-a); border-radius: 14px; padding: 14px 16px; margin: 8px 0 14px; background: #f5f9ff; }
.programme-body h5 { margin: 14px 0 4px; font-size: .95rem; }
/* Mentors and peers (12.7): topic chips and request lists. */
.mt-topics { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.mt-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font-size: .88rem; background: #fff; cursor: pointer; }
.mt-chip input { margin: 0; }
.mt-list { list-style: none; padding: 0; margin: 6px 0 10px; }
.mt-list li { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.mt-list li p { margin: 2px 0; }
.mt-list li > .btn-quiet, .mt-list li > .mt-badge, .mt-list li > .cand-actions { align-self: flex-start; }
.mt-ask { margin-top: 6px; }
.mt-ask textarea { width: 100%; }
/* Events (12.8): door code, who's here, and the organiser's door screen. */
.ev-door { margin-top: 6px; }
.ev-code { width: 140px; text-transform: uppercase; letter-spacing: .15em; font-family: var(--mono, monospace); }
.ev-people { list-style: none; padding: 0; margin: 6px 0; }
.ev-people li { padding: 4px 0; }
/* Connections (12.9). */
.cx-events { border: 0; padding: 0; margin: 8px 0; }
.cx-events legend { font-weight: 700; margin-bottom: 4px; }
.firm-form .mt-chip { display: inline-flex; font-weight: 400; margin: 0; }
.firm-form .mt-chip input { width: auto; margin: 0; }
.cx-steps { padding-left: 18px; }
.cx-steps li { margin: 6px 0; }
.cx-url { word-break: break-all; }
.firm-form .cx-id, .cx-id { width: 320px; max-width: 100%; font-family: var(--mono, monospace); }
.ev-codeview { font-family: var(--mono, monospace); letter-spacing: .15em; font-size: 1.2rem; }
.ev-screen { position: fixed; inset: 0; z-index: 1000; background: #0b0b0e; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; }
.ev-screen .ev-big { font-size: clamp(3rem, 16vw, 10rem); font-weight: 800; letter-spacing: .12em; font-family: var(--mono, monospace); }
.ev-screen p { font-size: clamp(1rem, 3vw, 1.6rem); margin: 0; max-width: 40ch; }
.ev-screen button { margin-top: 12px; color: #fff; border-color: rgba(255,255,255,.6); background: transparent; }
/* A second line under a row's name (attendees, passes). */
.an-funnel th .hint { display: block; font-weight: 400; }
.mt-badge { display: inline-block; font-size: .75rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: #e7f1fb; color: var(--side-a); }
.pm-outcomes { list-style: none; padding: 0; margin: 6px 0 10px; }
.pm-outcomes li { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.programme-link { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.room-notice { border: 1px solid var(--line); border-left: 3px solid var(--side-a); border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; background: #fff; font-size: .92rem; }
.pg-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-bottom: 4px; border: 1px solid rgba(0,0,0,.15); }
.pg-list, .pg-stalled, .pg-requests { list-style: none; padding: 0; margin: 0; }
/* Seats page (12.6): a quantity and its button on one line. */
.pg-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.firm-form .pg-inline input { width: 120px; flex: 0 0 auto; }
.firm-form .pg-inline select { width: auto; flex: 0 1 auto; }
.pg-list li, .pg-stalled li, .pg-requests li { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.pg-requests .deal-actions { margin-top: 6px; }
.pg-stats { margin: 6px 0 16px; }
.pg-table-wrap { overflow-x: auto; max-width: 100%; position: relative; }   /* relative: keeps the .sr-only header cells inside the scroller */
.pg-members th .hint, .pg-members td .hint { display: block; font-weight: 400; }
.pg-modes { border: 0; padding: 0; margin: 10px 0; display: grid; gap: 6px; }
.pg-modes legend { font-weight: 600; margin-bottom: 4px; }
.pg-color-row { display: flex; gap: 8px; align-items: center; }
.pg-color-row input[type="color"] { width: 44px; height: 38px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.pg-reviews li { display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px; align-items: start; }
.pg-rev-side { display: flex; flex-direction: column; gap: 2px; }
.kicker-sm { font: 500 .7rem/1 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
@media (max-width: 700px) { .pg-reviews li { grid-template-columns: 1fr; } }
#pg-adviser h3 { margin: 18px 0 4px; font-size: 1rem; }
#pg-adviser textarea { width: 100%; }
.represented-line { margin: 8px 0; font-size: .9rem; }
.represented-line .hint { display: block; font-weight: 400; }
.firm-card.dd-room { max-width: 900px; }
.dd-teaser { margin-top: 14px; }
.dd-profile { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .88rem; }
.dd-note { width: 100%; margin: 8px 0 4px; }
.is-confirming { color: var(--red, #d8283f); font-weight: 700; }

/* Three-step intents (27 Oct 2026): identities grouped, purposes with their position underneath. */
.chip-group { margin: 0 0 14px; }
.chip-group-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 6px; }
.purpose-chip { display: inline-flex; flex-direction: column; align-items: flex-start; text-align: left; }
.chip-sub { font-size: .78rem; font-weight: 400; opacity: .75; margin-top: 2px; }

/* "For investors" stays in the menu on phones too (27 Oct 2026). */
.nav-investors { font-weight: 600; }

/* Investors page: the firm account section. */
.cap-firm { border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; margin: 28px 0; background: #fff; }
.cap-firm-list { padding-left: 18px; line-height: 1.6; margin: 0 0 16px; }
.cap-firm-list li { margin-bottom: 6px; }

/* ---- Firm portal (the firm page) ---- */
.firm-body { background: #f6f6f8; min-height: 100vh; }
.firm-top { background: #0d0d10; color: #fff; }
.firm-top-inner { display: flex; align-items: center; gap: 16px; padding: 14px 16px; }
.firm-top .wordmark { color: #fff; }
.firm-tag { font-weight: 500; color: var(--amber, #f5c842); margin-left: 4px; }
.firm-top-links { margin-left: auto; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.firm-top-links a, .firm-top-links .btn-quiet { color: #d6d6de; font-size: .9rem; }
.firm-main { padding: 28px 16px 64px; }
.firm-card { max-width: 560px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px; }
.firm-card label, .firm-form label { display: block; font-weight: 600; margin: 12px 0 6px; }
.firm-card input, .firm-form input, .firm-form select, .firm-form textarea { width: 100%; font: inherit; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.firm-card .btn, .firm-form > .btn { margin-top: 14px; }
.firm-shell { display: grid; grid-template-columns: 220px 1fr; gap: 24px; max-width: 1240px; margin: 0 auto; }
.firm-nav { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 16px; align-self: start; }
.firm-nav a { padding: 9px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; display: flex; justify-content: space-between; align-items: center; }
.firm-nav a:hover { background: #ececf0; }
.firm-nav a.is-current { background: var(--ink); color: #fff; }
.firm-id { padding: 4px 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.firm-id span { color: var(--muted); font-size: .88rem; }
.firm-badge { display: inline-block; font-size: .75rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #e5f4e4; color: #1d6b2a; margin-right: 6px; }
.firm-badge.unverified { background: #f0efec; color: var(--muted); }
.firm-page { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px; min-height: 300px; }
.firm-page:focus { outline: none; }
.firm-waiting { display: inline-block; margin: 6px 0 16px; font-weight: 600; }
.deal-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.deal-col { background: #f6f6f8; border-radius: 12px; padding: 10px; min-height: 120px; }
.deal-col h3 { font-size: .9rem; margin: 2px 4px 10px; display: flex; justify-content: space-between; }
.deal-col h3 span { color: var(--muted); font-weight: 500; }
.deal-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 6px; }
.deal-card p { margin: 0; font-size: .88rem; }
.deal-card select, .deal-card input { font: inherit; font-size: .85rem; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; }
.deal-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.firm-intro, .firm-mandate { border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-bottom: 14px; }
.firm-intro h3, .firm-mandate h3 { margin: 6px 0; font-size: 1.05rem; }
.firm-intro-head { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.firm-reasons { margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: .9rem; }
.chip-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chip-list li { border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-size: .82rem; }
.firm-new { margin-top: 18px; }
.firm-new summary { font-weight: 700; cursor: pointer; }
.mandate-form fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px 14px; margin: 14px 0; }
.mandate-form legend { font-weight: 700; padding: 0 6px; }
.check-row { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.check { display: inline-flex; gap: 6px; align-items: center; font-weight: 400 !important; margin: 0 !important; }
.check input { width: auto !important; }
@media (max-width: 860px) {
  .firm-shell { grid-template-columns: 1fr; }
  .firm-nav { position: static; flex-direction: row; overflow-x: auto; }
  .firm-id { display: none; }
}
.firm-card .kicker { font: 500 .75rem/1 'IBM Plex Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--side-a); margin: 0 0 10px; }
.firm-card h1 { font-size: 1.6rem; margin: 0 0 10px; }
.firm-card .lead { color: var(--muted); line-height: 1.55; margin: 0 0 8px; }
.firm-pages { min-width: 0; }               /* lets the deal board scroll inside the page */
.firm-id .firm-badge { align-self: flex-start; }
.dc-export { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 14px; }

/* Screening: the fit line and profile chips (30 Oct 2026). */
.fit-line { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 4px; font-size: .85rem; }
.fit-k { font-weight: 700; margin-right: 2px; }
.fit-item { border-radius: 999px; padding: 2px 9px; }
.fit-ok { background: #e5f4e4; color: #1d6b2a; }
.fit-no { background: #fbebeb; color: #9b1c1c; }
.screen-profile { margin: 6px 0; }
.nda-note { margin: 6px 0; }
.profile-form { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; align-items: center; }
.profile-form label { font-weight: 600; }
.profile-form select, .profile-form input { width: 100%; font: inherit; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line); }
@media (max-width: 640px) { .profile-form { grid-template-columns: 1fr; } }
.confid-opts { margin: 10px 0; display: grid; gap: 8px; }
/* NDA gate and document views in the deal room. */
.nda-gate { border: 1px solid var(--side-b); background: #fffaf0; border-radius: 12px; padding: 12px 14px; margin: 10px 0; }
.nda-text { white-space: pre-wrap; font: inherit; font-size: .85rem; max-height: 260px; overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.doc-views { margin-top: 10px; }
.doc-views ul { padding-left: 18px; font-size: .88rem; }
.screen-profile .hint, .nda-note { margin: 4px 0 8px; }
.screen-profile .chip-list { margin-bottom: 2px; }

/* Firm teams, notes and analytics (31 Oct 2026). */
.firm-join-note { background: #f3f6ff; border: 1px solid #c9d6ff; border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; }
.deal-notes summary { cursor: pointer; font-size: .85rem; }
.deal-note-list { list-style: none; padding: 0; margin: 6px 0; display: flex; flex-direction: column; gap: 6px; }
.deal-note-list li { font-size: .85rem; border-left: 2px solid var(--line); padding-left: 8px; }
.deal-note-list p { margin: 2px 0 0; white-space: pre-wrap; }
.deal-note-new { width: 100%; box-sizing: border-box; font: inherit; font-size: .85rem; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; }
.team-list { list-style: none; padding: 0; margin: 12px 0; }
.team-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.team-who { display: flex; flex-direction: column; flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.team-invite { margin-top: 18px; }
.team-link { width: 100%; box-sizing: border-box; margin: 6px 0; font: inherit; font-size: .85rem; }
.an-window { display: flex; gap: 6px; margin: 8px 0 14px; flex-wrap: wrap; }
.an-window .is-current { font-weight: 600; text-decoration: underline; }
.an-block { margin-bottom: 22px; }
.an-funnel { width: 100%; border-collapse: collapse; font-size: .9rem; }
.an-funnel th, .an-funnel td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.an-funnel td:nth-child(2) { position: relative; width: 50%; }
.an-bar { display: inline-block; height: 10px; background: var(--accent, #3b5bdb); opacity: .35; border-radius: 4px; margin-right: 8px; vertical-align: middle; max-width: calc(100% - 3em); }

/* Verification trust line on introductions (31 Oct 2026). */
.trust-line { margin: 6px 0 0; font-size: .85rem; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.trust-line span { border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; }
.trust-line .trust-co[data-step="registered"], .trust-line .trust-id { border-color: #9cc9a4; background: #eef8f0; }

/* Firm portal Security page: single sign-on, retention, audit log (31 Oct 2026). */
.sec-block { margin: 0 0 28px; padding-top: 6px; border-top: 1px solid var(--line); }
.sec-block h3 { margin: 12px 0 6px; }
.sso-form input[readonly] { background: #f6f6f4; }
.au-wrap { overflow-x: auto; margin-top: 10px; }
.au-table { font-size: .85rem; min-width: 560px; }
.au-table td:nth-child(2) { overflow-wrap: anywhere; }
.firm-nav a[hidden] { display: none; }

/* Co-invest (31 Oct 2026). */
.co-bar { position: relative; height: 8px; border-radius: 4px; background: #ececf0; overflow: hidden; margin: 8px 0 4px; }
.co-bar span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.co-int { background: #c9d6ff; }
.co-adm { background: #3f9b57; }
.co-new .firm-form { margin-bottom: 10px; }
.firm-form fieldset[hidden], .firm-form .mf-co[hidden] { display: none; }

/* Hover explanations (assets/tips.bdc6cdae.js, 31 Oct 2026): one bubble, shown on
   hover and on keyboard focus. Dark on light pages, light on dark ones. */
.tip-bubble { position: fixed; z-index: 2000; max-width: 300px; padding: 8px 11px; border-radius: 9px;
  background: #16161b; color: #fff; font-size: .84rem; line-height: 1.4; font-weight: 400;
  box-shadow: 0 6px 22px rgba(0,0,0,.22); pointer-events: none; text-align: left; }
.tip-bubble[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .tip-bubble:not([hidden]) { animation: tip-in .12s ease-out; } }
@keyframes tip-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }