/* brandonhowell.dev
   Layout: a product lineup. Quiet page, left-aligned type, every live demo sits on a dark "stage".
   Colors are tokens: light values on :root, dark values under the media query and [data-theme="dark"]. */

:root {
  --bg: #f3f4f6;
  --surface: #ffffff;
  --ink: #0b0d12;
  --ink-2: #454b57;
  --muted: #6c7381;
  --line: rgba(11, 13, 18, .10);
  --accent: #1d5bd8;
  --accent-ink: #ffffff;
  --accent-soft: rgba(29, 91, 216, .10);

  --stage: #0c0e13;
  --stage-2: #161a22;
  --stage-3: #222835;
  --stage-ink: #eef1f6;
  --stage-ink-2: #b4bbc8;
  --stage-muted: #858d9d;
  --stage-line: rgba(255, 255, 255, .09);
  --stage-accent: #6da7ec;
  --stage-accent-soft: rgba(109, 167, 236, .16);
  --stage-good: #3ecf6e;
  --stage-good-soft: rgba(62, 207, 110, .16);
  --stage-warn: #f5b83d;
  --stage-warn-soft: rgba(245, 184, 61, .16);
  --stage-bad: #ff6b6b;
  --stage-bad-soft: rgba(255, 107, 107, .16);
  --bar-muted: #5d6677;
  --bubble: #2a78d6;
  --bubble-ink: #ffffff;
  --device: #020306;
  --device-edge: #2b303b;

  --heat-0: #191e28; --heat-1: #0d366b; --heat-2: #104281; --heat-3: #1c5cab;
  --heat-4: #2a78d6; --heat-5: #3987e5; --heat-6: #6da7ec; --heat-7: #9ec5f4;

  --font-display: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --maxw: 1120px;
  --radius: 24px;
  --header-h: 56px;
  --subnav-h: 48px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #07080b; --surface: #121419; --ink: #eef0f4; --ink-2: #adb3bf; --muted: #828999;
    --line: rgba(255, 255, 255, .10); --accent: #6c9fff; --accent-ink: #06101f; --accent-soft: rgba(108, 159, 255, .14);
    --stage: #111319; --stage-2: #1a1e26; --stage-3: #262c39; --stage-line: rgba(255, 255, 255, .10);
    --heat-0: #1f2430;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #07080b; --surface: #121419; --ink: #eef0f4; --ink-2: #adb3bf; --muted: #828999;
  --line: rgba(255, 255, 255, .10); --accent: #6c9fff; --accent-ink: #06101f; --accent-soft: rgba(108, 159, 255, .14);
  --stage: #111319; --stage-2: #1a1e26; --stage-3: #262c39; --stage-line: rgba(255, 255, 255, .10);
  --heat-0: #1f2430;
  color-scheme: dark;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 17px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: 40; background: var(--bg);
}
img { max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 60; padding: 8px 14px; border-radius: 999px; background: var(--ink); color: var(--bg); text-decoration: none; font-size: 14px; }
.skip-link:focus { top: calc(env(safe-area-inset-top, 0px) + 8px); }
.wrap {
  max-width: var(--maxw); margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 700px) {
  .wrap {
    padding-left: max(32px, env(safe-area-inset-left, 0px));
    padding-right: max(32px, env(safe-area-inset-right, 0px));
  }
}
main [id], footer [id] { scroll-margin-top: calc(env(safe-area-inset-top, 0px) + var(--header-h) + 16px); }
.page-platform main [id], .page-platform footer [id] { scroll-margin-top: calc(env(safe-area-inset-top, 0px) + var(--header-h) + var(--subnav-h) + 8px); }

/* Header */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { height: var(--header-h); display: flex; align-items: center; gap: 22px; }
.brand {
  font-family: var(--font-display); font-weight: 640; font-stretch: 106%;
  font-size: 17px; letter-spacing: -.01em; text-decoration: none; margin-right: auto;
  white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.nav { display: flex; gap: 22px; }
.nav a { color: var(--ink-2); text-decoration: none; font-size: 14px; white-space: nowrap; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
@media (max-width: 560px) { .nav .hide-sm { display: none; } .site-header .wrap { gap: 16px; } }
@media (max-width: 480px) {
  .site-header .wrap { gap: 14px; }
  .brand { font-size: 16px; }
  .nav { gap: 16px; }
  .nav a { font-size: 13.5px; }
  /* One button that cycles Auto, Light, Dark */
  .theme-switch button[aria-pressed="false"] { display: none; }
}
.theme-switch {
  display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg);
}
.theme-switch button {
  width: 30px; height: 26px; border: 0; border-radius: 999px; background: transparent;
  color: var(--muted); display: grid; place-items: center; cursor: pointer; padding: 0;
}
.theme-switch button:hover { color: var(--ink); }
.theme-switch button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .14); }
.theme-switch svg { width: 15px; height: 15px; }

/* Type */
.eyebrow {
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin: 0;
}
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; text-wrap: balance; }
h1 {
  font-weight: 650; font-stretch: 108%; font-size: clamp(2.3rem, 1.25rem + 3.5vw, 4.1rem);
  line-height: 1.02; letter-spacing: -.028em; margin-top: 14px;
}
.hero h1 { font-size: clamp(3rem, 1.6rem + 5vw, 5.4rem); letter-spacing: -.035em; }
.tagline {
  font-family: var(--font-display); font-weight: 520; font-stretch: 104%;
  font-size: clamp(1.25rem, 1rem + .9vw, 1.7rem); line-height: 1.28; letter-spacing: -.012em;
  color: var(--ink-2); max-width: 30em; margin: 18px 0 0; text-wrap: pretty;
}
.tagline strong { color: var(--ink); font-weight: 600; }
h2 {
  font-weight: 640; font-stretch: 106%; font-size: clamp(1.8rem, 1.25rem + 1.9vw, 2.8rem);
  line-height: 1.06; letter-spacing: -.024em;
}
h3 { font-weight: 620; font-stretch: 104%; letter-spacing: -.012em; }
.lede {
  font-size: clamp(1.05rem, .98rem + .3vw, 1.22rem); color: var(--ink-2);
  max-width: 38em; margin: 18px 0 0; text-wrap: pretty;
}
sup.fn { font-size: .62em; line-height: 0; vertical-align: super; margin-left: 1px; }
sup.fn a { text-decoration: none; color: var(--muted); }
.stage sup.fn a, .flagship sup.fn { color: var(--stage-muted); }

/* Buttons and links */
.cta-row { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; margin-top: 28px; }
.btn {
  display: inline-flex; align-items: center; height: 44px; padding: 0 22px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: 15px; text-decoration: none;
}
.btn:hover { filter: brightness(1.08); }
.link { color: var(--accent); text-decoration: none; font-weight: 560; font-size: 15px; }
.link:hover { text-decoration: underline; }

/* Metrics */
.metrics {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
  margin: 40px 0 0; padding-top: 24px; border-top: 1px solid var(--line);
}
.metric { margin: 0; display: flex; flex-direction: column; }
.metric dt { order: 2; margin-top: 8px; font-size: 13.5px; color: var(--ink-2); line-height: 1.35; }
.metric dd {
  margin: 0; font-family: var(--font-display); font-weight: 620; font-stretch: 112%;
  font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.4rem); letter-spacing: -.02em; line-height: 1;
}
@media (max-width: 560px) { .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; } }

/* Home hero */
.hero .wrap {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px;
  align-items: center; padding-block: 64px 64px;
}
@media (max-width: 920px) { .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 44px; padding-block: 40px 48px; } }
.demo-col { display: flex; flex-direction: column; align-items: center; gap: 16px; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.chip {
  height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-2); font: 500 13.5px/1 var(--font-body); cursor: pointer;
}
.chip:hover { color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: transparent; }
.stage .chip { background: var(--stage-2); color: var(--stage-ink-2); border-color: var(--stage-line); height: 32px; font-size: 13px; }
.stage .chip:hover { color: var(--stage-ink); }
.stage .chip[aria-pressed="true"] { background: var(--stage-ink); color: var(--stage); }
.demo-note { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 0; }

/* Phone */
.phone {
  width: 300px; max-width: 100%; aspect-ratio: 300 / 620; border-radius: 50px; padding: 9px;
  background: var(--device);
  box-shadow: inset 0 0 0 1.5px var(--device-edge), 0 40px 80px -34px rgba(11, 13, 18, .5);
}
.screen {
  height: 100%; border-radius: 41px; background: var(--stage); color: var(--stage-ink);
  overflow: hidden; display: flex; flex-direction: column; position: relative;
}
.island { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 88px; height: 25px; border-radius: 20px; background: var(--device); }
.app-bar { padding: 46px 18px 10px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--stage-line); }
.app-title { font-family: var(--font-display); font-weight: 620; font-size: 15px; }
.app-status { font-family: var(--font-mono); font-size: 10.5px; color: var(--stage-muted); display: inline-flex; align-items: center; gap: 6px; }
.app-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--stage-good); }
.phone .chat { flex: 1; padding: 14px 13px 6px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.msg-q {
  align-self: flex-end; max-width: 86%; background: var(--bubble); color: var(--bubble-ink);
  border-radius: 18px 18px 5px 18px; padding: 9px 13px; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere;
}
.calls { display: flex; flex-direction: column; gap: 5px; }
.call {
  display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11.5px;
  color: var(--stage-ink-2); padding: 6px 9px; border-radius: 9px; background: var(--stage-2); min-width: 0;
}
.call span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call .t { margin-left: auto; color: var(--stage-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.msg-a { background: var(--stage-2); border-radius: 18px 18px 18px 5px; padding: 11px 13px; font-size: 14px; line-height: 1.42; }
.msg-a b { font-weight: 650; }
.meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--stage-muted); display: flex; flex-wrap: wrap; gap: 4px 12px; padding-left: 4px; }
.composer {
  margin: 6px 12px 14px; min-height: 40px; border-radius: 20px; border: 1px solid var(--stage-line);
  display: flex; align-items: center; padding: 0 14px; font-size: 13px; color: var(--stage-muted);
}
.ico { width: 14px; height: 14px; flex: none; }
.ico-bg { fill: var(--stage-good-soft); }
.ico-check { fill: none; stroke: var(--stage-good); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico-ring { fill: none; stroke: var(--stage-accent); stroke-width: 2; stroke-dasharray: 26 12; stroke-linecap: round; }
.ico-x { fill: none; stroke: var(--stage-bad); stroke-width: 1.8; stroke-linecap: round; }
.ico-bad-bg { fill: var(--stage-bad-soft); }
.ico-dot { fill: var(--stage-muted); }
.spin { animation: spin .9s linear infinite; transform-origin: 50% 50%; }
@keyframes spin { to { transform: rotate(360deg); } }
.enter { animation: rise .35s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .spin, .enter { animation: none; } }

/* Sections */
.section { padding-block: 56px; }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; margin-bottom: 24px; }
.section-head p { margin: 0; color: var(--ink-2); max-width: 30em; }

.flagship {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 36px; align-items: center;
  background: var(--stage); color: var(--stage-ink); border-radius: 28px;
  padding: clamp(24px, 4vw, 44px); text-decoration: none;
}
@media (max-width: 860px) { .flagship { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
.flagship .eyebrow { color: var(--stage-muted); }
.flagship h3 { font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.3rem); line-height: 1.08; margin-top: 12px; }
.flagship p { color: var(--stage-ink-2); margin: 14px 0 0; max-width: 32em; }
.flagship .go { display: inline-block; margin-top: 20px; color: var(--stage-accent); font-weight: 560; font-size: 15px; }
.flagship:hover .go { text-decoration: underline; }
.heat-caption { margin: 10px 0 0; font-family: var(--font-mono); font-size: 11px; color: var(--stage-muted); letter-spacing: .03em; }

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 920px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3.big { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) { .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); } }
.tile {
  background: var(--surface); border-radius: var(--radius); padding: 24px;
  display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--ink); min-width: 0;
}
.tile h3 { font-size: 1.22rem; margin-top: 6px; }
.grid-3.big .tile h3 { font-size: 1.4rem; }
.tile p { margin: 0; color: var(--ink-2); font-size: 15px; }
.tile .go { margin-top: auto; padding-top: 8px; color: var(--accent); font-size: 14.5px; font-weight: 560; }
a.tile:hover .go { text-decoration: underline; }
.vis { height: 116px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; margin-bottom: 6px; }
.grid-3.big .vis { height: 176px; }
.vis svg { display: block; width: 100%; height: 100%; }
.vis-big { font-family: var(--font-display); font-weight: 620; font-stretch: 112%; font-size: 3rem; line-height: 1; letter-spacing: -.03em; }
.vis-big .arrow { color: var(--muted); font-weight: 400; margin-inline: .12em; }
.vis-sub { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); letter-spacing: .03em; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 12.5px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; }
.tile .eyebrow { font-size: 11.5px; }

/* Mini stages inside home tiles */
.mini-stage { height: 100%; background: var(--stage); color: var(--stage-ink); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 7px; overflow: hidden; }
.mini-stage .msg-q { font-size: 12px; padding: 6px 10px; border-radius: 14px 14px 4px 14px; }
.mini-stage .msg-a { font-size: 12px; padding: 7px 10px; border-radius: 14px 14px 14px 4px; line-height: 1.35; }
.mini-stage .call { font-size: 10.5px; padding: 4px 8px; }
.mini-stage .tick { color: var(--stage-good); }
.mini-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; flex: 1; }
.mini-kpi { background: var(--stage-2); border-radius: 9px; padding: 8px; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; min-width: 0; }
.mini-kpi small { font-size: 10px; color: var(--stage-muted); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-kpi b { font-family: var(--font-display); font-size: 15px; font-weight: 620; font-stretch: 108%; }
.mini-kpi i { height: 4px; border-radius: 2px; display: block; }
.mini-kpi i.healthy { background: var(--stage-good); } .mini-kpi i.watch { background: var(--stage-warn); } .mini-kpi i.action { background: var(--stage-bad); }
.mini-src { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; color: var(--stage-ink-2); }
.mini-src .t { margin-left: auto; color: var(--stage-muted); }
.mini-done { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 9px; background: var(--stage-accent-soft); font-size: 12px; color: var(--stage-ink); }

/* Bars (HTML, label and value on top, track below) */
.hbars { display: flex; flex-direction: column; gap: 14px; }
.hb { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: baseline; }
.hb-l { font-size: 13.5px; color: var(--stage-ink-2); }
.hb-v { font-family: var(--font-display); font-weight: 620; font-stretch: 110%; font-size: 1.15rem; text-align: right; }
.hb-track { grid-column: 1 / -1; height: 12px; border-radius: 4px; background: var(--stage-3); overflow: hidden; }
.hb-fill { display: block; height: 100%; border-radius: 4px; background: var(--stage-accent); }
.hb-fill.muted { background: var(--bar-muted); }
.on-page .hb-l { color: var(--ink-2); font-size: 12.5px; }
.on-page .hb-v { font-size: 1rem; }
.on-page .hb-track { background: var(--bg); height: 10px; }
.on-page .hb-fill { background: var(--accent); }
.on-page .hb-fill.muted { background: var(--muted); }
.on-page.hbars { gap: 10px; }

/* SVG charts */
.ax { font-family: var(--font-mono); font-size: 10px; fill: var(--stage-muted); }
.on-page .ax { fill: var(--muted); }
.cal .grid { stroke: var(--stage-line); stroke-width: 1; }
.cal .diag { stroke: var(--stage-muted); stroke-width: 1.25; opacity: .7; }
.cal .dot { fill: var(--stage-accent); stroke: var(--stage); stroke-width: 2; }
.cal.on-page .diag { stroke: var(--muted); }
.cal.on-page .dot { fill: var(--accent); stroke: var(--surface); }
.heat .h0 { fill: var(--heat-0); } .heat .h1 { fill: var(--heat-1); } .heat .h2 { fill: var(--heat-2); } .heat .h3 { fill: var(--heat-3); }
.heat .h4 { fill: var(--heat-4); } .heat .h5 { fill: var(--heat-5); } .heat .h6 { fill: var(--heat-6); } .heat .h7 { fill: var(--heat-7); }
.heat rect[data-n]:hover { stroke: var(--stage-ink); stroke-width: 1.5; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.heat-full { min-width: 560px; }
.legend { display: flex; align-items: center; gap: 8px 12px; margin-top: 14px; font-family: var(--font-mono); font-size: 11px; color: var(--stage-muted); flex-wrap: wrap; }
.legend .sw { display: inline-flex; gap: 3px; }
.legend .sw i { width: 14px; height: 14px; border-radius: 3px; display: block; }
.legend .sw .h0 { background: var(--heat-0); } .legend .sw .h1 { background: var(--heat-1); } .legend .sw .h2 { background: var(--heat-2); } .legend .sw .h3 { background: var(--heat-3); }
.legend .sw .h4 { background: var(--heat-4); } .legend .sw .h5 { background: var(--heat-5); } .legend .sw .h6 { background: var(--heat-6); } .legend .sw .h7 { background: var(--heat-7); }
.legend .end { margin-left: auto; }

.tip {
  position: fixed; z-index: 50; pointer-events: none; padding: 6px 10px; border-radius: 8px;
  background: var(--ink); color: var(--bg); font: 500 12px/1.3 var(--font-mono); white-space: nowrap;
  transform: translate(-50%, calc(-100% - 10px));
}

/* Platform page */
.p-hero .wrap { padding-block: 56px 36px; }
.subnav {
  position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--header-h)); z-index: 25;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line);
}
.subnav .wrap { height: var(--subnav-h); display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.subnav .wrap::-webkit-scrollbar { display: none; }
.subnav .label { font-family: var(--font-display); font-weight: 620; font-size: 14px; margin-right: 10px; white-space: nowrap; }
.subnav a { white-space: nowrap; padding: 6px 12px; border-radius: 999px; color: var(--ink-2); font-size: 13.5px; text-decoration: none; }
.subnav a:hover { color: var(--ink); }
.subnav a.active { background: var(--accent-soft); color: var(--accent); }
@media (max-width: 560px) { .subnav .label { display: none; } }

.feature { padding-block: 64px 24px; }
.feature-head { max-width: 46rem; }
.feature-head h2 { margin-top: 12px; }
.stage {
  margin-top: 28px; background: var(--stage); color: var(--stage-ink);
  border-radius: 28px; padding: clamp(14px, 3vw, 32px);
}
.stage-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.stage-note { font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--stage-muted); margin: 0; }
.stage-note.after { margin-top: 14px; }
.panel { background: var(--stage-2); border-radius: 18px; padding: 18px; min-width: 0; }
.panel-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--stage-muted); margin: 0 0 12px; font-weight: 500; }

.points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
@media (max-width: 820px) { .points { grid-template-columns: minmax(0, 1fr); } }
.point { background: var(--surface); border-radius: var(--radius); padding: 22px 24px; }
.point h3 { font-size: 1.08rem; }
.point p { margin: 8px 0 0; color: var(--ink-2); font-size: 15px; }

/* Assistant chat */
.chat-wrap { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 16px; }
@media (max-width: 900px) { .chat-wrap { grid-template-columns: minmax(0, 1fr); } }
.chat-panel { display: flex; flex-direction: column; background: var(--stage-2); border-radius: 18px; min-width: 0; overflow: hidden; }
.chat-log { height: 460px; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
@media (max-width: 600px) { .chat-log { height: 420px; padding: 14px; } }
.chat-log .msg-q { font-size: 15px; }
.chat-log .msg-a { background: var(--stage-3); font-size: 15px; max-width: 94%; }
.chat-log .call { background: var(--stage-3); font-size: 12px; }
.chat-log .calls { max-width: 94%; }
.answer-vis { margin-top: 10px; }
details.how { margin-top: 10px; font-size: 12.5px; color: var(--stage-muted); }
details.how summary { cursor: pointer; }
details.how ul { margin: 8px 0 0; padding-left: 16px; font-family: var(--font-mono); font-size: 11.5px; display: flex; flex-direction: column; gap: 3px; }
.chat-suggest { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px 0; border-top: 1px solid var(--stage-line); }
.chat-form { display: flex; gap: 8px; padding: 10px 14px 14px; }
.chat-form input {
  flex: 1; min-width: 0; height: 44px; border-radius: 22px; border: 1px solid var(--stage-line);
  background: var(--stage); color: var(--stage-ink); padding: 0 16px; font: 16px var(--font-body);
}
.chat-form input::placeholder { color: var(--stage-muted); }
.chat-form button { height: 44px; padding: 0 18px; border-radius: 22px; border: 0; background: var(--stage-ink); color: var(--stage); font: 600 14.5px var(--font-body); cursor: pointer; }
.hood-q { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; line-height: 1.3; margin: 0 0 16px; overflow-wrap: anywhere; }
.totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--stage-line); }
.totals div { display: flex; flex-direction: column; gap: 2px; }
.totals dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--stage-muted); }
.totals dd { margin: 0; font-family: var(--font-display); font-weight: 600; font-stretch: 108%; font-size: 1.05rem; }
.trace { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.trace li { background: var(--stage-3); border-radius: 12px; padding: 11px 13px; min-width: 0; }
.tr-head { display: flex; align-items: center; gap: 10px; }
.tr-n { font-family: var(--font-mono); font-size: 11px; color: var(--stage-muted); }
.tr-head code { font-family: var(--font-mono); font-size: 12.5px; color: var(--stage-ink); overflow-wrap: anywhere; }
.tr-head .t { margin-left: auto; font-family: var(--font-mono); font-size: 11.5px; color: var(--stage-muted); white-space: nowrap; }
.trace pre { margin: 7px 0 0; font-family: var(--font-mono); font-size: 11.5px; color: var(--stage-accent); white-space: pre-wrap; word-break: break-word; }
.tr-res { margin-top: 5px; font-size: 13px; color: var(--stage-ink-2); }
.av-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.av-table td { padding: 5px 0; border-top: 1px solid var(--stage-line); color: var(--stage-ink-2); }
.av-table td:last-child { text-align: right; color: var(--stage-ink); }
.av-bars { display: flex; flex-direction: column; gap: 7px; }
.av-bar { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 3.2rem; gap: 8px; align-items: center; font-size: 12.5px; color: var(--stage-ink-2); }
.av-bar span:last-child { text-align: right; color: var(--stage-ink); font-variant-numeric: tabular-nums; }
.av-bar i { height: 8px; border-radius: 4px; background: var(--stage-accent); display: block; }
.av-bar i.muted { background: var(--bar-muted); }
.av-pace .act { fill: none; stroke: var(--stage-accent); stroke-width: 2; stroke-linejoin: round; }
.av-pace .proj { fill: none; stroke: var(--stage-accent); stroke-width: 2; opacity: .4; }
.av-pace .tgt { stroke: var(--stage-muted); stroke-width: 1; }
.av-pace .now { fill: var(--stage-accent); }
.av-pace text { font-family: var(--font-mono); font-size: 10px; fill: var(--stage-ink-2); }

/* Segmented controls */
.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--stage-2); border: 1px solid var(--stage-line); }
.seg button {
  border: 0; background: transparent; color: var(--stage-ink-2); font: 500 13.5px/1 var(--font-body);
  padding: 9px 14px; border-radius: 999px; cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--stage-ink); color: var(--stage); }

/* Daily reports */
.rep-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 16px; }
.rep-title { font-family: var(--font-display); font-weight: 620; font-size: 1.2rem; }
.rep-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--stage-muted); margin-top: 2px; }
.rep-summary { background: var(--stage-2); border-radius: 18px; padding: 16px 18px; }
.rep-summary p:last-child { margin: 0; font-size: 15.5px; line-height: 1.65; }
.rep-sec { margin-top: 18px; }
.rep-sec h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--stage-muted); margin: 0 0 8px; font-weight: 500; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
@media (max-width: 480px) { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
button.kpi {
  display: flex; flex-direction: column; gap: 6px; text-align: left; background: var(--stage-2);
  border: 1px solid transparent; border-radius: 14px; padding: 12px 13px; color: var(--stage-ink);
  cursor: pointer; font: inherit; min-width: 0;
}
button.kpi:hover { border-color: var(--stage-line); }
button.kpi[aria-pressed="true"] { border-color: var(--stage-accent); background: var(--stage-3); }
.kpi-l { font-size: 12.5px; color: var(--stage-ink-2); line-height: 1.3; min-height: 2.6em; }
.kpi-v { font-family: var(--font-display); font-weight: 620; font-stretch: 108%; font-size: 1.45rem; line-height: 1.05; }
.kpi-v.small { font-size: 1.05rem; }
svg.spark { width: 100%; height: 26px; display: block; }
.spark path { fill: none; stroke: var(--stage-accent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.kpi-f { display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; }
.kpi-d { font-family: var(--font-mono); font-size: 11px; color: var(--stage-muted); white-space: nowrap; }
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 8px 3px 6px; border-radius: 999px; white-space: nowrap; }
.pill svg { width: 11px; height: 11px; }
.pill .cut { stroke: var(--stage); }
.pill .cut-dot { fill: var(--stage); }
.pill.healthy { background: var(--stage-good-soft); color: var(--stage-good); }
.pill.watch { background: var(--stage-warn-soft); color: var(--stage-warn); }
.pill.action { background: var(--stage-bad-soft); color: var(--stage-bad); }
.pill.info { background: var(--stage-3); color: var(--stage-ink-2); }
.rep-detail { margin-top: 16px; background: var(--stage-2); border-radius: 18px; padding: 16px 18px; }
.rep-detail-head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-bottom: 4px; }
.rep-detail-head strong { font-family: var(--font-display); font-weight: 620; font-size: 1.05rem; }
.rep-detail-reason { font-size: 13.5px; color: var(--stage-ink-2); margin: 0 0 10px; }
.hist svg { display: block; width: 100%; height: auto; }
.hist .band { opacity: .14; }
.hist .band.healthy { fill: var(--stage-good); } .hist .band.watch { fill: var(--stage-warn); } .hist .band.action { fill: var(--stage-bad); }
.hist .pline { stroke: var(--stage-muted); stroke-width: 1; opacity: .5; }
.hist .hline { fill: none; stroke: var(--stage-ink-2); stroke-width: 1.5; stroke-linejoin: round; }
.hist .hit { fill: transparent; }
.hist .today { stroke: var(--stage-2); stroke-width: 2.5; }
.hist .today.healthy { fill: var(--stage-good); } .hist .today.watch { fill: var(--stage-warn); } .hist .today.action { fill: var(--stage-bad); } .hist .today.info { fill: var(--stage-accent); }

/* Skip tracing */
.case-strip { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--stage-line); }
.case-id { font-family: var(--font-display); font-weight: 620; font-size: 1.15rem; }
.case-fact { font-size: 13.5px; color: var(--stage-ink-2); }
.case-fact b { color: var(--stage-ink); font-weight: 600; }
.masked { font-family: var(--font-mono); font-size: 13px; color: var(--stage-ink); }
.mini-btn { border: 1px solid var(--stage-line); background: var(--stage-2); color: var(--stage-ink-2); border-radius: 999px; padding: 6px 11px; font: 500 12.5px/1 var(--font-body); cursor: pointer; }
.mini-btn:hover { color: var(--stage-ink); }
.run-btn { margin-left: auto; height: 38px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--stage-ink); color: var(--stage); font: 600 14px var(--font-body); cursor: pointer; }
.run-btn[disabled] { opacity: .5; cursor: default; }
.reveal-note { flex-basis: 100%; font-size: 12.5px; color: var(--stage-warn); margin: 0; }
.skip-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 900px) { .skip-grid { grid-template-columns: minmax(0, 1fr); } }
.src-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.src { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 3px 10px; align-items: start; padding: 10px 12px; border-radius: 12px; background: var(--stage-3); }
.src .ico { width: 16px; height: 16px; margin-top: 2px; }
.src-name { font-size: 14px; font-weight: 600; min-width: 0; }
.src-vendor { font-weight: 400; color: var(--stage-muted); font-size: 12.5px; margin-left: 4px; }
.src-tag { font-family: var(--font-mono); font-size: 10.5px; color: var(--stage-muted); text-transform: uppercase; letter-spacing: .05em; }
.src-find { grid-column: 2 / -1; font-size: 13px; color: var(--stage-ink-2); }
.src-sum { margin: 10px 2px 0; font-family: var(--font-mono); font-size: 11.5px; color: var(--stage-muted); }
.dossier-sum { margin: 0 0 14px; font-size: 14.5px; line-height: 1.55; color: var(--stage-ink); }
.locs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.loc { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; }
.loc-pin { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 600 11.5px/1 var(--font-mono); background: var(--stage-3); color: var(--stage-ink-2); }
.loc.top .loc-pin { background: var(--stage-accent); color: var(--stage); }
.loc-addr { font-weight: 600; font-size: 14.5px; }
.loc-why { grid-column: 2 / -1; font-size: 13px; color: var(--stage-ink-2); line-height: 1.4; }
.conf { font-family: var(--font-mono); font-size: 10.5px; padding: 3px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.conf.high { background: var(--stage-good-soft); color: var(--stage-good); }
.conf.medium { background: var(--stage-warn-soft); color: var(--stage-warn); }
.conf.low { background: var(--stage-3); color: var(--stage-muted); }
.next-step { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--stage-accent-soft); font-size: 14.5px; line-height: 1.45; }
.next-step small { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--stage-accent); margin-bottom: 4px; }
.loop-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.loop-btns span { font-size: 13px; color: var(--stage-muted); margin-right: 2px; }
.loop-log { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.loop-log li { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; color: var(--stage-ink-2); padding-top: 6px; border-top: 1px solid var(--stage-line); }
.loop-log .pill { margin-left: auto; }
.dossier-cost { margin: 12px 0 0; font-family: var(--font-mono); font-size: 11.5px; color: var(--stage-muted); }
.skip-busy { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--stage-ink-2); padding: 20px 0; }
.skip-busy .ico { width: 18px; height: 18px; }
.map { margin-top: 14px; }
.map svg { display: block; width: 100%; height: auto; border-radius: 12px; }
.map .bg { fill: var(--stage-3); }
.map .street { stroke: var(--stage-line); stroke-width: 1; }
.map .road { fill: none; stroke: var(--stage-2); stroke-width: 7; stroke-linecap: round; }
.map .route { fill: none; stroke: var(--stage-accent); stroke-width: 2; opacity: .5; stroke-linecap: round; }
.map .read { fill: var(--stage-accent); }
.map .ping { fill: none; stroke: var(--stage-ink-2); stroke-width: 2; }
.map .pin { fill: var(--stage-2); stroke: var(--stage-ink-2); stroke-width: 1.5; }
.map .pin.top { fill: var(--stage-accent); stroke: var(--stage-accent); }
.map .pin-t { font: 600 11px var(--font-mono); fill: var(--stage-ink); }
.map .pin-t.top { fill: var(--stage); }
.comp { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.comp span { font-size: 12px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--stage-line); color: var(--stage-ink-2); display: inline-flex; gap: 6px; align-items: center; }
.comp svg { width: 12px; height: 12px; }

/* Grounded validator */
.ground { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, .9fr); gap: 16px; }
@media (max-width: 960px) { .ground { grid-template-columns: minmax(0, 1fr); } }
.kv { margin: 0; display: flex; flex-direction: column; }
.kv div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--stage-line); }
.kv div:first-child { border-top: 0; padding-top: 0; }
.kv dt { font-family: var(--font-mono); font-size: 12px; color: var(--stage-ink-2); min-width: 0; overflow-wrap: anywhere; }
.kv dd { margin: 0; font-family: var(--font-mono); font-size: 12.5px; color: var(--stage-ink); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.draft { margin: 0; font-size: 15.5px; line-height: 1.7; }
mark { color: inherit; background: none; padding: 1px 2px; border-radius: 4px; }
mark.ok { background: var(--stage-accent-soft); box-shadow: inset 0 -2px 0 var(--stage-accent); }
mark.bad { background: var(--stage-bad-soft); text-decoration: underline wavy var(--stage-bad); text-underline-offset: 4px; }
.key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; font-size: 12px; color: var(--stage-muted); }
.key span { display: inline-flex; align-items: center; gap: 6px; }
.key i { width: 18px; height: 10px; border-radius: 3px; display: inline-block; }
.key .k-ok { background: var(--stage-accent-soft); box-shadow: inset 0 -2px 0 var(--stage-accent); }
.key .k-bad { background: var(--stage-bad-soft); box-shadow: inset 0 -2px 0 var(--stage-bad); }
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.checks li { display: flex; gap: 10px; font-size: 14px; color: var(--stage-ink-2); line-height: 1.4; }
.checks .ico { margin-top: 2px; width: 16px; height: 16px; }
.verdict { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 600; }
.verdict.ok { background: var(--stage-good-soft); color: var(--stage-good); }
.verdict.bad { background: var(--stage-bad-soft); color: var(--stage-bad); }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
@media (max-width: 820px) { .stats { grid-template-columns: minmax(0, 1fr); } }
.stat { background: var(--surface); border-radius: var(--radius); padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; }
.stat b {
  font-family: var(--font-display); font-weight: 620; font-stretch: 112%;
  font-size: clamp(2.6rem, 1.8rem + 2.4vw, 3.6rem); letter-spacing: -.03em; line-height: 1;
}
.stat span { color: var(--ink-2); font-size: 15px; }
.after-note { margin: 20px 0 0; color: var(--ink-2); max-width: 44rem; }

.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 860px) { .two { grid-template-columns: minmax(0, 1fr); } }
.ba { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ba th { text-align: left; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--stage-muted); font-weight: 500; padding: 0 8px 8px 0; }
.ba td { padding: 10px 8px 10px 0; border-top: 1px solid var(--stage-line); font-size: 14px; color: var(--stage-ink-2); }
.ba td.n { font-family: var(--font-display); font-weight: 600; font-stretch: 108%; color: var(--stage-ink); font-size: 15px; white-space: nowrap; }
.ba td.n.before { color: var(--stage-muted); text-decoration: line-through; text-decoration-color: var(--stage-muted); }
.ba th:last-child, .ba td:last-child { text-align: right; padding-right: 0; }
.finds { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.finds li { font-size: 14px; color: var(--stage-ink-2); padding-left: 16px; position: relative; line-height: 1.45; }
.finds li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 2px; background: var(--stage-accent); }
.finds b { color: var(--stage-ink); font-weight: 600; }
.chart-title { font-size: 14.5px; font-weight: 600; margin: 0 0 4px; color: var(--stage-ink); }
.chart-sub { font-size: 13px; color: var(--stage-muted); margin: 0 0 16px; }

.spec-table { width: 100%; border-collapse: collapse; margin-top: 24px; }
.spec-table th {
  text-align: left; vertical-align: top; width: 26%; padding: 18px 20px 18px 0;
  font-family: var(--font-display); font-weight: 620; font-size: 16px; border-top: 1px solid var(--line);
}
.spec-table td { padding: 18px 0; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 15.5px; }
@media (max-width: 620px) {
  .spec-table th, .spec-table td { display: block; width: auto; }
  .spec-table th { padding-bottom: 4px; }
  .spec-table td { border-top: 0; padding-top: 0; }
}

/* Contact and footer */
.contact .wrap { padding-block: 72px 56px; }
.contact h2 { margin-top: 12px; }
.contact-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.contact-item {
  display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px;
  background: var(--surface); text-decoration: none; min-width: 0;
}
.contact-item small { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.contact-item span, .contact-item a { font-size: 15px; overflow-wrap: anywhere; }
.contact-item a { text-decoration: none; }
.contact-item a:hover { text-decoration: underline; }
.copy-btn {
  border: 1px solid var(--line); background: var(--bg); color: var(--ink-2); border-radius: 999px;
  font: 500 12.5px/1 var(--font-body); padding: 7px 11px; cursor: pointer;
}
.copy-btn:hover { color: var(--ink); }
.site-footer { border-top: 1px solid var(--line); }
.site-footer .wrap { padding-block: 28px 40px; }
.footnotes { margin: 0; padding-left: 1.3em; color: var(--muted); font-size: 12.5px; display: flex; flex-direction: column; gap: 6px; max-width: 52rem; }
.copyright { margin: 20px 0 0; color: var(--muted); font-size: 12.5px; }

/* Not found */
.not-found .wrap { padding-block: 96px; }
.not-found p { color: var(--ink-2); }