@font-face {
  font-family: Manrope;
  src: url('/shared/assets/fonts/Manrope.woff') format('woff'), url('/shared/assets/fonts/Manrope.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Atkinson;
  src: url('/shared/assets/fonts/Atkinson.woff') format('woff'), url('/shared/assets/fonts/Atkinson.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: light;
  --night: #020913;
  --navy: #061d35;
  --paper: #f1f7fb;
  --ink: #08283d;
  --muted: #385b73;
  --cyan: #70dfff;
  --blue: #0057ed;
  --line: #718593;
  --gutter: clamp(24px, 5vw, 80px);
  font-family: Atkinson, sans-serif;
  font-size: 16px;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-padding-top: var(--chrome-height); }
body { margin: 0; color: var(--ink); background: var(--paper); line-height: 1.5; }
button, input, select, textarea { font: inherit; }
button, a, summary, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 5px; }
button, summary { cursor: pointer; }
button { color: inherit; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: Manrope, sans-serif; }
h1, h2, h3, p, a, span { overflow-wrap: break-word; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 6px; }
.contact :focus-visible { outline-color: var(--cyan); }
::selection { color: var(--night); background: #70dfff; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; z-index: 20; left: 16px; top: 16px; padding: 14px 20px; color: var(--night); background: var(--cyan); transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
.section-pad { padding-inline: var(--gutter); }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 40px; min-height: 54px; padding: 14px 23px; color: #fff; background: var(--blue); border: 1px solid var(--blue); border-radius: 2px; font-weight: 600; text-decoration: none; line-height: 1.3; transition: background-color .18s, border-color .18s; }
.button span { font-size: 22px; line-height: 1; font-weight: 400; }
.button:hover { background: #124bba; border-color: #5b9aff; }
.button-small { min-height: 44px; padding: 11px 17px; gap: 25px; background: transparent; border-color: #536678; }
.button-small:hover { background: #102b40; border-color: var(--cyan); }
.text-link { display: inline-flex; align-items: center; gap: 22px; min-height: 44px; text-decoration: none; }
.text-link span { font-size: 23px; }
.text-link:hover { text-decoration: underline; }

/* The front door and the workspace share one field and one signal. */
.frame { width: min(1360px, calc(100% - 2 * var(--gutter))); min-width: 0; margin-inline: auto; }
.hero :focus-visible, .product-family :focus-visible { outline-color: var(--cyan); }
.hero {
  --stacked-route: 0;
  --route-edge-inset: max(8px, calc(var(--scene-inset) - 16px));
  --scene-width: min(1360px, calc(100cqi - 2 * var(--gutter)));
  --scene-inset: calc((100cqi - var(--scene-width)) / 2);
  --stage-gap: clamp(20px, 2.2vw, 36px);
  --side-width: clamp(190px, 17vw, 245px);
  --lockup-width: calc(var(--scene-width) - 2 * var(--side-width) - 2 * var(--stage-gap));
  --lockup-row-offset: max(0px, calc((150px - var(--lockup-width) * .211121) / 2));
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  color: #f1f7fb;
  background:
    radial-gradient(ellipse 55% 480px at 50% 220px, #22d3ee20, transparent 72%),
    radial-gradient(ellipse 45% 660px at 84% 140px, #2563eb30, transparent 75%),
    radial-gradient(ellipse 40% 450px at 8% 0, #06b6d41c, transparent 72%),
    linear-gradient(180deg, #03101f, var(--night) 88%);
}
.field-dots { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle, #67e8f92e 1px, transparent 1.5px) 0 0 / 22px 22px; -webkit-mask-image: linear-gradient(#000 0%, #000 44%, transparent 93%); mask-image: linear-gradient(#000 0%, #000 44%, transparent 93%); }
.hero-opening { position: relative; padding-top: 22px; }
.stage { position: relative; z-index: 2; display: grid; grid-template-columns: var(--side-width) minmax(0, 1fr) var(--side-width); grid-template-rows: auto minmax(150px, auto) auto; grid-template-areas: 'alarm . request' 'plate lockup invoice' 'shift . gate'; column-gap: var(--stage-gap); row-gap: 20px; align-items: center; }
.signal-fragment { display: flex; align-items: flex-start; gap: 8px; min-width: 0; color: #e7f4ff; font-size: 16px; line-height: 1.35; }
.fragment-alarm { grid-area: alarm; }
.fragment-request { grid-area: request; }
.fragment-plate { grid-area: plate; }
.fragment-invoice { grid-area: invoice; }
.fragment-shift { grid-area: shift; }
.fragment-gate { grid-area: gate; }
.fragment-alarm, .fragment-plate, .fragment-shift { flex-direction: row-reverse; text-align: right; }
.fragment-mark { flex: 0 0 22px; width: 22px; color: #a7c0d3; font-size: 20px; line-height: 1.2; }
.fragment-copy { display: block; min-width: 0; }
.fragment-name, .fragment-detail { display: block; }
.fragment-name { font-family: Manrope, sans-serif; font-weight: 640; }
.fragment-detail { margin-top: 2px; color: #c5d9ea; }
.is-gathered .fragment-mark { color: var(--cyan); }
.brand-stage { position: relative; grid-area: lockup; width: 100%; min-width: 0; align-self: center; }
/* 3.3's glow stays centred on the lockup, regardless of the workspace height. */
.brand-stage::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(780px, 70cqi); height: 420px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(34, 211, 238, .2), rgba(37, 99, 235, .05) 46%, transparent 70%); pointer-events: none; }
.hero-lockup { width: 100%; height: auto; overflow: visible; }
.brand-node-halo { opacity: .11; }
.brand-node { opacity: .9; }
.message-bridge { position: relative; display: flow-root; padding-bottom: 48px; }
.hero-message { position: relative; z-index: 2; max-width: 46rem; margin-top: 18px; text-align: center; }
.hero h1 { font-size: clamp(1.75rem, 3.7vw, 3.15rem); font-weight: 520; letter-spacing: -.045em; line-height: 1.12; }
.hero h1 span { display: block; }
.hero-message p { margin-top: 16px; color: #bed8ed; font-size: 18px; line-height: 1.5; text-wrap: pretty; }
.hero-message p + p { margin-top: 10px; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 28px; margin-top: 20px; }
.hero-actions .text-link { color: var(--cyan); }
#skip-signal { position: absolute; z-index: 5; bottom: 0; left: var(--scene-inset); min-height: 44px; border: 0; padding: 10px 0; background: transparent; color: #b7cfe0; font-size: 16px; }
#skip-signal span { margin-left: 8px; }
#signal-canvas { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }
#signal-canvas.is-idle { visibility: hidden; }
.continuation-signal { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.continuation-signal path { vector-effect: non-scaling-stroke; }
.continuation-track { stroke: #2b7f9c; stroke-width: 1; }
.continuation-trace { stroke: #c5f4ff; stroke-width: 1.25; stroke-dasharray: 100; stroke-dashoffset: 0; }
.workspace-arrival { position: absolute; z-index: 4; top: -3.5px; right: -3.5px; width: 7px; height: 7px; border-radius: 50%; background: #c5f4ff; box-shadow: 0 0 14px #22d3ee; }
/* Both routes leave the top of the node (viewBox y=-3), above the X.
   The no-JS route steps into the column gap, then above the Finance row. */
.brand-stage::after { content: ''; position: absolute; top: calc(0px - var(--lockup-row-offset)); left: 95.4911%; width: calc(4.5089% + var(--stage-gap) / 2); height: calc(var(--lockup-row-offset) + var(--lockup-width) * .0178641); border-bottom: 1px solid #70dfff; border-right: 1px solid #70dfff; border-bottom-right-radius: 10px; pointer-events: none; }
.stage::after { content: ''; grid-area: 2 / 2 / 4 / 4; align-self: stretch; margin-top: 0; margin-left: calc(var(--lockup-width) + var(--stage-gap) / 2); margin-right: calc(var(--route-edge-inset) - var(--scene-inset)); border-top: 1px solid #70dfff; border-right: 1px solid #70dfff; border-top-right-radius: 20px; pointer-events: none; }
.message-bridge::after { content: ''; position: absolute; right: var(--route-edge-inset); top: 0; bottom: 22px; width: 0; border-right: 1px solid #70dfff; pointer-events: none; }
.cinema-stage::before { content: ''; position: absolute; right: calc(var(--route-edge-inset) - var(--scene-inset)); top: -22px; width: calc(var(--scene-inset) - var(--route-edge-inset)); height: 22px; border-right: 1px solid #70dfff; border-bottom: 1px solid #70dfff; border-bottom-right-radius: 22px; pointer-events: none; }
.has-measured-route .stage::after { visibility: hidden; }
.has-measured-route .brand-stage::after, .has-measured-route .message-bridge::after, .has-measured-route .cinema-stage::before { display: none; }
/* The wordmark and message stay visible; only the X, node and route reveal. */
.stroke-mask { stroke-dasharray: 100; stroke-dashoffset: 0; }
.is-playing .stroke-mask-a { animation: trace-stroke .66s cubic-bezier(.2,.6,.35,1) 2.85s both; }
.is-playing .stroke-mask-b { animation: trace-stroke .66s cubic-bezier(.2,.6,.35,1) 3.45s both; }
.is-playing .brand-node { animation: resolve-node .7s ease-out 4.12s both; }
.is-playing .brand-node-halo { animation: resolve-halo .7s ease-out 4.12s both; }
.is-playing .signal-fragment { animation: gather-fragments 5.2s ease both; }
.route-pending .continuation-trace { stroke-dashoffset: 100; }
.route-pending .continuation-track, .route-pending .workspace-arrival { opacity: 0; }
.route-waiting .continuation-track { opacity: 1; }
.route-playing .continuation-trace { animation: trace-stroke 1.4s cubic-bezier(.35,.1,.4,1) both; filter: drop-shadow(0 0 3px #00bdd9); }
.route-playing .continuation-track { opacity: 1; }
.route-playing .workspace-arrival { animation: resolve-word .3s ease-out 1.4s both; }
.is-paused *, .is-paused *::before, .is-paused *::after,
.route-paused *, .route-paused *::before, .route-paused *::after { animation-play-state: paused !important; }
@keyframes trace-stroke { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes resolve-word { from { opacity: 0; } to { opacity: 1; } }
@keyframes resolve-node { 0% { opacity: 0; } 45% { opacity: 1; } 100% { opacity: .9; } }
@keyframes resolve-halo { 0% { opacity: 0; } 45% { opacity: .34; } 100% { opacity: .11; } }
@keyframes gather-fragments { from { opacity: .82; } 20%, to { opacity: 1; } }

/* Drawn product interfaces: structure, rather than a collection of cards. */
.cinema-stage { position: relative; z-index: 2; }
.cinema-workspace { position: relative; color: #bed8ed; background: #081c2b; border: 1px solid #5d7c90; border-top-color: #70dfff; border-radius: 4px; overflow: hidden; box-shadow: 0 28px 90px #0006, 0 -15px 80px #00bdd90a; font-size: 16px; }
.screen-top { position: relative; display: flex; align-items: center; gap: 24px; min-height: 65px; padding: 18px 25px; background: #0c2436; border-bottom: 1px solid #5d7c90; }
.screen-top img { width: 108px; flex: 0 0 108px; }
.screen-top > img + span { border-left: 1px solid #5d7c90; padding-left: 24px; }
.picture-arrival { width: 7px; height: 7px; flex: 0 0 7px; margin-left: auto; border-radius: 50%; background: #b4f2ff; box-shadow: 0 0 14px #22d3ee; }
.cinema-body { display: grid; grid-template-columns: 130px minmax(0,1fr); }
.app-rail { padding: 24px 12px; border-right: 1px solid #5d7c90; background: #071824; }
.rail-item { display: flex; gap: 12px; align-items: center; padding: 14px 8px; margin-bottom: 5px; color: #a4bed2; }
.rail-item b { font-size: 22px; line-height: 1; font-weight: 400; }
.rail-item.selected { color: #70dfff; border-left: 2px solid #70dfff; background: #103346; }
.cinema-panels { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,.85fr) minmax(0,1fr); }
.queue-panel, .flow-panel { padding: 25px; border-right: 1px solid #5d7c90; }
.ui-heading { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-bottom: 23px; color: #cce3f3; font-size: 16px; }
.ui-heading strong { color: #eef7fc; font-weight: 500; }
.ui-state { display: inline-flex; align-items: center; gap: 7px; color: #a5e9dd; }
.ui-state::before { content: ''; width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: #87dbcd; }
.ui-columns { display: flex; justify-content: space-between; padding-block: 0 12px; border-bottom: 1px solid #5d7c90; color: #9fb9ce; }
.queue-entry { display: grid; grid-template-columns: 18px minmax(0,1fr) auto; align-items: center; gap: 10px; padding-block: 17px; border-bottom: 1px solid #5d7c90; }
.queue-entry.current { background: linear-gradient(90deg,#11364a,transparent); box-shadow: -2px 0 #70dfff; }
.queue-entry strong, .flow-request > strong { display: block; color: #e5f1f9; font-weight: 500; }
.queue-entry small { display: block; margin-top: 4px; font-size: 16px; color: #a4bed2; }
.attention { color: #e5c28a; text-align: center; }
.ui-symbol { color: #70dfff; }
.evidence-line { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin-top: 22px; }
.evidence-line > :last-child { color: #70dfff; }
.lane-heading { padding-bottom: 12px; border-bottom: 1px solid #5d7c90; color: #a9c9df; }
.flow-request { padding-top: 22px; display: grid; gap: 9px; }
.request-line { width: 30px; height: 2px; background: #70dfff; margin-bottom: 6px; }
.owner-line { display: flex; gap: 10px; align-items: center; margin-top: 16px; }
.avatar { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; display: grid; place-items: center; background: #29475a; color: #ddecf7; font-size: 16px; }
.map-panel { grid-column: 3; grid-row: 1 / span 2; padding-top: 25px; min-width: 0; }
.map-panel > .ui-heading { margin-inline: 22px; }
.map-window { position: relative; min-height: 270px; overflow: hidden; background: #0c2431; }
.drawn-map { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.map-ground { fill: #0b2230; }
.map-blocks { fill: #12313f; stroke: #284857; stroke-width: 1; }
.map-water { stroke: #104256; stroke-width: 24; fill: none; }
.map-roads { stroke: #3b5968; stroke-width: 2; fill: none; }
.map-route { stroke: #64c3e2; stroke-width: 2; fill: none; }
.map-halo { fill: #45c9e522; stroke: #45c9e5; stroke-width: 1; }
.map-pin { fill: #b8f5ff; stroke: #3ac4de; stroke-width: 2; }
.map-place, .map-device { position: absolute; padding: 4px 8px; color: #d9edf9; background: #071c2b; font-size: 16px; }
.map-place { top: 18px; left: 12px; }
.map-device { bottom: 18px; right: 12px; }
.map-caption { padding: 16px 22px; border-top: 1px solid #5d7c90; }
.report-panel { grid-column: 1 / 3; display: flex; align-items: center; flex-wrap: wrap; gap: 16px 30px; border-top: 1px solid #5d7c90; border-right: 1px solid #5d7c90; padding: 22px 25px; }
.report-panel strong { color: #e5f1f9; font-weight: 500; }
.report-panel > :last-child { margin-left: auto; }
.cinema-caption { position: relative; margin-top: 18px; padding-block: 22px 46px; border-top: 1px solid #213b4f; color: #aec9de; text-align: center; font-size: 17px; }
.cinema-caption span { color: #e2f0f9; }
/* The Signal's full editorial index, now with a reading companion. */
.everything { padding-block: 108px 110px; }
.section-intro { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 70px; }
.section-intro h2 { font-size: clamp(58px,7.3vw,108px); font-weight: 500; line-height: .99; letter-spacing: -.065em; }
.section-intro h2 span { color: #0054c7; }
.index-intro { max-width: 440px; padding-bottom: 7px; }
.section-lead { font-family: Manrope,sans-serif; font-size: clamp(24px,2.5vw,35px); line-height: 1.24; letter-spacing: -.035em; }
.qualifier { margin-top: 24px; color: var(--muted); font-size: 17px; line-height: 1.55; }
.group-index { display: flex; flex-wrap: wrap; column-gap: 32px; row-gap: 6px; margin-top: 55px; padding-block: 21px; border-block: 1px solid var(--line); }
.group-index a { min-height: 44px; display: inline-flex; flex: 1 1 auto; align-items: center; justify-content: space-between; gap: 12px; padding-block: 8px; color: #234c67; text-decoration: none; font-size: 16px; }
.group-index a span { color: var(--blue); font-size: 20px; }
.group-index a:hover { color: var(--blue); text-decoration: underline; }
.reading-layout { position: relative; padding-top: 64px; }
.area-group { padding-bottom: 76px; scroll-margin-top: 36px; }
.area-group:last-child { padding-bottom: 0; }
.area-group > h3 { position: relative; margin-bottom: 31px; padding-top: 19px; max-width: 100%; font-size: clamp(32px,3vw,43px); font-weight: 500; letter-spacing: -.045em; line-height: 1.14; }
.area-group > h3::before { content: ''; display: block; width: 36px; height: 2px; margin-bottom: 24px; background: #006fbd; }
.area-list, .area-groups { min-width: 0; }
.area-row { border-top: 1px solid var(--line); }
.area-row:last-child { border-bottom: 1px solid var(--line); }
.area-row summary { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.1fr) 22px; gap: 20px; align-items: start; padding-block: 27px; list-style: none; }
summary::-webkit-details-marker { display: none; }
.area-name { font-family: Manrope,sans-serif; font-size: 20px; font-weight: 600; line-height: 1.4; letter-spacing: -.025em; }
.area-summary { color: var(--muted); font-size: 18px; line-height: 1.5; }
.disclosure-mark { position: relative; width: 20px; height: 24px; margin-top: 2px; }
.disclosure-mark::before, .disclosure-mark::after { content: ''; position: absolute; top: 11px; left: 3px; width: 14px; height: 1px; background: #0054c7; }
.disclosure-mark::after { transform: rotate(90deg); transition: transform .2s; }
.area-row[open] .disclosure-mark::after { transform: rotate(0deg); }
.area-row[open] .area-name, .area-row summary:hover .area-name { color: #0054c7; }
.area-copy { margin: 0 42px 28px 0; padding-left: 18px; border-left: 2px solid #53b9d5; color: #294d65; font-size: 17px; line-height: 1.65; }
.area-copy p + p { margin-top: 12px; }
.picture-column, .reading-signal { display: none; }
.mobile-fragment { color: #bed8ed; background: #081c2b; border-top: 2px solid #398da8; padding: 23px; margin-bottom: 28px; font-size: 16px; }
.mobile-fragment .scene-detail { display: none; }
.mobile-fragment .queue-entry:last-of-type { border-bottom: 0; }
.scene-detail { padding-top: 23px; border-top: 1px solid #5d7c90; margin-top: 28px; }
.scene-detail > strong { display: block; margin-top: 12px; font-weight: 500; color: #e1f1fb; }
.drawn-action { display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid #629eb5; color: #8ce6ff; margin-top: 24px; padding-block: 8px; }
.person-line { display: flex; align-items: center; gap: 12px; margin-block: 27px; }
.person-line strong { font-weight: 500; color: #e1f1fb; }
.onboarding { padding: 0; margin: 0; list-style: none; }
.onboarding li { display: flex; gap: 16px; padding-block: 12px; }
.onboarding li > span:first-child { color: #84e3e7; width: 24px; flex: 0 0 24px; }
.onboarding small { display: block; font-size: 16px; color: #a5bfd3; }
.scene-map { min-height: 260px; }
.permission-row { display: grid; grid-template-columns: minmax(0,1fr) 44px 44px; gap: 18px; border-bottom: 1px solid #5d7c90; padding-block: 19px; }
.permission-row > :not(:first-child) { text-align: center; color: #8ce0df; }
.permission-head > :not(:first-child) { color: #bed8ed; }
@media (min-width: 1001px) {
  .has-workspace .reading-layout { display: grid; grid-template-columns: minmax(0,1.23fr) minmax(0,1fr); gap: 7%; }
  .has-workspace .picture-column { display: block; min-width: 0; align-self: stretch; padding-top: 19px; }
  .sticky-picture { position: sticky; top: calc(var(--chrome-height) + 36px); }
  .picture-label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 24px; font-size: 17px; color: #385b73; }
  .picture-label > :last-child { color: #0069a0; }
  .story-screen { border: 1px solid #5d7c90; background: #081c2b; color: #bed8ed; border-radius: 3px; box-shadow: 0 20px 40px #06273a14; font-size: 16px; }
  .story-screen .screen-top { gap: 14px; padding-inline: 22px; }
  .story-screen .screen-top img { width: 88px; flex-basis: 88px; }
  .story-screen .screen-top > img + span { padding-left: 14px; }
  .picture-arrival { position: absolute; left: -4px; top: calc(50% - 3px); margin: 0; }
  .workspace-scene { min-height: 450px; padding: 24px; }
  .has-workspace .mobile-fragment { display: none; }
  .has-workspace .reading-signal { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
  .reading-track { stroke: #1c7ca4; stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
  .is-reading > h3::before { background: #0057ed; width: 54px; }
}
/* Product family remains open typography and interfaces, without enclosing panels. */
.product-family { padding-block: 94px; background: #061c2e; color: #f1f7fb; }
.band-heading { display: flex; justify-content: space-between; align-items: end; gap: 48px; padding-bottom: 52px; }
.band-heading h2, .foundation-heading h2, .downloads h2 { font-size: clamp(37px,4.2vw,60px); letter-spacing: -.055em; line-height: 1.1; font-weight: 500; }
.band-heading > p { font-size: 21px; color: #bed8ed; }
.family-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 65px 5%; }
.product { min-width: 0; }
.product-workspace { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8%; align-items: center; padding-bottom: 55px; border-bottom: 1px solid #34536a; }
.product-workspace .product-copy { grid-column: 1; grid-row: 1; }
.product-workspace .workspace-fragment { grid-column: 2; grid-row: 1; }
.interface { border-block: 1px solid #52728a; overflow: hidden; color: #bed8ed; background: linear-gradient(180deg,#0b253c,#061c2e); font-size: 16px; }
.interface-heading { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; min-height: 76px; padding: 18px 22px; border-bottom: 1px solid #5d7c90; }
.interface-heading > img { width: 100px; }
.workspace-body { display: flex; }
.workspace-rail { width: 54px; flex: 0 0 54px; padding: 24px 18px; border-right: 1px solid #5d7c90; }
.workspace-rail span { display: block; width: 16px; height: 2px; margin-bottom: 25px; background: #65869e; }
.workspace-rail span:first-child { background: #70dfff; }
.event-list { flex: 1; min-width: 0; }
.event-list > div { display: flex; align-items: center; gap: 15px; padding: 18px; border-bottom: 1px solid #5d7c90; }
.event-list small { display: block; font-size: 16px; color: #a7c0d3; }
.event-list > div > :last-child { margin-left: auto; color: #70dfff; }
.event-dot { width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: #70dfff; }
.event-dot-blue { background: #88a9fa; }
.product-mobile { display: grid; grid-template-columns: 270px minmax(0,1fr); gap: 12px; align-items: center; }
.product-type { display: block; color: #a7c0d3; font-size: 16px; }
.product h3 { margin-top: 8px; font-size: 35px; font-weight: 500; letter-spacing: -.04em; line-height: 1.2; }
.product-workspace h3 { font-size: 52px; }
.product-copy > p { margin-top: 18px; max-width: 430px; color: #bed8ed; font-size: 18px; }
.product-copy .text-link { color: var(--cyan); margin-top: 16px; }
.product-links { display: flex; flex-wrap: wrap; gap: 0 20px; }
.phone-illustration { position: relative; width: 100%; max-width: 300px; aspect-ratio: 2 / 3; margin-inline: auto; font-size: 16px; }
.phone-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.phone-screen { position: absolute; inset: 4.5% 17.9% 5.7%; display: flex; flex-direction: column; align-items: stretch; padding: 22px 13px 16px; background: #0c2538; border-radius: 22px; overflow: hidden; color: #c9dfef; }
.phone-brand { display: flex; align-items: center; gap: 8px; color: #eef7fc; line-height: 1.15; }
.phone-brand img { width: 31px; flex: 0 0 31px; }
.phone-brand strong { font-size: 16px; font-weight: 500; }
.phone-site { display: block; margin-top: 14px; color: #b5cddd; }
.phone-divider { height: 1px; flex: 0 0 1px; background: #3b5970; margin-block: 16px; }
.phone-bottom { margin-top: auto; padding-top: 14px; font-size: 16px; line-height: 1.3; color: #aec8dd; }
.phone-launcher { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px; color: #e9f7ff; }
.phone-launcher img { width: 62px; grid-column: 1 / -1; margin-bottom: 12px; }
.phone-launcher strong { font-weight: 500; }
.phone-illustration.verge-phone { container-type: inline-size; }
.phone-screen.verge-screen { padding: 2.2cqi 2.4cqi 2cqi; background: #f1f7fb; color: #061d35; border-radius: 4.5cqi; font-size: 3.6cqi; line-height: 1.2; }
.verge-screen .phone-brand { gap: 1.6cqi; color: #061d35; }
.verge-screen .phone-brand img { width: 7.2cqi; flex-basis: 7.2cqi; }
.verge-screen .phone-brand strong { font-size: 4.8cqi; font-weight: 600; }
.verge-screen .phone-location { display: grid; gap: .5cqi; margin-top: 2.2cqi; }
.verge-screen .phone-location > span { color: #385b83; font-size: 3.3cqi; }
.verge-screen .phone-location strong { font-size: 4.6cqi; font-weight: 600; letter-spacing: -.03em; }
.verge-screen .phone-visitor { display: grid; justify-items: center; gap: .35cqi; margin-top: 2.2cqi; padding: 1.8cqi 1cqi 1.6cqi; background: #e1edf4; border: 1px solid #c3d6e3; border-radius: 2cqi; }
.verge-screen .initials { display: grid; place-items: center; width: 8cqi; height: 8cqi; margin-bottom: .4cqi; border: 1px solid #a0bbcd; border-radius: 1.6cqi; color: #385b83; font-size: 3.4cqi; letter-spacing: .04em; }
.verge-screen .phone-visitor strong { font-size: 4.2cqi; font-weight: 600; letter-spacing: -.03em; }
.verge-screen .phone-visitor > span:last-child { color: #385b83; font-size: 3.2cqi; }
.verge-screen .phone-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6cqi; margin-top: 2.6cqi; }
.verge-screen .phone-tiles > div { display: grid; align-content: space-between; gap: .8cqi; min-width: 0; min-height: 14cqi; padding: 1.6cqi; background: #e1edf4; border-radius: 1.5cqi; }
.verge-screen .phone-tiles dt { color: #385b83; font-size: 3.1cqi; line-height: 1.15; }
.verge-screen .phone-tiles dd { margin: 0; font-size: 5.4cqi; font-weight: 650; line-height: 1; }
.foundations { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.7fr); gap: clamp(35px, 6vw, 88px); padding-block: 108px; background: #e5eff5; }
.foundation-list { display: grid; grid-template-columns: 1fr 1fr; gap: 42px; }
.foundation-list article { padding-top: 20px; border-top: 1px solid var(--line); }
.foundation-list h3 { margin-bottom: 14px; font-size: 21px; letter-spacing: -.03em; font-weight: 600; line-height: 1.4; }
.foundation-list p { font-size: 18px; color: var(--muted); line-height: 1.6; }
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(50px, 9vw, 140px); padding-block: 112px 90px; color: #f1f7fb; background: var(--night); }
.contact h2 { font-size: clamp(64px, 7.5vw, 108px); letter-spacing: -.065em; font-weight: 500; line-height: .98; }
.contact h2 span { color: var(--cyan); }
.contact-heading > p { margin-top: 30px; max-width: 315px; color: #bed8ed; font-size: 21px; line-height: 1.5; }
.contact-signal { position: relative; display: block; width: min(100%, 300px); margin-top: 65px; height: 1px; background: linear-gradient(90deg, #024c6d, #70dfff, transparent); }
.contact-signal::after { position: absolute; content: ''; width: 5px; height: 5px; top: -2px; left: 56%; border-radius: 50%; background: #70dfff; box-shadow: 0 0 16px #22d3ee; }
#contact-form { min-width: 0; padding-top: 3px; }
.form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.form-field { margin-bottom: 26px; min-width: 0; }
.form-field label { display: block; margin-bottom: 6px; font-size: 17px; }
.form-field label span { color: #9cb4c7; }
.form-required { margin-bottom: 26px; color: #9cb4c7; font-size: 17px; }
.form-field input, .form-field select, .form-field textarea { display: block; width: 100%; min-width: 0; border: 0; border-bottom: 1px solid #6c8396; border-radius: 0; background: #071521; color: #f1f7fb; padding: 11px 12px; font-size: 18px; min-height: 48px; }
.form-field textarea { resize: vertical; min-height: 110px; }
.form-field select { appearance: none; padding-right: 44px; cursor: pointer; color-scheme: dark; }
.select-wrap { position: relative; }
.select-wrap > span { position: absolute; right: 16px; top: 9px; pointer-events: none; color: #70dfff; font-size: 22px; }
.form-field [aria-invalid='true'] { border-bottom-color: #ffb4ae; }
.field-error { display: block; margin-top: 7px; color: #ffb4ae; font-size: 16px; }
.form-status { min-height: 48px; margin-top: 18px; color: #bed8ed; font-size: 17px; }
.form-status.is-error { color: #ffb4ae; }
.form-privacy { color: #bed8ed; font-size: 14px; }
#contact-submit:disabled { background: #223b50; border-color: #62768a; color: #bed8ed; cursor: default; }
.downloads { padding-block: 80px 86px; }
.downloads h2 { margin-bottom: 40px; }
.download-row { display: grid; grid-template-columns: 58px minmax(0, .7fr) minmax(0, 1.5fr) 36px; gap: 28px; align-items: center; border-top: 1px solid var(--line); padding-block: 26px; text-decoration: none; }
.download-row:last-child { border-bottom: 1px solid var(--line); }
.download-row img { width: 58px; }
.download-name { font: 500 27px/1.2 Manrope, sans-serif; letter-spacing: -.035em; }
.download-description { max-width: 550px; color: var(--muted); font-size: 18px; }
.download-arrow { color: #0054c7; font-size: 31px; }
.download-row:hover .download-name { color: #0054c7; text-decoration: underline; }

@media (max-width: 1200px) {
  .cinema-body { grid-template-columns: 58px minmax(0,1fr); }
  .app-rail { padding-inline: 7px; }
  .rail-item { justify-content: center; padding-inline: 4px; }
  .rail-item > span { display: none; }
  .queue-panel, .flow-panel { padding: 22px 18px; }
  .queue-entry { grid-template-columns: 18px minmax(0,1fr); }
  .queue-entry > :last-child { grid-column: 2; }
  .workspace-scene .queue-entry { grid-template-columns: 18px minmax(0,1fr) auto; }
  .workspace-scene .queue-entry > :last-child { grid-column: 3; }
  .area-row summary { grid-template-columns: minmax(0,1fr) 22px; gap: 9px 18px; padding-block: 24px; }
  .area-name, .area-summary { grid-column: 1; }
  .disclosure-mark { grid-column: 2; grid-row: 1 / span 2; }
  .story-screen .screen-top { padding-inline: 18px; gap: 10px; }
  .story-screen .screen-top img { width: 75px; flex-basis: 75px; }
  .story-screen .screen-top > img + span { padding-left: 10px; }
  .workspace-scene { padding: 20px; }
  .family-columns { grid-template-columns: 1fr; gap: 50px; }
  .product-mobile { grid-template-columns: 300px minmax(0,1fr); gap: 8%; max-width: 800px; width: 100%; margin-inline: auto; }
  .product-mobile + .product-mobile { border-top: 1px solid #34536a; padding-top: 45px; }
  .foundation-heading h2 { font-size: 38px; }
}
@media (max-width: 1000px) {
  .cinema-panels { grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); }
  .map-panel { grid-row: 2; grid-column: 2; padding-top: 20px; border-top: 1px solid #5d7c90; }
  .map-panel .map-window { min-height: 180px; }
  .report-panel { grid-column: 1; flex-direction: column; align-items: flex-start; justify-content: center; }
  .report-panel > :last-child { margin-left: 0; }
  .flow-panel { border-right: 0; }
  .queue-entry { grid-template-columns: 18px minmax(0,1fr) auto; }
  .queue-entry > :last-child { grid-column: auto; }
  .reading-layout { padding-top: 46px; }
  .area-group > h3 { font-size: 36px; }
  .mobile-fragment { max-width: 100%; }
  .mobile-fragment .flow-request { grid-template-columns: 1fr 1fr; }
  .mobile-fragment .flow-request > strong { grid-column: 1 / -1; }
  .mobile-fragment .request-line { display: none; }
  .mobile-fragment .owner-line { margin-top: 0; justify-self: end; }
  .mobile-fragment .onboarding { display: flex; justify-content: space-between; gap: 24px; }
  .mobile-fragment .person-line { margin-block: 15px; }
  .mobile-fragment .scene-map { min-height: 210px; }
  .area-row summary { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr) 20px; gap: 24px; }
  .area-name { grid-column: 1; }
  .area-summary { grid-column: 2; }
  .disclosure-mark { grid-column: 3; grid-row: 1; }
}
@media (max-width: 800px) {
  :root { --gutter: 32px; }
  .cinema-body { grid-template-columns: 1fr; }
  .app-rail { display: none; }
  .everything { padding-block: 80px; }
  .section-intro { gap: 40px; }
  .section-intro h2 { font-size: 67px; }
  .section-lead { font-size: 27px; }
  .qualifier { font-size: 16px; margin-top: 18px; }
  .group-index { margin-top: 40px; column-gap: 28px; }
  .group-index a { flex-basis: 26%; }
  .area-group { padding-bottom: 58px; }
  .band-heading { align-items: start; gap: 30px; }
  .band-heading h2 { font-size: 41px; }
  .band-heading > p { font-size: 18px; }
  .product-family { padding-block: 70px; }
  .product-workspace { gap: 35px; }
  .foundations { grid-template-columns: 1fr; gap: 38px; padding-block: 70px; }
  .foundation-heading h2 br { display: none; }
  .foundation-heading h2 { font-size: 40px; }
  .contact { gap: 44px; padding-block: 80px 55px; grid-template-columns: .8fr 1fr; }
  .contact h2 { font-size: 72px; }
  .contact-heading > p { font-size: 19px; }
  .form-pair { grid-template-columns: 1fr; gap: 0; }
  .download-row { grid-template-columns: 50px minmax(0,.65fr) minmax(0,1.3fr) 25px; gap: 20px; }
  .download-name { font-size: 23px; }
  .download-description { font-size: 17px; }
}
@media (max-width: 600px) {
  :root { --gutter: 24px; }
  .screen-top { padding: 17px 16px; gap: 14px; }
  .screen-top img { width: 85px; flex-basis: 85px; }
  .screen-top > img + span { padding-left: 14px; }
  .cinema-panels { display: flex; flex-direction: column; }
  .queue-panel, .flow-panel, .report-panel { padding: 23px 18px; border-right: 0; }
  .flow-panel { border-top: 1px solid #5d7c90; }
  .ui-heading { margin-bottom: 18px; }
  .queue-entry { grid-template-columns: 18px minmax(0,1fr); }
  .queue-entry > :last-child { grid-column: 2; }
  .flow-request { padding-top: 18px; }
  .owner-line { margin-top: 6px; }
  .report-panel { order: 1; flex-direction: row; justify-content: space-between; gap: 14px 20px; }
  .report-panel > :first-child { flex-basis: 100%; }
  .map-panel { order: 2; }
  .map-panel .map-window { min-height: 205px; }
  .cinema-caption { text-align: left; padding-bottom: 33px; font-size: 16px; }
  .cinema-caption span { display: block; margin-top: 5px; }
  .everything { padding-block: 64px; }
  .section-intro { grid-template-columns: 1fr; gap: 30px; }
  .section-intro h2 { font-size: clamp(57px,15.2vw,80px); }
  .index-intro { padding: 0; }
  .section-lead { max-width: 330px; font-size: 27px; }
  .group-index { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 19px; row-gap: 8px; padding-block: 17px; }
  .group-index a { gap: 7px; align-items: start; font-size: 16px; line-height: 1.4; }
  .group-index a span { font-size: 18px; }
  .reading-layout { padding-top: 35px; }
  .area-group > h3 { font-size: 32px; margin-bottom: 25px; }
  .area-row summary { grid-template-columns: minmax(0,1fr) 20px; gap: 8px 14px; padding-block: 23px; }
  .area-name { grid-column: 1; font-size: 20px; }
  .area-summary { grid-column: 1; font-size: 18px; }
  .disclosure-mark { grid-column: 2; grid-row: 1 / span 2; }
  .area-copy { margin-right: 5px; padding-left: 14px; }
  .mobile-fragment { padding: 20px 18px; }
  .mobile-fragment .queue-entry:not(.current) { display: none; }
  .mobile-fragment .flow-request { display: grid; grid-template-columns: 1fr; }
  .mobile-fragment .owner-line { justify-self: start; }
  .mobile-fragment .onboarding { display: block; }
  .mobile-fragment .onboarding li { padding-block: 9px; }
  .mobile-fragment .onboarding small { display: none; }
  .permission-row { gap: 10px; grid-template-columns: minmax(0,1fr) 36px 36px; }
  .product-family { padding-block: 60px; }
  .band-heading { display: block; padding-bottom: 35px; }
  .band-heading h2 { font-size: 37px; }
  .band-heading > p { margin-top: 20px; font-size: 18px; }
  .product-workspace, .product-mobile { display: flex; flex-direction: column; gap: 28px; align-items: stretch; }
  .product-workspace { padding-bottom: 40px; }
  .product-workspace .workspace-fragment { order: 0; }
  .product-workspace .product-copy { order: 1; }
  .product-copy > p { max-width: none; font-size: 18px; }
  .product h3 { font-size: 34px; }
  .phone-illustration { width: 300px; max-width: 100%; }
  .product-mobile .product-copy { border-top: 1px solid #34536a; padding-top: 26px; }
  .foundation-list { grid-template-columns: 1fr; gap: 27px; }
  .foundations { padding-block: 60px; gap: 30px; }
  .foundation-heading h2 { font-size: 37px; }
  .contact { grid-template-columns: 1fr; gap: 42px; padding-block: 65px 48px; }
  .contact h2 { font-size: 56px; }
  .contact-heading > p { margin-top: 24px; font-size: 20px; }
  .contact-signal { margin-top: 32px; }
  .form-field { margin-bottom: 24px; }
  #contact-submit { width: 100%; }
  .downloads { padding-block: 60px; }
  .downloads h2 { font-size: 37px; margin-bottom: 28px; }
  .download-row { grid-template-columns: 48px minmax(0,1fr) 24px; gap: 15px; padding-block: 23px; }
  .download-name { font-size: 24px; }
  .download-description { grid-column: 1 / 3; grid-row: 2; font-size: 17px; }
  .download-arrow { grid-column: 3; grid-row: 1; }
}
@media (max-width: 359px) {
  :root { --gutter: 20px; }
  .screen-top { gap: 10px; padding-inline: 13px; }
  .screen-top img { width: 73px; flex-basis: 73px; }
  .screen-top > img + span { padding-left: 10px; }
  .section-intro h2 { font-size: 56px; }
  .group-index { grid-template-columns: 1fr; gap: 0; }
  .group-index a { min-height: 44px; align-items: center; }
  .contact h2 { font-size: 56px; }
  .band-heading h2, .foundation-heading h2, .downloads h2 { font-size: 33px; }
  .phone-screen { padding-inline: 12px; }
}
@media (min-width: 1001px) and (max-height: 820px) {
  .sticky-picture { top: calc(var(--chrome-height) + 24px); }
  .workspace-scene { min-height: 380px; }
  .workspace-scene .scene-detail { margin-top: 18px; padding-top: 18px; }
  .workspace-scene .scene-map { min-height: 220px; }
}
@media (min-width: 1001px) and (max-height: 680px) {
  .sticky-picture { position: static; }
  .has-workspace .reading-signal { display: none; }
}
/* CSS is the single source for the route layout mode; JS reads --stacked-route. */
@media (max-width: 1100px) {
  .hero { --stacked-route: 1; --lockup-width: var(--scene-width); --route-inset: calc(var(--scene-inset) + var(--scene-width) * .0093543); }
  .hero-opening { padding-top: 24px; }
  .stage { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto; grid-template-areas: 'lockup lockup lockup' 'alarm request plate' 'invoice shift gate'; gap: 18px 20px; }
  .signal-fragment { flex-direction: row; text-align: left; padding-right: 32px; }
  .brand-stage { margin: 0; }
  .brand-stage::after { display: none; }
  .stage::after { position: absolute; grid-area: auto; top: calc(var(--lockup-width) * .0178641); bottom: 0; left: calc(var(--lockup-width) * .954911); right: calc(var(--lockup-width) * .0093543); margin: 0; border: 0; border-top: 1px solid #70dfff; border-right: 1px solid #70dfff; border-radius: 0; }
  .message-bridge::after { right: var(--route-inset); bottom: 0; }
  .cinema-stage::before { display: none; }
  .workspace-arrival { right: calc(.93543% - 3.5px); }
  .hero-message { width: min(calc(100% - 2 * var(--gutter) - 32px), calc(100% - 2 * (var(--route-inset) + 16px))); max-width: 46rem; margin-top: 24px; }
  .hero h1 { font-size: clamp(1.75rem, 4vw, 2.4rem); }
  .hero-message p { font-size: 17px; }
}
@media (max-width: 767px) {
  .cinema-body, .cinema-panels { display: block; }
  .cinema-workspace .app-rail, .cinema-workspace .flow-panel,
  .cinema-workspace .map-panel, .cinema-workspace .report-panel { display: none; }
  .cinema-workspace .queue-panel { border-right: 0; }
  .screen-top > span { min-width: 0; }
}
@media (max-width: 600px) {
  .stage { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto auto; grid-template-areas: 'lockup lockup' 'alarm request' 'plate invoice' 'shift gate'; gap: 16px 20px; }
  .hero-actions { flex-direction: column; gap: 4px; }
  .hero-actions .button { width: 100%; }
  .hero-actions .text-link { justify-content: center; }
  .queue-panel, .flow-panel, .report-panel { padding: 23px 18px; }
  .report-panel > :first-child { flex-basis: 100%; }
}
@media (max-width: 359px) {
  :root { --gutter: 16px; }
  .stage { column-gap: 16px; }
  .fragment-mark { width: 18px; flex-basis: 18px; }
  .signal-fragment { gap: 6px; }
  .hero-message { width: min(calc(100% - 2 * var(--gutter) - 40px), calc(100% - 2 * (var(--route-inset) + 16px))); }
  .hero h1 { font-size: 1.75rem; }
}
@media (max-width: 399px), (max-height: 700px) and (max-width: 900px) {
  .stage { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; grid-template-areas: 'lockup lockup lockup' 'alarm request gate'; gap: 16px 10px; }
  .fragment-plate, .fragment-invoice, .fragment-shift { display: none; }
  .signal-fragment { gap: 5px; padding-right: 0; }
  .fragment-gate { padding-right: 20px; }
  .fragment-detail { display: none; }
  .fragment-mark { width: 16px; flex-basis: 16px; }
  .hero-message { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .stroke-mask, .continuation-trace { stroke-dashoffset: 0 !important; }
  .hero-message, .brand-word, .brand-node, .brand-node-halo, .signal-fragment, .continuation-track, .workspace-arrival { opacity: 1 !important; transform: none !important; }
  #signal-canvas, #skip-signal { display: none !important; }
}
@media (forced-colors: active) {
  .button { border: 1px solid ButtonText; }
  .disclosure-mark::before, .disclosure-mark::after { background: ButtonText; }
  .area-row, .group-index, .download-row, .foundation-list article { border-color: CanvasText; }
  .field-dots, #signal-canvas { display: none; }
  .hero-lockup use { stroke: CanvasText; }
  .hero-lockup > g[transform] > g > path, .brand-node, .brand-node-halo { fill: CanvasText; }
  .hero-lockup [mask] { mask: none; }
  .hero-lockup [filter], .continuation-signal, .continuation-trace { filter: none; }
  .brand-stage::before { display: none; }
  .workspace-arrival, .picture-arrival { background: CanvasText; box-shadow: none; }
  :focus-visible { outline-color: Highlight !important; }
  .continuation-track, .continuation-trace { stroke: Highlight; }
  .brand-stage::after, .stage::after, .message-bridge::after, .cinema-stage::before { border-color: Highlight; }
}

/* SVG marks never depend on a fallback font's symbol coverage. */
.icon { display: inline-block; width: 1em; height: 1em; min-width: 1em; vertical-align: -.12em; flex-shrink: 0; }
.fragment-mark .icon { width: 100%; min-width: 0; height: auto; }
.permission-row .icon { justify-self: center; }
.product-download { display: flex; flex-direction: column; align-items: flex-start; }
.product-download p { margin-top: 4px; color: #bed8ed; font-size: 16px; }