/* ============================================================
   SiteFX — site                                            v0.2
   Two layouts from one markup:
     html.is-horizontal  desktop with motion: the scenes sit in a
                         row and the Track effect drives them sideways
     (default)           phones, small windows, reduced motion:
                         the same scenes stacked
   Colours come only from the semantic tokens, so Ink, Bone and
   Volt restyle everything, effects included.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--fg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; transition: background-color .5s var(--e-out), color .5s var(--e-out); }
body { margin: 0; font: 400 var(--t-body)/1.6 var(--f-sans); background: transparent; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Every scrollbar is ours: native ones are hidden; the page gets the rail. */
html, html * { scrollbar-width: none; }
html::-webkit-scrollbar, html *::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Effects take their colours from the theme. */
:root {
  --fx-hud-ink: var(--fg); --fx-hud-bg: var(--bg); --fx-hud-strip: 56px; --fx-hud-accent: var(--accent); --fx-hud-rec: var(--rec); --fx-hud-font: var(--f-mono);
  --fx-lock-ink: var(--fg); --fx-lock-accent: var(--accent); --fx-lock-on-accent: var(--on-accent); --fx-lock-font: var(--f-mono); --fx-lock-z: 9700;
  --fx-rail-ink: var(--fg); --fx-rail-accent: var(--accent); --fx-rail-on-accent: var(--on-accent); --fx-rail-font: var(--f-mono);
  --fx-rain-ink: var(--rain-ink); --fx-rain-head: var(--rain-head);
  --fx-field-ink: var(--field-ink); --fx-field-accent: var(--field-accent); --fx-field-blend: var(--field-blend);
  --fx-radio-accent: var(--accent); --fx-radio-on-accent: var(--on-accent); --fx-radio-line: var(--rule-2); --fx-radio-font: var(--f-mono);
  --top-h: 64px;
}
/* Code rain fades out toward the reading column. */
.fx-rain.is-page { opacity: .9; -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / .35), #000 55%); mask-image: linear-gradient(90deg, rgb(0 0 0 / .35), #000 55%); }

/* Rack rails: a hairline down each side, fixed behind everything. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(var(--rule), var(--rule)) left var(--gutter) top 0 / 1px 100% no-repeat,
    linear-gradient(var(--rule), var(--rule)) right var(--gutter) top 0 / 1px 100% no-repeat;
}

/* ---------- Shared bits ---------- */
.label { margin: 0; font: 500 var(--t-label)/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.label::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 10px 1px 0; background: var(--accent); vertical-align: middle; }
.mono { font-family: var(--f-mono); }

.btn {
  display: inline-flex; align-items: center; gap: .8em; min-height: 48px; padding: 0 22px;
  font: 600 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  color: var(--fg); background: transparent; border: 1px solid var(--rule-2); border-radius: var(--r-1); cursor: pointer;
  transition: background var(--d-base), color var(--d-base), border-color var(--d-base);
}
.btn-solid { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

.pill {
  display: inline-flex; align-items: center; gap: .6em; height: 36px; padding: 0 14px;
  font: 500 10.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase;
  background: transparent; border: 1px solid var(--rule-2); border-radius: 999px; cursor: pointer;
  transition: border-color var(--d-fast), color var(--d-fast);
}
.pill b { font-weight: 600; color: var(--accent); }
.pill[aria-pressed="false"] b { color: var(--fg-3); }
.pill:disabled { opacity: .5; cursor: not-allowed; }
.pill-sm { height: 30px; padding: 0 12px; font-size: 10px; }

.led { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--panel-3); box-shadow: inset 0 0 0 1px var(--rule-2); transition: background var(--d-base), box-shadow var(--d-base); }
.led.on { background: var(--accent); box-shadow: 0 0 0 1px var(--glow), 0 0 14px var(--glow); }
.screw { width: 9px; height: 9px; border-radius: 50%; flex: none; background: linear-gradient(45deg, transparent 44%, var(--bg) 44% 56%, transparent 56%), radial-gradient(circle, var(--rule-2) 0 62%, transparent 64%); }
.sw { position: relative; width: 42px; height: 22px; flex: none; border-radius: 11px; cursor: pointer; background: var(--panel-3); border: 1px solid var(--rule-2); transition: background var(--d-base), border-color var(--d-base); }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--fg-3); transition: transform var(--d-base) var(--e-out), background var(--d-base); }
.sw[aria-pressed="true"] { border-color: var(--accent); }
.sw[aria-pressed="true"]::after { transform: translateX(20px); background: var(--accent); }

/* ---------- Boot screen ---------- */
.boot { display: none; }
html.is-booting .boot {
  display: grid; position: fixed; inset: 0; z-index: 10000; place-items: center; padding: var(--gutter);
  background: var(--bg); color: var(--fg); font: 500 13px/1.9 var(--f-mono);
  clip-path: inset(0 0 0 0); transition: clip-path .9s var(--e-io);
}
html.is-booting .boot.is-out { clip-path: inset(0 0 100% 0); }
.boot-box { width: min(620px, 100%); min-width: 0; }
html.is-booting .boot { grid-template-columns: minmax(0, 620px); justify-content: center; }
.boot-head { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between; margin-bottom: 18px; color: var(--fg-3); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.boot-log { margin: 0; padding: 0; list-style: none; min-height: 15.2em; }
/* A narrow screen wraps a log line like a terminal does: the text hangs
   under itself, after the [ ok ] tag, and nothing is cut. */
.boot-log li { display: flex; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; }
.boot-log li > span:first-child { flex: none; white-space: pre; }
.boot-log li > span:last-child { min-width: 0; overflow-wrap: break-word; }
@media (max-width: 560px) { .boot-log { min-height: 20.9em; } }
@media (max-height: 520px) {
  html.is-booting .boot { font-size: 12px; line-height: 1.6; }
  .boot-logo { display: none; }
  .boot-log { min-height: 0; }
}
.boot-log li.is-in { opacity: 1; transform: none; }
.boot-log .ok { color: var(--accent); }
.boot-bar { position: relative; height: 2px; margin-top: 22px; background: var(--rule); }
.boot-bar i { position: absolute; inset: 0; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.boot-foot { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between; margin-top: 10px; color: var(--fg-3); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.boot-logo { width: 150px; margin-bottom: 36px; color: var(--logo-ink); }

/* ---------- Header ---------- */
.top {
  position: absolute; top: calc(clamp(10px, 1.4vw, 20px) + 22px); left: 0; right: 0; z-index: 8600;
  display: flex; align-items: center; gap: var(--s-5); height: var(--top-h);
  padding-inline: calc(var(--gutter) + clamp(12px, 2vw, 28px));
}
.brand { display: block; width: 116px; color: var(--logo-ink); }
.brand svg, .boot-logo svg, .logo-big svg { width: 100%; height: auto; overflow: visible; }
.logo-ink { fill: var(--logo-ink); }
.logo-bk { fill: var(--logo-bracket); }
.logo-led { fill: var(--rec); }
.top-tools { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }
.seg { display: inline-flex; height: 36px; padding: 3px; border: 1px solid var(--rule-2); border-radius: 999px; }
.seg button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 999px; font: 500 10px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); }
.seg button i { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--rule-2); }
.seg button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.icon-btn { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--rule-2); border-radius: 50%; background: transparent; cursor: pointer; transition: border-color var(--d-fast); }
.icon-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.icon-btn .fs-out { display: none; }
.icon-btn[aria-pressed="true"] .fs-in { display: none; }
.icon-btn[aria-pressed="true"] .fs-out { display: block; }
/* The inline scene list only where there is room; the burger menu always has it. */

/* Phones: a bigger logo, and the radio and theme switch folded until tapped. */
@media (max-width: 760px) {
  .top { gap: 6px; padding-inline: calc(var(--gutter) + 8px); }
  .brand { width: 128px; flex: none; transition: opacity .25s var(--e-out); }
  .top.has-open .brand { opacity: 0; pointer-events: none; }
  .top-tools { gap: 6px; }
  .top-tools .pill[data-motion] { display: none; }
  .seg button span { display: none; }
  .fx-radio.is-collapsed { gap: 6px; padding: 0 9px 0 3px; }
  .fx-radio.is-collapsed .fx-radio-name { display: none; }
  .seg.is-collapsed { padding: 3px; }
  .seg.is-collapsed button[aria-pressed="false"] { display: none; }
  .seg:not(.is-collapsed) button span { display: inline; }
  .seg button { padding: 0 9px; }
}
@media (max-width: 380px) { .brand { width: 112px; } }

html.is-horizontal .top { position: fixed; }

/* ---------- Scenes: stacked (default) ---------- */
main { position: relative; }
.scene { position: relative; padding: calc(var(--top-h) + 96px) calc(var(--gutter) + clamp(16px, 3vw, 40px)) 120px; border-top: 1px solid var(--rule); }
.scene:first-child { border-top: 0; }
.scene-head { display: grid; gap: var(--s-4); align-content: start; max-width: 640px; margin-bottom: var(--s-7); container-type: inline-size; }
.scene-head h2, .h2 { margin: var(--s-2) 0 0; font: 700 clamp(28px, 4.4vw, 76px)/.92 var(--f-display); font-stretch: 108%; text-transform: uppercase; text-wrap: balance; }
.scene-lede { margin: 0; max-width: 46ch; color: var(--fg-2); }

/* ---------- Scenes: horizontal ---------- */
html.is-horizontal main { height: 100vh; height: 100dvh; overflow: hidden; }
html.is-horizontal .fx-track-inner, html.is-horizontal main > .track-row { display: flex; flex-wrap: nowrap; width: max-content; height: 100%; }
html.is-horizontal .scene { flex: none; width: 100vw; height: 100%; padding: var(--zone-top) clamp(40px, 4vw, 72px) var(--zone-bottom); border-top: 0; border-left: 1px solid var(--rule); overflow: hidden; }
html.is-horizontal .scene:first-child { border-left: 0; }

/* ---------- 00 Hero ---------- */
.scene-hero { min-height: 100vh; min-height: 100dvh; display: grid; align-content: center; overflow: hidden; }
.hero-field { position: absolute; inset: 0; z-index: 0; }
.hero-copy { position: relative; z-index: 2; max-width: 1100px; pointer-events: none; container-type: inline-size; }
.hero-copy a, .hero-copy button { pointer-events: auto; }
.hero-title { margin: var(--s-5) 0 0; font: 800 clamp(30px, 7.2vw, 136px)/.86 var(--f-display); font-stretch: 112%; letter-spacing: -.01em; text-transform: uppercase; }
.hero-title .h-line { display: block; max-width: 9.5ch; }
.hero-title .h-word { display: block; color: var(--accent); white-space: nowrap; }
.hero-lede { margin: var(--s-6) 0 0; max-width: 40ch; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.5; color: var(--fg-2); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.tags { position: absolute; inset: 0; z-index: 1; pointer-events: none; font: 500 10px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); }
.tags span { position: absolute; padding-left: 14px; white-space: nowrap; }
.tags span::before { content: ""; position: absolute; left: 0; top: 50%; width: 9px; height: 1px; background: var(--accent); }
.tags b { display: block; font-weight: 500; color: var(--fg-3); }
.tag-a { left: 61%; top: 22%; } .tag-b { left: 84%; top: 40%; } .tag-c { left: 58%; top: 76%; } .tag-d { left: 82%; top: 70%; }
.scroll-cue { position: absolute; z-index: 2; left: clamp(40px, 4vw, 72px); bottom: 92px; display: flex; align-items: center; gap: 12px; font: 500 10px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); }
.scroll-cue i { position: relative; width: 64px; height: 1px; background: var(--rule-2); overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: translateX(-100%); }
html.fx-motion .scroll-cue i::after { animation: cue 1.8s var(--e-io) infinite; }
@keyframes cue { 50% { transform: none; } 100% { transform: translateX(100%); } }
@media (max-width: 1023px) { .tags { display: none; } .scroll-cue { display: none; } .hero-field { opacity: .8; } }
/* On touch screens, say the collider can be touched. */
.field-hint { display: none; }
@media (hover: none) {
  .field-hint { display: flex; align-items: center; gap: 10px; position: relative; z-index: 2; margin: var(--s-6) 0 0; font: 500 10px/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
  .field-hint::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--glow); animation: hint-pulse 1.8s ease-out infinite; }
  html:not(.fx-motion) .field-hint::before { animation: none; }
}
@keyframes hint-pulse { 70% { box-shadow: 0 0 0 10px transparent; } }
.hero-title { font-size: min(9cqi, 136px); }
@media (max-width: 600px) { .hero-title { font-stretch: 100%; font-size: min(10cqi, 64px); } }

/* ---------- 01 Signal ---------- */
.scene-signal { display: grid; align-content: start; align-content: safe center; gap: clamp(28px, 5vh, 56px); padding-inline: 0 !important; }
/* A band never cuts its own type. It clips sideways (it is a marquee), and a
   grid would happily squeeze a clipping row to nothing when the scene runs
   tall; here it never gets shorter than its line. */
.scene-signal > .band { min-height: 1em; }
.band { font: 800 clamp(48px, 9vw, 168px)/1 var(--f-display); font-stretch: 125%; text-transform: uppercase; }
.band span { padding-right: .3em; }
.band-outline { color: transparent; -webkit-text-stroke: 1px var(--fg-3); }
.band-accent { color: var(--accent); font-size: clamp(22px, 2.6vw, 44px); font-family: var(--f-mono); font-weight: 500; font-stretch: 100%; letter-spacing: .04em; text-transform: none; }
.signal-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); align-items: end; padding-inline: clamp(40px, 4vw, 72px); }
.signal-copy p:not(.label) { margin: 0; max-width: 46ch; color: var(--fg-2); font-size: clamp(16px, 1.2vw, 19px); }
@media (max-width: 900px) { .signal-copy { grid-template-columns: 1fr; padding-inline: calc(var(--gutter) + 16px); } }

/* ---------- 02 Rack ---------- */
.scene-rack .rack-wrap { display: grid; gap: var(--s-7); }
.rack { display: grid; gap: 1px; padding: 1px; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); }
.rack > * { box-shadow: 0 0 0 1px var(--rule); }
@media (min-width: 560px) { .rack { --cols: 2; } }
@media (min-width: 860px) { .rack { --cols: 3; } }
@media (min-width: 1100px) { .rack { --cols: 4; } }
html.is-horizontal .scene-rack { width: auto; }
html.is-horizontal .scene-rack .rack-wrap { grid-template-columns: clamp(330px, 30vw, 480px) auto; height: 100%; align-items: stretch; }
html.is-horizontal .scene-rack .scene-head { margin: 0; align-content: center; }
html.is-horizontal .rack { grid-template-columns: repeat(6, clamp(250px, 19vw, 300px)); grid-template-rows: repeat(2, minmax(0, 1fr)); height: 100%; }
.unit { display: grid; grid-template-rows: auto auto 1fr auto auto; gap: var(--s-3); padding: var(--s-5) var(--s-5) var(--s-4); background: var(--panel); transition: background var(--d-base); min-height: 0; }
.unit[data-state="live"] { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent 45%), var(--panel); }
.unit-head { display: flex; align-items: center; gap: var(--s-3); padding-bottom: var(--s-3); border-bottom: 1px solid var(--rule); }
.unit-id { font: 600 10.5px/1 var(--f-mono); letter-spacing: .14em; }
.unit-head .led { margin-left: auto; }
.unit h3 { margin: var(--s-2) 0 0; font: 700 21px/1 var(--f-display); font-stretch: 112%; text-transform: uppercase; }
.unit p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.spec { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: var(--s-3) 0; border-block: 1px dashed var(--rule); font: 500 10.5px/1.3 var(--f-mono); letter-spacing: .06em; color: var(--fg-2); }
.spec dt { display: none; }
.spec dd { margin: 0; }
.unit-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 32px; }
.state { font: 600 10.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.unit[data-state="live"] .state { color: var(--accent); }
.unit[data-state="skipped"] .state { color: var(--warn); }
.rack-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font: 500 11px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.rack-meta b { color: var(--fg); font-weight: 600; }

/* ---------- 03 Brand ---------- */
html.is-horizontal .scene-brand { width: auto; }
.brand-grid { display: grid; gap: 1px; padding: 1px; grid-template-columns: minmax(0, 1fr); }
.brand-grid > * { box-shadow: 0 0 0 1px var(--rule); background: var(--panel); }
html.is-horizontal .brand-grid { grid-template-columns: none; grid-auto-flow: column; grid-template-rows: repeat(2, minmax(0, 1fr)); grid-auto-columns: clamp(300px, 26vw, 440px); height: 100%; }
html.is-horizontal .brand-wrap { display: grid; grid-template-columns: clamp(330px, 30vw, 480px) auto; gap: var(--s-7); height: 100%; }
html.is-horizontal .brand-wrap .scene-head { margin: 0; align-content: center; }
@media (min-width: 700px) { html:not(.is-horizontal) .brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cell { display: grid; grid-template-columns: minmax(0, 1fr); align-content: space-between; gap: var(--s-5); padding: clamp(20px, 2vw, 32px); min-height: 0; min-width: 0; overflow: hidden; container-type: inline-size; }
.cell .label::before { background: var(--rule-2); }
.cell-wide { grid-row: span 2; }
/* The logo plates wear the three themes: data-fx-tint re-scopes the tokens. */
.cell[data-fx-tint] { background: var(--bg) !important; color: var(--fg); }
.cell[data-fx-tint] .label { color: var(--fg-3); }
.logo-big { color: var(--logo-ink); width: min(100%, 360px); }
.marks { display: flex; align-items: flex-end; gap: var(--s-5); }
.marks img { width: auto; flex: none; }
.swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 0; padding: 0; list-style: none; }
.swatches li { display: grid; gap: 3px; font: 500 10px/1.3 var(--f-mono); letter-spacing: .06em; color: var(--fg-2); }
.swatches li i { display: block; height: 54px; background: var(--c); box-shadow: inset 0 0 0 1px var(--rule); margin-bottom: 6px; }
.swatches b { font: 600 11px/1.2 var(--f-sans); color: var(--fg); letter-spacing: 0; }
.themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.theme-card { all: unset; cursor: pointer; display: grid; gap: 8px; padding: 12px; border: 1px solid var(--rule-2); font: 600 10.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
.theme-card i { height: 44px; display: grid; place-items: center; font: 800 18px/1 var(--f-display); font-style: normal; }
.theme-card[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.theme-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Sized by its card, not the window: starts condensed so Flex has room to stretch it. */
.specimen { margin: 0; font: 700 min(19cqi, 120px)/.9 var(--f-display); font-stretch: 62%; text-transform: uppercase; white-space: nowrap; }
.axes { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; font: 500 10.5px/1 var(--f-mono); letter-spacing: .08em; color: var(--fg-3); text-transform: uppercase; }
.cyr { margin: 0; font: 600 min(7.2cqi, 30px)/1.1 var(--f-display); font-stretch: 125%; text-transform: uppercase; color: var(--fg-2); overflow-wrap: anywhere; }
.reading { margin: 0; font-size: 16px; line-height: 1.6; color: var(--fg-2); }
.readout { margin: 0; font: 400 12.5px/1.85 var(--f-mono); color: var(--fg-2); white-space: pre-wrap; }
.readout .ok { color: var(--accent); }

/* ---------- 04 Specs ---------- */
.scene-specs { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; overflow: hidden; }
.ghost { position: absolute; right: -4vw; top: 50%; translate: 0 -50%; z-index: 0; margin: 0; font: 800 46vw/.8 var(--f-display); font-stretch: 150%; color: transparent; -webkit-text-stroke: 1px var(--rule-2); pointer-events: none; user-select: none; }
.specs { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; padding: 1px; margin-top: var(--s-6); }
.specs > * { box-shadow: 0 0 0 1px var(--rule); background: color-mix(in srgb, var(--panel) 88%, transparent); }
.spec-cell { display: grid; gap: var(--s-2); padding: clamp(20px, 2.4vw, 36px); min-width: 0; container-type: inline-size; }
/* Sized by its cell: "6.6 KB", the longest figure, is about 6.4em wide. */
.spec-cell strong { font: 800 min(15cqi, 96px)/.9 var(--f-display); font-stretch: 110%; white-space: nowrap; }
.spec-cell span { font: 500 11px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.ring { position: absolute; z-index: 0; right: 8%; bottom: 10%; width: min(32vw, 420px); color: var(--accent); opacity: .7; }
.ring svg { width: 100%; height: auto; fill: none; stroke: currentColor; stroke-width: 1; }
@media (max-width: 760px) { .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ring { display: none; } }

/* ---------- 05 Console ---------- */
.scene-console { display: grid; align-content: center; gap: var(--s-6); }
.console-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 72px); align-items: start; }
@media (max-width: 900px) { .console-grid { grid-template-columns: 1fr; } }
.console-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: var(--s-4); }
.console-note { font: 500 11px/1.4 var(--f-mono); color: var(--warn); }
.console { margin: 0; padding: 0; list-style: none; border: 1px solid var(--rule); background: var(--panel); font: 400 12px/1.4 var(--f-mono); }
.console li { display: grid; grid-template-columns: 64px 128px minmax(0, 1fr) 64px; gap: 12px; padding: 9px 14px; border-top: 1px solid var(--rule); color: var(--fg-2); }
.console li:first-child { border-top: 0; color: var(--fg-3); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.console li span:nth-child(3) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.console .s-live { color: var(--accent); }
.console .s-waiting, .console .s-loading { color: var(--warn); }
html.is-horizontal .console { max-height: calc(100dvh - var(--zone-top) - var(--zone-bottom) - 60px); overflow: hidden; -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
.console-libs { margin: var(--s-3) 0 0; font: 400 11px/1.6 var(--f-mono); color: var(--fg-3); }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--rule); font: 500 10.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }

/* ---------- 06 Makers ---------- */
.makers-wrap { display: grid; gap: var(--s-7); }
.makers { display: grid; gap: 1px; padding: 1px; grid-template-columns: 1fr; }
.makers > * { box-shadow: 0 0 0 1px var(--rule); }
@media (min-width: 760px) { .makers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.maker { display: grid; grid-template-rows: auto 1fr auto; gap: var(--s-4); padding: clamp(20px, 2vw, 28px); background: var(--panel); text-decoration: none; color: var(--fg); transition: background var(--d-base); }
.maker:hover, .maker:focus-visible { background: var(--panel-2); }
/* The makers' marks sit small and grey, out of the palette, and colour
   in when their card is hovered, focused or pressed. */
.maker-logo { display: flex; align-items: center; height: 44px; filter: grayscale(1); opacity: .5; transition: filter .5s var(--e-out), opacity .5s var(--e-out); }
.maker:hover .maker-logo, .maker:focus-visible .maker-logo, .maker:active .maker-logo { filter: grayscale(0); opacity: 1; }
.maker-logo img { width: 36px; height: 36px; }
.maker-logo .maker-tile { border-radius: 8px; }
.maker-myth svg { width: auto; height: 18px; color: var(--fg); }
/* The infinity reads at rest in every theme (a quiet text tone), turns
   Mythfinity teal on hover, and stays ink wherever the surface is volt. */
.maker-myth { --mf-mark: var(--fg-3); }
.maker:is(:hover, :focus-visible, :active) .maker-myth { --mf-mark: #11A4B5; }
[data-theme="volt"] .maker-myth, [data-theme="volt"] .maker:is(:hover, :focus-visible, :active) .maker-myth,
.maker[data-fx-tint="volt"] .maker-myth { --mf-mark: var(--fg); }

/* MP13 · a small cyberpunk glitch. Now and then the roundel tears into offset,
   hue-split slices and jitters; hovered, it glitches every second or so. */
.mp13-glitch { position: relative; display: block; flex: none; line-height: 0; }
.mp13-glitch img { display: block; }
.mp13-glitch::before, .mp13-glitch::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; clip-path: inset(0 0 100% 0);
  background: url(/brand/partners/mp13.png) center / contain no-repeat;
}
.mp13-glitch::before { filter: hue-rotate(150deg) saturate(1.7); }
.mp13-glitch::after { filter: hue-rotate(-70deg) saturate(1.4); }
html.fx-motion .mp13-glitch img { animation: mp-jitter 5.2s steps(1) infinite; }
html.fx-motion .mp13-glitch::before { animation: mp-tear-a 5.2s steps(1) infinite; }
html.fx-motion .mp13-glitch::after { animation: mp-tear-b 5.2s steps(1) infinite; }
html.fx-motion .maker:is(:hover, :focus-visible) .mp13-glitch img,
html.fx-motion .maker:is(:hover, :focus-visible) .mp13-glitch::before,
html.fx-motion .maker:is(:hover, :focus-visible) .mp13-glitch::after { animation-duration: 1.3s; }
@keyframes mp-tear-a {
  0%, 84% { opacity: 0; clip-path: inset(0 0 100% 0); transform: none; }
  85% { opacity: 1; clip-path: inset(8% 0 64% 0); transform: translateX(-4px); }
  87% { clip-path: inset(52% 0 22% 0); transform: translateX(3px); }
  89% { clip-path: inset(30% 0 48% 0); transform: translateX(-2px); }
  91% { clip-path: inset(70% 0 6% 0); transform: translateX(4px); }
  93% { clip-path: inset(18% 0 70% 0); transform: translateX(-3px); }
  95%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); transform: none; }
}
@keyframes mp-tear-b {
  0%, 85% { opacity: 0; clip-path: inset(0 0 100% 0); transform: none; }
  86% { opacity: 1; clip-path: inset(60% 0 14% 0); transform: translateX(3px); }
  88% { clip-path: inset(12% 0 72% 0); transform: translateX(-4px); }
  90% { clip-path: inset(40% 0 36% 0); transform: translateX(2px); }
  92% { clip-path: inset(80% 0 2% 0); transform: translateX(-2px); }
  94%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); transform: none; }
}
@keyframes mp-jitter {
  0%, 84% { transform: none; }
  86% { transform: translateX(1px) skewX(-8deg); }
  88% { transform: translateX(-1px); }
  90% { transform: none; }
  92% { transform: translateX(2px) skewX(6deg); }
  94%, 100% { transform: none; }
}

/* Behub · the mark from behub.dev, in Martian Mono (variable). Arriving, it
   types "business development hub" narrow and light, folds the extra letters
   away, then dev and hub trade places round a slash: behub/dev, wide and
   heavy (site.js). Hovered, it opens back out. The markup reads the full name;
   .is-short reorders it. Sized to its room (container units) so the open name
   always fits. */
.maker-logo { gap: 12px; }
.lw-wrap { flex: 1; min-width: 0; container-type: inline-size; }
.lw {
  --kin: 1; display: inline-flex; align-items: baseline; white-space: pre;
  font: 600 min(18px, calc(100cqi / 17))/1 'Martian Mono', var(--f-mono); letter-spacing: -.03em;
  font-variation-settings: 'wdth' calc(75 + var(--kin) * 37.5), 'wght' calc(200 + (.3 + .7 * var(--kin)) * 600);
}
.lw-x, .lw-c { display: inline-block; overflow: hidden; vertical-align: bottom; transition: max-width .5s var(--e-out), opacity .2s steps(2); }
.lw-x { max-width: 0; opacity: 0; color: var(--fg-3); }
.lw-c { max-width: 0; opacity: 0; }
.lw.is-short .lw-c { max-width: 1em; opacity: 1; }
.lw.is-short [data-k="hub"] { order: 1; }
.lw.is-short .lw-c { order: 2; }
.lw.is-short [data-k="dev"] { order: 3; }
.lw.is-short [data-x="elopment"] { order: 4; }
.lw.is-short [data-x="sp"] { order: 5; }
.lw.is-js .lw-x, .lw.is-js .lw-c { transition: none; }                 /* the script owns every move */
/* Without the script (motion off), hovering opens the full name at once. */
.maker:is(:hover, :focus-visible) .lw:not(.is-js) > * { order: 0; }
.maker:is(:hover, :focus-visible) .lw:not(.is-js) .lw-x { max-width: calc(var(--n) * .8em); opacity: 1; }
.maker:is(:hover, :focus-visible) .lw:not(.is-js) .lw-c { max-width: 0; opacity: 0; }

/* Mythfinity · a comet runs the ribbon the way it is drawn: in at the flat
   tail, round the lower lobe, up the diagonal, round the loop, under the
   crossing and out through the arrow, then round again. It rides the
   ribbon's centre line and is clipped to the ribbon, so it stays inside it.
   One steady speed (no jumps); hovered, it burns brighter. */
.mf-run path { fill: none; stroke-linecap: round; }
.mf-head { stroke: #F4FEFF; stroke-width: 74; stroke-dasharray: .6 99.4; }
.mf-tail1 { stroke: #A8F4FC; stroke-width: 62; stroke-dasharray: 6 94; opacity: .55; }
.mf-tail2 { stroke: #A8F4FC; stroke-width: 50; stroke-dasharray: 14 86; opacity: .22; }
.mf-run { opacity: 0; transition: opacity .4s; }
html.fx-motion .mf-run { opacity: .9; }
html.fx-motion .maker:is(:hover, :focus-visible) .mf-run { opacity: 1; }
html.fx-motion .mf-head { animation: mf-head 3.2s linear infinite; }
html.fx-motion .mf-tail1 { animation: mf-tail1 3.2s linear infinite; }
html.fx-motion .mf-tail2 { animation: mf-tail2 3.2s linear infinite; }
@keyframes mf-head { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
@keyframes mf-tail1 { from { stroke-dashoffset: 5.4; } to { stroke-dashoffset: -94.6; } }
@keyframes mf-tail2 { from { stroke-dashoffset: 13.4; } to { stroke-dashoffset: -86.6; } }
.maker-text { display: grid; gap: 6px; align-content: start; }
.maker-text b { font: 700 20px/1 var(--f-display); font-stretch: 112%; text-transform: uppercase; }
.maker-text span { font-size: 14px; line-height: 1.45; color: var(--fg-2); }
.maker-url { font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); transition: color var(--d-fast); }
.maker:hover .maker-url { color: var(--accent); }
.contact-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-5); padding: clamp(18px, 2vw, 28px); border: 1px solid var(--rule-2); background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.contact-strip h3 { margin: var(--s-2) 0 var(--s-2); font: 800 clamp(26px, 2.6vw, 44px)/.95 var(--f-display); font-stretch: 112%; text-transform: uppercase; }
.contact-strip p:not(.label) { margin: 0; max-width: 46ch; color: var(--fg-2); font-size: 15px; }
.contact-strip .btn { text-transform: none; letter-spacing: .04em; font-size: 14px; }
html.is-horizontal .scene-makers { width: auto; min-width: 100vw; }
html.is-horizontal .makers-wrap { grid-template-columns: clamp(330px, 30vw, 480px) minmax(0, 1fr); grid-template-rows: auto auto auto; align-content: center; height: 100%; column-gap: clamp(32px, 4vw, 72px); row-gap: var(--s-4); }
html.is-horizontal .makers-wrap .scene-head { grid-row: span 3; margin: 0; align-self: center; }
html.is-horizontal .makers { grid-template-columns: repeat(3, clamp(260px, 21vw, 340px)); }
html.is-horizontal .makers-wrap .foot { padding-top: clamp(8px, 1.4dvh, 16px); }

/* ============================================================
   Fit to the window
   The horizontal layout lives inside one dynamic viewport
   (100dvh: it follows browser bars and full screen). Type,
   spacing and cards scale with the window's height as well as
   its width, so every scene is seen whole, windowed or not.
   ============================================================ */
:root { --zone-top: 128px; --zone-bottom: 92px; }
html.is-horizontal {
  --zone-top: clamp(96px, 14dvh, 132px);      /* HUD row + header */
  --zone-bottom: clamp(78px, 10dvh, 100px);    /* rail + HUD strip */
  --top-h: clamp(48px, 7dvh, 64px);
}
html.is-horizontal .top { top: clamp(30px, 4.6dvh, 42px); }
html.is-horizontal .hero-title { font-size: min(9cqi, 13.6dvh, 136px); }
html.is-horizontal .hero-lede { margin-top: clamp(14px, 3.4dvh, 32px); font-size: clamp(15px, min(1.35vw, 2.5dvh), 21px); }
html.is-horizontal .hero-cta { margin-top: clamp(14px, 3.4dvh, 32px); }
html.is-horizontal .hero-title, html.is-horizontal .scene-head { margin-top: 0; }
html.is-horizontal .hero-copy .label + .hero-title { margin-top: clamp(10px, 2.4dvh, 24px); }
html.is-horizontal .scene-head h2, html.is-horizontal .h2 { font-size: clamp(28px, min(4.4vw, 8.4dvh), 76px); }
/* A heading never outgrows its column: about 8.6em for the longest word. */
.scene-head h2 { font-size: min(11.2cqi, 76px); }
html.is-horizontal .scene-head h2 { font-size: min(11.2cqi, 8.4dvh, 76px); }
html.is-horizontal .scene-head { gap: clamp(8px, 1.6dvh, 16px); }
html.is-horizontal .scene-lede { font-size: clamp(14px, min(1.05vw, 2.1dvh), 18px); }
html.is-horizontal .scroll-cue { bottom: calc(var(--zone-bottom) - 4px); }
html.is-horizontal .band { font-size: clamp(40px, min(9vw, 15dvh), 168px); }
html.is-horizontal .band-accent { font-size: clamp(18px, min(2.6vw, 4.4dvh), 44px); }
html.is-horizontal .scene-signal { gap: clamp(14px, 3.4dvh, 56px); }
/* On the fixed-height track the two big bands share whatever height the copy
   leaves, and their type sizes to it (container units), up to the usual size:
   a taller heading or a shorter window makes the bands smaller, never cut. */
html.is-horizontal .scene-signal { grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr) auto; align-content: stretch; }
html.is-horizontal .scene-signal > .band:not(.band-accent) { min-height: 0; container-type: size; align-items: center; }
html.is-horizontal .scene-signal > .band:not(.band-accent) > * { font-size: min(clamp(40px, min(9vw, 15dvh), 168px), 92cqh); }
/* Rack cards give up their description before they would ever clip. */
html.is-horizontal .unit { padding: clamp(12px, 2.2dvh, 24px) clamp(14px, 1.6vw, 24px) clamp(10px, 1.6dvh, 16px); gap: clamp(6px, 1.2dvh, 12px); }
html.is-horizontal .unit h3 { font-size: clamp(16px, min(1.5vw, 2.6dvh), 21px); margin-top: 0; }
html.is-horizontal .unit-head { padding-bottom: clamp(6px, 1.2dvh, 12px); }
html.is-horizontal .spec { padding-block: clamp(6px, 1.1dvh, 12px); }
html.is-horizontal .unit p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; font-size: clamp(12.5px, 1.75dvh, 14px); }
@media (max-height: 820px) { html.is-horizontal .unit p { -webkit-line-clamp: 2; line-clamp: 2; } }
@media (max-height: 620px) { html.is-horizontal .unit p { display: none; } }
/* Brand */
html.is-horizontal .cell { padding: clamp(14px, 2.4dvh, 32px); gap: clamp(10px, 2dvh, 24px); }
html.is-horizontal .specimen { font-size: min(19cqi, 12dvh, 120px); }
html.is-horizontal .logo-big { width: min(100%, 360px, 34dvh); }
html.is-horizontal .swatches li i { height: clamp(26px, 5.6dvh, 54px); }
html.is-horizontal .themes .theme-card i { height: clamp(26px, 4.6dvh, 44px); }
html.is-horizontal .marks img:first-child { width: clamp(64px, 11dvh, 112px); height: auto; }
html.is-horizontal .marks img:last-child { width: clamp(40px, 6.6dvh, 64px); height: auto; }
@media (max-height: 760px) { html.is-horizontal .brand-grid .reading { font-size: 14px; } html.is-horizontal .readout { font-size: 11.5px; line-height: 1.65; } }
/* Specs */
html.is-horizontal .specs { margin-top: clamp(12px, 3dvh, 32px); }
html.is-horizontal .spec-cell { padding: clamp(14px, 2.6dvh, 36px) clamp(16px, 2vw, 36px); }
html.is-horizontal .spec-cell strong { font-size: min(15cqi, 9.6dvh, 96px); }
/* Console */
html.is-horizontal .console li { padding-block: clamp(6px, 1.05dvh, 9px); }
/* Makers */
html.is-horizontal .maker { padding: clamp(14px, 2.4dvh, 28px) clamp(16px, 1.8vw, 28px); gap: clamp(8px, 1.8dvh, 16px); }
html.is-horizontal .maker-logo { height: clamp(32px, 5.4dvh, 44px); }
html.is-horizontal .maker-logo img { width: clamp(28px, 4.4dvh, 36px); height: auto; }
html.is-horizontal .maker-myth svg { height: clamp(14px, 2.2dvh, 18px); }
html.is-horizontal .contact-strip { padding: clamp(14px, 2.4dvh, 28px) clamp(18px, 2vw, 28px); }
html.is-horizontal .contact-strip h3 { font-size: clamp(22px, min(2.6vw, 5dvh), 44px); }

/* ---------- 03 Services ---------- */
.services-wrap, .faq-wrap { display: grid; gap: var(--s-7); }
.services, .faq { display: grid; gap: 1px; padding: 1px; grid-template-columns: 1fr; }
.services > *, .faq > * { box-shadow: 0 0 0 1px var(--rule); }
@media (min-width: 900px) { .services { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.service { display: grid; align-content: start; gap: var(--s-3); padding: clamp(20px, 2vw, 32px); background: var(--panel); }
.service-no { margin: 0; font: 800 clamp(40px, 4vw, 64px)/.85 var(--f-display); font-stretch: 150%; color: var(--accent); }
.service h3 { margin: var(--s-2) 0 0; font: 700 clamp(20px, 1.7vw, 26px)/1 var(--f-display); font-stretch: 112%; text-transform: uppercase; }
.service p:not(.service-no) { margin: 0; font-size: 15px; line-height: 1.55; color: var(--fg-2); }
.service ul { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--s-2) 0 0; padding: 0; list-style: none; }
.service li { padding: 5px 9px; border: 1px solid var(--rule-2); font: 500 10.5px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); }

/* ---------- 06 FAQ ---------- */
@media (min-width: 760px) { .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qa { padding: clamp(18px, 1.8vw, 26px); background: var(--panel); }
.qa h3 { margin: 0 0 var(--s-2); font: 600 17px/1.25 var(--f-sans); }
.qa p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--fg-2); }
.scene-lede a, .foot a { color: var(--accent); }

/* Both, side by side: heading column, then the cards. */
html.is-horizontal .scene-services, html.is-horizontal .scene-faq { width: auto; min-width: 100vw; }
html.is-horizontal .services-wrap, html.is-horizontal .faq-wrap { grid-template-columns: clamp(330px, 30vw, 480px) auto; height: 100%; align-items: center; column-gap: clamp(32px, 4vw, 72px); }
html.is-horizontal .services-wrap .scene-head, html.is-horizontal .faq-wrap .scene-head { margin: 0; }
html.is-horizontal .services { grid-template-columns: repeat(3, clamp(280px, 22vw, 360px)); }
html.is-horizontal .faq { grid-template-columns: repeat(3, clamp(280px, 22vw, 360px)); }
html.is-horizontal .service { padding: clamp(14px, 2.6dvh, 32px) clamp(16px, 1.8vw, 28px); gap: clamp(6px, 1.4dvh, 12px); }
html.is-horizontal .service-no { font-size: clamp(30px, min(4vw, 7dvh), 64px); }
html.is-horizontal .service h3 { font-size: clamp(17px, min(1.7vw, 3.2dvh), 26px); }
html.is-horizontal .service p:not(.service-no) { font-size: clamp(13px, min(1.05vw, 2.1dvh), 15px); }
html.is-horizontal .qa { padding: clamp(12px, 2.2dvh, 26px) clamp(16px, 1.6vw, 26px); }
html.is-horizontal .qa h3 { font-size: clamp(14px, min(1.15vw, 2.3dvh), 17px); }
html.is-horizontal .qa p { font-size: clamp(12.5px, min(1vw, 1.95dvh), 14.5px); }

/* ---------- 04 Pricing ----------
   Two grids, 4 licences and 3 made-to-order, so neither ever has a
   gap: 4 → 2 → 1 columns and 3 → 1. */
.pricing-wrap { display: grid; gap: var(--s-7); }
.price-note { margin: 0; font: 500 10.5px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.price-groups { display: grid; gap: var(--s-6); }
.price-group { display: grid; gap: var(--s-3); align-content: start; }
.price-group-h { margin: 0; font: 600 10.5px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-2); }
.prices { display: grid; gap: 1px; padding: 1px; grid-template-columns: 1fr; }
.prices > * { box-shadow: 0 0 0 1px var(--rule); }
@media (min-width: 560px) { .prices-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .prices-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 760px) { .prices-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.price { position: relative; display: flex; flex-direction: column; gap: var(--s-3); padding: clamp(18px, 1.8vw, 26px); background: var(--panel); min-width: 0; }
.price h3 { margin: 0; font: 700 18px/1 var(--f-display); font-stretch: 112%; text-transform: uppercase; }
/* Prices are sized by their card: "from €4,500" must always fit. */
.amount { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; margin: var(--s-2) 0 0; container-type: inline-size; }
.amount b { font: 800 min(15cqi, 56px)/.9 var(--f-display); font-stretch: 105%; letter-spacing: -.01em; }
.amount span, .amount small { font: 500 12px/1 var(--f-mono); letter-spacing: .06em; color: var(--fg-3); }
.per { margin: 0; font: 500 11px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); }
.price ul { display: grid; gap: 7px; margin: var(--s-2) 0 var(--s-4); padding: var(--s-3) 0 0; border-top: 1px dashed var(--rule); list-style: none; font-size: 14px; line-height: 1.35; color: var(--fg-2); }
.price li { position: relative; padding-left: 16px; }
.price li::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; background: var(--accent); }
.price .btn { margin-top: auto; justify-content: center; min-height: 42px; }
.price.is-pick { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 55%), var(--panel); box-shadow: 0 0 0 1px var(--accent); z-index: 1; }
.pick { position: absolute; top: 0; right: 0; margin: 0; padding: 5px 8px; font: 600 9.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--on-accent); background: var(--accent); }

/* Side by side: heading column, then one long row of seven prices. */
html.is-horizontal .scene-pricing { width: auto; min-width: 100vw; }
html.is-horizontal .pricing-wrap { grid-template-columns: clamp(330px, 30vw, 480px) auto; height: 100%; align-items: center; column-gap: clamp(32px, 4vw, 72px); }
html.is-horizontal .pricing-wrap .scene-head { margin: 0; }
html.is-horizontal .price-groups { grid-auto-flow: column; column-gap: clamp(24px, 2.4vw, 40px); height: 100%; align-content: center; }
html.is-horizontal .price-group { grid-template-rows: auto minmax(0, 1fr); max-height: 100%; }
html.is-horizontal .prices-4 { grid-template-columns: repeat(4, clamp(220px, 15.5vw, 270px)); }
html.is-horizontal .prices-3 { grid-template-columns: repeat(3, clamp(220px, 15.5vw, 270px)); }
html.is-horizontal .price { padding: clamp(14px, 2.4dvh, 26px) clamp(14px, 1.4vw, 22px); gap: clamp(6px, 1.2dvh, 12px); }
html.is-horizontal .amount b { font-size: min(15cqi, 6.6dvh, 56px); }
html.is-horizontal .price ul { font-size: clamp(12.5px, min(1vw, 2dvh), 14px); gap: clamp(4px, .8dvh, 7px); margin-bottom: clamp(8px, 1.6dvh, 16px); padding-top: clamp(8px, 1.4dvh, 12px); }
@media (max-height: 640px) { html.is-horizontal .price ul li:nth-child(4) { display: none; } }

/* ---------- Cookie notice ---------- */
.notice {
  position: fixed; z-index: 8700; right: calc(var(--gutter) + 16px); bottom: calc(var(--zone-bottom, 92px) + 4px);
  display: grid; gap: 10px; width: min(380px, calc(100vw - 2 * var(--gutter) - 32px)); padding: 16px 18px;
  background: color-mix(in srgb, var(--panel) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--rule-2); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
  opacity: 0; transform: translateY(12px); transition: opacity .4s var(--e-out), transform .4s var(--e-out);
}
.notice.is-in { opacity: 1; transform: none; }
.notice[hidden] { display: none; }
.notice-k { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 10.5px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.notice-t { margin: 0; font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.notice-a { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 500 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.notice-a a { color: var(--fg); text-underline-offset: 4px; }
@media (max-width: 760px) { .notice { left: 16px; right: 16px; width: auto; bottom: 64px; } }

/* ---------- Document pages (cookies, legal) ---------- */
.doc { max-width: 1120px; margin: 0 auto; padding: calc(var(--top-h) + 120px) calc(var(--gutter) + clamp(16px, 3vw, 40px)) 160px; }
.doc-head { display: grid; gap: var(--s-4); margin-bottom: var(--s-8); container-type: inline-size; }
.doc-head h1 { margin: var(--s-2) 0 0; font: 800 min(13cqi, 108px)/.9 var(--f-display); font-stretch: 112%; text-transform: uppercase; }
.doc-lede { margin: 0; max-width: 54ch; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.5; color: var(--fg-2); }
.readouts-doc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; padding: 1px; margin: var(--s-6) 0 0; list-style: none; }
.readouts-doc > * { box-shadow: 0 0 0 1px var(--rule); }
.readouts-doc li { display: grid; gap: 10px; padding: var(--s-5); background: var(--panel); }
.readouts-doc .k { font: 500 10px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); }
.readouts-doc b { font: 800 clamp(30px, 3.4vw, 48px)/.9 var(--f-display); font-stretch: 110%; }
.readouts-doc .ok b { color: var(--accent); }
@media (max-width: 760px) { .readouts-doc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.doc-sec { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: var(--s-4) clamp(24px, 4vw, 64px); padding: var(--s-7) 0; border-top: 1px solid var(--rule); }
@media (max-width: 860px) { .doc-sec { grid-template-columns: minmax(0, 1fr); } }
.doc-sec h2 { margin: 0; font: 700 clamp(22px, 2.2vw, 30px)/1 var(--f-display); font-stretch: 112%; text-transform: uppercase; }
.doc-sec .label { margin-bottom: var(--s-3); }
.doc-body { display: grid; gap: var(--s-4); align-content: start; min-width: 0; }
.doc-body p { margin: 0; max-width: 64ch; line-height: 1.65; color: var(--fg-2); }
.doc-body p strong { color: var(--fg); font-weight: 600; }
.doc-body a { color: var(--accent); text-underline-offset: 3px; }
.store-table { width: 100%; border-collapse: collapse; border: 1px solid var(--rule); background: var(--panel); font-size: 14px; }
.store-table th { padding: 12px 14px; text-align: left; font: 500 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); border-bottom: 1px solid var(--rule); }
.store-table td { padding: 12px 14px; border-top: 1px solid var(--rule); vertical-align: top; color: var(--fg-2); line-height: 1.45; }
.store-table td:first-child { font: 500 12.5px/1.45 var(--f-mono); color: var(--fg); white-space: nowrap; }
@media (max-width: 640px) {
  .store-table, .store-table tbody, .store-table tr, .store-table td { display: block; width: 100%; }
  .store-table thead { display: none; }
  .store-table tr { padding: 12px 14px; border-top: 1px solid var(--rule); }
  .store-table td { padding: 2px 0; border: 0; }
  .store-table td:first-child { margin-bottom: 4px; }
}
.store-live { margin: 0; padding: var(--s-4); border: 1px solid var(--rule); background: var(--panel); font: 400 12.5px/1.8 var(--f-mono); color: var(--fg-2); white-space: pre-wrap; word-break: break-all; }
.doc-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.doc-controls .count { font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); margin-right: var(--s-3); }
.doc-controls .count b { color: var(--accent); font-weight: 600; }
.doc-back { font: 500 10.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); text-decoration: none; margin-left: var(--s-6); }
.doc-back:hover { color: var(--accent); }
@media (max-width: 760px) { .doc-back { display: none; } }

/* ---------- Lock-on plates ----------
   Every box in the grid pattern is marked data-fx-lock-tint. When the
   cursor locks on, FX-008 gives it data-fx-tint="ink|bone|volt" (never
   the page's own theme), and the theme tokens re-scope inside it: the
   box becomes a small plate of that theme, text and controls included. */
:root { --fx-lock-tints: var(--lock-tints); }
[data-fx-lock-tint] { position: relative; transition: background-color .35s var(--e-out), color .35s var(--e-out), box-shadow .35s var(--e-out); }
[data-fx-lock-tint].fx-lock-tinted {
  z-index: 1;
  color: var(--fg);
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--fx-tint);
}

/* ---------- The page is a surface you grab ----------
   No text or image selection, and no browser drag of images or links:
   a press-and-drag moves the page (FX-010) instead. */
html { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
img, svg, a { -webkit-user-drag: none; }
input, textarea, [contenteditable=""], [contenteditable="true"] { -webkit-user-select: text; user-select: text; }

/* ---------- Burger ----------
   Two lines in a pill; the short one reaches full length on hover, and
   open they cross into an X. */
.burger {
  display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 14px 0 12px; flex: none;
  border: 1px solid var(--rule-2); border-radius: 999px; background: transparent; cursor: pointer;
  font: 600 10.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; transition: border-color var(--d-fast);
}
.burger-ico { position: relative; width: 18px; height: 10px; }
.burger-ico::before, .burger-ico::after {
  content: ""; position: absolute; left: 0; height: 1.5px; background: currentColor;
  transition: transform .45s var(--e-out), width .45s var(--e-out), top .45s var(--e-out);
}
.burger-ico::before { top: 0; width: 100%; }
.burger-ico::after { top: 8.5px; width: 58%; }
.burger:hover .burger-ico::after { width: 100%; }
.burger.is-open .burger-ico::before { top: 4.25px; transform: rotate(45deg); }
.burger.is-open .burger-ico::after { top: 4.25px; width: 100%; transform: rotate(-45deg); }
@media (max-width: 760px) { .burger { width: 36px; padding: 0; justify-content: center; } .burger-k { display: none; } }

/* ---------- Menu ----------
   A scan line wipes the menu in from the right, a command types itself,
   then the scenes rise out of their masks one after another. */
html.menu-open { overflow: hidden; }
.menu { position: fixed; inset: 0; z-index: 9000; background: var(--bg); color: var(--fg); clip-path: inset(0 0 0 100%); outline: none; }
.menu[hidden] { display: none; }
.menu.is-in { clip-path: inset(0 0 0 0); transition: clip-path .66s var(--e-io); }
.menu.is-out { clip-path: inset(0 100% 0 0); transition: clip-path .44s var(--e-io); }
.menu-scan { position: absolute; z-index: 2; top: 0; bottom: 0; left: 100%; width: 2px; background: var(--accent); box-shadow: 0 0 28px var(--glow); pointer-events: none; }
.menu.is-in .menu-scan { animation: menu-scan .66s var(--e-io) forwards; }
@keyframes menu-scan { from { left: 100%; opacity: 1; } 85% { opacity: 1; } to { left: 0; opacity: 0; } }
.menu-in {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 20vw, 320px); grid-template-rows: auto minmax(0, 1fr);
  column-gap: clamp(32px, 6vw, 120px); height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(30px, 4.6dvh, 42px) calc(var(--gutter) + clamp(12px, 2vw, 28px)) clamp(28px, 6dvh, 64px);
}
.menu-top { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s-5); height: var(--top-h); margin-bottom: clamp(12px, 3dvh, 40px); }
.menu-top .brand { opacity: 1 !important; pointer-events: auto !important; }
.menu-boot { display: flex; align-items: center; gap: 14px; margin: 0 auto 0 0; font: 500 11px/1 var(--f-mono); letter-spacing: .08em; color: var(--fg-2); white-space: nowrap; overflow: hidden; }
.menu-bar { position: relative; width: 120px; height: 2px; flex: none; background: var(--rule); overflow: hidden; }
.menu-bar b { position: absolute; inset: 0; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }
.menu.is-in .menu-bar b { transform: scaleX(1); transition: transform .55s var(--e-out) .3s; }
@media (max-width: 760px) { .menu-boot { display: none; } }

.menu-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column; align-content: center; column-gap: clamp(20px, 3vw, 56px); }
.menu-nav a[data-menu-link] {
  position: relative; display: flex; align-items: baseline; gap: 14px; padding: clamp(6px, 1.4dvh, 14px) 10px;
  border-bottom: 1px solid var(--rule); text-decoration: none; overflow: hidden;
  --nav-fs: clamp(26px, min(4.6vw, 7dvh), 74px); container-type: inline-size;
  font: 800 26px/1 var(--f-display); font-stretch: 105%; text-transform: uppercase;
}
.menu-nav a[data-menu-link] em { flex: none; width: 2.4em; font: 500 11px/1 var(--f-mono); font-style: normal; letter-spacing: .14em; color: var(--fg-3); opacity: 0; }
/* Sized to the row, not the window: 44px is the number column and its gap,
   8.7em the widest label at the full hover stretch, so nothing is ever cropped. */
.menu-nav a[data-menu-link] span { display: inline-block; font-size: min(var(--nav-fs), calc((100cqi - 44px) / 8.7)); white-space: nowrap; transform: translateY(115%); transition: font-stretch .5s var(--e-out), color .3s; }
.menu.is-in .menu-nav a[data-menu-link] span { transform: none; transition: transform .8s var(--e-out) calc(.34s + var(--i) * .045s), font-stretch .5s var(--e-out), color .3s; }
.menu.is-in .menu-nav a[data-menu-link] em { opacity: 1; transition: opacity .5s calc(.5s + var(--i) * .045s); }
.menu-nav a[data-menu-link]:hover span, .menu-nav a[data-menu-link]:focus-visible span { font-stretch: 150%; }
.menu-nav a[data-menu-link].is-here em { color: var(--accent); }
.menu-nav a[data-menu-link].is-here::after { content: ""; position: absolute; right: 10px; top: 50%; width: 8px; height: 8px; margin-top: -4px; background: var(--accent); box-shadow: 0 0 14px var(--glow); }
.menu-nav a[data-menu-link].fx-lock-tinted em { color: var(--fg-3); }

.menu-side { display: grid; align-content: center; gap: clamp(16px, 3dvh, 32px); opacity: 0; transform: translateY(16px); }
.menu.is-in .menu-side { opacity: 1; transform: none; transition: opacity .6s var(--e-out) .62s, transform .6s var(--e-out) .62s; }
.menu-block { display: grid; gap: 10px; }
.menu-row { display: flex; flex-wrap: wrap; gap: 8px; }
.menu-row .pill { text-decoration: none; }
.menu-row .pill[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.menu-plates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.menu-plate {
  height: 56px; border: 1px solid var(--rule-2); background: var(--bg); color: var(--fg); cursor: pointer;
  font: 800 13px/1 var(--f-display); font-stretch: 112%; letter-spacing: .04em; text-transform: uppercase;
}
.menu-plate[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--accent); }
.menu-mail { font: 700 clamp(20px, 2vw, 30px)/1.1 var(--f-display); font-stretch: 105%; color: var(--fg); text-decoration: none; overflow-wrap: anywhere; }
.menu-mail:hover { color: var(--accent); }
.menu-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 0; padding-top: var(--s-4); border-top: 1px solid var(--rule); font: 500 10.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.menu-foot a { color: var(--fg-2); }
.menu-layout { display: none; }
@media (max-width: 1023px) { .menu-layout { display: grid; } }
@media (max-width: 860px) {
  .menu-in { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .menu-nav { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  /* The whole menu fits one screen: labels follow the height, the side folds to
     compact rows, and full screen stays in the header, where phones already have it. */
  .menu-nav a[data-menu-link] { --nav-fs: clamp(22px, min(8.4vw, 3.4dvh), 46px); padding-block: clamp(3px, .7dvh, 10px); }
  .menu-top { margin-bottom: clamp(4px, 1dvh, 14px); }
  .menu-in { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); grid-template-rows: auto auto auto; }
  .menu-side { margin-top: clamp(10px, 1.6dvh, 22px); align-content: start; gap: clamp(10px, 1.4dvh, 18px); grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
  .menu-side > .menu-block:first-child, .menu-side > .menu-foot, .menu-side > .menu-block:has(.menu-mail) { grid-column: 1 / -1; }
  .menu-side .label { margin-bottom: 0; }
  .menu-block { gap: 6px; }
  .menu-plate { height: 42px; }
  .menu-side [data-fullscreen] { display: none; }
  .menu-side .menu-row { gap: 6px; }
  .menu-side .pill { height: 38px; padding-inline: 12px; }
  .menu-block:has(.menu-mail) .label { display: none; }
  .menu-foot { padding-top: 8px; }
}
/* Still: everything simply there. */
html:not(.fx-motion) .menu, html:not(.fx-motion) .menu * { transition: none !important; animation: none !important; }
html:not(.fx-motion) .menu .menu-nav a[data-menu-link] span, html:not(.fx-motion) .menu .menu-side { transform: none; opacity: 1; }
html:not(.fx-motion) .menu .menu-nav a[data-menu-link] em, html:not(.fx-motion) .menu .menu-bar b { opacity: 1; transform: none; }

/* ---------- Swipe preview (phones: /?layout=swipe) ----------
   The scenes become full-screen panels in a row you swipe through,
   snapping one scene at a time; tall scenes scroll inside. */
html.is-swipe, html.is-swipe body { height: 100%; overflow: hidden; }
html.is-swipe main {
  height: 100vh; height: 100dvh; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
html.is-swipe .fx-track-inner { display: flex; flex-wrap: nowrap; width: max-content; height: 100%; }
html.is-swipe .scene {
  flex: none; width: 100vw; height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain;
  scroll-snap-align: start; scroll-snap-stop: always; border-top: 0; border-left: 1px solid var(--rule);
  padding-top: calc(var(--top-h) + 72px); padding-bottom: 96px;
}
html.is-swipe .top { position: fixed; }
html.is-swipe .fx-rail { display: none; }
.pager[hidden] { display: none; }
.pager {
  position: fixed; z-index: 8600; left: 16px; right: 16px; bottom: 18px; display: grid; gap: 8px;
  font: 600 10.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg); pointer-events: none;
}
.pager i { position: relative; height: 2px; background: var(--rule); }
.pager b { position: absolute; inset: 0; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- Burger, alive ----------
   The two lines trade lengths on a loop; open, they cross into an X. */
.burger-ico::before { animation: burger-a 2.6s var(--e-io) infinite; }
.burger-ico::after { animation: burger-b 2.6s var(--e-io) infinite; }
@keyframes burger-a { 0%, 100% { left: 0; width: 100%; } 50% { left: 52%; width: 48%; } }
@keyframes burger-b { 0%, 100% { width: 58%; } 50% { width: 100%; } }
.burger.is-open .burger-ico::before, .burger.is-open .burger-ico::after { animation: none; left: 0; }
html:not(.fx-motion) .burger-ico::before, html:not(.fx-motion) .burger-ico::after { animation: none; }

/* ---------- Phone header: open widgets get the row ----------
   While the radio or the theme switch is open, the logo, the other folded
   widget and the full-screen button step out, so nothing can overflow. */
@media (max-width: 760px) {
  .top.has-open .brand { display: none; }
  .top.has-open .top-tools { margin-left: 0; flex: 1; min-width: 0; justify-content: flex-end; }
  .top.has-open .top-tools > .is-collapsed, .top.has-open .top-tools > [data-fullscreen] { display: none; }
  .top-tools { min-width: 0; }
  .fx-radio { min-width: 0; }
  .fx-radio-name { min-width: 0; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }

  /* The burger stays put while the page scrolls, on a small glass disc. */
  .top .burger {
    position: fixed; z-index: 8700; right: calc(var(--gutter) + 8px);
    top: calc(clamp(10px, 1.4vw, 20px) + 22px + (var(--top-h) - 36px) / 2);
    background: color-mix(in srgb, var(--bg) 78%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .top-tools { margin-right: 42px; }
  /* The menu's close button sits exactly where the burger is, so it reads as one button. */
  .menu-in { padding-top: calc(clamp(10px, 1.4vw, 20px) + 22px); padding-inline: calc(var(--gutter) + 8px); }
}

/* ---------- Menu: code being written, then compiled ---------- */
.menu-in { z-index: 1; }
.menu-code {
  position: absolute; inset: 0; z-index: 0; margin: 0; overflow: hidden; pointer-events: none;
  padding: clamp(84px, 13dvh, 124px) calc(var(--gutter) + 16px) 0;
  font: 500 12px/17px var(--f-mono); white-space: pre; color: var(--fg-3); opacity: .9; transition: opacity .6s var(--e-out);
}
.menu-code b { color: var(--accent); font-weight: 500; }
.menu-code i { display: inline-block; width: .6em; height: 1.05em; vertical-align: -.18em; background: var(--accent); }
.menu.is-compiled .menu-code { opacity: .09; }
/* The scenes and the side panel wait for the compile. */
.menu.is-in .menu-nav a[data-menu-link] span { transform: translateY(115%); }
.menu.is-in.is-compiled .menu-nav a[data-menu-link] span { transform: none; transition: transform .8s var(--e-out) calc(var(--i) * .045s), font-stretch .5s var(--e-out), color .3s; }
.menu.is-in .menu-nav a[data-menu-link] em { opacity: 0; }
.menu.is-in.is-compiled .menu-nav a[data-menu-link] em { opacity: 1; transition: opacity .5s calc(.15s + var(--i) * .045s); }
.menu.is-in .menu-side { opacity: 0; transform: translateY(16px); }
.menu.is-in.is-compiled .menu-side { opacity: 1; transform: none; transition: opacity .6s var(--e-out) .3s, transform .6s var(--e-out) .3s; }
html:not(.fx-motion) .menu-code { display: none; }
.menu-top [data-menu-close] { margin-left: auto; }

/* Nothing may ever widen the page sideways (a phone would zoom out). */
html { overflow-x: clip; }

/* ---------- Menu closing: the entrance, backwards ---------- */
.menu.is-closing .menu-nav a[data-menu-link] span { transform: translateY(115%); transition: transform .3s cubic-bezier(.7, 0, .84, 0) calc((9 - var(--i)) * .014s); }
.menu.is-closing .menu-nav a[data-menu-link] em, .menu.is-closing .menu-side { opacity: 0; transition: opacity .2s; }
.menu.is-closing .menu-code { opacity: .9; transition: opacity .15s; }

/* ---------- Radio on phones: the panel drops down from the header ---------- */
@media (max-width: 760px) {
  .top .fx-radio { position: relative; }
  .top .fx-radio:not(.is-collapsed) .fx-radio-name {
    display: block; position: absolute; z-index: 2; top: calc(100% + 8px); right: -1px;
    min-width: 214px; max-width: none; padding: 12px 14px; text-align: left; white-space: nowrap;
    color: var(--fg); background: var(--panel); border: 1px solid var(--rule-2); box-shadow: 0 12px 32px -12px rgb(7 8 10 / .5);
    animation: radio-drop .34s var(--e-out);
  }
  .top .fx-radio:not(.is-collapsed) .fx-radio-name::before { content: "Station · tap to change"; display: block; margin-bottom: 8px; font-size: 9.5px; color: var(--fg-3); }
}
@keyframes radio-drop { from { opacity: 0; transform: translateY(-8px); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
/* The radio panel hangs from the header's right edge, never off-screen. */
@media (max-width: 760px) {
  .top .fx-radio, .top .top-tools { position: static; }
  .top .fx-radio:not(.is-collapsed) .fx-radio-name { top: calc(100% + 4px); right: calc(var(--gutter) + 8px); left: auto; max-width: calc(100vw - 2 * var(--gutter) - 16px); }
}
/* Closing mirrors opening: the scan line sweeps back left to right and
   uncovers the page behind it. */
.menu.is-out { clip-path: inset(0 0 0 100%); }
.menu.is-out .menu-scan { animation: menu-scan-out .44s var(--e-io) forwards; }
@keyframes menu-scan-out { from { left: 0; opacity: 1; } 85% { opacity: 1; } to { left: 100%; opacity: 0; } }
/* The radio panel: centred under the header, always inside the screen. */
@media (max-width: 760px) {
  .top .fx-radio:not(.is-collapsed) .fx-radio-name { left: 0; right: 0; margin-inline: auto; width: min(320px, calc(100vw - 32px)); min-width: 0; max-width: none; text-align: center; }
}
@media (max-width: 760px) { .top .fx-radio-name { box-sizing: border-box; } }

/* ============================================================
   Swipe deck (phones and tablets)
   site.js writes --p on each scene: 0 centred, +1 waiting on the
   right, -1 gone to the left (--pa is its size). Content swings in
   3D on it, so the deck follows the finger frame by frame.
   ============================================================ */
html.is-swipe .scene { --p: 0; --pa: 0; }
html.is-swipe .scene > * {
  transform: perspective(1100px) translateX(calc(var(--p) * 24vw)) rotateY(calc(var(--p) * -20deg)) scale(calc(1 - var(--pa) * .1));
  opacity: calc(1 - var(--pa) * .6);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
html.is-swipe .scene > .ghost { transform: none; }
/* Full-bleed marquee bands ride flat with their panel, edge to edge up to
   the seam: swung, their hard ends would show mid-screen. */
html.is-swipe .scene > .band { transform: none; opacity: calc(1 - var(--pa) * .4); }
/* While ScrollTrigger measures (site.js), every panel stands upright. */
html.is-swipe.is-measuring .scene > * { transform: none !important; }
html.is-swipe .fx-hud-r.br { display: none; }

/* The seam between two scenes, naming the one coming in. */
.seam { position: fixed; z-index: 8550; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px; background: var(--accent); box-shadow: 0 0 26px var(--glow); pointer-events: none; }
.seam[hidden] { display: none; }
.seam span {
  position: absolute; top: 50%; left: 10px; transform: translateY(-50%); padding: 5px 8px; white-space: nowrap;
  font: 600 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--on-accent); background: var(--accent);
}
.seam.is-flip span { left: auto; right: 10px; }

/* The pager: a segment per scene, the number and name, a cue to swipe. */
.pager { left: 16px; right: 16px; bottom: calc(26px + env(safe-area-inset-bottom, 0px)); gap: 9px; }
/* Content scrolls under the header and the pager through ink fades, never
   into the logo or the pager's letters. One layer under the HUD (8000), so
   its REC strip and corner brackets stay on top. */
html.is-swipe body::after {
  content: ''; position: fixed; inset: 0; z-index: 7990; pointer-events: none;
  --fade-top: calc(clamp(10px, 1.4vw, 20px) + 22px + var(--top-h));
  background:
    linear-gradient(to bottom, var(--bg) var(--fade-top), transparent calc(var(--fade-top) + 40px)) top / 100% calc(var(--fade-top) + 40px) no-repeat,
    linear-gradient(to top, var(--bg) calc(56px + env(safe-area-inset-bottom, 0px)), transparent calc(100px + env(safe-area-inset-bottom, 0px))) bottom / 100% calc(100px + env(safe-area-inset-bottom, 0px)) no-repeat;
}
html.is-swipe .scene { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }
.pager-top { display: flex; justify-content: space-between; align-items: center; }
.pager-top em { font-style: normal; color: var(--accent); }
html.fx-motion .pager-top em { animation: cue-nudge 1.6s var(--e-io) infinite; }
@keyframes cue-nudge { 50% { transform: translateX(6px); } }
.pager-segs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.pager-segs i { position: relative; height: 3px; background: var(--rule-2); overflow: hidden; }
.pager-segs b { position: absolute; inset: 0; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- Inquiry console ----------
   One console for every call to action. Desktop: a panel wipes in from the
   right over the dimmed page, the menu's scan line riding its edge, and
   wipes out to the right. Phones: a full-screen sheet, Send pinned to the
   bottom. Three colours only: errors are inverted tags, not red. */
html.inq-open { overflow: hidden; }
.inq { position: fixed; inset: 0; z-index: 9600; }
.inq[hidden] { display: none; }
.inq-shade { position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 80%, transparent); opacity: 0; transition: opacity .45s var(--e-out); }
.inq.is-in .inq-shade { opacity: 1; }
.inq-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(640px, 100%);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--bg); color: var(--fg); border-left: 1px solid var(--rule-2);
  clip-path: inset(0 0 0 100%); transition: clip-path .55s var(--e-io);
}
.inq.is-in .inq-panel { clip-path: inset(0 0 0 0); }
.inq.is-out .inq-panel { clip-path: inset(0 0 0 100%); transition-duration: .42s; }
.inq-scan { position: absolute; z-index: 3; top: 0; bottom: 0; left: calc(100% - 2px); width: 2px; background: var(--accent); box-shadow: 0 0 26px var(--glow); pointer-events: none; opacity: 0; }
html.fx-motion .inq.is-in .inq-scan { animation: inq-scan-in .55s var(--e-io); }
html.fx-motion .inq.is-out .inq-scan { animation: inq-scan-out .42s var(--e-io); }
@keyframes inq-scan-in { 0% { left: calc(100% - 2px); opacity: 1; } 92% { opacity: 1; } 100% { left: 0; opacity: 0; } }
@keyframes inq-scan-out { 0% { left: 0; opacity: 1; } 92% { opacity: 1; } 100% { left: calc(100% - 2px); opacity: 0; } }
html:not(.fx-motion) .inq-panel, html:not(.fx-motion) .inq-shade { transition: none; }
/* Code pours over the console as it wipes in, then compiles away to a faint
   backdrop and the console rises; closing pours it back first. */
.inq-code {
  position: absolute; inset: 0; z-index: 0; margin: 0; overflow: hidden; pointer-events: none;
  padding: 88px clamp(20px, 3vw, 36px) 0; font: 500 12px/17px var(--f-mono); white-space: pre; color: var(--fg-3);
  opacity: .9; transition: opacity .6s var(--e-out);
}
.inq-code b { font-weight: 500; color: var(--accent); }
.inq-code i { display: inline-block; width: .6em; height: 1.05em; vertical-align: -.18em; background: var(--accent); }
.inq.is-compiled .inq-code { opacity: .06; }
.inq-panel > .inq-top, .inq-panel > .inq-body, .inq-panel > .inq-foot { position: relative; z-index: 1; }
html.fx-motion .inq.is-in .inq-top, html.fx-motion .inq.is-in .inq-body, html.fx-motion .inq.is-in .inq-foot { opacity: 0; transform: translateY(14px); }
html.fx-motion .inq.is-in.is-compiled .inq-top, html.fx-motion .inq.is-in.is-compiled .inq-body, html.fx-motion .inq.is-in.is-compiled .inq-foot {
  opacity: 1; transform: none; transition: opacity .5s var(--e-out), transform .7s var(--e-out);
}
html.fx-motion .inq.is-in.is-compiled .inq-body { transition-delay: .07s; }
html.fx-motion .inq.is-in.is-compiled .inq-foot { transition-delay: .14s; }
html.fx-motion .inq.is-closing .inq-top, html.fx-motion .inq.is-closing .inq-body, html.fx-motion .inq.is-closing .inq-foot { opacity: 0; transform: translateY(10px); transition: opacity .2s, transform .25s; }
.inq.is-closing .inq-code { opacity: .9; transition: opacity .15s; }
html:not(.fx-motion) .inq-code { display: none; }

.inq-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px clamp(20px, 3vw, 36px); border-bottom: 1px solid var(--rule); }
.inq-route { margin: 0; font: 500 10.5px/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.inq-route b { font-weight: 500; color: var(--fg); }
.inq-dot { display: inline-block; width: 7px; height: 7px; margin-right: 10px; background: var(--accent); vertical-align: 1px; }
html.fx-motion .inq-dot { animation: inq-blink 1.6s steps(1) infinite; }
@keyframes inq-blink { 50% { opacity: .15; } }
.inq-x { position: relative; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--rule-2); border-radius: 50%; background: transparent; cursor: pointer; transition: border-color .2s; }
.inq-x i { position: absolute; left: 13px; right: 13px; top: 50%; height: 1.5px; margin-top: -.75px; background: var(--fg); transform: rotate(45deg); }
.inq-x i + i { transform: rotate(-45deg); }

.inq-body { overflow-y: auto; overscroll-behavior: contain; padding: clamp(22px, 3vw, 36px); scrollbar-width: none; }
.inq-body::-webkit-scrollbar { display: none; }
.inq-form { position: relative; display: grid; gap: 28px; }
.inq-form[hidden] { display: none; }
.inq-h { margin: 0; font: 800 clamp(30px, 4.2vw, 48px)/.95 var(--f-display); font-stretch: 112%; text-transform: uppercase; outline: none; }

.inq-ticket { position: relative; display: grid; gap: 8px; padding: 18px 20px; border: 1px solid var(--rule-2); background: var(--panel); }
.inq-ticket::before, .inq-ticket::after { content: ''; position: absolute; width: 12px; height: 12px; border: 2px solid var(--accent); pointer-events: none; }
.inq-ticket::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
.inq-ticket::after { right: -2px; bottom: -2px; border-left: 0; border-top: 0; }
.inq-tag { margin: 0; font: 500 10px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); }
.inq-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; }
.inq-price b { font: 800 clamp(30px, 4vw, 42px)/1 var(--f-display); font-stretch: 112%; }
.inq-price small { font: 500 12px/1 var(--f-mono); color: var(--fg-3); }
.inq-price span { font: 500 11px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); }
.inq-note { margin: 0; font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.inq-est { margin: 4px 0 0; font: 600 13px/1.35 var(--f-mono); color: var(--accent); }
.inq-est span { font-weight: 500; color: var(--fg-3); }

.inq-set { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.inq-set[hidden] { display: none; }
.inq-set legend { margin-bottom: 12px; padding: 0; }
.inq-set legend, .inq-field label { font: 500 10.5px/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.inq-set legend span { color: var(--fg); }
.inq-field label em { font-style: normal; opacity: .6; }
.inq-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.inq-chip { position: relative; display: grid; cursor: pointer; }
.inq-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.inq-chip span { display: grid; align-content: center; gap: 4px; min-height: 44px; padding: 9px 15px; border: 1px solid var(--rule-2); font: 500 11px/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); transition: background .2s, color .2s, border-color .2s; }
.inq-chip small { font-size: 10px; letter-spacing: .06em; color: var(--fg-3); }
.inq-chip:hover span { border-color: var(--fg-3); color: var(--fg); }
.inq-chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.inq-chip input:checked + span small { color: inherit; opacity: .75; }
.inq-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.inq-fx { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.inq-fx .inq-chip span { height: 100%; font-size: 11.5px; letter-spacing: .03em; text-transform: none; }
.inq-days { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.inq-step, .inq-week { min-width: 44px; height: 44px; padding: 0 14px; border: 1px solid var(--rule-2); background: transparent; color: var(--fg); font: 500 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: border-color .2s, color .2s; }
.inq-step { padding: 0; font-size: 18px; }
.inq-week { margin-left: 6px; }
.inq-days input { width: 76px; height: 44px; border: 1px solid var(--rule-2); border-radius: 0; background: transparent; color: var(--fg); font: 600 16px/1 var(--f-mono); text-align: center; -moz-appearance: textfield; appearance: textfield; }
.inq-days input::-webkit-inner-spin-button, .inq-days input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }

.inq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 22px; }
.inq-field { display: grid; gap: 8px; min-width: 0; }
.inq-field input, .inq-field textarea {
  width: 100%; min-width: 0; margin: 0; padding: 10px 0 12px; border: 0; border-bottom: 1px solid var(--rule-2); border-radius: 0;
  background: transparent; color: var(--fg); font: 400 16px/1.45 var(--f-sans); outline: none; transition: border-color .2s; -webkit-appearance: none; appearance: none;
}
.inq-field textarea { min-height: 180px; padding: 14px; border: 1px solid var(--rule-2); background: var(--panel); resize: vertical; }
.inq-field input:focus, .inq-field textarea:focus, .inq-days input:focus { border-color: var(--accent); outline: none; }
.inq-field input::placeholder { color: var(--fg-3); opacity: .7; }
.inq-field [aria-invalid="true"] { border-color: var(--fg); box-shadow: inset 0 -1px 0 var(--fg); }
.inq-err { justify-self: start; margin: 0; padding: 5px 8px; background: var(--fg); color: var(--bg); font: 600 11px/1.35 var(--f-mono); letter-spacing: .03em; }
.inq-err::before { content: '! '; }
.inq-err[hidden] { display: none; }
.inq-hint { margin: 0; font-size: 13px; line-height: 1.45; color: var(--fg-3); }
.inq-hp { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }
.inq-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--fg-3); }
.inq-alt b { font: 500 12px/1 var(--f-mono); color: var(--fg-2); -webkit-user-select: text; user-select: text; }
.inq-copy { padding: 7px 10px; border: 1px solid var(--rule-2); background: transparent; color: var(--fg-2); font: 500 10px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: border-color .2s, color .2s; }
.inq-copy.is-done::after { content: ' · copied'; }
.inq-copy[hidden] { display: none; }

.inq-foot { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 16px clamp(20px, 3vw, 36px) calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--rule); background: var(--bg); }
.inq-foot[hidden] { display: none; }
.inq-status { flex: 1 1 100%; margin: 0; font: 500 12px/1.45 var(--f-mono); color: var(--fg); }
.inq-status:empty { display: none; }
.inq-legal { flex: 1 1 220px; margin: 0; font-size: 12px; line-height: 1.45; color: var(--fg-3); }
.inq-legal a { color: var(--fg-2); }
.inq-send { min-width: 210px; }
.inq-send[disabled] { opacity: .6; cursor: progress; }
.inq-foot.is-sending::before { content: ''; position: absolute; top: -1px; left: 0; width: 30%; height: 2px; background: var(--accent); box-shadow: 0 0 16px var(--glow); animation: inq-tx 1s var(--e-io) infinite; }
@keyframes inq-tx { from { left: -30%; } to { left: 100%; } }

.inq-done { display: grid; align-content: start; gap: 22px; }
.inq-done[hidden] { display: none; }
.inq-log { min-height: 4.8em; margin: 0; font: 500 12px/1.6 var(--f-mono); color: var(--fg-3); white-space: pre-wrap; }
.inq-log b { font-weight: 500; color: var(--accent); }
.inq-sent { margin: 0; font: 800 clamp(64px, 12vw, 120px)/.85 var(--f-display); font-stretch: 125%; text-transform: uppercase; outline: none; }
.inq-sent span { color: var(--accent); }
.inq-receipt { display: grid; gap: 1px; margin: 0; border: 1px solid var(--rule-2); background: var(--rule); }
.inq-receipt div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 12px 16px; background: var(--panel); }
.inq-receipt dt { font: 500 10.5px/1.5 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.inq-receipt dd { margin: 0; font: 500 13px/1.45 var(--f-mono); overflow-wrap: anywhere; -webkit-user-select: text; user-select: text; }
.inq-done-p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--fg-2); }
.inq-done-p b { font-weight: 500; color: var(--fg); overflow-wrap: anywhere; }
.inq-done-actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 760px) {
  .inq-panel { width: 100%; border-left: 0; }
  .inq-top { padding: 12px 16px; }
  .inq-body { padding: 22px 16px 30px; }
  .inq-foot { padding-inline: 16px; }
}
@media (max-width: 560px) {
  .inq-grid { grid-template-columns: 1fr; }
  .inq-fx { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inq-send { flex: 1 1 100%; }
  .inq-legal { order: 3; }
}

/* Services: each card asks about itself. */
.service-ask { justify-self: start; margin-top: var(--s-2); padding: 6px 0; border-bottom: 1px solid var(--rule-2); font: 500 11px/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); text-decoration: none; transition: color .2s, border-color .2s; }
.service-ask:hover, .service-ask:focus-visible { color: var(--accent); border-color: var(--accent); }

/* ---------- Square controls, colour wipe ----------
   Every control is a square-cornered plate, like the rack and the lock-on
   brackets around it. Hovered, a plate of colour wipes in from the left and
   leaves to the right, the way the menu and the console wipe; the text flips
   to stay readable. Solid buttons wipe to the opposite plate. It is a
   background image, so it works on any element and needs no pseudo-elements.
   Touch has no hover: the same wipe answers a press, and the browser's blue
   tap square is gone. */
html { -webkit-tap-highlight-color: transparent; }
a, button, label, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.btn, .pill, .icon-btn, .burger, .inq-x, .inq-step, .inq-week, .inq-copy, .seg, .seg button, .sw, .sw::after, .seg button i, .fx-radio, .fx-radio-play { border-radius: 0 !important; }
.btn, .pill, .icon-btn, .burger, .inq-x, .inq-step, .inq-week, .inq-copy, .inq-day, .seg button, .fx-radio, .menu-exp {
  --wipe: var(--accent); --wipe-ink: var(--on-accent);
  background-image: linear-gradient(var(--wipe), var(--wipe));
  background-repeat: no-repeat; background-size: 0% 100%; background-position: 100% 50%;
  transition: background-size .42s var(--e-out), color .22s var(--e-out) .04s, border-color .22s var(--e-out), box-shadow .22s var(--e-out);
}
.btn-solid { --wipe: var(--fg); --wipe-ink: var(--bg); }
.seg button[aria-pressed="true"] { --wipe: var(--fg); --wipe-ink: var(--bg); }
@media (hover: hover) {
  :is(.btn, .pill, .icon-btn, .burger, .inq-x, .inq-step, .inq-week, .inq-copy, .inq-day:not(:disabled), .seg button, .menu-exp):hover,
  .fx-radio:hover {
    background-size: 100% 100%; background-position: 0% 50%; color: var(--wipe-ink); border-color: var(--wipe);
  }
  .fx-radio:hover { --fx-radio-line: var(--wipe); }
  .inq-x:hover i { background: var(--on-accent); transform: rotate(135deg); }
  .inq-x:hover i + i { transform: rotate(45deg); }
}
:is(.btn, .pill, .icon-btn, .burger, .inq-x, .inq-step, .inq-week, .inq-copy, .inq-day:not(:disabled), .seg button):focus-visible,
:is(.btn, .pill, .icon-btn, .burger, .inq-x, .inq-step, .inq-week, .inq-copy, .inq-day:not(:disabled), .seg button):active {
  background-size: 100% 100%; background-position: 0% 50%; color: var(--wipe-ink); border-color: var(--wipe);
}
:is(.btn, .pill, .icon-btn, .burger, .inq-x, .inq-step, .inq-week, .inq-copy, .inq-day, .seg button):active { transition-duration: .1s, .08s, .08s, .08s; transition-delay: 0s; }
.pill:is(:hover, :active, :focus-visible) b, .pill:is(:hover, :active, :focus-visible)[aria-pressed="false"] b { color: inherit; }
.inq-x i { transition: transform .4s var(--e-out), background .2s; }
.inq-x:is(:active, :focus-visible) i { background: var(--on-accent); }
@media (hover: none) {
  /* Menu rows: a press wipes the row, since a touch screen has no lock-on cursor. */
  .menu-nav a[data-menu-link] { background-image: linear-gradient(var(--accent), var(--accent)); background-repeat: no-repeat; background-size: 0% 100%; background-position: 100% 50%; transition: background-size .3s var(--e-out); }
  .menu-nav a[data-menu-link]:active { background-size: 100% 100%; background-position: 0% 50%; color: var(--on-accent); transition-duration: .1s; }
  .menu-nav a[data-menu-link]:active em { color: inherit; }
  .menu-plate:active { box-shadow: inset 0 0 0 3px var(--accent); }
}
html:not(.fx-motion) :is(.btn, .pill, .icon-btn, .burger, .inq-x, .inq-step, .inq-week, .inq-copy, .inq-day, .seg button) { transition: none; }

/* The booking calendar: preferred working days, picked in the console. */
.inq-cal { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--rule-2); background: var(--panel); }
.inq-cal-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.inq-cal-m { margin: 0; font: 600 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg); }
.inq-cal-top .inq-step:disabled { opacity: .3; cursor: not-allowed; }
.inq-cal-dow, .inq-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.inq-cal-dow i { font: 500 10px/1.6 var(--f-mono); font-style: normal; letter-spacing: .1em; text-align: center; text-transform: uppercase; color: var(--fg-3); }
.inq-day { height: 44px; padding: 0; border: 1px solid var(--rule); background-color: transparent; color: var(--fg); font: 500 13px/1 var(--f-mono); cursor: pointer; }
.inq-day:disabled { border-color: transparent; color: var(--fg-3); opacity: .38; cursor: not-allowed; }
.inq-day.is-out { opacity: .16; }
.inq-day.is-today { box-shadow: inset 0 -2px 0 var(--fg-3); }
.inq-day[aria-pressed="true"] { background-color: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
.inq-day[aria-pressed="true"] { --wipe: var(--fg); --wipe-ink: var(--bg); }
.inq-picked { margin: 0; font: 500 12px/1.45 var(--f-mono); color: var(--fg-2); }
.inq-picked:empty { display: none; }
.inq-days input[readonly] { color: var(--fg-2); }
.inq-note-dates { margin-top: 2px; font: 500 12px/1.4 var(--f-mono); color: var(--fg-2); }

/* The analytics choice: two equal answers, big enough to tap. */
.notice-a { flex-wrap: wrap; }
.notice-b { display: flex; gap: 8px; }
.store-table td:first-child { overflow-wrap: anywhere; }
@media (max-width: 760px) { .notice .pill { height: 40px; padding-inline: 14px; } }

/* The heading proper; the chapter number beside it is decoration. */
.hero-kicker h1 { display: inline; margin: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }

/* A rack card's way to its own page. */
.unit-link { margin-left: auto; margin-right: var(--s-3); font: 500 10.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); text-underline-offset: 3px; }
.unit-link:hover { color: var(--accent); }

/* The scroll timeline needs a mouse-sized screen: on phones it sat on top of the content. */
@media (max-width: 760px) { .fx-rail { display: none !important; } }

/* Pages that scroll down keep the header: it rides a solid band, under the HUD. */
html:not(.is-horizontal):not(.is-swipe) .top { position: fixed; }
html:not(.is-horizontal):not(.is-swipe) body::after {
  content: ""; position: fixed; top: 0; left: 0; right: 0; z-index: 7900; pointer-events: none;
  height: calc(clamp(10px, 1.4vw, 20px) + 22px + var(--top-h)); background: var(--bg); border-bottom: 1px solid var(--rule);
}
html:not(.is-horizontal):not(.is-swipe) .scene[id], html:not(.is-horizontal):not(.is-swipe) .doc-sec { scroll-margin-top: calc(var(--top-h) + 48px); }

/* ---------- Menu: the Rack row opens ----------
   Its effects drop over the rows below, so nothing moves and nothing is
   cropped. Each row of the list is one square control. */
.menu-rack { position: relative; min-width: 0; }
.menu-rack.is-open { z-index: 6; }
.menu-rack a[data-menu-link].is-here::after { right: 62px; }
.menu-exp {
  position: absolute; z-index: 2; right: 8px; top: 50%; width: 40px; height: 40px; margin-top: -20px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--rule-2); background-color: var(--bg); color: var(--fg); cursor: pointer; opacity: 0;
}
.menu.is-in.is-compiled .menu-exp { opacity: 1; transition: opacity .5s .3s, background-size .42s var(--e-out), color .22s var(--e-out), border-color .22s var(--e-out); }
.menu.is-closing .menu-exp { opacity: 0; transition: opacity .2s; }
html:not(.fx-motion) .menu .menu-exp { opacity: 1; }
.menu-exp i { position: relative; width: 14px; height: 14px; transition: transform .42s var(--e-out); }
.menu-exp i::before, .menu-exp i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: currentColor; }
.menu-exp i::after { transform: rotate(90deg); }
.menu-rack.is-open .menu-exp { border-color: var(--accent); background-size: 100% 100%; background-position: 0% 50%; color: var(--on-accent); }
.menu-rack.is-open .menu-exp i { transform: rotate(135deg); }
.menu-fx {
  position: absolute; left: 0; right: 0; top: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; padding: 1px;
  background: var(--rule-2); box-shadow: 0 28px 48px color-mix(in srgb, var(--bg) 80%, transparent);
  clip-path: inset(0 0 100% 0); transition: clip-path .32s var(--e-io);
}
.menu-fx[hidden] { display: none; }
.menu-rack.is-open .menu-fx { clip-path: inset(0 0 -90px 0); }
.menu-fx a {
  --wipe: var(--accent); display: grid; gap: 4px; align-content: center; min-width: 0; min-height: 44px; padding: clamp(6px, 1.1dvh, 11px) 12px;
  background-color: var(--panel); background-image: linear-gradient(var(--wipe), var(--wipe)); background-repeat: no-repeat; background-size: 0% 100%; background-position: 100% 50%;
  color: var(--fg); text-decoration: none; opacity: 0; transform: translateY(10px);
  transition: background-size .42s var(--e-out), color .22s var(--e-out);
}
.menu-rack.is-open .menu-fx a { opacity: 1; transform: none; transition: opacity .3s calc(.1s + var(--j) * .028s), transform .42s var(--e-out) calc(.1s + var(--j) * .028s), background-size .42s var(--e-out), color .22s var(--e-out); }
.menu-fx em { font: 500 9.5px/1 var(--f-mono); font-style: normal; letter-spacing: .14em; color: var(--fg-3); transition: color .22s var(--e-out); }
.menu-fx b { font: 700 clamp(12.5px, min(1.02vw, 2.1dvh), 15px)/1.1 var(--f-display); font-stretch: 106%; text-transform: uppercase; }
.menu-fx a[aria-current="page"] em { color: var(--accent); }
/* An odd list: the last one takes the whole row, so the grid never shows a gap. */
.menu-fx a:nth-child(odd):last-child { grid-column: 1 / -1; }
@media (hover: hover) {
  .menu-fx a:hover { background-size: 100% 100%; background-position: 0% 50%; color: var(--on-accent); }
  .menu-fx a:hover em { color: inherit; }
}
.menu-fx a:focus-visible, .menu-fx a:active { background-size: 100% 100%; background-position: 0% 50%; color: var(--on-accent); }
.menu-fx a:focus-visible em, .menu-fx a:active em { color: inherit; }
@media (min-width: 861px) {
  .menu-fx { right: auto; width: calc(200% + clamp(20px, 3vw, 56px)); grid-template-columns: repeat(4, minmax(0, 1fr)); }
}