/* govconagents.ai
   Concept: "precision instrument". White space and hairlines like a technical drawing, one refined grotesque (Geist),
   deep navy ink from the Ops Center brand, aerospace international orange used sparingly as the signal colour,
   and real product surfaces (agent log, RFQ draft, NSN label) instead of illustration. */

@font-face { font-family: "Geist"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/geist-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/geist-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/geist-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/geist-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/geist-mono-latin-500-normal.woff2") format("woff2"); }

:root {
  --bg: #FFFFFF;
  --mist: #F5F7FA;
  --surface: #FFFFFF;
  --ink: #0B1626;
  --ink-2: #4A5568;
  --ink-3: #7A8496;
  --line: #E6E9EF;
  --line-2: #D5DAE3;
  --navy: #0B1F3F;
  --navy-2: #13294D;
  --on-navy: #F2F5FA;
  --on-navy-2: #A6B3C8;
  --navy-line: #263E66;
  --signal: #E8541C;
  --signal-soft: #FDEDE6;
  --ok: #157347; --ok-bg: #E7F5EE;
  --info: #2F55C8; --info-bg: #EBF0FC;
  --warn: #9A5B00; --warn-bg: #FFF3DC;
  --shadow: 0 1px 2px rgba(11, 22, 38, 0.04), 0 8px 24px -8px rgba(11, 22, 38, 0.10);
  --shadow-lg: 0 2px 4px rgba(11, 22, 38, 0.04), 0 24px 48px -16px rgba(11, 22, 38, 0.18);
  --grid-dot: rgba(11, 31, 63, 0.09);
  --sans: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --r: 10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #080D16; --mist: #0D1420; --surface: #111A28; --ink: #EEF2F8; --ink-2: #A9B3C4; --ink-3: #7D8799;
  --line: #1C2636; --line-2: #263246; --navy: #0B1A33; --navy-2: #12264A; --on-navy: #F2F5FA; --on-navy-2: #A6B3C8; --navy-line: #24395E;
  --signal: #FF7A45; --signal-soft: #2A170F; --ok: #5FD19A; --ok-bg: #0E2A1D; --info: #8FAEFF; --info-bg: #142347; --warn: #F2C266; --warn-bg: #2E2209;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -8px rgba(0,0,0,0.5); --shadow-lg: 0 2px 4px rgba(0,0,0,0.3), 0 24px 48px -16px rgba(0,0,0,0.6);
  --grid-dot: rgba(160, 180, 210, 0.09);
  color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #080D16; --mist: #0D1420; --surface: #111A28; --ink: #EEF2F8; --ink-2: #A9B3C4; --ink-3: #7D8799;
  --line: #1C2636; --line-2: #263246; --navy: #0B1A33; --navy-2: #12264A; --on-navy: #F2F5FA; --on-navy-2: #A6B3C8; --navy-line: #24395E;
  --signal: #FF7A45; --signal-soft: #2A170F; --ok: #5FD19A; --ok-bg: #0E2A1D; --info: #8FAEFF; --info-bg: #142347; --warn: #F2C266; --warn-bg: #2E2209;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -8px rgba(0,0,0,0.5); --shadow-lg: 0 2px 4px rgba(0,0,0,0.3), 0 24px 48px -16px rgba(0,0,0,0.6);
  --grid-dot: rgba(160, 180, 210, 0.09);
  color-scheme: dark }

/* base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 400 16.5px/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11"; }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; color: var(--ink); }
h1 { font-size: clamp(42px, 6.4vw, 80px); line-height: 1.0; letter-spacing: -0.045em; }
h2 { font-size: clamp(32px, 4.2vw, 52px); line-height: 1.05; letter-spacing: -0.035em; }
h3 { font-size: 18px; line-height: 1.3; letter-spacing: -0.012em; }
.muted { color: var(--ink-3); }
.mono { font-family: var(--mono); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; }
section[id], main[id] { scroll-margin-top: 80px; }

.wrap { max-width: 1200px; margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
@media (max-width: 600px) { .wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); } }

.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 16px; top: 16px; z-index: 60; background: var(--ink); color: var(--bg); padding: 8px 12px; border-radius: 6px; }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: var(--signal); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px; font: 500 15px/1 var(--sans); letter-spacing: -0.005em; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, transform .15s ease; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { background: color-mix(in srgb, var(--ink) 86%, var(--signal)); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--ink-3); }
.btn .arrow { transition: transform .15s ease; }
.btn:hover .arrow { transform: translateX(2px); }

/* header */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--line); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 50; background: var(--bg); }
.top .wrap { display: flex; align-items: center; gap: 28px; height: 64px; }
.mark { display: inline-flex; align-items: baseline; gap: 1px; text-decoration: none; font-weight: 600; font-size: 17px; letter-spacing: -0.03em; color: var(--ink); }
.mark i { font-style: normal; width: 7px; height: 7px; border-radius: 2px; background: var(--signal); display: inline-block; margin: 0 3px 0 2px; transform: translateY(-1px); }
.mark small { font: 500 13px var(--mono); color: var(--ink-3); letter-spacing: 0; }
.top nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.top nav > a:not(.btn) { color: var(--ink-2); text-decoration: none; font-size: 14.5px; padding: 8px 12px; border-radius: 999px; }
.top nav > a:not(.btn):hover { color: var(--ink); background: var(--mist); }
.top .btn { height: 38px; padding: 0 16px; font-size: 14px; margin-left: 8px; }
@media (max-width: 820px) { .top nav > a:not(.btn) { display: none; } }

/* hero */
.hero { position: relative; padding-block: 88px 0; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(var(--grid-dot) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 70%); mask-image: linear-gradient(to bottom, #000 0%, transparent 70%); pointer-events: none; }
.hero .wrap { position: relative; }
.hero-copy { max-width: 900px; }
.hero h1 { margin-top: 22px; }
.hero h1 .quiet { color: var(--ink-3); }
.hero .lead { margin-top: 26px; font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 58ch; }
.hero .ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 34px; }
.hero .fine { margin-top: 20px; font-size: 14px; color: var(--ink-3); }

/* product composite */
.stage { position: relative; margin-top: 72px; border: 1px solid var(--line); border-bottom: 0; border-radius: 18px 18px 0 0; background: linear-gradient(to bottom, var(--mist), var(--bg)); padding: 28px 28px 0; }
.stage-tag { position: absolute; top: -11px; right: 24px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font: 500 11px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.stage-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); min-width: 0; overflow: hidden; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); font: 500 12px var(--mono); color: var(--ink-3); flex-wrap: wrap; }
.panel-head .live { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); }
.panel-head .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }

.log ol { list-style: none; margin: 0; padding: 6px 0; }
.log li { display: grid; grid-template-columns: 48px 14px minmax(0, 1fr); gap: 10px; padding: 9px 16px; font-size: 14px; line-height: 1.45; position: relative; }
.log time { font: 400 12.5px/1.6 var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.log .tick { position: relative; }
.log .tick::before { content: ""; position: absolute; left: 3px; top: 7px; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--surface); z-index: 1; }
.log .tick::after { content: ""; position: absolute; left: 6.5px; top: 14px; bottom: -22px; width: 1px; background: var(--line); }
.log li:last-child .tick::after { display: none; }
.log b { font-weight: 500; color: var(--ink); }
.log span { color: var(--ink-2); }
.log .you { background: var(--signal-soft); }
.log .you .tick::before { border-color: var(--signal); background: var(--signal); }

.side { display: grid; gap: 20px; min-width: 0; }
.mail .fields { display: grid; gap: 0; font-size: 13.5px; }
.mail .fields div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; padding: 9px 16px; border-bottom: 1px solid var(--line); }
.mail .fields dt, .mail .fields .k { color: var(--ink-3); }
.mail .fields .v { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail .body { padding: 14px 16px 16px; font-size: 13.5px; color: var(--ink-2); display: grid; gap: 8px; }
.mail .body .line { height: 7px; border-radius: 4px; background: var(--mist); }
.mail .body .line.s { width: 62%; }
.mail .foot { display: flex; gap: 8px; align-items: center; padding: 0 16px 16px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font: 500 12px/1 var(--sans); border: 1px solid var(--line); color: var(--ink-2); background: var(--surface); }
.chip.warn { background: var(--warn-bg); color: var(--warn); border-color: transparent; }

.label { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; padding: 16px; align-items: center; }
.label dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; font-size: 13px; }
.label dt { font: 500 11px/1.7 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.label dd { margin: 0; font: 500 13.5px/1.6 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.barcode { width: 88px; height: 64px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 12px); border-radius: 2px; opacity: 0.85; }
@media (max-width: 960px) { .stage-grid { grid-template-columns: minmax(0, 1fr); } .stage { padding: 20px 16px 0; } }
@media (max-width: 480px) { .barcode { display: none; } .label { grid-template-columns: minmax(0, 1fr); } }

/* proof strip */
.proof { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg); }
.proof .wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(5, minmax(0, 1fr)); }
.proof .cap { padding: 28px 24px 28px 0; display: grid; gap: 8px; align-content: center; }
.proof .cap p { font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.fig { padding: 28px 20px; border-left: 1px solid var(--line); display: grid; gap: 6px; align-content: center; }
.fig strong { font-weight: 500; font-size: clamp(30px, 3.2vw, 40px); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.fig span { font-size: 13.5px; color: var(--ink-2); line-height: 1.35; }
.proof .note { grid-column: 1 / -1; border-top: 1px solid var(--line); padding: 12px 0; font-size: 13px; color: var(--ink-3); }
@media (max-width: 1000px) {
  .proof .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof .cap { grid-column: 1 / -1; padding: 24px 0 8px; }
  .fig { border-left: 0; border-top: 1px solid var(--line); padding: 18px 0; }
  .fig:nth-of-type(odd) { padding-right: 12px; }
}

/* sections */
section.block { padding-block: 120px; }
section.block.tint { background: var(--mist); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec-head { display: grid; gap: 18px; margin-bottom: 56px; max-width: 760px; align-content: start; }
.sec-head .lead { font-size: 18px; color: var(--ink-2); max-width: 60ch; }
.sec-head.split { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); align-items: end; gap: 18px 64px; }
.sec-head.split .eyebrow { grid-column: 1 / -1; }
.sec-head.flush { margin-bottom: 0; }
@media (max-width: 860px) { section.block { padding-block: 84px; } .sec-head.split { grid-template-columns: minmax(0, 1fr); } }

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.step { background: var(--surface); padding: 32px 28px 36px; display: grid; gap: 12px; align-content: start; position: relative; }
.step .n { font: 500 12px var(--mono); color: var(--ink-3); letter-spacing: 0.04em; display: flex; justify-content: space-between; }
.step h3 { font-size: 20px; margin-top: 18px; }
.step p { color: var(--ink-2); font-size: 15.5px; }
.step.you { background: var(--navy); }
.step.you h3 { color: var(--on-navy); }
.step.you p { color: var(--on-navy-2); }
.step.you .n { color: var(--signal); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* promises */
.rules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; border-top: 1px solid var(--line); padding-top: 40px; }
.rule { display: grid; gap: 14px; align-content: start; }
.rule .ico { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; color: var(--ink); }
.rule .ico svg { width: 20px; height: 20px; }
.rule h3 { font-size: 18px; }
.rule p { color: var(--ink-2); font-size: 15px; }
@media (max-width: 1000px) { .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .rules { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* dashboard */
.dash-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 72px; align-items: center; }
.dash-grid .lead { margin-top: 2px; }
.dash-grid ul { list-style: none; margin: 28px 0 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.dash-grid li { padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 15.5px; }
.dash-grid li b { color: var(--ink); font-weight: 500; }
.browser { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); overflow: hidden; min-width: 0; }
.browser-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--mist); }
.browser-bar .dots { display: flex; gap: 6px; }
.browser-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); display: block; }
.browser-bar .url { flex: 1; min-width: 0; text-align: center; font: 400 12px var(--mono); color: var(--ink-3); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 5px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabs { display: flex; gap: 2px; padding: 10px 14px 0; border-bottom: 1px solid var(--line); font-size: 13px; overflow-x: auto; }
.tabs span { padding: 8px 10px; color: var(--ink-3); white-space: nowrap; }
.tabs span.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.tablewrap { overflow-x: auto; }
.browser table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 560px; }
.browser th, .browser td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.browser th { font: 500 11px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.browser td.m { font: 400 12.5px var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.browser tr:last-child td { border-bottom: 0; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 500; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.p-info { background: var(--info-bg); color: var(--info); }
.p-warn { background: var(--warn-bg); color: var(--warn); }
.p-ok { background: var(--ok-bg); color: var(--ok); }
.browser .cap { padding: 10px 14px; font-size: 12.5px; color: var(--ink-3); border-top: 1px solid var(--line); }
@media (max-width: 960px) { .dash-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; } }

/* pricing */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.tier { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 32px 28px 28px; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 18px; }
.tier .name { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tier .tag { font: 500 11px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; background: var(--signal); color: #fff; }
.price { font-weight: 500; font-size: 48px; line-height: 1; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.price small { font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--ink-3); }
.tier .for { color: var(--ink-2); font-size: 15px; }
.tier ul { list-style: none; margin: 0; padding: 20px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; align-content: start; font-size: 14.5px; }
.tier li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; color: var(--ink-2); }
.tier li::before { content: ""; width: 12px; height: 7px; margin-top: 6px; border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(-45deg); }
.tier .setup { display: grid; gap: 14px; font: 400 12.5px/1.5 var(--mono); color: var(--ink-3); }
.tier .btn { width: 100%; }
.tier.main { background: var(--navy); border-color: var(--navy); color: var(--on-navy); box-shadow: var(--shadow-lg); }
.tier.main h3, .tier.main .price { color: var(--on-navy); }
.tier.main .price small, .tier.main .for, .tier.main .setup { color: var(--on-navy-2); }
.tier.main ul { border-top-color: var(--navy-line); }
.tier.main li { color: var(--on-navy); }
.tier.main li::before { border-color: var(--signal); }
.tier.main .btn { background: var(--on-navy); color: var(--navy); }
.tier.main .btn:hover { background: #FFFFFF; }
.included { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; }
.box { border: 1px solid var(--line); border-radius: 16px; padding: 24px 28px; background: var(--surface); display: grid; gap: 8px; align-content: start; }
.box h3 { font-size: 17px; }
.box p { color: var(--ink-2); font-size: 15px; }
.box.partner { border-style: dashed; border-color: var(--signal); background: var(--signal-soft); }
@media (max-width: 960px) { .tiers, .included { grid-template-columns: minmax(0, 1fr); } }

/* security */
.sec-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.sec-item { padding: 28px 28px 32px 0; display: grid; gap: 10px; align-content: start; border-bottom: 1px solid var(--line); }
.sec-item + .sec-item { }
.sec-item:not(:nth-child(3n+1)) { padding-left: 28px; border-left: 1px solid var(--line); }
.sec-item h3 { font-size: 17px; display: flex; gap: 10px; align-items: baseline; }
.sec-item h3::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 1px; background: var(--ink); transform: translateY(-2px); }
.sec-item p { color: var(--ink-2); font-size: 15px; }
@media (max-width: 960px) {
  .sec-list { grid-template-columns: minmax(0, 1fr); }
  .sec-item, .sec-item:not(:nth-child(3n+1)) { padding: 22px 0; border-left: 0; }
}

/* onboarding */
.days { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; position: relative; }
.day { display: grid; gap: 10px; align-content: start; padding-right: 28px; }
.day .d { display: flex; align-items: center; gap: 12px; font: 500 12px var(--mono); color: var(--ink-3); letter-spacing: 0.04em; margin-bottom: 14px; }
.day .d::before { content: ""; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--bg); flex: none; }
.day .d::after { content: ""; height: 1px; background: var(--line-2); flex: 1; }
.day:last-child .d::before { background: var(--signal); border-color: var(--signal); }
.day:last-child .d::after { display: none; }
.day h3 { font-size: 19px; }
.day p { color: var(--ink-2); font-size: 15px; }
@media (max-width: 860px) { .days { grid-template-columns: minmax(0, 1fr); gap: 28px; } .day .d::after { display: none; } }

/* faq */
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
.faq { display: grid; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(45deg) translateY(-3px); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq details p { padding: 0 0 22px; color: var(--ink-2); max-width: 64ch; }
@media (max-width: 900px) { .faq-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } }

/* demo */
.demo { background: var(--navy); color: var(--on-navy); padding-block: 120px; position: relative; overflow: hidden; }
.demo::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(to right, #000, transparent 60%); mask-image: linear-gradient(to right, #000, transparent 60%); pointer-events: none; }
.demo .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 72px; align-items: start; }
.demo h2 { color: var(--on-navy); }
.demo .eyebrow { color: var(--on-navy-2); }
.demo .lead { color: var(--on-navy-2); font-size: 18px; }
form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 16px; background: var(--surface); color: var(--ink); border-radius: 16px; padding: 32px; box-shadow: var(--shadow-lg); }
label { display: grid; gap: 7px; font-size: 13.5px; font-weight: 500; color: var(--ink); }
label.full { grid-column: 1 / -1; }
input, select, textarea { font: 400 15.5px var(--sans); height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg); color: var(--ink); width: 100%; transition: border-color .15s ease, box-shadow .15s ease; }
textarea { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 10%, transparent); }
.check { display: flex; gap: 10px; align-items: center; font-weight: 400; grid-column: 1 / -1; color: var(--ink-2); }
.check input { width: 16px; height: 16px; accent-color: var(--ink); }
form .btn { grid-column: 1 / -1; height: 48px; }
.ts { grid-column: 1 / -1; min-height: 0; }
.ts:not(:empty) { min-height: 65px; }
.formnote { grid-column: 1 / -1; font-size: 13px; color: var(--ink-3); }
.formnote a { color: var(--ink-2); }
.form-msg { grid-column: 1 / -1; font-size: 14px; padding: 12px 14px; border-radius: 10px; background: var(--mist); border: 1px solid var(--line-2); }
.form-msg.ok { background: var(--ok-bg); border-color: transparent; color: var(--ok); }
.form-msg.err { background: var(--signal-soft); border-color: transparent; color: var(--ink); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 960px) { .demo .wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; } .demo { padding-block: 84px; } }
@media (max-width: 560px) { form { grid-template-columns: minmax(0, 1fr); padding: 22px; } }

/* footer */
footer { padding-block: 48px 56px; font-size: 13.5px; color: var(--ink-3); border-top: 1px solid var(--line); background: var(--bg); }
footer .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 40px; }
footer .legal { display: flex; gap: 6px 20px; flex-wrap: wrap; grid-column: 1 / -1; padding-bottom: 18px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
footer a { color: var(--ink-2); text-decoration: none; }
footer a:hover { color: var(--ink); text-decoration: underline; }
footer b { color: var(--ink); font-weight: 600; }
@media (max-width: 700px) { footer .wrap { grid-template-columns: minmax(0, 1fr); } }

/* load motion: content is visible at rest; it only settles into place */
@keyframes settle { from { transform: translateY(10px); } to { transform: none; } }
.hero-copy, .stage { animation: settle .7s cubic-bezier(.2,.7,.2,1) both; }
.stage { animation-delay: .08s; }

/* legal and simple pages */
.page { padding-block: 72px 96px; }
.page .wrap { max-width: 800px; }
.page h1 { font-size: clamp(38px, 5.5vw, 56px); margin: 18px 0 10px; }
.page .meta { color: var(--ink-3); font-size: 14px; font-family: var(--mono); }
.page .review { margin: 28px 0 8px; padding: 14px 18px; border-radius: 12px; background: var(--warn-bg); color: var(--warn); font-size: 14.5px; }
.page h2 { font-size: 24px; letter-spacing: -0.025em; margin: 48px 0 12px; padding-top: 24px; border-top: 1px solid var(--line); }
.page p, .page li { color: var(--ink-2); max-width: 68ch; }
.page p + p { margin-top: 12px; }
.page a { color: var(--ink); }
.page ul { padding-left: 20px; display: grid; gap: 8px; margin: 12px 0 0; }
.page table { border-collapse: collapse; width: 100%; font-size: 15px; margin-top: 14px; }
.page th, .page td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.page th { font: 500 11px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.page nav.legalnav { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; }
.page nav.legalnav a { font-size: 13.5px; text-decoration: none; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); }
.page nav.legalnav a:hover { border-color: var(--ink-3); color: var(--ink); }

/* refinements */
.hero h1 .quiet { display: block; }
.proof .cap .eyebrow { display: block; line-height: 1.5; }
.proof .cap .eyebrow::before { display: inline-block; margin-right: 10px; transform: translateY(-2px); }
.proof .wrap { grid-template-columns: minmax(0, 1.5fr) repeat(5, minmax(0, 1fr)); }
.tier.main { border-color: var(--navy-line); }
.step.you { box-shadow: inset 0 0 0 1px var(--navy-line); }
@media (max-width: 1000px) { .proof .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- multi-agent platform components ---- */
.hero .ctas .btn-ghost .arrow { display: none; }

/* shared agent loop */
.loop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.loop-step { padding: 28px 28px 8px 0; display: grid; gap: 10px; align-content: start; position: relative; }
.loop-step + .loop-step { padding-left: 28px; border-left: 1px solid var(--line); }
.loop-step .k { font: 500 12px var(--mono); color: var(--ink-3); letter-spacing: 0.04em; }
.loop-step h3 { font-size: 22px; letter-spacing: -0.02em; }
.loop-step p { color: var(--ink-2); font-size: 15px; }
.loop-step.you h3 { color: var(--signal); }
@media (max-width: 900px) { .loop { grid-template-columns: repeat(2, minmax(0, 1fr)); } .loop-step:nth-child(3) { padding-left: 0; border-left: 0; } .loop-step:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 560px) { .loop { grid-template-columns: minmax(0, 1fr); } .loop-step, .loop-step + .loop-step { padding: 22px 0 6px; border-left: 0; } .loop-step + .loop-step { border-top: 1px solid var(--line); } }

/* agent catalogue */
.catalogue { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
.stage-col { display: grid; gap: 12px; align-content: start; }
.stage-col > h3 { font: 500 12px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 12px; border-bottom: 1px solid var(--line-2); display: flex; gap: 10px; }
.stage-col > h3 span { color: var(--ink); }
.agent { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px 20px 18px; display: grid; gap: 10px; align-content: start; }
.agent .top-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.agent h4 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.agent p { color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.agent .meta-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.status { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; font: 500 11px/1 var(--mono); letter-spacing: 0.02em; white-space: nowrap; border: 1px solid var(--line); color: var(--ink-3); background: var(--bg); }
.status.live { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.status.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tagline { font: 400 11.5px/1 var(--mono); color: var(--ink-3); border: 1px dashed var(--line-2); border-radius: 999px; padding: 4px 8px; }
.agent.featured { background: var(--navy); border-color: var(--navy-line); box-shadow: var(--shadow-lg); }
.agent.featured h4 { color: var(--on-navy); }
.agent.featured p { color: var(--on-navy-2); }
.agent.featured .tagline { color: var(--on-navy-2); border-color: var(--navy-line); }
.agent.featured .status.live { background: rgba(95, 209, 154, 0.14); color: #7BE0AE; }
.agent.featured a { color: var(--on-navy); }
.cat-note { margin-top: 24px; font-size: 13.5px; color: var(--ink-3); }
@media (max-width: 1080px) { .catalogue { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .catalogue { grid-template-columns: minmax(0, 1fr); } }

/* Brenda feature */
.feature-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; margin-bottom: 40px; }
.badge-live { display: inline-flex; align-items: center; gap: 8px; font: 500 12px var(--mono); color: var(--ok); background: var(--ok-bg); border-radius: 999px; padding: 6px 12px; }
.badge-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.proof.inset { border: 1px solid var(--line); border-radius: 14px; margin-top: 16px; }
.proof.inset .wrap { padding-left: 24px; padding-right: 24px; max-width: none; }
@media (max-width: 700px) { .feature-head { grid-template-columns: minmax(0, 1fr); } }

/* pricing: suites + singles */
.price-label { font: 500 12px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; }
.price-label + .tiers { margin-bottom: 40px; }
.tier .incl { font-size: 13.5px; color: var(--ink-3); }
.tier.main .incl { color: var(--on-navy-2); }
.tier .was { font: 400 12.5px var(--mono); color: var(--ink-3); }
.tier.main .was { color: var(--on-navy-2); }
.singles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.single { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 26px 28px; display: grid; gap: 12px; align-content: start; }
.single .row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.single .price { font-size: 38px; }
.single p { color: var(--ink-2); font-size: 14.5px; }
.allow { list-style: none; margin: 4px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; gap: 6px; font-size: 13.5px; color: var(--ink-2); }
.allow li { display: flex; justify-content: space-between; gap: 12px; }
.allow li span:last-child { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); text-align: right; }
.price-foot { margin-top: 18px; font-size: 13px; color: var(--ink-3); }
@media (max-width: 860px) { .singles { grid-template-columns: minmax(0, 1fr); } }

/* form: agent interest */
fieldset.interest { grid-column: 1 / -1; border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
fieldset.interest legend { font-size: 13.5px; font-weight: 500; padding: 0; margin-bottom: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { display: inline-flex; grid-template-columns: none; align-items: center; gap: 8px; font-weight: 400; font-size: 13.5px; color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 7px 12px; cursor: pointer; }
.chips input { width: 14px; height: 14px; accent-color: var(--ink); }
.chips label:has(input:checked) { border-color: var(--ink); color: var(--ink); background: var(--mist); }
.rules.spaced { margin-top: 56px; }
.hero { border-bottom: 1px solid var(--line); }

/* ---- detail pages (agents, pricing, security, about) ---- */
.sub-hero { position: relative; padding-block: 72px 56px; border-bottom: 1px solid var(--line); overflow: hidden; }
.sub-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(var(--grid-dot) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(to bottom, #000, transparent 80%); mask-image: linear-gradient(to bottom, #000, transparent 80%); pointer-events: none; }
.sub-hero .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 56px; align-items: end; }
.sub-hero h1 { font-size: clamp(38px, 5.2vw, 64px); margin-top: 18px; }
.sub-hero .lead { margin-top: 22px; font-size: 18.5px; color: var(--ink-2); max-width: 60ch; }
.sub-hero .ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px; }
.crumbs { font: 400 12.5px var(--mono); color: var(--ink-3); }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.factsheet { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); display: grid; }
.factsheet div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--line); font-size: 14px; }
.factsheet div:last-child { border-bottom: 0; }
.factsheet dt { font: 500 11px/1.9 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.factsheet dd { margin: 0; color: var(--ink); }
.factsheet .big { font-size: 26px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.factsheet .big small { font-size: 13px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; }
@media (max-width: 900px) { .sub-hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 36px; } }

.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); counter-reset: flow; }
.flow li { display: grid; grid-template-columns: 64px minmax(0, 0.32fr) minmax(0, 0.68fr); gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.flow li::before { counter-increment: flow; content: counter(flow, decimal-leading-zero); font: 500 12px var(--mono); color: var(--ink-3); }
.flow h3 { font-size: 19px; }
.flow p { color: var(--ink-2); font-size: 15.5px; }
.flow li.soon h3::after { content: "Q1 2027"; margin-left: 10px; font: 500 10.5px var(--mono); padding: 3px 7px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-3); vertical-align: middle; }
@media (max-width: 760px) { .flow li { grid-template-columns: 40px minmax(0, 1fr); gap: 6px 14px; } .flow li p { grid-column: 2; } }

.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.col-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 24px; display: grid; gap: 14px; align-content: start; }
.col-card h3 { font-size: 16px; display: flex; align-items: center; gap: 10px; }
.col-card h3 .k { font: 500 11px var(--mono); color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; }
.col-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.col-card li { position: relative; padding-left: 18px; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.col-card li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 1.5px; background: var(--ink-3); }
.col-card.decide { background: var(--navy); border-color: var(--navy-line); }
.col-card.decide h3, .col-card.decide li { color: var(--on-navy); }
.col-card.decide .k { color: var(--signal); }
.col-card.decide li::before { background: var(--signal); }
@media (max-width: 900px) { .three { grid-template-columns: minmax(0, 1fr); } }

.split2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
@media (max-width: 900px) { .split2 { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
.who { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--line); display: grid; }
.who li { padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 15.5px; }
.stats { display: grid; gap: 0; border-top: 1px solid var(--line); }
.stat { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.stat strong { font-weight: 500; font-size: 30px; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat span { color: var(--ink-2); font-size: 14.5px; }
.stat small { display: block; margin-top: 4px; font: 400 11.5px var(--mono); color: var(--ink-3); }

.sample { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); overflow: hidden; min-width: 0; }
.sample .panel-head { background: var(--mist); }
.sample ol { list-style: none; margin: 0; padding: 6px 0; }
.sample li { display: grid; grid-template-columns: minmax(0, 0.36fr) minmax(0, 0.64fr); gap: 14px; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.sample li:last-child { border-bottom: 0; }
.sample li .a { font: 400 12.5px/1.6 var(--mono); color: var(--ink-3); overflow-wrap: anywhere; }
.sample li .b { color: var(--ink); }
.sample li .b em { font-style: normal; color: var(--ink-3); }
.sample .cap { padding: 10px 16px; font-size: 12.5px; color: var(--ink-3); border-top: 1px solid var(--line); }

.related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.related a.agent { text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease; }
.related a.agent:hover { border-color: var(--ink-3); transform: translateY(-2px); }
@media (max-width: 900px) { .related { grid-template-columns: minmax(0, 1fr); } }
a.agent { text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease; }
a.agent:hover { border-color: var(--ink-3); transform: translateY(-2px); }
a.agent.featured:hover { border-color: var(--on-navy-2); }
.agent .more { font-size: 13px; color: var(--ink); font-weight: 500; }
.agent.featured .more { color: var(--on-navy); }
.agent .price-tag { font: 500 12px var(--mono); color: var(--ink-2); }
.agent.featured .price-tag { color: var(--on-navy-2); }

.data { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 640px; }
.data th, .data td { text-align: left; vertical-align: top; padding: 13px 14px 13px 0; border-bottom: 1px solid var(--line); }
.data th { font: 500 11px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.data td { color: var(--ink-2); }
.data td:first-child { color: var(--ink); font-weight: 500; }
.data td.num { font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.data tr.band td { padding-top: 26px; font: 500 11px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); border-bottom-color: var(--line-2); }
.data a { color: var(--ink); text-decoration: none; }
.data a:hover { text-decoration: underline; }
.band-chip { display: inline-block; font: 500 11px var(--mono); padding: 3px 8px; border-radius: 999px; background: var(--mist); color: var(--ink-2); border: 1px solid var(--line); }

.bounds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bound { border-radius: 14px; padding: 24px; border: 1px solid var(--line); background: var(--surface); display: grid; gap: 12px; align-content: start; }
.bound h3 { font-size: 17px; display: flex; gap: 10px; align-items: center; }
.bound h3::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); }
.bound.care h3::before { background: var(--warn); }
.bound.no h3::before { background: var(--signal); }
.bound ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; color: var(--ink-2); font-size: 14.5px; }
@media (max-width: 900px) { .bounds { grid-template-columns: minmax(0, 1fr); } }

.prose { max-width: 70ch; display: grid; gap: 14px; }
.prose p { color: var(--ink-2); font-size: 16.5px; }
.prose h3 { font-size: 20px; margin-top: 18px; }
.cta-band { background: var(--navy); color: var(--on-navy); border-radius: 18px; padding: 44px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.cta-band h2 { color: var(--on-navy); font-size: clamp(26px, 3vw, 36px); }
.cta-band p { color: var(--on-navy-2); margin-top: 10px; }
.cta-band .btn { background: var(--on-navy); color: var(--navy); }
@media (max-width: 760px) { .cta-band { grid-template-columns: minmax(0, 1fr); padding: 28px; } }
[data-gap="48"] { margin-top: 48px; } [data-gap="18"] { margin-top: 18px; }
.singles.bands { grid-template-columns: repeat(2, minmax(0, 1fr)); } .singles.bands .single .price { font-size: 32px; } .allow a { color: var(--ink); text-decoration: none; } .allow a:hover { text-decoration: underline; }
.tier li a { color: inherit; text-decoration: none; } .tier li a:hover { text-decoration: underline; }

/* ---- avatars ---- */
.av { display: block; flex: none; border-radius: 24%; object-fit: cover; background: var(--mist); }
.av-xs { width: 28px; height: 28px; } .av-sm { width: 40px; height: 40px; } .av-md { width: 56px; height: 56px; } .av-lg { width: 104px; height: 104px; box-shadow: var(--shadow-lg); }
.av-live { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px #2FB57A; }

/* ---- header menu (mega menu) ---- */
.top nav { position: static; }
.navmenu { position: static; }
.navmenu > summary { list-style: none; cursor: pointer; color: var(--ink-2); font-size: 14.5px; padding: 8px 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; }
.navmenu > summary::-webkit-details-marker { display: none; }
.navmenu > summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s ease; }
.navmenu[open] > summary { color: var(--ink); background: var(--mist); }
.navmenu[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.navmenu > summary:hover { color: var(--ink); background: var(--mist); }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 24px 48px -24px rgba(11, 22, 38, 0.25); z-index: 45; }
.mega-inner { max-width: 1200px; margin: 0 auto; padding: 28px max(24px, env(safe-area-inset-right, 0px)) 32px max(24px, env(safe-area-inset-left, 0px)); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 0.9fr); gap: 28px; }
.mega h5 { margin: 0 0 12px; font: 500 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.mega-col { display: grid; gap: 4px; align-content: start; }
.mega-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 10px; margin: 0 -10px; border-radius: 12px; text-decoration: none; color: var(--ink); align-items: start; }
.mega-item:hover, .mega-item:focus-visible { background: var(--mist); }
.mega-item b { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-weight: 500; font-size: 14.5px; letter-spacing: -0.01em; }
.mega-item small { display: block; color: var(--ink-3); font-size: 12.5px; line-height: 1.4; margin-top: 2px; }
.mega-item .status { height: 18px; font-size: 10px; padding: 0 7px; }
.mega-side { border-left: 1px solid var(--line); padding-left: 28px; display: grid; gap: 4px; align-content: start; }
.mega-side a.plain { display: block; padding: 9px 0; color: var(--ink); text-decoration: none; font-size: 14.5px; border-bottom: 1px solid var(--line); }
.mega-side a.plain span { display: block; color: var(--ink-3); font-size: 12.5px; }
.mega-side a.plain:hover { color: var(--signal); }
.mega .mobile-only { display: none; }
@media (max-width: 1080px) { .mega-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mega-side { border-left: 0; padding-left: 0; grid-column: 1 / -1; } }
@media (max-width: 820px) {
  .navmenu > summary { padding: 8px 10px; color: var(--ink); }
  .mega { max-height: calc(100vh - 64px - env(safe-area-inset-top, 0px)); overflow-y: auto; }
  .mega-inner { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 18px; }
  .mega .mobile-only { display: block; }
}

/* ---- announcement pill ---- */
.announce { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border: 1px solid var(--line-2); border-radius: 999px; text-decoration: none; color: var(--ink-2); font-size: 13.5px; background: var(--bg); transition: border-color .15s ease; }
.announce:hover { border-color: var(--ink-3); color: var(--ink); }
.announce .new { background: var(--signal); color: #fff; font: 500 11px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; }
.announce .av { width: 22px; height: 22px; }

/* ---- hero with agent team panel ---- */
.hero.v3 { padding-block: 80px 96px; }
.hero.v3 .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; align-items: center; }
.hero.v3 h1 { font-size: clamp(42px, 5.4vw, 72px); margin-top: 24px; }
@media (max-width: 1000px) { .hero.v3 .wrap { grid-template-columns: minmax(0, 1fr); } }
.team { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden; }
.team .panel-head { background: var(--mist); }
.team ol { list-style: none; margin: 0; padding: 4px 0; }
.team li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.team li:last-child { border-bottom: 0; }
.team li a { text-decoration: none; color: inherit; display: contents; }
.team b { font-weight: 500; font-size: 14.5px; display: block; letter-spacing: -0.01em; }
.team .line { display: block; font: 400 12px/1.5 var(--mono); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team li.active { background: linear-gradient(to right, var(--ok-bg), transparent 70%); }
.team li.active .line { color: var(--ink-2); }
.team .count { font: 500 12px var(--mono); color: var(--ink-3); text-align: right; white-space: nowrap; }
.team .foot-note { padding: 10px 18px; font-size: 12px; color: var(--ink-3); border-top: 1px solid var(--line); }
.typing::after { content: "▍"; color: var(--signal); animation: blink 1.1s steps(1) infinite; margin-left: 2px; }
@keyframes blink { 50% { opacity: 0; } }

/* ---- big stat band ---- */
.bigstats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bigstats .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bigstats .s { padding: 34px 24px 34px 0; display: grid; gap: 8px; }
.bigstats .s + .s { padding-left: 24px; border-left: 1px solid var(--line); }
.bigstats strong { font-weight: 500; font-size: clamp(36px, 4vw, 52px); letter-spacing: -0.045em; line-height: 1; }
.bigstats strong em { font-style: normal; color: var(--signal); }
.bigstats span { color: var(--ink-2); font-size: 14px; max-width: 26ch; }
@media (max-width: 860px) { .bigstats .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bigstats .s:nth-child(3) { padding-left: 0; border-left: 0; } .bigstats .s:nth-child(n+3) { border-top: 1px solid var(--line); } }

/* ---- dark network band with flow map ---- */
.night { background: #070D18; color: #EAF0F8; position: relative; overflow: hidden; padding-block: 112px; }
.night::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(160, 185, 220, 0.12) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%); pointer-events: none; }
.night .wrap { position: relative; }
.night h2 { color: #F2F5FA; }
.night .eyebrow { color: #8C9BB4; }
.night .lead { color: #A6B3C8; }
.flowmap { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1.35fr) 56px minmax(0, 1fr) 56px minmax(0, 0.75fr); align-items: center; margin-top: 8px; }
.fm-col { display: grid; gap: 10px; }
.fm-h { font: 500 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: #8C9BB4; margin-bottom: 4px; }
.fm-node { border: 1px solid #22324D; background: rgba(17, 27, 44, 0.85); border-radius: 12px; padding: 12px 14px; font-size: 14px; font-weight: 500; color: #EAF0F8; }
.fm-node small { display: block; font: 400 11.5px/1.4 var(--mono); color: #8C9BB4; margin-top: 3px; }
.fm-core { border: 1px solid #3A4E73; border-radius: 18px; padding: 20px; background: linear-gradient(180deg, rgba(23, 38, 66, 0.95), rgba(11, 20, 36, 0.95)); box-shadow: 0 0 0 6px rgba(232, 84, 28, 0.06), 0 30px 60px -20px rgba(0, 0, 0, 0.6); display: grid; gap: 14px; }
.fm-avatars { display: flex; flex-wrap: wrap; gap: 8px; }
.fm-avatars .av { width: 38px; height: 38px; }
.fm-layers { display: grid; gap: 6px; }
.fm-layers span { display: flex; justify-content: space-between; align-items: center; font: 400 12.5px var(--mono); color: #C9D4E5; border: 1px solid #22324D; border-radius: 8px; padding: 7px 10px; background: rgba(7, 13, 24, 0.6); }
.fm-layers span::after { content: "on"; font-size: 10.5px; color: #7BE0AE; }
.fm-col.you .fm-node { border-color: rgba(232, 84, 28, 0.5); }
.fm-link { height: 2px; margin: 0 6px; position: relative; background-image: linear-gradient(to right, #3A4E73 50%, transparent 50%); background-size: 8px 2px; }
.fm-link::after { content: ""; position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: #FF7A45; box-shadow: 0 0 10px #FF7A45; animation: travel 2.4s linear infinite; }
.fm-link.d2::after { animation-delay: .8s; } .fm-link.d3::after { animation-delay: 1.6s; }
@keyframes travel { from { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { left: calc(100% - 8px); opacity: 0; } }
@media (max-width: 1000px) {
  .flowmap { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fm-link { width: 2px; height: 40px; margin: 6px auto; background-image: linear-gradient(to bottom, #3A4E73 50%, transparent 50%); background-size: 2px 8px; }
  .fm-link::after { left: -3px; animation-name: travel-v; }
  @keyframes travel-v { from { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { top: calc(100% - 8px); opacity: 0; } }
}

/* ---- agent cards and pages with avatars ---- */
.agent .who-row { display: flex; gap: 12px; align-items: center; }
.agent .who-row h4 { flex: 1; }
.sub-hero .id-row { display: flex; align-items: center; gap: 22px; margin-top: 18px; }
.sub-hero .id-row h1 { margin-top: 0; }
@media (max-width: 600px) { .sub-hero .id-row { flex-direction: column; align-items: flex-start; gap: 14px; } .av-lg { width: 80px; height: 80px; } }
.data .agent-cell { display: flex; align-items: center; gap: 10px; }

/* ---- footer directory ---- */
footer .dir { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(4, minmax(0, 1fr)); gap: 28px; padding-bottom: 28px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
footer .dir h6 { margin: 0 0 10px; font: 500 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
footer .dir ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
footer .dir .brand-col p { margin-top: 10px; max-width: 30ch; }
footer .dir .brand-col .btn { margin-top: 14px; height: 38px; font-size: 14px; color: var(--bg); }
@media (max-width: 900px) { footer .dir { grid-template-columns: repeat(2, minmax(0, 1fr)); } footer .dir .brand-col { grid-column: 1 / -1; } }
.spaced-bottom { height: 40px; }
.three.spaced-top { margin-top: 48px; }
.p-mute { background: var(--mist); color: var(--ink-3); }
.srcline { font: 400 11.5px/1.6 var(--mono); color: var(--ink-3); padding-top: 12px; }
.agent-hero { padding-bottom: 0; border-bottom: 0; }
.agent-hero .stage-wrap { display: block; margin-top: 56px; }
.agent-hero .announce { margin-bottom: 4px; }
/* product sub-navigation (agent sites) */
.prodbar { position: sticky; top: calc(64px + env(safe-area-inset-top, 0px)); z-index: 35; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.prodbar .wrap { display: flex; align-items: center; gap: 20px; height: 52px; }
.prodbar .prod-id { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; }
.prodbar .prod-id b { font-weight: 600; letter-spacing: -0.01em; }
.prodbar nav { display: flex; gap: 2px; margin-left: auto; overflow-x: auto; }
.prodbar nav a { font-size: 13.5px; color: var(--ink-2); text-decoration: none; padding: 6px 10px; border-radius: 999px; white-space: nowrap; }
.prodbar nav a:hover { color: var(--ink); background: var(--mist); }
.prodbar .btn { height: 34px; font-size: 13.5px; padding: 0 14px; }
@media (max-width: 760px) { .prodbar nav { display: none; } .prodbar .btn { margin-left: auto; } }
.agent-page section[id] { scroll-margin-top: 130px; }
section[id] { scroll-margin-top: 128px; }
.mega-side a.plain.mobile-only { display: none; }
@media (max-width: 820px) { .mega-side a.plain.mobile-only { display: block; } }
.agent .meta-row { align-items: center; gap: 10px; }
@media (max-width: 480px) {
  .top .wrap { gap: 8px; }
  .top nav { gap: 0; }
  .top .btn { margin-left: 2px; padding: 0 12px; font-size: 13px; height: 34px; }
  .mark { font-size: 16px; }
  .mark small { display: none; }
}
/* name-your-agent signature card */
.block.naming { border-top: 1px solid var(--line); }
.sigcard { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; }
.sig-top { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--line); background: var(--mist); }
.sig-top b { display: block; font-weight: 600; font-size: 17px; }
.sig-top span:not(.status) { display: block; font-size: 13px; color: var(--ink-3); }
.sig-top .status { margin-left: auto; }
.sig-body { padding: 20px; display: grid; gap: 14px; font-size: 14.5px; color: var(--ink-2); }
.sig-body .sig { color: var(--ink); line-height: 1.5; padding-left: 12px; border-left: 2px solid var(--line-2); }
.sig-body .sig-note { font: 400 12px var(--mono); color: var(--ink-3); background: var(--mist); border-radius: 8px; padding: 8px 10px; }


/* ---- 2026-10 UI uplift: premium blue/white/orange direction ---- */
:root {
  --bg: #F7FAFF;
  --mist: #EEF5FF;
  --surface: rgba(255,255,255,0.92);
  --ink: #0E2452;
  --ink-2: #4D6287;
  --ink-3: #7D8FAD;
  --line: #DCE8F8;
  --line-2: #C6D8F3;
  --navy: #0F2E6E;
  --navy-2: #204CA3;
  --on-navy: #F5F9FF;
  --on-navy-2: #B8C8E8;
  --navy-line: #345EA8;
  --signal: #FF7A1F;
  --signal-soft: #FFF2E8;
  --ok: #14A44D;
  --ok-bg: #E9FAF0;
  --info: #2F74FF;
  --info-bg: #ECF3FF;
  --warn: #B76B0D;
  --warn-bg: #FFF6E5;
  --shadow: 0 10px 30px -18px rgba(27, 67, 140, 0.28), 0 2px 8px rgba(8, 28, 72, 0.06);
  --shadow-lg: 0 22px 60px -24px rgba(18, 53, 120, 0.32), 0 8px 24px rgba(8, 28, 72, 0.10);
  --grid-dot: rgba(47, 116, 255, 0.14);
  --r: 18px;
}
body { background: linear-gradient(180deg, #F6FAFF 0%, #FFFFFF 28%, #F7FAFF 100%); }
a { text-decoration-color: rgba(47, 116, 255, 0.28); }
.top { background: color-mix(in srgb, #ffffff 86%, transparent); border-bottom-color: rgba(174, 199, 238, 0.7); box-shadow: 0 4px 24px rgba(15, 46, 110, 0.05); }
.top .wrap { height: 76px; gap: 36px; }
.mark { gap: 12px; font-size: 0; }
.mark-logo { width: 38px; height: 38px; border-radius: 12px; box-shadow: 0 8px 20px rgba(47, 116, 255, 0.18); flex: none; }
.mark-word { font: 600 27px/1 var(--sans); letter-spacing: -0.035em; color: var(--navy); }
.mark-word span { color: var(--signal); }
.top nav > a:not(.btn), .navmenu > summary { color: var(--navy); font-weight: 500; }
.top nav > a:not(.btn):hover, .navmenu > summary:hover { background: rgba(47, 116, 255, 0.08); color: var(--navy); }
.btn { border-radius: 999px; box-shadow: 0 8px 18px rgba(26, 78, 170, 0.12); }
.btn-primary { background: linear-gradient(135deg, #1B4EC9 0%, #2F74FF 58%, #FF7A1F 160%); color: #fff; box-shadow: 0 14px 24px rgba(39, 98, 212, 0.22); }
.btn-primary:hover { background: linear-gradient(135deg, #143EAA 0%, #2969EC 58%, #FF7A1F 160%); }
.btn-ghost { background: rgba(255,255,255,0.84); border-color: rgba(47, 116, 255, 0.15); box-shadow: 0 8px 18px rgba(15, 46, 110, 0.05); }
.hero { padding-block: 94px 10px; }
.hero::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 520px; background: radial-gradient(circle at 12% 16%, rgba(47,116,255,0.20), transparent 34%), radial-gradient(circle at 88% 8%, rgba(255,122,31,0.12), transparent 26%), linear-gradient(180deg, rgba(230,241,255,0.8), rgba(255,255,255,0)); pointer-events: none; }
.hero-copy, .team, .catalogue .agent, .panel, .stat-stack, .proof .cap, .proof .kpi, .browser, .pricing-card, .agent-stage, .note, .sample, .page-box, .factsheet { position: relative; }
.hero .announce { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; background: rgba(255,255,255,0.9); border: 1px solid rgba(47, 116, 255, 0.12); border-radius: 999px; box-shadow: var(--shadow); text-decoration: none; }
.hero .announce .new { background: linear-gradient(135deg, #FF9A48, #FF6B1A); color: #fff; border-radius: 999px; padding: 4px 8px; font: 600 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.hero h1 { max-width: 12.2ch; }
.hero h1 .quiet { color: #2F74FF; }
.hero .lead { font-size: 19px; max-width: 60ch; color: var(--ink-2); }
.hero .fine { color: var(--ink-3); }
.team, .stage, .catalogue .agent, .panel, .factsheet, .sample, .quote, .mail, .browser, .integrations, .proof .cap, .proof .kpi, .day, .stat-stack { background: rgba(255,255,255,0.76); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 22px; border-color: rgba(164, 191, 232, 0.55); box-shadow: var(--shadow); }
.team { border: 1px solid rgba(164, 191, 232, 0.55); overflow: hidden; }
.stage { padding: 32px 32px 8px; border-radius: 28px; border-bottom: 1px solid rgba(164, 191, 232, 0.55); }
.stage::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(47,116,255,0.06), rgba(255,255,255,0)); border-radius: inherit; pointer-events: none; }
.stage-tag { background: linear-gradient(180deg, #fff, #f5f8ff); box-shadow: var(--shadow); }
.panel-head, .mail .fields div, .browser-bar, .tabs, .prodbar, .sig-top { background: linear-gradient(180deg, rgba(247,250,255,0.95), rgba(240,246,255,0.8)); }
.team li, .who li, .flow li, .data th, .data td, .factsheet div, .sample li, .browser th, .browser td, .mail .fields div, .log li { border-bottom-color: rgba(164, 191, 232, 0.42); }
.catalogue { gap: 24px; }
.catalogue .agent { border: 1px solid rgba(164, 191, 232, 0.55); padding: 18px 18px 20px; border-radius: 24px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.catalogue .agent:hover, .who li:hover, .team li:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: rgba(47, 116, 255, 0.34); }
.catalogue .agent.featured { background: linear-gradient(180deg, rgba(47,116,255,0.08), rgba(255,255,255,0.92)); }
.bigstats { border-top-color: rgba(164, 191, 232, 0.4); border-bottom-color: rgba(164, 191, 232, 0.4); background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(245,249,255,0.88)); }
.bigstats .s strong { color: var(--navy); }
.status { border-radius: 999px; padding: 6px 10px; background: rgba(47,116,255,0.09); color: var(--navy); border: 1px solid rgba(47,116,255,0.10); }
.status.live { background: rgba(20,164,77,0.10); color: #0D7A37; border-color: rgba(20,164,77,0.14); }
.price-tag { color: #FF7A1F; font-weight: 500; }
.av { background: radial-gradient(circle at 35% 30%, #fff, #eaf3ff 68%, #dceaff 100%); border: 1px solid rgba(47,116,255,0.12); box-shadow: 0 14px 26px rgba(20, 64, 153, 0.14); border-radius: 24px; padding: 4px; object-fit: contain; }
.av-sm { width: 56px; height: 56px; border-radius: 18px; }
.av-md { width: 92px; height: 92px; border-radius: 22px; }
.av-live { box-shadow: 0 0 0 4px rgba(20,164,77,0.12), 0 14px 26px rgba(20, 64, 153, 0.14); }
.who-row { align-items: center; gap: 14px; }
.sec-head.split, .feature-head { align-items: end; }
.sec-head .lead { color: var(--ink-2); }
.eyebrow { color: #2F74FF; }
.eyebrow::before { width: 8px; height: 8px; border-radius: 2px; background: linear-gradient(135deg, #2F74FF, #FF7A1F); }
.proof .wrap { gap: 14px; padding-block: 10px; }
.proof .wrap > * { border-right: 0 !important; border: 1px solid rgba(164, 191, 232, 0.45); border-radius: 22px; margin: 6px 0; }
footer { background: linear-gradient(180deg, rgba(244,248,255,0.65), rgba(255,255,255,0.96)); }
footer .legal, footer .dir { border-bottom-color: rgba(164, 191, 232, 0.38); }
@media (max-width: 960px) { .top .wrap { height: 72px; } .mark-word { font-size: 24px; } .hero h1 { max-width: none; } .stage { padding: 22px 18px 8px; } }
@media (max-width: 640px) { .mark-word { font-size: 22px; } .mark-logo { width: 34px; height: 34px; } .top .wrap { gap: 16px; } .hero { padding-top: 72px; } .catalogue .agent { padding: 16px; } }

@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #071225; --mist: #0B1831; --surface: rgba(14,26,51,0.88); --ink: #F3F7FF; --ink-2: #C3D2EE; --ink-3: #93A6C9; --line: #1B2C4E; --line-2: #28406B; --navy: #163B84; --navy-2: #2F74FF; --on-navy: #F7FBFF; --on-navy-2: #B5C6E6; --navy-line: #355C9E; --signal: #FF8E3C; --signal-soft: #2A190E; --grid-dot: rgba(120,170,255,0.15);
} body { background: linear-gradient(180deg, #071225, #0A162B); } .top { background: color-mix(in srgb, #081426 80%, transparent); } .btn-ghost { background: rgba(14,26,51,0.74); } .team, .stage, .catalogue .agent, .panel, .factsheet, .sample, .quote, .mail, .browser, .proof .cap, .proof .kpi, .day, .stat-stack { background: rgba(11,24,49,0.76); } .panel-head, .mail .fields div, .browser-bar, .tabs, .prodbar, .sig-top { background: linear-gradient(180deg, rgba(11,24,49,0.96), rgba(13,29,58,0.85)); } .mark-word { color: #F5F9FF; } }


/* Final concept alignment, October 2026 — preserves the installed Geist faces */
:root {--navy:#0d2552;--signal:#ff612c;--info:#2879ff;--mist:#f0f6ff;--ink:#10264e;--r:20px;}
.top {background:#fff!important; border-bottom:1px solid #e7edf8!important;}
.top .wrap {height:76px;max-width:1420px;}
.mark {display:inline-flex;align-items:center;flex-shrink:0;padding:0;line-height:1;font-size:initial;}
.mark .brand-logo {display:block;width:clamp(185px,22vw,290px);height:auto;max-height:56px;object-fit:contain;}
.top nav > a:not(.btn) {color:#10254a;font-weight:600;}
.top .btn-primary {background:#fb592d;color:#fff;border-color:#fb592d;box-shadow:0 8px 22px #f75b2a38;}
.top .btn-primary:hover {background:#e54c22;}
.hero.hero-redesign {background: radial-gradient(ellipse at 70% 42%,#245ca2 0%,#0c2c60 40%,#081c3c 77%,#08162d 100%);padding:75px 0 145px;border-bottom:0;isolation:isolate;}
.hero.hero-redesign::before {background-image:radial-gradient(#81b7ff36 1px,transparent 1px);mask-image:linear-gradient(to bottom,#000,transparent 88%);-webkit-mask-image:linear-gradient(to bottom,#000,transparent 88%);}
.hero.hero-redesign::after {z-index:-1;height:auto;inset:0;background:linear-gradient(125deg,transparent 54%,#163b72a6 54% 66%,transparent 66%),radial-gradient(circle at 90% 42%,#639be63d,transparent 42%);}
.hero.hero-redesign .wrap {max-width:1420px;grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr);gap:16px;align-items:center;}
.hero.hero-redesign .hero-copy {position:relative;z-index:3;max-width:none;}
.hero.hero-redesign h1 {font-size:clamp(42px,4.7vw,73px);line-height:1.09;letter-spacing:-.046em;max-width:15ch;color:#fff;margin-top:25px;}
.hero.hero-redesign h1 .quiet {display:block;color:#51a4ff;}
.hero.hero-redesign .lead {color:#c9d8ed;font-size:clamp(16px,1.45vw,19px);line-height:1.63;max-width:57ch;}
.hero.hero-redesign .fine {color:#a3bddd;font-size:13px;max-width:67ch;}
.hero.hero-redesign .btn-primary {background:#ff602f!important;color:#fff!important;box-shadow:0 13px 31px #ff62303a;border:0;}
.hero.hero-redesign .btn-ghost {border-color:#66b4ff;background:#0b2447;color:#fff;box-shadow:none;}
.hero.hero-redesign .announce {background:#113869;color:#dceaff;border-color:#3d6b9b;max-width:100%;white-space:normal;}
.hero.hero-redesign .announce .new {background:#ff642c;}
.hero-art {position:relative;min-height:550px;width:100%;align-self:stretch;pointer-events:none;}
.hero-art .hero-bot {position:absolute;height:auto;object-fit:contain;filter:drop-shadow(0 24px 28px #03102768);}
.hero-bot-center {width:71%;left:21%;bottom:-64px;z-index:3;}
.hero-bot-left {width:50%;left:-6%;bottom:6px;z-index:2;transform:rotate(-6deg);}
.hero-bot-right {width:46%;right:-8%;bottom:8px;z-index:2;transform:rotate(6deg);}
.hero-capitol {position:absolute;inset:10px 3% 0 21%;opacity:.17;background:radial-gradient(ellipse at 55% 30%,#b1d7ff,transparent 50%),linear-gradient(to top,#a2ccff 0 9%,transparent 9%);clip-path:polygon(0 97%,0 84%,8% 84%,8% 65%,15% 65%,15% 51%,24% 51%,24% 40%,39% 40%,41% 23%,50% 11%,59% 23%,61% 40%,76% 40%,76% 51%,85% 51%,85% 65%,92% 65%,92% 84%,100% 84%,100% 97%);}
.hero-orbit {position:absolute;border:1px solid #76b9ff37;border-radius:50%;left:10%;top:12%;width:78%;aspect-ratio:1;box-shadow:0 0 100px #368cf32a inset;}
.hero-orbit-b {inset:25% 15% auto auto;width:48%;}
.hero-float {position:absolute;z-index:5;background:#ffffffeb;color:#0e2d65;border-radius:15px;padding:10px 15px;font:600 12px/1.3 var(--sans);box-shadow:0 12px 35px #00132c56;border:1px solid #d6e6fb;}
.float-one {left:0;top:15%;}.float-two {right:0;top:35%;}
.agent-highlights {position:relative;z-index:4;margin-top:-110px;}
.agent-highlights .wrap {max-width:1450px;}
.highlight-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;background:#f8fbff;border-radius:26px;padding:14px;box-shadow:0 26px 55px #0b316c24;}
.highlight-card {text-decoration:none;display:grid;grid-template-columns:95px minmax(0,1fr);gap:7px;align-items:center;min-height:165px;padding:16px 13px;border-radius:21px;background:linear-gradient(135deg,#fff,#eaf4ff);border:1px solid #e1eafa;box-shadow:0 8px 20px #1b4c8a0d;position:relative;transition:transform .18s,box-shadow .18s;}
.highlight-card:hover {transform:translateY(-4px);box-shadow:0 14px 30px #1b4c8a25;}
.highlight-card img {width:100%;height:110px;object-fit:contain;}
.highlight-card strong {display:block;font:600 17px/1.22 var(--sans);color:#102855;letter-spacing:-.025em;}
.highlight-card small {display:block;font:400 13px/1.43 var(--sans);color:#506382;margin-top:7px;}
.highlight-card b {position:absolute;right:12px;bottom:10px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#d7e9ff;color:#0d4ba8;}
.lifecycle-intro {padding:68px 0 55px;background:linear-gradient(180deg,#f7fbff,#fff);}
.lifecycle-row {display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:center;}
.lifecycle-row h2 {font-size:clamp(28px,3vw,42px);margin:12px 0 14px;color:#0e234c;}
.lifecycle-row p:not(.eyebrow) {max-width:62ch;color:#506486;}
.lifecycle-steps {display:grid;grid-template-columns:repeat(4,1fr);gap:12px;text-align:center;}
.lifecycle-steps span {display:flex;flex-direction:column;align-items:center;}
.lifecycle-steps b {font-size:33px;font-family:var(--sans);color:#0d376b;font-weight:500;}
.lifecycle-steps strong {font-size:13px;color:#0f2753;}
.lifecycle-steps small {color:#71819d;font-size:12px;line-height:1.3;}
.team-section {padding:44px 0 74px;background:#fff;}
.team-section .wrap {display:grid;grid-template-columns: minmax(0,.65fr) minmax(0,1.35fr);gap:55px;align-items:center;}
.team-section .team-intro h2 {font-size:clamp(30px,3.5vw,50px);margin:16px 0;}
.team-section .team-intro p:last-child {color:#61718d;}
.team-section .team {box-shadow:0 28px 60px #123e8e15;background:#fff;border-radius:24px;}
.team-section .team .av-sm {width:44px;height:44px;border-radius:14px;}
.proof.inset {padding:20px 22px;background:linear-gradient(180deg,#f0f6ff,#f8fbff);border:1px solid #cfdef5;border-radius:26px;}
.proof.inset .wrap {display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:14px!important;padding:0!important;}
.proof.inset .cap {grid-column:1/-1!important;min-height:auto;background:#fff;display:grid;grid-template-columns: minmax(200px,.55fr) minmax(0,1fr);gap:18px;align-items:center;padding:21px 24px;border:1px solid #dbe6f7;border-radius:18px;}
.proof.inset .cap .eyebrow {margin:0;font:500 12px/1.45 var(--mono);letter-spacing:.05em;color:#31578c;white-space:normal;overflow-wrap:normal;}
.proof.inset .cap p:last-child {margin:0;max-width:none;color:#566b8d;font:400 14px/1.6 var(--sans);}
.proof.inset .fig {min-width:0;padding:28px 12px 22px;border:1px solid #dbe6f7;border-radius:18px;background:#fff;min-height:145px;display:flex;flex-direction:column;justify-content:center;}
.proof.inset .fig strong {font-size:clamp(30px,3.4vw,48px);color:#132e60;line-height:1.1;}
.proof.inset .fig span {color:#536d94;font-size:13px;line-height:1.4;margin-top:8px;}
.proof.inset .note {grid-column:1/-1;min-width:0;margin:0;padding:16px 20px;background:#ffffff9e;border:1px solid #dbe6f7;border-radius:16px;color:#657fa5;font-size:13px;}
.catalogue .agent {box-shadow:0 14px 30px #1e5ab014;}
.catalogue .agent .av-md {width:84px;height:84px;border-radius:20px;}
@media (max-width:1150px) { .highlight-grid {grid-template-columns:repeat(2,1fr);} .hero.hero-redesign .wrap {grid-template-columns:1fr 1fr;} .hero.hero-redesign h1 {font-size:clamp(38px,4.5vw,60px);} .hero-art {min-height:460px;} }
@media (max-width:900px) { .hero.hero-redesign .wrap {grid-template-columns:1fr;}.hero-art {min-height:440px;max-width:600px;margin:auto;} .hero.hero-redesign {padding-bottom:145px;} .lifecycle-row {grid-template-columns:1fr;gap:24px;} .team-section .wrap {grid-template-columns:1fr;gap:25px;} .top .wrap {height:70px;} }
@media (max-width:620px) { .hero.hero-redesign {padding:48px 0 115px;} .hero.hero-redesign h1 {font-size:clamp(37px,10vw,54px);} .hero-art {min-height:315px;} .hero-bot-center {width:73%;left:16%;bottom:-30px;} .hero-bot-left {width:53%;left:-3%;bottom:0;} .hero-bot-right {width:45%;right:-7%;bottom:0;} .hero-float {font-size:9px;padding:7px;} .agent-highlights {margin-top:-80px;} .highlight-grid {grid-template-columns:1fr;gap:9px;padding:10px;} .highlight-card {min-height:125px;grid-template-columns:95px 1fr;padding:10px;} .highlight-card img {height:95px;} .lifecycle-intro {padding:50px 0 34px;} .lifecycle-steps {gap:5px;} .lifecycle-steps b {font-size:25px;} .lifecycle-steps strong {font-size:11px;} .lifecycle-steps small {font-size:10px;} .proof.inset {padding:10px;} .proof.inset .wrap {grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;} .proof.inset .cap {grid-template-columns:1fr;gap:6px;padding:17px;} .proof.inset .fig {min-height:120px;padding:15px 12px;} .proof.inset .fig:last-of-type {grid-column:1/-1;} .proof.inset .note {padding:12px;} .mark .brand-logo {width:clamp(160px,47vw,230px);} }

/* ONBOARDING TIMELINE FIX - isolated from decorative card styling */
.days {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,2.8vw,38px);
  align-items:stretch;
  position:relative;
}
.days > .day {
  min-width:0;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:0;
  align-items:stretch;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  transform:none !important;
}
.days > .day .d {
  display:flex;
  align-items:center;
  gap:13px;
  min-width:0;
  margin:0 0 29px;
  font:500 12px/1.5 var(--mono);
  color:var(--ink-3);
  letter-spacing:0.045em;
  white-space:nowrap;
}
.days > .day .d::before {
  width:12px;
  height:12px;
  flex:0 0 12px;
  border-radius:50%;
  border:1.5px solid var(--ink);
  background:var(--bg);
}
.days > .day .d::after { min-width:0; flex:1; height:1px; background:var(--line-2); }
.days > .day:last-child .d::before {background:var(--signal);border-color:var(--signal);}
.days > .day:last-child .d::after {display:none;}
.days > .day h3 {margin:0 0 14px;font-size:19px;line-height:1.35;color:var(--ink);}
.days > .day p {margin:0;font-size:15px;line-height:1.65;color:var(--ink-2);overflow-wrap:break-word;}
@media (max-width:900px) {
  .days {grid-template-columns:repeat(2,minmax(0,1fr));column-gap:30px;row-gap:38px;}
}
@media (max-width:580px) {
  .days {grid-template-columns:minmax(0,1fr);gap:27px;}
  .days > .day {padding-left:22px;position:relative;}
  .days > .day::before {content:"";position:absolute;top:15px;bottom:-28px;left:5px;width:1px;background:var(--line-2);}
  .days > .day:last-child::before {display:none;}
  .days > .day .d {margin:0 0 10px;}
  .days > .day .d::before {position:absolute;left:-22px;top:2px;}
  .days > .day .d::after {display:none;}
  .days > .day h3 {margin-bottom:7px;}
}

/* Merge fixes, October 2026: keep the new header and hero inside narrow phones */
.hero.hero-redesign { overflow-x: clip; }
@media (max-width: 480px) {
  .top .wrap { gap: 10px; padding-inline: 16px; }
  .mark .brand-logo { width: 148px; }
  .top nav { gap: 6px; }
  .top .btn-primary { padding: 9px 13px; font-size: 13px; }
}

/* DIBBS Agent leads the highlight strip (five cards) */
.highlight-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.highlight-card.featured { background: linear-gradient(135deg, #fff, #fff1e8); border-color: #ffd2b8; }
.highlight-card strong .status { font: 500 10px/1 var(--mono); font-style: normal; padding: 3px 6px; margin-left: 4px; vertical-align: 2px; }
@media (max-width: 1280px) { .highlight-card { grid-template-columns: 78px minmax(0,1fr); } .highlight-card img { height: 92px; } }
@media (max-width: 1150px) { .highlight-grid { grid-template-columns: repeat(2, 1fr); } .highlight-card.featured { grid-column: 1 / -1; } }
@media (max-width: 620px) { .highlight-grid { grid-template-columns: 1fr; } }