/* ============================================================
   ARIA — Clay.
   Warm and conversational: a terracotta accent (#cc785c) on a cream ground,
   soft accent-tinted shadows over rounded surfaces, Inter for the voice and
   Space Grotesk for the wordmark. Tokens mirror the marketing site's
   assets/theme.js (the frontpage repo). State colors still carry meaning —
   go green verified, wait amber pending, alarm red destructive.

   NOTE: the styleguide view parses the FIRST custom-property block
   below (colors + fonts) to render the palette. Keep colors and
   fonts there; tints and geometry live in the second block.
   ============================================================ */

:root {
  --bg:      #F8F6F0;
  --surface: #FFFFFF;
  --ink:     #2A2520;
  --ink-2:   #6F6A60;
  --ink-3:   #A39C8E;
  --line:    #E6E3DD;
  --accent:  #CC785C;
  --go:      #5F7A4F;
  --wait:    #9A6B2E;
  --alarm:   #C0492F;

  --body: "Inter", system-ui, sans-serif;
  --mono: "Geist Mono", monospace;
}

:root {
  --ink-4:      #B8B1A3;
  --line-2:     #D7D4CD;
  --surface-2:  #F0ECE1;
  --accent-2:   #B8623C;
  --accent-ink: #B8623C;
  --accent-grad: linear-gradient(120deg, #CC785C 0%, #D98B63 45%, #B8623C 100%);
  --go-bg:      #E1E5D7;
  --go-line:    #C6D0B8;
  --wait-bg:    #FAF0DF;
  --wait-line:  #ECDABB;
  --alarm-bg:   #F2E5DC;
  --alarm-line: #E7C2B6;
  --accent-tint: #F6E6DC;
  --accent-soft: #F1DCD0;
  --radius:     18px;
  --radius-s:   12px;
  --shadow-s:   0 1px 2px rgba(43, 38, 32, 0.05);
  --shadow-m:   0 24px 46px -30px rgba(204, 120, 92, 0.45);
}

* { 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(204, 120, 92, 0.13), transparent 60%),
    radial-gradient(50% 45% at 90% 10%, rgba(184, 98, 60, 0.10), transparent 55%),
    radial-gradient(45% 40% at 50% 100%, rgba(224, 164, 88, 0.08), transparent 60%);
  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%, #F5F2EC 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(204, 120, 92, 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: "Space Grotesk", var(--body);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.wordmark .brandmark {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--accent-grad);
  display: grid;
  place-items: center;
  box-shadow: 0 0 22px rgba(204, 120, 92, 0.55), 0 2px 6px rgba(204, 120, 92, 0.20);
  flex: none;
}
.wordmark .brandmark svg { width: 14px; height: 14px; fill: #fff; }
.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; }

/* Geist Mono 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(43, 38, 32, 0.16);
  border-radius: 14px;
  padding: 12px 22px;
  cursor: pointer;
  color: var(--ink);
  background: rgba(43, 38, 32, 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(43, 38, 32, 0.07); border-color: rgba(43, 38, 32, 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(43, 38, 32, 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(--accent-grad); color: #fff; border-color: transparent; box-shadow: 0 16px 36px -14px rgba(204, 120, 92, 0.7); }
.btn-solid:hover { background: var(--accent-grad); border-color: transparent; transform: translateY(-2px); box-shadow: 0 22px 44px -14px rgba(204, 120, 92, 0.9); }
.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; }
.add-member { margin-top: 32px; }

.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(204, 120, 92, 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(--surface);
  border: 1px solid var(--line-2);
  display: grid;
  place-items: center;
  flex: none;
}
.orb-core {
  width: 22%;
  height: 22%;
  border-radius: 50%;
  background: var(--accent);
}
.orb-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: 0;
  animation: breathe 3.6s cubic-bezier(0.3, 0.7, 0.4, 1) infinite;
}
.orb-ring:nth-of-type(3) { animation-delay: 1.2s; }
.orb-ring:nth-of-type(4) { animation-delay: 2.4s; }
@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; }
.chat-stage {
  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;
}
.chat-line.visitor {
  justify-self: end;
  background: rgba(43, 38, 32, 0.04);
  border: 1px solid rgba(43, 38, 32, 0.09);
  color: var(--ink);
  border-bottom-right-radius: 5px;
}
.chat-line.aria {
  justify-self: start;
  background: linear-gradient(120deg, rgba(204, 120, 92, 0.13), rgba(184, 98, 60, 0.10));
  border: 1px solid rgba(43, 38, 32, 0.16);
  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. */
.chat-stage.embed { height: 100vh; max-width: none; padding: 0 16px; }
.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); }

/* tracked-prompt add form — the citation card's "tune the set" control */
.vis-add { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.vis-input { flex: 1; padding: 0.45rem 0.6rem; border: 1px solid var(--line-2); border-radius: var(--radius-s); font: inherit; }

/* ---------- 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 cream 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 — "Clay": the product surface in the marketing
   brand. Warm cream + terracotta, 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(204, 120, 92, 0.28), 0 2px 8px rgba(43, 38, 32, 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, .dpage .qhead { 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(204, 120, 92, 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); }
.bar.rival::-webkit-meter-optimum-value { background: var(--line-2); } .bar.rival::-moz-meter-bar { background: var(--line-2); }

/* 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); }
.prov { font-size: 12.5px; color: var(--ink-3); margin: 10px 0 4px; line-height: 1.5; }
.q { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-top: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-s); }
.q .vd { align-self: center; }
.q form { margin: 0; }
.qt { flex: 1; font-size: 15px; color: var(--ink); }
.qt s { display: block; text-decoration: none; font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.qt s a { color: var(--accent-ink); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.qt s a:hover { border-bottom-color: var(--accent); }
.qt q.ans { display: block; font-size: 12px; font-style: italic; color: var(--ink-3); line-height: 1.5; margin-top: 8px; }
.eng { font-family: var(--mono); font-size: 11px; color: var(--ink-3); white-space: nowrap; align-self: center; }
.q-actions { display: flex; gap: 10px; align-items: center; }
.q-rm { border: none; background: none; color: var(--ink-4); font-family: var(--mono); font-size: 11px; cursor: pointer; padding: 0; }
.q-rm:hover { color: var(--alarm); }
.sov { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.sov-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.sov-h b { font-size: 15px; font-weight: 700; }
.sov-h .sr { font-size: 12.5px; color: var(--ink-3); }
.sov-row { display: grid; grid-template-columns: 150px 1fr 40px; align-items: center; gap: 12px; padding: 7px 0; }
.sov-row .nm { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sov-row .p { font-family: var(--mono); font-size: 12px; color: var(--ink-3); text-align: right; }
.sov-row.you { background: rgba(204, 120, 92, 0.1); border-radius: var(--radius-s); padding: 7px 10px; margin: 0 -10px; }
.sov-row.you .nm { color: var(--accent-ink); font-weight: 700; }
.sov-more { font-family: var(--mono); font-size: 11px; color: var(--ink-4); margin: 6px 0 0; padding-left: 14px; }
.bench { margin-top: 16px; padding: 13px 15px 13px 16px; border-left: 3px solid var(--accent); border-radius: 0 var(--radius-s) var(--radius-s) 0; background: var(--bg); font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
.bench b { color: var(--ink); font-weight: 700; }
.tune-entry { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.tune-entry .fine { margin: 6px 0 0; }
.tune-workspace { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 18px; margin-top: 18px; }
.tune-pane { min-width: 0; }
.tune-pane-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.tune-pane-h h3 { margin: 0; font-size: 15px; }
.tune-pane-h .fine { margin: 4px 0 0; }
.tune-queue { display: grid; gap: 10px; margin-top: 14px; }
.tune-focus { display: grid; gap: 12px; }
.tune-meta { display: grid; gap: 10px; margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.tune-meta div { display: grid; gap: 4px; }
.tune-meta dt { font-size: 11px; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
.tune-meta dd { margin: 0; color: var(--ink); }
.tune-danger { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.q.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(204, 120, 92, 0.18); }
.q-rm-danger { color: var(--alarm); }
.qt[role="button"] { cursor: pointer; }
.qt[role="button"]:hover { color: var(--accent-ink); }
.tune-empty { display: grid; gap: 8px; padding: 20px; border: 1px dashed var(--line-2); border-radius: 14px; }
.tune-empty h3, .tune-empty .fine { margin: 0; }
.vis-add { display: flex; gap: 10px; }
.vis-input { flex: 1; padding: 11px 14px; border: 1px solid var(--line-2); border-radius: var(--radius-s); font: inherit; font-size: 14px; background: var(--surface); }
.vis-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(204, 120, 92, 0.16); }
@media (max-width: 760px) {
  .tune-workspace { grid-template-columns: 1fr; }
  .tune-entry { flex-direction: column; align-items: stretch; }
}
/* 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); }

/* 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; }
.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: "Space Grotesk", var(--body); 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: 14px; 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-ring { width: 92px; height: 92px; }
.lp-ring svg { width: 100%; height: 100%; }
.lp-sov { display: grid; gap: 12px; margin-top: 18px; max-width: 320px; }
.lp-sb { display: block; height: 9px; border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.lp-sb i { display: block; height: 100%; border-radius: 999px; background: var(--line-2); }
.lp-sb:nth-child(1) i { width: 82%; background: var(--accent); }
.lp-sb:nth-child(2) i { width: 61%; }
.lp-sb:nth-child(3) i { width: 38%; }
.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: "Space Grotesk", var(--body); 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 Clay 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 {
  --bg-peach: #F3E7DA;
  --accent-soft: #F6E4DA;
  --accent-tint: #F6E6DC;
  --r-pill: 999px;
  --r-btn: 14px;
  --brand: "Space Grotesk", "Inter", sans-serif;
  --shadow-card: 0 1px 2px rgba(43,38,32,.05), 0 14px 30px -26px rgba(43,38,32,.28);
  --shadow-btn: 0 16px 36px -14px rgba(204,120,92,.70);
}

/* 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(--r-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(204,120,92,.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(204, 120, 92, 0.36), 0 1px 3px rgba(43, 38, 32, 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(--r-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(--r-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(204,120,92,.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), #FDFBF8); 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(204,120,92,.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(--r-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(184,98,60,.8); }
.dboard .state-tag { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; padding:4px 10px;
  border-radius:var(--r-pill); background:var(--wait-bg); color:var(--wait); border:1px solid var(--wait-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(--r-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(--r-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(--r-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(204,120,92,.16); }

/* ---------- entrance + motion ---------- */
@keyframes dboard-rise { to { opacity:1; transform:none; } }
@keyframes dboard-pulse { 70% { box-shadow:0 0 0 7px rgba(204,120,92,0); } 100% { box-shadow:0 0 0 0 rgba(204,120,92,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(204,120,92,.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 + Citation) · GapRadar, mirroring
   the marketing frontpage. Replaces the AI-presence-stack funnel.
   Reuses .rec .dims .wins .pages .q .sov .bench .tune-entry .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(204, 120, 92, 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(184, 98, 60, 0.5); } 70% { box-shadow: 0 0 0 8px rgba(184, 98, 60, 0); } 100% { box-shadow: 0 0 0 0 rgba(184, 98, 60, 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(204, 120, 92, 0.18) 0%, rgba(184, 98, 60, 0.09) 55%, transparent 100%); border-color: rgba(204, 120, 92, 0.28); box-shadow: 0 32px 60px -24px rgba(204, 120, 92, 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(204, 120, 92, 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: "Space Grotesk", var(--body); 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: "Space Grotesk", var(--body); 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(204, 120, 92, 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(204, 120, 92, 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: "Space Grotesk", var(--body); 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(43, 38, 32, 0.04); }
.drill[open] > summary { border-bottom: 1px solid var(--line); background: rgba(43, 38, 32, 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: "Space Grotesk", var(--body); 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); }