/* Direction B, "Crisp utility" (design doc section 6): the inner screens of canvas v6 (approved
   2026-10-18). One accent, cobalt, and it means one thing: a human tap (the primary button, the
   your-move pill, the decision outline). White hairline cards; grey panel only for context you read
   and the thread backdrop; dashed = off-platform or closed. Mobile-first: 390 px is the design width. */
:root {
  --bg: #FFFFFF; --ink: #0B0D12; --body: #4B5160; --muted: #5B6170; --line: #E6E9F0; --line-2: #C4C9D4;
  --dash: #A9AFBC; --panel: #F5F7FB; --cobalt: #2442E0; --cobalt-tint: #EEF1FD; --cobalt-soft: #C9D0F7;
  --ring: rgba(36, 66, 224, .18); --halo: rgba(36, 66, 224, .12); --danger: #B3261E; --danger-ink: #8C1D17;
  --danger-tint: #FDF0EF; --dark-body: #C9CEDA; --dark-accent: #8FA2FF;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gutter: 16px;
  /* stroke icons, drawn in currentColor through a mask (CSS images may be data: under the CSP) */
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
  --i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  --i-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
  --i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.5v.01'/%3E%3C/svg%3E");
  --i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16.5v.01'/%3E%3C/svg%3E");
  --i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --i-next: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
  --i-bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3L5 14h6l-1 7 8-11h-6z'/%3E%3C/svg%3E");
  --i-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16v12H4zM4 7l8 6 8-6'/%3E%3C/svg%3E");
  --i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E");
  --i-tag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12l-8 8-9-9V3h8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E");
  --i-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--body);
  font: 400 1rem/1.5 "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow-x: hidden;
}
a { color: var(--cobalt); }
[hidden] { display: none !important; }
/* one masked icon before an element's text: set --ic (and --ic-c for a colour other than the text's) */
.ic::before, .ok::before, .note::before, .err:not(:empty)::before, .waiting::before, .lock::before {
  content: ""; flex: none; width: 16px; height: 16px; margin-top: 3px; background: var(--ic-c, currentColor);
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }

/* ---- the bar. Signed out (landing, O3) it is brand + links; signed in (.app) it is the approved shell:
   brand + account chip, and a full-width two-tab strip under them on a phone (one row on desktop). */
.bar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .25rem 1rem;
  padding: .5rem 1rem; border-bottom: 1px solid var(--line); background: #fff;
}
.brand { font-weight: 800; letter-spacing: -.03em; color: var(--ink); text-decoration: none;
  font-size: 1.25rem; min-height: 44px; display: inline-flex; align-items: center; gap: .28em; }
.brand span { color: var(--cobalt); }
nav { display: flex; flex-wrap: wrap; gap: .25rem; }
nav a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 .75rem; color: var(--ink); text-decoration: none; font-weight: 600; border-radius: 8px; }
nav a[aria-current="page"] { color: var(--cobalt); background: var(--panel); }
#account:empty { display: none; }
.bar.app { position: relative; z-index: 20; display: grid; padding: 0; gap: 0;
  grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand acct" "nav nav"; }
.bar.app .brand { grid-area: brand; height: 56px; padding-left: 16px; justify-self: start; }
.bar.app #account { grid-area: acct; padding-right: 12px; display: flex; align-items: center; }
.bar.app nav { grid-area: nav; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; flex-wrap: nowrap; }
.bar.app nav a { min-height: 48px; gap: 8px; padding: 0 8px; border-radius: 0; color: var(--body); font-weight: 600;
  font-size: 15px; white-space: nowrap; background: none; }
.bar.app nav a[aria-current="page"] { color: var(--ink); font-weight: 700; box-shadow: inset 0 -3px 0 var(--cobalt); }
.bar.app nav a svg { flex: none; }
.bar.app nav a[aria-current="page"] svg { color: var(--cobalt); }
button.acct-chip { min-height: 44px; max-width: 210px; gap: 8px; padding: 0 10px 0 6px; border: 1px solid var(--line);
  border-radius: 99px; background: #fff; color: var(--ink); font-weight: 400; }
.acct-initial { width: 30px; height: 30px; flex: none; border-radius: 99px; display: inline-flex; align-items: center;
  justify-content: center; font-weight: 800; font-size: 14px; background: var(--cobalt-tint); color: var(--cobalt); }
.acct-initial.pro { background: var(--ink); color: #fff; }
.acct-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; min-width: 0; }
.acct-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 128px; }
.acct-role { font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--body); }
.acct-chev { flex: none; color: var(--body); }
.acct-scrim { position: absolute; left: 0; right: 0; top: 100%; height: 100vh; background: rgba(11, 13, 18, .28); z-index: 1; }
.acct-menu { position: absolute; top: 60px; right: 12px; z-index: 2; width: min(290px, calc(100vw - 24px));
  background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 32px rgba(11, 13, 18, .18);
  padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.menu-head { padding: 10px 10px 12px; display: flex; flex-direction: column; gap: 2px; border-bottom: 1px solid var(--line); }
.menu-head .label { margin: 0; }
.menu-email { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.menu-acting { padding: 10px; display: flex; align-items: center; gap: 10px; }
.menu-acting .who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.menu-acting .who b { color: var(--ink); overflow-wrap: anywhere; }
.menu-acting .who span { font-size: 13px; }
.menu-acting > svg { color: var(--cobalt); flex: none; }
a.menu-item { min-height: 48px; display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 0 10px;
  border-radius: 10px; color: var(--ink); font-weight: 600; text-decoration: none; background: none; }
a.menu-item.switch { font-weight: 700; background: var(--panel); }
a.menu-item svg { flex: none; color: var(--body); }
a.menu-item.switch svg { color: var(--ink); }
@media (min-width: 720px) {
  .bar.app { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand nav acct"; column-gap: 32px;
    padding-inline: max(clamp(16px, 4vw, 48px), calc((100% - 1200px) / 2)); min-height: 64px; }
  .bar.app .brand { padding-left: 0; height: 64px; font-size: 21px; }
  .bar.app #account { padding-right: 0; }
  .bar.app nav { display: flex; gap: 4px; }
  .bar.app nav a { min-height: 64px; padding: 0 14px; }
  .acct-text { flex-direction: row; align-items: center; gap: 10px; }
  .acct-name { max-width: 220px; }
  button.acct-chip { max-width: none; }
  .acct-role { border: 1px solid var(--line); border-radius: 99px; padding: 2px 8px; }
  .acct-scrim { background: transparent; }
  .acct-menu { right: max(clamp(16px, 4vw, 48px), calc((100% - 1200px) / 2)); top: 62px; }
}

/* ---- page frame and type */
main { max-width: 46rem; margin: 0 auto; padding: 20px var(--gutter) 32px; }
main:not(:has(> .landing)) { display: flex; flex-direction: column; gap: 16px; font-size: 15px; }
main:not(:has(> .landing)) > * { margin-top: 0; margin-bottom: 0; }
main:has(> .sticky-bar) { padding-bottom: 0; }
@media (min-width: 720px) { :root { --gutter: clamp(16px, 4vw, 48px); } main { padding: 40px var(--gutter) 64px; } }
h1 { color: var(--ink); font-weight: 800; letter-spacing: -.03em; line-height: 1.1;
  font-size: clamp(30px, 1.2rem + 2vw, 40px); margin: .5rem 0 .75rem; overflow-wrap: anywhere; }
h2 { color: var(--ink); font-weight: 800; letter-spacing: -.02em; font-size: 20px; line-height: 1.2; margin: 1.5rem 0 .5rem; }
h3 { color: var(--ink); font-weight: 800; letter-spacing: -.02em; font-size: 17px; line-height: 1.25; margin: 0; }
p { margin: .25rem 0 1rem; }
.mono, .label { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.label { color: var(--body); display: block; margin: 0; }
.muted { color: var(--body); }
.hint { font-size: 13px; color: var(--body); margin: 0; }
.hint.warn { color: var(--danger); font-weight: 600; }
.price { color: var(--ink); font-weight: 800; font-size: 22px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.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; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.title-block { display: flex; flex-direction: column; gap: 10px; }
.title-block h1, .step-head h1 { margin: 0; }
.title-block .pill { align-self: flex-start; }
.title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.title-row h1 { margin: 0; }

/* ---- form fields: a bold sans label over a 48 px field */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field.narrow { max-width: 180px; }
.flabel { color: var(--ink); font-weight: 700; font-size: 14px; display: block; }
input, select, textarea, button, .btn { font: inherit; border-radius: 10px; max-width: 100%; }
input, select, textarea { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--line-2); color: var(--ink);
  background: #fff; }
textarea { min-height: 96px; padding: 12px 14px; resize: vertical; }
#job-text { min-height: 132px; border-radius: 12px; }
input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; min-height: 22px; padding: 0; margin: 2px 0 0;
  accent-color: var(--cobalt); flex: none; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px var(--ring); }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; box-shadow: none; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
/* a money field: '$' then the number, one box */
.money { display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 14px; border: 1px solid var(--line-2);
  border-radius: 10px; background: #fff; min-width: 0; }
.money:focus-within { border-color: var(--cobalt); box-shadow: 0 0 0 3px var(--ring); }
.money .cur { font-weight: 700; color: var(--body); }
.money input { flex: 1 1 auto; min-width: 0; width: auto; min-height: 46px; padding: 0; border: 0; background: transparent;
  font-weight: 700; box-shadow: none; }
.money input:focus { box-shadow: none; }
.money.big { min-height: 56px; }
.money.big .cur, .money.big input { font-weight: 800; font-size: 22px; }
.money.big input { min-height: 54px; font-variant-numeric: tabular-nums; }
.field.narrow .money, .money.narrow { max-width: 200px; }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); font-weight: 600; }
.check > input { margin: 0; }

/* ---- buttons. Primary: cobalt fill, the step that moves the deal. Secondary: ink outline.
   Link: text only (Back, Refresh, Edit, Cancel deal). Danger: red outline, only inside a decision. */
button, .btn { cursor: pointer; min-height: 48px; padding: 0 22px; border: 1px solid var(--ink); background: #fff;
  color: var(--ink); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; line-height: 1.2; text-align: center; }
button.primary, .btn.primary { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
button.primary:disabled { background: var(--cobalt-soft); border-color: var(--cobalt-soft); cursor: progress; }
button.ghost, .btn.ghost { background: #fff; color: var(--ink); border-color: var(--ink); }
button.danger { background: #fff; color: var(--danger); border-color: var(--danger); }
button.link, .btn.link, a.link { min-height: 44px; min-width: 44px; padding: 0 10px; border-color: transparent; background: transparent;
  color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
button.link.quiet { color: var(--body); }
button.back-btn, a.back { align-self: flex-start; min-height: 44px; min-width: 44px; padding: 0 8px 0 0; border: 0;
  background: transparent; color: var(--ink); font-weight: 700; display: inline-flex; align-items: center; gap: 4px;
  text-decoration: none; }
button.refresh { min-height: 44px; padding: 0 10px; border: 0; background: transparent; color: var(--ink); gap: 6px; }
.wide, .stack > button, .stack > .btn { width: 100%; }
button.big, .btn.big { min-height: 52px; font-size: 16px; }
.btn-next::after { content: ""; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--i-arrow) center / contain no-repeat; mask: var(--i-arrow) center / contain no-repeat; }
button.btn-next:disabled::after { display: none; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.row > * { flex: 0 1 auto; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pair > * { width: 100%; padding: 0 4px; font-size: 14px; gap: 6px; }
.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.grid2 { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
@media (max-width: 480px) { .row button, .row .btn { flex: 1 1 8rem; } }
/* a choice chip (C1 services, C2 service list): pressed = ink fill with a check */
button.chip-btn { min-height: 44px; padding: 0 16px; border-radius: 99px; border-color: var(--line-2); background: #fff;
  color: var(--ink); font-weight: 600; gap: 6px; }
button.chip-btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 700; }
button.chip-btn[aria-pressed="true"]::before { content: ""; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* segmented: a grey track, the chosen one a white key */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.seg > button { min-height: 44px; padding: 0 6px; border: 1px solid transparent; border-radius: 9px; background: transparent;
  color: var(--body); font-weight: 600; }
.seg > button[aria-pressed="true"] { background: #fff; border-color: var(--line); color: var(--ink); font-weight: 800;
  box-shadow: 0 1px 2px rgba(11, 13, 18, .08); }
/* the ✓ of a profile row */
button.tick { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; flex: none; border-color: var(--line-2);
  background: #fff; color: var(--dash); }
button.tick.on { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
/* Keep is a checkbox that reads as one: unkept = an empty box on a plain outline; Kept = filled cobalt with a ✓ */
button.keep { min-height: 44px; padding: 0 14px 0 10px; display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--body); border: 1px solid var(--line-2); font-weight: 600; }
button.keep .keep-box { width: 18px; height: 18px; flex: none; border-radius: 4px; border: 2px solid var(--line-2); background: #fff;
  display: inline-flex; align-items: center; justify-content: center; }
button.keep[aria-pressed="true"] { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
button.keep[aria-pressed="true"] .keep-box { border-color: #fff; background: #fff; color: var(--cobalt); }
.stack.tight { gap: 4px; }

/* ---- notices: inline, so screen readers keep role=status / alert */
.ok, .note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; color: var(--ink);
  font-weight: 600; margin: 0; overflow-wrap: anywhere; }
.ok { background: var(--cobalt-tint); --ic: var(--i-check); --ic-c: var(--cobalt); }
.note { border: 1px solid var(--line); font-weight: 400; --ic: var(--i-info); --ic-c: var(--body); }
.err { color: var(--danger); font-weight: 600; }
.err:empty { display: none; }
main:not(:has(> .landing)) .err:not(:empty) { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px;
  border-radius: 12px; background: var(--danger-tint); color: var(--danger-ink); margin: 0; --ic: var(--i-alert); --ic-c: var(--danger); }
.landing .err::before { content: none; }
.ok.inline { padding: 0; background: none; font-weight: 700; }
.lock { display: flex; gap: 8px; align-items: flex-start; --ic: var(--i-lock); }
.waiting { display: flex; gap: 10px; align-items: flex-start; background: var(--panel); border: 1px dashed var(--line-2);
  border-radius: 14px; padding: 12px 16px; color: var(--ink); margin: 0; --ic: var(--i-clock); --ic-c: var(--body); }

/* ---- cards: white with a hairline; context = grey panel; off-platform = dashed; selected = cobalt */
.card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin: .75rem 0;
  overflow-wrap: anywhere; display: flex; flex-direction: column; gap: 10px; }
.card > * { margin-top: 0; margin-bottom: 0; }
.card h3 { margin: 0; }
.card.context { background: var(--panel); }
.card.dashed { border-style: dashed; border-color: var(--dash); }
a.card { text-decoration: none; color: inherit; }
.plain { display: flex; flex-direction: column; gap: 16px; }
.divider { height: 1px; background: var(--line); border: 0; margin: 0; width: 100%; }
.decision { background: #fff; border: 2px solid var(--cobalt); border-radius: 14px; padding: 16px;
  box-shadow: 0 0 0 4px var(--halo); display: flex; flex-direction: column; gap: 12px; }
.decision > * { margin: 0; }
.decision > .who, .decision > .label { color: var(--cobalt); }
.decision .what, .decision h2 { color: var(--ink); font-weight: 800; font-size: 20px; letter-spacing: -.02em; line-height: 1.2; margin: 0; }

/* ---- status pills: whose move it is, by fill and shape as well as colour */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px; flex: none;
  border: 1px solid transparent; font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; white-space: nowrap; line-height: 1; }
.pill::before { content: ""; flex: none; }
.pill.st-move { background: var(--cobalt); color: #fff; }
.pill.st-move::before { width: 6px; height: 6px; border-radius: 99px; background: #fff; }
.pill.st-sent { border-color: var(--cobalt); color: var(--cobalt); }
.pill.st-sent::before { width: 6px; height: 6px; border-radius: 99px; border: 1.5px solid var(--cobalt); }
.pill.st-sent.instant::before { width: 11px; height: 11px; border: 0; background: currentColor;
  -webkit-mask: var(--i-bolt) center / contain no-repeat; mask: var(--i-bolt) center / contain no-repeat; }
.pill.st-wait { background: var(--panel); border-color: var(--line); color: var(--body); }
.pill.st-wait::before { width: 11px; height: 11px; background: currentColor;
  -webkit-mask: var(--i-clock) center / contain no-repeat; mask: var(--i-clock) center / contain no-repeat; }
.pill.st-booked { background: var(--ink); color: #fff; }
.pill.st-done { border-color: var(--ink); color: var(--ink); }
.pill.st-booked::before, .pill.st-done::before { width: 10px; height: 10px; background: currentColor;
  -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; }
.pill.st-closed { border: 1px dashed var(--dash); color: var(--muted); }
.pill.st-closed::before { width: 8px; height: 2px; background: currentColor; }
.pill.dev { border-color: var(--danger); color: var(--danger); font: 700 13px/1 "Manrope", system-ui, sans-serif;
  text-transform: none; letter-spacing: 0; height: auto; min-height: 26px; white-space: normal; }
.pill.dev::before { content: none; }
/* tags: facts about a pro or a field, never a state */
.tag, .badge { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 6px;
  font-size: 12px; font-weight: 600; white-space: nowrap; background: #fff; border: 1px solid var(--line); color: var(--ink); line-height: 1; }
.tag.demo { border-style: dashed; border-color: var(--dash); color: var(--muted); }
.tag.offp { border-style: dashed; border-color: var(--dash); }
.tag.from { background: var(--cobalt-tint); border-color: var(--cobalt-tint); color: var(--cobalt); }
.tag.panel { background: var(--panel); }
.badge { border-color: var(--danger); color: var(--danger); font-weight: 700; }
.badge.need { border-color: var(--cobalt); color: var(--cobalt); }
.badge.instant { border-color: var(--cobalt); background: var(--cobalt); color: #fff; }
.badge.instant::before { content: ""; width: 11px; height: 11px; background: currentColor;
  -webkit-mask: var(--i-bolt) center / contain no-repeat; mask: var(--i-bolt) center / contain no-repeat; }

/* ---- step header: Back, a progress bar, 'Step N of M', the title */
.step-head { display: flex; flex-direction: column; gap: 10px; }
.step-head > * { margin: 0; }
.progress { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.progress span { height: 4px; border-radius: 2px; background: var(--line); }
.progress span.on { background: var(--cobalt); }
.stepn { color: var(--cobalt); margin: 0; }
.back-btn svg, a.back svg, button.refresh svg { flex: none; }
.sticky-bar { position: sticky; bottom: 0; z-index: 5; margin: 8px calc(-1 * var(--gutter)) 0; padding: 12px var(--gutter) 16px;
  background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(11, 13, 18, .06);
  display: flex; flex-direction: column; gap: 8px; }
.sticky-bar > * { margin: 0; }
.sticky-bar button { width: 100%; min-height: 52px; font-size: 16px; }
.sticky-bar .hint { display: flex; gap: 6px; --ic: var(--i-mail); }
/* empty states */
.empty { border: 1px dashed var(--line-2); border-radius: 14px; padding: 28px 20px; display: flex; flex-direction: column;
  align-items: center; gap: 10px; text-align: center; }
.empty > * { margin: 0; }
.empty > svg { color: var(--cobalt); }
.empty-title { color: var(--ink); font-weight: 700; }
.empty-sub { font-size: 14px; }
.empty .btn { min-height: 44px; padding: 0 16px; }

/* ---- C1-C3, setup rows */
.item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.item-head .label { margin: 0; }
.fact-value { color: var(--ink); font-weight: 600; }
.item .fact-value { white-space: pre-line; }
.item.needed { border: 2px solid var(--cobalt); padding: 15px; box-shadow: 0 0 0 4px var(--halo); }
.item.checked { border-color: var(--cobalt); box-shadow: inset 0 0 0 1px var(--cobalt); }
/* C2 'Check the details': each row is its own section. Its label (Service, When, a detail, How soon,
   Budget, ...) reads as the section's title, and a stronger edge sets the sections apart */
.need-row { margin: 12px 0; border-color: var(--line-2); box-shadow: 0 1px 2px rgba(11, 13, 18, .06); }
.need-row .item-head { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.need-row .item-head .label { font-family: inherit; font-size: 16px; font-weight: 800; letter-spacing: -.01em;
  text-transform: none; color: var(--ink); line-height: 1.25; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.field-note { font-size: 13px; color: var(--body); margin: 0; overflow-wrap: anywhere; }
.evidence summary { min-height: 44px; display: flex; align-items: center; min-width: 44px; cursor: pointer; font-size: 13px;
  color: var(--cobalt); font-weight: 600; }
.evidence .quote { margin: 0 0 .4rem; font-size: 13px; font-style: italic; }
.fact .src, .field-note .src, .item .src { font-size: 11px; text-transform: none; letter-spacing: 0; font-style: normal; }
.fact .quote, .field-note .quote { font-size: 13px; font-style: italic; }
.fact { border-top: 1px solid var(--line); padding: 8px 0 0; overflow-wrap: anywhere; }
.about { display: block; color: var(--ink); white-space: pre-line; }
.draft h2 { margin-top: 0; }
.draft[aria-busy="true"] button.primary { opacity: .6; cursor: progress; }
.or { text-align: center; margin: 0; }
.example { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--panel); color: var(--ink); font-weight: 600; }
.fit-price { color: var(--ink); font-weight: 800; flex: none; font-variant-numeric: tabular-nums; }
/* the profile as one list: hairline rows; a row's label + value on the left, Edit and ✓ on the right */
.rowlist { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.rowlist > .card.item { margin: 0; border: 0; border-radius: 0; padding: 12px 12px 12px 16px; gap: 6px; }
.rowlist > .card.item + .card.item { border-top: 1px solid var(--line); }
.rowlist > .card.item.checked { box-shadow: none; }
.rowlist > .card.item.editing { box-shadow: inset 3px 0 0 var(--cobalt); }
.item-main { display: flex; align-items: center; gap: 8px; }
.item-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.item-main > .actions { flex: none; flex-wrap: nowrap; }
.item.stacked .item-main { flex-direction: column; align-items: stretch; }
.item.stacked .item-main > .actions { flex-wrap: wrap; }
.rowlist .chips .chip { min-height: 44px; }
.chip { display: inline-flex; align-items: center; gap: 2px; min-height: 40px; padding: 0 14px; border-radius: 99px;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink); font-weight: 600; }
.chip:has(button) { padding-right: 0; }
button.chip-x { min-width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--body); font-size: 18px; }
/* a chip sizes to its words, also inside a .row on a phone (where .row buttons stretch) */
.row > button.add-chip { flex: 0 0 auto; }
button.add-chip { min-height: 44px; padding: 0 14px; border-radius: 99px; border: 1px dashed var(--dash); gap: 6px; }
button.add-chip::before { content: ""; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--i-plus) center / contain no-repeat; mask: var(--i-plus) center / contain no-repeat; }
/* C3: selectable pro cards; a picked one carries the 2 px cobalt outline */
.check.pro { align-items: flex-start; flex-direction: row; gap: 12px; cursor: pointer; font-weight: 400; color: inherit; }
.check.pro.checked { border-color: var(--cobalt); box-shadow: inset 0 0 0 1px var(--cobalt); }
.pro-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 auto; }
.pro-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pro-top h3 { min-width: 0; }
.pro-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pro-meta:empty { display: none; }
.pro-body .about { color: var(--ink); }
.pro-body .others { font-size: 13px; color: var(--body); }
.prospect-line { color: var(--ink); }
.src-line { font-size: 13px; }
.src-line.site { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; align-self: flex-start; overflow-wrap: anywhere; }
/* O1: the search can take a minute. A spinner that, under reduced motion, is a still ring */
.searching { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 12px; color: var(--ink); min-width: 0; }
.searching-text { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.searching .hint { margin: 0; }
.spinner { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--line);
  border-top-color: var(--cobalt); animation: am-spin .9s linear infinite; }
@keyframes am-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; border-color: var(--cobalt); border-right-color: var(--line); } }
.phone-ic { width: 34px; height: 34px; flex: none; border-radius: 99px; background: var(--panel); border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink); }
.offp-head { margin: 8px 0 0; display: flex; flex-direction: column; gap: 2px; }
.offp-head .label { color: var(--body); }
.offp-head .offp-title { color: var(--ink); font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
.offp { display: flex; flex-direction: column; gap: 10px; }
.offp > * { margin: 0; }
#matches, #prospects { display: flex; flex-direction: column; gap: 10px; }
#matches:empty, #prospects:empty { display: none; }
#matches > .card, #prospects > .card { margin: 0; }
.add-pro { border-top: 1px solid var(--line); padding-top: 4px; }
.add-pro summary { min-height: 44px; display: flex; align-items: center; gap: 8px; color: var(--cobalt); font-weight: 700;
  cursor: pointer; list-style: none; }
.add-pro summary::-webkit-details-marker { display: none; }
.add-pro summary::before { content: ""; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--i-plus) center / contain no-repeat; mask: var(--i-plus) center / contain no-repeat; }
.add-pro[open] > :not(summary) { margin-top: 12px; }
.call::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: var(--i-phone) center / contain no-repeat; mask: var(--i-phone) center / contain no-repeat; }
.counter-row .money { flex: 1 1 6rem; }
.pair .call { white-space: nowrap; font-size: 13px; letter-spacing: -.01em; }

/* ---- the deal: compare list, the job, the thread (the signature) */
.deal-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: -12px; }
.compare { display: flex; flex-direction: column; gap: 8px; }
.compare > * { margin: 0; }
.pro-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
a.pro-row { min-height: 60px; display: flex; align-items: center; gap: 12px; padding: 8px 14px; text-decoration: none; color: var(--body); }
a.pro-row + a.pro-row { border-top: 1px solid var(--line); }
a.pro-row[aria-current="page"] { background: var(--cobalt-tint); }
.pr-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.pr-name { color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
a.pro-row[aria-current="page"] .pr-name { font-weight: 800; }
.pr-sub { font-size: 13px; }
a.pro-row[aria-current="page"] .pr-sub { color: var(--cobalt); font-weight: 700; }
.pr-amt { flex: none; color: var(--ink); font-weight: 800; font-size: 22px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pr-amt.word { display: inline-flex; align-items: center; gap: 6px; color: var(--body); font-family: var(--mono); font-weight: 500;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.pr-amt.word.wait::before { content: ""; width: 11px; height: 11px; background: currentColor;
  -webkit-mask: var(--i-clock) center / contain no-repeat; mask: var(--i-clock) center / contain no-repeat; }
.pr-chev { flex: none; color: var(--body); }
.phone-prices { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.phone-price { min-height: 56px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px;
  padding: 8px 14px; border: 1px dashed var(--dash); border-radius: 14px; line-height: 1.25; }
.phone-price .pp-name { color: var(--ink); font-weight: 700; grid-column: 1; grid-row: 1; }
.phone-price .pp-amt { grid-column: 2; grid-row: 1 / span 2; color: var(--ink); font-weight: 800; font-size: 22px;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.phone-price .pp-sub { grid-column: 1; grid-row: 2; font-size: 13px; }
.thread-wrap { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px;
  display: flex; flex-direction: column; gap: 10px; }
.thread-wrap > * { margin: 0; }
.thread-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding: 2px 2px 4px; }
.thread-head b { color: var(--ink); font-weight: 800; letter-spacing: -.02em; }
.thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.step { max-width: 84%; border: 1px solid var(--line); background: #fff; border-radius: 14px 14px 14px 4px; padding: 10px 14px;
  overflow-wrap: anywhere; align-self: flex-start; display: flex; flex-direction: column; gap: 2px; }
.step.mine { align-self: flex-end; border-radius: 14px 14px 4px 14px; }
.step .who { color: var(--body); display: block; }
.step.mine .who { color: var(--cobalt); }
.step .what { color: var(--ink); }
.step .price { display: block; }
.step .muted { color: var(--ink); }
.step.decision { align-self: stretch; max-width: 100%; border: 2px solid var(--cobalt); border-radius: 14px; padding: 16px;
  box-shadow: 0 0 0 4px var(--halo); gap: 12px; margin-top: 4px; }
.step.decision > * { margin: 0; }
.step.decision .who { color: var(--cobalt); }
.step.decision .what { font-weight: 800; font-size: 20px; letter-spacing: -.02em; line-height: 1.2; }
.decision .row button, .decision .row .btn { flex: 1 1 8rem; }
.decision .counter-row { flex-wrap: nowrap; align-items: stretch; }
.decision .counter-row button { flex: none; }
.decision .hint.lock { --ic: var(--i-lock); }
.deal-foot { border-top: 1px solid var(--line); padding-top: 8px; display: flex; justify-content: center; }
.slots { display: flex; flex-direction: column; gap: 8px; }
label.slot { margin: 0; min-height: 48px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: 10px; flex-direction: row;
  align-items: center; gap: 10px; color: var(--ink); font-weight: 600; cursor: pointer; }
label.slot:has(input:checked) { border-color: var(--cobalt); box-shadow: inset 0 0 0 1px var(--cobalt); }
label.slot > input { margin: 0; }
.slot-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.other-time summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--cobalt); font-weight: 700; }
.other-time[open] > :not(summary) { margin-top: 8px; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 20px; border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.timeline li { color: var(--ink); position: relative; }
.timeline li::before { content: ""; position: absolute; left: -27px; top: 6px; width: 12px; height: 12px; border-radius: 99px;
  background: #fff; border: 2px solid var(--line-2); }
.timeline li.current { color: var(--cobalt); font-weight: 700; }
.timeline li.current::before { border-color: var(--cobalt); background: var(--cobalt); }
.stars { display: flex; gap: 6px; }
button.star { min-width: 44px; width: 44px; height: 44px; min-height: 44px; padding: 0; background: #fff; color: var(--line-2);
  border-color: var(--line-2); font-size: 22px; }
button.star.on { color: #fff; background: var(--cobalt); border-color: var(--cobalt); }
.wrote { margin: 0; color: var(--ink); white-space: pre-line; font-size: 17px; line-height: 1.45; font-weight: 600; }
.wrote::before { content: "\201C"; }
.wrote::after { content: "\201D"; }
.facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; margin: 0; }
.context .facts { padding-top: 12px; border-top: 1px solid var(--line); }
.facts dt { font-weight: 600; }
.facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.context .contact { font-size: 13px; }
.priced { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.priced .stack { gap: 2px; }
.priced::after { content: ""; flex: none; width: 22px; height: 22px; background: var(--body);
  -webkit-mask: var(--i-tag) center / contain no-repeat; mask: var(--i-tag) center / contain no-repeat; }

/* ---- My jobs, P5 Leads */
.job-list, .lead-list { display: flex; flex-direction: column; gap: 12px; }
.job-list > .card, .lead-list > .card { margin: 0; }
.card.job .item-head, .card.lead .item-head { flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; gap: 12px; }
.card.lead .item-head { align-items: center; }
.standing { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-variant-numeric: tabular-nums; }
.standing li { display: flex; justify-content: space-between; gap: 8px; }
.standing li .st-name { min-width: 0; overflow-wrap: anywhere; }
.standing li.has-amt { color: var(--ink); }
.standing li.has-amt .st-tail { font-weight: 800; }
.lead .meta { color: var(--body); margin: 0; }
.lead .need-line { color: var(--ink); }
@media (min-width: 720px) { .lead-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lead-tabs { display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 2px;
  scrollbar-width: none; }
a.tab-chip { flex: none; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 99px;
  border: 1px solid var(--line); color: var(--ink); font-weight: 600; text-decoration: none; background: #fff; }
a.tab-chip[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 700; }
.tab-count { font-size: 13px; color: var(--body); font-variant-numeric: tabular-nums; }
a.tab-chip[aria-current="page"] .tab-count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--cobalt);
  color: #fff; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.leads-foot { font-size: 14px; }

/* ---- My services: sections; P1 draft block */
.sect { display: flex; flex-direction: column; gap: 10px; }
.sect > * { margin: 0; }
.sect > h2 { margin: 0; }
.price-card .item-head { justify-content: space-between; }
.draft-again-btn::before { content: ""; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--i-globe) center / contain no-repeat; mask: var(--i-globe) center / contain no-repeat; }
.top-stack { display: flex; flex-direction: column; gap: 12px; }
.top-stack > * { margin: 0; }
.top-stack > .row > button { flex: 0 1 auto; }

/* ---- Google sign-in / dev picker (on the landing too) */
.signin { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 1rem; }
.signin h2 { margin: 0 0 .25rem; }
.gsi-button { min-height: 44px; margin-top: .75rem; max-width: 100%; overflow: hidden; }
.dev-picker { margin-top: 2rem; padding-top: 1rem; border-top: 1px dashed var(--line); }
.dev-picker h2 { margin: 0; }
.picker-rows { display: grid; gap: .5rem; margin-top: .75rem; }
button.pick-account { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 44px; text-align: left;
  border-color: var(--line); font-weight: 600; justify-content: flex-start; }
.pick-account .pick-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }

/* ---- off-platform pros (D8): O2 email preview, O3 link page, O4 dev outbox */
.mail-head { margin: 0; }
.mail h3 { margin: 0; }
.mail-body { white-space: pre-line; color: var(--ink); overflow-wrap: anywhere; }
.fake-cta { display: inline-flex; align-self: flex-start; align-items: center; min-height: 44px; padding: 0 1.1rem;
  border-radius: 10px; background: var(--cobalt); color: #fff; font-weight: 700; }
.checks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.checks li { padding-left: 1.6rem; position: relative; color: var(--ink); }
.checks li::before { content: "✓"; position: absolute; left: .25rem; color: var(--cobalt); font-weight: 800; }
.o3-head { display: flex; flex-direction: column; gap: 8px; }
.o3-head > * { margin: 0; }
.for { color: var(--cobalt); margin: 0; }
.setup-card { background: var(--ink); border: 0; border-radius: 16px; padding: 20px; color: var(--dark-body); }
.setup-card .label { color: var(--dark-accent); }
.setup-card h2 { color: #fff; font-size: 22px; line-height: 1.15; margin: 0; }
.setup-card button.light { align-self: flex-start; background: #fff; border-color: #fff; color: var(--ink); margin-top: 6px; }
.setup-card button.light::after { content: ""; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--i-arrow) center / contain no-repeat; mask: var(--i-arrow) center / contain no-repeat; }
.o3-foot { font-size: 13px; }
.inline-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--ink); }
.outbox-item .mono { text-transform: none; }
/* dev: the AIPM A2A trial (#/dev/a2a) */
.dev-banner { background: #FFF4D6; border: 1px solid #F0B429; color: #7A4B00; border-radius: 14px;
  padding: .6rem .9rem; font-weight: 700; }
.a2a-job .mono { text-transform: none; }
.a2a-job .question { padding: .6rem .8rem; background: #fff; border: 2px solid var(--cobalt);
  border-radius: 14px; color: var(--ink); white-space: pre-line; }
.a2a-cols { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.a2a-cols h4 { margin: 0 0 .25rem; color: var(--ink); }
.a2a-cols ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.a2a-cols li { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: .25rem .5rem;
  color: var(--ink); font-size: .85rem; overflow-wrap: anywhere; }
.a2a-cols li .mono { margin-right: .35rem; }
.tag.state-input { border-color: var(--cobalt); color: var(--cobalt); font-weight: 700; }
.tag.state-done { border-color: var(--ink); color: var(--ink); }

/* ---- the signed-out landing page (#/). Everything is scoped under .landing (or nav a.nav-signin,
   which only the landing puts in the nav), so no other view changes. */
main:has(> .landing) { max-width: none; padding: 0; }
nav a.nav-signin { border: 1px solid var(--ink); border-radius: 10px; padding: 0 1rem; font-weight: 700; }
.landing { line-height: 1.55; }
.landing section { scroll-margin-top: 0; }
.landing section:focus { outline: none; }
.landing .lp-wrap { max-width: 1200px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 48px); }
.landing p { margin: 0; }
.landing h1 { margin: 0 0 20px; letter-spacing: -.04em; line-height: 1.02; overflow-wrap: normal;
  font-size: clamp(2.4rem, 5.5vw + .5rem, 4.6rem); }
.landing h2 { margin: 0 0 40px; color: var(--ink); font-weight: 800; letter-spacing: -.03em; line-height: 1.1;
  font-size: clamp(1.8rem, 2.5vw + .8rem, 2.8rem); max-width: 40rem; }
.landing h3 { margin: 0 0 8px; color: var(--ink); font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; }
.landing .lp-eyebrow, .landing .lp-mono, .landing .lp-bubble-label, .landing .lp-num {
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; }
.landing .lp-eyebrow { font-size: .75rem; margin: 0 0 8px; }
.landing .lp-notice { margin: 1rem auto 0; max-width: 1200px; padding-inline: clamp(16px, 4vw, 48px); }
/* hero */
.landing .lp-hero { padding-block: clamp(40px, 7vw, 96px) clamp(48px, 6vw, 88px); display: flex; flex-wrap: wrap;
  gap: clamp(32px, 5vw, 72px); align-items: center; }
.landing .lp-hero-copy { flex: 1 1 420px; min-width: 0; }
.landing .lp-hero .lp-eyebrow { margin-bottom: 16px; }
.landing .lp-sub { margin: 0 0 32px; font-size: clamp(1.05rem, .6vw + .95rem, 1.3rem); max-width: 34rem; }
.landing .lp-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.landing .lp-cta { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; padding: 0 24px;
  border-radius: 10px; font-weight: 700; text-decoration: none; font-size: 1.05rem; border: 1px solid var(--ink); }
.landing .lp-cta.primary { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
.landing .lp-cta.ghost { background: #fff; color: var(--ink); }
.landing .lp-cta.light { background: #fff; border-color: #fff; color: var(--ink); }
/* the decorative deal thread */
.landing .lp-hero-art { flex: 1 1 360px; min-width: 0; max-width: 500px; }
.landing .lp-deal { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); padding: 20px;
  display: flex; flex-direction: column; gap: 12px; }
.landing .lp-deal-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.landing .lp-deal-title { color: var(--ink); font-weight: 800; letter-spacing: -.02em; }
.landing .lp-mono { font-size: .7rem; }
.landing .lp-bubble { max-width: 86%; background: #fff; border: 1px solid var(--line); padding: 10px 14px; overflow-wrap: anywhere; }
.landing .lp-bubble.mine { align-self: flex-end; border-radius: 12px 12px 4px 12px; }
.landing .lp-bubble.theirs { align-self: flex-start; border-radius: 12px 12px 12px 4px; }
.landing .lp-bubble-label { font-size: .68rem; }
.landing .lp-bubble.mine .lp-bubble-label, .landing .lp-call .lp-bubble-label { color: var(--cobalt); }
.landing .lp-bubble-text { color: var(--ink); }
.landing .lp-call { background: #fff; border: 2px solid var(--cobalt); border-radius: 12px; padding: 14px;
  display: flex; flex-direction: column; gap: 10px; }
.landing .lp-call-q { color: var(--ink); font-weight: 700; }
.landing .lp-call-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.landing .lp-fake-btn { min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 10px;
  border: 1px solid var(--ink); background: #fff; color: var(--ink); font-weight: 700; }
.landing .lp-fake-btn.primary { border-color: var(--cobalt); background: var(--cobalt); color: #fff; }
/* how it works */
.landing .lp-how { background: var(--panel); border-block: 1px solid var(--line); }
.landing .lp-how > .lp-wrap { padding-block: clamp(48px, 6vw, 88px); }
.landing .lp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.landing .lp-step { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 24px; }
.landing .lp-num { display: block; font-size: .75rem; color: var(--cobalt); margin-bottom: 12px; }
/* agents propose, you decide */
.landing .lp-trust { padding-block: clamp(48px, 6vw, 88px); }
.landing .lp-trust h2 { margin-bottom: 32px; }
.landing .lp-points { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.landing .lp-point { display: flex; flex-direction: column; gap: 10px; }
.landing .lp-point h3 { margin: 0; }
.landing .lp-icon { color: var(--cobalt); }
/* for pros: the dark section */
.landing .lp-pros { background: var(--ink); color: #C9CEDA; }
.landing .lp-pros-in { padding-block: clamp(48px, 6vw, 96px); display: flex; flex-wrap: wrap;
  gap: clamp(32px, 5vw, 72px); align-items: flex-start; }
.landing .lp-pros-copy { flex: 1 1 380px; min-width: 0; }
.landing .lp-pros h2 { color: #fff; margin-bottom: 20px; }
.landing .lp-pros-sub { margin: 0 0 28px; font-size: 1.1rem; max-width: 32rem; }
.landing .lp-pro-steps { flex: 1 1 380px; min-width: 0; list-style: none; margin: 0; padding: 0; }
.landing .lp-pro-steps li { padding: 18px 0; border-top: 1px solid #2A2F3A; display: flex; gap: 16px; }
.landing .lp-pro-steps li:last-child { border-bottom: 1px solid #2A2F3A; }
.landing .lp-pro-steps .lp-num { color: #8FA2FF; padding-top: 4px; margin: 0; }
.landing .lp-pro-title { color: #fff; font-weight: 700; }
/* the sign-in band: anonymous role buttons, or Google's button, then the dev picker */
.landing .lp-band { padding-block: clamp(56px, 7vw, 104px); text-align: center; }
.landing .lp-band > h2 { margin: 0 auto 28px; max-width: 36rem; }
.landing .lp-entry { max-width: 30rem; margin: 0 auto; }
.landing .lp-entry .btn { min-height: 52px; font-size: 1.05rem; padding: 0 24px; }
.landing .lp-entry .btn.primary { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
.landing .lp-entry .btn.ghost { background: #fff; border-color: var(--ink); color: var(--ink); }
.landing .signin { background: none; border: 0; border-radius: 0; padding: 0; }
.landing .signin .hint { margin: 0 auto 28px; max-width: 30rem; font-size: 1rem; }
.landing .gsi-button { display: flex; justify-content: center; margin-top: 0; }
.landing .dev-picker { text-align: left; max-width: 36rem; margin: 2rem auto 0; }
.landing .dev-picker h2 { font-size: 1.25rem; margin: 0; }
.landing .dev-picker .hint { margin: .25rem 0 0; }
/* footer */
.landing .lp-foot { border-top: 1px solid var(--line); }
.landing .lp-foot-in { padding-block: 24px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  align-items: center; font-size: .9rem; }
.landing .lp-foot-brand { font-weight: 800; color: var(--ink); letter-spacing: -.03em; }
.landing .lp-foot-brand span { color: var(--cobalt); }
.landing .lp-foot-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.landing .lp-foot-col { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.landing .lp-foot-links span, .landing .lp-foot a { min-height: 44px; display: inline-flex; align-items: center; }
.landing .lp-foot a { color: inherit; text-decoration: none; }
.landing .lp-foot a:hover { color: var(--ink); text-decoration: underline; }
/* 'Report issue' (feedback_post on /auth/config): a small fixed pill bottom-right, raised over a page's sticky
   action bar so it never covers it; the page keeps room under its footer. Pick mode: a banner on top and
   an outline box drawn over the element under the pointer. Both let the pointer through (pointer-events:
   none) but for the banner's Cancel, so every spot stays pickable; the page's own styles are not touched. */
body.reporting-on { padding-bottom: 64px; }
button.report-toggle { position: fixed; right: 12px; bottom: 12px; z-index: 30; min-height: 44px; padding: 0 16px;
  border-radius: 99px; border-color: var(--line-2); background: #fff; color: var(--ink); font-size: .875rem; font-weight: 700;
  box-shadow: 0 4px 14px rgba(11, 13, 18, .14); }
body:has(.sticky-bar) button.report-toggle { bottom: 136px; }
.report-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; pointer-events: none; display: flex; align-items: center;
  justify-content: space-between; gap: 8px; padding: 4px 8px 4px var(--gutter); background: var(--ink); color: #fff;
  font-weight: 600; font-size: .9rem; }
.report-banner button.link { color: #fff; text-decoration: underline; flex: none; pointer-events: auto; }
.report-box { position: fixed; z-index: 35; pointer-events: none; outline: 2px solid var(--cobalt); outline-offset: 1px;
  background: var(--halo); border-radius: 4px; }
.report-dialog { position: fixed; z-index: 40; left: 8px; right: 8px; bottom: 8px; max-width: 420px; margin-left: auto;
  max-height: calc(100vh - 16px); overflow-y: auto; padding: 16px; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; box-shadow: 0 12px 32px rgba(11, 13, 18, .22); display: flex; flex-direction: column; gap: 10px; }
.report-dialog h2 { margin: 0; font-size: 1.1rem; color: var(--ink); }
.report-dialog > * { margin: 0; }
.report-picked { padding: 8px 10px; border-radius: 8px; background: var(--panel); font-size: .875rem; color: var(--ink);
  overflow-wrap: anywhere; max-height: 5.5em; overflow: hidden; }
.report-dialog .row button { flex: 1 1 8rem; }

/* an 'Other' job: which of the pro's own services it was matched on (C3 card, lead, deal) */
.fit-why { display: block; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }