/* CommStack — wholesale site.
   Same design language as the Partner API reference ("Lanes"): one coloured
   lane per platform, always paired with a name and a glyph (platforms are solid
   discs, shared services dashed rings), a dark hero band with the platform map,
   a sticky chapter bar whose underline takes the colour of the lane in view. */

:root {
  --paper: #f6f7fb;
  --sheet: #ffffff;
  --ink: #15193b;
  --muted: #586080;
  --line: #e0e4ef;
  --accent: #0a6cff;
  --accent-soft: #e6efff;
  --signal: #9a5b00;
  --signal-soft: #fff1d6;
  --code-bg: #15193b;
  --code-ink: #e3e7f6;
  --code-muted: #8a92b4;
  /* lanes: text-safe (AA) on sheet, paper and their own tint */
  --c-cps: #1a56db; --c-ai: #6d32d9; --c-sms: #12773d; --c-nms: #b93a0a; --c-trunks: #b0175e;
  --c-numbers: #08697f; --c-usage: #835700; --c-account: #4b5568;
  --on-lane: #ffffff;
  /* the hero and network bands are dark in both themes */
  --hero-bg: #0b1022; --hero-ink: #eef1fb; --hero-muted: #a9b1cf; --hero-node: #141a33; --hero-line: rgba(255, 255, 255, .12);
  --bar-h: 60px;
  --display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f1117; --sheet: #171a23; --ink: #e9ebf3; --muted: #9ba1b6; --line: #2a2e3b;
    --accent: #5ea3ff; --accent-soft: #172540;
    --signal: #ffb547; --signal-soft: #2b2312; --code-bg: #0a0c12; --code-ink: #e3e7f6; --code-muted: #8188a3;
    --c-cps: #7aa8ff; --c-ai: #b69aff; --c-sms: #4cd38a; --c-nms: #ff9b66; --c-trunks: #ff7cb5;
    --c-numbers: #43c7e0; --c-usage: #f0bd4f; --c-account: #aab4c8;
    --on-lane: #0b1022;
    --hero-bg: #0c1228;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0f1117; --sheet: #171a23; --ink: #e9ebf3; --muted: #9ba1b6; --line: #2a2e3b;
  --accent: #5ea3ff; --accent-soft: #172540;
  --signal: #ffb547; --signal-soft: #2b2312; --code-bg: #0a0c12; --code-ink: #e3e7f6; --code-muted: #8188a3;
  --c-cps: #7aa8ff; --c-ai: #b69aff; --c-sms: #4cd38a; --c-nms: #ff9b66; --c-trunks: #ff7cb5;
  --c-numbers: #43c7e0; --c-usage: #f0bd4f; --c-account: #aab4c8;
  --on-lane: #0b1022;
  --hero-bg: #0c1228;
  color-scheme: dark;
}
/* dark bands always use the bright lane colours */
.hero, .net {
  --c-cps: #7aa8ff; --c-ai: #b69aff; --c-sms: #4cd38a; --c-nms: #ff9b66; --c-trunks: #ff7cb5;
  --c-numbers: #43c7e0; --c-usage: #f0bd4f; --c-account: #aab4c8; --on-lane: #0b1022;
}
[data-lane="cps"] { --lane: var(--c-cps); }
[data-lane="ai"] { --lane: var(--c-ai); }
[data-lane="sms"] { --lane: var(--c-sms); }
[data-lane="nms"] { --lane: var(--c-nms); }
[data-lane="trunks"] { --lane: var(--c-trunks); }
[data-lane="numbers"] { --lane: var(--c-numbers); }
[data-lane="usage"] { --lane: var(--c-usage); }
[data-lane="account"] { --lane: var(--c-account); }
[data-lane] { --lane-soft: color-mix(in srgb, var(--lane) 11%, var(--sheet)); --lane-line: color-mix(in srgb, var(--lane) 38%, var(--line)); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
:where(main, main *) { scroll-margin-top: calc(var(--bar-h) + 12px); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16.5px/1.65 var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: var(--accent); text-underline-offset: 2px; }
code { font: .85em var(--mono); background: var(--accent-soft); color: var(--ink); padding: .1em .38em; border-radius: 5px; }
h1, h2, h3, h4 { font-family: var(--display); text-wrap: balance; letter-spacing: -.02em; line-height: 1.12; margin: 0; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 8px 14px; border-radius: 10px; background: var(--sheet); color: var(--ink); font-weight: 600; }
.skip:focus { top: 10px; }
.wrap { max-width: 1320px; margin: 0 auto; padding-inline: 28px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--signal); }
.eyebrow span { color: var(--muted); }
.lead { color: var(--muted); font-size: 18px; max-width: 46em; margin: 12px 0 28px; }

/* lane marks */
.roundel { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--lane); color: var(--on-lane); }
.roundel svg { width: 16px; height: 16px; }
.roundel.shared { background: var(--lane-soft); color: var(--lane); border: 2px dashed var(--lane); }
.roundel.sm { width: 20px; height: 20px; }
.roundel.sm svg { width: 12px; height: 12px; }
.roundel.lg { width: 54px; height: 54px; }
.roundel.lg svg { width: 28px; height: 28px; }

/* ---------- chapter bar ---------- */
.bar { position: sticky; top: 0; z-index: 20; height: var(--bar-h); background: color-mix(in srgb, var(--paper) 88%, transparent); -webkit-backdrop-filter: saturate(1.3) blur(12px); backdrop-filter: saturate(1.3) blur(12px); border-bottom: 1px solid var(--line); }
.bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--lane, transparent); opacity: 0; transition: opacity .25s, background-color .25s; }
.bar[data-lane]::after { opacity: 1; }
.bar-in { display: flex; align-items: center; gap: 10px; height: 100%; max-width: 1480px; margin: 0 auto; padding-inline: 20px; }
.mark { flex: none; display: inline-flex; align-items: center; gap: 9px; padding: 6px 8px 6px 4px; font: 800 18px var(--display); letter-spacing: -.02em; color: var(--ink); text-decoration: none; white-space: nowrap; border-radius: 8px; }
.mark .rail { display: inline-flex; gap: 2px; }
.mark .rail i { display: block; width: 4px; height: 22px; border-radius: 2px; background: var(--lane); }
/* desktop nav: a Platforms menu, then the section links */
.nav { flex: 1; min-width: 0; display: flex; align-items: center; padding-left: 10px; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.nav-link { display: inline-flex; align-items: center; gap: 6px; font: 500 14.5px var(--body); color: var(--muted); text-decoration: none; padding: 7px 12px; border-radius: 999px; white-space: nowrap; background: none; border: 0; cursor: pointer; }
.nav-link:hover, .nav-trigger[aria-expanded="true"] { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.nav-link.on { color: var(--ink); background: var(--sheet); box-shadow: inset 0 0 0 1px var(--line); }
.nav-trigger.on { color: var(--lane); background: var(--lane-soft); box-shadow: inset 0 0 0 1.5px var(--lane); font-weight: 600; }
.nav-trigger .chev { transition: transform .15s; }
.nav-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }
.has-menu { position: relative; }
.mega { position: absolute; left: -8px; top: calc(100% + 12px); z-index: 30; width: min(760px, calc(100vw - 40px)); padding: 12px; border-radius: 20px; background: var(--sheet); border: 1px solid var(--line); box-shadow: 0 30px 70px -30px rgba(10, 15, 50, .45), 0 2px 6px rgba(10, 15, 50, .06); }
.mega[hidden] { display: none; }
.mega-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.mega-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px; border-radius: 14px; color: var(--ink); text-decoration: none; }
.mega-item:hover, .mega-item:focus-visible { background: var(--lane-soft); }
.mega-item[aria-current="page"] { background: var(--lane-soft); box-shadow: inset 0 0 0 1px var(--lane-line); }
.mega-item .roundel { width: 34px; height: 34px; }
.mega-item .roundel svg { width: 18px; height: 18px; }
.mega-item b { display: block; font: 700 15.5px/1.25 var(--display); letter-spacing: -.01em; }
.mega-item small { display: block; margin-top: 1px; font: 11.5px var(--mono); color: var(--lane); }
.mega-blurb { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.mega-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-top: 6px; padding: 12px 12px 4px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.mega-foot a { font-weight: 600; text-decoration: none; }
.mega-foot a:hover { text-decoration: underline; }

/* menu button and panel for smaller screens */
.bar .menu-btn { display: none; }
.menu-btn .close-i, .menu-btn[aria-expanded="true"] .open-i { display: none; }
.menu-btn[aria-expanded="true"] .close-i { display: block; }
.mobile-menu { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - var(--bar-h)); max-height: calc(100dvh - var(--bar-h)); overflow-y: auto; overscroll-behavior: contain; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(10, 15, 50, .4); padding: 14px 0 22px; }
.mobile-menu[hidden] { display: none; }
.mm-k { margin: 10px 0 8px; font: 600 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mm-plats, .mm-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mm-plats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mm-plats a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--sheet); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.mm-plats a[aria-current="page"] { border-color: var(--lane); background: var(--lane-soft); }
.mm-plats b { display: block; font: 700 15px/1.2 var(--display); }
.mm-plats small { display: block; font: 11px var(--mono); color: var(--lane); }
.mm-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mm-links a { display: block; padding: 11px 12px; border-radius: 12px; color: var(--ink); text-decoration: none; font-weight: 600; background: var(--sheet); border: 1px solid var(--line); }
.mm-end { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.mm-end .btn { flex: 1; }
.bar-end { flex: none; display: flex; align-items: center; gap: 8px; }
.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--sheet); color: var(--muted); cursor: pointer; }
.icon-btn:hover { color: var(--ink); }
.icon-btn .moon { display: none; }
:root[data-theme="dark"] .icon-btn .sun { display: none; }
:root[data-theme="dark"] .icon-btn .moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-btn .sun { display: none; }
  :root:not([data-theme="light"]) .icon-btn .moon { display: block; }
}

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 15px var(--body); text-decoration: none; padding: 11px 17px; border-radius: 12px; border: 1px solid var(--line); color: var(--ink); background: var(--sheet); cursor: pointer; transition: transform .15s, border-color .15s, background-color .15s; }
.btn:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--ink) 30%, var(--line)); }
.btn.sm { font-size: 14px; padding: 7px 13px; border-radius: 10px; }
.btn.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn.primary:hover { border-color: var(--ink); }
.hero .btn, .net .btn, .cta-band .btn { color: #fff; background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .22); }
.hero .btn:hover, .net .btn:hover, .cta-band .btn:hover { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .09); }
.hero .btn.primary, .net .btn.primary, .cta-band .btn.primary { background: #fff; color: #0b1022; border-color: #fff; }
.hero :focus-visible, .net :focus-visible, .cta-band :focus-visible { outline-color: #fff; }
.cta { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--hero-bg); color: var(--hero-ink); padding: 64px 0 78px; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .075) 1px, transparent 1.4px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 72% 45%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 80% at 72% 45%, #000 20%, transparent 75%); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(520px 360px at 76% 18%, rgba(122, 168, 255, .17), transparent 70%), radial-gradient(460px 320px at 96% 92%, rgba(182, 154, 255, .14), transparent 70%), radial-gradient(420px 280px at 4% 104%, rgba(255, 155, 102, .09), transparent 70%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr); gap: 44px; align-items: center; }
.kicker { display: inline-flex; align-items: center; gap: 8px; font: 500 13px var(--mono); color: #f6c968; background: rgba(240, 189, 79, .12); padding: 5px 11px; border-radius: 999px; margin-bottom: 22px; }
.kicker i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.hero h1 { font-size: clamp(42px, 5vw, 70px); font-weight: 800; letter-spacing: -.045em; line-height: 1.02; color: #fff; }
.hero h1 span { color: #9cc0ff; background: linear-gradient(90deg, var(--c-cps), var(--c-ai) 30%, var(--c-trunks) 58%, var(--c-nms) 80%, var(--c-usage)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero p.intro { font-size: 18.5px; color: var(--hero-muted); max-width: 32em; margin: 22px 0 28px; }
.hero p.intro b { color: #fff; font-weight: 600; }
.facts { display: flex; flex-wrap: wrap; gap: 6px 24px; list-style: none; margin: 34px 0 0; padding: 18px 0 0; border-top: 1px dashed rgba(255, 255, 255, .18); font: 13px var(--mono); color: var(--hero-muted); }
.facts b { font: 700 21px var(--display); color: #fff; margin-right: 6px; letter-spacing: -.02em; }
.lane-stripe { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; display: flex; }
.lane-stripe i { flex: 1; background: var(--lane); }

/* platform map */
.map { margin: 0; background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .1); border-radius: 24px; padding: 18px 18px 12px; }
.map > svg { width: 100%; height: auto; display: block; overflow: visible; }

.map figcaption { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 10px; padding: 10px 4px 0; border-top: 1px solid var(--hero-line); font: 12px var(--mono); color: var(--hero-muted); }
.map figcaption span { display: inline-flex; align-items: center; gap: 8px; }
.map figcaption i { display: inline-block; width: 16px; height: 0; border-top: 4px solid #cfd6f3; border-radius: 2px; }
.map figcaption i.d { border-top: 3px dashed #cfd6f3; }
.map text { font-family: var(--body); }
.map .lbl { fill: #fff; font-size: 15px; font-weight: 700; }
.map .sub { fill: var(--hero-muted); font-size: 11px; font-family: var(--mono); }
.map .tag { fill: var(--hero-muted); font-size: 10.5px; font-family: var(--mono); letter-spacing: .06em; }
.map .nbox { fill: var(--hero-node); stroke: var(--lane); stroke-width: 1.5; transition: fill .2s, stroke-width .2s; }
.map .shared .nbox { fill: #10152b; stroke-dasharray: 6 4; }
.map .nround { fill: var(--lane); }
.map .shared .nround { fill: #10152b; stroke: var(--lane); stroke-width: 2; stroke-dasharray: 3.2 2.6; }
.map .nglyph { color: var(--on-lane); }
.map .shared .nglyph { color: var(--lane); }
.map .arrow { fill: var(--lane); font-size: 13px; font-family: var(--mono); }
.map .plat .nbox { fill: transparent; stroke: rgba(255, 255, 255, .4); }
.map .core .nbox { fill: #fff; stroke: none; }
.map .core-t { fill: #0b1022; font: 800 18px var(--display); letter-spacing: -.02em; }
.map .core-s { fill: #4b5478; font-size: 11px; font-family: var(--mono); }
.map .wire { fill: none; stroke: var(--lane); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; transition: opacity .2s, stroke-width .2s; }
.map .wire.sh { stroke-width: 3.5; stroke-dasharray: 9 6; stroke-linecap: butt; }
.map .wire.rest { stroke: #cfd6f3; stroke-width: 3; }
.flow { fill: none; stroke: rgba(255, 255, 255, .75); stroke-width: 1.6; stroke-dasharray: 1.5 16; stroke-linecap: round; animation: flow 1.5s linear infinite; pointer-events: none; transition: opacity .2s; }
@keyframes flow { to { stroke-dashoffset: -35; } }
.map a { cursor: pointer; outline: none; }
.map a:hover .nbox, .map a.on .nbox { fill: color-mix(in srgb, var(--lane) 18%, var(--hero-node)); stroke-width: 2.5; }
.map .plat:hover .nbox { fill: rgba(255, 255, 255, .06); }
.map .core:hover .nbox { fill: #e8edff; }
.map a:focus-visible .nbox { stroke: #fff; stroke-width: 3; stroke-dasharray: none; }
.map svg.hot [data-lane]:not(.on) { opacity: .2; }
.map svg.hot .wire.on { stroke-width: 6.5; }
.map svg.hot .wire.sh.on { stroke-width: 5; }

/* ---------- sections ---------- */
.sect { padding: 72px 0; }
.sect h2, .net h2, .cta-band h2 { font-size: clamp(30px, 3.8vw, 46px); font-weight: 800; letter-spacing: -.035em; }
.sect-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 18px 40px; margin-bottom: 28px; }
.sect-head .lead { margin-bottom: 0; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* platform cards */
.lanes-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.shared-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 12px; }
.fl { font: 700 12px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--signal); margin: 26px 0 0; }
.lane-card { position: relative; display: grid; gap: 7px; align-content: start; padding: 22px 18px 16px; border-radius: 18px; background: var(--sheet); border: 1px solid var(--line); color: var(--ink); text-decoration: none; overflow: hidden; transition: border-color .15s, transform .15s, box-shadow .15s; }
.lane-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--lane); }
.lane-card.shared::before { height: 4px; background: repeating-linear-gradient(90deg, var(--lane) 0 12px, transparent 12px 18px); }
.lane-card:hover { border-color: var(--lane); transform: translateY(-2px); box-shadow: 0 16px 34px -22px color-mix(in srgb, var(--lane) 80%, transparent); }
.lane-card .lc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lane-card .lc-n { font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--lane); }
.lane-card b { font: 700 19px/1.15 var(--display); letter-spacing: -.01em; }
.lane-card .lc-sub { font: 12px var(--mono); color: var(--muted); }
.lane-card .lc-blurb { font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.lanes-grid .lane-card { display: flex; flex-direction: column; }
.lc-foot { margin-top: auto; padding-top: 12px; font: 600 13.5px var(--body); color: var(--lane); }
.lane-card.shared { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; padding: 18px; }
.lane-card.shared > .roundel { grid-row: span 3; align-self: start; }

/* ---------- platform boards ---------- */
.lane { padding: 34px 0; }
.lane + .lane { padding-top: 0; }
.board { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: 26px 48px; padding: 32px 32px 28px 38px; border-radius: 26px; background: linear-gradient(140deg, var(--lane-soft), var(--sheet) 62%); border: 1px solid var(--lane-line); overflow: hidden; }
.board::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: var(--lane); }
.board .who { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.board .who .eyebrow { margin: 0; color: var(--lane); }
.board h2 { font-size: clamp(28px, 3.4vw, 42px); font-weight: 800; letter-spacing: -.035em; }
.board .lead { font-size: 17px; margin: 10px 0 16px; }
.lane-facts { display: flex; flex-wrap: wrap; gap: 6px 8px; list-style: none; margin: 0; padding: 0; font: 12.5px var(--mono); color: var(--muted); }
.lane-facts li { padding: 4px 10px; border-radius: 999px; background: var(--sheet); border: 1px solid var(--line); }
.lane-facts b { color: var(--ink); font-weight: 600; }
.stops { --n: 5; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); position: relative; }
.stops::before { content: ""; position: absolute; left: calc(50% / var(--n)); right: calc(50% / var(--n)); top: 9px; height: 4px; border-radius: 2px; background: var(--lane); }
.stops li { position: relative; display: grid; justify-items: center; align-content: start; gap: 5px; text-align: center; padding: 0 4px; }
.stops .dot { position: relative; z-index: 1; width: 22px; height: 22px; border-radius: 50%; background: var(--sheet); border: 5px solid var(--lane); }
.stops b { font: 600 14.5px var(--body); line-height: 1.25; }
.stops small { font: 11.5px/1.4 var(--mono); color: var(--muted); }
.notes-card { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 28px; align-items: start; background: var(--sheet); border: 1px solid var(--line); border-radius: 18px; padding: 16px 20px 10px; }
.notes-card h3 { display: flex; align-items: center; gap: 8px; font: 700 12.5px var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--lane); margin-bottom: 4px; }
.notes { list-style: none; margin: 0; padding: 0; columns: 2 300px; column-gap: 36px; }
.notes li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; padding: 6px 0 8px; break-inside: avoid; font-size: 15px; line-height: 1.5; }
.notes li::before { content: ""; width: 8px; height: 8px; margin: .5em 0 0 4px; border-radius: 2px; background: var(--lane); transform: rotate(45deg); }
.locked { align-self: center; display: grid; gap: 6px; justify-items: start; max-width: 230px; padding: 14px 16px; border-radius: 14px; border: 1px dashed var(--lane-line); background: var(--lane-soft); font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.locked b { display: inline-flex; align-items: center; gap: 7px; font: 600 12px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--lane); }
.locked a { font-weight: 600; color: var(--lane); text-decoration: none; }
.locked a:hover { text-decoration: underline; }

/* ---------- network band ---------- */
.net { position: relative; isolation: isolate; overflow: hidden; background: var(--hero-bg); color: var(--hero-ink); padding: 80px 0 84px; }
.net::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(600px 380px at 85% 85%, rgba(67, 199, 224, .12), transparent 70%), radial-gradient(520px 340px at 10% 10%, rgba(122, 168, 255, .12), transparent 70%); }
.net .eyebrow { color: #f6c968; }
.net h2 { color: #fff; }
.net .lead { color: var(--hero-muted); }
.net-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 20px 56px; align-items: end; margin-bottom: 30px; }
.net-head .lead { margin-bottom: 0; }
.world { position: relative; margin: 0; padding: 18px 18px 14px; border-radius: 24px; background: rgba(255, 255, 255, .02); border: 1px solid rgba(255, 255, 255, .09); }
.world-art { position: relative; }
.world-art > svg { display: block; width: 100%; height: auto; overflow: visible; }
.world .land { fill: none; stroke: #3a4775; stroke-width: 5.2; stroke-linecap: round; stroke-dasharray: 0 10; }
.world .mkt { fill: none; stroke: #f6c968; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 0 10; }
.world .arc { fill: none; stroke: rgba(246, 201, 104, .5); stroke-width: 2.2; stroke-linecap: round; }
.world .arc-flow { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 2 26; animation: flow 1.6s linear infinite; }
.world .edge { fill: #43c7e0; }
.world .edge-ring { fill: none; stroke: #43c7e0; stroke-opacity: .35; stroke-width: 2; }
.world .core-dot { fill: #fff; }
.world .core-ring { fill: none; stroke: #fff; stroke-width: 2.5; transform-box: fill-box; transform-origin: center; animation: ping 2.4s cubic-bezier(0, 0, .2, 1) infinite; }
.world .mkt-dot { fill: #f6c968; stroke: var(--hero-bg); stroke-width: 4; }
@keyframes ping { 0% { transform: scale(.6); opacity: .9; } 80%, 100% { transform: scale(2.6); opacity: 0; } }
.pin { position: absolute; transform: translate(-50%, -100%); margin-top: -14px; display: grid; justify-items: center; gap: 1px; padding: 6px 10px; border-radius: 10px; background: rgba(11, 16, 34, .86); border: 1px solid rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); white-space: nowrap; pointer-events: none; }
.pin b { font: 700 13.5px var(--display); color: #fff; letter-spacing: -.01em; }
.pin small { font: 10.5px var(--mono); color: var(--hero-muted); letter-spacing: .04em; }
.pin.core { border-color: rgba(255, 255, 255, .5); }
.pin.below { transform: translate(-50%, 0); margin-top: 16px; }
.world figcaption { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; padding: 12px 4px 0; border-top: 1px solid var(--hero-line); font: 12px var(--mono); color: var(--hero-muted); }
.world figcaption span { display: inline-flex; align-items: center; gap: 8px; }
.world figcaption i { width: 10px; height: 10px; border-radius: 50%; }
.world figcaption .k-core { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); }
.world figcaption .k-mkt { background: #f6c968; }
.world figcaption .k-edge { background: #43c7e0; width: 7px; height: 7px; }
.world figcaption .k-route { width: 18px; height: 0; border-radius: 0; border-top: 2px solid rgba(246, 201, 104, .7); }
.net-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.net-card { position: relative; padding: 20px 18px 18px; border-radius: 18px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .1); }
.net-card .nc-k { font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--lane, #f6c968); }
.net-card b { display: block; margin: 6px 0 6px; font: 700 20px/1.2 var(--display); color: #fff; letter-spacing: -.015em; }
.net-card p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--hero-muted); }
.net-note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 22px; font-size: 14.5px; color: var(--hero-muted); }
.net-note svg { flex: none; color: #f6c968; }
.net-note a { color: #fff; font-weight: 600; }

/* ---------- how it works: a metro line ---------- */
.how { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.how-intro { position: sticky; top: calc(var(--bar-h) + 28px); }
.line { position: relative; padding-left: 50px; margin: 0; list-style: none; }
.station { position: relative; padding-bottom: 30px; }
.station:last-child { padding-bottom: 0; }
.station::before { content: ""; position: absolute; z-index: 1; left: -48px; top: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--sheet); border: 6px solid var(--lane); }
/* each stop's segment runs in its own colour down to the next stop */
.station::after { content: ""; position: absolute; left: -35px; top: 28px; bottom: -4px; width: 6px; background: var(--lane); }
.station:last-child::after { display: none; }
.station h3 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; font-size: 24px; font-weight: 700; }
.station h3 .sn { font: 600 12.5px var(--mono); color: var(--lane); letter-spacing: .04em; }
.station h3 small { font: 500 15px var(--body); color: var(--muted); letter-spacing: 0; }
.station p { margin: 6px 0 0; color: var(--muted); max-width: 60ch; }
.station .pipeline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 12px 0 0; font: 12.5px var(--mono); }
.station .pipeline span { padding: 4px 10px; border-radius: 999px; background: var(--sheet); border: 1px solid var(--line); }

/* ---------- partner tools ---------- */
.tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 28px 56px; align-items: start; }
.tool-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.tool-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 16px; border-radius: 14px; background: var(--sheet); border: 1px solid var(--line); }
.tool-list b { display: block; font: 700 16px var(--display); letter-spacing: -.01em; }
.tool-list div > span { display: block; margin-top: 2px; font-size: 14.5px; color: var(--muted); line-height: 1.5; }
.code { background: var(--code-bg); color: var(--code-ink); border-radius: 16px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--code-ink) 8%, transparent); box-shadow: 0 40px 90px -40px rgba(10, 15, 50, .5); }
.code-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; font: 12px var(--mono); color: var(--code-muted); border-bottom: 1px solid color-mix(in srgb, var(--code-ink) 9%, transparent); }
.code-bar .dots { display: inline-flex; gap: 6px; }
.code-bar .dots i { width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--code-ink) 18%, transparent); }
.code pre { margin: 0; padding: 18px 18px; overflow: auto; font: 13px/1.7 var(--mono); }
.code pre code { background: none; color: inherit; padding: 0; font-size: inherit; }
.code .resp { border-top: 1px dashed color-mix(in srgb, var(--code-ink) 14%, transparent); }
.tk-key { color: #8ec4ff; } .tk-str { color: #a7e8b8; } .tk-num { color: #ffcd80; } .tk-kw { color: #f6a2d4; } .tk-com { color: #7a83aa; font-style: italic; } .tk-var { color: #ffd37e; }
.code-foot { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px 16px; }
.code-foot span { font: 11.5px var(--mono); color: var(--code-ink); padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--code-ink) 8%, transparent); }
.redacted { display: inline-block; vertical-align: middle; width: 9ch; height: 1.05em; border-radius: 4px; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--code-ink) 22%, transparent) 0 4px, color-mix(in srgb, var(--code-ink) 10%, transparent) 4px 8px); }

/* ---------- partner pack (gated) ---------- */
.pack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pack-card { position: relative; display: grid; gap: 8px; align-content: start; padding: 20px 18px 18px; border-radius: 18px; background: var(--sheet); border: 1px dashed color-mix(in srgb, var(--muted) 40%, var(--line)); overflow: hidden; }
.pack-card .pk-top { display: flex; align-items: center; justify-content: space-between; }
.pack-card .pk-ico { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.pack-card .pk-lock { display: inline-flex; align-items: center; gap: 6px; font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pack-card b { font: 700 18px/1.2 var(--display); letter-spacing: -.01em; }
.pack-card p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.pack-card .blur { display: grid; gap: 6px; margin-top: 6px; }
.pack-card .blur i { display: block; height: 9px; border-radius: 5px; background: color-mix(in srgb, var(--muted) 16%, transparent); }
.pack-card .blur i:nth-child(2) { width: 82%; } .pack-card .blur i:nth-child(3) { width: 64%; }

/* ---------- become a partner ---------- */
.cta-band { position: relative; isolation: isolate; overflow: hidden; border-radius: 28px; background: var(--hero-bg); color: var(--hero-ink); padding: 44px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 36px 56px; }
.cta-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(480px 300px at 0% 0%, rgba(122, 168, 255, .18), transparent 70%), radial-gradient(420px 300px at 100% 100%, rgba(255, 124, 181, .12), transparent 70%); }
.cta-band .eyebrow { color: #f6c968; }
.cta-band h2 { color: #fff; }
.cta-band .lead { color: var(--hero-muted); font-size: 17px; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 24px; border-radius: 20px; background: var(--sheet); color: var(--ink); }
.form .full { grid-column: 1 / -1; }
.form label, .form legend { display: block; font: 600 13px var(--body); margin-bottom: 6px; color: var(--ink); }
.form input, .form select, .form textarea { width: 100%; font: 15px var(--body); color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.form textarea { min-height: 96px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.checks { display: flex; flex-wrap: wrap; gap: 6px; }
.checks label { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 5px 11px 5px 6px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); font: 500 13.5px var(--body); cursor: pointer; user-select: none; }
.checks input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.checks label:has(input:checked) { color: var(--lane); background: var(--lane-soft); border-color: var(--lane); font-weight: 600; }
.checks label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.form .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.form .actions small { color: var(--muted); font-size: 13px; }
.form .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.form-done { grid-column: 1 / -1; display: none; padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); font-size: 14.5px; }
.form.sent .form-done { display: block; }

/* ---------- footer ---------- */
.foot { position: relative; margin-top: 72px; padding: 54px 0 34px; border-top: 1px solid var(--line); background: var(--sheet); }
.foot .lane-stripe { top: 0; bottom: auto; height: 4px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 28px; }
.foot p { color: var(--muted); font-size: 14.5px; max-width: 34ch; margin: 12px 0 0; }
.foot .foot-h { font: 700 12.5px var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.foot ul a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-size: 14.5px; }
.foot ul a:hover { color: var(--accent); }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); font: 12.5px var(--mono); color: var(--muted); }

/* ---------- home: platform card highlights ---------- */
.lc-points { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.lc-points li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 6px; font-size: 13.5px; line-height: 1.4; color: var(--ink); }
.lc-points li::before { content: ""; width: 6px; height: 6px; margin-top: .45em; border-radius: 1.5px; background: var(--lane); transform: rotate(45deg); }

/* ---------- platform pages ---------- */
.p-hero::after { background: radial-gradient(560px 380px at 78% 30%, color-mix(in srgb, var(--lane) 24%, transparent), transparent 70%), radial-gradient(460px 320px at 100% 100%, color-mix(in srgb, var(--lane) 14%, transparent), transparent 70%), radial-gradient(420px 280px at 0% 110%, rgba(255, 255, 255, .05), transparent 70%); }
.p-hero h1 { font-size: clamp(36px, 3.9vw, 56px); }
.p-hero h1 span { background: linear-gradient(90deg, var(--lane), color-mix(in srgb, var(--lane) 45%, #fff)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-note { margin: 16px 0 0; max-width: 34em; font-size: 14.5px; color: var(--hero-muted); }
.hero-note .ea-badge { margin-right: 8px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 18px; font: 12.5px var(--mono); color: var(--hero-muted); }
.crumbs a { color: var(--hero-muted); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs span[aria-current] { color: #fff; }
.kicker.pk { gap: 9px; padding: 4px 13px 4px 4px; color: #fff; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); font: 500 13.5px var(--body); }
.kicker.pk .to { width: auto; height: auto; background: none; border-radius: 0; font-style: normal; color: var(--hero-muted); }
.kicker.pk b { color: var(--lane); font-weight: 600; }
.facts.tags { gap: 8px; font: 12.5px var(--mono); }
.facts.tags li { display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); color: var(--hero-ink); }
.facts.tags li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lane); }
.flowfig .flowmap { width: 100%; height: auto; display: block; }
.map .eglyph { color: #cfd6f3; }
.map .node .nbox { fill: var(--hero-node); stroke: var(--lane); }
.map figcaption .k-core, .map figcaption .k-ext { width: 12px; height: 12px; border: 0; border-radius: 4px; }
.map figcaption .k-core { background: #fff; }
.map figcaption .k-ext { border: 1.5px solid rgba(255, 255, 255, .5); }
.flowfig figcaption span:first-child { flex-basis: 100%; color: #cfd6f3; }

/* market name → product name → your brand */
.naming-sect { padding: 34px 0 6px; }
.naming { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.naming li { position: relative; display: grid; gap: 4px; align-content: start; padding: 18px 20px; border-radius: 18px; background: var(--sheet); border: 1px solid var(--line); }
.naming li + li::before { content: ""; position: absolute; left: -14px; top: 50%; width: 14px; height: 4px; margin-top: -2px; background: var(--lane); }
.naming li + li::after { content: ""; position: absolute; left: -5px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--sheet); border: 3px solid var(--lane); z-index: 1; }
.naming li.ours { background: var(--lane-soft); border-color: var(--lane-line); }
.naming .nm-k { font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.naming li.ours .nm-k { color: var(--lane); }
.naming b { font: 800 clamp(20px, 2.2vw, 26px)/1.15 var(--display); letter-spacing: -.02em; }
.naming small { font-size: 14px; color: var(--muted); line-height: 1.45; }

/* features: one row per group, the group on the left and a ticked list on the right */
.fgroups { border-top: 1px solid var(--line); }
.fgroup { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 18px 64px; padding: 34px 0; border-bottom: 1px solid var(--line); }
.fg-head { align-self: start; padding-left: 16px; border-left: 3px solid var(--lane); }
.fg-k { display: flex; align-items: baseline; gap: 10px; font: 600 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fg-k b { color: var(--lane); font-weight: 600; }
.fg-head h3 { margin-top: 6px; font-size: clamp(22px, 2.2vw, 28px); font-weight: 800; letter-spacing: -.025em; }
.fg-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 40px; }
.fg-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; }
.fg-list .tick { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: var(--lane-soft); color: var(--lane); box-shadow: inset 0 0 0 1px var(--lane-line); }
.fg-list b { display: block; font: 600 16px/1.35 var(--body); }
.fg-list div > span { display: block; margin-top: 2px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }

/* who buys it, partner controls, the pack */
.sect.tint { background: linear-gradient(180deg, var(--lane-soft), var(--paper) 70%); border-block: 1px solid var(--lane-line); }
.fit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fit-card { display: grid; gap: 6px; align-content: start; padding: 20px; border-radius: 18px; background: var(--sheet); border: 1px solid var(--line); }
.fit-n { font: 600 12px var(--mono); color: var(--lane); }
.fit-card b { font: 700 19px/1.2 var(--display); letter-spacing: -.01em; }
.fit-card p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.ctl-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; align-items: stretch; }
.controls { margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.controls .roundel { width: 34px; height: 34px; }
.controls .roundel svg { width: 17px; height: 17px; }
.pack-panel { display: grid; gap: 10px; align-content: start; justify-items: start; padding: 22px; border-radius: 18px; background: var(--sheet); border: 1px dashed color-mix(in srgb, var(--muted) 40%, var(--line)); }
.pack-panel .pk-lock { display: inline-flex; align-items: center; gap: 7px; font: 600 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--lane); }
.pack-panel h3 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.pack-panel p { margin: 0; color: var(--muted); font-size: 15px; }
.pack-panel .blur { display: grid; gap: 6px; width: 100%; margin: 2px 0 6px; }
.pack-panel .blur i { display: block; height: 9px; border-radius: 5px; background: color-mix(in srgb, var(--muted) 16%, transparent); }
.pack-panel .blur i:nth-child(2) { width: 78%; } .pack-panel .blur i:nth-child(3) { width: 58%; }
.pack-panel .btn.primary { background: var(--lane); border-color: var(--lane); color: var(--on-lane); }

/* interchanges */
.pairs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pair-card { position: relative; display: grid; gap: 4px; align-content: start; padding: 20px 20px 18px; border-radius: 18px; background: var(--sheet); border: 1px solid var(--line); color: var(--ink); text-decoration: none; overflow: hidden; transition: border-color .15s, transform .15s, box-shadow .15s; }
.pair-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--lane); }
.pair-card:hover { border-color: var(--lane); transform: translateY(-2px); box-shadow: 0 16px 34px -22px color-mix(in srgb, var(--lane) 80%, transparent); }
.pc-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.pc-k { font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--lane); }
.pair-card b { font: 700 21px/1.15 var(--display); letter-spacing: -.015em; }
.pair-card small { font: 12px var(--mono); color: var(--muted); }
.pair-card p { margin: 6px 0 4px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.pc-go { font: 600 13px var(--body); color: var(--lane); }

.cta-band.slim { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.cta-band.slim .lead { margin-bottom: 0; }
.cta-band[data-lane]::after { background: radial-gradient(480px 300px at 0% 0%, color-mix(in srgb, var(--lane) 26%, transparent), transparent 70%), radial-gradient(420px 300px at 100% 100%, color-mix(in srgb, var(--lane) 14%, transparent), transparent 70%); }

@media (max-width: 1080px) {
  .fgroup { grid-template-columns: minmax(0, 1fr); }
  .ctl-grid { grid-template-columns: minmax(0, 1fr); }
  .cta-band.slim { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 880px) {
  .naming, .fit, .pairs { grid-template-columns: minmax(0, 1fr); }
  .naming li + li::before { left: 50%; top: -14px; width: 4px; height: 14px; margin: 0 0 0 -2px; }
  .naming li + li::after { left: 50%; top: -5px; margin: 0 0 0 -4px; }
}
@media (max-width: 640px) {
  .controls { grid-template-columns: minmax(0, 1fr); }
  .fg-list { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .fgroup { padding: 26px 0; }
}

/* ---------- contact page ---------- */
.c-hero { padding: 48px 0 62px; }
.c-hero h1 { font-size: clamp(38px, 4.4vw, 60px); }
.c-hero .intro { max-width: 36em; margin-bottom: 0; }
.contact-sect { padding-top: 48px; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: 28px 40px; align-items: start; }
.contact-main .form-h { font-size: 28px; font-weight: 800; letter-spacing: -.025em; margin-bottom: 4px; }
.form-alt { margin: 0 0 16px; color: var(--muted); font-size: 15px; }
.contact-main .form { padding: 26px; border: 1px solid var(--line); box-shadow: 0 30px 70px -45px rgba(10, 15, 50, .35); }
.contact-side { display: grid; gap: 14px; }
.side-card { display: grid; gap: 10px; justify-items: start; padding: 20px 22px; border-radius: 18px; background: var(--sheet); border: 1px solid var(--line); }
.side-card h2 { font: 700 12.5px var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.side-card p { margin: 0; color: var(--muted); font-size: 15px; }
.side-card .cta { gap: 8px; }
.side-mail { font-size: 14px !important; }
.line.compact { padding-left: 44px; margin-top: 4px; }
.line.compact .station { padding-bottom: 18px; }
.line.compact .station:last-child { padding-bottom: 0; }
.line.compact .station::before { left: -44px; width: 26px; height: 26px; border-width: 5px; }
.line.compact .station::after { left: -33px; top: 23px; width: 4px; }
.line.compact .station h3 { font-size: 17px; }
.line.compact .station p { margin-top: 2px; font-size: 14.5px; line-height: 1.5; }
.side-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.side-list li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 8px; font-size: 15px; line-height: 1.45; }
.side-list li::before { content: ""; width: 7px; height: 7px; margin-top: .5em; border-radius: 1.5px; transform: rotate(45deg); background: var(--signal); }
.side-note { display: flex; gap: 10px; margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--signal-soft); color: var(--ink); font-size: 14px; line-height: 1.5; }
.side-note svg { flex: none; margin-top: 2px; color: var(--signal); }
@media (max-width: 1080px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .contact-main .form { padding: 18px; }
}

/* ---------- platform spotlights: the features we lead with ---------- */
.spotlights { position: relative; isolation: isolate; overflow: hidden; background: var(--hero-bg); color: var(--hero-ink); padding: 76px 0 40px; }
.spotlights[data-lane] { --lane-soft: color-mix(in srgb, var(--lane) 16%, var(--hero-bg)); }
.spotlights { --c-cps: #7aa8ff; --c-ai: #b69aff; --c-sms: #4cd38a; --c-nms: #ff9b66; --c-trunks: #ff7cb5; --c-numbers: #43c7e0; --c-usage: #f0bd4f; --c-account: #aab4c8; --on-lane: #0b1022; }
.spotlights::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.4px); background-size: 24px 24px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
.spotlights::after { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(620px 420px at 85% 10%, color-mix(in srgb, var(--lane) 20%, transparent), transparent 70%), radial-gradient(560px 420px at 0% 70%, rgba(182, 154, 255, .14), transparent 70%); }
.spotlights .eyebrow { color: #f6c968; }
.spotlights .sect-head h2 { color: #fff; font-size: clamp(30px, 3.8vw, 46px); font-weight: 800; letter-spacing: -.035em; }
.spotlights .sect-head .lead { color: var(--hero-muted); }
.spot { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px 64px; align-items: center; padding: 44px 0; border-top: 1px solid var(--hero-line); }
.sect-head + .spot { border-top: 0; }
.spot hgroup { margin: 0; }
.spot hgroup .spot-k { margin-bottom: 14px; }
.spot.flip > .spot-copy { order: 2; }
.spot-k { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px; font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--lane); }
.ai-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 6px; border-radius: 999px; font: 700 10.5px var(--mono); letter-spacing: .06em; color: #0b1022; background: linear-gradient(90deg, #b69aff, #7aa8ff); }
.ai-badge svg { width: 11px; height: 11px; }
.spot h3 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; letter-spacing: -.035em; color: #fff; }
.spot h3 span { background: linear-gradient(90deg, var(--lane), color-mix(in srgb, var(--lane) 45%, #fff)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.spot-lead { margin: 14px 0 22px; font-size: 17.5px; color: var(--hero-muted); max-width: 34em; }
.spot-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.spot-points li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; }
.spot-points .tick { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; color: var(--lane); background: color-mix(in srgb, var(--lane) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lane) 45%, transparent); }
.spot-points b { display: block; color: #fff; font: 600 16px/1.35 var(--body); }
.spot-points span { display: block; margin-top: 2px; color: var(--hero-muted); font-size: 14.5px; line-height: 1.5; }
.spot-art { position: relative; }
.mock-note { margin: 10px 2px 0; font: 11.5px var(--mono); color: var(--hero-muted); text-align: right; }

.ea-badge { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font: 700 10.5px var(--mono); letter-spacing: .04em; white-space: nowrap; vertical-align: 2px; color: var(--signal); background: var(--signal-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--signal) 40%, transparent); }
.ea-badge.sm { font-size: 9.5px; padding: 0 6px; vertical-align: 1px; }
.spotlights .ea-badge, .hero .ea-badge { color: #f6c968; background: rgba(240, 189, 79, .14); box-shadow: inset 0 0 0 1px rgba(240, 189, 79, .45); }
.fg-list .ai-badge, .fg-list .ea-badge, .lc-points .ea-badge { margin-left: 4px; vertical-align: 2px; }
.spot-more { padding: 30px 0 34px; border-top: 1px solid var(--hero-line); }
.spot-more .spot-k { color: #f6c968; }
.more-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.more-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 16px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); }
.more-card .roundel { width: 32px; height: 32px; }
ul.more-grid { list-style: none; margin: 0; padding: 0; }
.more-card h4 { display: block; margin: 0; color: #fff; font: 600 15px/1.35 var(--body); letter-spacing: normal; }
.spot-more h3.spot-k { font: 600 12px var(--mono); letter-spacing: .08em; margin: 0 0 14px; }
.more-card div > span:not(.ai-badge):not(.ea-badge) { display: block; margin-top: 3px; color: var(--hero-muted); font-size: 13.5px; line-height: 1.5; }
@media (max-width: 1080px) { .more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .more-grid { grid-template-columns: minmax(0, 1fr); } }

/* illustrative product screens: always drawn in the portals' light theme */
.mock { --m-ink: #15193b; --m-muted: #5d6585; --m-line: #e4e8f2; --m-soft: #f5f7fc; --m-good: #0a7350; --m-bad: #b8283a; --m-warn: #8f5300;
  position: relative; border-radius: 16px; overflow: hidden; background: #fff; color: var(--m-ink); font: 13px/1.45 var(--body); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .65), 0 0 0 6px rgba(255, 255, 255, .03); }
.mock-bar { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #eef1f8; border-bottom: 1px solid var(--m-line); }
.mock-bar .dots { display: inline-flex; gap: 5px; }
.mock-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: #cfd5e6; }
.mock-bar .url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 10px; border-radius: 7px; background: #fff; border: 1px solid var(--m-line); font: 11.5px var(--mono); color: var(--m-muted); }
.mock-body { padding: 16px; display: grid; gap: 12px; }
.m-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.m-h b { font: 700 14.5px var(--body); }
.m-sub { font: 11px var(--mono); color: var(--m-muted); letter-spacing: .02em; }
.m-card { border: 1px solid var(--m-line); border-radius: 12px; padding: 12px; background: #fff; display: grid; gap: 8px; }
.m-card.soft { background: var(--m-soft); }
.m-k { font: 600 10.5px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--m-muted); }
.m-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.m-kpi { border: 1px solid var(--m-line); border-radius: 10px; padding: 9px 10px; display: grid; gap: 2px; }
.m-kpi b { font: 800 20px/1.1 var(--display); letter-spacing: -.02em; }
.m-kpi small { font-size: 11px; color: var(--m-muted); }
.m-kpi .up { color: var(--m-good); font: 600 10.5px var(--mono); }
.m-bars { display: grid; gap: 7px; }
.m-bar { display: grid; grid-template-columns: 112px minmax(0, 1fr) 30px; gap: 10px; align-items: center; font-size: 12px; }
.m-bar .track { height: 8px; border-radius: 4px; background: var(--m-soft); overflow: hidden; }
.m-bar .fill { display: block; height: 100%; border-radius: 4px; background: var(--fill, var(--lane)); }
.m-bar b { font: 600 12px var(--mono); text-align: right; }
.m-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.m-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font: 600 11px var(--body); background: var(--m-soft); border: 1px solid var(--m-line); color: var(--m-ink); white-space: nowrap; }
.m-chip.good { color: var(--m-good); background: color-mix(in srgb, var(--m-good) 10%, #fff); border-color: color-mix(in srgb, var(--m-good) 30%, #fff); }
.m-chip.bad { color: var(--m-bad); background: color-mix(in srgb, var(--m-bad) 9%, #fff); border-color: color-mix(in srgb, var(--m-bad) 28%, #fff); }
.m-chip.warn { color: var(--m-warn); background: color-mix(in srgb, var(--m-warn) 10%, #fff); border-color: color-mix(in srgb, var(--m-warn) 30%, #fff); }
.m-chip.lane { color: color-mix(in srgb, var(--lane) 55%, #000); background: color-mix(in srgb, var(--lane) 14%, #fff); border-color: color-mix(in srgb, var(--lane) 40%, #fff); }
.m-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.m-row > .grow { flex: 1; min-width: 0; }
.m-table { display: grid; border: 1px solid var(--m-line); border-radius: 12px; overflow: hidden; }
.m-tr { display: grid; grid-template-columns: var(--cols); gap: 10px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--m-line); font-size: 12px; min-width: 0; }
.m-tr > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-tr:first-child { border-top: 0; background: var(--m-soft); font: 600 10.5px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--m-muted); }
.m-live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--m-good); box-shadow: 0 0 0 0 color-mix(in srgb, var(--m-good) 50%, transparent); animation: mlive 1.6s infinite; flex: none; }
@keyframes mlive { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.m-quote { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 8px; font-size: 12.5px; }
.m-quote b { font: 600 10.5px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--m-muted); padding-top: 2px; }
.m-quote mark { background: color-mix(in srgb, var(--lane) 22%, #fff); color: inherit; border-radius: 3px; padding: 0 2px; }
.m-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
.m-field { display: grid; gap: 1px; font-size: 12.5px; }
.m-field small { font: 10.5px var(--mono); color: var(--m-muted); text-transform: uppercase; letter-spacing: .05em; }
.m-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.m-checks li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12.5px; }
.m-checks .ok, .m-checks .no { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font: 700 11px var(--body); color: #fff; }
.m-checks .ok { background: var(--m-good); }
.m-checks .no { background: var(--m-bad); }
.has-toast { position: relative; margin-bottom: 58px; }
.has-toast + .mock-note { margin-top: 16px; }
.m-toast { position: absolute; right: -14px; bottom: -58px; z-index: 2; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; max-width: 270px; padding: 11px 13px; border-radius: 14px; background: #0b1022; color: #eef1fb; border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .7); font-size: 12.5px; line-height: 1.4; }
.m-toast .ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--lane); color: #0b1022; }
.m-toast b { display: block; font-size: 12.5px; color: #fff; }
.m-toast small { color: #a9b1cf; }
.m-site { border: 1px solid var(--m-line); border-radius: 12px; overflow: hidden; }
.m-site-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 10px 12px; background: var(--m-soft); border-bottom: 1px solid var(--m-line); }
.m-site-top b { font: 800 13px var(--display); }
.m-site-top .m-row { flex-wrap: wrap; justify-content: flex-end; }
.m-phone { white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 9px; font: 700 13px var(--mono); color: #fff; background: var(--lane-ink, #b93a0a); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lane) 25%, transparent); }
.m-site-hero { padding: 14px 12px; display: grid; gap: 6px; }
.m-site-hero i { display: block; height: 8px; border-radius: 4px; background: var(--m-soft); }
.m-site-hero i:nth-child(1) { width: 70%; height: 11px; background: #dfe4f0; } .m-site-hero i:nth-child(3) { width: 55%; }
.m-callout { display: flex; align-items: center; gap: 8px; font: 600 11px var(--mono); color: var(--m-muted); }
.m-callout::before { content: ""; width: 26px; height: 0; border-top: 1.5px dashed var(--m-muted); }

@media (max-width: 1080px) {
  .spot { grid-template-columns: minmax(0, 1fr); }
  .spot.flip > .spot-copy { order: 0; }
  .m-toast { right: 8px; }
}
@media (max-width: 640px) {
  .spotlights { padding: 54px 0 20px; }
  .spot { padding: 32px 0; }
  .m-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-fields { grid-template-columns: minmax(0, 1fr); }
  .m-bar { grid-template-columns: 90px minmax(0, 1fr) 26px; }
  .has-toast { margin-bottom: 0; }
  .m-toast { position: relative; right: auto; bottom: auto; margin-top: 10px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .m-live { animation: none; } }

/* ---------- reveal on scroll ---------- */
.js .rv { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.js .rv.in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .lanes-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .net-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bar .signin { display: none; }
  .nav-link { padding: 7px 10px; }
}
@media (max-width: 1000px) {
  .nav { display: none; }
  .bar-end { margin-left: auto; }
  .bar .menu-btn { display: inline-grid; }
}
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .board { grid-template-columns: minmax(0, 1fr); }
  .net-head, .tools, .how, .cta-band { grid-template-columns: minmax(0, 1fr); }
  .how-intro { position: static; }
  .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 880px) {
  .lanes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shared-grid, .pack { grid-template-columns: minmax(0, 1fr); }
  .notes-card { grid-template-columns: minmax(0, 1fr); }
  .locked { max-width: none; }
  .pin { display: none; }
  .sect-head { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .hero .map { display: none; }
  .stops { grid-template-columns: 1fr; gap: 14px; }
  .stops::before { left: 9px; right: auto; top: 11px; bottom: 11px; width: 4px; height: auto; }
  .stops li { grid-template-columns: 22px minmax(0, 1fr); justify-items: start; text-align: left; column-gap: 12px; row-gap: 0; padding: 0; }
  .stops .dot { grid-row: span 2; }
}
@media (max-width: 640px) {
  :root { --bar-h: 56px; }
  .wrap { padding-inline: 16px; }
  .bar-in { padding-inline: 12px; gap: 6px; }
  .bar #theme { display: none; }
  .mm-plats, .mm-links { grid-template-columns: minmax(0, 1fr); }
  .bar .cta-btn { padding: 7px 11px; }
  .hero { padding: 40px 0 60px; }
  .sect { padding: 54px 0; }
  .lanes-grid, .net-cards { grid-template-columns: minmax(0, 1fr); }
  .board { padding: 24px 18px 20px 24px; border-radius: 20px; }
  .cta-band { padding: 26px 18px; border-radius: 20px; }
  .form { grid-template-columns: 1fr; padding: 18px; }
  .world { padding: 10px; border-radius: 18px; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
  .mark .word { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .flow, .world .arc-flow, .world .core-ring { animation: none; }
  .world .arc-flow, .flow { display: none; }
  .js .rv { opacity: 1; transform: none; transition: none; }
  .lane-card, .btn { transition: none; }
}