@font-face {
font-family: "Instrument Sans";
src: url("/assets/fonts/instrument-sans-latin-wght-normal.2ee17598a9.woff2") format("woff2");
font-weight: 400 700; font-style: normal; font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "IBM Plex Mono";
src: url("/assets/fonts/ibm-plex-mono-latin-500-normal.01d2854474.woff2") format("woff2");
font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Instrument Sans Fallback";
src: local("Arial");
size-adjust: 102.74%; ascent-override: 94.42%; descent-override: 24.33%; line-gap-override: 0%;
}
@font-face {
font-family: "IBM Plex Mono Fallback";
src: local("Courier New");
size-adjust: 100%; ascent-override: 102.5%; descent-override: 27.5%; line-gap-override: 0%;
}
:root {
color-scheme: light;
--navy-950: #0B1533;
--navy-900: #13214A;
--navy-800: #1E2F63;
--navy-700: #2A3F7E;
--blue-700: #3350A8;
--blue-600: #4A69BD;
--blue-500: #6F8CD0;
--blue-400: #8FA8DC;
--blue-300: #AEBEDE;
--blue-200: #CDD8EE;
--blue-100: #E4EAF7;
--blue-50:  #F1F4FB;
--slate-700: #414D68;
--slate-600: #56627F;
--slate-500: #6B7894;
--slate-400: #8D99B3;
--slate-300: #BCC5D6;
--slate-200: #DCE2EC;
--slate-100: #EBEFF5;
--slate-50:  #F4F7FB;
--white:     #FFFFFF;
--petrol-700: #0E6373;
--petrol-500: #17879A;
--petrol-100: #E0F2F4;
--gold-700:   #855C12;
--gold-500:   #C08A2E;
--gold-100:   #F8EFDB;
--red-700:    #B3261E;
--red-100:    #FBE9E7;
--color-bg:            var(--white);
--color-bg-subtle:     var(--slate-50);
--color-bg-tint:       var(--blue-50);
--color-bg-inverse:    var(--navy-900);
--color-surface:       var(--white);
--gradient-hero:  linear-gradient(180deg, var(--blue-50) 0%, var(--white) 100%);
--gradient-panel: linear-gradient(135deg, var(--blue-100) 0%, var(--slate-50) 55%, var(--white) 100%);
--color-text:            var(--navy-900);
--color-text-secondary:  var(--slate-700);
--color-text-muted:      var(--slate-600);
--color-text-inverse:    var(--white);
--color-link:            var(--blue-700);
--color-link-hover:      var(--navy-900);
--color-action:          var(--navy-900);
--color-action-hover:    var(--navy-700);
--color-action-active:   var(--navy-950);
--color-on-action:       var(--white);
--color-action-disabled-bg:   var(--slate-200);
--color-action-disabled-text: var(--slate-600);
--color-action-soft:     var(--slate-100);
--color-action-soft-active: var(--slate-200);
--color-focus:           var(--blue-600);
--color-border:          var(--slate-200);
--color-border-control:  var(--slate-500);
--color-border-inverse:  rgba(255, 255, 255, 0.36);
--color-brand:        var(--blue-400);
--color-pin:          var(--gold-500);
--color-zone-fill:    var(--blue-50);
--color-zone-line:    var(--blue-500);
--color-rail:         var(--slate-400);
--color-value:        var(--blue-600);
--plate-1-side-2: #0D1838;
--plate-2-side-2: #5977C4;
--plate-3-side-2: #BAC8E4;
--color-live-fg:     var(--petrol-700);  --color-live-bg:     var(--petrol-100);
--color-pending-fg:  var(--gold-700);    --color-pending-bg:  var(--gold-100);
--color-planned-fg:  var(--slate-700);   --color-planned-bg:  var(--slate-100);
--color-error-fg:    var(--red-700);     --color-error-bg:    var(--red-100);
--color-notice-fg:   var(--blue-700);    --color-notice-bg:   var(--blue-50);
--font-sans: "Instrument Sans", "Instrument Sans Fallback", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
--font-mono: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Courier New", monospace;
--text-display: clamp(2.5rem, 1.75rem + 3.333vw, 4.75rem);
--text-h1:      clamp(2.25rem, 1.75rem + 2.222vw, 3.75rem);
--text-h2:      clamp(1.875rem, 1.5rem + 1.667vw, 3rem);
--text-h3:      clamp(1.375rem, 1.25rem + 0.556vw, 1.75rem);
--text-lead:    clamp(1.125rem, 1.042rem + 0.37vw, 1.375rem);
--text-body:    1.0625rem;
--text-small:   0.9375rem;
--text-micro:   0.8125rem;
--space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
--space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;  --space-9: 96px;
--space-section: clamp(4rem, 2.5rem + 6.667vw, 8.5rem);
--gutter:        clamp(1.25rem, 5vw, 3rem);
--grid-gap:      clamp(1rem, 2vw, 1.5rem);
--container:        1200px;
--container-narrow: 760px;
--header-h:         72px;
--radius-sm:   6px;
--radius-md:   12px;
--radius-lg:   24px;
--radius-pill: 999px;
--shadow-1: 0 1px 2px rgba(19, 33, 74, 0.06), 0 1px 1px rgba(19, 33, 74, 0.04);
--shadow-2: 0 12px 32px -8px rgba(19, 33, 74, 0.16), 0 2px 6px rgba(19, 33, 74, 0.06);
--dur-fast: 160ms;
--dur-base: 240ms;
--dur-slow: 600ms;
--ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
--ease-in-out: cubic-bezier(0.6, 0, 0.2, 1);
}
@media (max-width: 1023.98px) { :root { --header-h: 60px; } }
.on-dark {
--color-text:            var(--white);
--color-text-secondary:  var(--blue-200);
--color-text-muted:      var(--blue-200);
--color-link:            var(--blue-300);
--color-link-hover:      var(--white);
--color-action:          var(--white);
--color-action-hover:    var(--blue-100);
--color-action-active:   var(--blue-200);
--color-on-action:       var(--navy-900);
--color-action-soft:     rgba(255, 255, 255, 0.10);
--color-action-soft-active: rgba(255, 255, 255, 0.18);
--color-focus:           var(--white);
--color-border:          var(--color-border-inverse);
color: var(--color-text);
}
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%; text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 24px);
}
body {
margin: 0;
font-family: var(--font-sans); font-size: var(--text-body); line-height: 1.55; font-weight: 400;
color: var(--color-text); background: var(--color-bg);
font-variant-numeric: tabular-nums;
overflow-wrap: break-word; hyphens: manual;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol, dl, figure, fieldset, legend { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
main:focus { outline: none; }
h1, h2, h3, h4 { font-weight: 600; text-wrap: balance; }
p, li { text-wrap: pretty; }
.display { font-size: var(--text-display); line-height: 1.04; letter-spacing: -0.03em; }
h1, .h1  { font-size: var(--text-h1); line-height: 1.08; letter-spacing: -0.025em; }
h2, .h2  { font-size: var(--text-h2); line-height: 1.12; letter-spacing: -0.02em; max-width: 20em; }
h3, .h3  { font-size: var(--text-h3); line-height: 1.2; letter-spacing: -0.01em; }
h4       { font-size: var(--text-body); line-height: 1.4; }
.lead    { font-size: var(--text-lead); line-height: 1.45; color: var(--color-text-secondary); max-width: 56ch; }
.small   { font-size: var(--text-small); }
.muted   { color: var(--color-text-muted); }
strong   { font-weight: 600; }
.eyebrow {
font-family: var(--font-mono); font-weight: 500; font-size: var(--text-micro); line-height: 1.3;
letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); max-width: none;
}
a { color: var(--color-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--color-link-hover); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a, button, input, select, textarea, summary { transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.visually-hidden {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
clip-path: inset(50%); white-space: nowrap; border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon--16 { width: 16px; height: 16px; }
.icon--18 { width: 18px; height: 18px; }
.icon--20 { width: 20px; height: 20px; }
.skip-link {
position: absolute; left: var(--gutter); top: 8px; z-index: 200;
transform: translateY(-200%);
}
.skip-link:focus { transform: none; }
.tbp { background: var(--gold-100); color: var(--navy-900); outline: 1px dashed var(--gold-700); outline-offset: 1px; border-radius: 2px; padding: 0 2px; }
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - 2 * var(--gutter), var(--container-narrow)); }
.section { padding-block: var(--space-section); }
.section--subtle { background: var(--color-bg-subtle); }
.section--tint { background: var(--color-bg-tint); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section__head { margin-bottom: var(--space-6); }
.section__head > * + * { margin-top: var(--space-4); }
.section__head .lead { margin-top: var(--space-5); }
.section__head--center { text-align: center; }
.section__head--center > * { margin-inline: auto; }
.section__foot { margin-top: var(--space-6); }
.section__foot--rule { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.section__foot--center { text-align: center; }
.section__note { max-width: 960px; margin-inline: auto; color: var(--color-text-secondary); }
.section__note > p { max-width: 68ch; }
.section__head + .features__list { margin-top: 0; }
.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }
.gap-top { margin-top: var(--space-8); }
.cols-2 { display: grid; gap: var(--space-6) var(--space-7); }
@media (min-width: 768px) {
.section__head { margin-bottom: var(--space-7); }
.cols-2 { grid-template-columns: 1fr 1fr; }
}
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 48px; min-width: 120px; padding: 8px 22px;
border: 1.5px solid transparent; border-radius: var(--radius-sm);
font-size: 1rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.005em; text-align: center; text-decoration: none;
cursor: pointer;
}
.btn .icon { width: 20px; height: 20px; }
.btn--primary { background: var(--color-action); color: var(--color-on-action); }
.btn--primary:hover { background: var(--color-action-hover); color: var(--color-on-action); }
.btn--primary:active { background: var(--color-action-active); transform: translateY(1px); }
.btn--secondary { background: transparent; border-color: var(--color-action); color: var(--color-text); }
.btn--secondary:hover { background: var(--color-action-soft); color: var(--color-text); }
.btn--secondary:active { background: var(--color-action-soft-active); }
.on-dark .btn--secondary { border-color: var(--color-border-inverse); }
.btn--lg { min-height: 56px; padding-inline: 28px; font-size: var(--text-body); }
.btn--block { display: flex; width: 100%; }
.btn[aria-disabled="true"], .btn:disabled {
background: var(--color-action-disabled-bg); color: var(--color-action-disabled-text); border-color: transparent; cursor: not-allowed; transform: none;
}
.btn-row { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 480px) { .btn-row { flex-direction: row; flex-wrap: wrap; } }
.link-arrow {
display: inline-flex; align-items: center; gap: 6px; padding-block: 12px;
font-weight: 600; color: var(--color-link); text-decoration: none;
}
.link-arrow .icon { width: 18px; height: 18px; transition: transform var(--dur-fast) var(--ease-out); }
.link-arrow:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.link-arrow:hover .icon { transform: translateX(4px); }
.link-arrow:active { color: var(--color-link-hover); }
.link-list { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
.site-header {
position: sticky; top: 0; z-index: 100; height: var(--header-h);
background: var(--color-bg); border-bottom: 1px solid var(--color-border);
}
.site-header__bar { display: flex; align-items: center; height: 100%; gap: 12px; }
.logo { display: inline-flex; align-items: center; min-height: 44px; padding-block: 4px; text-decoration: none; color: var(--navy-900); flex: none; }
.logo__svg { height: 32px; width: auto; }
.logo__mark { color: var(--color-brand); fill: none; stroke: currentColor; stroke-width: 4.5; stroke-linecap: round; }
.logo__streak { fill: currentColor; stroke: none; }
.logo__word { fill: none; stroke: currentColor; stroke-width: 4.2; stroke-linecap: butt; stroke-linejoin: round; }
.nav__list { display: flex; }
.nav__item { position: relative; }
.nav__trigger, .nav__plain {
display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 10px 14px;
border: 0; border-radius: var(--radius-sm); background: transparent;
font-size: var(--text-body); font-weight: 500; line-height: 1; letter-spacing: -0.005em;
color: var(--color-text); text-decoration: none; white-space: nowrap;
}
.nav__trigger .icon { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-out); }
.nav__trigger:hover, .nav__plain:hover, .nav__item.is-open > .nav__trigger { background: var(--slate-100); color: var(--color-text); }
.nav__item.is-open > .nav__trigger .icon { transform: rotate(180deg); }
.nav__trigger.is-current, .nav__plain[aria-current="page"] { font-weight: 600; }
.nav__trigger.is-current .nav__word, .nav__plain[aria-current="page"] .nav__word { box-shadow: 0 8px 0 -6px var(--navy-900); padding-bottom: 6px; margin-bottom: -6px; }
.nav__link {
display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 12px;
border-radius: var(--radius-sm); text-decoration: none; color: var(--color-text);
}
.nav__link:hover, .nav__link:focus-visible { background: var(--color-bg-tint); color: var(--color-text); }
.nav__link[aria-current="page"] .nav__title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.nav__copy { flex: 1; min-width: 0; }
.nav__title { display: block; font-weight: 600; line-height: 1.3; }
.nav__desc { display: block; margin-top: 2px; font-size: var(--text-small); line-height: 1.4; color: var(--color-text-muted); }
.nav__note { padding: 8px 12px 6px; font-size: var(--text-small); line-height: 1.4; color: var(--color-text-muted); }
.menu-toggle {
display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; margin-right: -10px;
border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-text);
}
.menu-toggle:hover { background: var(--slate-100); color: var(--color-text); }
.menu-toggle .icon--close, .menu-open .menu-toggle .icon--menu { display: none; }
.menu-open .menu-toggle .icon--close { display: block; }
.site-menu__close { display: none; }
@media (max-width: 1023.98px) {
.site-menu {
display: none; position: fixed; inset: var(--header-h) 0 0 0; z-index: 99;
flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
background: var(--color-bg);
}
.menu-open .site-menu, .site-menu:target { display: flex; }
.menu-open, .menu-open body { overflow: hidden; }
.nav { flex: 1 0 auto; padding: 0 var(--gutter) var(--space-5); }
.nav__list { flex-direction: column; }
.nav__item { border-bottom: 1px solid var(--color-border); }
.nav__trigger, .nav__plain { display: flex; justify-content: space-between; width: 100%; min-height: 56px; padding: 10px 0; border-radius: 0; font-size: 1.25rem; font-weight: 600; }
.nav__trigger:hover, .nav__plain:hover, .nav__item.is-open > .nav__trigger { background: transparent; }
.nav__trigger .icon { width: 20px; height: 20px; }
.nav__menu { padding: 0 0 12px 16px; }
.js .nav .nav__item:not(.is-open) > .nav__menu { display: none; }
.nav__link { padding-inline: 0; }
.nav__link:hover { background: transparent; }
.nav__title { font-weight: 400; }
.nav__desc { display: none; }
.site-menu__actions {
position: sticky; bottom: 0; display: flex; flex-direction: column; gap: 12px;
padding: 16px var(--gutter); background: var(--color-bg); border-top: 1px solid var(--color-border);
}
.site-menu__actions > .btn { order: -1; min-height: 52px; }
.site-menu__actions .nav__item { border: 0; }
.site-menu__actions .nav__trigger { display: none; }
.site-menu__actions .nav__menu { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0; }
.site-menu__actions .nav__link {
justify-content: center; text-align: center; min-height: 48px; padding: 8px 12px; gap: 6px;
border: 1.5px solid var(--color-action); border-radius: var(--radius-sm);
}
.site-menu__actions .nav__link:hover { background: var(--slate-100); }
.site-menu__actions .nav__copy { flex: 0 1 auto; }
.site-menu__actions .nav__title { font-weight: 600; font-size: 1rem; }
.site-menu__actions .nav__note { grid-column: 1 / -1; padding: 0; }
html:not(.js) .site-menu:target .site-menu__close { display: block; padding: 14px var(--gutter); font-weight: 600; }
}
@media (min-width: 1024px) {
.logo__svg { height: 36px; }
.menu-toggle { display: none; }
.site-menu { display: flex; align-items: center; flex: 1; margin-left: 28px; }
.nav__list { gap: 4px; }
.site-menu__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.site-menu__actions .btn { min-height: 44px; }
.nav__menu {
position: absolute; left: 0; top: calc(100% + 22px); z-index: 10; width: 340px; padding: 8px;
background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-2);
visibility: hidden; opacity: 0; transform: translateY(-4px);
transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
}
.nav__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -24px; height: 24px; }
.nav__menu--right { left: auto; right: 0; width: 260px; }
.nav__item.is-open > .nav__menu,
html:not(.js) .nav__item:hover > .nav__menu,
html:not(.js) .nav__item:focus-within > .nav__menu {
visibility: visible; opacity: 1; transform: none; transition-delay: 0s;
}
}
@media (min-width: 1024px) and (max-width: 1199.98px) {
.site-menu { margin-left: 16px; }
.nav__list { gap: 0; }
.nav__trigger, .nav__plain { padding-inline: 10px; gap: 4px; font-size: 1rem; }
.site-menu__actions { gap: 4px; }
.site-menu__actions .btn { padding-inline: 16px; }
}
.hero { background: var(--gradient-hero); padding-block: clamp(48px, 7vw, 104px); overflow: hidden; }
.hero--plain { padding-block: clamp(48px, 6vw, 96px); }
.hero--flat { background: var(--color-bg); }
.hero--head { padding-block: 64px 32px; }
.hero__text > .eyebrow { margin-bottom: var(--space-4); }
.hero__text > .lead, .hero__text > .hero__body { margin-top: var(--space-5); }
.hero__body { color: var(--color-text-secondary); max-width: 68ch; }
.hero__body > * + * { margin-top: var(--space-4); }
.hero__text > .btn-row { margin-top: 40px; }
.hero__text > h1 + .eyebrow { margin: var(--space-4) 0 0; }
.hero__text > .link-list { margin-top: var(--space-4); }
.hero__text > .link-list + .btn-row { margin-top: var(--space-5); }
.hero__text .display { max-width: 12em; }
.hero__visual { margin-top: 40px; }
.hero--center .hero__text { max-width: var(--container-narrow); margin-inline: auto; text-align: center; }
.hero--center .hero__text > * { margin-inline: auto; }
.hero--center .lead { max-width: 34ch; }
.hero--center .hero__body { max-width: 56ch; }
.hero--center .btn-row, .hero--center .link-list { justify-content: center; }
.hero--decor .hero__text { max-width: 960px; }
.hero__decor { display: none; }
.hero--left .hero__text { max-width: 820px; }
.hero--center + .section, .hero--left + .section { padding-top: var(--space-8); }
.hero__visual--scene { overflow: hidden; margin-inline: calc(var(--gutter) * -1); }
.hero__visual--scene > svg { width: 154%; max-width: none; margin-left: -24.3%; margin-top: 0; }
.hero__visual--stack { max-width: 440px; margin-inline: auto; }
@media (min-width: 768px) {
.hero--center .lead { max-width: 56ch; }
.hero__visual--scene { overflow: visible; max-width: 600px; margin-inline: auto; }
.hero__visual--scene > svg { width: 100%; margin: 0; }
}
@media (min-width: 1024px) {
.hero--split .hero__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: center; }
.hero--split .hero__text { grid-column: 1 / 8; }
.hero--split .hero__visual { grid-column: 8 / 13; margin: 0; width: 100%; max-width: none; }
.hero--scene { padding-bottom: 0; }
.hero--scene .hero__text { grid-column: 1 / 7; }
.hero--scene .hero__visual { grid-column: 7 / 13; }
.hero--visual-left .hero__text { grid-column: 7 / 13; grid-row: 1; }
.hero--visual-left .hero__visual { grid-column: 1 / 6; grid-row: 1; }
.hero--decor { position: relative; display: flex; align-items: center; min-height: 560px; }
.hero--decor > .container { position: relative; }
.hero__decor { display: block; position: absolute; top: 0; height: 100%; width: min(24vw, 340px); pointer-events: none; }
.hero__decor--left { left: 0; }
.hero__decor--right { right: 0; }
}
@media (min-width: 1280px) {
.hero--split .hero__visual--scene { margin-right: -48px; width: calc(100% + 48px); }
}
@media (min-width: 1440px) {
.hero--split .hero__visual--scene { margin-right: -96px; width: calc(100% + 96px); }
}
.features__intro > * + * { margin-top: var(--space-4); }
.features__intro .lead { margin-top: var(--space-5); }
.features__intro .btn, .features__intro .link-arrow { margin-top: var(--space-5); }
.features__intro p:not(.lead):not(.eyebrow) { color: var(--color-text-secondary); max-width: 68ch; }
.features__list { display: grid; gap: var(--space-6); counter-reset: feature; margin-top: var(--space-6); }
.feature { counter-increment: feature; }
.feature::before {
content: counter(feature, decimal-leading-zero); display: block; padding-bottom: 10px; margin-bottom: var(--space-4);
border-bottom: 1px solid var(--color-border);
font-family: var(--font-mono); font-weight: 500; font-size: var(--text-micro); letter-spacing: 0.08em; color: var(--color-link);
}
.feature--plain::before { content: none; }
.feature p { margin-top: var(--space-2); color: var(--color-text-secondary); }
.features__list--row .feature h3 { font-size: var(--text-body); line-height: 1.4; letter-spacing: 0; }
.features__list--row .feature p { font-size: var(--text-small); }
@media (min-width: 480px) { .features__list--row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 768px) { .features:not(.features--stacked) .features__list:not(.features__list--row) { grid-template-columns: 1fr 1fr; gap: var(--space-7) var(--space-6); } }
@media (min-width: 1024px) {
.features { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: start; }
.features__intro { grid-column: 1 / 6; position: sticky; top: calc(var(--header-h) + 32px); }
.features > .features__list { grid-column: 7 / 13; margin-top: 0; }
.features__list--row { grid-template-columns: repeat(4, 1fr); }
.features--stacked > .features__list { grid-template-columns: 1fr; gap: var(--space-6); }
}
.cards { display: grid; gap: var(--space-4); grid-auto-rows: 1fr; counter-reset: card; }
.card {
position: relative; display: flex; flex-direction: column; padding: var(--space-5);
background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
counter-increment: card;
}
.cards--numbered > .card::before {
content: counter(card, decimal-leading-zero); margin-bottom: 20px;
font-family: var(--font-mono); font-weight: 500; font-size: var(--text-micro); letter-spacing: 0.08em; color: var(--color-link);
}
.card > .eyebrow { margin-bottom: 20px; }
.card h3 + p, .card h3 + ul { margin-top: var(--space-3); }
.card p { color: var(--color-text-secondary); }
.card__action { margin-top: auto; padding-top: var(--space-5); }
.card__action .link-arrow::after, .card__action .btn--cover::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-md); }
.card:has(.link-arrow):hover { border-color: var(--blue-300); box-shadow: var(--shadow-1); }
.card:has(.link-arrow):hover .icon { transform: translateX(4px); }
.card:has(.link-arrow):active { background: var(--color-bg-subtle); }
.card:has(.link-arrow:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.card .link-arrow:focus-visible { outline: none; }
.card--tint { background: var(--color-bg-tint); border-color: var(--blue-200); }
.card.card--media { padding-top: 0; overflow: hidden; }
.card__media { aspect-ratio: 16 / 10; margin: 0 calc(var(--space-5) * -1) var(--space-5); background: var(--color-bg-tint); overflow: hidden; }
@media (min-width: 768px) {
.card { padding: var(--space-6); }
.card__media { margin: 0 calc(var(--space-6) * -1) var(--space-6); }
.cards { gap: var(--grid-gap); }
.cards--2 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }
.checklist > li { position: relative; padding-left: 32px; }
.checklist > li + li { margin-top: var(--space-4); }
.checklist > li::before {
content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px;
background: var(--color-link);
-webkit-mask: url("/assets/img/check.c0ea0a1d8d.svg") center / contain no-repeat; mask: url("/assets/img/check.c0ea0a1d8d.svg") center / contain no-repeat;
}
.checklist--lead > li { font-size: var(--text-lead); line-height: 1.45; }
.checklist--lead > li::before { top: 5px; }
.tile { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 1 / 1; display: grid; place-items: center; }
.tile--small { aspect-ratio: 4 / 3; }
.tile--navy { background: var(--navy-900); }
.tile--light { background: var(--color-bg-tint); border: 1px solid var(--color-border); }
.tile > svg { width: 84%; }
.tile-pair { position: relative; aspect-ratio: 1 / 1.05; }
.tile-pair > .tile { position: absolute; }
.tile-pair > .tile:first-child { width: 82%; right: 0; top: 0; }
.tile-pair > .tile:last-child { width: 64%; left: 0; top: 34%; box-shadow: var(--shadow-2); outline: 6px solid var(--color-bg); }
@media (min-width: 768px) {
.tile-pair { aspect-ratio: 1 / 1; }
.tile-pair > .tile:first-child { width: 78%; }
.tile-pair > .tile:last-child { width: 62%; }
}
.split { display: grid; gap: var(--space-7); }
.split__body > * + * { margin-top: var(--space-6); }
.split__body .feature p { margin-top: var(--space-2); }
@media (min-width: 1024px) {
.split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: center; }
.split__media { grid-column: 1 / 7; }
.split__body { grid-column: 8 / 13; }
}
.tile--crop { display: block; }
.tile--crop > svg { width: 135%; max-width: none; margin: -8% 0 0 -12%; }
.tile--small.tile--crop > svg { width: 118%; margin: 0 0 0 -9%; }
@media (max-width: 1023.98px) { .split__media { display: none; } }
.hero__art { width: min(100%, 240px); margin: 0 auto var(--space-5); }
@media (min-width: 768px) { .hero__art { width: 320px; } }
.doc-card {
display: grid; gap: var(--space-4) var(--space-5); max-width: 760px; padding: var(--space-5);
grid-template-columns: 64px 1fr; align-items: center;
background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
.doc-card__icon {
display: grid; place-items: center; align-content: center; gap: 4px; width: 64px; height: 80px;
background: var(--color-bg-tint); border-radius: 6px; color: var(--color-link);
font-family: var(--font-mono); font-weight: 500; font-size: var(--text-micro); letter-spacing: 0.08em;
}
.doc-card__icon .icon { width: 28px; height: 28px; }
.doc-card__body > * + * { margin-top: var(--space-2); }
.doc-card__body p { font-size: var(--text-small); color: var(--color-text-secondary); }
.doc-card__body h3 { font-size: var(--text-body); line-height: 1.4; letter-spacing: 0; margin-top: var(--space-5); }
.doc-card__body .checklist { margin-top: var(--space-3); }
.doc-card__action p { margin-top: var(--space-3); font-size: var(--text-small); color: var(--color-text-muted); }
.doc-card--stack { align-items: start; }
.doc-card__action, .doc-card__more { grid-column: 1 / -1; }
.doc-card__action .btn { display: flex; }
@media (min-width: 768px) {
.doc-card { padding: var(--space-6); grid-template-columns: 64px 1fr auto; }
.doc-card__action { grid-column: auto; }
.doc-card--stack .doc-card__action { grid-column: 2 / -1; }
.doc-card--stack .doc-card__action .btn { display: inline-flex; }
}
.compare { display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .compare { grid-template-columns: 1fr 1fr; gap: var(--grid-gap); } }
.facts { display: grid; }
.facts > * { padding-block: var(--space-5); }
.facts > * + * { border-top: 1px solid var(--color-border); }
.facts > * > * + * { margin-top: var(--space-2); }
.facts p:not(.eyebrow) { color: var(--color-text-secondary); }
@media (min-width: 768px) {
.facts { grid-template-columns: 1fr 1fr; }
.facts > * { padding: 0 var(--space-6); }
.facts > *:first-child { padding-left: 0; }
.facts > * + * { border-top: 0; border-left: 1px solid var(--color-border); }
}
.keywords { display: grid; column-gap: var(--space-6); counter-reset: keyword; }
.keywords > li {
display: flex; align-items: center; min-height: 56px; padding-block: 12px; border-top: 1px solid var(--color-border);
font-weight: 600; line-height: 1.4; counter-increment: keyword;
}
.keywords > li::before {
content: counter(keyword, decimal-leading-zero); flex: none; width: 40px;
font-family: var(--font-mono); font-weight: 500; font-size: var(--text-micro); letter-spacing: 0.08em; color: var(--color-text-muted);
}
@media (min-width: 600px) { .keywords { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .keywords { grid-template-columns: repeat(3, 1fr); } }
.rows > * { padding-block: 40px; border-top: 1px solid var(--color-border); }
.rows__label > * + * { margin-top: var(--space-3); }
.rows__body { margin-top: var(--space-4); color: var(--color-text-secondary); }
.rows__body > * + * { margin-top: var(--space-4); }
@media (min-width: 1024px) {
.rows > * { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); padding-block: var(--space-7); }
.rows__label { grid-column: 1 / 5; }
.rows__body { grid-column: 6 / 13; margin-top: 0; }
}
.num-list { display: grid; gap: var(--space-6); counter-reset: num; }
.num-list > li { position: relative; padding-left: 46px; counter-increment: num; }
.num-list > li::before {
content: counter(num); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 30px; height: 30px;
border-radius: 50%; background: var(--navy-900); color: var(--white);
font-family: var(--font-mono); font-weight: 500; font-size: 1rem;
}
.num-list > li > * + * { margin-top: var(--space-2); }
.num-list p { color: var(--color-text-secondary); }
.num-list__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
@media (min-width: 768px) { .num-list--2 { grid-template-columns: 1fr 1fr; gap: var(--space-7) var(--space-6); } }
.flywheel { display: grid; gap: var(--space-6); }
.flywheel__ring { width: 100%; max-width: 280px; margin-inline: auto; }
@media (min-width: 1024px) {
.flywheel { grid-template-columns: 1fr 400px 1fr; align-items: center; gap: var(--space-7); }
.flywheel__ring { max-width: 400px; grid-column: 2; grid-row: 1; }
}
.legend { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: var(--space-4); font-size: var(--text-small); color: var(--color-text-secondary); }
.legend > * { display: inline-flex; align-items: center; gap: 8px; }
.figure > svg { width: 100%; height: auto; }
.figure__wide { display: none; }
@media (min-width: 1024px) { .figure__wide { display: block; } .figure__narrow { display: none; } }
.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { font-size: var(--text-h3); line-height: 1.2; letter-spacing: -0.01em; margin-top: var(--space-7); }
.prose h3 { font-size: 1.1875rem; line-height: 1.3; letter-spacing: 0; margin-top: var(--space-6); }
.prose > :first-child { margin-top: 0; }
.prose ul { list-style: disc; padding-left: 1.25em; }
.prose ol { list-style: decimal; padding-left: 1.25em; }
.prose li + li { margin-top: var(--space-2); }
.prose p, .prose li { color: var(--color-text-secondary); }
.prose__lead { font-size: var(--text-h3); line-height: 1.35; letter-spacing: -0.01em; color: var(--color-text) !important; max-width: 30em; }
.table-scroll { overflow-x: auto; }
.anchor-layout { display: grid; gap: var(--space-6); }
.anchor-nav { padding: 8px 16px; background: var(--color-bg-subtle); border-radius: var(--radius-md); }
.anchor-nav .eyebrow { padding-block: 12px 4px; }
.anchor-nav a {
display: flex; align-items: center; min-height: 44px; font-size: var(--text-small); line-height: 1.35;
color: var(--color-text-muted); text-decoration: none;
}
.anchor-nav a:hover { color: var(--color-text); }
.anchor-nav a[aria-current="true"] { color: var(--color-text); font-weight: 600; }
.anchor-section { padding-block: 40px; border-top: 1px solid var(--color-border); }
.anchor-section:first-child { padding-top: 0; border-top: 0; }
.anchor-section > .eyebrow { margin-bottom: var(--space-3); }
.anchor-section > h2 { font-size: var(--text-h3); line-height: 1.2; letter-spacing: -0.01em; }
.anchor-section > h2 + * { margin-top: var(--space-4); }
.anchor-section > p { max-width: 68ch; color: var(--color-text-secondary); }
.anchor-section > * + * { margin-top: var(--space-4); }
.anchor-section > .link-arrow { margin-top: var(--space-3); }
@media (min-width: 1024px) {
.anchor-layout { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: start; }
.anchor-nav { grid-column: 1 / 4; position: sticky; top: calc(var(--header-h) + 32px); padding: 0; background: transparent; border-radius: 0; }
.anchor-nav .eyebrow { padding: 0 0 var(--space-3); }
.anchor-nav a { padding-left: 16px; border-left: 2px solid var(--color-border); }
.anchor-nav a[aria-current="true"] { border-left-color: var(--navy-900); }
.anchor-layout__body { grid-column: 5 / 13; }
.anchor-section { padding-block: var(--space-7); }
}
.pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--space-5); padding-block: var(--space-6); border-top: 1px solid var(--color-border); }
.pager .link-arrow--back .icon { transform: rotate(180deg); }
.pager .link-arrow--back:hover .icon { transform: rotate(180deg) translateX(4px); }
.confirm-mark { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: var(--space-5); border-radius: 50%; background: var(--color-live-bg); color: var(--color-live-fg); }
.confirm-mark .icon { width: 32px; height: 32px; }
.status {
display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 2px 12px 2px 10px; border-radius: var(--radius-pill);
font-family: var(--font-mono); font-weight: 500; font-size: var(--text-micro); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}
.status::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid currentColor; flex: none; }
.status--live, .status--partial { color: var(--color-live-fg); background: var(--color-live-bg); }
.status--live::before { background: currentColor; }
.status--partial::before { background: conic-gradient(currentColor 75%, transparent 0); }
.status--pending { color: var(--color-pending-fg); background: var(--color-pending-bg); }
.status--pending::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.status--staged, .status--planned { color: var(--color-planned-fg); background: var(--color-planned-bg); }
.tabs__list { display: flex; border-bottom: 2px solid var(--color-border); }
.tabs__tab {
min-height: 48px; padding: 0 20px; margin-bottom: -2px; border: 0; border-bottom: 3px solid transparent;
border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: transparent;
font-size: var(--text-body); font-weight: 500; color: var(--color-text-muted);
}
.tabs__tab:hover { color: var(--color-text); background: var(--slate-100); }
.tabs__tab:focus-visible { outline-offset: -2px; }
.tabs__tab[aria-selected="true"] { color: var(--color-text); font-weight: 600; border-bottom-color: var(--navy-900); }
.tabs__panels { display: grid; gap: var(--space-7); }
.tabs.is-ready .tabs__panels { gap: 0; margin-top: var(--space-5); }
.tabs.is-ready .tabs__panel { grid-area: 1 / 1; transition: opacity var(--dur-base) var(--ease-out); }
.tabs.is-ready .tabs__panel:not(.is-active) { visibility: hidden; opacity: 0; }
.layers { display: grid; gap: var(--space-5); }
.layers__visual { width: 100%; max-width: 560px; margin-inline: auto; }
.layers .tabs__tab { flex: 1; padding-inline: 8px; }
.layer-panel > .eyebrow { margin-bottom: var(--space-2); }
.layer-panel > h3 + p { margin-top: var(--space-2); color: var(--color-text-secondary); }
.services { display: grid; gap: 20px; margin-top: var(--space-5); }
.services__index { display: block; font-family: var(--font-mono); font-weight: 500; font-size: var(--text-micro); letter-spacing: 0.08em; color: var(--color-text-muted); }
.services__name { display: inline-block; margin-top: 2px; font-weight: 600; line-height: 1.4; color: var(--color-text); text-decoration: none; }
a.services__name:hover { text-decoration: underline; }
.services p { margin-top: 2px; font-size: var(--text-small); color: var(--color-text-secondary); }
.layer-panel > .link-arrow { margin-top: var(--space-5); }
@media (min-width: 768px) {
.services { grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-6); }
.layers .tabs__tab { flex: none; padding-inline: 20px; }
}
@media (min-width: 1024px) {
.layers { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: center; }
.layers__visual { grid-column: 1 / 7; margin: 0; }
.layers__body { grid-column: 7 / 13; }
.layers.is-ready .tabs__panels { margin-top: var(--space-6); }
}
.tabs--regions { max-width: 960px; margin-inline: auto; }
.tabs--regions .tabs__list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border: 0; }
.tabs--regions .tabs__tab { margin: 0; padding: 0 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 1rem; }
.tabs--regions .tabs__tab[aria-selected="true"] { border: 2px solid var(--navy-900); background: var(--color-bg-tint); }
.tabs--regions .tabs__panels { gap: var(--space-4); }
.tabs--regions.is-ready .tabs__panel:not(.is-active) { display: none; }
.region { padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.region__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-bottom: var(--space-4); }
.region > p { color: var(--color-text-secondary); max-width: 68ch; }
.region > .licences + p { margin-top: var(--space-5); }
.licences { margin-top: var(--space-5); border-bottom: 1px solid var(--color-border); }
.region > .licences:last-child { border-bottom: 0; }
.licences > li { display: grid; gap: 2px; padding-block: var(--space-4); border-top: 1px solid var(--color-border); }
.licences__regime { font-weight: 600; line-height: 1.4; }
.licences__authority { font-size: var(--text-small); line-height: 1.45; color: var(--color-text-muted); }
.licences__purpose { margin-top: var(--space-2); color: var(--color-text-secondary); }
.licences__tag {
justify-self: start; margin-top: var(--space-2); padding: 3px 8px; border: 1px solid var(--slate-300); border-radius: var(--radius-sm);
font-family: var(--font-mono); font-weight: 500; font-size: var(--text-micro); line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-secondary);
}
.licences__note { margin-top: var(--space-2); max-width: 68ch; font-size: var(--text-small); color: var(--color-text-muted); }
.licences__group { margin-top: var(--space-6); font-family: var(--font-mono); font-weight: 500; font-size: var(--text-micro); line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.licences__group + .licences { margin-top: var(--space-3); }
.licences--sub { margin-top: var(--space-3); border-bottom: 0; }
.licences--sub > li { position: relative; padding: 0 0 0 var(--space-5); border-top: 0; }
.licences--sub > li::before { content: ""; position: absolute; left: 4px; top: 2px; width: 10px; height: 10px; border-left: 1.5px solid var(--slate-300); border-bottom: 1.5px solid var(--slate-300); border-bottom-left-radius: 3px; }
.region-legend { margin-top: var(--space-5); font-size: var(--text-small); color: var(--color-text-secondary); }
.region-legend ul { display: grid; gap: var(--space-3); }
.region-legend li { display: grid; gap: 6px; justify-items: start; }
.region-legend p { margin-top: var(--space-4); max-width: 68ch; color: var(--color-text-muted); }
@media (min-width: 600px) {
.region-legend ul { gap: var(--space-2); }
.region-legend li { grid-template-columns: 12.5rem minmax(0, 1fr); gap: var(--space-3); align-items: center; }
}
@media (min-width: 768px) {
.tabs--regions .tabs__list { display: flex; justify-content: center; gap: 0; border-bottom: 2px solid var(--color-border); }
.tabs--regions .tabs__tab, .tabs--regions .tabs__tab[aria-selected="true"] {
margin-bottom: -2px; padding: 0 20px; border: 0; border-bottom: 3px solid transparent; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: transparent; font-size: var(--text-body);
}
.tabs--regions .tabs__tab:hover { background: var(--slate-100); }
.tabs--regions .tabs__tab[aria-selected="true"] { border-bottom-color: var(--navy-900); }
.region { padding: 40px; }
.licences > li { grid-template-columns: 40% minmax(0, 1fr) auto; grid-template-rows: auto 1fr; column-gap: var(--space-6); align-items: start; }
.licences__regime, .licences__authority { grid-column: 1; }
.licences__purpose { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
.licences__tag { grid-column: 3; grid-row: 1 / span 2; justify-self: end; margin-top: 1px; white-space: nowrap; }
.licences__note, .licences--sub { grid-column: 1 / -1; }
.licences__note { margin-top: var(--space-3); }
.licences--sub > li { padding-left: 0; }
.licences--sub .licences__regime, .licences--sub .licences__authority { padding-left: var(--space-5); }
}
@media (scripting: enabled) {
.tabs--regions:not(.is-ready) > .tabs__list[hidden] { display: grid !important; }
.tabs--regions:not(.is-ready) .tabs__panel:not(:first-child) { display: none; }
.tabs--regions:not(.is-ready) .tabs__panels { margin-top: var(--space-5); }
.tabs--regions:not(.is-ready) .tabs__tab:first-child { color: var(--color-text); font-weight: 600; border: 2px solid var(--navy-900); background: var(--color-bg-tint); }
}
@media (scripting: enabled) and (min-width: 768px) {
.tabs--regions:not(.is-ready) > .tabs__list[hidden] { display: flex !important; }
.tabs--regions:not(.is-ready) .tabs__tab:first-child { border: 0; border-bottom: 3px solid var(--navy-900); background: transparent; }
}
.contact { background: var(--gradient-panel); padding-block: clamp(48px, 6vw, 96px); }
.contact__inner { display: grid; gap: var(--space-6); }
.contact__intro > * + * { margin-top: var(--space-5); }
.contact__aside > * + * { margin-top: var(--space-5); }
.contact__aside h2 { font-size: var(--text-h3); line-height: 1.2; letter-spacing: -0.01em; }
.contact__aside p { color: var(--color-text-secondary); max-width: 56ch; }
@media (min-width: 1024px) {
.contact__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); grid-template-rows: auto 1fr; row-gap: var(--space-7); align-items: start; }
.contact__intro { grid-column: 1 / 7; grid-row: 1; }
.contact__aside { grid-column: 1 / 7; grid-row: 2; }
.contact__form { grid-column: 8 / 13; grid-row: 1 / span 2; }
}
.form-card { padding: var(--space-5); background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); }
@media (min-width: 768px) { .form-card { padding: 40px; } }
.form > * + *, .form__step > * + * { margin-top: var(--space-5); }
.form__step[hidden] + * { margin-top: 0; }
.form__legend { display: block; width: 100%; outline-offset: 4px; }
.form__bars { display: none; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: var(--space-3); }
.js .form.is-stepped .form__bars { display: grid; }
.form__bars > span { height: 4px; border-radius: 2px; background: var(--slate-200); }
.form__bars > .is-on { background: var(--navy-900); }
.form__required { font-size: var(--text-small); color: var(--color-text-muted); }
.form__intro { color: var(--color-text-secondary); }
.form__legal { font-size: var(--text-small); color: var(--color-text-muted); }
.form__row { display: grid; gap: var(--space-5) var(--space-4); }
@media (min-width: 480px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field__label { display: block; margin-bottom: var(--space-2); font-size: var(--text-small); font-weight: 600; line-height: 1.4; }
.field__hint { margin-top: 6px; font-size: var(--text-small); color: var(--color-text-muted); }
legend.field__label + .field__hint { margin: -4px 0 8px; }
.input, .select, .textarea {
display: block; width: 100%; min-height: 52px; padding: 0 16px;
background: var(--white); border: 1px solid var(--color-border-control); border-radius: var(--radius-sm);
font-size: var(--text-body); line-height: 1.4; color: var(--color-text);
}
.input::placeholder { color: var(--color-text-muted); opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--navy-900); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--navy-900); box-shadow: inset 0 0 0 1px var(--navy-900); }
.select {
appearance: none; padding-right: 48px;
background-image: url("/assets/img/chevron-down.9b92faad1f.svg"); background-repeat: no-repeat; background-position: right 16px center; background-size: 20px 20px;
}
.textarea { min-height: 140px; padding: 14px 16px; resize: vertical; }
.input:disabled, .select:disabled, .textarea:disabled { background-color: var(--slate-100); color: var(--slate-600); border-color: var(--slate-300); }
[aria-invalid="true"].input, [aria-invalid="true"].select, [aria-invalid="true"].textarea { border-color: var(--color-error-fg); box-shadow: inset 0 0 0 1px var(--color-error-fg); }
.is-notice[aria-invalid="true"].input { border-color: var(--color-notice-fg); box-shadow: inset 0 0 0 1px var(--color-notice-fg); }
.field__msg { display: none; margin-top: 6px; padding-left: 26px; font-size: var(--text-small); font-weight: 600; color: var(--color-error-fg); position: relative; }
.field__msg.is-shown { display: block; }
.field__msg::before {
content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; background: currentColor;
-webkit-mask: url("/assets/img/alert.063acc9bb8.svg") center / contain no-repeat; mask: url("/assets/img/alert.063acc9bb8.svg") center / contain no-repeat;
}
.field__count { margin-top: 6px; text-align: right; font-family: var(--font-mono); font-weight: 500; font-size: var(--text-micro); color: var(--color-text-muted); }
.field__count.is-over { color: var(--color-error-fg); }
.check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding-block: 10px; cursor: pointer; line-height: 1.45; }
.check input {
appearance: none; flex: none; width: 22px; height: 22px; margin: 1px 0 0;
background: var(--white) center / 16px 16px no-repeat; border: 1.5px solid var(--color-border-control); border-radius: 4px; cursor: pointer;
}
.check input:hover { border-color: var(--navy-900); }
.check input:checked { background-color: var(--navy-900); border-color: var(--navy-900); background-image: url("/assets/img/check-white.9a421a9964.svg"); }
.check input:disabled { background-color: var(--slate-100); border-color: var(--slate-300); }
.check--small { font-size: var(--text-small); color: var(--color-text-secondary); }
.notice { display: flex; gap: 12px; margin-top: var(--space-2); padding: 14px 16px; border-left: 3px solid var(--color-notice-fg); border-radius: var(--radius-sm); background: var(--color-notice-bg); font-size: var(--text-small); color: var(--color-text-secondary); }
.notice .icon { width: 20px; height: 20px; margin-top: 1px; color: var(--color-notice-fg); }
.notice__title { font-weight: 600; color: var(--color-text); }
.notice p + p { margin-top: 4px; }
.notice--error { border-left-color: var(--color-error-fg); background: var(--color-error-bg); margin-top: 0; }
.notice--error .icon { color: var(--color-error-fg); }
.notice--error p { color: var(--color-text); }
.form__status:empty { display: none; }
.form__status { outline-offset: 4px; }
.form__actions { display: flex; flex-direction: column-reverse; gap: 12px; }
@media (min-width: 480px) {
.form__actions { flex-direction: row; justify-content: space-between; }
.form__actions > :only-child, .form__actions > [hidden] + * { margin-left: auto; }
}
.btn--busy-capable { display: inline-grid; }
.btn--busy-capable > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn--busy-capable .btn__busy { visibility: hidden; }
.is-busy .btn--busy-capable .btn__busy { visibility: visible; }
.is-busy .btn--busy-capable .btn__label { visibility: hidden; }
.spinner { width: 20px; height: 20px; }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.cta-band { position: relative; overflow: hidden; background: var(--color-bg-inverse); padding-block: clamp(64px, 8vw, 112px); }
.cta-band__inner { position: relative; display: grid; gap: var(--space-6); }
.cta-band__text > * + * { margin-top: var(--space-4); }
.cta-band .lead { max-width: 48ch; }
.cta-band__action .btn { display: flex; }
.cta-band__action .link-arrow { margin-top: var(--space-2); }
.cta-band__cards { display: grid; gap: var(--space-4); }
.cta-card { display: flex; flex-direction: column; padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.cta-card p { margin-top: var(--space-3); color: var(--color-text-secondary); }
.cta-card .cta-card__action { margin-top: auto; padding-top: var(--space-5); }
.cta-card .btn { display: flex; }
@media (min-width: 768px) {
.cta-band__cards { grid-template-columns: 1fr 1fr; gap: var(--grid-gap); }
.cta-card { padding: var(--space-6); }
.cta-card .btn { display: inline-flex; }
}
@media (min-width: 1024px) {
.cta-band { background-image: url("/assets/img/cta-zones.8bb6c689ed.svg"); background-repeat: no-repeat; background-position: right -120px bottom -210px; background-size: 800px 462px; }
.cta-band__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: center; }
.cta-band__text { grid-column: 1 / 9; }
.cta-band__action { grid-column: 9 / 13; justify-self: end; }
.cta-band__cards { grid-column: 1 / 13; }
}
.site-footer { background: var(--color-bg-subtle); border-top: 1px solid var(--color-border); padding-block: var(--space-8) 40px; }
.site-footer--gap { margin-top: var(--space-9); }
.site-footer__top { display: grid; gap: var(--space-6); }
.site-footer .logo__svg { height: 40px; }
.site-footer__tagline { margin-top: var(--space-4); max-width: 32ch; font-size: var(--text-small); color: var(--color-text-secondary); }
.site-footer__nav { display: grid; gap: var(--space-6); }
.site-footer__nav h2 { margin-bottom: var(--space-2); }
.site-footer__nav a { display: flex; align-items: center; min-height: 44px; font-size: var(--text-small); line-height: 1.35; color: var(--color-text); text-decoration: none; }
.site-footer__nav a:hover { text-decoration: underline; }
.site-footer__nav a[aria-current="page"] { font-weight: 600; }
.site-footer__legal { margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--color-border); }
.site-footer__legal p { margin-top: var(--space-3); max-width: 88ch; font-size: var(--text-small); line-height: 1.6; color: var(--color-text-secondary); }
.site-footer__base { display: flex; flex-direction: column; gap: 8px; margin-top: var(--space-5); font-size: var(--text-small); color: var(--color-text-muted); }
.site-footer__base p { margin: 0; color: inherit; }
.site-footer__base ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
.site-footer__base a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-text-muted); }
@media (min-width: 768px) {
.site-footer__nav { grid-template-columns: 1.6fr 1fr 1fr; }
.site-footer__base { flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (min-width: 1024px) {
.site-footer__top { grid-template-columns: 4fr 8fr; column-gap: var(--space-8); }
.site-footer__nav h2 { margin-bottom: var(--space-3); }
.site-footer__nav a { min-height: 36px; }
}
.il { width: 100%; height: auto; overflow: visible; }
.il-stop-1a { stop-color: var(--navy-900); }   .il-stop-1b { stop-color: var(--navy-700); }
.il-stop-2a { stop-color: var(--blue-400); }   .il-stop-2b { stop-color: var(--blue-300); }
.il-stop-3a { stop-color: var(--blue-100); }   .il-stop-3b { stop-color: var(--white); }
.il-stop-s1a { stop-color: var(--navy-950); }  .il-stop-s1b { stop-color: var(--plate-1-side-2); }
.il-stop-s2a { stop-color: var(--blue-600); }  .il-stop-s2b { stop-color: var(--plate-2-side-2); }
.il-stop-s3a { stop-color: var(--blue-300); }  .il-stop-s3b { stop-color: var(--plate-3-side-2); }
.il-stop-shadow-a { stop-color: var(--navy-900); stop-opacity: 0.16; }
.il-stop-shadow-b { stop-color: var(--navy-900); stop-opacity: 0; }
.il-plate-3-edge { stroke: var(--blue-300); stroke-width: 1; vector-effect: non-scaling-stroke; }
.il-dot { fill: var(--slate-300); }
.il-zone { fill: var(--color-zone-fill); fill-opacity: 0.7; stroke: var(--color-zone-line); stroke-width: 1.5; stroke-dasharray: 7 6; vector-effect: non-scaling-stroke; }
.il-zone--live { stroke-width: 2; stroke-dasharray: none; }
.il-zone--partial { stroke-width: 2; stroke-dasharray: 20 6; }
.il-zone--staged, .il-zone--planned { stroke-dasharray: 1.5 6; stroke-linecap: round; }
.il-rail { fill: none; stroke: var(--color-rail); stroke-width: 1.5; stroke-linecap: round; }
.il-rail-end { fill: var(--color-rail); }
.il-value { fill: var(--color-value); }
.il-value--line { fill: none; stroke: var(--blue-600); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.il-inst-top { fill: var(--white); stroke: var(--blue-300); stroke-width: 1; vector-effect: non-scaling-stroke; }
.il-inst-side { fill: var(--blue-300); }
.il-pin-line { stroke: var(--color-pin); stroke-width: 2; stroke-linecap: round; }
.il-pin-head { fill: var(--color-pin); }
.il-pin-ring, .il-pin-foot, .il-pin-pulse { fill: none; stroke: var(--color-pin); stroke-width: 1.5; }
.il-pin-ring { opacity: 0.35; }
.il-pin-pulse { opacity: 0; }
.il-net { fill: none; stroke: var(--blue-400); stroke-width: 1.25; stroke-opacity: 0.5; vector-effect: non-scaling-stroke; }
.il-node { fill: var(--blue-400); }
.il-pill { fill: var(--white); fill-opacity: 0.55; }
.il-num-bg { fill: var(--navy-900); }
.il-num { fill: var(--white); font-family: var(--font-mono); font-weight: 500; font-size: 18px; text-anchor: middle; }
.il-label { font-family: var(--font-mono); font-weight: 500; font-size: 15px; letter-spacing: 1.5px; fill: var(--navy-900); }
.il-label--inverse { fill: var(--white); }
.il-art { opacity: 0.6; }
.il-hero .il-zone { stroke: var(--blue-600); stroke-width: 2; fill: var(--blue-100); }
.il-hero .il-rail { stroke: var(--slate-500); stroke-width: 2; }
.il-hero .il-rail-end { fill: var(--slate-500); }
.il-field { fill: none; stroke: var(--blue-300); stroke-width: 1; vector-effect: non-scaling-stroke; }
.il-field--inverse { stroke: rgba(255, 255, 255, 0.3); }
.il-field--pin { stroke: var(--color-pin); stroke-width: 2; stroke-dasharray: 6 5; }
.il-plate-1-edge { stroke: var(--blue-400); stroke-width: 1; vector-effect: non-scaling-stroke; }
.il-ring { fill: none; stroke: var(--blue-300); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.il-ring--inner { fill: var(--blue-100); fill-opacity: 0.5; stroke-dasharray: 7 6; }
.tile .il-hero * { animation: none !important; }
.il-layer { cursor: pointer; outline: none; text-decoration: none; }
.il-layer__lift { transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.il-layer__hit { fill: transparent; }
.il-layer__outline { fill: none; stroke: var(--navy-900); stroke-width: 2; opacity: 0; vector-effect: non-scaling-stroke; }
.il-layer__outline--inverse { stroke: var(--white); }
.il-layer__link { opacity: 0; stroke: var(--navy-900); stroke-width: 1.5; fill: var(--navy-900); }
.il-layer:focus-visible .il-layer__outline { opacity: 1; stroke: var(--color-focus); stroke-width: 4; }
@media (hover: hover) { .il-layer:hover .il-layer__lift { transform: translateY(-6px); } }
.il-layer.is-peek .il-layer__lift { transform: translateY(-6px); }
[data-selected="1"] .il-layer[data-layer="1"] .il-layer__lift,
[data-selected="2"] .il-layer[data-layer="2"] .il-layer__lift,
[data-selected="3"] .il-layer[data-layer="3"] .il-layer__lift { transform: translateY(-12px); }
[data-selected="1"] .il-layer[data-layer="1"] .il-layer__outline,
[data-selected="2"] .il-layer[data-layer="2"] .il-layer__outline,
[data-selected="3"] .il-layer[data-layer="3"] .il-layer__outline { opacity: 1; }
.il-stack .il-label { display: none; }
@media (min-width: 480px) { .il-stack .il-label { display: block; } }
@media (min-width: 1024px) {
.layers.is-ready[data-selected="1"] .il-layer[data-layer="1"] .il-layer__link,
.layers.is-ready[data-selected="2"] .il-layer[data-layer="2"] .il-layer__link,
.layers.is-ready[data-selected="3"] .il-layer[data-layer="3"] .il-layer__link { opacity: 1; }
}
.is-static .il-layer { pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
.il-build { animation: il-rise var(--dur-slow) var(--ease-out) both; }
.il-build--2 { animation-delay: 120ms; }
.il-build--3 { animation-delay: 240ms; }
.il-fade { animation: il-fade 500ms var(--ease-out) 200ms both; }
.il-hero .il-pin-line { transform-box: fill-box; transform-origin: 50% 100%; animation: il-grow 400ms var(--ease-out) 900ms both; }
.il-hero .il-pin-top { transform-box: fill-box; transform-origin: center; animation: il-pop 300ms var(--ease-out) 1200ms both; }
.il-hero .il-pin-pulse { transform-box: fill-box; transform-origin: center; animation: il-pulse 700ms var(--ease-out) 1300ms both; }
.il-flow { animation: il-flow 1900ms linear calc(var(--start, 1400ms) + var(--i) * 500ms) backwards; }
.il-flow--r1 { --fx: -43.3px; --fy: 25px; --i: 3; }
.il-flow--r2 { --fx: 43.3px; --fy: 25px; --i: 0; }
.il-flow--r3 { --fx: 43.3px; --fy: -25px; --i: 2; }
.il-flow--r4 { --fx: -43.3px; --fy: -25px; --i: 1; }
.il-hero.is-replay { --start: 0ms; }
.il-hero.is-reset .il-flow { animation: none; }
.spinner { animation: spin 800ms linear infinite; }
}
@keyframes il-rise { from { transform: translateY(18px); opacity: 0; } }
@keyframes il-fade { from { opacity: 0; } }
@keyframes il-grow { from { transform: scaleY(0); } }
@keyframes il-pop { from { transform: scale(0.4); opacity: 0; } }
@keyframes il-pulse { from { transform: scale(1); opacity: 0.35; } to { transform: scale(1.9); opacity: 0; } }
@keyframes il-flow {
0%    { transform: translate(var(--fx), var(--fy)); opacity: 0; animation-timing-function: var(--ease-in-out); }
13%   { opacity: 1; }
71%   { opacity: 1; }
84%   { transform: translate(calc(var(--fx) * -1), calc(var(--fy) * -1)); opacity: 0; animation-timing-function: step-start; }
85%   { transform: translate(0, 0); opacity: 0; animation-timing-function: var(--ease-out); }
100%  { transform: translate(0, 0); opacity: 1; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
.platform-layer { padding-bottom: 0; }
.platform-split__head > * + * { margin-top: var(--space-4); }
.platform-split__body { margin-top: var(--space-5); }
.platform-split__body > p { max-width: 68ch; color: var(--color-text-secondary); }
.platform-split__body > .link-arrow { margin-top: var(--space-3); }
@media (min-width: 1024px) {
.platform-split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: start; }
.platform-split__head { grid-column: 1 / 6; }
.platform-split__body { grid-column: 7 / 13; margin-top: 0; }
}
.note { max-width: 68ch; margin-top: var(--space-6); padding-left: var(--space-4); border-left: 2px solid var(--blue-300); color: var(--color-text-secondary); }
@media (min-width: 1024px) { .features > .note { grid-column: 7 / 13; } }
.card .h3 + p { margin-top: var(--space-3); }
.rows__body > .lead { color: var(--color-text); font-weight: 600; }
.figure + .cards { margin-top: var(--space-7); }
.figure__narrow { max-width: 360px; margin-inline: auto; }
.hero__visual--hub { max-width: 560px; margin-inline: auto; }
.hero__visual--market { max-width: 480px; margin-inline: auto; }
.flywheel__list strong { color: var(--color-text); }
@media (min-width: 1024px) {
.flywheel__list { grid-column: 1 / -1; grid-row: 1; align-self: center; grid-template-columns: 1fr 400px 1fr; gap: var(--space-9) var(--space-7); }
.flywheel__list > li:nth-child(1) { grid-area: 1 / 3; }
.flywheel__list > li:nth-child(2) { grid-area: 2 / 3; }
.flywheel__list > li:nth-child(3) { grid-area: 2 / 1; }
.flywheel__list > li:nth-child(4) { grid-area: 1 / 1; }
.flywheel__list > li:nth-child(n+3) { padding: 0 46px 0 0; text-align: right; }
.flywheel__list > li:nth-child(n+3)::before { left: auto; right: 0; }
}
.il-value--dark { fill: var(--navy-900); }
.il-num--sm { font-size: 16px; }
.il-text { font-family: var(--font-sans); font-weight: 600; font-size: 15px; fill: var(--navy-900); }
.il-text--narrow { font-size: 14px; }
.il-hub__label { font-family: var(--font-sans); font-weight: 600; font-size: 26px; fill: var(--navy-900); }
.il-hub__legend { display: grid; justify-content: center; justify-items: start; gap: 8px; }
.il-hub__legend .status { white-space: normal; }
.hero__visual--hub > .small { margin-top: var(--space-3); text-align: center; color: var(--color-text-secondary); }
@media (min-width: 768px) { .il-hub__label { font-size: 22px; } }
.il-row { fill: var(--blue-200); }
.il-flow-box { fill: var(--white); stroke: var(--navy-900); stroke-width: 1.5; }
.il-flow-net { fill: var(--color-bg-tint); stroke: var(--blue-500); stroke-width: 1.5; }
.il-flow-engine { fill: var(--white); stroke: var(--gold-700); stroke-width: 2; }
.il-track { fill: none; stroke: var(--color-rail); stroke-width: 1.5; stroke-dasharray: 7 6; }
.il-track--on { fill: var(--color-bg-tint); stroke: var(--blue-600); stroke-width: 2; stroke-dasharray: none; }
.il-fly-guide { fill: none; stroke: var(--slate-300); stroke-width: 1; stroke-dasharray: 2 6; }
.il-fly-arc { fill: none; stroke-width: 16; stroke-linecap: round; }
.il-fly-arc--a { stroke: var(--navy-900); }
.il-fly-arc--b { stroke: var(--blue-400); }
.il-fly-head--a { fill: var(--navy-900); }
.il-fly-head--b { fill: var(--blue-400); }
.il-fly-num { stroke: var(--white); stroke-width: 3; }
.il-fly-core { fill: var(--color-bg-tint); stroke: var(--blue-300); stroke-width: 1; }