/* The Constants marketing site: the landing page, the three product pages (src/site/) and People Search's page.
   Served by the web app at /_testing/site.css and inlined by the people search service. Always light. */
:root {
  --bg: #fbfbfc; --surface: #ffffff; --surface-2: #f6f6f8; --ink: #0b0b0f; --muted: #5f5f6b; --faint: #9a9aa5;
  --line: #ebebef; --line-strong: #dcdce2; --chip: #f3f3f6;
  --accent: #002676; --accent-soft: #e3e8f2; --accent-line: #bcc4d5; --solid: #0b0b0f; --solid-ink: #ffffff;
  --good: #15803d; --good-soft: #ecfdf3; --dot: #e3e3e9; --dot-hi: #8fa0c4;
  --code-bg: #0d0e14; --code-ink: #d6d8e3; --code-k: #b7a6ff; --code-s: #8fd3a6; --code-n: #f5b971; --code-c: #6c7086; --code-kw: #ff9dc4;
  --shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px -12px rgba(16,24,40,.12);
  --sans: Geist, Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --w: 1120px;
  color-scheme: light;
}

/* The Constants brand, from the product deck (and the docs template's navy): white pages, near-white cards, navy for
   headings, links, and buttons, gold to highlight, and green and red for a twin's thumbs up or down. Pages opt in with
   sitePage({ theme: "brand" }); the defaults above are People Search's original look. */
.theme-brand {
  --navy: #002676; --navy-2: #193B83; --gold: #FDB515; --gold-soft: #FFF4D6; --up: #2F8A57; --down: #B03A2E;
  --text: #171714; --grey: #5F5D57;
  --bg: #ffffff; --surface: #ffffff; --surface-2: #FAF9F5; --ink: var(--text); --muted: var(--grey); --faint: #8F8C84;
  --line: #E6E3DA; --line-strong: #CBC8BF; --chip: #F2F1EC;
  --accent: var(--navy); --accent-soft: #E3E8F2; --accent-line: #BCC4D5; --solid: var(--navy); --solid-ink: #ffffff;
  --good: var(--up); --good-soft: #E7F3EC;
  --dot: #E6E3DA; --dot-hi: #BCC4D5;
  --code-bg: #0A1430; --code-ink: #D9DEEA;
  --shadow: 0 1px 2px rgba(23,23,20,.04), 0 10px 28px -14px rgba(0,38,118,.18);
}
/* The top bar: solid white with black type, over navy as over white. */
.theme-brand .nav { background: #fff; }
.theme-brand :is(.nav-links a, .nav-drop-btn) { color: var(--text); }
.theme-brand .nav-page a[aria-current="page"] { color: var(--navy); font-weight: 500; }
/* Headings are navy. */
.theme-brand :is(h1, h2) { color: var(--navy); }
/* The hero heading is all navy; section headings put their second line in grey, like a subtitle. */
.theme-brand h1 .accent { color: var(--navy); }
.theme-brand h2 .accent { color: #55555D; }
.theme-brand .dots { opacity: .6; }
/* Headings that read as one sentence, and the closing call to action, stay navy throughout. */
.theme-brand :is(h2.one-tone, .final h2) .accent { color: var(--navy); }
/* Product widgets: faint dots, so the text on them stays easy to read. */
.theme-brand .mock { background-image: radial-gradient(circle, #EEECE6 1px, transparent 1.3px); }
.theme-brand .card h3, .theme-brand .product h3, .theme-brand .sector h3, .theme-brand .plan h3, .theme-brand .how-copy h3 { color: var(--navy); }

/* The brand font, as in the docs template and the current home page: Helvetica (Arial on Windows). Headings are
   medium; Arial has no medium, so on Windows they show in regular. Small uppercase labels and code are in JetBrains
   Mono, the deck's label font. */
.theme-brand { --sans: "Helvetica Neue", Helvetica, Arial, sans-serif; }
body.theme-brand :is(h1, h2, h3) { font-weight: 500; letter-spacing: -.02em; }
body.theme-brand :is(.hero h1, .final h2) { letter-spacing: -.03em; }
body.theme-brand .price { font-weight: 500; letter-spacing: -.02em; }
body.theme-brand :is(.eyebrow, .num, .plan-flag, .product-kicker span:last-child, .checklist em, .finding-tag, .compare dt, .rec,
  .session-task b, .widget-bar, .nav-menu-page span) { font-family: var(--mono); font-weight: 500; letter-spacing: .06em; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
code { font: 500 .86em var(--mono); background: var(--chip); border: 1px solid var(--line); padding: 1px 5px; border-radius: 5px; }
h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -.025em; }
.accent { color: var(--accent); }
.muted { color: var(--muted); }

.announce { border-bottom: 1px solid var(--line); background: var(--surface); text-align: center; font-size: 13px; }
.announce a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; color: var(--muted); }
.announce a:hover { color: var(--ink); }
.announce svg { width: 14px; height: 14px; color: var(--accent); }

.nav-wrap { position: sticky; top: 10px; z-index: 20; padding: 0 16px; margin-top: 12px; }
.nav { max-width: calc(var(--w) - 40px); margin: 0 auto; display: flex; align-items: center; gap: 24px; padding: 8px 8px 8px 18px;
  background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { display: block; width: 92px; height: auto; }
.nav-links { display: flex; gap: 4px; margin: 0 auto; }
.nav-links a { padding: 6px 12px; border-radius: 8px; font-size: 14px; color: var(--muted); }
.nav-links a:hover { color: var(--ink); background: var(--chip); }
.nav-cta { display: flex; gap: 8px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 10px;
  font: 500 14px var(--sans); border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform .15s, background .15s, border-color .15s; }
.btn.sm { height: 34px; padding: 0 14px; font-size: 13px; border-radius: 9px; }
.btn.solid { background: var(--solid); color: var(--solid-ink); }
.btn.solid:hover { transform: translateY(-1px); }
.btn.solid svg { transition: transform .15s; }
.btn.solid:hover svg { transform: translateX(2px); }
.btn.ghost { background: var(--surface); border-color: var(--line-strong); }
.btn.ghost:hover { background: var(--chip); }
.btn.outline { color: var(--accent); border-color: var(--accent-line); background: var(--surface); }
.btn.outline:hover { background: var(--accent-soft); }
.btn.wide { width: 100%; }

/* The page's ruled frame: one column with side rules, sections divided by full-width lines with markers. */
.frame { position: relative; max-width: var(--w); margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.frame + .frame::before, .footer::before { content: ""; position: absolute; top: 0; left: 50%; width: 100vw; margin-left: -50vw; border-top: 1px solid var(--line); }
.frame + .frame::after { content: ""; position: absolute; top: -4px; left: -4px; right: -4px; height: 7px;
  background: radial-gradient(circle, var(--line-strong) 2.5px, transparent 3px) left center / 7px 7px no-repeat,
              radial-gradient(circle, var(--line-strong) 2.5px, transparent 3px) right center / 7px 7px no-repeat; }
.section { padding: 96px 48px; }

.dots { position: absolute; top: 0; bottom: 0; width: 260px; pointer-events: none; opacity: .9;
  background-image: radial-gradient(circle, var(--dot) 1.3px, transparent 1.6px); background-size: 12px 12px; }
.dots-l { right: 100%; -webkit-mask: linear-gradient(90deg, transparent, #000 70%); mask: linear-gradient(90deg, transparent, #000 70%); }
.dots-r { left: 100%; -webkit-mask: linear-gradient(270deg, transparent, #000 70%); mask: linear-gradient(270deg, transparent, #000 70%); }

.hero { padding: 88px 48px 72px; text-align: center; border-left-color: transparent; border-right-color: transparent; }
.hero h1 { font-size: clamp(38px, 6vw, 66px); line-height: 1.04; letter-spacing: -.04em; }
.lede { max-width: 620px; margin: 22px auto 0; font-size: 17px; color: var(--muted); }
.ctas { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.fineprint { margin: 14px 0 0; font-size: 13px; color: var(--faint); }

.demo { margin: 56px auto 0; max-width: 980px; text-align: left; }
.demo-chips { display: flex; justify-content: center; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.demo-chips button { font: 500 13px var(--sans); color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.demo-chips button[aria-selected="true"] { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.window { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 6px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-soft) 70%, transparent), var(--shadow); }
.demo-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); min-height: 380px; }
.demo-panel[hidden] { display: none; }
.demo-left { padding: 18px; border-right: 1px solid var(--line); }
.demo-right { padding: 18px; display: flex; flex-direction: column; min-width: 0; }
.demo-label { font-size: 12px; color: var(--faint); margin-bottom: 10px; }
.demo-label.row { display: flex; justify-content: space-between; }
.demo-label .file { color: var(--accent); font-family: var(--mono); }
.demo-query { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2);
  font-size: 15px; min-height: 76px; margin-bottom: 18px; }
.demo-query svg { margin-top: 4px; color: var(--accent); }
.caret::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -2px; background: var(--accent); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.matches { list-style: none; margin: 0; padding: 0; }
.matches li { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-top: 1px solid var(--line); opacity: 0; transform: translateY(6px);
  transition: opacity .35s var(--d), transform .35s var(--d); }
.shown .matches li { opacity: 1; transform: none; }
.who { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; flex: 1; }
.who strong { font-weight: 500; font-size: 14px; }
.who span { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.where { font-size: 12.5px; color: var(--faint); white-space: nowrap; }
.av { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex: none; font-size: 11.5px; font-weight: 600;
  color: var(--tone); background: color-mix(in srgb, var(--tone) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--tone) 28%, transparent); }

pre.code { margin: 0; flex: 1; font: 12.5px/1.65 var(--mono); color: var(--code-ink); background: var(--code-bg); border-radius: 10px; padding: 16px 18px; overflow: auto; tab-size: 2; }
.code .k { color: var(--code-k); } .code .s { color: var(--code-s); } .code .n { color: var(--code-n); } .code .c { color: var(--code-c); } .code .kw { color: var(--code-kw); }

.strip { display: flex; align-items: center; gap: 28px; padding: 26px 48px; background: var(--surface); }
.strip p { margin: 0; font-size: 13.5px; color: var(--muted); max-width: 170px; line-height: 1.4; flex: none; }
.platforms { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; flex: 1; justify-content: space-between; }
.platforms li { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 500; }
.mark { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; }
.mark svg, .mark img { width: 22px; height: 22px; display: block; stroke: none; }
.mark.glyph { background: var(--accent-soft); color: var(--accent); border-radius: 6px; }
.mark.glyph svg { width: 14px; height: 14px; stroke: currentColor; }

.section-head { max-width: 640px; margin-bottom: 48px; }
.section-head.center { text-align: center; margin-left: auto; margin-right: auto; }
.section-head h2 { font-size: clamp(30px, 4vw, 42px); line-height: 1.1; }
.section-head p { color: var(--muted); font-size: 16px; margin: 16px 0 0; }
.section-head p a { color: var(--accent); }
.eyebrow { display: inline-block; font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--accent); margin-bottom: 14px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 24px; box-shadow: var(--shadow); position: relative; }
.card h3 { font-size: 18px; margin-bottom: 8px; }
.card p { margin: 0; color: var(--muted); font-size: 14px; }
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.card.big { padding: 28px; display: flex; flex-direction: column; }
.card.big > p { margin-bottom: 22px; }
.endpoint { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; font: 500 12.5px var(--mono); color: var(--muted); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px 4px 4px; margin-bottom: 18px; }
.verb { font-size: 11px; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 5px; padding: 1px 6px; }
.mock { margin-top: auto; border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--surface-2);
  background-image: radial-gradient(circle, var(--dot) 1px, transparent 1.3px); background-size: 10px 10px; }
.mock-query { display: flex; gap: 8px; align-items: center; font-size: 13.5px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; margin-bottom: 10px; }
.mock-query svg { color: var(--accent); }
.mini { list-style: none; margin: 0; padding: 4px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; }
.mini li { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.mini li + li { border-top: 1px solid var(--line); }
.li-mark svg, .li-mark img { width: 18px; height: 18px; stroke: none; display: block; }
.enrich-mock { padding: 0; overflow: hidden; background-image: none; background: var(--surface); }
.mock-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.mock-head div { display: flex; flex-direction: column; line-height: 1.3; flex: 1; }
.mock-head strong { font-weight: 500; font-size: 14px; } .mock-head div span { font-size: 12.5px; color: var(--muted); }
.pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 500; border-radius: 999px; padding: 2px 9px 2px 7px; }
.pill svg { width: 12px; height: 12px; stroke-width: 2.4; }
.pill.good, .tag.good, .chips .good { color: var(--good); background: var(--good-soft); }
.contacts { padding: 4px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.contacts div { display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 8px; font-size: 13px; padding: 6px 0; }
.contacts span:nth-child(2) { font-family: var(--mono); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.tag { white-space: nowrap; font-style: normal; font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--chip); color: var(--muted); }
.ranked { list-style: none; margin: 0; padding: 2px 14px; }
.ranked li { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.ranked li + li { border-top: 1px solid var(--line); }

.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feat-icon { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; margin-bottom: 18px; color: var(--accent);
  background: var(--accent-soft); border: 1px solid var(--accent-line); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.chips span { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--chip); color: var(--muted); border: 1px solid var(--line); }
.chips .good { border-color: transparent; }
.mini-q { margin-top: 18px; font: 12.5px/1.5 var(--mono); color: var(--accent); background: var(--accent-soft); border: 1px dashed var(--accent-line); border-radius: 9px; padding: 10px 12px; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.steps li { padding: 26px 22px; position: relative; }
.steps li + li { border-left: 1px solid var(--line); }
.num { font: 500 12px var(--mono); color: var(--accent); display: block; margin-bottom: 26px; }
.steps h3 { font-size: 16px; margin-bottom: 8px; }
.steps p { margin: 0; color: var(--muted); font-size: 13.5px; }

.split { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 48px; align-items: center; }
.split .section-head, .split-copy { margin: 0; }
.split-copy h2 { font-size: clamp(30px, 4vw, 40px); line-height: 1.1; }
.split-copy > p { color: var(--muted); margin: 18px 0 22px; }
.install { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 4px 4px 4px 12px; margin-bottom: 18px; max-width: 100%; }
.install code { background: none; border: 0; padding: 0; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.icon-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 7px; background: transparent; color: var(--faint); cursor: pointer; flex: none; }
.icon-btn:hover { background: var(--chip); color: var(--ink); }
.icon-btn.done { color: var(--good); }
.link-row { display: flex; gap: 10px; flex-wrap: wrap; }
.code-window { background: var(--code-bg); border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-soft) 70%, transparent), var(--shadow); min-width: 0; }
.code-bar { display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 14px; border-bottom: 1px solid #1e2030; }
.lights { display: flex; gap: 6px; } .lights i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; } .lights i:nth-child(2) { background: #febc2e; } .lights i:nth-child(3) { background: #28c840; }
.code-tabs { display: flex; gap: 2px; flex: 1; overflow-x: auto; }
.code-tabs button { font: 500 12.5px var(--sans); color: #8a8da3; background: none; border: 0; padding: 5px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.code-tabs button[aria-selected="true"] { color: #fff; background: #1d1f2e; }
.code-window .icon-btn { color: #8a8da3; } .code-window .icon-btn:hover { background: #1d1f2e; color: #fff; }
.code-window pre.code { border-radius: 0; min-height: 360px; padding: 20px 22px; }
.code-window pre.code[hidden] { display: none; }

.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 24px; box-shadow: var(--shadow); }
.plan.featured { border-color: var(--accent-line); box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow); }
.plan-flag { position: absolute; top: -11px; left: 22px; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: #fff; background: var(--accent); border-radius: 999px; padding: 3px 10px; }
.plan h3 { font-size: 17px; }
.plan-blurb { color: var(--muted); font-size: 13.5px; margin: 6px 0 18px; min-height: 42px; line-height: 1.5; }
.price { font-size: 34px; font-weight: 500; letter-spacing: -.03em; margin-bottom: 18px; }
.price span { font-size: 14px; color: var(--muted); font-weight: 400; letter-spacing: 0; margin-left: 2px; }
.plan ul { list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.plan li { display: flex; gap: 10px; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.plan li svg { color: var(--accent); margin-top: 2px; width: 15px; height: 15px; stroke-width: 2.2; }

.faq-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; }
.faq-wrap .section-head { margin: 0; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 18px 2px; cursor: pointer; font-size: 16px; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq .plus svg { transition: transform .2s; color: var(--faint); }
.faq details[open] .plus svg { transform: rotate(45deg); color: var(--accent); }
.faq p { margin: 0 0 20px; color: var(--muted); font-size: 14.5px; max-width: 620px; }

.final { text-align: center; padding: 110px 48px; overflow: visible; }
.final h2 { font-size: clamp(32px, 5vw, 52px); line-height: 1.06; letter-spacing: -.035em; }
.final > p { color: var(--muted); margin: 16px 0 0; }

.footer { display: grid; grid-template-columns: 1fr 1.6fr; gap: 32px; padding: 56px 48px 32px; }
.foot-brand img { width: 97px; height: auto; display: block; }
.foot-brand p { color: var(--muted); font-size: 14px; margin: 14px 0 0; }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.foot-cols h4 { margin: 0 0 12px; font-size: 13px; font-weight: 500; }
.foot-cols a { display: block; font-size: 13.5px; color: var(--muted); padding: 3px 0; }
.foot-cols a:hover { color: var(--ink); }
.copyright { grid-column: 1 / -1; margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--faint); }

@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav { justify-content: space-between; }
  .demo-panel { grid-template-columns: minmax(0, 1fr); }
  .demo-left { border-right: 0; border-bottom: 1px solid var(--line); }
  .duo, .split, .faq-wrap { grid-template-columns: minmax(0, 1fr); }
  .trio { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .steps li:nth-child(3) { border-left: 0; }
  .steps li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .plans { grid-template-columns: 1fr 1fr; }
  .strip { flex-direction: column; align-items: flex-start; }
  .strip p { max-width: none; }
  .platforms { justify-content: flex-start; }
  .footer { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .frame { border-left: 0; border-right: 0; }
  .frame + .frame::after { display: none; }
  .section, .hero, .final, .strip, .footer { padding-left: 16px; padding-right: 16px; }
  .section { padding-top: 64px; padding-bottom: 64px; }
  .hero { padding-top: 56px; }
  .nav-cta .ghost { display: none; }
  .steps, .plans { grid-template-columns: 1fr; }
  .steps li + li { border-left: 0; border-top: 1px solid var(--line); }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .where { display: none; }
  .contacts div { grid-template-columns: 1fr auto; }
  .contacts .muted { display: none; }
  .code-window pre.code { min-height: 0; font-size: 11.5px; }
  .lights { display: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .matches li { transition: none; } }

/* ---- Shared by every page of the site (added with the unified site). ---- */

/* Avatar tones and the staggered match rows, as classes: the web app's pages allow no inline styles. */
.av.t0 { --tone: #5b6ff2; } .av.t1 { --tone: #d95926; } .av.t2 { --tone: #199e70; }
.av.t3 { --tone: #c98500; } .av.t4 { --tone: #8b5cf6; } .av.t5 { --tone: #0891b2; }
.matches li { --d: 0ms; }
.matches li:nth-child(2) { --d: 70ms; } .matches li:nth-child(3) { --d: 140ms; } .matches li:nth-child(4) { --d: 210ms; }

/* The Products dropdown in the top bar. */
.nav-links { align-items: center; min-width: 0; }
.nav-page { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav-page::-webkit-scrollbar { display: none; }
.nav-page a { white-space: nowrap; }
.nav-menu-page { display: none; }
.nav-sep { flex: none; width: 1px; height: 18px; margin: 0 6px; align-self: center; background: var(--line-strong); }
.nav-page a[aria-current="page"] { color: var(--ink); }
.nav-drop { position: relative; }
.nav-drop-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 0; border-radius: 8px; background: none;
  font: 14px var(--sans); color: var(--muted); cursor: pointer; }
.nav-drop-btn:hover, .nav-drop.open .nav-drop-btn { color: var(--ink); background: var(--chip); }
.nav-drop-btn svg { width: 14px; height: 14px; transition: transform .15s; }
.nav-drop.open .nav-drop-btn svg { transform: rotate(180deg); }
.nav-menu { display: none; position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: 360px; padding: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 40px -16px rgba(16,24,40,.25), var(--shadow); z-index: 30; }
.nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-drop.open .nav-menu { display: block; }
@media (hover: hover) and (pointer: fine) { .nav-drop:hover .nav-menu { display: block; } .nav-drop:hover .nav-drop-btn { color: var(--ink); background: var(--chip); } }
.nav-menu a { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border-radius: 10px; color: var(--ink); }
.nav-menu a:hover, .nav-menu a:focus-visible, .nav-menu a[aria-current="page"] { background: var(--surface-2); }
.nav-menu .feat-icon { flex: none; width: 32px; height: 32px; margin: 0; border-radius: 9px; }
.nav-menu .feat-icon svg { width: 15px; height: 15px; }
.nav-menu strong { display: block; font-weight: 500; font-size: 14px; }
.nav-menu span span { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.45; margin-top: 1px; }

/* Landing: the three products. */
.products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.product { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px; box-shadow: var(--shadow);
  transition: border-color .15s, transform .15s; }
.product:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.product-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.product-kicker .feat-icon { margin: 0; }
.product-kicker span:last-child { font: 500 11.5px var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--faint); }
.product h3 { font-size: 21px; margin-bottom: 8px; }
.product > p { margin: 0 0 20px; color: var(--muted); font-size: 14px; }
.product .mock { flex: 1; margin: 0 0 20px; }
.product .persona { gap: 10px; padding: 10px 12px; }
.product .persona .who strong, .product .persona .who span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 500; font-size: 14px; }
.product:hover .product-link svg { transform: translateX(2px); }
.product-link svg { transition: transform .15s; }

/* Landing: know, test, ship. */
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.flow li { padding: 26px 24px; position: relative; }
.flow li + li { border-left: 1px solid var(--line); }
.flow h3 { font-size: 18px; margin-bottom: 8px; }
.flow p { margin: 0; color: var(--muted); font-size: 14px; }
.flow .chips { margin-top: 16px; }
.flow .chips a { font-size: 12px; padding: 3px 10px; border-radius: 999px; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); }

/* Why Constants: the answer after the alternatives. */
.answer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; margin-top: 16px; padding: 32px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--accent-line); box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow); }
.answer-copy h3 { font-size: clamp(24px, 3vw, 30px); line-height: 1.15; letter-spacing: -.03em; }
.answer-copy p { margin: 12px 0 0; color: var(--muted); font-size: 15px; }
.answer-copy .ctas { justify-content: flex-start; margin-top: 22px; }
.answer-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.answer-points li { padding: 16px; border-radius: 12px; background: var(--accent-soft); border: 1px solid var(--accent-line); }
.answer-points strong { display: block; font-weight: 500; font-size: 15px; margin-bottom: 4px; }
.answer-points span { display: block; }
.answer-points span { font-size: 13.5px; color: var(--muted); line-height: 1.5; }

/* Customers, by sector. */
.sectors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sector { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px; box-shadow: var(--shadow); }
.sector h3 { font-size: 18px; }
.sector-scale { margin-top: 4px; font-size: 13.5px; color: var(--accent); }
.sector p { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }

/* Builder quotes. */
.quotes { columns: 3 280px; column-gap: 16px; }
.quote { break-inside: avoid; margin: 0 0 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; box-shadow: var(--shadow); }
.quote p { margin: 0; font-size: 15px; line-height: 1.55; }
.quote footer { margin-top: 12px; font-size: 13px; color: var(--muted); }
.quote footer a:hover { color: var(--accent); }

/* Team. */
.team { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.team-copy h2 { font-size: clamp(30px, 4vw, 42px); line-height: 1.1; }
.team-copy p { color: var(--muted); margin: 16px 0 0; }
.team-copy h3 { margin-top: 28px; font-size: 18px; }
.people { display: grid; gap: 12px; }
.member { display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; box-shadow: var(--shadow); }
.member img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; background: var(--chip); }
.member strong { display: block; font-weight: 500; }
.member span { display: block; font-size: 13.5px; color: var(--muted); }
.member a { color: var(--accent); font-size: 13px; }

/* Feature checklists. */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.checklist li { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 15px; }
.checklist li svg { color: var(--accent); margin-top: 4px; stroke-width: 2.2; }
.checklist li.soon { color: var(--muted); }
.checklist li.soon svg { color: var(--faint); }
.checklist em { font-style: normal; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--faint); margin-left: 6px; }

/* Example findings (user testing). */
.findings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.finding { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; }
.finding-tag { display: inline-flex; gap: 6px; align-items: center; font: 500 11.5px var(--mono); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; color: var(--muted); }
.finding-tag b { font-weight: 500; padding: 1px 7px; border-radius: 999px; }
.sev-critical { color: #b42318; background: #fef3f2; } .sev-high { color: #b54708; background: #fffaeb; }
.sev-medium { color: #175cd3; background: #eff8ff; } .sev-good { color: var(--good); background: var(--good-soft); }
.finding p { margin: 0; font-size: 14.5px; }
.finding .fix { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-strong); color: var(--muted); font-size: 13.5px; }
.finding .fix strong { color: var(--ink); font-weight: 500; }

/* Product mocks: a persona, a study session, a report. */
.persona { display: flex; gap: 12px; align-items: center; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.persona + .persona { margin-top: 8px; }
.persona .who span { white-space: normal; }
.verdict { margin: 10px 2px 0; font-size: 13px; color: var(--muted); }
.verdict strong { color: var(--ink); font-weight: 500; }
.compare dl { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.compare dt { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.compare dd { margin: 4px 0 14px; font-size: 14px; }
.compare dd:last-child { margin-bottom: 0; }
.demo-left .report { margin-bottom: 18px; }
.demo-right > * + * { margin-top: 8px; }
.report p { margin: 2px 0 6px; font-size: 13.5px; color: var(--ink); }
.session { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.session-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.rec { display: inline-flex; align-items: center; gap: 6px; color: #b42318; font: 500 11.5px var(--mono); }
.rec::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #e5484d; }
.session-bar .time { margin-left: auto; font-family: var(--mono); }
.session-task { padding: 12px 14px; font-size: 13.5px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.session-task b { display: block; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--accent); margin-bottom: 4px; }
.speech { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; font-size: 13.5px; }
.speech svg { color: var(--accent); margin-top: 3px; }
.speech q { color: var(--ink); }
.wave { display: flex; align-items: center; gap: 3px; height: 20px; padding: 0 14px 12px; }
.wave i { width: 3px; border-radius: 2px; background: var(--accent-line); height: 30%; }
.wave i:nth-child(3n) { height: 70%; background: var(--accent); } .wave i:nth-child(4n+1) { height: 50%; } .wave i:nth-child(5n+2) { height: 90%; background: var(--dot-hi); }
.report { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.report-row { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 7px 0; font-size: 13px; }
.report-row + .report-row { border-top: 1px solid var(--line); }
.report-row span:first-child { color: var(--muted); }
.meter { display: flex; height: 6px; border-radius: 999px; overflow: hidden; width: 120px; background: var(--chip); }
.meter i { display: block; height: 100%; }
.meter .pos { background: #3fb27f; width: 62%; } .meter .neu { background: var(--line-strong); width: 23%; } .meter .neg { background: #e5484d; width: 15%; }

/* The hero's report column and a stacked flow beside copy. */
.findings.one-col { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.findings.one-col .finding { padding: 14px 16px; }
.demo .persona { margin-bottom: 18px; }
.split .flow { grid-template-columns: minmax(0, 1fr); }
.split .flow li + li { border-left: 0; border-top: 1px solid var(--line); }
.split .flow .num { margin-bottom: 12px; }

/* User testing: how it works, one step a row, copy beside its widget. */
.how { list-style: none; margin: 0; padding: 0; display: grid; gap: 72px; }
.how-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.how-row:nth-child(even) { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.how-row:nth-child(even) .how-copy { order: 2; }
.how-copy { position: sticky; top: 100px; }
.how-copy .num { display: block; margin-bottom: 14px; }
.how-copy h3 { font-size: clamp(22px, 2.6vw, 28px); line-height: 1.15; letter-spacing: -.03em; }
.how-copy p { margin: 14px 0 0; color: var(--muted); font-size: 15px; }
.how-copy .product-link { margin-top: 18px; }
.how-row.has-wide .how-wide { grid-column: 1 / -1; }
/* The full-width clips are part of the same step, so its copy stays put rather than sliding over them. */
.how-row.has-wide .how-copy { position: static; }

.widget { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent-soft) 60%, transparent), var(--shadow); overflow: hidden; min-width: 0; }
.widget-bar { display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--faint); background: var(--surface-2); }
.widget-meta { text-transform: none; letter-spacing: 0; }
.widget-body { padding: 18px; }

.field-row { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 12px; padding-bottom: 12px; }
.field-row.stacked { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.field-label { font-size: 13px; color: var(--muted); }
.field-input { padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); font: 13px var(--mono); color: var(--muted); }
.toggle { display: inline-flex; justify-self: start; padding: 3px; border-radius: 9px; background: var(--chip); border: 1px solid var(--line); }
.toggle button, .persona-chips button { font: 500 13px var(--sans); color: var(--muted); background: none; border: 0; cursor: pointer; }
.toggle button { padding: 5px 14px; border-radius: 7px; }
.toggle button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(16,24,40,.08); }
.persona-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.persona-chips button { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); }
.persona-chips button:hover { color: var(--ink); }
.persona-chips button[aria-pressed="true"] { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.persona-card { margin-top: 6px; border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: var(--surface-2); }
.persona-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.persona-card-head img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--chip); }
.persona-card-head strong { display: block; font-weight: 500; }
.persona-card-head span { font-size: 13px; color: var(--muted); }
.persona-card dl { margin: 0; display: grid; gap: 10px; }
.persona-card dl div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; font-size: 13.5px; }
.persona-card dt { color: var(--faint); }
.persona-card dd { margin: 0; }
.cares { display: flex; flex-wrap: wrap; gap: 6px; }
.cares span { font-size: 12px; padding: 2px 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
.persona img.face { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; }

.findings-scroll { display: grid; gap: 8px; max-height: 470px; overflow: auto; background: var(--surface-2); }
.findings-scroll .finding { padding: 14px 16px; }

.clips-widget { margin-top: 16px; }
.clips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.clip { position: relative; margin: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--chip); aspect-ratio: 16 / 10; }
.clip video { display: block; width: 100%; height: 100%; object-fit: cover; }
.clip-face { position: absolute; left: 8px; bottom: 8px; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--surface); object-fit: cover; box-shadow: var(--shadow); }

.run-total { margin: 0 0 14px; display: flex; align-items: baseline; gap: 10px; }
.run-total strong { font-size: 36px; font-weight: 500; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.run-total span { color: var(--muted); font-size: 14px; }
.run-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
.run-grid i { aspect-ratio: 1; border-radius: 5px; background: var(--chip); border: 1px solid var(--line); transition: background .2s, border-color .2s; }
.run-grid i[data-state="done"] { background: var(--accent-soft); border-color: var(--accent-line); }
.run-grid i[data-state="dropoff"] { background: #fef3f2; border-color: #fda29b; }
.is-resetting .run-grid i { background: var(--chip); border-color: var(--line); }
.run-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.run-stats p { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.run-stats strong { display: block; font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
.run-stats span { font-size: 12.5px; color: var(--muted); }
.run-button { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border-radius: 10px; background: var(--solid); color: var(--solid-ink); font-size: 13.5px; font-weight: 500; }

/* What a report covers. */
.coverage { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.coverage ul { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; gap: 9px; }
.coverage li { display: flex; gap: 9px; font-size: 14px; }
.coverage li svg { color: var(--accent); margin-top: 3px; width: 15px; height: 15px; stroke-width: 2.2; }

/* Plans with no price yet: one free trial and a call. */
.plans.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; margin: 0 auto; }
.plans.one { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin: 0 auto; }
.plan .price.word { letter-spacing: -.035em; }

/* The final call to action, beside a short note. */
.note { max-width: 640px; margin: 18px auto 0; font-size: 13px; color: var(--faint); }
.note a { color: var(--accent); }

@media (max-width: 980px) {
  .nav { gap: 12px; }
  .nav-links { display: flex; margin: 0 auto 0 0; flex: 1; }
  .nav-menu { left: 0; transform: none; }
  .products, .flow, .team, .findings, .answer { grid-template-columns: minmax(0, 1fr); }
  .sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow li + li { border-left: 0; border-top: 1px solid var(--line); }
  .checklist { grid-template-columns: minmax(0, 1fr); }
  .plans.two { grid-template-columns: minmax(0, 1fr); }
  .how-row, .how-row:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .how-row:nth-child(even) .how-copy { order: 0; }
  .how-copy { position: static; }
  .coverage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .nav { gap: 8px; padding-left: 14px; }
  .nav-drop-btn { padding: 6px 8px; }
  .nav-menu { position: fixed; top: 76px; left: 16px; right: 16px; width: auto; max-height: calc(100dvh - 96px); overflow: auto; }
  .nav-links { flex: none; margin: 0 0 0 auto; }
  .nav-page { display: none; }
  .nav-menu-page { display: block; margin-top: 6px; padding: 10px 4px 2px; border-top: 1px solid var(--line); }
  .nav-menu-page span { display: block; padding: 0 6px 4px; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
  .nav-menu-page a { display: inline-block; padding: 6px; font-size: 14px; color: var(--muted); }
  .coverage { grid-template-columns: minmax(0, 1fr); }
  .how { gap: 56px; }
  .persona-card dl div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .sectors, .answer-points { grid-template-columns: minmax(0, 1fr); }
  .answer { padding: 22px; }
}

/* ======================================================================================================================
   The brand site's visuals (src/site/ with theme "brand"; behavior in public/site-viz.js).
   ====================================================================================================================== */

/* Widths for bars, as classes: the web app's pages allow no inline styles. */
.w-0 { width: 0; } .w-10 { width: 10%; } .w-19 { width: 19%; } .w-20 { width: 20%; } .w-30 { width: 30%; } .w-34 { width: 34%; }
.w-48 { width: 48%; } .w-60 { width: 60%; } .w-66 { width: 66%; } .w-72 { width: 72%; } .w-80 { width: 80%; } .w-100 { width: 100%; }

/* Navy sections, like the deck's title slides: full-bleed navy, white type, gold accents. */
.band { background: var(--navy); color: #fff; box-shadow: 0 0 0 100vmax var(--navy); clip-path: inset(0 -100vmax); border-color: transparent !important; }
.theme-brand .band :is(h1, h2, h3) { color: #fff; }
.theme-brand .band.final h2 { color: #fff; }
.band .eyebrow { color: var(--gold); }
.band .lede, .band > p { color: rgba(255,255,255,.78); }
.theme-brand .band :is(h1, h2) .accent { color: inherit; }
.band .dots { display: none; }
.band + .frame::after, .frame + .band::after { display: none; }
/* The main button on navy: white with navy type. */
.btn.light { background: #fff; color: var(--navy); font-weight: 600; }
.btn.light:hover { background: #EEF1F8; transform: translateY(-1px); }
.btn.ghost-light { color: #fff; background: transparent; border-color: rgba(255,255,255,.35); }
.btn.ghost-light:hover { background: rgba(255,255,255,.08); }
/* A page that opens on a navy section slides it up under the floating top bar. */
body:has(main > .band:first-child) .nav-wrap { margin-bottom: -76px; }
main > .band.hero:first-child { padding-top: 140px; }

/* Faces and votes: shared by the loop, the twins panel, and the crowd. */
.tok { position: relative; display: block; aspect-ratio: 1; }
.tok .face { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--chip); }
.tok > i { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--accent-soft); border: 1px solid var(--accent-line); }

/* A voice, as bars that move while someone talks. */
.bars { display: flex; align-items: center; justify-content: center; gap: 3px; height: 28px; }
.bars i { width: 3px; height: 30%; border-radius: 2px; background: var(--accent-line); }
.bars i:nth-child(3n) { height: 70%; background: var(--navy); } .bars i:nth-child(4n+1) { height: 50%; } .bars i:nth-child(5n+2) { height: 90%; background: var(--navy-2); }
.bars i:nth-child(2n) { animation-delay: -.3s !important; } .bars i:nth-child(3n) { animation-delay: -.6s !important; }
@keyframes talk { 50% { transform: scaleY(.35); } }

/* Labels and arrows between the parts of a visual. */
.flow-label { font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.flow-arrow { color: var(--gold); align-self: center; }
.flow-arrow svg { width: 22px; height: 22px; stroke-width: 2.2; }

/* User simulation: which version do you ship? */
.versions { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 24px; align-items: stretch; }
.version-picker { display: grid; grid-auto-rows: 1fr; gap: 12px; }
.version-picker .version { display: flex; flex-direction: column; justify-content: center; }
.version { display: block; text-align: left; padding: 16px 18px; border-radius: 12px; background: var(--surface-2); border: 2px solid var(--line); font: 500 16px/1.4 var(--sans); color: var(--ink); cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.version span { display: block; margin-bottom: 4px; font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--navy); }
.version strong { display: block; font-size: 17px; font-weight: 600; color: var(--navy); }
.version:hover { border-color: var(--line-strong); }
.version[aria-pressed="true"] { border-color: var(--navy); background: #fff; box-shadow: 0 0 0 4px var(--accent-soft); }
.version-result { padding: 22px; border-radius: 16px; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); }
.version-meta { margin: 0 0 14px; font-size: 13px; color: var(--muted); }
.version-meta strong { color: var(--navy); }
.crowd-field { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 10px; }
.outcomes { list-style: none; margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.outcomes li { display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; align-items: center; font-size: 14px; }
.outcomes .pct { font-weight: 600; font-size: 16px; }
.outcomes .bar { height: 10px; border-radius: 999px; background: var(--chip); overflow: hidden; }
.outcomes .bar i { display: block; height: 100%; border-radius: 999px; transition: width .6s ease; }
/* The vote's answers, in soft brand colors: blue for the best outcome, sky for another good one, gold for hesitating,
   coral for a loss, grey for leaving. */
.versions-wrap { --t-blue: #3E64C8; --t-sky: #9DB7EA; --t-gold: #F1C453; --t-coral: #EC9A84; --t-grey: #C5CBD6; }
.outcomes .t-blue .bar i { background: var(--t-blue); } .outcomes .t-sky .bar i { background: var(--t-sky); }
.outcomes .t-gold .bar i { background: var(--t-gold); } .outcomes .t-coral .bar i { background: var(--t-coral); }
.outcomes .t-grey .bar i { background: var(--t-grey); }

/* User simulation: a twin, assembled from its sources. */
.builder .flow-arrow { color: var(--navy); }
.builder { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.15fr); gap: 20px; align-items: center; }
.sources { display: grid; gap: 8px; }
.source { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface-2); text-align: left; font: inherit; color: var(--ink); cursor: pointer; transition: border-color .2s, background .2s; }
.source .feat-icon { margin: 0; width: 32px; height: 32px; }
.source strong { display: block; font-weight: 600; font-size: 14px; }
.source span span { font-size: 12.5px; color: var(--muted); }
.source[aria-pressed="true"] { border-color: var(--navy); background: var(--accent-soft); }
.twin-card { padding: 20px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.twin-head { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.twin-head .face.big { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.twin-head strong { display: block; font-size: 17px; font-weight: 600; color: var(--navy); }
.twin-head span { font-size: 13px; color: var(--muted); }
.twin-badge { margin-left: auto; font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: .08em; padding: 3px 9px; border-radius: 999px; background: var(--navy); color: #fff !important; }

/* A browser address bar, in the report mocks. */
.url { flex: 1; padding: 4px 10px; border-radius: 7px; background: #fff; border: 1px solid var(--line); font: 12px var(--mono); color: var(--muted); }
.meter { width: 100%; }

/* Pricing and team pages. */
.page-hero { padding-bottom: 40px; }
.jump { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.jump a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 14px; font-weight: 500; color: var(--navy); background: #fff; }
.jump a:hover { border-color: var(--navy); }
.jump svg { color: var(--navy); }
.pricing-head { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; scroll-margin-top: 100px; }
.pricing-head .feat-icon { margin: 0; width: 44px; height: 44px; }
.pricing-head h2 { font-size: 28px; }
.pricing-head p { margin: 4px 0 0; color: var(--muted); }
.pricing-head .product-link { margin-left: auto; }
#plans, #credit-packs, #what-credits-buy, .plan[id] { scroll-margin-top: 100px; }
/* Credit packs on the pricing page. */
.packs { width: 100%; max-width: 760px; margin: 0 auto; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.packs th, .packs td { padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--line); font-size: 15px; font-variant-numeric: tabular-nums; }
.packs th { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.packs tbody tr:last-child td { border-bottom: 0; }
.packs td:first-child { font-weight: 500; }
.packs td:last-child { color: var(--muted); }
.packs + .note { text-align: center; }
.member.big img { width: 96px; height: 96px; }
.member.big strong { font-size: 18px; }

@media (max-width: 980px) {
  .flow-arrow { justify-self: center; transform: rotate(90deg); }
  .versions, .builder { grid-template-columns: minmax(0, 1fr); }
  .version-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .version { padding: 12px 14px; }
  .version strong { font-size: 15px; }
  .builder .flow-arrow { display: none; }
  .pricing-head { flex-wrap: wrap; }
  .pricing-head .product-link { margin-left: 0; }
  .packs th, .packs td { padding: 12px 12px; font-size: 14px; }
}
@media (max-width: 640px) {
  main > .band.hero:first-child { padding-top: 112px; }
  .crowd-field { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
  .outcomes li { grid-template-columns: 44px minmax(0, 1fr); }
  .outcomes li > span:last-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .bars i { animation: none !important; }
}

/* ---- Scale and a technical finish: the deck's mono labels, a faint grid on navy, glowing cards on navy, the landing
   page's crowd, and visuals that rise as they come into view. ---- */
.theme-brand { --mono: "JetBrains Mono", "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
.theme-brand :is(.eyebrow, .flow-label, .version span, .twin-badge, .num) { font-family: var(--mono); font-weight: 500; letter-spacing: .06em; }
.theme-brand .dots { background-image: radial-gradient(circle, var(--accent-line) 1px, transparent 1.3px); background-size: 8px 8px; opacity: .55; }
.theme-brand .band::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; border: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center top;
  -webkit-mask: radial-gradient(ellipse 75% 85% at 50% 35%, #000 15%, transparent 80%); mask: radial-gradient(ellipse 75% 85% at 50% 35%, #000 15%, transparent 80%); }
.theme-brand .band > * { position: relative; }

/* Landing: the headline over one panel: the steps (each with its line and links) beside the crowd (/home-preview) or
   the stream of people (/home-preview-v2) that acts out the active one. Its bar fills while the step holds; once
   someone picks a step, the bars stop. */
.hero-system h1 { font-size: clamp(36px, 5vw, 60px); }
/* The second landing page's hero opens straight on the headline, closer under the top bar, with the panel close
   below it. */
main > .band.hero-flow:first-child { padding-top: 112px; }
.hero-flow .system { margin-top: 44px; }
@media (max-width: 640px) { main > .band.hero-flow:first-child { padding-top: 96px; } .hero-flow .system { margin-top: 32px; } }
.system { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); column-gap: 40px; align-items: center; margin-top: 64px; text-align: left; }
.system-head { padding: 0 0 18px 20px; }
.system-head p { margin: 8px 0 0; font-size: 19px; line-height: 1.3; letter-spacing: -.02em; color: #fff; }
.system-head .eyebrow { margin-bottom: 0; }
.system-steps { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; gap: 4px; }
.system-steps li { position: relative; padding: 12px 14px 12px 20px; border-left: 2px solid rgba(255,255,255,.14); border-radius: 0 10px 10px 0; transition: background .3s; }
.system-steps li.on { background: rgba(255,255,255,.06); }
.system-steps button { display: grid; gap: 3px; width: 100%; padding: 0; border: 0; background: none; font: inherit; text-align: left; color: #fff; cursor: pointer; }
.system-steps button:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
.system-steps .num { margin: 0; color: rgba(255,255,255,.5); transition: color .3s; }
.system-steps li.on .num { color: var(--gold); }
.system-steps strong { font-size: 18px; font-weight: 600; letter-spacing: -.01em; opacity: .7; transition: opacity .3s; }
.system-steps li.on strong, .system-steps li:hover strong { opacity: 1; }
/* Only the active step is open: its line and link slide down. */
.step-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.step-more > div { overflow: hidden; visibility: hidden; transition: visibility .35s; }
.system-steps li.on .step-more { grid-template-rows: 1fr; }
.system-steps li.on .step-more > div { visibility: visible; }
.step-more p { margin: 6px 0 6px; font-size: 14px; line-height: 1.45; color: rgba(255,255,255,.62); transition: color .3s; }
.system-steps li.on .step-more p { color: rgba(255,255,255,.85); }
.step-more a { display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; font-size: 13.5px; font-weight: 600; color: #fff; }
.step-more a svg { width: 14px; height: 14px; transition: transform .15s; } .step-more a:hover svg { transform: translateX(2px); }
.step-progress { position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: var(--gold); transform: scaleY(0); transform-origin: top; }
.system-steps li.on .step-progress.run { animation: step-fill linear forwards; }
.held .system-steps li.on .step-progress { transform: scaleY(1); }
@media (prefers-reduced-motion: reduce) { .system-steps li.on .step-progress { transform: scaleY(1); } }
@keyframes step-fill { to { transform: scaleY(1); } }
.system-together { margin: 48px auto 0; max-width: 680px; font-size: 17px; color: rgba(255,255,255,.75); }
.system-together a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #fff; white-space: nowrap; }
.system-together a svg { width: 14px; height: 14px; transition: transform .15s; } .system-together a:hover svg { transform: translateX(2px); }
@media (max-width: 980px) {
  .system { grid-template-columns: minmax(0, 1fr); margin-top: 48px; }
  .system-side { display: contents; }
  .system-head { order: -2; padding: 0 0 16px; text-align: center; }
  .system > :is(.crowd-viz, .flow-viz) { order: -1; }
  .system-steps { margin-top: 18px; }
}

/* The first landing page (/home-preview): the crowd that acts out the active step. */
.crowd-viz { position: relative; height: 540px; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; overflow: visible;
  background: radial-gradient(ellipse 60% 60% at 50% 52%, rgba(46,86,170,.55), rgba(0,38,118,0) 75%);
  font: 500 11px/1.5 var(--mono); letter-spacing: .04em; color: rgba(255,255,255,.66); }
.crowd-viz:not(.js) { background-image: radial-gradient(circle, rgba(188,196,213,.35) 1.2px, transparent 1.6px); background-size: 12px 12px; }
.crowd-viz canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.viz-top { position: absolute; top: 14px; left: 16px; display: flex; gap: 16px; text-transform: uppercase; }
.viz-top b { color: #fff; font-weight: 500; }
/* The Ground step: the twin's traits, beside the face, each filling in as its dots arrive from the transcript. Until
   then a card is an empty outline. */
.viz-ground { position: absolute; z-index: 1; right: 16px; top: 50%; width: 36%; transform: translateY(-58%); opacity: 0; transition: opacity .4s; pointer-events: none; text-align: left; }
.crowd-viz.show-ground .viz-ground { opacity: 1; }
.viz-ground-head { display: block; margin-bottom: 8px; text-transform: uppercase; color: rgba(255,255,255,.55); }
.viz-ground ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.viz-ground li { min-height: 52px; padding: 8px 10px; border: 1px dashed rgba(255,255,255,.22); border-radius: 8px; font: 400 12.5px/1.35 var(--sans); letter-spacing: 0;
  color: transparent; transition: background .4s, border-color .4s, color .4s; }
.viz-ground li span { display: block; margin-bottom: 2px; font: 500 9.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: transparent; transition: color .4s; }
.viz-ground li.in { border: 1px solid rgba(253,181,21,.45); background: rgba(0,22,70,.82); color: #fff; }
.viz-ground li.in span { color: var(--gold); }
.viz-read .ok { color: #4CC38A; }

.crowd-viz.over-twin { cursor: pointer; }
/* The last step: your agent's window, which the stream of results flows into. */
.viz-agent { position: absolute; z-index: 1; right: 14px; top: 50%; width: 64%; transform: translateY(-50%) translateX(12px); opacity: 0; pointer-events: none;
  border: 1px solid rgba(255,255,255,.22); border-radius: 8px; background: rgba(0,22,70,.92); box-shadow: 0 0 0 1px rgba(253,181,21,.12), 0 24px 60px -24px rgba(0,0,0,.7);
  transition: opacity .5s, transform .5s; }
.crowd-viz.show-agent .viz-agent { opacity: 1; transform: translateY(-50%); }
.viz-agent-call { margin: 0; padding: 10px 14px 0; text-align: left; font-size: 12px; color: #fff; }
.viz-agent-call::before { content: "› "; color: var(--gold); }
.viz-agent-body { display: grid; gap: 12px; padding: 10px 14px 14px; text-align: left; }
.viz-agent h4 { margin: 0 0 4px; font: 500 9.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.viz-agent-body p { margin: 0; font-size: 11.5px; line-height: 1.5; color: rgba(255,255,255,.88); }
.viz-agent-body ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 11.5px; color: rgba(255,255,255,.88); }
.viz-agent-body ol li { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.viz-agent-body ol b { padding: 0; background: none; border: 0; font-weight: 500; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.viz-agent-body b.sev-critical { color: #F07563; } .viz-agent-body b.sev-high { color: #F5A06B; } .viz-agent-body b.sev-medium { color: #F3D27A; }
.viz-versions { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 11px; }
.viz-versions li { display: grid; grid-template-columns: 14px minmax(0, 1fr) 34px; gap: 8px; align-items: center; color: rgba(255,255,255,.7); }
.viz-versions li > i { height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.viz-versions li > i > i { display: block; height: 100%; border-radius: 3px; background: rgba(188,196,213,.6); transition: width .9s cubic-bezier(.2,.7,.2,1); }
.viz-versions li.win { color: var(--gold); } .viz-versions li.win > i > i { background: var(--gold); }
.viz-versions em { font-style: normal; text-align: right; }
.viz-next p { color: var(--gold); }
/* A caret at the end of whatever the agent is typing. */
.viz-agent .rest { color: transparent; }
.viz-agent .rest.typing::before { content: ""; display: inline-block; width: .55em; height: 1.05em; margin-right: -.55em; vertical-align: -.15em; background: var(--gold); }
/* The interview's transcript, scrolling past like a news ticker. */
.viz-read .viz-ticker { display: block; overflow: hidden; font-size: 13px; color: #fff;
  -webkit-mask: linear-gradient(90deg, transparent, #000 4%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 4%, #000 90%, transparent); }
.viz-read .viz-ticker span { overflow: visible; text-overflow: clip; }
.viz-agent-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,.12); text-transform: uppercase; }
.viz-agent-bar .lights { display: flex; gap: 4px; } .viz-agent-bar .lights i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.25); }
.viz-read { position: absolute; left: 16px; right: 16px; bottom: 14px; margin: 0; display: grid; gap: 3px; font-size: 12px; color: rgba(255,255,255,.88); }
.viz-read span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viz-read .hi { color: var(--gold); }
.viz-read .red { color: #F07563; }
.crowd-viz .tick { position: absolute; width: 12px; height: 12px; border: 0 solid var(--gold); }
.crowd-viz .tick.tl { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.crowd-viz .tick.tr { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px; }
.crowd-viz .tick.bl { bottom: -1px; left: -1px; border-bottom-width: 2px; border-left-width: 2px; }
.crowd-viz .tick.br { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }
@media (max-width: 980px) {
  .crowd-viz { height: 460px; }
}
@media (max-width: 640px) {
  .crowd-viz { height: 430px; }
  .viz-agent { left: 10px; right: 10px; width: auto; top: auto; bottom: 44px; transform: translateY(12px); }
  .viz-agent-body { gap: 9px; }
  .viz-next, .viz-agent-body section:first-child { display: none; }
  .crowd-viz.show-agent .viz-agent { transform: none; }
  .viz-agent-body p, .viz-agent-body ol { font-size: 10.5px; }
  .viz-ground { right: 10px; width: 46%; }
  .viz-ground li { min-height: 44px; padding: 6px 8px; font-size: 11px; }
}

/* The stream of people (public/site-viz.js draws it): a bar of three cards along the top (how the twins are built in
   the first state, the three numbers the fixes change in the others) over the canvas. The stream runs top to bottom
   at every width. */
.flow-viz { position: relative; height: 580px; border: 1px solid rgba(255,255,255,.12); border-radius: 6px;
  background: radial-gradient(ellipse 55% 60% at 42% 50%, rgba(46,86,170,.5), rgba(0,38,118,0) 75%);
  font: 500 11px/1.5 var(--mono); letter-spacing: .04em; color: rgba(255,255,255,.66); overflow: hidden; }
.flow-viz:not(.js) { background-image: radial-gradient(circle, rgba(188,196,213,.3) 1.2px, transparent 1.6px); background-size: 12px 12px; }
.flow-viz canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.flow-top { position: relative; z-index: 1; margin: 16px 16px 0; display: grid; }
.flow-top > .flow-kpis { grid-area: 1 / 1; }
.flow-kpis { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: left; }
.flow-kpis div { padding: 10px 12px; border-radius: 8px; background: rgba(0,22,70,.55); border: 1px solid rgba(255,255,255,.1); }
.flow-kpis dt { font: 500 9.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.flow-kpis dd { margin: 4px 0 0; font: 500 22px/1.15 var(--sans); letter-spacing: -.01em; color: #fff; font-variant-numeric: tabular-nums; transition: color .4s; }
.flow-viz.fixed .flow-kpis dd { color: #4CC38A; }
/* The two bars share their place and cross-fade: how the twins are built in the first state, the numbers after it.
   Without the script, only the numbers show. */
.flow-build { display: none; }
.flow-build dd { color: var(--gold); }
.flow-viz.js .flow-build { display: grid; }
.flow-viz.js .flow-kpis { transition: opacity .7s ease, transform .7s ease; }
.flow-viz.js .flow-cost, .flow-viz.js.show-kpis .flow-build { opacity: 0; transform: translateY(-6px); pointer-events: none; }
.flow-viz.js.show-kpis .flow-cost { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .flow-viz.js .flow-kpis { transition: none; transform: none !important; } }
/* The states beside the stream, as the live page's steps: a thin rail at the left of each, which fills gold while the
   active one plays. Gold is the only accent here; red and green belong to the stream. */
.flow-states strong { font-size: 22px; }
/* A twin's card, beside its portrait in the stream's first state. */
.flow-twin { width: 196px; padding: 8px 10px; z-index: 2; }
.flow-twin .viz-twin-head .face { width: 30px; height: 30px; }
.flow-twin .viz-twin-habit { margin-top: 6px; font-size: 11.5px; }
.flow-viz.over-twin { cursor: pointer; }
.flow-viz .tick { position: absolute; width: 12px; height: 12px; border: 0 solid var(--gold); }
.flow-viz .tick.tl { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.flow-viz .tick.tr { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px; }
.flow-viz .tick.bl { bottom: -1px; left: -1px; border-bottom-width: 2px; border-left-width: 2px; }
.flow-viz .tick.br { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }
@media (max-width: 640px) {
  .flow-viz { height: 560px; }
  .flow-top { margin: 12px 12px 0; }
  .flow-kpis { gap: 6px; }
  .flow-kpis div { padding: 8px 9px; }
  .flow-kpis dt { font-size: 8px; }
  .flow-kpis dd { font-size: 16px; }
}

/* Landing, "How it works": building twins, then running them, as two cards down the page, each a title and a line
   side by side over its visual. As a card scrolls into view (public/site-viz.js adds .rise, then .in) it rises, and
   its pieces follow one by one: the sources and the twin's traits, or the recordings and the report. */
.how-cards { display: grid; gap: 28px; }
.how-card { container-type: inline-size; padding: 28px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--line); }
.how-card-head { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 8px 32px; align-items: baseline; margin-bottom: 24px; }
.how-card-head h3 { font-size: 26px; color: var(--navy); }
.how-card-head p { margin: 0; font-size: 16px; color: var(--muted); }
.how-card .twin-card, .how-card .run-report, .how-card .source-group li { background: #fff; }
.how-card .source-group li:has(.source[aria-pressed="true"]) { background: var(--accent-soft); }
.how-card.rise :is(.source-group li, .twin-model div, .run-clip, .run-report, .run-more) { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.how-card.rise.in :is(.source-group li, .twin-model div, .run-clip, .run-report, .run-more) { opacity: 1; transform: none; }
.how-card.rise.in .source-group:nth-child(1) li:nth-child(2) { transition-delay: .1s; }
.how-card.rise.in .source-group:nth-child(2) li:nth-child(1) { transition-delay: .2s; }
.how-card.rise.in .source-group:nth-child(2) li:nth-child(2) { transition-delay: .3s; }
.how-card.rise.in .twin-model div:nth-child(1) { transition-delay: .45s; } .how-card.rise.in .twin-model div:nth-child(2) { transition-delay: .52s; }
.how-card.rise.in .twin-model div:nth-child(3) { transition-delay: .59s; } .how-card.rise.in .twin-model div:nth-child(4) { transition-delay: .66s; }
.how-card.rise.in .twin-model div:nth-child(5) { transition-delay: .73s; } .how-card.rise.in .twin-model div:nth-child(6) { transition-delay: .8s; }
.how-card.rise.in .run-clip:nth-child(2) { transition-delay: .1s; } .how-card.rise.in .run-clip:nth-child(3) { transition-delay: .2s; }
.how-card.rise.in .run-clip:nth-child(4) { transition-delay: .3s; } .how-card.rise.in .run-report { transition-delay: .4s; } .how-card.rise.in .run-more { transition-delay: .55s; }
@media (max-width: 860px) { .how-card { padding: 18px; } .how-card-head { grid-template-columns: minmax(0, 1fr); } .how-card-head h3 { font-size: 22px; } }

/* The twin builder's sources, in two groups: ours, each with a link to its page, and the customer's. */
.source-group + .source-group { margin-top: 14px; }
.source-group-label { display: block; margin: 0 0 6px 2px; font: 500 10.5px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.source-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
/* Each source is one card: the source itself (which lights up its attributes) and, for ours, a "Learn more" link at
   its right edge. */
.source-group li { display: flex; align-items: center; border-radius: 12px; border: 2px solid var(--line); background: var(--surface-2); transition: border-color .2s, background .2s; }
.source-group li:has(.source[aria-pressed="true"]) { border-color: var(--navy); background: var(--accent-soft); }
.source-group .source, .source-group .source[aria-pressed="true"] { flex: 1; min-width: 0; border: 0; background: none; }
.source-link { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 8px 14px 8px 6px; font: 600 12.5px var(--sans); color: var(--navy); white-space: nowrap; }
.source-link svg { width: 13px; height: 13px; transition: transform .15s; }
.source-link:hover { text-decoration: underline; text-underline-offset: 3px; } .source-link:hover svg { transform: translateX(2px); }
/* In a narrow column (the user simulation page, phones), the link is just its arrow, so the lines stay on one row. */
.sources { container-type: inline-size; }
@container (max-width: 380px) { .source-link { font-size: 0; gap: 0; padding-left: 4px; } .source-link svg { width: 15px; height: 15px; } }

/* Twins in action, each with its report: the recordings as a picker beside the picked twin's report. */
.run { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.run-clips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.run-clip { position: relative; display: block; padding: 0; border: 2px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--chip); aspect-ratio: 16 / 10; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.run-clip:hover { border-color: var(--line-strong); }
.run-clip[aria-pressed="true"] { border-color: var(--navy); box-shadow: 0 0 0 4px var(--accent-soft); }
.run-clip video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.run-clip-who { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: #fff; box-shadow: var(--shadow); font: 600 12px var(--sans); color: var(--navy); }
.run-clip-who .face { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.run-reports { display: grid; gap: 14px; }
.run-report { border-radius: 16px; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); overflow: hidden; }
.run-report[hidden] { display: none; }
.run-body { display: grid; gap: 12px; padding: 16px 18px 18px; }
.run-body .rv-persona strong { font-size: 14px; color: var(--navy); }
.run-task { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 14px; color: var(--ink); }
.run-task > span, .run-section > span { display: block; font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--navy); }
.run-outcome { margin-top: 4px; padding: 3px 8px; border-radius: 6px; font: 500 11px var(--mono); color: #8a211a; background: #fbe3de; }
.run-outcome.ok { color: #1f6b43; background: var(--good-soft); }
.run-section > span { margin-bottom: 5px; }
.run-section p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink); }
.run-section ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.run-section li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 9px; align-items: center; font-size: 13.5px; line-height: 1.35; }
.run-section li em { font: 500 10px var(--mono); font-style: normal; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); }
.run-fix { padding: 10px 12px; border-radius: 10px; background: var(--gold-soft); }
.run-more { justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--navy); }
.run-more svg { width: 14px; height: 14px; transition: transform .15s; } .run-more:hover svg { transform: translateX(2px); }
@container (max-width: 760px) { .run { grid-template-columns: minmax(0, 1fr); } }

/* A twin's card, beside the dot it stands for (public/site-viz.js places it and fills it in): the landing page's
   funnel and the version vote. */
.viz-twin { position: absolute; z-index: 1; left: 0; top: 0; width: 214px; padding: 10px 12px; border-radius: 8px; text-align: left; pointer-events: none;
  background: #fff; color: var(--ink); box-shadow: 0 0 0 1px rgba(255,255,255,.4), 0 18px 40px -16px rgba(0,0,0,.6);
  font: 400 12px/1.4 var(--sans); letter-spacing: 0; opacity: 0; transform: scale(.96); transition: opacity .16s, transform .16s; }
.viz-twin.on { opacity: 1; transform: none; }
.viz-twin-head { display: flex; align-items: center; gap: 9px; }
.viz-twin-head .face { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; }
.viz-twin-head strong { display: block; font-size: 13px; font-weight: 600; color: var(--navy); }
.viz-twin-head span { display: block; font-size: 11.5px; color: var(--muted); }
.viz-twin-habit { margin: 8px 0 0; color: var(--ink); }
.viz-twin-did { margin: 8px 0 0; padding-top: 7px; border-top: 1px solid var(--line); font: 500 11px var(--mono); color: #1f8a5b; }
.viz-twin-did.no { color: #b8382b; }
/* A transcript, scrolling past like a news ticker (the user interviews report). */
.viz-ticker-track { display: inline-flex; animation: ticker 40s linear infinite; }
.viz-ticker-run { flex: none; padding-right: 32px; white-space: nowrap; }
.viz-ticker .time { margin: 0 6px 0 18px; color: var(--gold); font-size: 11px; }
.viz-ticker-run > .time:first-child { margin-left: 0; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .viz-ticker-track { animation: none; } }
/* User simulation: the twin builder's portrait. */
.twin-portrait { position: relative; flex: none; width: 104px; height: 104px; border-radius: 12px; overflow: hidden; background: var(--accent-soft); }
.twin-head .twin-portrait .face.big { width: 100%; height: 100%; border-radius: 0; object-fit: cover; }

/* "Which version wins?": 200 twins, as dots in the color of their answer, with a face here and there. */
.crowd-field { grid-template-columns: repeat(25, minmax(0, 1fr)); gap: 5px; }
.crowd-field .tok > i { transition: background .25s, border-color .25s; }
.crowd-field .tok { --tone: var(--chip); cursor: pointer; transition: transform .2s; }
.crowd-field .tok.t-blue { --tone: var(--t-blue); } .crowd-field .tok.t-sky { --tone: var(--t-sky); } .crowd-field .tok.t-gold { --tone: var(--t-gold); }
.crowd-field .tok.t-coral { --tone: var(--t-coral); } .crowd-field .tok.t-grey { --tone: var(--t-grey); }
.crowd-field .tok.shown > i { background: var(--tone); border-color: var(--tone); }
.crowd-field .tok .face { box-shadow: 0 0 0 2px var(--chip); transition: box-shadow .25s; }
.crowd-field .tok.shown .face { box-shadow: 0 0 0 2px var(--tone); }
/* The twin whose card is showing. */
.crowd-field .tok.hl { transform: scale(1.35); z-index: 1; }
.crowd-field .tok.hl > i, .crowd-field .tok.hl .face { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--navy); }
.version-result { position: relative; }
.vote-twin { box-shadow: 0 0 0 1px var(--line), 0 18px 40px -16px rgba(0,20,60,.35); }
.viz-twin-did.t-blue { color: #2F52B0; } .viz-twin-did.t-sky { color: #4D74C4; } .viz-twin-did.t-gold { color: #9A6E00; }
.viz-twin-did.t-coral { color: #B5523A; } .viz-twin-did.t-grey { color: #5F6878; }
.vote-twin .viz-twin-did::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: currentColor; }

@media (max-width: 640px) {
  .viz-twin { width: 190px; }
  .crowd-field { gap: 3px; }
  .twin-portrait { width: 64px; height: 64px; }
}

/* A twin's report, playing back its session (src/site/visuals.js). */
.report-viz { position: relative; padding: 0 22px 22px 0; }
.report-stack i { position: absolute; border-radius: 16px; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); }
.report-stack i:nth-child(1) { inset: 22px 0 0 22px; }
.report-stack i:nth-child(2) { inset: 11px 11px 11px 11px; }
.report-window { position: relative; border-radius: 16px; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); overflow: hidden; }
.report-bar { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); font: 500 11px var(--mono); letter-spacing: .04em; color: var(--muted); }
.report-bar .lights i { background: #E2DFD6; }
.report-bar .url { flex: 1; text-transform: uppercase; }
.report-count { color: var(--navy); }
.rv-screen { position: relative; aspect-ratio: 16 / 10.5; border-radius: 10px; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.rv-page { position: absolute; inset: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }
.rv-top { display: flex; justify-content: space-between; align-items: center; }
.rv-nav { display: flex; gap: 6px; } .rv-nav i { width: 34px; height: 6px; border-radius: 3px; background: var(--chip); }
.rv-toggle { display: flex; padding: 2px; border-radius: 999px; background: var(--chip); }
.rv-toggle i { font: 500 10px var(--sans); font-style: normal; padding: 3px 9px; border-radius: 999px; color: var(--muted); transition: background .2s, color .2s; }
.rv-toggle i.on { background: #fff; color: var(--navy); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.rv-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 6%; }
.rv-plans div { display: grid; gap: 8px; padding: 14px 12px; border-radius: 8px; border: 1.5px solid var(--line); transition: border-color .3s, box-shadow .3s; }
.rv-plans b { font: 600 12px var(--sans); color: var(--navy); }
.rv-plans i { height: 6px; border-radius: 3px; background: var(--chip); } .rv-plans i:last-child { width: 60%; }
.rv-plans .picked { border-color: var(--navy); box-shadow: 0 0 0 3px var(--accent-soft); }
.rv-modal { position: absolute; left: 50%; top: 50%; width: 54%; display: grid; gap: 7px; padding: 14px; border-radius: 10px; background: #fff;
  box-shadow: 0 0 0 999px rgba(10,20,48,.28), 0 20px 50px -10px rgba(0,20,60,.4); opacity: 0; transform: translate(-50%, -42%); transition: opacity .35s, transform .35s; pointer-events: none; }
.rv-modal.shown { opacity: 1; transform: translate(-50%, -50%); }
.rv-modal b { font: 600 12.5px var(--sans); color: var(--navy); }
.rv-modal span { font-size: 10.5px; color: var(--muted); }
.rv-modal i { height: 20px; border-radius: 5px; border: 1px solid var(--line-strong); }
.rv-modal em { justify-self: start; font: 600 10.5px var(--sans); font-style: normal; color: #fff; background: var(--navy); padding: 5px 12px; border-radius: 6px; }
.rv-cursor { position: absolute; left: 50%; top: 74%; z-index: 3; width: 18px; height: 18px; pointer-events: none; }
.rv-cursor svg { width: 18px; height: 18px; fill: var(--ink); stroke: #fff; stroke-width: 1.5; }
.rv-timeline { display: flex; align-items: center; gap: 12px; font: 500 11px var(--mono); color: var(--muted); }
.rv-play svg { width: 16px; height: 16px; color: var(--navy); }
.rv-track { position: relative; flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.rv-progress { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--navy); }
.rv-progress.w-78 { width: 78%; }
.rv-mark { position: absolute; top: 50%; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff; transform: translate(-50%, -50%);
  font: 600 10px var(--mono); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .25s; }
.rv-mark.hit { transform: translate(-50%, -50%) scale(1.18); }
.rv-mark.at-15 { left: 15%; } .rv-mark.at-34 { left: 34%; } .rv-mark.at-55 { left: 55%; } .rv-mark.at-78 { left: 78%; }
/* Severity colors as the product's reports use them (user-study-recorder/src/report/report.css). */
.rv-mark.sev-critical { color: #fff; background: #8f1624; border-color: #5c0c16; }
.rv-mark.sev-high { color: #8a211a; background: #fbe3de; border-color: #8a211a; }
.rv-mark.sev-medium { color: #715000; background: #f7edc6; border-color: #715000; }
.rv-mark.sev-low { color: #374c60; background: #e5ebf0; border-color: #374c60; }
.rv-persona { display: flex; align-items: center; gap: 11px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.rv-persona .face { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.rv-persona span, .rv-summary span { display: block; font: 500 10.5px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.rv-persona strong { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.rv-summary p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; }
.rv-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.rv-tabs span { padding: 6px 8px; color: var(--muted); }
.rv-tabs .on { color: var(--navy); font-weight: 600; box-shadow: inset 0 -2px 0 var(--navy); }
.rv-tabs em { font: 600 10.5px var(--mono); font-style: normal; padding: 1px 6px; border-radius: 999px; background: var(--accent-soft); }

/* Sections rise into view as the page scrolls (public/site-viz.js adds .rise only to what starts below the fold). */
.rise { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.rise.in { opacity: 1; transform: none; }

@media (max-width: 640px) {
  .report-viz { padding: 0 12px 12px 0; }
  .report-stack i:nth-child(1) { inset: 12px 0 0 12px; } .report-stack i:nth-child(2) { inset: 6px 6px 6px 6px; }
  .report-bar .lights { display: none; }
  .rv-plans { gap: 6px; } .rv-plans div { padding: 9px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; transition: none; }
}

/* User interviews: the features, shown on a session report. Picking a feature outlines where it shows up. */
.feature-tour { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 28px; align-items: start; }
.tour-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tour-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 12px; border: 2px solid transparent; background: none; text-align: left; font: inherit; color: var(--ink); cursor: pointer; transition: background .2s, border-color .2s; }
.tour-item .feat-icon { margin: 0; width: 34px; height: 34px; flex: none; }
.tour-item strong { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; }
.tour-item strong em { font: 400 12px var(--sans); font-style: normal; color: var(--faint); }
.tour-item strong em::before { content: "· "; }
.tour-item span span { display: block; font-size: 13px; color: var(--muted); }
.tour-item:hover { background: var(--surface-2); }
.tour-item.on { border-color: var(--navy); background: var(--accent-soft); }
.ir-window { border-radius: 16px; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); overflow: hidden; }
/* The report's top: the agent's call that fetched it, rather than a browser bar. */
.ir-call { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); color: var(--navy); font: 500 12px var(--mono); }
.ir-call span { padding: 2px 6px; margin: 0 -6px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ir-call b { color: var(--faint); font-weight: 500; }
@media (max-width: 640px) { .ir-call { padding: 9px 12px; font-size: 11px; } }
.ir-body { display: grid; gap: 10px; padding: 14px 16px 16px; }
[data-region] { transition: box-shadow .3s, background-color .3s; }
[data-region].hl { box-shadow: 0 0 0 2px var(--gold), 0 0 0 6px rgba(253,181,21,.25); }
.ir-participant { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ir-participant .face { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.ir-participant div { margin-right: auto; }
.ir-participant strong { display: block; font-size: 14px; font-weight: 600; }
.ir-participant div span { font-size: 12px; color: var(--muted); }
.ir-chip { font: 500 10.5px var(--mono); color: var(--navy); padding: 3px 8px; border-radius: 6px; border: 1px solid var(--accent-line); background: #fff; }
.ir-summary { padding: 8px 12px; border-radius: 10px; background: var(--surface-2); }
.ir-summary > span { font: 500 10.5px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ir-summary p { margin: 2px 0 7px; font-size: 13px; line-height: 1.45; }
.ir-summary .meter { display: flex; height: 6px; }
.ir-video { position: relative; aspect-ratio: 16 / 4.6; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); overflow: hidden; }
.ir-app { position: absolute; inset: 0 0 38px 0; display: grid; grid-template-columns: 70px 1fr; }
.ir-side { display: grid; gap: 8px; align-content: start; padding: 14px 10px; background: #fff; border-right: 1px solid var(--line); }
.ir-side i { height: 6px; border-radius: 3px; background: var(--chip); }
.ir-main { padding: 14px 18px; display: grid; gap: 10px; align-content: start; }
.ir-main b { font: 600 12px var(--sans); color: var(--navy); }
.ir-templates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ir-templates i { aspect-ratio: 4 / 2.4; border-radius: 8px; background: #fff; border: 1.5px solid var(--line); }
.ir-templates .picked { border-color: var(--navy); box-shadow: 0 0 0 3px var(--accent-soft); }
/* What the participant did, as a session replay marks it: short lines around the cursor's tip for the click, and a
   thin scrollbar whose handle shows how far they scrolled. Highlighted, the click lines turn gold rather than boxed. */
.ir-burst { position: absolute; left: calc(55% + 4px); top: calc(50% + 3px); width: 17px; height: 17px; transform: translate(-50%, -50%);
  fill: none; stroke: rgba(0,38,118,.45); stroke-width: 2; stroke-linecap: round; transition: stroke .2s, stroke-width .2s; }
.ir-burst.hl { box-shadow: none; stroke: var(--gold); stroke-width: 2.8; }
.ir-scroll { position: absolute; right: 6px; top: 10px; bottom: 48px; width: 4px; border-radius: 2px; background: rgba(0,38,118,.08); }
.ir-scroll i { position: absolute; left: 0; right: 0; top: 34%; height: 30%; border-radius: 2px; background: rgba(0,38,118,.45); }
.ir-cursor { left: 55%; top: 50%; }
.ir-voice { position: absolute; left: 0; right: 0; bottom: 0; height: 38px; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: #fff; border-top: 1px solid var(--line); }
.ir-voice .bars { flex: 1; }
.ir-transcript { display: grid; gap: 6px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); font-size: 13px; }
.ir-transcript p { margin: 0 -6px; padding: 2px 6px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; border-radius: 6px; }
.ir-transcript time { font: 500 11px var(--mono); color: var(--faint); }
.ir-transcript b { font: 500 10.5px var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--navy); }
.ir-mod { color: var(--muted); }
.ir-timeline { position: relative; display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 6px 10px; align-items: center; font: 500 10.5px var(--mono); color: var(--muted); }
.ir-track { position: relative; height: 18px; border-radius: 5px; background: var(--surface-2); }
.ir-task { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 8px; border-radius: 5px; font: 500 10px var(--mono); font-style: normal; white-space: nowrap; overflow: hidden; }
.ir-task.done { left: 0; width: 54%; background: #E7F3EC; color: var(--up); }
.ir-task.skipped { left: 55%; right: 0; background: #FDF0E6; color: #B54708; }
.ir-track .pol-dot { position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%, -50%); }
.pol-positive { background: var(--up); } .pol-neutral { background: #98A2B3; } .pol-negative { background: var(--down); }
.ir-track .rv-mark { width: 18px; height: 18px; font-size: 9.5px; }
.ir-track .at-6 { left: 6%; } .ir-track .at-18 { left: 18%; } .ir-track .at-21 { left: 21%; } .ir-track .at-37 { left: 37%; } .ir-track .at-44 { left: 44%; }
.ir-track .at-52 { left: 52%; } .ir-track .at-58 { left: 58%; } .ir-track .at-71 { left: 71%; } .ir-track .at-74 { left: 74%; } .ir-track .at-76 { left: 76%; }
.ir-track .at-86 { left: 86%; } .ir-track .at-90 { left: 90%; }

@media (max-width: 980px) {
  .feature-tour { grid-template-columns: minmax(0, 1fr); }
  .tour-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .tour-list { grid-template-columns: minmax(0, 1fr); }
  .ir-app { grid-template-columns: 44px 1fr; }
  .ir-participant .ir-chip { font-size: 9.5px; }
  .ir-body .rv-tabs { white-space: nowrap; overflow: hidden; }
  .ir-video { aspect-ratio: 16 / 9; }
}

/* User simulation, "How it works": a big step gives its visual most of the row, with the copy pinned beside it. The
   visuals measure their own column and stack their parts when it's narrow. */
.how-row.big { grid-template-columns: minmax(0, .5fr) minmax(0, 1.5fr); gap: 40px; }
.how-row.big:nth-child(even) { grid-template-columns: minmax(0, 1.5fr) minmax(0, .5fr); }
.how-visual { container-type: inline-size; min-width: 0; }
.how-visual .clips-widget { margin-top: 20px; }
.how-visual > .clips-widget { margin-top: 0; }
.how-visual > .clips-widget .clips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@container (max-width: 720px) {
  .versions { grid-template-columns: minmax(0, 1fr); }
  .version-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .version { font-size: 14px; padding: 12px 14px; }
}
@container (max-width: 600px) {
  .builder { grid-template-columns: minmax(0, 1fr); }
  .builder .flow-arrow { justify-self: center; transform: rotate(90deg); }
  .version-picker { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 980px) {
  .how-row.big, .how-row.big:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
}

/* The report's Journey tab: the recording and its timeline beside everything that happened, in order. */
.rv-head { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 24px; padding: 18px 18px 4px; }
.rv-head .rv-persona { padding-bottom: 0; border-bottom: 0; align-items: flex-start; }
.rv-summary ul { margin: 4px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.rv-summary li time { font: 500 11px var(--mono); color: var(--navy); margin-left: 4px; }
.rv-summary > span + p + span { margin-top: 8px; }
.report-window > .rv-tabs { margin: 10px 18px 0; }
.rv-journey { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.rv-session { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-right: 1px solid var(--line); }
.rv-rows { position: relative; display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 7px 10px; align-items: center; font: 500 10.5px var(--mono); color: var(--muted); }
.rv-lane { position: relative; height: 20px; border-radius: 5px; background: var(--surface-2); }
.rv-lane .rv-mark { width: 18px; height: 18px; font-size: 9.5px; }
.rv-lane .pol-dot { position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%, -50%); }
.rv-chapter { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 8px; border-radius: 5px; font: 500 10px var(--mono); font-style: normal; white-space: nowrap; overflow: hidden; }
.rv-chapter.done { background: #E7F3EC; color: var(--up); } .rv-chapter.unfinished { background: #FDF0E6; color: #B54708; }
.rv-chapter.from-0 { left: 0; } .rv-chapter.from-48 { left: calc(48% + 2px); } .rv-chapter.to-48 { right: 52%; } .rv-chapter.to-100 { right: 0; }
.rv-lane .at-10 { left: 10%; } .rv-lane .at-38 { left: 38%; } .rv-lane .at-67 { left: 67%; } .rv-lane .at-80 { left: 80%; }
.rv-playhead-lane { position: absolute; top: -4px; bottom: -4px; left: 72px; right: 0; pointer-events: none; }
.rv-playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--gold); }
.rv-playhead.at-78 { left: 78%; }
.rv-ann { display: flex; flex-direction: column; gap: 10px; padding: 18px; min-width: 0; }
.rv-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.rv-filters span { font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.rv-filters .on { border-color: var(--navy); color: var(--navy); font-weight: 600; }
.rv-filters em { font: 500 10.5px var(--mono); font-style: normal; margin-left: 2px; }
.rv-ann ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rv-ann li { display: grid; gap: 2px; padding: 7px 10px; border-radius: 8px; border: 1px solid transparent; opacity: .38; cursor: pointer; transition: opacity .3s, background .3s, border-color .3s; }
.rv-ann li.past { opacity: 1; }
.rv-ann li.on { background: var(--accent-soft); border-color: var(--navy); }
.rv-ann-head { display: flex; align-items: center; gap: 7px; font: 500 10.5px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.rv-ann-head time { color: var(--faint); min-width: 30px; }
.rv-ann .pol-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.rv-ann-title { font-size: 13px; line-height: 1.35; color: var(--ink); }
.rv-badge { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 3px; border-radius: 999px; font: 600 9.5px var(--mono); border: 1.5px solid; }
.rv-badge.task { border-radius: 4px; color: var(--navy); background: var(--accent-soft); border-color: var(--accent-line); }
.rv-badge.sev-critical { color: #fff; background: #8f1624; border-color: #5c0c16; } .rv-badge.sev-high { color: #8a211a; background: #fbe3de; border-color: #8a211a; }
.rv-badge.sev-medium { color: #715000; background: #f7edc6; border-color: #715000; } .rv-badge.sev-low { color: #374c60; background: #e5ebf0; border-color: #374c60; }
@container (max-width: 860px) {
  .rv-journey, .rv-head { grid-template-columns: minmax(0, 1fr); }
  .rv-screen { aspect-ratio: 16 / 8; }
  .rv-session { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 980px) {
  .rv-journey, .rv-head { grid-template-columns: minmax(0, 1fr); }
  .rv-session { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* "Which version do you ship?": which example is showing. */
.rv-journey.no-list { grid-template-columns: minmax(0, 1fr); }
.rv-journey.no-list .rv-session { border-right: 0; border-bottom: 0; }
.rv-journey.no-list .rv-screen { aspect-ratio: 16 / 6.5; }

/* ---- Positioning round (Artur's doc): one line per product, the version vote as the simulation hero, proof points,
   the MCP command on its own, and what a twin models. ---- */
.hero > .versions-wrap { margin-top: 56px; text-align: left; position: relative; }
.proof { list-style: none; margin: 88px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.proof li { padding-top: 18px; border-top: 2px solid var(--navy); }
.proof strong { display: block; font: 600 clamp(30px, 4vw, 44px)/1 var(--sans); letter-spacing: -.03em; color: var(--navy); }
.proof span { display: block; margin-top: 10px; color: var(--muted); font-size: 15px; }
.mcp-strip { text-align: center; }
.mcp-strip .section-head { margin-left: auto; margin-right: auto; margin-bottom: 28px; }
.mcp-strip .install { max-width: 640px; margin: 0 auto 18px; text-align: left; }
.mcp-strip .link-row { justify-content: center; }
.twin-model { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; }
.twin-model div { padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid transparent; transition: background .3s, border-color .3s, opacity .3s; }
.builder.has-lit .twin-model div:not(.lit) { opacity: .55; }
.twin-model div.lit { background: var(--accent-soft); border-color: var(--navy); }
.twin-model dt { font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--navy); }
.twin-model dd { margin: 4px 0 0; font-size: 14px; line-height: 1.35; color: var(--ink); }
@container (max-width: 300px) { .twin-model { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) {
  .proof { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .proof { margin-top: 64px; }
}

/* User interviews: the features, under the headline, then the recruiting proof points. The report's transcript scrolls
   past like a news ticker. */
.hero-tour { margin-top: 56px; text-align: left; }
.proof.solo { margin-top: 0; }
.ir-transcript p.ir-think { flex-wrap: nowrap; align-items: center; }
.ir-think .viz-ticker { display: block; flex: 1; min-width: 0; overflow: hidden; color: var(--ink);
  -webkit-mask: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent); }
.ir-think .viz-ticker .time { color: var(--navy); font: 500 11px var(--mono); }
/* The scrolling line is taken out of the layout, so its length never widens the report. */
.ir-think .viz-ticker { position: relative; height: 1.5em; }
.ir-think .viz-ticker-track { position: absolute; left: 0; top: 0; }

/* ---- The third landing page (/home-preview-v3, src/site/landing-page-v3.js): a funnel without and with Constants,
   adding your agent, and How it works with twins who dropped off. ---- */
main > .band.hero-funnel:first-child { padding-top: 104px; }
/* One line of lede on wide screens, and the buttons a little closer, so more of the funnel fits on the first screen. */
.hero-funnel .lede { max-width: 820px; margin-top: 18px; }
.hero-funnel .ctas { margin-top: 26px; }
@media (max-width: 640px) { main > .band.hero-funnel:first-child { padding-top: 96px; } }
.hero-funnel .funnel-stage { max-width: 1040px; margin: 36px auto 0; }
/* The switch, with its line beside it, at the top of the panel above the numbers. */
.funnel-head { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 16px 16px 0; text-align: left; }
/* Without and with Constants: two buttons in a pill, with one highlight that glides to whichever is on (public/site-viz.js
   sizes and moves it): white without, green with. Without the script, the pressed button carries the highlight itself. */
.funnel-modes { position: relative; display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(0,22,70,.6); border: 1px solid rgba(255,255,255,.2); }
.funnel-modes button { position: relative; z-index: 1; padding: 6px 14px; border: 0; border-radius: 999px; background: none; font: 600 14px var(--sans); letter-spacing: 0; color: rgba(255,255,255,.7); cursor: pointer; transition: color .35s ease; }
.funnel-modes button:hover { color: #fff; }
.funnel-modes button:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
.funnel-modes button[aria-pressed="true"] { color: var(--navy); background: #fff; }
.funnel-modes.with button[aria-pressed="true"] { color: #06301b; background: #4CC38A; }
.mode-slide { display: none; }
.funnel-viz.js .mode-slide { display: block; position: absolute; top: 3px; bottom: 3px; left: 0; border-radius: 999px; background: #fff;
  transition: transform .5s cubic-bezier(.65,0,.35,1), width .5s cubic-bezier(.65,0,.35,1), background-color .5s ease; }
.funnel-viz.js .funnel-modes.with .mode-slide { background: #4CC38A; }
.funnel-viz.js .funnel-modes button[aria-pressed="true"] { background: none; }
@media (prefers-reduced-motion: reduce) { .funnel-viz.js .mode-slide { transition: none; } }
.funnel-caption { margin: 0; font: 400 15px/1.4 var(--sans); letter-spacing: 0; color: rgba(255,255,255,.82); }
.funnel-caption span[hidden] { display: none; }
.funnel-viz { position: relative; height: 610px; border: 1px solid rgba(255,255,255,.12); border-radius: 6px;
  background: radial-gradient(ellipse 55% 60% at 40% 50%, rgba(46,86,170,.5), rgba(0,38,118,0) 75%);
  font: 500 11px/1.5 var(--mono); letter-spacing: .04em; color: rgba(255,255,255,.66); overflow: hidden; }
.funnel-viz:not(.js) { background-image: radial-gradient(circle, rgba(188,196,213,.3) 1.2px, transparent 1.6px); background-size: 12px 12px; }
.funnel-viz canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.funnel-kpis { position: relative; z-index: 1; margin: 12px 16px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: left; }
.funnel-kpis div { padding: 10px 12px; border-radius: 8px; background: rgba(0,22,70,.55); border: 1px solid rgba(255,255,255,.1); }
.funnel-kpis dt { font: 500 9.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.55); }
/* The numbers are red while they're bad (without Constants) and green once the fixes land. */
.funnel-kpis dd { margin: 4px 0 0; font: 500 22px/1.15 var(--sans); letter-spacing: -.01em; color: #F58C7B; font-variant-numeric: tabular-nums; transition: color .4s; }
.funnel-viz.fixed .funnel-kpis dd { color: #4CC38A; }
.funnel-viz .tick { position: absolute; width: 12px; height: 12px; border: 0 solid var(--gold); }
.funnel-viz .tick.tl { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.funnel-viz .tick.tr { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px; }
.funnel-viz .tick.bl { bottom: -1px; left: -1px; border-bottom-width: 2px; border-left-width: 2px; }
.funnel-viz .tick.br { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }
/* Adding Constants to your agent, on navy: a tab per agent over the line to copy and what to do with it. */
.agent-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-bottom: 10px; }
.agent-tabs button { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px 6px 10px; border: 1px solid transparent; border-radius: 999px; background: none; font: 500 13.5px var(--sans); color: rgba(255,255,255,.66); cursor: pointer; }
/* Each agent's own mark: Claude's in its orange, OpenAI's in white, and a plain plug for any other agent. */
.agent-tabs button svg { width: 15px; height: 15px; flex: none; }
.agent-mark { stroke: none; }
.agent-mark.claude { fill: #D97757; }
.agent-mark.openai { fill: #fff; }
.agent-tabs button svg:not(.agent-mark) { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.agent-tabs button:hover { color: #fff; }
.agent-tabs button:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
.agent-tabs button[aria-selected="true"] { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.28); }
.agent-panel[hidden] { display: none; }
.band .agent-add .install { margin: 0 0 8px; background: rgba(0,16,56,.6); border-color: rgba(255,255,255,.2); text-align: left; }
.band .agent-add .install code { font: 13px var(--mono); color: #fff; }
.band .agent-add .icon-btn { color: rgba(255,255,255,.7); }
.band .agent-add .icon-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.band .agent-add .icon-btn.done { color: #4CC38A; }
.agent-panel p { margin: 0; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.66); }
/* The closing band: the heading and its line (on the web or with your agent), the calls to action, then adding Constants
   to your agent. */
.final-agent { padding-top: 72px; padding-bottom: 64px; }
/* As a card: navy inside the page's width, with rounded corners and white around it, not a full-width band. */
.signup-section { padding-top: 40px; padding-bottom: 40px; }
.final-agent.signup-card { box-shadow: none; clip-path: none; border-radius: 24px; overflow: hidden; }
.signup-section + .pricing-brief { padding-top: 72px; }
@media (max-width: 640px) { .signup-section { padding-top: 24px; padding-bottom: 24px; } .final-agent.signup-card { border-radius: 16px; padding: 48px 20px; } .signup-section + .pricing-brief { padding-top: 56px; } }
.final-agent .ctas { margin-top: 24px; }
.final-agent .agent-intro { max-width: 680px; margin: 16px auto 0; font-size: 17px; color: rgba(255,255,255,.8); text-wrap: balance; }
.final-agent .agent-add { max-width: 700px; margin: 36px auto 0; }
@media (max-width: 640px) {
  .hero-funnel .funnel-stage { margin-top: 32px; }
  .funnel-head { margin: 12px 12px 0; }
  .funnel-modes button { padding: 6px 11px; font-size: 13px; }
  .funnel-caption { font-size: 13.5px; }
  .funnel-viz { height: 590px; }
  .funnel-kpis { margin: 10px 12px 0; }
  .funnel-kpis { gap: 6px; }
  .funnel-kpis div { padding: 8px 9px; }
  .funnel-kpis dt { font-size: 8px; }
  .funnel-kpis dd { font-size: 16px; }
}
/* Less room above "How it works" than other sections get, and the heading centered. */
.section.how-tight { padding-top: 64px; }
@media (max-width: 640px) { .section.how-tight { padding-top: 44px; } }
.how-head { max-width: none; margin-bottom: 32px; text-align: center; }
/* The pricing section's monthly/yearly switch (the site's toggle, centered under the line), with yearly's saving in
   green, and the line under each paid plan's price saying how it's billed. */
.period-toggle { margin-top: 18px; }
.period-toggle em { margin-left: 4px; font-style: normal; font-weight: 600; color: var(--good); }
.price-amount { font-weight: inherit; }
.plan .price-note { margin: -12px 0 18px; font-size: 13px; color: var(--muted); }
/* Twins who dropped off, one per stage of the funnel: their recordings stacked on the left as a picker, the picked
   twin's report filling the right (the report's pieces are the second landing page's, a little bigger). On narrow
   screens the recordings sit in a row above the report. */
.drops { display: grid; grid-template-columns: minmax(220px, 290px) minmax(0, 1fr); gap: 24px; align-items: start; }
.drop-clips { display: grid; gap: 12px; align-content: start; }
.drop-clip { position: relative; display: block; padding: 0; border: 2px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--chip); aspect-ratio: 16 / 10; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.drop-clip:hover { border-color: var(--line-strong); }
.drop-clip[aria-pressed="true"] { border-color: var(--navy); box-shadow: 0 0 0 4px var(--accent-soft); }
.drop-clip video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.drop-clip .run-clip-who { max-width: calc(100% - 16px); }
.drop-clip .run-clip-who .face { flex: none; }
.drop-clip .run-clip-who > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop-reports { display: grid; gap: 14px; }
.drops .run-body { gap: 14px; padding: 20px 24px 24px; }
.drops .run-body .rv-persona strong { font-size: 15px; }
.drops .run-section p { font-size: 15px; line-height: 1.5; }
.drops .run-section li { font-size: 14.5px; }
.drop-reports .run-more { margin-top: 6px; }
.dropoff-where { margin: 0; display: grid; justify-items: start; gap: 5px; }
.dropoff-where span { font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--navy); }
.dropoff-where b { padding: 3px 8px; border-radius: 6px; font: 500 12.5px var(--mono); color: #8a211a; background: #fbe3de; }
@container (max-width: 700px) {
  .drops { grid-template-columns: minmax(0, 1fr); }
  .drop-clips { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .drop-clip .run-clip-who { padding: 2px; } .drop-clip .run-clip-who > span { display: none; }
  .drops .run-body { padding: 16px 16px 18px; }
}
.how-card.rise :is(.drop-clip, .drops .run-report) { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.how-card.rise.in :is(.drop-clip, .drops .run-report) { opacity: 1; transform: none; }
.how-card.rise.in .drop-clip:nth-child(2) { transition-delay: .1s; } .how-card.rise.in .drop-clip:nth-child(3) { transition-delay: .2s; }
.how-card.rise.in .drops .run-report { transition-delay: .3s; }