/* Trace brand tokens — single source of truth for site + portal.

   Typefaces are self-hosted (SIL OFL, IBM Plex): the portal CSP is
   font-src 'self', so no external font host is reachable from the product. The
   files live in ./fonts and both builds copy them to /assets/fonts/, which is
   where these relative URLs resolve from — the portal loads this file at
   /assets/tokens.css and the site inlines it at the top of its hashed CSS. */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --trace-bg: #070A0F;
  --trace-bg-2: #0B1018;
  --trace-panel: #0F1622;
  --trace-panel-2: #0C121C;
  --trace-border: #1C2739;
  --trace-text: #E8EEF7;
  --trace-muted: #93A2B8;

  --trace-accent: #38E07B;
  --trace-amber: #F4B740;
  --trace-red: #FF5C5C;
  --trace-blue: #5B9DFF;

  --trace-radius: 14px;
  --trace-radius-sm: 9px;

  --trace-font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --trace-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* Shared tokens are prepended by build.mjs. Site-only layout and identity. */
:root { color-scheme: dark; --line: #29333f; --green: var(--trace-accent); --muted: var(--trace-muted); --bg: var(--trace-bg); --panel: var(--trace-bg-2); --text: var(--trace-text); --mono: var(--trace-font-mono); --sans: var(--trace-font-sans); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 28px; }
body { margin: 0; color: var(--text); background: var(--bg); font: 15px/1.75 var(--trace-font-sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--green); }
a, button, input { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, pre:focus-visible, .table-wrap:focus-visible { outline: 2px solid var(--green); outline-offset: 5px; }
button, input { font: inherit; }
::selection { background: var(--green); color: var(--bg); }
h1, h2, h3, p { margin-top: 0; }
code, pre { font-family: var(--mono); }
.wrap { width: min(1200px, calc(100% - 96px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; z-index: 10; top: -100px; left: 20px; padding: 12px 18px; background: var(--green); color: var(--bg); }
.skip-link:focus { top: 12px; color: var(--bg); }
.release-banner { display: flex; justify-content: center; align-items: center; gap: 24px; padding: 10px 24px; border-bottom: 1px solid var(--line); background: #101820; font: 12px/1.6 var(--sans); color: #b5c0ce; }
.release-banner > span { color: var(--green); letter-spacing: .8px; white-space: nowrap; }
.release-banner p { margin: 0; }
.release-banner a { text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
.status-dot { display: inline-block; width: 5px; height: 5px; background: var(--green); margin-right: 8px; vertical-align: 2px; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 104px; border-bottom: 1px solid var(--line); }
.wordmark { display: inline-flex; align-items: center; color: var(--text); font-size: 34px; font-weight: 780; letter-spacing: -1.8px; line-height: 1; }
.wordmark-period { color: var(--green); }
.trace-mark { display: inline-flex; align-items: center; gap: 4px; width: 30px; height: 29px; margin-right: 13px; transform: skewY(-16deg); }
.trace-mark i { width: 6px; height: 15px; background: var(--green); }
.trace-mark i:nth-child(2) { height: 27px; }
.trace-mark i:nth-child(3) { height: 21px; }
.site-header nav { display: flex; gap: 32px; font-size: 12px; color: #bec8d3; }
[aria-current="page"], .nav-section-active { color: var(--green); }
.header-cta { display: flex; align-items: center; gap: 13px; border: 1px solid #394552; padding: 11px 16px; font: 600 11.5px var(--sans); letter-spacing: .06em; }
.header-coming { color: var(--muted); font-size: 9px; }
.header-cta > span:last-child { color: var(--green); }
.hero { display: grid; grid-template-columns: 1.08fr 1fr; gap: 70px; align-items: center; padding-block: 72px 62px; }
.eyebrow, .section-label, .micro { font: 600 11.5px/1.7 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.eyebrow { color: #b7c5cc; }
.section-label { color: var(--green); font-size: 11.5px; letter-spacing: .06em; }
.hero .eyebrow { font-size: 11.5px; letter-spacing: .06em; }
h1 { font-size: clamp(62px, 6.3vw, 88px); line-height: 1.07; font-weight: 580; letter-spacing: -5px; margin: 24px 0 30px; }
h1 > span, .closing h2 > span { color: var(--green); }
.lede { color: #acb9c9; font-size: 17px; line-height: 1.85; max-width: 480px; }
.hero-actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-top: 30px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 48px; padding: 13px 19px; font-size: 12px; font-weight: 650; border: 1px solid transparent; transition: background .15s, transform .15s; }
.button-primary { background: var(--green); color: #071a10; }
.button-primary:hover { color: #071a10; background: #73efa3; transform: translateY(-2px); }
.button-note { font: 11.5px var(--sans); font-weight: 400; border-left: 1px solid #146537; padding-left: 12px; }
.text-link { font-size: 12px; line-height: 1.7; text-decoration: underline; text-decoration-color: #496151; text-underline-offset: 6px; }
.text-link > span { margin-left: 10px; color: var(--green); }
.hero-note { font: 12.5px/1.7 var(--sans); color: var(--muted); margin: 25px 0 0; }
.inspector { --sample: var(--green); background: var(--panel); border: 1px solid #3b4856; box-shadow: 8px 8px 0 var(--bg), 9px 9px 0 var(--line); position: relative; min-width: 0; }
.inspector[data-sample="agent"] { --sample: var(--trace-amber); }
.inspector[data-sample="bot"] { --sample: var(--trace-red); }
.inspector:before, .inspector:after { content: '+'; position: absolute; top: -10px; font: 16px/1 var(--mono); background: var(--bg); color: var(--muted); }
.inspector:before { left: -5px; }.inspector:after { right: -5px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 22px; border-bottom: 1px solid var(--line); font: 600 11.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.badge { font: 500 10.5px/1.5 var(--mono); letter-spacing: .06em; color: #adbacb; border: 1px solid #3c4c5e; padding: 3px 6px; white-space: nowrap; }
.sample-picker { display: flex; flex-wrap: wrap; gap: 7px; min-width: 0; margin: 0; padding: 16px 22px; border: 0; border-bottom: 1px solid var(--line); }
.sample-picker legend { float: left; width: 100%; padding: 0; margin-bottom: 11px; font: 600 11px var(--sans); letter-spacing: .06em; color: #a6b5c5; }
.sample-picker label { flex: 1; min-width: 0; position: relative; cursor: pointer; }
.sample-picker input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.sample-picker label > span { display: block; padding: 11px 5px; border: 1px solid #364454; font: 600 11.5px var(--sans); letter-spacing: .04em; text-align: center; color: #bdc8d4; }
.sample-picker input:checked + span { color: var(--sample); border-color: var(--sample); background: #ffffff03; }
.sample-picker input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 3px; }
.sample-picker input:hover + span { border-color: #c1cfdd; }
.sample-picker input:disabled, .scope-button:disabled { cursor: default; }
.sample-picker input:disabled + span, .scope-button:disabled { opacity: .65; }
.trace-plot { padding: 17px 22px 0; }
.plot-label, .plot-axis { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font: 9.5px/1.5 var(--mono); }
.plot-label { margin-bottom: 12px; }.plot-axis { margin-top: 6px; font-size: 7px; letter-spacing: .5px; }
.trace-plot svg { display: block; width: 100%; height: auto; }
.plot-baseline { fill: none; stroke: #3e4b57; stroke-dasharray: 3 5; }
.signal-path { fill: none; stroke: var(--sample); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.score-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 23px 8px; }
.score-row .micro { font-size: 11px; letter-spacing: .06em; }
.score { font-size: 72px; line-height: 1.15; letter-spacing: -4px; font-weight: 400; }
.score small { margin-left: 12px; font: 12px var(--mono); color: var(--muted); letter-spacing: 0; }
.score-status { display: grid; gap: 4px; justify-items: end; }
.score-status strong { font: 20px var(--mono); font-weight: 400; }
.decision { font: 11px var(--mono); color: var(--sample); margin-top: 5px; }
.evidence { margin: 12px 23px 0; padding: 13px 0 16px; border-top: 1px solid var(--line); }
.evidence > span { color: var(--muted); font: 600 10.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; letter-spacing: .7px; }
.evidence p { font-size: 11px; color: #b9c6d4; line-height: 1.7; margin: 5px 0 0; min-height: 38px; }
.inspector-foot { margin: 0; padding: 12px 22px; border-top: 1px solid var(--line); font: 12px/1.7 var(--sans); color: var(--muted); }
.no-script { padding: 12px 22px; margin: 0; font-size: 11px; color: var(--muted); }
.section { padding-block: 96px; }
h2 { font-size: clamp(34px, 3.6vw, 48px); line-height: 1.18; font-weight: 500; letter-spacing: -1.9px; margin: 22px 0; }
h2 > span { color: var(--muted); }
.section-summary { display: flex; justify-content: space-between; align-items: end; gap: 50px; }
.section-summary p { max-width: 635px; color: #a8b7c9; font-size: 15px; margin-bottom: 0; }
.section-summary > a { flex-shrink: 0; margin-bottom: 4px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 48px; border-top: 1px solid var(--line); }
.steps article { padding: 28px 28px 0 0; }
.steps article + article { padding-left: 28px; border-left: 1px solid var(--line); }
.steps .micro { color: var(--green); font: 600 11.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; }
h3 { font-size: 20px; font-weight: 500; letter-spacing: -.5px; margin: 17px 0 10px; }
.steps p { font-size: 13px; color: #a1b0c3; margin: 0; }
.scope-section { padding-block: 80px; background: var(--panel); border-block: 1px solid var(--line); }
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 110px; }
.section-copy { max-width: 360px; font-size: 15px; color: #a8b7c9; }
.scope-buttons { margin-top: 28px; display: grid; }
.scope-button { display: flex; align-items: center; gap: 18px; width: 100%; padding: 17px 0; color: #a6b7ca; background: transparent; border: 0; border-bottom: 1px solid var(--line); text-align: left; cursor: pointer; font-size: 14px; }
.scope-button > span:first-child { font: 600 11.5px var(--sans); letter-spacing: .06em; color: var(--muted); }.scope-button > span:last-child { margin-left: auto; }
.scope-button.selected { color: var(--green); }.scope-button:hover { color: var(--text); }
.scope-preview { border: 1px solid #3b4856; background: var(--bg); min-width: 0; }
.browser-bar { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); padding: 14px 20px; font: 10.5px var(--mono); color: var(--muted); }
.map { padding: 45px 20px 36px; display: grid; justify-items: center; background-image: radial-gradient(#2b3844 1px, transparent 1px); background-size: 19px 19px; }
.map-root { display: flex; align-items: center; padding: 18px 22px; border: 1px solid #469666; background: #0c1c16; font-size: 25px; font-weight: 650; letter-spacing: -1px; line-height: 1; }
.map-root .trace-mark { transform: skewY(-16deg) scale(.8); margin-right: 5px; }
.map-stem { height: 38px; border-left: 1px solid #43805a; }
.map-routes { position: relative; display: flex; gap: 15px; }.map-routes:before { content: ''; position: absolute; left: 14%; right: 14%; top: -15px; border-top: 1px solid #43805a; }
.map-routes > span { position: relative; padding: 9px 12px; background: #101c19; border: 1px solid #355746; font: 10px var(--mono); color: #c6dace; }
.map-routes > span:before { content: ''; position: absolute; left: 50%; height: 15px; top: -16px; border-left: 1px solid #43805a; }
.scope-detail { border-top: 1px solid var(--line); padding: 23px 26px 12px; }.scope-detail .section-label { font-size: 11px; margin-bottom: 12px; }.scope-detail h3 { margin-top: 0; }.scope-detail > p:last-child { font-size: 13px; color: #a8b7c9; min-height: 69px; }
.scope-disclaimer { display: block; padding: 0 26px 23px; font: 11.5px/1.7 var(--sans); color: var(--muted); }
.availability-note { font: 12.5px/1.7 var(--sans); color: #c7b980; margin: 24px 0; }
.code-panel { border: 1px solid #364453; background: var(--panel); min-width: 0; }
.code-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 17px 22px; border-bottom: 1px solid var(--line); color: #bac7d5; font: 10px/1.6 var(--mono); }
.code-head b { color: var(--green); font-weight: 400; margin-right: 8px; }.code-head > span:last-child { color: var(--muted); font-size: 8px; }
pre { margin: 0; padding: 25px 28px; overflow: auto; font-size: 13px; line-height: 2; color: #becbd9; }
.key { color: #ced8e5; }.string { color: #6bdf99; }.number { color: #edc77e; }
.code-foot { margin: 0; padding: 13px 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.privacy-panel { border: 1px solid #344838; padding: 42px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 65px; background: #0b1214; align-items: center; }
.privacy-panel h2 { font-size: 33px; letter-spacing: -1.1px; }.privacy-panel p:not(.section-label) { font-size: 13px; color: #a5b6c6; max-width: 440px; }
.privacy-spec { margin: 0; font: 13px/1.8 var(--sans); }.privacy-spec > div { display: flex; justify-content: space-between; gap: 24px; border-bottom: 1px solid #2b3a3d; padding: 15px 0; }.privacy-spec > div:last-child { border: 0; }.privacy-spec dt { color: var(--muted); }.privacy-spec dd { margin: 0; text-align: right; color: #d2dfd9; }
.closing { text-align: center; padding-block: 96px; }.closing h2 { font-size: 63px; letter-spacing: -3px; margin-block: 25px; }.closing > p:not(.section-label) { color: #a6b6c7; font-size: 13px; line-height: 1.9; margin-bottom: 28px; }.closing-status { display: block; width: max-content; margin: 24px auto 0; }
.site-footer { border-top: 1px solid var(--line); padding-top: 38px; }.footer-top { display: flex; justify-content: space-between; gap: 48px; padding-bottom: 32px; }.footer-top .wordmark { font-size: 28px; }.footer-top p { color: var(--muted); font-size: 11px; line-height: 1.9; margin: 18px 0 0; }.footer-top nav { display: flex; gap: 75px; }.footer-top nav > div { display: grid; align-content: start; gap: 9px; font-size: 11px; color: #b0bed0; }.footer-top nav span { font: 600 11px var(--sans); letter-spacing: .06em; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 7px; }.footer-bottom { padding: 20px 0 25px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; font: 12px/1.7 var(--sans); color: var(--muted); }
/* Static documentation and launch-information pages. */
.document-page { padding-bottom: 90px; min-height: 60vh; }.page-intro { padding: 66px 0 45px; border-bottom: 1px solid var(--line); margin-bottom: 44px; }.page-intro h1 { font-size: clamp(42px, 5vw, 64px); letter-spacing: -2.8px; max-width: 890px; }.page-intro .lede { max-width: 680px; font-size: 17px; }.content-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 60px; align-items: start; }.doc-nav { display: grid; gap: 10px; border-left: 1px solid var(--line); padding: 8px 0 8px 20px; font-size: 12px; color: #a8b7c9; position: sticky; top: 30px; }.doc-nav a { padding-block: 5px; }.prose { max-width: 860px; min-width: 0; color: #b2c0d1; font-size: 14px; line-height: 1.9; }.document-page > .prose { max-width: 850px; }.prose h2 { font-size: 28px; letter-spacing: -.8px; color: var(--text); margin-top: 40px; }.prose h2:first-child { margin-top: 0; }.prose h3 { color: var(--text); }.prose strong { color: var(--text); font-weight: 600; }.prose p { margin-bottom: 20px; }.prose .section-label { margin: 38px 0 16px; }.prose .section-label + h2 { margin-top: 14px; }.prose a:not(.button) { color: #88e7ad; text-decoration: underline; text-underline-offset: 4px; }.prose a:not(.button):hover { color: var(--text); }.prose li { padding-left: 5px; margin-block: 12px; }.prose ul, .prose ol { padding-left: 22px; }.prose dt { color: var(--text); margin-top: 20px; }.prose dd { margin: 8px 0 0; }.prose code:not(pre code) { font-size: .86em; padding: 2px 4px; background: #14202b; color: #bce3ce; overflow-wrap: anywhere; }.prose .code-panel { margin-block: 26px; }.prose pre { font-size: 13px; }.notice { padding: 19px 22px; border: 1px solid #485044; border-left: 3px solid var(--trace-amber); background: #171b1b; font-size: 13px; }.table-wrap { overflow-x: auto; margin-block: 25px; border: 1px solid var(--line); }.table-wrap table { width: 100%; border-collapse: collapse; font-size: 12px; text-align: left; }.table-wrap caption { padding: 15px 18px; font-size: 11px; text-align: left; background: var(--panel); color: var(--muted); }.table-wrap th { color: var(--text); font-weight: 500; }.table-wrap td, .table-wrap th { padding: 15px; border-top: 1px solid var(--line); vertical-align: top; min-width: 140px; }.table-wrap td:first-child { min-width: 175px; }.status-list { list-style: none; padding: 0!important; margin-block: 30px; }.status-item { padding: 22px!important; margin: 0!important; border: 1px solid var(--line); border-bottom: 0; background: var(--panel); }.status-item:last-child { border-bottom: 1px solid var(--line); }.status-item p { margin: 9px 0 0; font-size: 13px; }.not-found { min-height: 45vh; border-bottom: 0; }
@media (max-width: 1100px) {
  .wrap { width: calc(100% - 64px); }.hero { gap: 40px; }.hero h1 { font-size: 72px; letter-spacing: -4px; }.hero .eyebrow { font-size: 10px; }.split { gap: 55px; }.privacy-panel { gap: 40px; padding: 35px; }.content-layout { gap: 35px; grid-template-columns: 180px minmax(0, 1fr); }.hero-actions { gap: 22px; }.release-banner { gap: 16px; font-size: 11.5px; }.map-routes { gap: 9px; }.map-routes > span { padding: 9px; }.footer-top nav { gap: 40px; }
}
@media (max-width: 850px) {
  .hero { grid-template-columns: 1fr 1fr; gap: 30px; padding-block: 55px; }.hero h1 { font-size: 58px; letter-spacing: -3.5px; }.hero .eyebrow { font-size: 10.5px; letter-spacing: .06em; }.hero .lede { font-size: 15px; }.hero-note { font-size: 12px; }.panel-head { padding: 16px; font-size: 10px; }.badge { font-size: 9px; }.sample-picker { padding: 14px 16px; }.sample-picker label > span { font-size: 10.5px; }.score { font-size: 62px; }.score-row { padding-inline: 16px; }.score-status strong { font-size: 17px; }.score-row .micro { font-size: 9.5px; }.evidence { margin-inline: 16px; }.scope-detail h3 { font-size: 18px; }.scope-detail { padding-inline: 20px; }.map-routes { gap: 7px; }.map-routes > span { font-size: 9px; padding: 8px; }.split { gap: 35px; }.section-summary { display: block; }.section-summary > a { display: inline-block; margin-top: 23px; }.privacy-panel { grid-template-columns: 1fr; gap: 20px; }.privacy-panel p:not(.section-label) { max-width: 560px; }.prose .code-head { flex-wrap: wrap; }.content-layout { grid-template-columns: 1fr; gap: 32px; }.doc-nav { position: static; display: flex; flex-wrap: wrap; gap: 12px 24px; padding: 15px 0; border-left: 0; border-bottom: 1px solid var(--line); }.page-intro { margin-bottom: 20px; }.site-header nav { gap: 21px; }
}
@media (max-width: 680px) {
  .wrap { width: calc(100% - 40px); }.release-banner { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; padding: 10px 20px; font-size: 11px; }.release-banner > span { font-size: 11px; }.release-banner p { grid-row: 2; grid-column: 1 / -1; font-size: 11.5px; }.release-banner a { grid-column: 2; grid-row: 1; }.site-header { flex-wrap: wrap; min-height: auto; padding: 24px 0 17px; gap: 20px; }.wordmark { font-size: 31px; }.site-header nav { order: 3; width: 100%; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 16px; font-size: 11px; }.header-cta { gap: 9px; padding: 10px 11px; font-size: 10px; }.header-coming { font-size: 8px; }.hero { grid-template-columns: 1fr; padding-block: 44px; gap: 37px; }.hero .eyebrow { font-size: 10.5px; letter-spacing: .06em; }.hero h1 { font-size: clamp(61px, 12vw, 78px); letter-spacing: -3.9px; margin-block: 23px; }.hero .lede { font-size: 16px; }.hero-actions { gap: 22px; }.hero-note { margin-top: 22px; font-size: 9px; }.inspector { width: calc(100% - 9px); max-width: 510px; margin: 0 auto 0 0; }.panel-head { padding: 16px; font-size: 10px; }.badge { font-size: 9px; }.sample-picker label > span { font-size: 11px; }.score { font-size: 72px; }.score-status strong { font-size: 20px; }.score-row .micro { font-size: 9.5px; }.score-row { padding: 20px 20px 8px; }.evidence { margin-inline: 20px; }.evidence p { min-height: 38px; }.inspector-foot { font-size: 8px; padding-inline: 20px; }.section { padding-block: 59px; }h2 { font-size: 33px; letter-spacing: -1.3px; }.section-label { font-size: 11.5px; letter-spacing: .06em; }.section-summary p { font-size: 14px; }.steps { grid-template-columns: 1fr; margin-top: 28px; }.steps article, .steps article + article { border-left: 0; border-bottom: 1px solid var(--line); padding: 23px 0; }.steps article:last-child { border-bottom: 0; padding-bottom: 0; }.steps h3 { margin-top: 12px; }.scope-section { padding-block: 55px; }.split { grid-template-columns: 1fr; gap: 35px; }.scope-buttons { margin-top: 23px; }.scope-detail > p:last-child { min-height: 46px; }.map-routes { gap: 13px; }.map-routes > span { padding: 9px 11px; }.code-head { padding: 16px; font-size: 9px; }.code-head > span:last-child { font-size: 9px; }pre { padding: 22px 18px; font-size: 12px; }.code-foot { padding-inline: 18px; font-size: 9px; }.privacy-panel { padding: 28px 23px; }.privacy-panel h2 { font-size: 29px; }.privacy-panel .text-link { font-size: 11px; }.privacy-spec { font-size: 10px; }.closing { padding-block: 65px; }.closing h2 { font-size: 43px; letter-spacing: -2.2px; }.closing > p:not(.section-label) { font-size: 12px; }.footer-top { flex-direction: column; gap: 30px; }.footer-top nav { justify-content: space-between; gap: 25px; }.footer-bottom { flex-direction: column; gap: 8px; font-size: 11.5px; }.document-page { padding-bottom: 55px; }.page-intro { padding: 42px 0 25px; }.page-intro h1 { font-size: 43px; letter-spacing: -2px; }.page-intro .lede { font-size: 15px; }.doc-nav { font-size: 11px; gap: 10px 20px; }.prose { font-size: 13px; }.prose h2 { font-size: 25px; }.prose pre { font-size: 11px; }.notice { padding: 16px; font-size: 12px; }.table-wrap table { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *:before, *:after { transition: none!important; animation: none!important; }.button-primary:hover { transform: none; } }

/* Pricing plans (three tiers; Business is contact-only) — centered on the page,
   with the intro sitting on top of the cards at the same width and centring. */
.plan-intro { width: min(1120px, 100%); margin: 0 auto 20px; text-align: center; color: #b2c0d1; line-height: 1.9; }
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; width: min(1120px, 100%); margin: 28px auto 8px; justify-content: center; }
.plan-card { display: flex; flex-direction: column; align-items: center; gap: 10px; border: 1px solid var(--line); background: var(--panel); padding: 26px 22px; text-align: center; }
.plan-card h2 { margin: 0; font-size: 32px; line-height: 1.1; }
.plan-card h2 span { font-size: 14px; color: var(--muted); margin-left: 4px; }
.plan-card > p { margin: 0; }
.plan-card ul { margin: 6px 0 0; padding-left: 18px; text-align: left; align-self: stretch; }
.plan-card li { margin-bottom: 6px; }
.plan-card .button { margin-top: auto; }
.plan-note { max-width: 760px; margin: 10px auto 0; text-align: center; color: var(--muted); font-size: 13px; }
@media (max-width: 980px) { .plan-grid { grid-template-columns: 1fr; max-width: 520px; } }

/* Why Volance: four claims across one band, hairline-separated rather than framed
   in cards. This is the band the old principles strip used to occupy, so the
   argument carries the space instead of repeating it. */
.differentiators { padding-top: 74px; padding-bottom: 0; }
.diff-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 38px; border-top: 1px solid var(--line);
}
.diff { padding: 34px 30px 36px 0; border-bottom: 1px solid var(--line); }
.diff + .diff { padding-left: 30px; border-left: 1px solid var(--line); }
.diff-num {
  display: block; margin-bottom: 15px;
  font: 500 11px var(--mono); letter-spacing: .14em; color: var(--green);
}
.diff h3 { margin: 0 0 11px; font-size: 19px; letter-spacing: -.022em; line-height: 1.25; }
.diff p { margin: 0; max-width: 430px; color: #a8b7c9; font-size: 13.5px; line-height: 1.8; }
.diff-foot { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 30px; }
@media (max-width: 1080px) {
  .diff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .diff:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 700px) {
  .diff-grid { grid-template-columns: 1fr; }
  .diff { padding: 24px 0 26px; }
  .diff + .diff { padding-left: 0; border-left: 0; }
}

/* One session, left to right: the same five beats as a single timeline, under the
   four claims. Quiet by design — it diagrams the verified flow rather than adding
   a claim, and it degrades to its finished state if the script never runs. */
.session { margin: 44px 0 0; padding-top: 28px; border-top: 1px solid var(--line); }
.session .section-label { margin: 0; }
.session-track { position: relative; height: 156px; margin-top: 24px; border-bottom: 1px solid var(--line); }
.session-path { position: absolute; inset: 0 0 auto; width: 100%; height: 86px; }
.session-path path { fill: none; stroke: var(--line); stroke-width: 1.5; }
.session-path .session-draw { stroke: var(--green); stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset .1s linear; }
.session-playhead { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: var(--green); }
.session-marks { position: absolute; inset: auto 0 -1px; display: flex; }
.session-mark { position: relative; width: 20%; padding-top: 12px; font: 500 10.5px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); opacity: .32; transition: opacity .3s ease, color .3s ease; }
.session-mark::before { content: ''; position: absolute; top: -4px; left: 0; width: 1px; height: 8px; background: var(--line); }
.session-mark[data-on="true"] { opacity: 1; color: var(--green); }
.session-mark > span { display: block; margin-top: 4px; font: 400 12.5px/1.5 var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted); }
@media (max-width: 700px) {
  .session-path, .session-playhead { display: none; }
  .session-track { height: auto; }
  .session-marks { position: static; flex-wrap: wrap; }
  .session-mark { width: 50%; padding-block: 12px; }
}

/* Comparison pages: a matrix hub plus paired detail sections. The matrix reuses
   the shared table shell; detail sections put Volance and the competitor side by
   side so the differences read as an argument, not a spec dump. */
.compare-matrix table { min-width: 1120px; }
.compare-matrix th[scope="row"] { color: var(--text); font-weight: 600; }
.compare-matrix .col-volance { color: #cfe9d8; }
.compare-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }
.compare-link-card { display: block; border: 1px solid var(--line); background: var(--panel); padding: 26px 24px; text-decoration: none; color: inherit; transition: border-color .2s ease, transform .2s ease; }
.compare-link-card:hover { border-color: #3d4c5c; transform: translateY(-2px); }
.compare-link-card h2 { margin: 6px 0 10px; font-size: 23px; letter-spacing: -.5px; }
.compare-link-card p { margin: 0 0 16px; color: #a8b7c9; font-size: 13.5px; line-height: 1.8; }
.compare-body { max-width: 960px; }
.compare-section { border-top: 1px solid var(--line); padding-top: 34px; margin-top: 34px; }
.compare-section h2 { margin: 8px 0 20px; font-size: 28px; letter-spacing: -.8px; }
.compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.compare-card { border: 1px solid var(--line); background: #0c1219; padding: 20px 22px; }
.compare-card h3 { margin: 0 0 10px; font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.compare-card p { margin: 0; color: #b2c0d1; font-size: 13.5px; line-height: 1.85; }
.compare-card.volance { border-left: 3px solid var(--green); }
.compare-card.competitor { border-left: 3px solid #48525f; }
.compare-verdict { margin-top: 40px; border: 1px solid #485044; border-left: 3px solid var(--green); background: #0f1516; padding: 26px 28px; }
.compare-verdict .section-label { margin: 0 0 12px; }
.compare-verdict p:last-child { margin: 0; color: #c2cfdc; font-size: 14px; line-height: 1.9; }
.compare-faqs { margin-top: 44px; border-top: 1px solid var(--line); padding-top: 30px; }
.compare-faqs h2 { margin: 0 0 12px; font-size: 26px; }
.compare-faq { border-bottom: 1px solid var(--line); padding: 16px 0; }
.compare-faq summary { cursor: pointer; color: var(--text); font-size: 14.5px; font-weight: 600; }
.compare-faq p { margin: 12px 0 0; color: #a8b7c9; font-size: 13.5px; line-height: 1.85; }
@media (max-width: 820px) {
  .compare-cards, .compare-grid { grid-template-columns: 1fr; }
}

/* Blog: a single-column reading list and a post meta line. */
.post-meta { display: block; margin-top: 16px; font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.blog-list { display: grid; gap: 16px; margin-top: 30px; }
.blog-card { display: block; border: 1px solid var(--line); background: var(--panel); padding: 26px 28px; text-decoration: none; color: inherit; transition: border-color .2s ease, transform .2s ease; }
.blog-card:hover { border-color: #3d4c5c; transform: translateY(-2px); }
.blog-card .post-meta { margin: 0; }
.blog-card h2 { margin: 10px 0; font-size: 26px; letter-spacing: -.6px; }
.blog-card p { margin: 0 0 16px; color: #a8b7c9; font-size: 14px; line-height: 1.8; max-width: 720px; }

/* Changelog: a dated release log. */
.changelog { margin-top: 6px; }
.changelog-entry { border-top: 1px solid var(--line); padding: 30px 0; }
.changelog-entry:first-child { border-top: 0; padding-top: 0; }
.changelog-entry .post-meta { margin: 0; }
.changelog-entry h2 { margin: 8px 0 14px; font-size: 26px; letter-spacing: -.6px; }
.changelog-entry ul { margin: 0; padding-left: 20px; color: #b2c0d1; font-size: 14px; line-height: 1.9; }
.changelog-entry li { margin-bottom: 8px; }