/* Reverie Studio site. Colours, spacing, radii and type families come from
   tokens.css (generated from Reverie's design system). Everything below uses
   those tokens; the only site-only sizes are named here, once. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin-var.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-latin-italic-var.woff2") format("woff2");
}

:root {
  /* Site-only: page frame (the three breakpoints are literal: @media cannot take var()) */
  --site-max: 1200px;
  --gutter: 32px;
  --gutter-small: 16px;
  --section-gap: 136px;
  --section-gap-small: 96px;
  --band-pad: 112px;
  --band-pad-small: 80px;
  --cta-pad: 96px;
  --nav-height: 64px;

  /* Site-only: type scale */
  --type-hero: clamp(38px, 5.6vw, 68px);
  --type-section: clamp(28px, 3.4vw, 42px);
  --type-lead: clamp(17px, 1.6vw, 20px);
  --type-body: 15px;
  --type-meta: 13px;
  --type-eyebrow: 12px;
  --type-brand: 18px;
  --type-nav: 14px;
  --type-button: 15px;
  --type-button-sm: 14px;
  --type-fact: 14px;
  --type-promise: 20px;
  --type-panel-title: 17px;
  --type-feature: 16px;
  --type-conn: 22px;
  --type-conn-small: 19px;
  --type-mem: 32px;
  --type-mem-unit: 15px;
  --type-cap: 17px;
  --type-list: 14px;
  --type-prompt: 14px;
  --type-tag: 12px;
  --type-for: 13px;
  --type-who: 16px;
  --type-switch: 13px;
  --type-badge: 11px;
  --type-badge-small: 10px;
  --type-time: 13px;
  --type-more-head: 24px;
  --type-on-the-way: 14px;

  /* Site-only: control and media sizes */
  --button-height: 44px;
  --button-height-sm: 36px;
  --button-pad: 20px;
  --button-pad-sm: 14px;
  --button-radius: var(--radius-md);
  --fact-height: 36px;
  --chip-height: 36px;
  --seg-height: 34px;
  --switch-height: 28px;
  --switch-pad: 12px;
  --ring-size: 40px;
  --icon-in-ring: 16px;
  --icon-16: 16px;
  --icon-20: 20px;
  --icon-22: 22px;
  --icon-24: 24px;
  --brand-tile: 44px;
  --logo-pill-height: 34px;
  --logo-size: 18px;
  --logo-size-img: 20px;
  --logo-tile-img: 20px;
  --wave-min-height: 2px;
  --wave-bar-radius: 1px;
  --dot-size: 8px;
  --dot-bar-width: 28px;
  --dot-bar-height: 4px;
  --logo-ratio: 5px;
  --listen-player: 168px;
  --hero-pad-top: 88px;
  --hero-pad-top-small: 56px;
  --stage-margin: 64px;
  --stage-margin-small: 40px;
  --more-head-margin-top: 96px;
  --more-head-margin-bottom: 32px;
  --head-margin-bottom: 48px;
  --head-max: 640px;
  --hub-margin-bottom: 56px;
  --footer-pad-bottom: 48px;
  --cap-min-height: 50px;
  --time-min-width: 34px;
  --pad-inline-md: 18px;
  --pad-inline-sm: 10px;
  --pad-inline-xs: 8px;
  --pad-inline-12: 12px;
  --badge-pad-x: 8px;
  --foot-height: 10px;
  --brand-gap: 10px;
  --shadow-ink: rgba(0, 0, 0, 0.55);
  --desk-shadow-ink: rgba(0, 0, 0, 0.5);
  --vent-height: 4px;
  --vent-period: 9px;
  --marker-size: 6px;
  --marker-offset: 8px;
  --mem-unit-offset: 6px;
  --blur-nav: 12px;
  --blur-media: 6px;
  --saturate-glow: 1.3;
  --crossfade: 1.1s;
  --tile-play: .4s;
  --wire-flow: 1.6s;
  --gallery-col: 300px;
  --desk-gap: 3%;
  --neck-width: 16%;
  --foot-width: 30%;
  --tower-width: 15%;
  --tower-inset: 12%;
  --tower-inset-top: 34%;
  --marker-gap: 6px;

  /* Site-only: drawn hardware */
  --alu-hi: #d9dade;
  --alu-mid: #b4b5ba;
  --alu-lo: #7d7e84;
  --alu-mid-a: #8f9095;
  --alu-mid-b: #a7a8ad;
  --bezel: #0a0a0b;
  --bezel-rim: #3a3a3f;
  --cam: #1d1d22;
  --vent: #6e6f75;
  --laptop-lid-radius: 22px;
  --laptop-lid-radius-small: 12px;
  --laptop-base-radius-x: 18px;
  --laptop-base-radius-y: 60%;
  --laptop-notch-radius: 10px;
  --laptop-notch-width: 13%;
  --laptop-notch-height: 38%;
  --screen-radius: 4px;
  --display-radius: 16px;
  --display-neck-height: 64px;
  --display-neck-height-small: 36px;
  --display-foot-radius: 4px;
  --tower-radius: 14px;
  --panel-aspect: 1536 / 640;
  --hub-node-radius: 14px;
  --hub-core-radius: 16px;
  --badge-radius: var(--radius-sm);
  --frame-inset: 2.1%;
  --frame-inset-bottom: 1.6%;
  --frame-inset-display: 1.6%;
  --cam-inset-top: 0.7%;
  --cam-size: 0.7%;
  --base-height: 2.6%;
  --frame-flare: 7%;
  --shadow-flare: 4%;
  --shadow-height: 30px;
  --desk-shadow-height: 24px;
  --glow-inset-top: 2%;
  --glow-inset-side: 4%;
  --glow-inset-bottom: 18%;
  --glow-opacity: 0.36;
  --glow-mask: radial-gradient(54% 53% at 50% 50%, black 88%, transparent);
  --cta-glow-inset: 5%;
  --cta-glow-inset-side: 13.5%;
  --cta-glow-opacity: 0.21;
  --cta-glow-mask: radial-gradient(50% 50% at 50% 50%, black 24%, transparent);
  --stage-max: 1040px;
  --hub-max: 1000px;
  --tile-radius: var(--radius-lg);
  --tile-radius-desktop: var(--radius-md);
  --pill-inset: 3px;
  --gap-media: 2px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-sans); font-size: var(--type-body); line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, video, picture { max-width: 100%; display: block; }
figure { margin: 0; }
a { color: var(--brand-strong); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: var(--control-stroke) solid var(--brand); outline-offset: var(--control-stroke); border-radius: var(--badge-radius); }
h1, h2, h3 { margin: 0; text-wrap: balance; letter-spacing: -0.02em; }
p { margin: 0; }
.wrap { max-width: var(--site-max); margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow { font-size: var(--type-eyebrow); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); font-weight: 600; }
.muted { color: var(--text-muted); }
.sprite { position: absolute; width: 0; height: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.icon { width: var(--icon-20); height: var(--icon-20); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--button-height); padding: 0 var(--button-pad); border-radius: var(--button-radius);
  font: 600 var(--type-button)/1 var(--font-sans); border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--selected); text-decoration: none; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn.primary:hover { background: var(--brand-strong); }
.btn.sm { height: var(--button-height-sm); padding: 0 var(--button-pad-sm); font-size: var(--type-button-sm); }

/* Nav */
.nav { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(var(--blur-nav)); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; gap: var(--space-6); height: var(--nav-height); }
.brand { display: flex; align-items: center; gap: var(--brand-gap); color: var(--text); font-weight: 700; font-size: var(--type-brand); letter-spacing: -0.01em; }
.brand:hover { text-decoration: none; }
.brand .icon { color: var(--brand); width: var(--icon-24); height: var(--icon-24); }
.nav nav { margin-left: auto; }
.nav ul { display: flex; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.nav ul a { color: var(--text-muted); font-size: var(--type-nav); font-weight: 500; }
.nav ul a:hover { color: var(--text); text-decoration: none; }

/* Hero */
.hero { position: relative; padding-top: var(--hero-pad-top); overflow: hidden; }
.hero-copy { text-align: center; display: grid; justify-items: center; gap: var(--space-5); }
.hero h1 { font-size: var(--type-hero); line-height: 1.04; font-weight: 700; max-width: 19ch; letter-spacing: -0.035em; }
.aurora .g { color: var(--brand-strong); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .aurora .g { color: transparent; -webkit-background-clip: text; background-clip: text; }
  .aurora .g1 { background-image: linear-gradient(90deg, var(--aurora-1), var(--aurora-2)); }
  .aurora .g2 { background-image: linear-gradient(90deg, var(--aurora-2), var(--aurora-3)); }
  .aurora .g3 { background-image: linear-gradient(90deg, var(--aurora-3), var(--aurora-4)); }
  .aurora .g4 { background-image: linear-gradient(90deg, var(--aurora-4), var(--aurora-5)); }
}
/* After the @supports block on purpose: same selector weight, so this must come last. */
@media (forced-colors: active) { .aurora .g { background: none; color: CanvasText; } }
.hero .lead { font-size: var(--type-lead); color: var(--text-muted); max-width: 46ch; }
.hero .ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }
.listen { display: flex; align-items: center; gap: var(--space-3); color: var(--text-muted); font-size: var(--type-nav); text-align: left; border: 1px solid var(--line); border-radius: var(--radius-pill); padding: var(--space-2) var(--pad-inline-md) var(--space-2) var(--space-2); background: var(--surface); max-width: 100%; }
.listen .player { width: var(--listen-player); flex: none; min-height: var(--ring-size); }
.listen .wave { height: var(--icon-24); }
.facts { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }
.fact { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--fact-height); padding: 0 var(--pad-inline-md) 0 var(--pad-inline-12); font-size: var(--type-fact); font-weight: 500; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-pill); }
.fact .icon { width: var(--icon-16); height: var(--icon-16); color: var(--brand); }

.stage-hero { position: relative; margin: var(--stage-margin) auto 0; max-width: var(--stage-max); }
.glow { position: absolute; inset: var(--glow-inset-top) var(--glow-inset-side) var(--glow-inset-bottom); z-index: 0; filter: saturate(var(--saturate-glow)); opacity: var(--glow-opacity); -webkit-mask-image: var(--glow-mask); mask-image: var(--glow-mask); pointer-events: none; }

.glow picture { display: block; width: 100%; height: 100%; }
.glow img { width: 100%; height: 100%; object-fit: cover; }

/* Laptop frame */
.laptop { position: relative; z-index: 1; }
.laptop .lid { background: var(--bezel); border: 1px solid var(--bezel-rim); border-bottom: 0; border-radius: var(--laptop-lid-radius) var(--laptop-lid-radius) 0 0; padding: var(--frame-inset) var(--frame-inset) var(--frame-inset-bottom); position: relative; }
.laptop .lid::before { content: ""; position: absolute; top: var(--cam-inset-top); left: 50%; width: var(--cam-size); aspect-ratio: 1; border-radius: 50%; background: var(--cam); transform: translateX(-50%); }
.screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--screen-radius); background: var(--bg); }
.screen picture { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity var(--crossfade) ease; }
.screen picture.on { opacity: 1; }
.screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; opacity: 1; }
.screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.laptop .base { position: relative; height: 0; padding-bottom: var(--base-height); margin: 0 calc(-1 * min(var(--frame-flare), var(--gutter))); background: linear-gradient(180deg, var(--alu-hi) 0%, var(--alu-mid) 45%, var(--alu-lo) 100%); border-radius: 0 0 var(--laptop-base-radius-x) var(--laptop-base-radius-x) / 0 0 var(--laptop-base-radius-y) var(--laptop-base-radius-y); }
.laptop .base::before { content: ""; position: absolute; left: 50%; top: 0; width: var(--laptop-notch-width); height: var(--laptop-notch-height); transform: translateX(-50%); background: linear-gradient(180deg, var(--alu-mid-a), var(--alu-mid-b)); border-radius: 0 0 var(--laptop-notch-radius) var(--laptop-notch-radius); }
.laptop .shadow { height: var(--shadow-height); margin: 0 calc(-1 * min(var(--shadow-flare), var(--gutter))); background: radial-gradient(ellipse at 50% 0, var(--shadow-ink), transparent 70%); }

.carousel-ctl { display: flex; justify-content: center; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.dots { display: flex; gap: var(--space-2); min-height: var(--dot-bar-height); }
.dots button { width: var(--dot-bar-width); height: var(--dot-bar-height); padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--text-muted); cursor: pointer; }
.dots button[aria-current="true"] { background: var(--brand); }

/* Sections */
section.block { padding-top: var(--section-gap); }
.head { display: grid; gap: var(--space-3); max-width: var(--head-max); margin-bottom: var(--head-margin-bottom); }
.head h2 { font-size: var(--type-section); line-height: 1.1; font-weight: 700; }
.head p { color: var(--text-muted); font-size: var(--type-lead); }
.head.center { margin-left: auto; margin-right: auto; text-align: center; justify-items: center; }
.head.more-head { margin-top: var(--more-head-margin-top); margin-bottom: var(--more-head-margin-bottom); }
.head.more-head h2 { font-size: var(--type-more-head); }

/* Promises */
.promises { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.promise { border-top: 1px solid var(--line); padding-top: var(--space-5); display: grid; gap: var(--space-3); align-content: start; }
.promise .icon { color: var(--brand); width: var(--icon-24); height: var(--icon-24); }
.promise h3 { font-size: var(--type-promise); font-weight: 600; }
.promise p { color: var(--text-muted); }

/* Stories */
.chips { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-5); }
.chip { height: var(--chip-height); padding: 0 var(--pad-inline-md); border-radius: var(--radius-pill); border: var(--control-stroke) solid var(--line); background: transparent; color: var(--text); font: 600 var(--type-fact)/1 var(--font-sans); cursor: pointer; }
.chip:hover { border-color: var(--brand); }
.chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.story { display: grid; gap: var(--space-4); }
.story-media { position: relative; border-radius: var(--tile-radius); overflow: hidden; border: 1px solid var(--line); background: var(--surface); aspect-ratio: var(--panel-aspect); }
.story-media img, .story-media picture, .story-media video { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.media-switch { position: absolute; left: var(--space-3); bottom: var(--space-3); display: flex; gap: var(--gap-media); padding: var(--pill-inset); background: var(--media-disc); border-radius: var(--radius-pill); backdrop-filter: blur(var(--blur-media)); }
.media-switch button { height: var(--switch-height); padding: 0 var(--switch-pad); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text); font: 600 var(--type-switch)/1 var(--font-sans); cursor: pointer; }
.media-switch button[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); }
.media-meta { position: absolute; right: var(--space-3); bottom: var(--space-3); font-size: var(--type-tag); color: var(--text); background: var(--media-disc); padding: var(--space-1) var(--pad-inline-sm); border-radius: var(--radius-pill); backdrop-filter: blur(var(--blur-media)); }
.story-side { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-content: start; align-items: stretch; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--tile-radius); padding: var(--space-4); display: grid; gap: var(--space-2); align-content: start; }
.panel .player { margin-top: auto; }
.panel .row { display: flex; align-items: center; gap: var(--space-2); }
.dot { width: var(--dot-size); height: var(--dot-size); border-radius: 50%; flex: none; }
.panel .kind { font-size: var(--type-meta); color: var(--text-muted); }
.panel h3 { font-size: var(--type-panel-title); font-weight: 600; }
.prompt { font-size: var(--type-prompt); color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.prompt.open { -webkit-line-clamp: unset; display: block; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--brand-strong); font: 600 var(--type-meta)/1.4 var(--font-sans); cursor: pointer; justify-self: start; }

/* Player */
.player { display: flex; align-items: center; gap: var(--space-3); min-height: var(--ring-size); }
.ring { width: var(--ring-size); height: var(--ring-size); border-radius: 50%; border: var(--control-stroke) solid var(--brand); background: transparent; color: var(--brand); display: grid; place-items: center; cursor: pointer; flex: none; padding: 0; }
.ring .icon { width: var(--icon-in-ring); height: var(--icon-in-ring); fill: currentColor; stroke: none; }
.ring[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); }
.wave { flex: 1; height: var(--ring-size); display: flex; align-items: center; gap: var(--gap-media); cursor: pointer; min-width: 0; }
.wave i { flex: 1; background: var(--line); border-radius: var(--wave-bar-radius); min-height: var(--wave-min-height); }
.wave i.on { background: var(--brand); }
.time { font-size: var(--type-time); color: var(--brand-strong); font-variant-numeric: tabular-nums; min-width: var(--time-min-width); text-align: right; }

/* Gallery */
.gallery { columns: 3 var(--gallery-col); column-gap: var(--space-4); }
.tile { break-inside: avoid; margin: 0 0 var(--space-4); border-radius: var(--tile-radius); overflow: hidden; border: 1px solid var(--line); background: var(--surface); position: relative; }
.tile img, .tile video { width: 100%; height: auto; }
.tile video { position: absolute; inset: 0; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--tile-play); }
.tile.playing video { opacity: 1; }
.tile .cap { padding: var(--space-3) var(--space-4); display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--type-meta); }
.tile .cap span:first-child { color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile .cap span:last-child { color: var(--text-muted); white-space: nowrap; }
.tile .badge { position: absolute; top: var(--space-3); left: var(--space-3); font-size: var(--type-badge); font-weight: 700; letter-spacing: 0.06em; background: var(--media-disc); padding: var(--pill-inset) var(--badge-pad-x); border-radius: var(--badge-radius); }
.tile .mediabox { position: relative; }
/* Desktop: one large preview above smaller thumbnails (phones keep the stacked tiles) */
.gpreview { display: none; }
@media (min-width: 761px) {
  .gpreview { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
  .gp-media { position: relative; aspect-ratio: var(--panel-aspect); border-radius: var(--tile-radius); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
  .gp-media img, .gp-media picture, .gp-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .gp-media .badge { position: absolute; top: var(--space-3); left: var(--space-3); font-size: var(--type-badge); font-weight: 700; letter-spacing: 0.06em; background: var(--media-disc); padding: var(--pill-inset) var(--badge-pad-x); border-radius: var(--badge-radius); }
  .gp-cap { display: grid; gap: var(--space-1); }
  .gp-cap h3 { font-size: var(--type-panel-title); font-weight: 600; }
  .gp-cap .prompt { max-width: 90ch; }
  .gallery { columns: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
  .tile { margin: 0 !important; border-radius: var(--tile-radius-desktop); cursor: pointer; }
  .tile .mediabox { aspect-ratio: var(--panel-aspect); }
  .tile .mediabox img { height: 100%; object-fit: cover; }
  .tile .badge { top: var(--space-2); left: var(--space-2); font-size: var(--type-badge-small); padding: var(--gap-media) var(--marker-gap); }
  .tile .cap { padding: var(--space-2) var(--space-3); }
  .tile .cap span:last-child { display: none; }
  .tile[aria-pressed="true"] { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
  .tile[aria-pressed="true"] .cap span:first-child { color: var(--brand-strong); }
}

/* Features */
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.feature { background: var(--surface); border: 1px solid var(--line); border-radius: var(--tile-radius); padding: var(--space-5); display: grid; gap: var(--space-2); align-content: start; }
.feature .icon { color: var(--brand); width: var(--icon-22); height: var(--icon-22); margin-bottom: var(--space-2); }
.feature h3 { font-size: var(--type-feature); font-weight: 600; letter-spacing: -0.01em; }
.feature p { color: var(--text-muted); font-size: var(--type-nav); }
.ontheway { margin-top: var(--space-5); color: var(--text-muted); font-size: var(--type-on-the-way); }
.ontheway b { color: var(--text); font-weight: 600; }

/* Desktop frame */
.desk { position: relative; max-width: var(--stage-max); margin: 0 auto; }
.desk-row { display: flex; align-items: flex-end; gap: var(--desk-gap); }
.display { flex: 1; }
.display .panel-frame { background: var(--bezel); border: 1px solid var(--bezel-rim); border-radius: var(--display-radius); padding: var(--frame-inset-display); }
.display .neck { width: var(--neck-width); height: var(--display-neck-height); margin: 0 auto; background: linear-gradient(90deg, var(--alu-lo), var(--alu-hi) 45%, var(--alu-mid)); clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%); }
.display .foot { width: var(--foot-width); height: var(--foot-height); margin: 0 auto; background: linear-gradient(180deg, var(--alu-hi), var(--alu-lo)); border-radius: var(--display-foot-radius) var(--display-foot-radius) var(--gap-media) var(--display-foot-radius); }
.tower { width: var(--tower-width); aspect-ratio: 197 / 95; background: linear-gradient(180deg, var(--alu-hi), var(--alu-mid) 60%, var(--alu-lo)); border-radius: var(--tower-radius) var(--tower-radius) var(--space-2) var(--tower-radius); position: relative; margin-bottom: 0; }
.tower::after { content: ""; position: absolute; left: var(--tower-inset); top: var(--tower-inset-top); width: var(--foot-width); display: block; height: var(--vent-height); border-radius: var(--vent-height); background: repeating-linear-gradient(90deg, var(--vent) 0 var(--vent-height), transparent var(--vent-height) var(--vent-period)); }
.desk-line { height: 1px; background: var(--line); margin-top: 0; }
.desk-shadow { height: var(--desk-shadow-height); background: radial-gradient(ellipse at 50% 0, var(--desk-shadow-ink), transparent 70%); }
.seg { display: inline-flex; gap: var(--gap-media); padding: var(--pill-inset); border: var(--control-stroke) solid var(--line); border-radius: var(--radius-pill); }
.seg button { height: var(--seg-height); padding: 0 var(--pad-inline-md); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-muted); font: 600 var(--type-nav)/1 var(--font-sans); cursor: pointer; white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); }
.seg-row { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin-top: var(--space-5); }

/* Captions under the screens */
.screen-cap { text-align: center; font-size: var(--type-cap); line-height: 1.45; color: var(--text-muted); max-width: 62ch; margin: var(--space-3) auto 0; min-height: var(--cap-min-height); text-wrap: balance; }
.screen-cap strong { color: var(--text); font-weight: 600; }

/* Connections */
.connections { margin-top: var(--section-gap); background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--band-pad) 0; }
.connections + .cta { margin-top: 0; border-top: 0; }
.hub { margin: var(--space-2) auto var(--hub-margin-bottom); max-width: var(--hub-max); }
.hub svg { width: 100%; height: auto; display: block; overflow: visible; }
.hub .wire { fill: none; stroke: var(--brand); stroke-width: var(--wire-stroke); stroke-dasharray: var(--wire-dash); stroke-linecap: round; opacity: var(--wire-opacity); animation: flow var(--wire-flow) linear infinite; }
@keyframes flow { to { stroke-dashoffset: -18; } }
@media (prefers-reduced-motion: reduce) { .hub .wire { animation: none; } }
.hub .node rect { fill: var(--bg); stroke: var(--line); }
.hub .node text { fill: var(--text); font: 600 var(--type-body) var(--font-sans); }
.hub .node .sub { fill: var(--text-muted); font: 400 var(--type-tag) var(--font-sans); }
.hub .node g.ic { fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hub .node .lg { fill: var(--text); }
.hub .core rect { fill: var(--brand-soft); stroke: var(--brand); }
.hub .core text { fill: var(--text); font: 700 var(--type-brand) var(--font-sans); }
.hub .core .sub { fill: var(--brand-strong); font: 500 var(--type-meta) var(--font-sans); }
.conn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.conn { background: var(--bg); border: 1px solid var(--line); border-radius: var(--tile-radius); padding: var(--space-5); display: grid; gap: var(--space-3); align-content: start; }
.conn.wide { grid-column: span 2; }
.conn .top { display: flex; align-items: center; gap: var(--space-3); }
.conn .brand-tile { width: var(--brand-tile); height: var(--brand-tile); border-radius: var(--radius-md); background: var(--surface-muted); display: grid; place-items: center; flex: none; }
.conn .brand-tile .icon { width: var(--icon-22); height: var(--icon-22); color: var(--text); }
.conn .for { font-size: var(--type-for); color: var(--text-muted); font-weight: 600; letter-spacing: 0.02em; }
.conn h3 { font-size: var(--type-conn); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.conn p { color: var(--text-muted); font-size: var(--type-body); }
.conn p strong { color: var(--text); font-weight: 600; }
.tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
.tags span { font-size: var(--type-tag); font-weight: 600; color: var(--text); background: var(--surface-muted); border-radius: var(--radius-pill); padding: var(--space-1) var(--pad-inline-sm); }

/* Third-party logos (their own artwork; Simple Icons glyphs drawn in text colour) */
.logo { width: var(--icon-20); height: var(--icon-20); fill: currentColor; stroke: none; flex: none; color: var(--text); }
img.logo { object-fit: contain; }
img.logo.mono { filter: brightness(0) invert(0.94); }
.conn .brand-tile img.logo { width: var(--brand-tile); height: var(--brand-tile); border-radius: var(--radius-md); }
.conn .who { display: grid; }
.conn .who b { font-size: var(--type-who); font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.logos { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
.logos span { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--logo-pill-height); padding: 0 var(--pad-inline-12) 0 var(--space-2); border-radius: var(--radius-pill); background: var(--surface-muted); font-size: var(--type-for); font-weight: 600; color: var(--text); }
.logos span.plain { padding: 0 var(--pad-inline-md); }
.logos .logo { width: var(--logo-size); height: var(--logo-size); }
.logos img.logo { width: var(--logo-size-img); height: var(--logo-size-img); border-radius: var(--logo-ratio); }

/* Tiers */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.tier { background: var(--surface); border: 1px solid var(--line); border-radius: var(--tile-radius); padding: var(--space-5); display: grid; gap: var(--space-3); align-content: start; }
.tier .mem { font-size: var(--type-mem); font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.tier .mem span { font-size: var(--type-mem-unit); font-weight: 500; color: var(--text-muted); letter-spacing: 0; margin-left: var(--mem-unit-offset); }
.tier ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.tier li { display: flex; gap: var(--space-2); font-size: var(--type-list); color: var(--text-muted); }
.tier li::before { content: ""; width: var(--marker-size); height: var(--marker-size); border-radius: 50%; background: var(--brand); margin-top: var(--marker-offset); flex: none; }
.tier .eg { font-size: var(--type-meta); color: var(--text-muted); border-top: 1px solid var(--line); padding-top: var(--space-3); }

/* Private */
.private { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: var(--space-6); align-items: start; }
.private h2 { font-size: var(--type-section); line-height: 1.1; }
.private h3 { font-size: var(--type-body); font-weight: 600; margin-bottom: var(--space-3); display: flex; align-items: center; gap: var(--space-2); }
.gap3 { margin-top: var(--space-3); }
.private ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.private li { color: var(--text-muted); border-bottom: 1px solid var(--line); padding-bottom: var(--space-2); font-size: var(--type-list); }
.private .stay h3 { color: var(--text); }
.private .stay .icon { color: var(--brand); }
.private p em { font-style: italic; color: var(--text); }

/* CTA + footer */
.cta { margin-top: var(--section-gap); border-top: 1px solid var(--line); padding: var(--cta-pad) 0; text-align: center; display: grid; justify-items: center; gap: var(--space-4); position: relative; overflow: hidden; }
.cta h2 { font-size: var(--type-section); }
.cta .glow { inset: var(--cta-glow-inset) var(--cta-glow-inset-side); opacity: var(--cta-glow-opacity); -webkit-mask-image: var(--cta-glow-mask); mask-image: var(--cta-glow-mask); }
.cta-stack { position: relative; display: grid; gap: var(--space-4); justify-items: center; }
.cta .req { font-size: var(--type-body); color: var(--text-muted); }
.cta .req em { font-style: italic; }
.cta .mail { font-size: var(--type-nav); color: var(--text-muted); }
footer { border-top: 1px solid var(--line); padding: var(--space-6) 0 var(--footer-pad-bottom); font-size: var(--type-meta); color: var(--text-muted); }
footer .wrap { display: grid; gap: var(--space-3); }
footer .cols { display: flex; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
footer .credits { color: var(--text-muted); }

.gone { min-height: 100svh; display: grid; place-items: center; padding: var(--section-gap) 0 var(--space-6); text-align: center; }
.gone .wrap { display: grid; justify-items: center; gap: var(--space-4); }
.gone-title { font-size: var(--type-hero); line-height: 1.1; font-weight: 700; }
.gone-lead { font-size: var(--type-lead); color: var(--text-muted); max-width: 46ch; }
.gone-nav { display: flex; justify-content: center; gap: var(--space-3); }

@media (max-width: 1000px) {
  .features { grid-template-columns: repeat(2, 1fr); }
  .story { grid-template-columns: 1fr; }
  .private { grid-template-columns: 1fr 1fr; }
  .private > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  /* the mock's 90px blur is an absolute distance, so its reach grows as the page narrows */
  :root { --gutter: var(--gutter-small); --section-gap: var(--section-gap-small); --glow-opacity: 0.19; --cta-glow-inset-side: 5%; --cta-glow-opacity: 0.17; }
  .listen { border-radius: var(--radius-lg); }
  .listen .player { width: auto; }
  .listen .wave { display: none; }
  .nav ul { display: none; }
  .nav .btn { margin-left: auto; }
  .hero { padding-top: var(--hero-pad-top-small); }
  .promises, .tiers { grid-template-columns: 1fr; }
  .features { grid-template-columns: 1fr; }
  .tower { display: none; }
  .display .neck { height: var(--display-neck-height-small); }
  .laptop .lid { border-radius: var(--laptop-lid-radius-small) var(--laptop-lid-radius-small) 0 0; }
  .private { grid-template-columns: 1fr; }
  .conn.wide { grid-column: auto; }
  .seg { flex-wrap: wrap; justify-content: center; border-radius: var(--radius-lg); }
  .stage-hero { margin-top: var(--stage-margin-small); }
  .connections { padding: var(--band-pad-small) 0; }
  .conn-grid { grid-template-columns: 1fr; }
  .conn h3 { font-size: var(--type-conn-small); }
  .tile .cap { flex-wrap: wrap; }
}
@media (max-width: 1000px) and (min-width: 761px) {
  .conn-grid { grid-template-columns: 1fr 1fr; }
  .conn.wide { grid-column: 1 / -1; }
}
@media (max-width: 760px) { .hub { display: none; } }