/* 3pillars.ai redesign, 2026-10-29 (Impeccable; category standard, site's own colours).
Loaded after each static page's own stylesheet; later rules win.
One section per change Eric elected to ship (2026-10-29). Remove a section to drop that change.
Not shipped by Eric's choice: "bigger, heavier headings" and "violet for buttons only". */
/* ═══ 1. New font: Geist (mono only for figures, URLs and data) ═══ */
:root {
--sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
--mono: 'Geist Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
--serif: var(--sans);
}
body, button, input, select, textarea,
h1, h2, h3, h4, h5, h6,
.wordmark, .ptab, .figure, .tick .tv, .venn-svg text, .seam h4, .human-box .t, .agent-base .t,
.lib-bridge h3, .risk h4, .lm-main .mh h4, .lm-detail h5, .sc-head h4, .sc-big .val, .quote blockquote,
.cmp thead th, .cmp thead th small, .menu-group a, .emb-stat .v, .ev-card .v, .fmg-echo, .log .l-head,
.venn-svg text.sub, .emb-quote, .emb-quote .src, .menu-label, .ph-pillars, .cpn-track,
.stack-cap, .dash-foot, .pbar .who, .mini-log, .art .cap, .flow .cap, .spark .cap, .tick-cap {
font-family: var(--sans);
}
.num, .purl, .log .ln, .flow-node, .tick .ts, .sc-head .when, .lm-main .mh span, .lm-item b, .lm-detail .kv b,
.lm-card .v, .sc-met .v, .bl-cred, .bl-total .note, .s-tag, .serve-card .k, .va-dot, .org-agents,
.fhead, .menu-group a small, .role .glyph, .path .glyph, .mini-log b {
font-family: var(--mono);
}
body { line-height: 1.55; letter-spacing: -0.003em; }
/* ═══ 2. Section labels removed (markup) — supporting styles ═══ */
.sym-head { margin-top: 56px; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; color: #f4f5f9; }
.res-tag { display: inline-block; align-self: flex-start; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--accent-ink); background: var(--accent-soft); border-radius: 999px; padding: 3px 10px; }
.proves b { display: inline; text-transform: none; letter-spacing: 0; font-size: inherit; color: var(--ink); margin: 0 4px 0 0; }
.proves b::after { content: ":"; }
.grp .gh { font-size: 12.5px; text-transform: none; letter-spacing: -0.005em; font-weight: 600; }
/* ═══ 3. Plain emphasis: no italic serif; the emphasised words take the heading's colour ═══ */
.fx { font-family: inherit; font-style: normal; font-weight: inherit; letter-spacing: inherit; color: inherit; }
.menu-label { font-style: normal; font-size: 15px; font-weight: 500; }
.emb-quote { font-size: 20px; font-weight: 450; letter-spacing: -0.015em; border-left: 1px solid var(--border-strong); }
/* ═══ 4. Ruled sections instead of card grids ═══ */
.pillar-defs, .steps-band, .ev-grid, .serve-grid, .team-grid, .lib { gap: 0 40px; }
.pdef, .stepc, .ev-card, .serve-card, .tcard, .grp, .role, .path, .seam, .res-card, .emb-stat, .inv-note {
background: transparent; border: 0; border-top: 1px solid var(--border-strong); border-radius: 0;
box-shadow: none; padding: 22px 0 6px;
}
.seam, .role, .path, .stepc, .res-card, .serve-card, .ev-card { transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.seam:hover, .role:hover, .path:hover, .stepc:hover, .res-card:hover, .serve-card:hover, .ev-card:hover {
transform: none; box-shadow: none; border-color: var(--ink);
}
.seams, .roles, .paths { gap: 0; }
.seam { padding: 16px 0; }
.role, .path { padding: 20px 0; }
.res-grid { gap: 0 48px; }
.res-feature { background: transparent; border: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--border-strong); border-radius: 0; padding: 40px 0; }
.grp { padding-top: 18px; }
.grp .gh { border-bottom: 0; padding-bottom: 6px; }
.dark .sym, .sym { border: 0; border-top: 1px solid rgba(255,255,255,0.14); border-radius: 0; background: transparent; padding: 16px 0; }
.symptoms { gap: 0 40px; }
.stepc { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-content: start; }
.stepc > * { grid-column: 2; }
.stepc .s-tag { grid-column: 1; grid-row: 1; margin: 0; padding-top: 5px; font-size: 13px; color: var(--muted); }
.stepc h3 { grid-row: 1; }
.stepc .art { grid-column: 1 / -1; }
.tcard { padding-top: 24px; }
/* Who We Serve carousel: no cards inside the card */
.uc-role, .uc-build { border: 0 !important; border-top: 1px solid var(--border-strong) !important; border-radius: 0 !important; padding: 18px 0 0 !important; box-shadow: none; }
/* ═══ 5. No gradients or tinted cards ═══ */
.hero::before, .phead::before { display: none; }
.seam.whole, .human-box, .org-box.seat, .res-feature, .risk-strip, .agent-base, .va-enter .pill, .org-agents { background-image: none; }
.seam.whole { background: transparent; }
.human-box, .org-box.seat, .agent-base, .risk-strip { background: var(--panel); }
.uc-head, .uc-role, .uc-build { background: var(--panel) !important; background-image: none !important; }
/* Insight cards: no glow plate; the category tag sits in line above the title */
.thumb { height: auto !important; background: none !important; border-bottom: 0 !important; padding: 18px 20px 0; }
.thumb::before { display: none !important; }
.tag { position: static; display: inline-block; }
/* ═══ 6. Smaller corner radii: 8px surfaces, 6px controls ═══ */
:root { --r-surface: 8px; --r-control: 6px; }
.cta-box, .cmp-wrap, .sc-main, .sc-met, .lm-card, .org-box, .human-box, .agent-base, .log, .pwin, .risk-strip { border-radius: var(--r-surface); }
.btn, .ptab { border-radius: var(--r-control); }
/* ═══ 7. Hero buttons (markup) and the closing call to action ═══ */
.hero .ctas { margin-top: 28px; gap: 10px; }
.cta-box.hot { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 56px; align-items: end; padding: 56px; }
.cta-box.hot h3, .cta-box.hot p { grid-column: 1; }
.cta-box.hot p { max-width: 40em; }
.cta-box.hot .btn { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin-top: 0; }
@media (max-width: 760px) {
.cta-box.hot { grid-template-columns: 1fr; padding: 36px 28px; }
.cta-box.hot .btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 24px; }
}
/* ═══ 8. Static certification line ═══ */
.cpn-track { animation: none !important; width: 100%; justify-content: center; font-size: 12.5px; font-weight: 400; letter-spacing: -0.005em; color: rgba(244,245,249,0.78); }
.cpn-track span + span { display: none; }
.cpn-track span { padding: 0 20px; overflow: hidden; text-overflow: ellipsis; }
.cpn-track span::before { content: none; }
.cpn-banner { border-bottom-color: rgba(255,255,255,0.08); }
/* ═══ 9. Drawn icons (one 1.6 stroke SVG set) in place of typed glyphs ═══ */
.trust .t-item::before, .sc-sign span::before, .risk h4::before, .sym::before {
content: ""; flex: none; width: 13px; height: 13px; background: currentColor; align-self: center;
-webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.trust .t-item::before, .sc-sign span::before, .risk h4::before {
--ico: url("data:image/svg+xml;utf8,");
}
.sym::before {
--ico: url("data:image/svg+xml;utf8,");
color: rgba(244,245,249,0.6);
}
.trust .t-item::before { color: var(--accent-ink); }
.sc-sign span::before { display: inline-block; vertical-align: -2px; margin-right: 5px; color: var(--good); }
/* ═══ 10. Calmer motion: one authored moment (the product panel), no ambient pulses ═══ */
.ph-row i, .ph-pillars, .venn-core, .agent-nodes i, .log .l-head::after, .eyebrow::before { animation: none; }
.agent-nodes i { opacity: 0.7; }
.va-stage:hover .va-dot { box-shadow: none; border-color: var(--accent); }
.reveal { transform: translateY(12px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.ptab { transition: background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.pview.on { animation: pview-in 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes pview-in { from { opacity: 0; filter: blur(4px); transform: translateY(6px); } to { opacity: 1; filter: none; transform: none; } }
.btn-primary:hover, .btn-accent:hover { transform: none; }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.pview.on { animation: none; }
.ticker-track { animation: none !important; }
.bar i, .bars i { transition: none !important; transform: none !important; }
html { scroll-behavior: auto; }
}
/* ═══ 11. Readability: 4.5:1 contrast and an 11px floor ═══ */
:root {
--muted: #61677a; --ink-soft: #3f475c;
--good: #1f7a4c; --warn: #8a6619; --gov: #2f62b8; --exec: #7a4f9c; --btn-accent: #605fd8;
}
.btn-accent, .lm-detail .act, .org-box.seat .badge { background: var(--btn-accent); }
.btn-accent:hover { background: var(--accent-ink); }
.btn-case { background: var(--good) !important; }
.tcard .trole { color: var(--accent-ink); }
.tick .ts, .tick-cap, .quote.dark .attr { color: rgba(244,245,249,0.68); }
.dark .lede, .dark .shead .lede { color: rgba(244,245,249,0.78); }
.quote blockquote { line-height: 1.3; }
.dash-cols, .uc small, .chip, .purl, .pbar .who, .dash-foot, .log, .log .l-head, .lm-side .sh, .lm-item b,
.lm-main .mh span, .lm-card .s, .lm-detail .kv, .lm-detail .kv b, .q22-quad .ql, .q22-axis-y span, .q22-axis-x span,
.q22-dot, .sc-head .when, .spark .cap, .bl-total .note, .tick .ts, .tick-cap, .s-tag, .art .cap, .mini-log,
.flow-node, .flow .cap, .proves b, .stack-cap, .human-box .badge, .agent-base .badge, .org-agents, .pass,
.res-tag, .serve-card .k, .ti.anchor .t::before, .fhead, .draft-pill, .uc-win .sub2, .bstat .k,
.tag, .icard .meta { font-size: 11.5px; }
.q22.mini .ql, .q22.mini .q22-dot { font-size: 11px; }
.dash-cols, .lm-side .sh, .q22-quad .ql, .q22-axis-y span, .q22-axis-x span, .cmp thead th small, .human-box .badge,
.agent-base .badge, .pass, .tcard .trole, .role h3 small, .org-box.seat .badge, .log .l-head, .fhead,
.ti.anchor .t::before { letter-spacing: 0.04em; }
/* ═══ 12. Phone fixes ═══ */
@media (max-width: 960px) { .hero-right { padding-top: 0; } }
@media (max-width: 600px) {
.container { padding: 0 20px; }
.ptabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -20px; padding-right: 20px; }
.ptabs::-webkit-scrollbar { display: none; }
.ptab { flex: none; }
/* Who We Serve carousel: ten dots overflow a phone; the arrows and the count carry it */
.ctrl .dots-row { display: none; }
.flow-row { flex-direction: column; align-items: stretch; }
.flow-arrow { transform: rotate(90deg); align-self: center; }
.symptoms { grid-template-columns: 1fr; }
.pbar .who { display: none; }
.dash-cols, .dash-row { grid-template-columns: 1.5fr 0.9fr 1.3fr; column-gap: 10px; padding-left: 16px; padding-right: 16px; }
.dash-cols > :nth-child(4), .dash-row > :nth-child(4) { display: none; }
.chip { padding: 3px 8px; }
}
/* ═══ 13. Article and case metadata: the category line under the title, in plain sans ═══ */
.uc-head > div:first-child { display: flex; flex-direction: column; }
.uc-head > div:first-child > h3 { order: 1; }
.uc-kick { order: 2; font-family: var(--sans); font-size: 13.5px; letter-spacing: 0; text-transform: none; color: var(--muted); margin: 8px 0 0; }
.uc-head > div:first-child > .uc-chips { order: 3; margin-top: 14px; }
.rsub { font-family: var(--sans); letter-spacing: 0; text-transform: none; font-size: 12.5px; }
/* ═══ 14. Browser polish: focus, selection, scrollbars, numerals, rhythm, buttons ═══ */
html { scrollbar-color: rgba(32,40,59,0.28) transparent; accent-color: var(--accent); }
::selection { background: rgba(107,106,222,0.22); color: var(--ink); }
.dark ::selection, .quote.dark ::selection, .cta-box.hot ::selection { background: rgba(165,164,240,0.35); color: #fff; }
input, textarea { caret-color: var(--accent); }
a { text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
:where(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.btn:focus-visible { outline-offset: 2px; border-radius: var(--r-control); }
.num, .figure, .tick .tv, .lm-card .v, .sc-met .v, .sc-big .val, .bl-cred, .emb-stat .v, .ev-card .v,
.dash-row, .va-dot, table { font-variant-numeric: tabular-nums; }
h2.headline, h3 { text-wrap: balance; }
.lede, .shead .lede, .hero .sub { line-height: 1.6; text-wrap: pretty; }
details .a { font-size: 15.5px; line-height: 1.65; max-width: 44em; }
nav { background: rgba(251,250,248,0.9); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); }
.btn { font-weight: 500; letter-spacing: -0.005em; line-height: 1.25;
transition: background-color 0.18s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.18s cubic-bezier(0.16, 1, 0.3, 1), color 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1); }
.btn-primary { box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 1px 2px rgba(32,40,59,0.16); }
.btn-primary:hover { background: #2c3550; }
.btn-accent { box-shadow: 0 1px 2px rgba(83,82,196,0.28); }
.btn-ghost { background: var(--panel); }
.btn-ghost:hover { border-color: var(--ink); }
.btn:active { transform: translateY(0.5px); }
.pwin { border-color: var(--border-strong);
box-shadow: 0 1px 1px rgba(32,40,59,0.04), 0 12px 24px -6px rgba(32,40,59,0.08), 0 40px 80px -20px rgba(32,40,59,0.18); }
/* ═══ 15. One navigation (Eric, 2026-10-29): Who we serve, Case studies, Insights, Talk to us on every
page; the menu button only on phones, opening the same links; the footer repeats them ═══ */
.nav-links a { font-size: 14px; color: var(--ink-soft); }
.nav-links a[aria-current="page"] { color: var(--ink); }
@media (min-width: 961px) { .burger { display: none; } }
.menu-body { grid-template-columns: 1fr; padding-top: 32px; }
.menu-group a { padding: 12px 0; border-bottom: 1px solid rgba(251,250,248,0.12); }
.menu-group a[aria-current="page"] { color: #a5a4f0; }
.foot-links { display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: 13.5px; }
.foot-links a { color: var(--ink-soft); text-decoration: none; }
.foot-links a:hover { color: var(--ink); }
/* The phone menu matches the React pages: light, the same links, the same size */
.menu { background: var(--bg); }
.menu .wordmark { color: var(--ink); }
.menu .wordmark span { color: var(--accent-ink); }
.menu .wordmark img { filter: none; }
.menu-x { color: var(--ink); }
.menu-x:hover { color: var(--accent-ink); }
.menu-body { padding-top: 8px; }
.menu-group a { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); padding: 14px 0; border-bottom: 1px solid var(--border); }
.menu-group a:hover { color: var(--accent-ink); }
.menu-group a[aria-current="page"] { color: var(--accent-ink); }
/* ═══ 16. Four steps that line up (Eric, 2026-10-29): step number, title, text and picture start at the
same height in every column; every picture sits in the same frame with a short head ═══ */
.steps-band { grid-template-rows: repeat(4, auto); }
.stepc { grid-row: span 4; grid-template-rows: subgrid; grid-template-columns: 1fr; row-gap: 0; padding-bottom: 0; }
.stepc > *, .stepc .s-tag, .stepc h3, .stepc .art { grid-column: 1; grid-row: auto; }
.stepc .s-tag { margin: 0 0 10px; padding: 0; font-size: 12px; color: var(--muted); }
.stepc h3, .stepc p { align-self: start; margin-bottom: 0; }
.stepc p { margin-top: 10px; }
.stepc .art {
align-self: start; height: 216px; margin-top: 24px; padding: 14px 16px;
display: flex; flex-direction: column;
border: 1px solid var(--border); border-radius: var(--r-surface); background: var(--panel);
}
.art-h { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.stepc .q22.mini { flex: 1; display: flex; min-height: 0; }
.stepc .q22.mini .q22-grid { flex: 1; min-height: 0; }
.stepc .bars { flex: 1; height: auto; max-height: 128px; margin-top: auto; }
.stepc .bars i { border-radius: 3px 3px 0 0; background: rgba(32,40,59,0.12); }
.stepc .bars i.on { background: var(--ink); }
.stepc .q22.mini .q22-dot { font-size: 9px; }
/* the three promises run the full width of the four steps */
.risk-strip { width: auto; margin-top: 32px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) {
.steps-band { grid-template-rows: none; }
.stepc { grid-row: auto; grid-template-rows: none; padding-bottom: 30px; }
}
/* ═══ 17. Product panel in the demo's app style (Eric, 2026-10-29): navy side menu, page title,
stat tiles, ruled tables, status chips, a week-by-week line; same views as the tabs ═══ */
.app { display: grid; grid-template-columns: 180px minmax(0, 1fr); }
.app-side { background: var(--ink); padding: 16px 10px; display: flex; flex-direction: column; gap: 2px; }
.app-brand { display: flex; align-items: center; gap: 9px; padding: 2px 8px 16px; font-size: 12px; font-weight: 500; color: #fff; }
.app-brand img { width: 15px; height: auto; filter: brightness(0) invert(1); }
.app-sh { padding: 6px 8px; font-size: 11px; font-weight: 500; color: #9aa0b5; }
.app-nav {
display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px; border: 0; border-radius: var(--r-control);
background: transparent; font: inherit; font-size: 12.5px; color: #c9cdda; text-align: left; cursor: pointer;
}
.app-nav:hover { color: #fff; }
.app-nav.on { background: rgba(255,255,255,0.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); color: #fff; }
.app-nav i { width: 14px; height: 14px; flex: none; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.ai-port { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M3 4h10M3 8h7M3 12h4'/%3E%3C/svg%3E"); }
.ai-map { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Crect x='2.5' y='2.5' width='4.5' height='4.5' rx='1'/%3E%3Crect x='9' y='2.5' width='4.5' height='4.5' rx='1'/%3E%3Crect x='2.5' y='9' width='4.5' height='4.5' rx='1'/%3E%3Crect x='9' y='9' width='4.5' height='4.5' rx='1'/%3E%3C/svg%3E"); }
.ai-pilot { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12.5l3.5-4 3 2.5L14 4'/%3E%3C/svg%3E"); }
.ai-ledger { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Crect x='2.5' y='2.5' width='11' height='11' rx='1.5'/%3E%3Cpath d='M2.5 6.5h11M2.5 10h11'/%3E%3C/svg%3E"); }
.app-who { margin-top: auto; padding: 12px 8px 2px; border-top: 1px solid rgba(255,255,255,0.10); font-size: 11.5px; color: #fff; }
.app-who span { display: block; font-size: 11px; color: #9aa0b5; }
.app-main { min-width: 0; padding: 22px 24px 92px; background: var(--panel); }
.av-crumb { margin-bottom: 10px; font-size: 11.5px; color: var(--muted); }
.av-head small { display: block; margin-bottom: 2px; font-size: 11.5px; color: var(--muted); }
.av-head h4 { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.av-head p { max-width: 64ch; margin-top: 4px; font-size: 12.5px; color: var(--ink-soft); }
.av-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; font-size: 11.5px; color: var(--muted); }
.av-chips .rec { display: inline-flex; align-items: center; gap: 6px; }
.av-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.av-tile { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-surface); }
.av-tile .k { font-size: 11.5px; color: var(--muted); }
.av-tile .v { margin-top: 4px; font-size: 24px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums; }
.av-tile .v.sm { margin-top: 6px; font-size: 14px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.3; }
.av-tile .s { margin-top: 3px; font-size: 11px; line-height: 1.35; color: var(--muted); }
.tbar, .pb { display: block; height: 4px; border-radius: 2px; background: rgba(32,40,59,0.08); overflow: hidden; }
.tbar { margin-top: 9px; }
.pb { margin-top: 6px; }
.tbar i, .pb i { display: block; height: 100%; border-radius: 2px; background: var(--ink); }
.av-sec { margin: 20px 0 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
.av-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.av-table th { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--border-strong); font-size: 11.5px; font-weight: 500; color: var(--muted); text-align: left; }
.av-table td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--border); color: var(--ink-soft); vertical-align: top; font-variant-numeric: tabular-nums; }
.av-table td b { display: block; font-weight: 600; color: var(--ink); }
.av-table td small { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }
.av-table .r { text-align: right; }
.av-table td.r { font-family: var(--mono); font-size: 12px; color: var(--ink); }
.av-table .prog { width: 21%; padding-left: 16px; padding-right: 0; }
.av-table td.neg { color: var(--warn); }
.av-table td.pos { color: var(--good); }
.av-table tr.tot td { border-top: 1px solid var(--ink); border-bottom: 0; font-weight: 600; }
.st { display: inline-block; padding: 2px 8px; border: 1px solid var(--border-strong); border-radius: 4px; font-size: 11px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.st.live { border-color: var(--ink); background: var(--ink); color: #fff; }
.st.pilot { border-color: rgba(31,122,76,0.30); background: rgba(31,122,76,0.08); color: var(--good); }
.dot { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.dot::before { content: ""; width: 7px; height: 7px; box-sizing: border-box; border: 1.5px solid currentColor; border-radius: 50%; }
.dot.ok { color: var(--ink-soft); }
.dot.ok::before { border-color: var(--good); background: var(--good); }
.av-split { display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: 22px; align-items: start; margin-top: 16px; }
#pv-bl .av-split { grid-template-columns: minmax(0, 1fr) 250px; }
.av-box { padding: 10px 14px; border-radius: var(--r-surface); background: var(--band); }
.av-box .bh { padding: 4px 0 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
.av-box .kv { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 11.5px; color: var(--muted); }
.av-box .kv:last-of-type { border-bottom: 0; }
.av-box .kv b { font-weight: 500; color: var(--ink); text-align: right; }
.av-act { display: block; margin: 8px 0 4px; padding: 8px; border-radius: var(--r-control); background: var(--ink); font-size: 12px; font-weight: 600; color: #fff; text-align: center; }
.lmap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.lh { display: flex; justify-content: space-between; margin-bottom: 6px; padding: 8px 10px; border-radius: var(--r-control); background: var(--ink); font-size: 11.5px; font-weight: 600; color: #fff; }
.lh span { font-family: var(--mono); font-weight: 400; color: #9aa0b5; }
.lt { margin-bottom: 6px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-control); }
.lt b { display: block; font-size: 11.5px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.lt span { display: block; margin-top: 2px; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lt.t1 { background: rgba(32,40,59,0.03); }
.lt.t2 { background: rgba(32,40,59,0.07); }
.lt.t3 { background: rgba(32,40,59,0.13); }
.lt.t4 { background: rgba(32,40,59,0.22); }
.lt.t3 span, .lt.t4 span { color: var(--ink-soft); }
.lt.sel { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.lt.out { border-style: dashed; background: transparent; }
.lt.out b { font-weight: 500; color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(32,40,59,0.35); }
.av-chart { min-width: 0; }
.av-chart .av-sec, .av-feed .av-sec { margin-top: 0; }
.av-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.av-chart svg text { font-family: var(--mono); font-size: 10.5px; fill: var(--muted); }
.av-chart .tg { stroke: var(--good); stroke-width: 1; stroke-dasharray: 4 5; }
.av-chart svg .tl { fill: var(--good); }
.av-chart .ax { stroke: var(--border-strong); stroke-width: 1; }
.av-chart .ln { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.av-chart circle { fill: var(--ink); }
.av-chart svg .vl { font-weight: 600; fill: var(--ink); }
.av-feed .fi { padding: 9px 0; border-top: 1px solid var(--border); font-size: 12px; line-height: 1.4; color: var(--ink-soft); }
.av-feed .fi small { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 11px; color: var(--muted); }
.av-feed .fi small::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: var(--good); }
/* the dark log sits over the window's empty foot, not over its data */
.surface { padding-bottom: 150px; }
.log { bottom: -70px; }
/* every view fits one height, so switching tabs does not move the page */
@media (min-width: 961px) { .app-main { min-height: 676px; } }
@media (max-width: 960px) {
.surface { padding-bottom: 80px; }
.app-main { padding-bottom: 26px; }
}
@media (max-width: 760px) {
.app { grid-template-columns: 1fr; }
.app-side { display: none; }
.app-main { padding: 18px 16px 20px; }
.av-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.av-split, #pv-bl .av-split { grid-template-columns: 1fr; }
.lmap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#pv-lm .av-box { display: none; }
.purl { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.av-chart svg text { font-size: 17px; }
#pv-vp .av-table th:nth-child(2), #pv-vp .av-table td:nth-child(2),
#pv-vp .av-table th:nth-child(5), #pv-vp .av-table td:nth-child(5),
#pv-bl .av-table th:nth-child(4), #pv-bl .av-table td:nth-child(4),
#pv-bl .av-table th:nth-child(6), #pv-bl .av-table td:nth-child(6) { display: none; }
}
/* ═══ 18. Hero in one column: intro, buttons and proof points under the headline ═══ */
.hero-top { grid-template-columns: minmax(0, 1fr); gap: 0; }
.hero-right { padding-top: 36px; }
.hero .sub { max-width: 38em; }
.hero .ctas { margin-top: 26px; }
.trust { flex-direction: row; flex-wrap: wrap; gap: 8px 28px; margin-top: 24px; }
@media (max-width: 960px) { .hero-right { padding-top: 28px; } }
@media (max-width: 600px) { .trust { flex-direction: column; } }