/* ============================================================
   ARIA — Warm.
   Light, warm and roomy: a violet accent (#7c5ccf) on a warm-ivory ground,
   white cards floating on it, near-black ink pill CTAs, barely-there shadows.
   Figtree for the voice, EB Garamond italic for one accent word (.say). A
   small pastel set carries meaning — mint (go) verified/covered, amber (wait)
   pending, coral (alarm) destructive/not-covered. The waveform mark (--mark)
   is filled with the brand gradient (--grad). Tokens are the source of truth,
   shared by the product and the marketing surface (the .mkt scope) both.

   NOTE: the styleguide view parses the FIRST custom-property block
   below (colors + fonts) to render the palette, and core.tokens.clay()
   inlines it into the one email. Keep colors and fonts there as literals;
   tints, the Warm v2 base set and geometry live in the second block.
   ============================================================ */

:root {
  /* Warm — the palette the styleguide renders, the invitation email inlines,
     and the product surface reads. Concrete literals (not var()) on purpose:
     core.tokens.clay() parses this first block, and email clients resolve
     neither custom properties nor stylesheets. Tints and geometry are below. */
  --bg:       #fbfaf4;   /* warm ivory — the page, never pure white */
  --bg-peach: #f1ebff;   /* soft violet tint behind accent washes */
  --surface:  #ffffff;   /* cards float in white */
  --ink:      #1a1a1a;   /* headings, primary buttons */
  --ink-2:    #55524a;   /* body copy */
  --ink-3:    #78736a;   /* meta, captions */
  --line:     #eae5d9;   /* warm hairline */
  --accent:   #7c5ccf;   /* violet — the one accent, used sparingly */
  --go:       #12805a;   /* verified / covered (mint-deep) */
  --wait:     #b8841f;   /* pending / mid (amber) — gold, not brown, so it reads clean as a gauge stroke */
  --alarm:    #c2412a;   /* destructive / not covered (coral-deep) */

  --body:  "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --brand: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

:root {
  --ink-4:      #a39c8e;
  --line-2:     rgba(26, 26, 26, 0.14);
  --line-3:     rgba(26, 26, 26, 0.26);
  --surface-2:  #f4f1e6;
  --surface-3:  #f2efe4;

  /* Semantic state fills: verified (go), pending (wait), error/gap (alarm). */
  --go-bg:      #e6f7f0;  --go-line:    rgba(18, 128, 90, 0.24);
  --wait-bg:    #faf1df;  --wait-line:  rgba(184, 132, 31, 0.30);
  --alarm-bg:   #ffeee9;  --alarm-line: rgba(194, 65, 42, 0.24);

  /* Accent (violet) family. */
  --accent-2:    #5b3fa8;
  --accent-ink:  #5b3fa8;
  --accent-deep: #5b3fa8;   /* link + kicker text, ~7:1 on ivory */
  --accent-soft: #f1ebff;
  --accent-tint: #f1ebff;
  --accent-line: rgba(124, 92, 207, 0.28);
  --accent-grad: linear-gradient(135deg, #ff8a6b 0%, #c47ae0 55%, #7c5ccf 100%);

  --radius:      18px;
  --radius-s:    12px;
  --radius-btn:  12px;
  --radius-pill: 980px;
  /* Shadows are barely there — elevation is white-on-ivory contrast, not drop. */
  --shadow-s:   0 1px 2px rgba(26, 26, 26, 0.04);
  --shadow-m:   0 2px 6px rgba(26, 26, 26, 0.05), 0 30px 70px -34px rgba(26, 26, 26, 0.30);
  --shadow-btn:  0 10px 28px -12px rgba(124, 92, 207, 0.55);
  --shadow-card: 0 1px 2px rgba(26, 26, 26, 0.03), 0 14px 30px -26px rgba(26, 26, 26, 0.22);

  /* ---- Warm v2 base tokens — read by the marketing surface (.mkt scope). ---- */
  --canvas:      #fbfaf4;
  --canvas-2:    #f4f1e6;
  --dim:         #78736a;
  --violet:      #7c5ccf;
  --violet-deep: #5b3fa8;
  --violet-soft: #f1ebff;
  --violet-line: rgba(124, 92, 207, 0.28);
  --peach:       #ff8a6b;
  --coral:       #ff6c4c;
  --coral-deep:  #c2412a;
  --coral-soft:  #ffeee9;
  --coral-line:  rgba(194, 65, 42, 0.24);
  --mint:        #34d399;
  --mint-deep:   #12805a;
  --mint-soft:   #e6f7f0;
  --mint-line:   rgba(18, 128, 90, 0.24);
  --grad: linear-gradient(135deg, #ff8a6b 0%, #c47ae0 55%, #7c5ccf 100%);
  /* The waveform mark, painted as a mask so --grad shows through at any size. */
  --mark: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2036%2028'%20fill='%23000'%3E%3Crect%20x='0'%20y='8'%20width='6'%20height='12'%20rx='3'/%3E%3Crect%20x='10'%20y='0'%20width='6'%20height='28'%20rx='3'/%3E%3Crect%20x='20'%20y='5'%20width='6'%20height='18'%20rx='3'/%3E%3Crect%20x='30'%20y='11'%20width='6'%20height='6'%20rx='3'/%3E%3C/svg%3E");
  --r-xs: 8px;  --r-sm: 12px;  --r-md: 16px;  --r-lg: 22px;  --r-xl: 30px;  --r-pill: 980px;
  --site: 1180px;  --nav-h: 62px;  --gut: 24px;
  --f-sans: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-serif: "EB Garamond", ui-serif, Georgia, "Times New Roman", serif;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --shadow-1: 0 1px 2px rgba(26, 26, 26, 0.03), 0 10px 30px -18px rgba(26, 26, 26, 0.22);
  --shadow-2: 0 2px 6px rgba(26, 26, 26, 0.05), 0 30px 70px -30px rgba(26, 26, 26, 0.35);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--bg);
  background-image:
    radial-gradient(60% 50% at 15% 0%, rgba(124, 92, 207, 0.06), transparent 60%),
    radial-gradient(52% 45% at 90% 8%, rgba(255, 138, 107, 0.05), transparent 55%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

::selection { background: var(--ink); color: var(--surface); }

a { color: var(--ink); text-decoration: none; }
a:not(.btn):not(.domain-card):not(.crumb):not(.wordmark):hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- layout ---------- */

.shell {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

/* ---------- sidebar nav ---------- */

.sidebar {
  flex: none;
  width: 208px;
  background: linear-gradient(175deg, var(--surface) 55%, #f4f1e6 100%);
  border-right: 1px solid var(--line);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
}
.sidebar-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sidebar-panel { display: flex; flex-direction: column; gap: 26px; flex: 1 1 auto; min-height: 0; }
.nav-toggle-cb { display: none; } /* pure-CSS toggle (checkbox hack) — mobile only */
.nav-toggle {
  display: none; /* desktop: full sidebar is always shown */
  width: 44px; height: 44px; padding: 0; flex: none;
  align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-s); color: var(--ink); cursor: pointer;
}
.nav-toggle-cb:focus-visible ~ .sidebar-bar .nav-toggle { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124, 92, 207, 0.16); }
/* cursor:pointer is a static property (can't "stick"), so it stays on the base
   rule and works wherever a cursor exists. Only the :hover background sticks
   after a tap on touch, so gate just that behind a real pointer. */
@media (hover: hover) {
  .nav-toggle:hover { background: var(--surface-2); border-color: var(--ink-3); }
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  content: ""; display: block; width: 18px; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform 0.18s ease, top 0.18s ease, opacity 0.18s ease;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before { position: absolute; left: 0; top: -6px; }
.nav-toggle-bars::after { position: absolute; left: 0; top: 6px; }
.nav-toggle-cb:checked ~ .sidebar-bar .nav-toggle-bars { background: transparent; }
.nav-toggle-cb:checked ~ .sidebar-bar .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle-cb:checked ~ .sidebar-bar .nav-toggle-bars::after { top: 0; transform: rotate(-45deg); }
.sidebar .wordmark { padding: 4px 8px; }
.wordmark {
  font-family: var(--brand);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
/* The waveform mark: the brand gradient painted behind the mask, no tile. */
.wordmark .brandmark {
  width: 28px;
  height: 22px;
  flex: none;
  background: var(--grad);
  -webkit-mask: var(--mark) center / contain no-repeat;
          mask: var(--mark) center / contain no-repeat;
}
.nav { display: flex; flex-direction: column; gap: 4px; }
.nav-head {
  font-family: var(--body);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 6px 8px;
}
.nav-head:hover { color: var(--ink); }
.nav-domains { display: flex; flex-direction: column; gap: 1px; }
.nav-domain {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: var(--radius-s);
  font-size: 13.5px;
  color: var(--ink-2);
  transition: background 0.14s ease, color 0.14s ease;
}
.nav-domain:hover { background: var(--surface-2); color: var(--ink); }
.nav-domain .pip { width: 7px; height: 7px; }
.nav-domain-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-empty {
  padding: 7px 8px;
  font-size: 13px;
  color: var(--ink-4);
}

.sidebar-foot {
  margin-top: auto;
  display: grid;
  gap: 10px;
  font-size: 13px;
}
.sidebar-foot .who { color: var(--ink-3); word-break: break-all; padding: 0 8px; }
.sidebar-foot form { margin: 0; }
.sidebar-foot .btn { width: 100%; }

.main {
  flex: 1;
  min-width: 0;
  padding: 36px 48px 96px;
}
/* keep content at a readable measure; the sidebar hugs the left edge */
.main > * { max-width: 920px; }

@media (max-width: 760px) {
  .shell { flex-direction: column; min-height: 0; }
  /* chat still fills the screen so its thread scrolls and the composer pins */
  .shell:has(.chat-stage) { min-height: 100vh; }
  .sidebar {
    width: auto;
    height: auto;
    align-self: stretch;
    position: relative; /* anchor the absolute dropdown panel */
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 12px 16px;
    gap: 0;
  }
  .nav-toggle { display: inline-flex; } /* the only nav affordance on mobile */
  .nav-toggle-cb { /* visually hidden but focusable: keyboard Space toggles the menu */
    display: block; position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .sidebar-panel {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
    display: none; /* collapsed until the hamburger opens it */
    gap: 18px; padding: 14px 16px 18px;
    background: var(--surface); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-m);
  }
  .nav-toggle-cb:checked ~ .sidebar-panel { display: flex; }
  .dpage .summary { position: static; } /* sticky title overlaps content on mobile; .dpage beats the later base rule */
  .main { padding: 24px 20px 64px; }
  .main > * { max-width: none; }
}

/* ---------- typography ---------- */

.rise { margin-bottom: 36px; }

.kicker {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.display {
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 12px 0;
}

.lede {
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 58ch;
  margin: 14px 0;
}

p { max-width: 64ch; }

/* System monospace for functional data — DNS records, scores, paths, code. */
.mono { font-family: var(--mono); }

/* ---------- buttons ---------- */

.btn {
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid rgba(26, 26, 26, 0.16);
  border-radius: var(--radius-btn);
  padding: 12px 22px;
  cursor: pointer;
  color: var(--ink);
  background: rgba(26, 26, 26, 0.04);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  line-height: 1.2;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { background: rgba(26, 26, 26, 0.07); border-color: rgba(26, 26, 26, 0.16); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-quiet { background: transparent; border-color: transparent; color: var(--ink-3); font-weight: 500; }
.btn-quiet:hover { background: rgba(26, 26, 26, 0.05); color: var(--ink); transform: none; }
.btn-danger-quiet { background: transparent; border-color: transparent; color: var(--ink-4); font-weight: 400; font-size: 13px; }
.btn-danger-quiet:hover { background: var(--alarm-bg); border-color: var(--alarm-line); color: var(--alarm); transform: none; }
.btn-solid { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: none; }
.btn-solid:hover { background: #363636; border-color: #363636; transform: translateY(-2px); box-shadow: none; }
.btn[disabled],
.btn.is-disabled {
  cursor: not-allowed;
  color: var(--ink-4);
  background: var(--bg);
  border-color: var(--line);
  pointer-events: none;
}

.btn[disabled]:hover,
.btn.is-disabled:hover,
.btn[disabled]:active,
.btn.is-disabled:active {
  transform: none;
  color: var(--ink-4);
  background: var(--bg);
  border-color: var(--line);
}
/* social sign-in */
.social-row { display: grid; gap: 10px; margin-bottom: 18px; }
.btn-social { width: 100%; padding: 11px 16px; }
.divider {
  font-size: 12px;
  color: var(--ink-4);
  text-align: center;
  margin: 8px 0 18px;
}

/* ---------- forms ---------- */

label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin: 16px 0 7px;
}
input[type="text"], input[type="email"], input[type="password"] {
  font-family: var(--body);
  font-size: 14px;
  padding: 10px 13px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-s);
  background: var(--surface);
  width: 100%;
  outline: none;
  color: var(--ink);
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
input::placeholder { color: var(--ink-4); }
input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(190, 106, 64, 0.16); }

.add-domain {
  display: flex;
  gap: 12px;
  align-items: stretch;
  margin: 28px 0;
  flex-wrap: wrap;
}
.add-domain input[type="text"], .add-domain input[type="email"] { flex: 1; min-width: 220px; }
.add-domain .btn { flex: none; }

/* --- organization (/organization/ and the invite landing page) --- */
.org-head { margin-bottom: 34px; }
.org-rename { display: flex; gap: 10px; align-items: center; margin: 6px 0 10px; }
input.org-name {
  flex: 1;
  min-width: 0;
  max-width: 520px;
  font-family: var(--body);
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  background: none;
  border: none;
  border-bottom: 2px dashed transparent;
  padding: 2px 0;
  border-radius: 0;
}
input.org-name:hover { border-bottom-color: var(--line-2); }
input.org-name:focus {
  outline: none;
  box-shadow: none;
  border-color: transparent;
  border-bottom-color: var(--accent);
}
.org-rename .btn { flex: none; opacity: 0; transition: opacity .15s ease; }
.org-rename:hover .btn, .org-rename:focus-within .btn { opacity: 1; }
.org-context { display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: var(--ink-3); }
.org-context .dot { color: var(--ink-4); }
.seat-meter { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--ink-2); }

.invite-form { display: flex; gap: 12px; align-items: stretch; margin: 0 0 4px; flex-wrap: wrap; }
.invite-form input[type="email"] { flex: 1; min-width: 240px; }
.invite-form .btn { flex: none; }

.section-head {
  font-size: 12px;
  font-family: var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 38px 0 12px;
}
.member-list { display: grid; gap: 10px; }
.member-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 14px 18px;
  box-shadow: var(--shadow-s);
}
.member-row .avatar {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--accent-grad);
}
.member-row .avatar.pending { background: var(--surface-2); color: var(--ink-3); }
.member-row .who { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.member-row .meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--ink-3);
}
.member-row .meta form { margin: 0; }
.invite-row { border-style: dashed; box-shadow: none; }

.invite-page { max-width: 620px; }
.invite-page .btn-solid { margin-top: 8px; }

.field-errors {
  list-style: none;
  margin: 10px 0 0;
  display: grid;
  gap: 8px;
}
.field-errors li {
  font-size: 12.5px;
  color: var(--alarm);
  background: var(--alarm-bg);
  border: 1px solid var(--alarm-line);
  border-radius: var(--radius-s);
  padding: 7px 11px;
  width: fit-content;
}

/* ---------- aria says (flash messages) ---------- */

.aria-says { list-style: none; display: grid; gap: 10px; margin: 0 0 32px; }
.aria-says li {
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface);
  padding: 11px 14px;
  font-size: 14px;
  color: var(--ink-2);
}
.aria-says li.success { background: var(--go-bg); border-color: var(--go-line); color: var(--go); }
.aria-says li.warning { background: var(--wait-bg); border-color: var(--wait-line); color: var(--wait); }
.aria-says li.error   { background: var(--alarm-bg); border-color: var(--alarm-line); color: var(--alarm); }

/* ---------- status: pips & chips ---------- */

.pip {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}
.pip.verified { background: var(--go); }
.pip.pending  { background: var(--wait); animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.35; } }

.chip {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  border-radius: 100px;
  padding: 3px 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
}
.chip.verified { background: var(--go-bg); border-color: var(--go-line); color: var(--go); }
.chip.pending  { background: var(--wait-bg); border-color: var(--wait-line); color: var(--wait); }

/* Per-domain tier indicator on the list (billing on only). Starter is quiet;
   the paid tiers stand out. */
.plan-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1.5;
  border-radius: 100px;
  padding: 2px 9px;
  border: 1px solid var(--line-2);
  color: var(--ink-3);
  white-space: nowrap;
}
.plan-tag.growth, .plan-tag.scale { color: var(--ink); border-color: var(--ink); }

/* ---------- domain list & cards ---------- */

.domain-list { display: grid; gap: 12px; margin-top: 8px; }

.domain-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(180deg, var(--surface), var(--bg));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-s);
  padding: 18px 20px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
a.domain-card:hover {
  border-color: var(--line-2);
  box-shadow: 0 24px 46px -30px rgba(124, 92, 207, 0.45);
  transform: translateY(-4px);
  text-decoration: none;
}
.domain-card .name {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  word-break: break-all;
}
.domain-card .meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--ink-3);
}
.domain-card .meta form { margin: 0; }
.domain-card .arrow { font-size: 16px; color: var(--ink-4); }
a.domain-card:hover .arrow { color: var(--ink); }

.empty {
  display: grid;
  justify-items: center;
  gap: 22px;
  text-align: center;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 56px 32px;
  margin-top: 8px;
}
.empty p { font-size: 15.5px; color: var(--ink-2); max-width: 36ch; }

/* ---------- the mark ---------- */

.orb {
  --mark-size: 72px;
  position: relative;
  width: var(--mark-size);
  height: var(--mark-size);
  border-radius: 50%;
  background: var(--grad);
  display: grid;
  place-items: center;
  flex: none;
  box-shadow: 0 18px 44px -18px rgba(124, 92, 207, 0.6),
    inset 0 -6px 18px rgba(0, 0, 0, 0.10), inset 0 5px 14px rgba(255, 255, 255, 0.25);
}
/* A white waveform, the same silhouette as the wordmark, at the orb's heart. */
.orb-core {
  width: 42%;
  height: 33%;
  background: #fff;
  -webkit-mask: var(--mark) center / contain no-repeat;
          mask: var(--mark) center / contain no-repeat;
}
.orb-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--accent-line);
  opacity: 0;
  animation: breathe 3.6s cubic-bezier(0.3, 0.7, 0.4, 1) infinite;
}
@keyframes breathe {
  0%   { transform: scale(0.6); opacity: 0; }
  35%  { opacity: 0.3; }
  100% { transform: scale(1.3); opacity: 0; }
}
.empty .orb { --mark-size: 80px; }
.chat-head .orb { --mark-size: 56px; }
.gate-presence .orb { --mark-size: 88px; }
.guide-orbs { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

/* ---------- verification (domain detail) ---------- */

.crumb {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 24px;
}
.crumb:hover { color: var(--ink); }

.verify-head {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.verify-head .display { margin: 0; }

.verified-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--go-bg);
  border: 1px solid var(--go-line);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 24px 0;
}
.verified-banner strong {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--go);
}
.verified-banner span { font-size: 12.5px; color: var(--ink-3); }

.method {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-s);
  background: var(--surface);
  padding: 20px 22px;
  margin: 20px 0;
}
.method-label {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.method-label .opt {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 7px;
  margin-left: 8px;
  vertical-align: 2px;
}
.method > p { margin: 6px 0 14px; font-size: 14px; color: var(--ink-2); }

.record {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 13px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.record .k {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
  min-width: 96px;
  flex: none;
}
.record .v { word-break: break-all; flex: 1; }
.copy {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  background: var(--surface);
  color: var(--ink-3);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-s);
  padding: 5px 9px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
.copy:hover { color: var(--ink); border-color: var(--ink-4); }
.copy:active { transform: translateY(0.5px); }
.copy.done { color: var(--go); border-color: var(--go-line); background: var(--go-bg); }

.verify-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.verify-actions form { margin: 0; }

/* ---------- chat ---------- */

/* Chat lives inside the app shell (sidebar + main), same as every other
   page. The main column becomes a flex container so the stage can fill it
   and the composer can pin to the bottom of the viewport. */
.main:has(.chat-stage) { display: flex; flex-direction: column; padding-bottom: 0; }
.main:has(.chat-stage) > * { max-width: none; }
/* The stage is the element core/theme.py's per-domain tokens land on, so it is
   also where the tokens *derived* from them must be declared: a var() inside a
   custom property is substituted where that property is declared, not where it
   is used, so an accent-tinted shadow written at :root would freeze ARIA's
   violet and never see a domain's accent. Declared here, it resolves
   against this element's own --accent. The inherited properties are the same
   story from the other side: body reads var(--ink)/var(--body) but sits outside
   the themed scope, so anything the panel merely inherits arrives in ARIA's
   colours — on a dark host that means dark text in a dark bubble. The stage
   re-reads them so inherited text follows the host too. */
.chat-stage {
  color: var(--ink);
  font-family: var(--body);
  --shadow-m: 0 24px 46px -30px color-mix(in srgb, var(--accent) 45%, transparent);
  --shadow-btn: 0 16px 36px -14px color-mix(in srgb, var(--accent) 70%, transparent);
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.chat-head {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 14px;
  padding: 8px 0 28px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}
.chat-hello { font-size: 15px; color: var(--ink-2); max-width: 44ch; }

.chat-thread {
  display: grid;
  gap: 14px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  align-content: start;
}
.chat-line {
  padding: 11px 14px;
  font-size: 14px;
  line-height: 1.55;
  max-width: 80%;
  border-radius: 16px;
}
/* Both bubbles are mixed from the palette, not from brand literals. The old
   hardcoded values leaked on every themed surface: a violet answer bubble on
   a blue-accented site, and an ink-on-ink visitor bubble that vanished entirely
   on a dark one — visible in the embed widget on any dark host, not just here.
   On ARIA's own ivory the mixed result is indistinguishable. */
.chat-line.visitor {
  justify-self: end;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  color: var(--ink);
  border-bottom-right-radius: 5px;
}
.chat-line.aria {
  justify-self: start;
  background: linear-gradient(
    120deg,
    color-mix(in srgb, var(--accent) 14%, transparent),
    color-mix(in srgb, var(--accent) 9%, transparent)
  );
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-bottom-left-radius: 5px;
}
.chat-line.aria > :first-child { margin-top: 0; }
.chat-line.aria > :last-child { margin-bottom: 0; }
.chat-line.aria p { margin: 0 0 8px; }
.chat-line.aria ul,
.chat-line.aria ol { margin: 0 0 8px; padding-left: 20px; }
.chat-line.aria li { margin: 2px 0; }
.chat-line.aria li::marker { color: var(--ink-3); }
.chat-line.aria code {
  font-family: var(--mono);
  font-size: 12.5px;
  background: var(--bg);
  padding: 1px 5px;
  border-radius: 5px;
}
.chat-line.aria a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.chat-src {
  justify-self: start;
  margin-top: -8px;
  font-size: 11px;
  color: var(--ink-3);
}
.chat-src a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; }
.chat-line.error {
  background: var(--alarm-bg);
  border-color: var(--alarm-line);
  color: var(--alarm);
  justify-self: start;
}
.chat-line.thinking {
  justify-self: start;
  width: 64px;
  height: 42px;
  position: relative;
}
.chat-line.thinking::after {
  content: "•••";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  animation: blink 1s ease-in-out infinite;
}

.chat-bar {
  display: flex;
  gap: 0;
  margin: 28px 0 24px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-m);
  background: var(--surface);
  overflow: hidden;
}
.chat-bar.is-disabled {
  box-shadow: none;
  background: var(--bg);
}

.chat-note {
  margin: 0 0 12px;
  color: var(--ink-3);
}

.chat-input:disabled {
  background: var(--bg);
  color: var(--ink-4);
  cursor: not-allowed;
}
.chat-input {
  flex: 1;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: var(--surface);
}
.chat-send {
  flex: none;
  border: none;
  border-left: 1px solid var(--line-2);
  border-radius: 0;
}
.chat-mic {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  border: none;
  border-left: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
}
.chat-mic svg { width: 18px; height: 18px; fill: currentColor; }
.chat-mic:hover:not(:disabled) { color: var(--accent); }
.chat-mic:disabled { color: var(--ink-4); cursor: not-allowed; }
.chat-mic.listening { color: var(--accent); animation: mic-pulse 1.2s ease-in-out infinite; }
@keyframes mic-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* The widget iframe variant: no shell, so the stage owns the viewport and
   everything tightens to panel scale. It paints its own ground because the
   domain theme is scoped to #stage — body would otherwise stay ARIA ivory
   under a host-coloured panel. */
.chat-stage.embed { height: 100vh; max-width: none; padding: 0 16px; background: var(--bg); }
.chat-stage.embed .chat-head { gap: 8px; padding: 16px 0 12px; margin-bottom: 14px; }
.chat-stage.embed .orb { --mark-size: 36px; }
.chat-stage.embed .chat-bar { margin: 14px 0 16px; }

/* ---------- sign-in / sign-up gate ---------- */

.gate {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  min-height: 100vh;
  align-items: stretch;
}
.gate-presence {
  background: var(--surface-2);
  color: var(--ink);
  padding: 64px 56px;
  display: grid;
  align-content: center;
  gap: 26px;
}
.gate-presence .kicker { color: var(--accent-ink); }
.gate-presence .display { margin: 6px 0; }
.gate-presence .lede { color: var(--ink-2); }
.gate-form {
  padding: 64px 56px;
  display: grid;
  align-content: center;
  max-width: 540px;
}
.gate-form h2 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}
.gate-form .btn-solid { margin-top: 22px; width: 100%; padding: 11px 16px; }
.gate-alt { margin-top: 22px; font-size: 13.5px; color: var(--ink-3); }
.gate-alt a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- styleguide ---------- */

.guide-section { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }
.guide-section > .kicker { margin-bottom: 20px; }

.guide-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.swatch {
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface);
  overflow: hidden;
}
.swatch-chip {
  height: 64px;
  border-bottom: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 600;
}
.swatch-meta { padding: 9px 11px 11px; display: grid; gap: 2px; }
.swatch-name { font-family: var(--mono); font-size: 12px; }
.swatch-value { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

/* palette chip fills — one per color custom property */
.var-bg      { background: var(--bg); }
.var-surface { background: var(--surface); }
.var-ink     { background: var(--ink); }
.var-ink-2   { background: var(--ink-2); }
.var-ink-3   { background: var(--ink-3); }
.var-line    { background: var(--line); }
.var-go      { background: var(--go); }
.var-wait    { background: var(--wait); }
.var-alarm   { background: var(--alarm); }
.var-accent { background: var(--accent); }
/* font specimens */
.face-body { font-family: var(--body); }
.face-mono { font-family: var(--mono); }

.guide-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 14px 0; }
.guide-narrow { max-width: 420px; }
.guide-narrow-chat { max-width: 520px; }
.guide-note {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-4);
  line-height: 1.6;
}

/* ---------- responsive ---------- */

@media (max-width: 760px) {
  .gate { grid-template-columns: 1fr; }
  .gate-presence { padding: 48px 32px; }
  .gate-form { padding: 48px 32px; }
  .domain-card { flex-wrap: wrap; }
  .domain-card .meta { margin-left: 0; }
}

/* live crawl-progress banner (polled by HTMX); reuses .pip.pending blink */
.crawl-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 24px 0;
}
.crawl-banner strong { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.crawl-banner .mono { font-size: 12.5px; color: var(--ink-3); }
.crawl-banner code { font-family: var(--mono); }

/* GEO meters & bars — shared by the dashboard list and the /geo help page */
.geo-bars { list-style: none; padding: 0; margin: 0.75rem 0 0; display: grid; gap: 0.5rem; }
.geo-bars li { display: grid; grid-template-columns: 14rem 1fr; align-items: center; gap: 0.75rem; }
.geo-label { font-size: 0.78rem; color: var(--ink-3); }
.geo-meter { width: 100%; height: 6px; border: 1px solid var(--line); border-radius: 999px; }
.geo-meter::-webkit-meter-bar { background: var(--bg); border: none; border-radius: 999px; }
.geo-meter::-webkit-meter-optimum-value { background: var(--ink); border-radius: 999px; }
.geo-meter::-moz-meter-bar { background: var(--ink); border-radius: 999px; }
.domain-geo { display: inline-flex; align-items: center; gap: 0.4rem; }
.domain-geo .geo-meter { width: 72px; }
.domain-geo-score { font-family: var(--mono); font-size: 0.78rem; font-weight: 600; }
.domain-geo-score.go { color: var(--go); }
.domain-geo-score.wait { color: var(--wait); }
.domain-geo-score.alarm { color: var(--alarm); }
.geo-help-link { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.geo-help-link:hover { color: var(--ink); }

/* GEO help page (/geo/) */
.geo-steps { margin-top: 14px; }
.geo-step { display: flex; gap: 16px; padding: 13px 0; border-top: 1px solid var(--line); }
.geo-step .n {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-4);
  min-width: 28px;
  padding-top: 3px;
}
.geo-step strong { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 2px; }
.geo-step p { font-size: 14px; color: var(--ink-2); }
.geo-bands { margin-top: 22px; }
.geo-band { display: flex; align-items: baseline; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.geo-band .range { font-family: var(--mono); font-size: 13px; font-weight: 500; min-width: 96px; flex: none; }
.geo-band.go .range { color: var(--go); }
.geo-band.wait .range { color: var(--wait); }
.geo-band.alarm .range { color: var(--alarm); }
.geo-band .meaning { font-size: 14px; color: var(--ink-2); }


/* ---------- Billing: the receipt and the gate ---------- */

/* Two-column page: content + a sticky bill rail (dashboard, organization). */
.dash.with-rail { display: grid; grid-template-columns: minmax(0, 1fr) 268px; gap: 32px; align-items: start; }
.dash-main { min-width: 0; }
.rail { position: sticky; top: 32px; }

/* The receipt — one component, every billing surface. */
.receipt { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 18px; box-shadow: var(--shadow-s); }
.receipt-head { margin-bottom: 12px; }
.receipt-lines { list-style: none; display: grid; gap: 2px; }
.receipt-line { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ink-2); padding: 5px 0; }
.receipt-line .mono { color: var(--ink); }
.receipt-line.strong { font-weight: 600; color: var(--ink); }
.receipt-empty { font-size: 13px; color: var(--ink-3); padding: 4px 0 8px; }
.receipt-total { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); display: grid; gap: 2px; }
.receipt-zero { color: var(--go); }
.receipt-trial { margin-top: 10px; display: grid; gap: 5px; }
.receipt-trial .mono { font-size: 11px; color: var(--ink-3); }
.receipt-note { margin-top: 12px; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.receipt-portal { display: block; width: 100%; margin-top: 14px; padding: 9px 12px; font: inherit; font-size: 12px; color: var(--ink-2); background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--radius-s); cursor: pointer; transition: border-color 0.14s ease, color 0.14s ease; }
.receipt-portal:hover { border-color: var(--ink-3); color: var(--ink); }

/* Native <meter>: trial countdown. Cross-browser fills. */
.receipt-meter { width: 100%; height: 6px; border: none; border-radius: 999px; background: var(--line); -webkit-appearance: none; appearance: none; }
.receipt-meter::-webkit-meter-bar { background: var(--line); border: none; border-radius: 999px; height: 6px; }
.receipt-meter::-webkit-meter-optimum-value { background: var(--ink); border-radius: 999px; }
.receipt-meter::-webkit-meter-suboptimum-value { background: var(--wait); border-radius: 999px; }
.receipt-meter::-moz-meter-bar { background: var(--ink); border-radius: 999px; }

/* The trial gate's receipt sits in the light form column. */
.receipt-gate { margin: 14px 0 22px; }

/* Trust ledger on the gate-presence panel (light ivory surface). */
.trust { list-style: none; display: grid; gap: 9px; margin-top: 26px; }
.trust li { position: relative; padding-left: 24px; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.trust li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--go); font-weight: 600; }
.trust strong { color: var(--ink); font-weight: 600; }
.gate-cta { width: 100%; padding: 12px 16px; }

@media (max-width: 760px) {
  .dash.with-rail { grid-template-columns: 1fr; }
  .rail { position: static; }
}


.billing-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  background: var(--alarm-bg);
  border: 1px solid var(--alarm-line);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 24px 0;
}
.billing-banner p { font-size: 14px; color: var(--ink-2); max-width: 56ch; }
.billing-banner strong { color: var(--alarm); }

.trial-kicker {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wait);
  padding: 0 8px;
}

/* ============================================================
   Domain detail — "Warm": the product surface in the marketing
   brand. Warm ivory + violet, frontpage stat cards, answer
   cards, section-pill headers, soft accent-tinted elevation.
   Classes are page-scoped; shared utilities (.op, .delta, .bar)
   are reused by other pages and kept intact here.
   ============================================================ */

/* This one page runs wider than the reading measure for its main + rail. */
.main > .dpage { max-width: 1180px; }
.dpage .crumb { font-size: 13px; color: var(--ink-3); }

/* sticky page title */
.summary { position: sticky; top: 0; z-index: 5; margin: 14px 0 0; padding: 16px 22px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(230, 227, 221, 0.80); border-radius: var(--radius); box-shadow: 0 8px 32px -12px rgba(124, 92, 207, 0.28), 0 2px 8px rgba(26, 26, 26, 0.06); }
.summary h1 { font-size: 34px; font-weight: 800; letter-spacing: -0.025em; margin: 0; }
.summary h1 .tld { color: var(--accent); }
.summary .chip { font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--go-line); background: var(--go-bg); color: var(--go); }
.summary .chip.pending { border-color: var(--wait-line); background: var(--wait-bg); color: var(--wait); }
.sum-meta { margin-left: auto; font-size: 12.5px; color: var(--ink-3); text-align: right; line-height: 1.7; }
.sum-meta b { color: var(--ink-2); font-weight: 600; }
.price-switch { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.price-switch select { font: inherit; font-size: 12px; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-s); padding: 4px 9px; cursor: pointer; }

.fine { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; margin-top: 14px; }
.fine-steps { font-size: 12.5px; color: var(--ink-3); line-height: 1.6; margin: 8px 0 0 18px; padding: 0; }

/* two-column body + sticky rail */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; margin-top: 22px; }
.layout .rail { position: sticky; top: 84px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.col-main { min-width: 0; container-type: inline-size; }

/* card */
.card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-m); margin-bottom: 20px; scroll-margin-top: 96px; overflow: hidden; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.card-h h2 { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; box-shadow: var(--shadow-s); }
.card-h h2 .st { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--ink-3); font-weight: 600; text-transform: none; }
.card-h .help { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.card-h .help a { color: var(--accent-ink); }
.card-b { padding: 20px 22px; }
.card .lede { font-size: 15px; color: var(--ink-2); max-width: 64ch; margin: 0 0 18px; line-height: 1.55; }
.card .lede a, .geo-help-link { color: var(--accent-ink); font-weight: 600; white-space: nowrap; }
.dpage .kicker { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin: 22px 0 10px; }

/* do this next */
.todo .card-b { padding-top: 8px; }
.todo .row { display: grid; grid-template-columns: 34px 1fr auto auto; align-items: center; gap: 16px; padding: 15px 0; border-top: 1px solid var(--line); }
.todo .row:first-child { border-top: 0; }
.todo .rk { width: 34px; height: 34px; border-radius: 50%; background: rgba(124, 92, 207, 0.12); color: var(--accent-ink); font-weight: 800; font-size: 15px; display: grid; place-items: center; }
.todo .ta { font-size: 15.5px; font-weight: 600; color: var(--ink); }
.todo .te { font-size: 13px; color: var(--ink-2); margin-top: 3px; }
.todo .te a { color: var(--accent-ink); font-weight: 600; }

/* shared utilities (also used by other pages) */
.op { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-3); white-space: nowrap; align-self: center; }
.op.high { color: var(--alarm); border-color: var(--alarm-line); background: var(--alarm-bg); }
.op.med { color: var(--wait); border-color: var(--wait-line); background: var(--wait-bg); }
.delta { font-family: var(--mono); font-size: 0.66rem; font-weight: 600; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.delta.up { color: var(--go); background: var(--go-bg); }
.delta.down { color: var(--alarm); background: var(--alarm-bg); }
.btn.sm { padding: 9px 14px; font-size: 13px; border-radius: var(--radius-s); }

/* meter bars — native <meter>, brand fill, band overrides */
.bar { width: 100%; height: 8px; border: none; border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); -webkit-appearance: none; appearance: none; }
.bar::-webkit-meter-bar { background: var(--bg); border: none; border-radius: 999px; height: 8px; box-shadow: inset 0 0 0 1px var(--line); }
.bar::-webkit-meter-optimum-value, .bar::-webkit-meter-suboptimum-value, .bar::-webkit-meter-even-less-good-value { background: var(--accent); border-radius: 999px; }
.bar::-moz-meter-bar { background: var(--accent); border-radius: 999px; }
.bar.wait::-webkit-meter-optimum-value, .bar.wait::-webkit-meter-suboptimum-value { background: var(--wait); }
.bar.wait::-moz-meter-bar { background: var(--wait); }
.bar.alarm::-webkit-meter-optimum-value, .bar.alarm::-webkit-meter-suboptimum-value, .bar.alarm::-webkit-meter-even-less-good-value { background: var(--alarm); }
.bar.alarm::-moz-meter-bar { background: var(--alarm); }
.bar.go::-webkit-meter-optimum-value { background: var(--go); } .bar.go::-moz-meter-bar { background: var(--go); }

/* access */
.acc-grp + .acc-grp { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.acc-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.acc-h .al { font-size: 14px; font-weight: 600; color: var(--ink); }
.acc-h .as { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--go-line); background: var(--go-bg); color: var(--go); }
.acc-h .as.wait { border-color: var(--wait-line); background: var(--wait-bg); color: var(--wait); }
.acc-h .as.alarm { border-color: var(--alarm-line); background: var(--alarm-bg); color: var(--alarm); }
.bots { display: grid; grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); gap: 10px; }
.bot { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--bg); font-size: 13px; color: var(--ink-2); }
.bot .vd { width: 8px; height: 8px; }
.bot .bs { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.bot.ok { background: var(--go-bg); border-color: var(--go-line); } .bot.ok .vd { background: var(--go); } .bot.ok .bs { color: var(--go); }
.bot.no { background: var(--alarm-bg); border-color: var(--alarm-line); } .bot.no .vd { background: var(--alarm); } .bot.no .bs { color: var(--alarm); }
.robots-fix { margin: 8px 0 0; padding: 10px 13px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--bg); font-family: var(--mono); font-size: 12.5px; color: var(--ink); white-space: pre; overflow-x: auto; }
.jsurls { list-style: none; margin: 10px 0 0; display: grid; gap: 5px; }
.jsurls li { font-family: var(--mono); font-size: 12px; color: var(--alarm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jsurls li.more { color: var(--ink-4); }

/* readiness dims + pages */
.dims { display: grid; gap: 12px; }
.dim { display: grid; grid-template-columns: 170px 1fr 44px; align-items: center; gap: 14px; }
.dim .dl { font-size: 13.5px; color: var(--ink-2); }
.dim .dl s { text-decoration: none; color: var(--ink-4); font-family: var(--mono); font-size: 11px; margin-left: 6px; }
.dim .dv { font-family: var(--mono); font-size: 13px; font-weight: 600; text-align: right; color: var(--ink-2); }
.dim .dv.go { color: var(--go); } .dim .dv.wait { color: var(--wait); } .dim .dv.alarm { color: var(--alarm); }
/* worst-first, full list kept reachable but height-bounded so a many-page site
   doesn't turn the card into a wall (every other long list here is capped too) */
.pages { margin-top: 20px; border-top: 1px solid var(--line); max-height: 560px; overflow-y: auto; }
.pg { border-bottom: 1px solid var(--line); }
.pg summary { display: flex; align-items: center; gap: 13px; padding: 13px 0; cursor: pointer; list-style: none; }
.pg summary::-webkit-details-marker { display: none; }
.pg summary::before { content: "▸"; color: var(--ink-3); font-size: 11px; }
.pg[open] summary::before { content: "▾"; }
.pgs { font-family: var(--mono); font-weight: 700; font-size: 13px; min-width: 30px; text-align: right; }
.pgs.go { color: var(--go); } .pgs.wait { color: var(--wait); } .pgs.alarm { color: var(--alarm); }
.pgu { font-family: var(--mono); font-size: 13px; color: var(--ink); flex: 1; overflow-wrap: anywhere; }
.pgr { font-size: 12.5px; color: var(--ink-3); font-style: italic; }
.pgd { margin: 2px 0 14px 43px; display: grid; gap: 6px; }
.pgd li { list-style: none; font-size: 13px; color: var(--ink-2); }
.pgd .cs { display: inline-block; min-width: 36px; font-family: var(--mono); color: var(--ink-3); }
.pgd .cs.go { color: var(--go); } .pgd .cs.wait { color: var(--wait); } .pgd .cs.alarm { color: var(--alarm); }
.pgd .fix { color: var(--ink); }
.pgd .lift { display: inline-block; min-width: 30px; margin-left: 6px; font-family: var(--mono); font-size: 11.5px; color: var(--wait); }
/* readiness: "biggest wins" rollup — the few cross-page fixes worth the most */
.wins { margin-top: 18px; display: grid; gap: 8px; }
.win { display: flex; align-items: baseline; gap: 12px; }
.win .wd { font-size: 13.5px; font-weight: 600; color: var(--ink); min-width: 150px; }
.win .wf { flex: 1; font-size: 13px; color: var(--ink-2); }
.win .wp { font-size: 12px; color: var(--ink-4); }
.win .wl { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--wait); }
.win .wl s { text-decoration: none; color: var(--ink-4); font-size: 10px; margin-left: 3px; }

/* narrow content column (mobile, or the 2-col layout on a small laptop): the
   fixed grids above run out of room — the todo title wraps to a sliver and the
   win row overflows the card. Reflow at the column level so it holds anywhere. */
@container (max-width: 460px) {
  .todo .row {
    grid-template-columns: 34px 1fr auto;
    grid-template-areas: "rk ta ta" "rk meta btn";
    align-items: start; row-gap: 9px;
  }
  .todo .rk { grid-area: rk; }
  .todo .row > div { grid-area: ta; }
  .todo .op { grid-area: meta; justify-self: start; align-self: center; }
  .todo .row .btn.sm { grid-area: btn; justify-self: end; align-self: center; }
  .win {
    display: grid; grid-template-columns: 1fr auto;
    grid-template-areas: "wd wl" "wf wf" "wp wp";
    column-gap: 12px; row-gap: 2px; align-items: baseline;
  }
  .win .wd { grid-area: wd; min-width: 0; }
  .win .wf { grid-area: wf; }
  .win .wp { grid-area: wp; }
  .win .wl { grid-area: wl; justify-self: end; }
}

/* citation radar */
.trend { display: flex; gap: 4px; height: 30px; align-items: flex-end; margin: 2px 0 16px; }
.trend .c { flex: 1; max-width: 26px; border-radius: 3px 3px 0 0; background: var(--line-2); min-height: 8px; }
.trend .c.go { background: var(--go); } .trend .c.wait { background: var(--wait); } .trend .c.alarm { background: var(--alarm); }
.vd { width: 9px; height: 9px; border-radius: 999px; flex: none; background: var(--line-2); }
.vd.go { background: var(--go); } .vd.wait { background: var(--wait); } .vd.alarm { background: var(--alarm); }
.vcov { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 6px 0 10px; }
.cov-n { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.cov-n s { text-decoration: none; font-size: 13px; color: var(--ink-3); font-weight: 500; }
.cov-un { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; border: 1px solid var(--alarm-line); background: var(--alarm-bg); color: var(--alarm); }
.cov-un.go { border-color: var(--go-line); background: var(--go-bg); color: var(--go); }
.cov-un.wait { border-color: var(--wait-line); background: var(--wait-bg); color: var(--wait); }
/* demand */
.gp { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.gp:first-of-type { border-top: 0; }
.gp .gh { display: contents; }
.gp .gt { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.gp .gt small { display: block; font-weight: 400; color: var(--ink-3); font-size: 12.5px; margin-top: 2px; }
.gp .gc { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--ink-3); }
.gp .gc.go { color: var(--go); } .gp .gc.wait { color: var(--wait); } .gp .gc.alarm { color: var(--alarm); }
.gp-match { grid-column: 2 / -1; margin: 4px 0 0; font-size: 12.5px; color: var(--ink-3); }
.gp-match s { text-decoration: none; color: var(--ink-3); }
/* the brief — the one line of content that closes a gap */
.gp-write { grid-column: 2 / -1; margin: 8px 0 0; padding: 10px 12px; font-size: 13.5px; line-height: 1.5; color: var(--ink); background: var(--accent-bg, rgba(124, 92, 207, 0.07)); border-left: 2px solid var(--accent); border-radius: 0 var(--radius-s) var(--radius-s) 0; }
.gp-write b { font-weight: 700; color: var(--accent-ink); }
.gp-write-locked { color: var(--ink-3); background: var(--surface-2); border-left-color: var(--line-2); }
.gp-noise { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.gp-noise summary { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--ink-3); cursor: pointer; }
.gp-noise .gh { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; padding: 10px 0 0; }
.gp-noise .vd { background: var(--line-2); }

/* rail cards */
.rail .card-b.rail-actions { display: grid; gap: 10px; padding: 16px; }
.rail-actions form { margin: 0; }
.rail-actions .btn { width: 100%; }
.rec { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--bg); }
.rec .rk { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); width: 44px; flex: none; }
.rec .rv { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ===== Custom address (vanity host) — a Scale customization ===== */
/* The voice card carries a compact link into the dedicated page (setting-up
   state), a prominent "add" CTA when there's no custom address yet, and a quiet
   "manage" line once the custom address is live and shown as the Talk URL. */
.vlink { display: flex; align-items: center; gap: 11px; margin-top: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); text-decoration: none; transition: border-color .12s, background .12s; }
.vlink:hover { border-color: var(--accent-soft); background: var(--accent-tint); }
.vlink .pip { flex: none; }
.vlink-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vlink-txt b { font-size: 13px; font-weight: 600; color: var(--ink); }
.vlink-txt s { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vlink-go { flex: none; color: var(--ink-3); font-size: 15px; }
.vlink:hover .vlink-go { color: var(--accent-ink); }
/* "Use your own address" — the headline call to adopt a custom address. */
.vadd { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 14px 15px; border: 1px solid var(--accent-line); border-radius: var(--radius-s); background: var(--accent-tint); text-decoration: none; transition: box-shadow .14s, transform .14s; }
.vadd:hover { box-shadow: 0 8px 20px -12px rgba(124, 92, 207, 0.7); transform: translateY(-1px); }
.vadd-ico { flex: none; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; font-size: 17px; line-height: 1; }
.vadd-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vadd-txt b { font-size: 13.5px; font-weight: 700; color: var(--accent-ink); }
.vadd-txt s { font-size: 12px; color: var(--ink-3); text-decoration: none; }
.vadd-go { flex: none; color: var(--accent-ink); font-weight: 700; font-size: 15px; }
/* Quiet manage line under a live custom address. */
.vmanage { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12.5px; color: var(--ink-3); text-decoration: none; }
.vmanage .pip { flex: none; }
.vmanage-go { margin-left: auto; font-weight: 600; color: var(--accent-ink); }
.vmanage:hover .vmanage-go { color: var(--accent); }
/* The dedicated page: standard domain-page layout (col-main + rail); the lede
   keeps a readable measure rather than spanning the full width. */
.vpage .lede { max-width: 66ch; margin: 6px 0 4px; }
/* Status banner — the answer to "is it verified yet?". */
.vstat { display: flex; align-items: center; gap: 12px; padding: 14px 15px; border-radius: var(--radius-s); border: 1px solid var(--wait-line); background: var(--wait-bg); }
.vstat.is-live { border-color: var(--go-line); background: var(--go-bg); }
.vstat .pip { flex: none; }
.vstat-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vstat-state { font-size: 14px; font-weight: 700; color: var(--ink); }
.vstat-sub { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }
.vsteps { margin: 0 0 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.vsteps b { font-weight: 600; color: var(--ink); }
/* Panel + form shared with the below-Scale upgrade CTA on the overview. */
.vanity { margin-top: 16px; padding: 14px 15px; border: 1px solid var(--accent-soft); border-radius: var(--radius-s); background: var(--accent-tint); }
.vanity-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.vanity-k { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }
.vanity-hint { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; margin: 0 0 10px; }
.vanity-hint b { color: var(--ink-2); font-weight: 600; }
.vanity-hint .mono { font-family: var(--mono); color: var(--ink-2); }
.vanity-form { display: flex; gap: .5rem; margin: 0; }
.vanity-form input { flex: 1; min-width: 0; }
.vanity-remove { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.vanity-up { display: inline-block; margin-top: 2px; font-size: 13px; font-weight: 700; color: var(--accent-ink); }
.cov-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.cov-manage { display: block; font-size: 12.5px; font-weight: 600; color: var(--accent-ink); margin-top: 12px; }
.cov-manage:hover { color: var(--accent); }

/* ===== domain section tabs (Overview · Plan & billing) ===== */
.dtabs { display: flex; align-items: center; gap: 2px; margin: 16px 0 0; padding: 0 4px; border-bottom: 1px solid var(--line); }
.dtab { padding: 11px 14px 12px; font-size: 14.5px; font-weight: 600; color: var(--ink-3); border-bottom: 2.5px solid transparent; margin-bottom: -1px; }
.dtab:hover { color: var(--ink); }
.dtab.active { color: var(--ink); border-bottom-color: var(--accent); }

/* ===== rail: quiet plan status (replaces the exposed picker) ===== */
.plan-quiet { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(135deg, var(--surface-2), var(--surface)); padding: 16px 18px 15px; }
.pq-eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 11px; }
.pq-line { display: flex; align-items: baseline; gap: 10px; }
.pq-name { font-family: var(--brand); font-size: 19px; font-weight: 700; color: var(--ink); }
.pq-price { margin-left: auto; font-family: var(--mono); font-size: 13px; color: var(--ink-2); }
.pq-price s { font-size: 11px; color: var(--ink-4); text-decoration: none; }
.pq-cap { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }
.pq-usage { margin-top: 13px; }
.pq-meter { display: flex; align-items: baseline; justify-content: space-between; font-size: 11.5px; color: var(--ink-3); margin-bottom: 6px; }
.pq-meter b { font-family: var(--mono); color: var(--ink-2); }
.pq-manage { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--accent-ink); }
.pq-manage:hover { color: var(--accent); }

/* ===== feature gate: locked capability with a blurred teaser + unlock ===== */
.lock-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--accent-tint); color: var(--accent-ink); border: 1px solid var(--accent-soft); }
.card.locked { position: relative; }
.locked-preview { position: absolute; inset: 0; padding: 22px; filter: blur(5px) saturate(0.82); opacity: 0.5; pointer-events: none; user-select: none; overflow: hidden; }
.locked-veil { position: relative; z-index: 1; min-height: 230px; display: grid; place-content: center; justify-items: center; text-align: center; padding: 34px 24px; background: linear-gradient(180deg, rgba(248, 246, 240, 0.55) 0%, rgba(248, 246, 240, 0.93) 58%); }
.locked-veil .inner { max-width: 440px; }
.lock-ico { width: 46px; height: 46px; border-radius: var(--radius-btn); background: var(--surface); border: 1px solid var(--line-2); display: grid; place-items: center; margin: 0 auto 14px; box-shadow: var(--shadow-s); }
.lock-ico svg { width: 22px; height: 22px; stroke: var(--accent); fill: none; stroke-width: 1.9; }
.locked-veil h2 { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.locked-veil .vp { font-size: 14px; color: var(--ink-2); margin: 9px auto 18px; max-width: 42ch; }
.locked-veil .vp b { color: var(--ink); font-weight: 700; }
.unlock-cta { font-size: 15px; }
.veil-sub { display: block; margin-top: 12px; font-size: 12.5px; color: var(--ink-3); }
.veil-sub a { font-weight: 600; }
/* decorative blurred preview bits (aria-hidden) */
.lp-voice { display: flex; align-items: center; gap: 16px; }
.lp-orb { width: 72px; height: 72px; flex: none; border-radius: 50%; background: var(--accent-grad); display: grid; place-items: center; box-shadow: var(--shadow-m); }
.lp-orb svg { width: 30px; height: 30px; stroke: #fff; fill: none; stroke-width: 2; }
.lp-wave { display: flex; align-items: center; gap: 5px; height: 40px; }
.lp-wave i { width: 5px; border-radius: 3px; background: var(--accent); opacity: 0.55; }
.lp-wave i:nth-child(1) { height: 40%; } .lp-wave i:nth-child(2) { height: 78%; }
.lp-wave i:nth-child(3) { height: 100%; } .lp-wave i:nth-child(4) { height: 58%; }
.lp-wave i:nth-child(5) { height: 86%; } .lp-wave i:nth-child(6) { height: 44%; }
.lp-wave i:nth-child(7) { height: 70%; } .lp-wave i:nth-child(8) { height: 30%; }

/* ===== Plan & billing page: current strip, tier ladder, usage ===== */
.cur { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; padding: 20px 22px; border: 1px solid var(--accent-soft); border-radius: var(--radius); background: radial-gradient(120% 140% at 0% 0%, var(--accent-tint), var(--surface) 70%); box-shadow: var(--shadow-m); }
.cur .kicker { margin: 0 0 4px; }
.cur-name { font-family: var(--brand); font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.cur-price { font-size: 14px; color: var(--ink-2); margin-top: 2px; }
.tiers { display: grid; gap: 12px; }
.tier { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.tier.current { border-color: var(--accent-soft); background: var(--accent-tint); }
.tier.reco { border-color: var(--go-line); box-shadow: 0 0 0 2px var(--go-bg); }
.tier .t-mark { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-2); flex: none; }
.tier.current .t-mark { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3px var(--surface); }
.t-id { min-width: 0; }
.t-name { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.t-cap { font-size: 13px; color: var(--ink-2); margin-top: 3px; }
.t-feat { font-size: 12.5px; color: var(--ink-3); margin-top: 5px; }
.t-right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.t-right form { margin: 0; }
.t-price b { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.t-price s { font-size: 12px; color: var(--ink-3); text-decoration: none; font-family: var(--mono); }
.t-now { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink); white-space: nowrap; }
.reco-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--go); background: var(--go-bg); border: 1px solid var(--go-line); border-radius: 999px; padding: 2px 8px; }
.usage .u-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; }
.usage .u-n { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.usage .u-n b { color: var(--accent); }
.usage .u-n s { font-size: 13px; color: var(--ink-3); font-weight: 500; text-decoration: none; }

@media (max-width: 560px) {
  .tier { grid-template-columns: auto 1fr; }
  .tier .t-right { grid-column: 2; align-items: flex-start; text-align: left; }
}

@media (max-width: 1000px) {
  .phero { grid-template-columns: 1fr; gap: 22px; }
  .stages { grid-template-columns: 1fr; }
  .layout { grid-template-columns: 1fr; }
  .layout .rail { position: static; }
  .summary h1 { font-size: 28px; }
}

/* ============================================================
   Docs (/docs/) — the in-product explainer set. Reuses the
   Graphite tokens and shares the diagram vocabulary already
   defined above (.fnl/.chain/.ring/.trend/.sov/.bots/.dim/.bar,
   .geo-steps/.geo-bands, .method, .card). Only doc-specific
   layout, prose and the generic flow diagram live here.
   ============================================================ */

/* page = reading column + sticky directory rail */
.doc-shell { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 40px; align-items: start; }
.doc { min-width: 0; max-width: 760px; }
.doc-aside { position: sticky; top: 32px; }

/* directory rail */
.doc-nav { display: grid; gap: 18px; font-size: 13px; }
.doc-nav-home { font-weight: 600; color: var(--ink); }
.doc-nav-group { display: grid; gap: 5px; }
.doc-nav-h { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 2px; }
.doc-nav-link { color: var(--ink-3); line-height: 1.35; padding: 1px 0; }
.doc-nav-link:hover { color: var(--ink); }
.doc-nav-link.on { color: var(--ink); font-weight: 500; box-shadow: inset 2px 0 0 var(--accent); padding-left: 9px; margin-left: -11px; }

/* prose inside an article */
.doc h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 12px; }
.doc h3 { font-size: 15px; font-weight: 600; margin: 22px 0 7px; }
.doc p { font-size: 14.5px; line-height: 1.62; color: var(--ink-2); margin: 0 0 13px; }
.doc ul, .doc ol { margin: 0 0 13px; padding-left: 20px; }
.doc li { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); margin: 4px 0; }
.doc strong { color: var(--ink); font-weight: 600; }
.doc a:not(.btn):not(.crumb) { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.doc a:not(.btn):not(.crumb):hover { text-decoration-color: var(--ink); }
.doc code { font-family: var(--mono); font-size: 0.86em; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 1px 5px; overflow-wrap: anywhere; }

/* a diagram + its caption */
.doc-figure { margin: 18px 0 4px; }
.doc-cap { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); line-height: 1.5; margin-top: 9px; }

/* generic pipeline diagram: nodes joined by arrows, horizontal or .col */
.doc-flow { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.flow-node { flex: 1 1 0; min-width: 96px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); box-shadow: var(--shadow-s); padding: 11px 12px; }
.flow-node.planned { opacity: 0.5; }
.flow-node .fn-k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); }
.flow-node .fn-t { font-size: 13px; font-weight: 600; margin: 3px 0 2px; }
.flow-node .fn-s { font-size: 12px; color: var(--ink-3); line-height: 1.4; }
.flow-arr { flex: 0 0 26px; display: grid; place-content: center; color: var(--ink-4); font-size: 13px; }
.doc-flow.col { flex-direction: column; }
.doc-flow.col .flow-arr { flex: 0 0 22px; transform: rotate(90deg); }

/* callout note */
.doc-note { border: 1px solid var(--line); border-left: 2px solid var(--ink); border-radius: var(--radius-s); background: var(--surface); padding: 12px 15px; margin: 16px 0; }
.doc-note .nk { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 4px; }
.doc-note p { margin: 0; font-size: 13.5px; }
.doc-note.go { border-left-color: var(--go); } .doc-note.alarm { border-left-color: var(--alarm); }

/* clean table */
.doc-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13.5px; }
.doc-table th { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); text-align: left; font-weight: 500; padding: 8px 12px; border-bottom: 1px solid var(--line-2); }
.doc-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: top; line-height: 1.5; }
.doc-table tr:last-child td { border-bottom: 0; }
.doc-table td strong { color: var(--ink); }

/* term → definition list */
.doc-defs { display: grid; gap: 0; margin: 16px 0; }
.doc-defs > div { display: grid; grid-template-columns: 168px 1fr; gap: 16px; padding: 11px 0; border-top: 1px solid var(--line); }
.doc-defs > div:first-child { border-top: 0; }
.doc-defs dt { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.doc-defs dd { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; margin: 0; }

/* hub directory: one card per concept, grouped by section */
.doc-dir { margin-top: 8px; }
.doc-dir-h { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-4); margin: 28px 0 12px; }
.doc-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.doc-card { display: block; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-s); padding: 14px 16px; color: inherit; transition: border-color 0.14s ease; }
.doc-card:hover { border-color: var(--line-2); }
.doc-card .dc-t { font-size: 14px; font-weight: 600; color: var(--ink); }
.doc-card .dc-b { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; margin-top: 4px; }

@media (max-width: 1000px) {
  .doc-shell { grid-template-columns: 1fr; gap: 24px; }
  .doc-aside { position: static; order: -1; }
  .doc-cards { grid-template-columns: 1fr; }
  .doc-defs > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ============================================================
   Domains index — "Observatory": the post-sign-in board. A calm
   monitoring surface in the Warm brand — a portfolio presence
   header, then each domain as a card with its own ring gauge,
   readiness/citation meters and a trend sparkline. Everything is
   scoped under .dboard so it reuses the styleguide tokens without
   touching them; a few page-local tints/geometry live on .dboard.
   ============================================================ */

.main > .dboard { max-width: 1140px; }
.dboard {
  /* Deliberate override: the board's accent fill is warmer than the global one.
     Every other token it used to define now lives in :root. */
  --accent-soft: #F6E4DA;
}

/* pips (board-scoped; base.html's sidebar pips keep the global rules) */
.dboard .pip { display:inline-block; width:9px; height:9px; border-radius:50%; flex:none; background:var(--ink-4); }
.dboard .pip.go { background:var(--go); } .dboard .pip.wait { background:var(--wait); }
.dboard .pip.alarm { background:var(--alarm); } .dboard .pip.accent { background:var(--accent); }

/* buttons */
.dboard .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  border:1px solid transparent; font-family:inherit; font-size:15px; font-weight:600; line-height:1;
  padding:13px 20px; border-radius:var(--radius-btn); transition:transform .15s, box-shadow .15s, filter .15s; }
.dboard .btn .arr { transition:transform .2s; }
.dboard .btn:hover .arr { transform:translateX(3px); }
.dboard .btn-primary { background:var(--accent-grad); color:#fff; box-shadow:var(--shadow-btn); }
.dboard .btn-primary:hover { transform:translateY(-1px); filter:saturate(1.05); }
.dboard .btn-primary:focus-visible { outline:none; box-shadow:var(--shadow-btn), 0 0 0 3px rgba(124,92,207,.35); }
.dboard .btn-alarm { background:var(--alarm); color:#fff; box-shadow:0 14px 30px -16px rgba(192,73,47,.7); }
.dboard .btn-alarm:hover { transform:translateY(-1px); filter:saturate(1.05); }

/* ---------- portfolio summary header ---------- */
.dboard .board-head { position:relative; border:1px solid var(--line-2); border-radius:24px; overflow:hidden;
  background-image:radial-gradient(140% 160% at 10% 0%, var(--bg-peach), var(--surface) 55%);
  box-shadow:0 24px 52px -28px rgba(124, 92, 207, 0.36), 0 1px 3px rgba(26, 26, 26, 0.06); margin-bottom:22px; }
.dboard .head-grid { display:grid; grid-template-columns:1fr minmax(280px,360px); gap:34px; padding:30px 34px 26px; align-items:center; }
.dboard .kicker { display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent-ink); margin-bottom:12px; }
.dboard .kicker .star { width:13px; height:13px; fill:var(--accent); }
.dboard .head-h { font-family:var(--brand); font-size:clamp(26px,3vw,33px); font-weight:700; letter-spacing:-.02em; line-height:1.08; color:var(--ink); }
.dboard .head-sub { font-size:15px; color:var(--ink-2); margin-top:11px; max-width:48ch; }
.dboard .head-sub b { color:var(--ink); font-weight:600; }
.dboard .counters { display:flex; flex-wrap:wrap; gap:9px; margin-top:20px; }
.dboard .counter { display:inline-flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-pill); padding:8px 14px 8px 12px; box-shadow:var(--shadow-s); font-size:13px; color:var(--ink-2); }
.dboard .counter b { font-family:var(--mono); font-weight:600; color:var(--ink); }
.dboard .counter .pip { width:8px; height:8px; }

.dboard .hero-presence { border-left:1px solid var(--line); padding-left:30px; }
.dboard .hp-label { font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.dboard .hp-fig { display:flex; align-items:baseline; gap:10px; margin:6px 0 2px; }
.dboard .hp-num { font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:clamp(48px,6vw,60px);
  font-weight:500; letter-spacing:-.03em; line-height:.9; }
.dboard .hp-num.go { color:var(--go); } .dboard .hp-num.wait { color:var(--wait); } .dboard .hp-num.alarm { color:var(--alarm); }
.dboard .hp-of { font-family:var(--mono); font-size:16px; color:var(--ink-4); }
.dboard .hp-note { font-size:12.5px; color:var(--ink-3); }
.dboard .hp-note b { color:var(--ink-2); font-weight:600; }
.dboard .scale { margin-top:16px; }
.dboard .scale-bar { width:100%; height:16px; display:block; }
.dboard .scale .seg.alarm { fill:var(--alarm-line); }
.dboard .scale .seg.wait { fill:var(--wait-line); }
.dboard .scale .seg.go { fill:var(--go-line); }
.dboard .scale-pin { fill:var(--ink); }
.dboard .scale-labels { display:flex; justify-content:space-between; margin-top:9px; font-size:10.5px;
  font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-4); }
.dboard .scale-labels .lo { color:var(--alarm); } .dboard .scale-labels .mid { color:var(--wait); } .dboard .scale-labels .hi { color:var(--go); }

.dboard .addbar { display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:18px 34px 22px;
  border-top:1px solid var(--line); background:rgba(255,255,255,.45); margin:0; }
.dboard .addbar-l { font-size:14px; font-weight:600; color:var(--ink); flex:none; }
.dboard .addbar-field { display:flex; gap:10px; flex:1; min-width:260px; }
.dboard .addbar input { flex:1; min-width:0; padding:13px 16px; border:1px solid var(--line-2); border-radius:var(--radius-btn);
  font-family:var(--mono); font-size:14px; background:var(--surface); color:var(--ink); }
.dboard .addbar input::placeholder { color:var(--ink-4); }
.dboard .addbar input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(124,92,207,.16); }

/* ---------- the board ---------- */
.dboard .board { display:grid; gap:14px; }
.dboard .dcard { position:relative; display:grid; grid-template-columns:84px minmax(0,1fr) 210px 118px 22px;
  gap:24px; align-items:center; background:linear-gradient(180deg, var(--surface), #fdfcf8); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 26px; box-shadow:var(--shadow-card); color:var(--ink);
  transition:transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s, border-color .18s; }
.dboard a.dcard:hover { transform:translateY(-3px); box-shadow:var(--shadow-m); border-color:var(--line-2); }
.dboard a.dcard:focus-visible { outline:none; box-shadow:var(--shadow-m), 0 0 0 3px rgba(124,92,207,.35); }
.dboard a.dcard:hover .go-arrow { transform:translateX(4px); color:var(--accent-ink); }
.dboard .dcard.sig-alarm { box-shadow:inset 4px 0 0 var(--alarm), var(--shadow-card); }
.dboard a.dcard.sig-alarm:hover { box-shadow:inset 4px 0 0 var(--alarm), var(--shadow-m); }
.dboard .dcard.sig-wait { box-shadow:inset 4px 0 0 var(--wait), var(--shadow-card); }
.dboard a.dcard.sig-wait:hover { box-shadow:inset 4px 0 0 var(--wait), var(--shadow-m); }
.dboard .dcard.sig-live { box-shadow:inset 4px 0 0 var(--accent), var(--shadow-card); }
.dboard a.dcard.sig-live:hover { box-shadow:inset 4px 0 0 var(--accent), var(--shadow-m); }

.dboard .gauge { position:relative; width:84px; height:84px; display:grid; place-items:center; }
.dboard .gauge svg { width:84px; height:84px; }
.dboard .ring-track { fill:none; stroke:var(--line-2); stroke-width:6; }
.dboard .ring-val { fill:none; stroke-width:6; stroke-linecap:round; transform:rotate(-90deg); transform-origin:50% 50%; }
.dboard .ring-val.go { stroke:var(--go); } .dboard .ring-val.wait { stroke:var(--wait); } .dboard .ring-val.alarm { stroke:var(--alarm); }
.dboard .gauge-num { position:absolute; display:grid; place-items:center; text-align:center; line-height:1; }
.dboard .gauge-num b { font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:23px; font-weight:600; letter-spacing:-.02em; }
.dboard .gauge-num.go b { color:var(--go); } .dboard .gauge-num.wait b { color:var(--wait); } .dboard .gauge-num.alarm b { color:var(--alarm); }
.dboard .gauge-num s { display:block; text-decoration:none; font-size:8px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-4); margin-top:1px; }
.dboard .gauge.pending circle.ring-track { stroke:var(--wait-line); stroke-dasharray:3 6; }
.dboard .gauge.pending .gauge-num b { font-size:22px; color:var(--ink-4); }

.dboard .ident { min-width:0; }
.dboard .ident-top { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.dboard .dname { font-family:var(--mono); font-size:17px; font-weight:500; color:var(--ink); letter-spacing:-.01em; }
.dboard .dname .tld { color:var(--accent); }
.dboard .plan { font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:var(--radius-pill); line-height:1; }
.dboard .plan.starter { background:var(--surface-2); color:var(--ink-3); border:1px solid var(--line); }
.dboard .plan.growth { background:var(--accent-tint); color:var(--accent-ink); border:1px solid var(--accent-soft); }
.dboard .plan.scale { background:var(--accent-ink); color:#fff; border:1px solid transparent; box-shadow:0 6px 14px -8px rgba(124,92,207,.8); }
.dboard .state-tag { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; padding:4px 10px;
  border-radius:var(--radius-pill); background:var(--wait-bg); color:var(--wait); border:1px solid var(--wait-line); }
.dboard .vanity-chip { display:inline-flex; align-items:center; gap:6px; max-width:100%; font-family:var(--mono); font-size:11px; letter-spacing:.02em; color:var(--ink-2); padding:4px 10px; border-radius:var(--radius-pill); background:var(--surface-2); border:1px solid var(--line); }
.dboard .ident-note { font-size:12.5px; color:var(--ink-3); margin-top:6px; }
.dboard .ident-note b { color:var(--ink-2); font-weight:600; }

.dboard .alert { display:inline-flex; align-items:flex-start; gap:9px; margin-top:10px; padding:9px 13px;
  border-radius:var(--radius-s); font-size:13px; line-height:1.45; max-width:54ch; }
.dboard .alert svg { width:15px; height:15px; flex:none; margin-top:1px; }
.dboard .alert.alarm { background:var(--alarm-bg); border:1px solid var(--alarm-line); color:var(--alarm); }
.dboard .alert.wait { background:var(--wait-bg); border:1px solid var(--wait-line); color:var(--wait); }
.dboard .alert .at { color:var(--ink); font-weight:500; }
.dboard .alert .ab { font-weight:700; }

.dboard .reading { display:flex; align-items:center; flex-wrap:wrap; gap:4px 9px; margin-top:10px; font-size:13px; color:var(--accent-ink); font-weight:600; min-width:0; }
.dboard .rdot { width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none; }
.dboard .reading .url { font-family:var(--mono); font-weight:500; color:var(--ink-2); min-width:0; overflow-wrap:anywhere; }
.dboard .rbar { height:3px; border-radius:999px; background:var(--accent-soft); overflow:hidden; margin-top:8px; max-width:240px; }
.dboard .rbar i { display:block; height:100%; width:38%; border-radius:999px; background:linear-gradient(90deg, transparent, var(--accent), transparent); }

.dboard .metrics { display:grid; gap:9px; }
.dboard .metric { display:grid; grid-template-columns:62px 1fr 26px; align-items:center; gap:9px; }
.dboard .metric-l { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.dboard .metric-v { font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:12.5px; font-weight:600; text-align:right; }
.dboard .metric-v.go { color:var(--go); } .dboard .metric-v.wait { color:var(--wait); } .dboard .metric-v.alarm { color:var(--alarm); }
.dboard meter.hair { -webkit-appearance:none; appearance:none; width:100%; height:6px; border:none; border-radius:999px; background:var(--surface-2); }
.dboard meter.hair::-webkit-meter-bar { background:var(--surface-2); border:1px solid var(--line); border-radius:999px; height:6px; }
.dboard meter.hair::-webkit-meter-optimum-value { background:var(--go); border-radius:999px; }
.dboard meter.hair::-webkit-meter-suboptimum-value { background:var(--wait); border-radius:999px; }
.dboard meter.hair::-webkit-meter-even-less-good-value { background:var(--alarm); border-radius:999px; }
.dboard meter.hair::-moz-meter-bar { border-radius:999px; }
.dboard meter.hair:-moz-meter-optimum::-moz-meter-bar { background:var(--go); }
.dboard meter.hair:-moz-meter-sub-optimum::-moz-meter-bar { background:var(--wait); }
.dboard meter.hair:-moz-meter-sub-sub-optimum::-moz-meter-bar { background:var(--alarm); }
.dboard .metrics-pending, .dboard .metrics-note { font-size:12.5px; color:var(--ink-3); line-height:1.5; }
.dboard .metrics-pending b, .dboard .metrics-note b { color:var(--ink-2); font-weight:600; display:block; }

.dboard .trend { display:grid; justify-items:end; gap:7px; }
.dboard .spark { width:72px; height:26px; display:block; }
.dboard .spark-line { fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.dboard .spark-line.go { stroke:var(--go); } .dboard .spark-line.wait { stroke:var(--wait); } .dboard .spark-line.alarm { stroke:var(--alarm); }
.dboard .spark-area { opacity:.1; }
.dboard .spark-area.go { fill:var(--go); } .dboard .spark-area.wait { fill:var(--wait); } .dboard .spark-area.alarm { fill:var(--alarm); }
.dboard .spark-dot.go { fill:var(--go); } .dboard .spark-dot.wait { fill:var(--wait); } .dboard .spark-dot.alarm { fill:var(--alarm); }
.dboard .delta { font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:11px; font-weight:600;
  padding:3px 9px; border-radius:var(--radius-pill); display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.dboard .delta.up { color:var(--go); background:var(--go-bg); }
.dboard .delta.dn { color:var(--alarm); background:var(--alarm-bg); }
.dboard .delta.flat { color:var(--ink-3); background:var(--surface-2); }
.dboard .checked { font-family:var(--mono); font-size:11.5px; color:var(--ink-3); display:inline-flex; align-items:center; gap:5px; }
.dboard .checked svg { width:12px; height:12px; stroke:var(--ink-4); fill:none; stroke-width:1.6; }
.dboard .cta-verify { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--wait);
  background:var(--wait-bg); border:1px solid var(--wait-line); border-radius:var(--radius-btn); padding:10px 14px; white-space:nowrap; }
.dboard a.dcard:hover .cta-verify { filter:saturate(1.05); }
.dboard a.dcard:hover .cta-verify .arr { transform:translateX(3px); }
.dboard .cta-verify .arr { transition:transform .2s; }
.dboard .go-arrow { justify-self:end; font-size:20px; color:var(--ink-4); transition:transform .18s, color .18s; line-height:1; }

/* ---------- billing-paused banner (board-scoped) ---------- */
.dboard .billing-banner { display:flex; align-items:center; gap:22px; flex-wrap:wrap; background:var(--alarm-bg);
  border:1px solid var(--alarm-line); border-radius:var(--radius); padding:22px 26px; box-shadow:var(--shadow-s); margin-bottom:22px; }
.dboard .billing-banner .bb-ico { width:42px; height:42px; border-radius:12px; background:var(--surface);
  border:1px solid var(--alarm-line); display:grid; place-items:center; flex:none; }
.dboard .billing-banner .bb-ico svg { width:20px; height:20px; stroke:var(--alarm); fill:none; stroke-width:1.8; }
.dboard .billing-banner .bb-text { flex:1; min-width:240px; }
.dboard .billing-banner .bb-text b { font-family:var(--brand); font-weight:700; color:var(--alarm); }
.dboard .billing-banner .bb-text p { font-size:14px; color:var(--ink); line-height:1.5; margin-top:3px; max-width:64ch; }
.dboard .billing-banner form { margin:0; }

/* ---------- empty state (board-scoped) ---------- */
.dboard .empty { border:1px solid var(--line); border-radius:24px;
  background-image:radial-gradient(120% 130% at 50% 0%, var(--bg-peach), var(--surface) 60%);
  box-shadow:var(--shadow-m); padding:54px 40px 46px; text-align:center; display:grid; justify-items:center; }
.dboard .obs-mark { width:128px; height:128px; margin-bottom:8px; }
.dboard .obs-mark .r1 { fill:none; stroke:var(--line-2); stroke-width:1.5; }
.dboard .obs-mark .r2 { fill:none; stroke:var(--accent-soft); stroke-width:1.5; }
.dboard .obs-mark .core { fill:var(--accent); }
.dboard .obs-mark .core-glow { fill:var(--accent); opacity:.16; }
.dboard .obs-mark .moon { fill:var(--accent-ink); }
.dboard .empty .kicker { justify-content:center; }
.dboard .empty h2 { font-family:var(--brand); font-size:24px; font-weight:700; letter-spacing:-.02em; color:var(--ink); }
.dboard .empty p { font-size:15.5px; color:var(--ink-2); margin-top:10px; max-width:44ch; }
.dboard .empty-form { display:flex; gap:10px; margin-top:24px; width:100%; max-width:440px; }
.dboard .empty-form input { flex:1; min-width:0; padding:13px 16px; border:1px solid var(--line-2); border-radius:var(--radius-btn);
  font-family:var(--mono); font-size:14px; background:var(--surface); color:var(--ink); }
.dboard .empty-form input::placeholder { color:var(--ink-4); }
.dboard .empty-form input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(124,92,207,.16); }

/* ---------- entrance + motion ---------- */
@keyframes dboard-rise { to { opacity:1; transform:none; } }
@keyframes dboard-pulse { 70% { box-shadow:0 0 0 7px rgba(124,92,207,0); } 100% { box-shadow:0 0 0 0 rgba(124,92,207,0); } }
@keyframes dboard-slide { 0% { transform:translateX(-120%); } 100% { transform:translateX(340%); } }
@media (prefers-reduced-motion: no-preference) {
  .dboard .reveal { opacity:0; transform:translateY(13px); animation:dboard-rise .6s cubic-bezier(.2,.7,.2,1) forwards; }
  .dboard .d1 { animation-delay:.05s; } .dboard .d2 { animation-delay:.10s; } .dboard .d3 { animation-delay:.15s; }
  .dboard .d4 { animation-delay:.20s; } .dboard .d5 { animation-delay:.25s; } .dboard .d6 { animation-delay:.30s; }
  .dboard .d7 { animation-delay:.35s; } .dboard .d8 { animation-delay:.40s; }
  .dboard .rdot { box-shadow:0 0 0 0 rgba(124,92,207,.5); animation:dboard-pulse 2s infinite; }
  .dboard .pip.accent { animation:dboard-pulse 2s infinite; }
  .dboard .rbar i { animation:dboard-slide 1.9s ease-in-out infinite; }
}

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .dboard .head-grid { grid-template-columns:1fr; gap:24px; }
  .dboard .hero-presence { border-left:none; border-top:1px solid var(--line); padding-left:0; padding-top:22px; }
  .dboard .dcard { grid-template-columns:72px minmax(0,1fr) 22px;
    grid-template-areas:"gauge ident arrow" "blank metrics arrow" "blank trend arrow"; gap:14px 20px; }
  .dboard .gauge { grid-area:gauge; } .dboard .ident { grid-area:ident; }
  .dboard .metrics, .dboard .metrics-pending, .dboard .metrics-note { grid-area:metrics; }
  .dboard .trend { grid-area:trend; grid-template-columns:auto auto; align-items:center; justify-items:start; gap:12px; }
  .dboard .trend .checked { grid-column:1 / -1; }
  .dboard .go-arrow { grid-area:arrow; align-self:start; }
}
@media (max-width: 680px) {
  .dboard .head-grid { padding:24px 22px 20px; }
  .dboard .addbar { padding:16px 22px 20px; }
  .dboard .addbar-field { flex-direction:column; }
  .dboard .dcard { grid-template-columns:64px minmax(0,1fr); grid-template-areas:"gauge ident" "metrics metrics" "trend trend"; gap:14px 16px; }
  .dboard .go-arrow { display:none; }
  .dboard .empty { padding:40px 24px 34px; }
  .dboard .empty h2, .dboard .empty p, .dboard .empty-form { max-width:100%; }
  .dboard .empty-form { flex-direction:column; }
  .dboard .empty-form input, .dboard .empty-form .btn { width:100%; }
}

/* ============================================================
   Domain overview — Four Capabilities IA
   Chat · Voice · AEO (Readiness + Coverage) · GapRadar, mirroring
   the marketing frontpage. Replaces the AI-presence-stack funnel.
   Reuses .rec .dims .wins .pages .gp
   .plan-quiet .cov-* .locked-veil from the blocks above.
   ============================================================ */

/* general eyebrow pill (the funnel-scoped .presence .pl .eyebrow is gone) */
.eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink); background: rgba(124, 92, 207, 0.08); border: 1px solid var(--accent-soft); border-radius: 999px; padding: 4px 10px; }
.eyebrow svg { width: 14px; height: 14px; stroke: var(--accent); fill: none; stroke-width: 1.8; }
.eyebrow .hot { font-size: 9.5px; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 999px; background: var(--accent); color: #fff; }
.eyebrow .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); animation: pulsering 2s infinite; }
@keyframes pulsering { 0% { box-shadow: 0 0 0 0 rgba(124, 92, 207, 0.5); } 70% { box-shadow: 0 0 0 8px rgba(124, 92, 207, 0); } 100% { box-shadow: 0 0 0 0 rgba(124, 92, 207, 0); } }

/* status tags reused across capability cards + gapradar themes */
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; border: 1px solid var(--line-2); color: var(--ink-3); background: var(--surface-2); }
.tag.go { color: var(--go); background: var(--go-bg); border-color: var(--go-line); }
.tag.alarm { color: var(--alarm); background: var(--alarm-bg); border-color: var(--alarm-line); }
.tag.wait { color: var(--wait); background: var(--wait-bg); border-color: var(--wait-line); }
.tag.cool { color: var(--ink-3); background: var(--surface-2); border-color: var(--line); }

/* Do this next — one lead action + the rest */
.lead { background-image: linear-gradient(135deg, rgba(124, 92, 207, 0.18) 0%, rgba(124, 92, 207, 0.09) 55%, transparent 100%); border-color: rgba(124, 92, 207, 0.28); box-shadow: 0 32px 60px -24px rgba(124, 92, 207, 0.68); padding: 26px 28px; }
.lead-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 26px; align-items: center; }
.lead-main h2 { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; margin: 14px 0 8px; line-height: 1.14; }
.lead-main .lede { margin: 0; max-width: 58ch; }
.lead-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.lead-then { border-left: 1px solid rgba(124, 92, 207, 0.20); padding-left: 24px; }
.lead-then .then-h { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 10px; }
.then-row { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; color: inherit; }
.then-row + .then-row { border-top: 1px solid var(--line); }
.then-no { font-family: var(--brand); font-weight: 700; color: var(--ink-4); font-size: 14px; }
.then-t { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.then-row:hover .then-t { color: var(--accent-ink); }
.then-e { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 1px; }

/* capabilities section */
.caps-div { display: flex; align-items: center; margin: 26px 0 22px; }
.caps-div span { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); flex: none; margin-right: 14px; }
.caps-div::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.caprow { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.cap { padding: 24px; display: flex; flex-direction: column; }
.cap-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cap h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 4px; }
.cap-sub { font-size: 13.5px; color: var(--ink-2); margin: 0 0 16px; }
.cap label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-4); margin: 14px 0 7px; }
.cap-metric { display: flex; align-items: baseline; gap: 8px; margin-bottom: 9px; }
.cap-metric b { font-family: var(--brand); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.cap-metric s { text-decoration: none; font-size: 13px; color: var(--ink-3); }
.cap .rec { margin-bottom: 0; }
.cap .rec.embed .rv { font-size: 11px; }
.cap-foot { margin-top: auto; padding-top: 18px; }
.cap-foot .btn { width: 100%; }

/* voice waveform motif */
.wave-wrap { display: grid; place-items: center; gap: 14px; padding: 18px; border-radius: var(--radius-s); background: var(--surface-2); border: 1px solid var(--line); margin-bottom: 4px; }
.wave { display: flex; align-items: center; justify-content: center; gap: 5px; height: 60px; width: 170px; border-radius: 26px 26px 26px 8px; background: var(--accent-grad); box-shadow: 0 16px 36px -14px rgba(124, 92, 207, 0.7); }
.wave i { width: 3px; border-radius: 999px; background: #fff; animation: wave 1.1s ease-in-out infinite; }
@keyframes wave { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
.wave-q { font-size: 13px; color: var(--ink-2); text-align: center; max-width: 30ch; }

/* AEO umbrella card — one score, composed of Readiness + Citation */
.aeo-hero { display: grid; grid-template-columns: 188px minmax(0, 1fr); gap: 28px; align-items: center; margin: 18px 0 6px; }
.aeo-ring { position: relative; width: 188px; height: 188px; display: grid; place-items: center; margin: 0 auto; }
.aeo-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.aeo-ring circle { fill: none; stroke-width: 3; }
.aeo-ring .trk { stroke: #EDE6DB; }
.aeo-ring .ghost { stroke: rgba(124, 92, 207, 0.32); stroke-linecap: round; }
.aeo-ring .live { stroke: var(--accent); stroke-linecap: round; }
.aeo-ring .live.go { stroke: var(--go); }
.aeo-ring .live.wait { stroke: var(--wait); }
.aeo-ring .live.alarm { stroke: var(--alarm); }
.aeo-ring-c { position: absolute; display: grid; place-items: center; text-align: center; }
.aeo-num { font-family: var(--brand); font-size: 50px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--accent-2); background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.aeo-lab { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-4); margin-top: 7px; }
.aeo-pot { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.aeo-pot b { color: var(--accent-ink); }
.aeo-lede h3 { font-size: 20px; margin-bottom: 6px; }
.compose { margin-top: 14px; }
.compose-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.compose-h s { color: var(--ink-4); font-weight: 400; text-decoration: none; }
.compose-v { font-weight: 400; color: var(--ink-3); }
.compose-v b { color: var(--ink); font-weight: 700; }
.compose-v b.accent { color: var(--accent-ink); }
.compose meter.bar { width: 100%; height: 10px; }
.compose-locked meter.bar { opacity: 0.45; }
/* collapsible drill-downs */
.drills { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.drill { border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); overflow: hidden; }
.drill > summary { display: flex; align-items: center; gap: 12px; padding: 13px 16px; cursor: pointer; list-style: none; }
.drill > summary::-webkit-details-marker { display: none; }
.drill > summary:hover { background: rgba(26, 26, 26, 0.04); }
.drill[open] > summary { border-bottom: 1px solid var(--line); background: rgba(26, 26, 26, 0.02); }
.drill .chev { display: grid; place-items: center; width: 16px; height: 16px; color: var(--ink-4); flex: none; transition: transform 0.2s ease; }
.drill .chev svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.drill[open] > summary .chev { transform: rotate(90deg); }
.drill-t { font-size: 15px; font-weight: 600; }
.drill-meta { margin-left: auto; font-size: 12px; color: var(--ink-4); }
.drill-b { padding: 16px; }
.drill.sub { margin-top: 4px; }
.drill.sub .drill-b { padding: 12px; }
.drill-locked { border-style: dashed; }
/* citation counts strip */
.counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.count { border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--bg); padding: 11px 13px; }
.count b { display: block; font-family: var(--brand); font-size: 25px; font-weight: 700; line-height: 1; letter-spacing: -0.025em; }
.count b s { font-size: 13px; color: var(--ink-4); font-weight: 400; text-decoration: none; }
.count span { display: block; font-size: 11px; color: var(--ink-4); margin-top: 5px; }
.count.alarm { border-color: var(--alarm-line); background: var(--alarm-bg); }
.count.alarm b, .count.alarm span { color: var(--alarm); }

@media (max-width: 1080px) {
  .lead-grid, .caprow, .aeo-hero { grid-template-columns: 1fr; }
  .lead-then { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: 16px; }
  .aeo-ring { width: 150px; height: 150px; }
}
@media (max-width: 560px) { .counts { grid-template-columns: repeat(2, 1fr); } }
.wave i:nth-child(1) { height: 16px; animation-delay: 0s; }
.wave i:nth-child(2) { height: 36px; animation-delay: .12s; }
.wave i:nth-child(3) { height: 48px; animation-delay: .24s; }
.wave i:nth-child(4) { height: 28px; animation-delay: .36s; }
.wave i:nth-child(5) { height: 44px; animation-delay: .18s; }
.wave i:nth-child(6) { height: 20px; animation-delay: .30s; }

/* ============================================================
   Visual polish — capability card status tinting.
   Live caps get a faint go tint; locked ones stay neutral.
   Uses :has() which is broadly supported (2024+).
   ============================================================ */
.card.cap:has(.tag.go) {
  background: linear-gradient(160deg, #F1F4EC 0%, var(--surface) 55%);
  border-color: var(--go-line);
}
.card.cap:has(.lock-chip) {
  background: linear-gradient(160deg, var(--bg) 0%, var(--surface) 60%);
  border-color: var(--line);
}

/* Slightly richer dashboard addbar label */
.dboard .addbar-l {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Stronger dname (domain name) on board cards */
.dboard .dname {
  font-size: 17.5px;
  letter-spacing: -0.015em;
}

/* More readable metric labels on dashboard */
.dboard .metric-l {
  font-size: 10.5px;
  letter-spacing: 0.09em;
}

/* Tighter, crisper gauge number label */
.dboard .gauge-num s {
  font-size: 9px;
  letter-spacing: 0.14em;
}

/* Stronger cap card section heading */
.cap h3 {
  font-size: 19px;
  letter-spacing: -0.015em;
}

/* Slightly more weight on the caps-div label */
.caps-div span {
  color: var(--ink-3);
  letter-spacing: 0.16em;
}

/* AEO ring track — more visible */
.aeo-ring .trk { stroke: var(--line-2); }

/* ============================================================
   talk (/talk/) — the hands-free voice surface. Chromeless, the
   orb centred and permanent, the transcript fading beneath it.
   No new keyframes: `breathe` on .orb-ring and `wave` on the
   equaliser bars already exist, and the four states only retime
   or pause them. `thinking` needs nothing at all — the thread's
   own .chat-line.thinking already says "working".
   ============================================================ */

.chat-stage.talk {
  min-height: 100vh;
  /* Full-bleed, not a 760px column: body paints ARIA's hardcoded violet glow,
     so a narrower stage would leak our brand either side of a host-themed page —
     the same reason .chat-stage.embed drops its max-width. The column lives on
     the children instead. */
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 28px 20px;
  background: var(--bg);
}
.chat-stage.talk > * { width: 100%; max-width: 640px; }
.chat-stage.talk .chat-head { align-items: center; text-align: center; gap: 16px; margin: 0; }
/* `conversing` is set on the first turn — until then the header rule has nothing
   to divide, so it reads as a stray line under the orb. */
.chat-stage.talk:not(.conversing) .chat-head { border-bottom: 0; }
.chat-stage.talk .chat-hello { max-width: 34ch; min-height: 3em; }
/* At this size ARIA's mark — a pale disc with a small core — reads as an empty
   ring, so the talk orb is filled with the brand gradient and the core stands
   down. The rings still ripple over it, and the equaliser bars go white, the
   same way .wave i does on its accent-gradient pill. */
.chat-stage.talk .orb {
  --mark-size: 180px;
  background: var(--accent-grad);
  border-color: transparent;
  box-shadow: 0 26px 64px -20px color-mix(in srgb, var(--accent) 60%, transparent);
}
/* Hidden, not removed: .orb-ring:nth-of-type(3)/(4) counts every span in .orb,
   so deleting the core span would shift the rings and break the ripple stagger. */
.chat-stage.talk .orb-core { display: none; }
.chat-stage.talk .orb-ring { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }

/* The orb is the page's only control, so it is a real button. */
.orb-tap {
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: transform 0.2s ease;
}
.orb-tap:hover { transform: scale(1.03); }
.orb-tap:disabled { cursor: default; transform: none; }
.orb-tap:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 26%, transparent);
}

/* Whether the microphone is open is the one thing a visitor must never have to
   guess, so the states are told apart by presence, not by tempo: at rest the orb
   is a still sphere (rings gone), while listening it ripples AND wears a halo.
   The halo is static on purpose — it is the signal that survives
   prefers-reduced-motion, where every animation here is switched off. */
.chat-stage.talk[data-state="idle"] .orb-ring { animation: none; }

/* Listening is the loudest thing on the page: thicker rings at nearly twice the
   tempo, and a halo that breathes outward from the orb. This is the one new
   keyframe in the feature — the rest reuse `breathe` and `wave` — because
   "prominent enough to read across a room" is a requirement no retiming of the
   existing ripple could meet. */
.chat-stage.talk[data-state="listening"] .orb-ring {
  border-color: var(--accent);
  border-width: 3px;
  animation-duration: 2.2s;
}
.chat-stage.talk[data-state="listening"] .orb { animation: listen-halo 2.2s ease-out infinite; }
@keyframes listen-halo {
  0% {
    box-shadow:
      0 0 0 4px color-mix(in srgb, var(--accent) 45%, transparent),
      0 26px 64px -20px color-mix(in srgb, var(--accent) 60%, transparent);
  }
  70%, 100% {
    box-shadow:
      0 0 0 26px color-mix(in srgb, var(--accent) 0%, transparent),
      0 26px 64px -20px color-mix(in srgb, var(--accent) 60%, transparent);
  }
}
/* thinking + speaking — rings hold still while she is not hearing you */
.chat-stage.talk[data-state="thinking"] .orb-ring,
.chat-stage.talk[data-state="speaking"] .orb-ring { animation-play-state: paused; }

/* speaking — the same @keyframes wave the voice card uses, inside the core */
.orb-eq { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: 4px; }
.orb-eq i { width: 4px; border-radius: 999px; background: #fff; animation: wave 1.1s ease-in-out infinite; }
.orb-eq i:nth-child(1) { height: 18px; animation-delay: 0s; }
.orb-eq i:nth-child(2) { height: 38px; animation-delay: 0.12s; }
.orb-eq i:nth-child(3) { height: 52px; animation-delay: 0.24s; }
.orb-eq i:nth-child(4) { height: 32px; animation-delay: 0.36s; }
.orb-eq i:nth-child(5) { height: 22px; animation-delay: 0.18s; }
.chat-stage.talk[data-state="speaking"] .orb-eq { display: flex; }
.chat-stage.talk[data-state="speaking"] .orb-core { opacity: 0; }

/* The transcript: newest turn whole, the pair above dimmed, older hidden.
   Counted over every child, not just .chat-line, because a source line follows
   its answer. Nothing leaves the DOM, which is what makes the reveal below a
   checkbox rather than a script. */
/* `flex: none`: the base thread is flex: 1, which would eat the column and push
   the orb off centre. Here the thread is only as tall as the turns it shows. */
.chat-stage.talk .chat-thread { flex: none; overflow: visible; }
.chat-stage.talk .chat-thread > * { transition: opacity 0.4s ease; }
.chat-stage.talk .chat-thread > *:nth-last-child(n + 4) { opacity: 0.35; }
.chat-stage.talk .chat-thread > *:nth-last-child(n + 7) { display: none; }
.transcript-cb { display: none; }
/* Scoped through .chat-stage.talk so this outscores the two hiding rules above —
   a bare `.transcript-cb:checked ~ …` is a class short and silently loses. */
.chat-stage.talk .transcript-cb:checked ~ .chat-thread > * { display: block; opacity: 1; }

/* The ask bar is present but out of the way until "type instead" — a JS switch,
   because CSS cannot tell whether SpeechRecognition exists (Firefox needs it
   open from the start). */
.chat-stage.talk .chat-bar { display: none; width: 100%; }
.chat-stage.talk[data-typing] .chat-bar { display: flex; }
.chat-stage.talk[data-typing] #type-instead { display: none; }
/* order: 1 — it sits before the thread in the DOM (see talk.html) but belongs
   under it on screen. A column, because the one real action must not read as a
   third peer next to two utility links — which is exactly how it did read. */
.talk-foot { display: flex; flex-direction: column; gap: 14px; align-items: center; order: 1; }
.talk-links { display: flex; gap: 18px; align-items: center; justify-content: center; }
.talk-link {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  /* line-height because a button and a label default differently; margin because
     the global `label` rule carries 16px/7px, which a button does not. */
  line-height: 1;
  margin: 0;
  cursor: pointer;
}
.talk-link:hover { color: var(--accent); }
/* Exactly one of the pair shows — `end` while a conversation is running, `start`
   once one has finished — and they are deliberately not the same weight. Ending is
   a quiet exit from something the visitor is in the middle of; restarting is the
   only thing left to do once it is over, so only that one is a button. A pill on
   both put a second bright accent shape next to the orb and read as the point of
   the page, which it never is while someone is talking. */
.talk-action {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 0;
  font-family: var(--body);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.18s ease;
}
.talk-action::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;  /* a stop square for `end`; the start rule makes it a play */
  background: currentColor;
}

/* Quiet: sentence case in the body face, so it is legible as an action without
   competing with the orb or masquerading as one of the mono utilities. */
.talk-end {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
}
.talk-end::before { background: var(--ink-3); }
.talk-end:hover { color: var(--accent); }
.talk-end:hover::before { background: currentColor; }

/* The one real button on the page, and only when it is the only thing to do. */
.talk-start {
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 999px;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.talk-start:hover {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: var(--accent);
}
.talk-start::before {
  width: 0;
  height: 0;
  border-radius: 0;
  background: none;
  border-left: 8px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.talk-start:hover::before { background: none; }
.chat-stage.talk:not([data-state="idle"]):not([data-state="ended"]) .talk-end { display: inline-flex; }
.chat-stage.talk[data-state="ended"]:not([data-spent]) .talk-start { display: inline-flex; }

/* Ended: the orb simply stops. It keeps its own shape and fill — the mark is not
   ours to restyle for a state — so the rings go quiet, the listening halo drops,
   and the ending is carried by the words and the action beneath it instead.
   Turning the sphere into a ring, tinting it, dimming it and hanging a tick on it
   were all tried; each one made the state about the orb rather than about the
   conversation being over. */
.chat-stage.talk[data-state="ended"] .orb { animation: none; }
.chat-stage.talk[data-state="ended"] .orb-ring { animation: none; }
.chat-stage.talk[data-state="ended"] .chat-hello {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.talk-note { max-width: 46ch; margin: 0 auto; text-align: center; order: 1; }

@media (prefers-reduced-motion: reduce) {
  .chat-stage.talk .orb-ring,
  .chat-stage.talk .orb,
  .orb-eq i { animation: none; }
  .orb-tap:hover { transform: none; }
  /* The halo stops pulsing but must not disappear — without motion it is the only
     thing left saying the microphone is open. */
  .chat-stage.talk[data-state="listening"] .orb {
    box-shadow:
      0 0 0 8px color-mix(in srgb, var(--accent) 40%, transparent),
      0 26px 64px -20px color-mix(in srgb, var(--accent) 60%, transparent);
  }
}

@media (max-width: 640px) {
  .chat-stage.talk .orb { --mark-size: 132px; }
}

/* ============================================================================
   frontpage — Warm v2 (the marketing site, ARIA_FRONTPAGE_HOST)
   ----------------------------------------------------------------------------
   The redesign's component library, scoped under `.mkt` (set on the marketing
   <body>). The product owns the un-prefixed .card/.tag/.orb/.kicker/.chip/etc.,
   so every marketing rule is namespaced to keep the two surfaces from clashing
   in the one stylesheet. Tokens are the shared source of truth above; body-copy
   colour reads --ink-2 (the product name for what the redesign calls --body,
   which here is the Figtree font token). A bounded utility layer at the end
   covers the recurring one-offs, so templates carry no inline styles.
   Sections: base+type · buttons/chips · nav · hero+ask · strip · bento ·
   chat/rows · steps · cta · foot · interior (cards/faq/forms/pricing) ·
   product mock · prose/toc/timeline · orb · motion · utilities.
   ========================================================================== */

/* ---------- base + type ---------- */
.mkt { font-family: var(--f-sans); font-size: 17px; line-height: 1.62; color: var(--ink-2); background: var(--canvas); }
.mkt ::selection { background: var(--violet-soft); color: var(--ink); }
.mkt :focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: var(--r-xs); }
.mkt .skip { position: absolute; left: 12px; top: -60px; z-index: 300; padding: 10px 18px; border-radius: var(--r-pill); background: var(--ink); color: var(--canvas); font-weight: 600; transition: top .2s var(--ease); }
.mkt .skip:focus { top: 12px; }
.mkt .wrap { width: 100%; max-width: var(--site); margin-inline: auto; padding-inline: var(--gut); }
.mkt .band { position: relative; background: var(--canvas-2); }
.mkt h1, .mkt h2, .mkt h3, .mkt h4 { margin: 0; color: var(--ink); font-weight: 700; letter-spacing: -.03em; line-height: 1.06; }
.mkt p { margin: 0; max-width: none; }
.mkt strong { color: var(--ink); font-weight: 600; }
.mkt .h1 { font-size: clamp(2.9rem, 6.6vw, 5rem); font-weight: 800; letter-spacing: -.042em; line-height: 1.02; }
.mkt .h2 { font-size: clamp(2rem, 4.2vw, 3.25rem); font-weight: 700; letter-spacing: -.036em; }
.mkt .h3 { font-size: clamp(1.3rem, 2.2vw, 1.65rem); letter-spacing: -.024em; line-height: 1.2; }
.mkt .h4 { font-size: 1.1rem; letter-spacing: -.018em; }
.mkt .h-sub { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; letter-spacing: -.03em; }
.mkt .say { font-family: var(--f-serif); font-weight: 400; font-style: italic; letter-spacing: -.005em; color: var(--violet); }
/* The redesign's lead paragraph. Bare product .lead (the domain-detail action
   card) sets a violet gradient bg, border, shadow and padding; assert our own
   box model so none of that bleeds through the shared stylesheet. */
.mkt .lead { font-size: clamp(1.08rem, 1.6vw, 1.3rem); color: var(--ink-2); line-height: 1.55; letter-spacing: -.012em; background: none; border: 0; box-shadow: none; padding: 0; }
.mkt .muted { color: var(--ink-2); }
.mkt .dim { color: var(--dim); }
.mkt .measure { max-width: 62ch; }
.mkt .kicker { display: inline-flex; align-items: center; gap: 9px; font-size: .8rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--violet-deep); }
.mkt .kicker .n { color: var(--violet); font-variant-numeric: tabular-nums; }
.mkt .kicker svg { width: 15px; height: 15px; }
.mkt .mono { font-family: var(--mono); font-size: .86rem; letter-spacing: .005em; }
.mkt .ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mkt .ticks li { position: relative; padding-left: 32px; min-height: 20px; font-size: 1rem; }
.mkt .ticks li::before { content: ""; position: absolute; left: 0; top: .18em; width: 20px; height: 20px; border-radius: 50%; background: var(--violet-soft) no-repeat center / 12px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B3FA8' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E"); }
.mkt .sec-head { display: grid; gap: 18px; max-width: 740px; }
.mkt .sec { padding-block: clamp(76px, 9vw, 130px); }

/* ---------- buttons + chips ---------- */
.mkt .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px; font-size: 1rem; font-weight: 600; letter-spacing: -.012em; border: 1px solid transparent; border-radius: var(--r-sm); cursor: pointer; white-space: nowrap; transition: background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease), transform .22s var(--ease); }
.mkt .btn svg { width: 15px; height: 15px; }
.mkt .btn-primary { color: var(--canvas); background: var(--ink); }
.mkt .btn-primary:hover { background: #363636; transform: translateY(-1px); }
.mkt .btn-ghost { color: var(--ink); border-color: var(--line-2); background: var(--surface); }
.mkt .btn-ghost:hover { border-color: var(--line-3); transform: translateY(-1px); }
.mkt .btn-sm { padding: 9px 17px; font-size: .92rem; }
.mkt .link { display: inline-flex; align-items: center; gap: 6px; color: var(--violet-deep); font-weight: 600; font-size: 1rem; transition: gap .2s var(--ease), color .2s var(--ease); }
.mkt .link:hover { gap: 10px; color: var(--violet); }
.mkt .chip { display: inline-flex; align-items: center; gap: 9px; padding: 7px 16px; font-size: .84rem; font-weight: 600; letter-spacing: -.008em; color: var(--violet-deep); border: 1px solid var(--violet-line); border-radius: var(--r-pill); background: var(--violet-soft); transition: background .22s var(--ease), border-color .22s var(--ease); }
.mkt a.chip:hover { background: #e7ddff; border-color: var(--violet); }
.mkt .chip .live { width: 7px; height: 7px; border-radius: 50%; background: var(--violet); animation: ping 2.4s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(124,92,207,.5); } 70% { box-shadow: 0 0 0 8px rgba(124,92,207,0); } 100% { box-shadow: 0 0 0 0 rgba(124,92,207,0); } }
.mkt .sup { font-size: .58em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; vertical-align: super; line-height: 0; margin-left: 2px; }
.mkt .sup-hot { color: var(--coral-deep); }
.mkt .sup-new { color: var(--violet-deep); }
.mkt .badge { font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border-radius: 6px; color: #fff; background: var(--coral-deep); }
.mkt .badge.ice { background: var(--violet-deep); }

/* ---------- nav ---------- */
.mkt .topbar { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--nav-h); background: rgba(251,250,244,.75); border-bottom: 1px solid transparent; backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); transition: background .3s var(--ease), border-color .3s var(--ease); }
.mkt .topbar.scrolled { background: rgba(251,250,244,.92); border-bottom-color: var(--line); }
.mkt .tb { display: flex; align-items: center; gap: 26px; height: var(--nav-h); }
.mkt .logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.mkt .logo .mark { width: 32px; height: 25px; flex: none; background: var(--grad); -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }
.mkt .logo .word { font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em; }
.mkt .tb-links { display: flex; align-items: center; gap: 4px; margin-right: auto; }
.mkt .tb-links a { display: inline-block; white-space: nowrap; padding: 7px 12px; border-radius: var(--r-xs); font-size: .93rem; font-weight: 500; color: var(--ink-2); transition: color .2s var(--ease), background .2s var(--ease); }
.mkt .tb-links a:hover { color: var(--ink); background: rgba(26,26,26,.045); }
.mkt .tb-links a.active { color: var(--ink); font-weight: 600; }
.mkt .tb-actions { display: flex; align-items: center; gap: 10px; }
.mkt .burger { display: none; padding: 7px; margin-left: auto; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-xs); color: var(--ink); cursor: pointer; }
.mkt .burger svg { width: 20px; height: 20px; }
.mkt .sheet { position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 99; display: none; flex-direction: column; gap: 2px; padding: 14px var(--gut) 26px; background: rgba(251,250,244,.98); border-bottom: 1px solid var(--line); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); }
.mkt .sheet.open { display: flex; }
.mkt .sheet a { display: block; padding: 13px 4px; border-bottom: 1px solid var(--line); font-size: 1.05rem; font-weight: 500; color: var(--ink); }
.mkt .sheet .btn { display: flex; justify-content: center; margin-top: 16px; border-bottom: 0; }
.mkt .sheet .btn-primary { color: var(--canvas); }
.mkt .sheet .btn-ghost { color: var(--ink); }
@media (max-width: 940px) { .mkt .tb-links, .mkt .tb-actions { display: none; } .mkt .burger { display: inline-flex; } }

/* ---------- hero + ask bar ---------- */
.mkt .hero { position: relative; padding-top: calc(var(--nav-h) + clamp(54px, 8vw, 92px)); padding-bottom: clamp(44px, 6vw, 76px); text-align: center; overflow: hidden; }
.mkt .hero::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -26%; translate: -50% 0; width: min(1300px, 150vw); aspect-ratio: 2 / 1; background: radial-gradient(38% 46% at 28% 46%, rgba(255,138,107,.17), transparent 72%), radial-gradient(40% 48% at 72% 40%, rgba(124,92,207,.17), transparent 72%), radial-gradient(46% 40% at 50% 70%, rgba(196,122,224,.12), transparent 74%); filter: blur(46px); }
.mkt .hero-in { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 28px; }
.mkt .hero-in > * { max-width: 100%; }
.mkt .hero .h1 { max-width: 17ch; }
.mkt .hero-sub { max-width: 54ch; margin-top: -8px; }
.mkt .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.mkt .ask-shell { width: min(720px, 100%); display: grid; gap: 14px; margin-top: 6px; }
.mkt .ask { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 20px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-1); transition: border-color .25s var(--ease), box-shadow .25s var(--ease); }
.mkt .ask:focus-within { border-color: var(--violet-line); box-shadow: 0 0 0 4px rgba(124,92,207,.10), var(--shadow-1); }
.mkt .ask-ic { display: grid; place-items: center; width: 20px; height: 20px; color: var(--violet); flex: none; }
.mkt .ask-ic svg { width: 20px; height: 20px; }
.mkt .ask-input { flex: 1; min-width: 0; padding: 12px 0; font-size: 1.05rem; color: var(--ink); background: none; border: 0; outline: none; text-align: left; }
.mkt .ask[data-ask] .ask-input::placeholder { color: transparent; }
.mkt .ask-input::placeholder { color: var(--dim); }
.mkt .ask-ghost { position: absolute; left: 52px; right: 104px; top: 50%; translate: 0 -50%; display: flex; align-items: center; font-size: 1.05rem; color: var(--dim); text-align: left; pointer-events: none; white-space: nowrap; overflow: hidden; }
.mkt .ask.is-typing .ask-ghost { display: none; }
.mkt .caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 3px; background: var(--violet); animation: caret 1.05s steps(1) infinite; }
@keyframes caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.mkt .ask-go { flex: none; }
.mkt .ask-out { min-height: 108px; display: grid; }
.mkt .ask-card { text-align: left; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); opacity: 0; translate: 0 8px; transition: opacity .35s var(--ease), translate .35s var(--ease); }
.mkt .ask-card.show { opacity: 1; translate: 0 0; }
.mkt .ask-who { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; font-size: .76rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--dim); }
.mkt .ask-who .av { width: 22px; height: 17px; flex: none; background: var(--grad); -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }
.mkt .ask-who .src { color: var(--violet-deep); }
.mkt .ask-a { color: var(--ink); font-size: 1.03rem; line-height: 1.55; min-height: 1.55em; }
.mkt .ask-a a { color: var(--violet-deep); font-weight: 600; }
.mkt .ask-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }

/* ---------- logo strip ---------- */
.mkt .strip { padding-block: 8px 4px; }
.mkt .strip .kicker { justify-content: center; width: 100%; margin-bottom: 22px; }
.mkt .strip-rail { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.mkt .strip-track { display: flex; align-items: center; gap: 64px; width: max-content; animation: slide 46s linear infinite; }
.mkt .strip-rail:hover .strip-track { animation-play-state: paused; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.mkt .strip-item { display: inline-flex; align-items: center; gap: 10px; font-size: 1.06rem; font-weight: 600; letter-spacing: -.018em; color: #b3ada0; white-space: nowrap; transition: color .3s var(--ease); }
.mkt .strip-item svg { width: 19px; height: 19px; }
.mkt .strip-item:hover { color: var(--dim); }

/* ---------- bento ---------- */
.mkt .bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; margin-top: 56px; }
.mkt .tile { position: relative; grid-column: span 12; display: flex; flex-direction: column; gap: 20px; padding: clamp(26px, 2.8vw, 38px); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); overflow: hidden; transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.mkt .tile:hover { box-shadow: var(--shadow-1); transform: translateY(-2px); }
.mkt .tile-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--violet-soft); color: var(--violet-deep); }
.mkt .tile-ic svg { width: 21px; height: 21px; }
.mkt .tile-head { display: grid; gap: 14px; }
.mkt .tile-head p { color: var(--ink-2); font-size: 1.02rem; }
.mkt .tile-vis { margin-top: auto; }
.mkt .tile-foot { margin-top: 2px; }
@media (min-width: 900px) { .mkt .tile.w7 { grid-column: span 7; } .mkt .tile.w5 { grid-column: span 5; } }

/* ---------- chat + data rows ---------- */
.mkt .panel { padding: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--canvas); }
.mkt .band .panel { background: var(--surface); }
.mkt .msg { max-width: 86%; padding: 12px 16px; margin-bottom: 10px; border-radius: 18px; font-size: .97rem; line-height: 1.5; color: var(--ink); }
.mkt .msg:last-child { margin-bottom: 0; }
.mkt .msg .who { font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin-bottom: 5px; }
.mkt .msg.user { margin-left: auto; background: var(--surface); border: 1px solid var(--line); border-bottom-right-radius: 5px; }
.mkt .msg.aria { background: var(--violet-soft); border: 1px solid var(--violet-line); border-bottom-left-radius: 5px; }
.mkt .msg.aria .who { color: var(--violet-deep); }
.mkt .msg.aria a { color: var(--violet-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.mkt .row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 16px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); font-size: .96rem; color: var(--ink); }
.mkt .row:last-child { margin-bottom: 0; }
.mkt .row .q { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkt .tag { flex: none; font-size: .72rem; font-weight: 600; letter-spacing: .01em; padding: 4px 11px; border-radius: var(--r-pill); border: 1px solid; white-space: nowrap; }
.mkt .tag.ok { color: var(--mint-deep); background: var(--mint-soft); border-color: var(--mint-line); }
.mkt .tag.gap { color: var(--coral-deep); background: var(--coral-soft); border-color: var(--coral-line); }
.mkt .tag.neu { color: var(--dim); background: var(--surface-3); border-color: var(--line); }
.mkt .voice { display: grid; place-items: center; gap: 14px; padding: 14px 0 4px; }
.mkt .voice-q { font-family: var(--f-serif); font-style: italic; font-size: 1.22rem; color: var(--ink-2); text-align: center; max-width: 32ch; }

/* ---------- steps / versus / split ---------- */
.mkt .steps { display: grid; gap: 0; margin-top: 52px; border-top: 1px solid var(--line-2); }
.mkt .step { display: grid; gap: 12px; padding: 32px 0; border-bottom: 1px solid var(--line-2); }
.mkt .step .n { font-size: .8rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--violet-deep); }
.mkt .step p { color: var(--ink-2); font-size: 1.02rem; max-width: 46ch; }
@media (min-width: 860px) { .mkt .steps { grid-template-columns: repeat(3, 1fr); } .mkt .step { padding: 38px 34px 46px; border-right: 1px solid var(--line-2); } .mkt .step:first-child { padding-left: 0; } .mkt .step:last-child { border-right: 0; padding-right: 0; } }
.mkt .versus { display: grid; gap: 20px; margin-top: 46px; }
@media (min-width: 780px) { .mkt .versus { grid-template-columns: 1fr 1fr; } }
.mkt .vs-card { padding: 30px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.mkt .vs-card.on { border-color: var(--violet-line); background: var(--violet-soft); }
.mkt .vs-card h4 { margin-bottom: 10px; }
.mkt .vs-card.off h4 { color: var(--dim); }
.mkt .vs-card p { font-size: 1rem; }
.mkt .split { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .mkt .split { grid-template-columns: 1.02fr .98fr; gap: 60px; } }
.mkt .split-copy { display: grid; gap: 20px; align-content: start; }

/* ---------- cta ---------- */
.mkt .cta { position: relative; overflow: hidden; display: grid; gap: 22px; justify-items: center; text-align: center; padding: clamp(56px, 8vw, 96px) clamp(24px, 5vw, 64px); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); }
.mkt .cta::before { content: ""; position: absolute; z-index: 0; left: 50%; bottom: -78%; translate: -50% 0; width: 116%; aspect-ratio: 2/1; background: radial-gradient(40% 50% at 32% 50%, rgba(255,138,107,.24), transparent 66%), radial-gradient(40% 50% at 68% 46%, rgba(124,92,207,.24), transparent 66%); filter: blur(18px); }
.mkt .cta > * { position: relative; z-index: 1; }

/* ---------- footer ---------- */
.mkt .foot { position: relative; background: var(--canvas-2); overflow: hidden; }
.mkt .foot-grid { display: grid; gap: 40px; padding-block: clamp(52px, 6vw, 80px) 44px; }
@media (min-width: 620px) { .mkt .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .mkt .foot-grid { grid-template-columns: 1.7fr 1fr 1fr 1fr; } }
.mkt .foot-brand { display: grid; gap: 20px; align-content: start; }
.mkt .foot-brand p { max-width: 34ch; font-size: .95rem; color: var(--dim); }
.mkt .foot h4 { font-size: .84rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink); margin-bottom: 14px; }
.mkt .foot-link { display: block; padding: 6px 0; font-size: .94rem; color: var(--dim); transition: color .2s var(--ease); }
.mkt .foot-link:hover { color: var(--violet-deep); }
.mkt .socials { display: flex; gap: 10px; }
.mkt .soc { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line-2); border-radius: 50%; color: var(--dim); background: var(--surface); transition: color .2s var(--ease), border-color .2s var(--ease); }
.mkt .soc:hover { color: var(--violet-deep); border-color: var(--violet-line); }
.mkt .soc svg { width: 15px; height: 15px; }
.mkt .foot-bar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; padding-block: 22px; border-top: 1px solid var(--line-2); font-size: .84rem; color: var(--dim); }
.mkt .foot-bar nav { display: flex; gap: 22px; }
.mkt .foot-bar a:hover { color: var(--violet-deep); }

/* ---------- interior pages ---------- */
.mkt .page-hero { position: relative; overflow: hidden; padding-top: calc(var(--nav-h) + clamp(48px, 6vw, 80px)); padding-bottom: clamp(28px, 4vw, 48px); text-align: center; }
.mkt .page-hero::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -34%; translate: -50% 0; width: min(1100px, 140vw); aspect-ratio: 2 / 1; background: radial-gradient(38% 46% at 30% 50%, rgba(255,138,107,.14), transparent 72%), radial-gradient(40% 48% at 70% 44%, rgba(124,92,207,.14), transparent 72%); filter: blur(46px); }
.mkt .page-hero-in { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 22px; }
.mkt .page-hero-in > * { max-width: 100%; }
.mkt .page-hero .h1 { font-size: clamp(2.4rem, 5.2vw, 3.9rem); max-width: 20ch; }
.mkt .page-hero .lead { max-width: 58ch; }
.mkt .grid-2, .mkt .grid-3, .mkt .grid-4 { display: grid; gap: 20px; }
@media (min-width: 720px) { .mkt .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 720px) { .mkt .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .mkt .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 720px) { .mkt .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .mkt .grid-4 { grid-template-columns: repeat(4, 1fr); } }
.mkt .stack { display: grid; gap: 18px; }
.mkt .center { text-align: center; justify-items: center; }
.mkt .center .sec-head { margin-inline: auto; justify-items: center; text-align: center; }
/* Bare product .card carries shadow-m, margin-bottom and overflow:hidden — reset
   them so the marketing card is flat until hover and unspaced inside a grid. */
.mkt .card { display: flex; flex-direction: column; gap: 12px; padding: 28px; margin: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: none; overflow: visible; transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.mkt .card:hover { box-shadow: var(--shadow-1); transform: translateY(-2px); }
.mkt .card .ic { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 4px; border-radius: var(--r-md); background: var(--violet-soft); color: var(--violet-deep); font-size: 1.15rem; font-weight: 700; }
.mkt .card .ic svg { width: 20px; height: 20px; }
.mkt .card h3 { font-size: 1.16rem; letter-spacing: -.024em; }
.mkt .card p { color: var(--ink-2); font-size: .98rem; }
.mkt .card > .link { margin-top: auto; padding-top: 6px; }
.mkt .band .card { background: var(--surface); }
.mkt .flat { padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.mkt .note { display: grid; gap: 8px; padding: 20px 22px; border-radius: var(--r-md); border: 1px solid var(--violet-line); background: var(--violet-soft); font-size: .98rem; color: var(--ink-2); }
.mkt .note strong { color: var(--ink); }
.mkt .note.warm { border-color: var(--coral-line); background: var(--coral-soft); }
.mkt .faq { display: grid; gap: 12px; }
.mkt .faq details { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); padding: 0 24px; transition: border-color .25s var(--ease); }
.mkt .faq details[open] { border-color: var(--violet-line); }
.mkt .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; cursor: pointer; list-style: none; font-size: 1.04rem; font-weight: 600; color: var(--ink); letter-spacing: -.018em; }
.mkt .faq summary::-webkit-details-marker { display: none; }
.mkt .faq summary::after { content: ""; flex: none; width: 18px; height: 18px; background: no-repeat center / 18px 18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C5CCF' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); transition: transform .25s var(--ease); }
.mkt .faq details[open] summary::after { transform: rotate(45deg); }
.mkt .faq details p { padding-bottom: 22px; color: var(--ink-2); font-size: 1rem; }
.mkt .form { display: grid; gap: 16px; }
.mkt .field { display: grid; gap: 7px; }
.mkt .field label { font-size: .88rem; font-weight: 600; color: var(--ink); }
.mkt .field input, .mkt .field select, .mkt .field textarea { width: 100%; padding: 12px 15px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-size: 1rem; outline: none; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.mkt .field input::placeholder, .mkt .field textarea::placeholder { color: var(--dim); }
.mkt .field input:focus, .mkt .field select:focus, .mkt .field textarea:focus { border-color: var(--violet-line); box-shadow: 0 0 0 4px rgba(124,92,207,.10); }
.mkt .field textarea { min-height: 130px; resize: vertical; }
.mkt .field-row { display: grid; gap: 16px; }
@media (min-width: 640px) { .mkt .field-row { grid-template-columns: 1fr 1fr; } }
.mkt .form-success { display: none; gap: 8px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-sm); font-size: .95rem; color: var(--mint-deep); background: var(--mint-soft); border: 1px solid var(--mint-line); }
.mkt .form-success.show { display: flex; }
.mkt .seg { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--surface); }
.mkt .seg button { padding: 8px 16px; border: 0; border-radius: var(--r-pill); cursor: pointer; font-size: .89rem; font-weight: 600; color: var(--ink-2); background: none; transition: background .2s var(--ease), color .2s var(--ease); }
.mkt .seg button:hover { color: var(--ink); }
.mkt .seg button.is-on { color: var(--canvas); background: var(--ink); }
.mkt .billing { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 8px; margin-bottom: 40px; font-size: .92rem; color: var(--dim); }
.mkt .billing-toggle { padding: 0; border: 0; background: none; cursor: pointer; font-size: .92rem; font-weight: 500; color: var(--dim); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); transition: color .2s var(--ease), text-decoration-color .2s var(--ease); }
.mkt .billing-toggle:hover { color: var(--violet-deep); text-decoration-color: var(--violet-line); }
.mkt .plans { display: grid; gap: 20px; align-items: stretch; }
@media (min-width: 760px) { .mkt .plans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .mkt .plans { grid-template-columns: repeat(3, 1fr); } }
.mkt .plan { display: flex; flex-direction: column; gap: 16px; padding: 28px 26px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.mkt .plan.featured { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(124,92,207,.09); }
.mkt .plan .nm { font-size: 1.05rem; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.mkt .plan .price { font-size: 2.4rem; font-weight: 800; color: var(--ink); letter-spacing: -.04em; line-height: 1; }
.mkt .plan .price small { font-size: .92rem; font-weight: 500; color: var(--dim); letter-spacing: 0; }
.mkt .plan .desc { font-size: .95rem; color: var(--ink-2); }
.mkt .plan .ticks { margin-top: 4px; }
.mkt .plan .ticks li { font-size: .94rem; }
.mkt .plan .btn { margin-top: auto; width: 100%; }

/* ---------- product UI mock ---------- */
.mkt .app { position: relative; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; box-shadow: 0 2px 4px rgba(26,26,26,.03), 0 26px 60px -30px rgba(26,26,26,.35); }
.mkt .app-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--canvas-2); }
.mkt .app-dots { display: flex; gap: 6px; flex: none; }
.mkt .app-dots i { display: block; width: 10px; height: 10px; border-radius: 50%; background: rgba(26,26,26,.13); }
.mkt .app-name { display: flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 600; color: var(--ink); }
.mkt .app-name .mk { width: 18px; height: 14px; flex: none; background: var(--grad); -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }
.mkt .app-name .crumb { color: var(--dim); font-weight: 500; }
@media (max-width: 520px) { .mkt .app-name .crumb { display: none; } }
.mkt .app-pill { margin-left: auto; flex: none; padding: 4px 11px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); font-size: .74rem; color: var(--dim); white-space: nowrap; }
.mkt .app-main { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 880px) { .mkt .app-main { grid-template-columns: 186px minmax(0, 1fr); } }
.mkt .app-side { display: none; padding: 14px 10px; border-right: 1px solid var(--line); background: var(--canvas-2); }
@media (min-width: 880px) { .mkt .app-side { display: block; } }
.mkt .app-side b { display: block; padding: 0 10px 10px; font-size: .68rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--dim); }
.mkt .app-side span { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; font-size: .85rem; color: var(--dim); }
.mkt .app-side span::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: currentColor; opacity: .5; }
.mkt .app-side .on { background: var(--violet-soft); color: var(--violet-deep); font-weight: 600; }
.mkt .app-side .on::before { opacity: 1; }
.mkt .app-content { padding: 18px 18px 0; min-width: 0; }
.mkt .app-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.mkt .app-tabs span { padding-bottom: 10px; font-size: .85rem; color: var(--dim); white-space: nowrap; }
.mkt .app-tabs .on { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--violet); }
.mkt .app-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 700px) { .mkt .app-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mkt .app-stat { padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); }
.mkt .app-stat .k { font-size: .71rem; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); }
.mkt .app-stat .v { margin-top: 5px; font-size: 1.6rem; font-weight: 800; letter-spacing: -.035em; line-height: 1.05; color: var(--ink); }
.mkt .app-stat .d { margin-top: 2px; font-size: .76rem; color: var(--dim); }
.mkt .app-stat .d.up { color: var(--mint-deep); }
.mkt .app-stat .d.down { color: var(--coral-deep); }
.mkt .app-sub { margin: 22px 0 10px; font-size: .82rem; font-weight: 600; color: var(--ink); }
.mkt .app-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 12px; align-items: center; padding: 11px 2px; border-top: 1px solid var(--line); font-size: .88rem; }
@media (min-width: 620px) { .mkt .app-row { grid-template-columns: minmax(0, 1fr) 54px 110px 96px; } }
.mkt .app-row.head { border-top: 0; padding-bottom: 8px; font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: var(--dim); }
.mkt .app-row .p { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkt .app-row .sc { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.mkt .app-row .sc, .mkt .app-row .meter { display: none; }
@media (min-width: 620px) { .mkt .app-row .sc, .mkt .app-row .meter { display: block; } }
.mkt .meter { height: 7px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.mkt .meter i { display: block; height: 100%; border-radius: 999px; }
.mkt .meter i.good { background: var(--mint); }
.mkt .meter i.mid { background: var(--violet); }
.mkt .meter i.poor { background: var(--coral); }
.mkt .app-crop { height: 34px; }
.mkt .app-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 92px; background: linear-gradient(to bottom, rgba(255,255,255,0), var(--surface) 78%); pointer-events: none; }

/* ---------- prose / toc / timeline / status ---------- */
.mkt .prose { max-width: 74ch; color: var(--ink-2); font-size: 1.03rem; }
.mkt .prose > * + * { margin-top: 1.1em; }
.mkt .prose h2 { margin-top: 2.2em; font-size: clamp(1.4rem, 2.4vw, 1.8rem); letter-spacing: -.028em; scroll-margin-top: calc(var(--nav-h) + 24px); }
.mkt .prose h3 { margin-top: 1.8em; font-size: 1.15rem; letter-spacing: -.022em; }
.mkt .prose h2:first-child, .mkt .prose h3:first-child { margin-top: 0; }
.mkt .prose ul, .mkt .prose ol { padding-left: 1.3em; display: grid; gap: .5em; }
.mkt .prose li { padding-left: .2em; }
.mkt .prose li::marker { color: var(--violet); }
.mkt .prose a { color: var(--violet-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.mkt .prose strong { color: var(--ink); font-weight: 600; }
.mkt .prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2.4em; }
.mkt .prose code { padding: 2px 6px; border-radius: 6px; font-size: .92em; background: var(--surface-3); color: var(--ink); font-family: var(--mono); }
.mkt .prose pre { padding: 18px 20px; border-radius: var(--r-md); overflow-x: auto; background: var(--ink); color: #f2f0ea; font-size: .9rem; line-height: 1.6; font-family: var(--mono); }
.mkt .prose pre code { background: none; color: inherit; padding: 0; }
.mkt .with-toc { display: grid; gap: 40px; }
@media (min-width: 1000px) { .mkt .with-toc { grid-template-columns: 232px minmax(0, 1fr); gap: 56px; } }
.mkt .toc { align-self: start; }
@media (min-width: 1000px) { .mkt .toc { position: sticky; top: calc(var(--nav-h) + 28px); } }
.mkt .toc h4 { font-size: .78rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--dim); margin-bottom: 12px; }
.mkt .toc a { display: block; padding: 6px 0; font-size: .93rem; color: var(--ink-2); transition: color .2s var(--ease); }
.mkt .toc a:hover { color: var(--violet-deep); }
.mkt .timeline { display: grid; gap: 0; }
.mkt .entry { display: grid; gap: 14px; padding: 32px 0; border-top: 1px solid var(--line); }
@media (min-width: 860px) { .mkt .entry { grid-template-columns: 190px minmax(0, 1fr); gap: 40px; } }
.mkt .entry .meta { display: grid; gap: 8px; align-content: start; }
.mkt .entry .date { font-size: .88rem; font-weight: 600; color: var(--dim); }
.mkt .status-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); margin-bottom: 10px; }
.mkt .status-row:last-child { margin-bottom: 0; }
.mkt .status-row .nm { font-weight: 600; color: var(--ink); font-size: 1rem; }
.mkt .dot-ok { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--mint-deep); }

/* ---------- voice orb ---------- */
.mkt .orb-wrap { --orb: 178px; position: relative; display: grid; place-items: center; height: calc(var(--orb) * 1.7); margin: 30px 0 24px; }
.mkt .orb { position: relative; z-index: 2; width: var(--orb); height: var(--orb); border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: var(--grad); box-shadow: 0 26px 64px -18px rgba(124,92,207,.6), inset 0 -10px 30px rgba(0,0,0,.10), inset 0 8px 20px rgba(255,255,255,.25); transition: transform .25s var(--ease); }
.mkt .orb:hover { transform: scale(1.04); }
.mkt .orb:active { transform: scale(.97); }
.mkt .orb.idle { animation: breath 3.6s ease-in-out infinite; }
@keyframes breath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
/* Bare product .orb-core is a white waveform *mask*; null it out here or it would
   clip our five animated bars to a waveform silhouette. */
.mkt .orb-core { display: flex; align-items: center; gap: calc(var(--orb) / 28); width: auto; height: calc(var(--orb) * .30); background: none; -webkit-mask: none; mask: none; }
.mkt .orb-core i { display: block; width: calc(var(--orb) / 30); border-radius: 8px; background: rgba(255,255,255,.95); transform-origin: center; }
.mkt .orb-core i:nth-child(1) { height: calc(var(--orb) * .10); }
.mkt .orb-core i:nth-child(2) { height: calc(var(--orb) * .19); }
.mkt .orb-core i:nth-child(3) { height: calc(var(--orb) * .27); }
.mkt .orb-core i:nth-child(4) { height: calc(var(--orb) * .17); }
.mkt .orb-core i:nth-child(5) { height: calc(var(--orb) * .11); }
@keyframes orbbar { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }
.mkt .orb-ring { position: absolute; z-index: 1; width: var(--orb); height: var(--orb); border-radius: 50%; border: 2px solid var(--violet-line); opacity: 0; }
@keyframes orbring { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.68); opacity: 0; } }
.mkt .is-listening .orb-core i, .mkt .is-speaking .orb-core i { animation: orbbar .9s ease-in-out infinite; }
.mkt .is-listening .orb-ring { animation: orbring 1.9s ease-out infinite; }
.mkt .is-speaking .orb-ring { animation: orbring 2.4s ease-out infinite; }
.mkt .orb-core i:nth-child(2) { animation-delay: .12s; }
.mkt .orb-core i:nth-child(3) { animation-delay: .24s; }
.mkt .orb-core i:nth-child(4) { animation-delay: .36s; }
.mkt .orb-core i:nth-child(5) { animation-delay: .48s; }
.mkt .is-listening .orb-ring:nth-child(2), .mkt .ambient .orb-ring:nth-child(2) { animation-delay: .63s; }
.mkt .is-listening .orb-ring:nth-child(3), .mkt .ambient .orb-ring:nth-child(3) { animation-delay: 1.26s; }
@keyframes orbbar-soft { 0%, 100% { transform: scaleY(.66); } 50% { transform: scaleY(1); } }
.mkt .orb-wrap.ambient .orb-core i { animation: orbbar-soft 1.7s ease-in-out infinite; }
.mkt .orb-wrap.ambient .orb-ring { animation: orbring 3s ease-out infinite; }
.mkt .orb-wrap.ambient:hover .orb { transform: scale(1.04); }
.mkt .orb-wrap.orb-sm { --orb: 124px; height: calc(var(--orb) * 1.45); margin: 2px 0 10px; }
.mkt .cap-q { font-family: var(--f-serif); font-style: italic; font-size: 1.2rem; color: var(--dim); margin-bottom: 8px; }
.mkt .cap-a { color: var(--ink); font-size: 1.05rem; }
.mkt .cap-a a { color: var(--violet-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.mkt .scanline { animation: scan 2.6s ease-in-out infinite; }
@keyframes scan { 0%, 100% { transform: translateY(0); opacity: .3; } 50% { transform: translateY(140px); opacity: 1; } }
.mkt .sched { position: fixed; inset: 0; z-index: 300; display: none; place-items: center; padding: 20px; background: rgba(26,26,26,.45); backdrop-filter: blur(4px); }
.mkt .sched.open { display: grid; }
.mkt .sched-box { position: relative; width: min(760px, 100%); height: min(680px, 86vh); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-2); }
.mkt .sched-x { position: absolute; top: 12px; right: 14px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-size: 1.3rem; line-height: 1; }
.mkt .sched-box iframe { width: 100%; height: 100%; border: 0; }

/* ---------- motion ---------- */
.mkt .reveal { opacity: 0; translate: 0 16px; transition: opacity .8s var(--ease), translate .8s var(--ease); }
.mkt .reveal.in { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .mkt .reveal { opacity: 1; translate: none; } .mkt .strip-track { animation: none; } }

/* ---------- utilities (so templates carry no inline styles) ----------
   Bounded set covering the redesign's recurring one-offs: spacing, measure,
   alignment, a couple of heading sizes, meter-fill widths (figures are
   illustrative, so deciles are enough) and the small violet icon tile. */
.mkt .flush { padding-top: 0; }
.mkt .center-x { margin-inline: auto; text-align: center; justify-items: center; }
.mkt .narrow { max-width: 52ch; }
.mkt .narrow-wide { max-width: 58ch; }
.mkt .wide { max-width: 100%; }
.mkt .nowrap { white-space: nowrap; }
.mkt .mt-1 { margin-top: 8px; }
.mkt .mt-2 { margin-top: 12px; }
.mkt .mt-3 { margin-top: 24px; }
.mkt .mt-4 { margin-top: 48px; }
.mkt .row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mkt .row-flex { display: flex; align-items: center; gap: 12px; }
.mkt .wrap-flex { display: flex; flex-wrap: wrap; gap: 10px; }
.mkt .tile-tile { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: var(--r-sm); background: var(--violet-soft); color: var(--violet-deep); }
.mkt .tile-tile svg { width: 20px; height: 20px; }
.mkt .w-15 { width: 15%; }
.mkt .w-30 { width: 30%; }
.mkt .w-45 { width: 45%; }
.mkt .w-60 { width: 60%; }
.mkt .w-75 { width: 75%; }
.mkt .w-90 { width: 90%; }