/* ==========================================================================
   HORIZON — redesigned product pages, design B.
   Friendly and centred. The page starts in orbit at night, crosses a lit
   horizon into daylight for the reading, opens windows back onto space for
   the films, and ends at night again as the star comes up. Funnel Display
   for headlines, Funnel Sans for reading. Each app's icon colours appear as
   light: a glow on the horizon, the primary button, a wash behind the
   product column. Content is open; only controls are glass.
   ========================================================================== */

@font-face {
  font-family: "Funnel Display";
  src: url("../fonts/funnel-display-latin.woff2") format("woff2");
  font-weight: 300 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Funnel Display";
  src: url("../fonts/funnel-display-latin-ext.woff2") format("woff2");
  font-weight: 300 800; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Funnel Sans";
  src: url("../fonts/funnel-sans-latin.woff2") format("woff2");
  font-weight: 300 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Funnel Sans";
  src: url("../fonts/funnel-sans-latin-ext.woff2") format("woff2");
  font-weight: 300 800; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------ tokens */
:root {
  --night: #070913;
  --day: #f5f7f9;
  --paper: #ffffff;
  --ink: #12161e;
  --ink-2: #545861;
  --ink-3: #666b73;
  --line: #dde0e4;
  --n-fg: #f1f4f7;
  --n-fg-2: #a6abb3;
  --n-line: rgba(241, 244, 247, .14);
  --edge: rgba(255, 255, 255, .12);

  --fd: "Funnel Display", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ft: "Funnel Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.25, .1, .25, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --spring: cubic-bezier(.34, 1.4, .64, 1);

  --gutter: max(22px, 4.6vw);
  --w-text: 900px;
  --w-media: 1180px;
  --w-wide: 1440px;
  --sec: 168px;
  --gbar: 48px;
  --lnav: 54px;
  --arc: 110px;

  --hue: #3d4a5c; --hue-rgb: 61, 74, 92; --lux: #c9d1da; --lux-rgb: 201, 209, 218; --wash: #eef1f5; --deep: #1b2230;
}
body[data-product="mac"]    { --hue: #215cd0; --hue-rgb: 33, 92, 208;  --lux: #95beff; --lux-rgb: 149, 190, 255; --wash: #e9f4ff; --deep: #07348b; }
body[data-product="sound"]  { --hue: #a64400; --hue-rgb: 166, 68, 0;   --lux: #fca676; --lux-rgb: 252, 166, 118; --wash: #ffeee2; --deep: #6b2200; }
body[data-product="load"]   { --hue: #a02c95; --hue-rgb: 160, 44, 149; --lux: #ef9ee3; --lux-rgb: 239, 158, 227; --wash: #ffedfd; --deep: #660b5f; }
body[data-product="tube"]   { --hue: #007a5f; --hue-rgb: 0, 122, 95;   --lux: #5ed7b5; --lux-rgb: 94, 215, 181;  --wash: #e0faf1; --deep: #004b38; }
body[data-product="extras"] { --hue: #007481; --hue-rgb: 0, 116, 129;  --lux: #82ccd7; --lux-rgb: 130, 204, 215; --wash: #e5f8fa; --deep: #004751; }
body[data-product="home"]   { --hue: #5b3fd6; --hue-rgb: 91, 63, 214;  --lux: #c4b5fd; --lux-rgb: 196, 181, 253; --wash: #f1edff; --deep: #2b1b78; }
body[data-product="cord"]   { --hue: #3b55e6; --hue-rgb: 59, 85, 230;  --lux: #9fb0ff; --lux-rgb: 159, 176, 255; --wash: #edf0ff; --deep: #1a2a8f; }

@media (max-width: 1068px) { :root { --sec: 128px; --arc: 80px; } }
@media (max-width: 734px)  { :root { --sec: 96px; --arc: 48px; --gbar: 52px; } }

/* -------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--night);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-padding-top: calc(var(--lnav) + 24px);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--night); color: var(--n-fg);
  font-family: var(--ft); font-size: 17px; line-height: 1.53; letter-spacing: -.003em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2, h3, h4, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: rgba(var(--lux-rgb), .4); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--hue); outline-offset: 3px; border-radius: 6px; }
.night :focus-visible, .hero :focus-visible, .lnav :focus-visible, .gbar :focus-visible, .menu :focus-visible { outline-color: var(--lux); }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 16px; top: 12px; z-index: 200; padding: 10px 16px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 600; transform: translateY(-160%); transition: transform .2s var(--ease); }
.skip:focus-visible { transform: none; }

#scene { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.veil { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 70% at 50% 0%, rgba(7, 9, 19, .55), transparent 62%); }
body.no-webgl { background: radial-gradient(90% 60% at 50% 105%, rgba(var(--lux-rgb), .22), transparent 60%), var(--night); }
.page { position: relative; z-index: 1; }

/* --------------------------------------------------------------- typography */
/* Headlines use static cuts of Funnel Display made from the variable font
   with overlapping outlines merged, so joins such as the a and the M render
   clean at display sizes. */
@font-face { font-family: "Funnel Heading"; src: url("../fonts/funnel-display-620-static.woff2") format("woff2"); font-weight: 610 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Funnel Heading"; src: url("../fonts/funnel-display-600-static.woff2") format("woff2"); font-weight: 300 609; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
.t-hero, .t-xxl, .t-xl, .t-l { font-family: "Funnel Heading", var(--fd); font-weight: 620; text-wrap: balance; text-rendering: optimizeLegibility; }
.t-hero { font-size: var(--h1, clamp(46px, 5.6vw, 88px)); line-height: 1; letter-spacing: -.02em; }
.t-xxl  { font-size: clamp(42px, 5.4vw, 80px); line-height: 1.02; letter-spacing: -.018em; }
.t-xl   { font-size: clamp(34px, 3.9vw, 56px); line-height: 1.05; letter-spacing: -.016em; }
.t-l    { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.1; letter-spacing: -.012em; }
.t-m    { font-family: var(--fd); font-size: clamp(21px, 1.8vw, 26px); line-height: 1.18; font-weight: 600; letter-spacing: -.016em; }
.t-lead { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.45; font-weight: 450; letter-spacing: -.008em; color: var(--ink-2); text-wrap: pretty; }
.t-lead b, .t-lead strong { color: var(--ink); font-weight: 600; }
.night .t-lead, .hero .t-lead { color: var(--n-fg-2); }
.night .t-lead b, .hero .t-lead b { color: var(--n-fg); }
.t-say { font-family: var(--fd); font-size: clamp(26px, 2.7vw, 38px); line-height: 1.24; font-weight: 560; letter-spacing: -.012em; color: #8a8f97; text-wrap: pretty; }
.t-say b { color: var(--ink); font-weight: 620; }
.t-num { font-family: var(--fd); font-weight: 620; letter-spacing: -.016em; font-variant-numeric: tabular-nums lining-nums; }
.t-eyebrow { display: block; font-family: var(--fd); font-size: clamp(18px, 1.5vw, 22px); line-height: 1.2; font-weight: 600; letter-spacing: -.012em; color: var(--hue); margin-bottom: 14px; }
.night .t-eyebrow { color: var(--lux); }
.link { color: var(--hue); font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
.night .link { color: var(--lux); }
.link:hover { text-decoration: underline; text-underline-offset: 4px; }
.link svg { width: 9px; height: 9px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.prose a { color: var(--hue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(var(--hue-rgb), .4); }
.night .prose a { color: var(--lux); text-decoration-color: rgba(var(--lux-rgb), .45); }

/* ------------------------------------------------------------------ layout */
.wrap { width: min(100% - 2 * var(--gutter), var(--w-media)); margin-inline: auto; }
.wrap--text { width: min(100% - 2 * var(--gutter), var(--w-text)); }
.sec { padding-block: var(--sec); position: relative; }
.center { text-align: center; }
.head { max-width: 900px; margin: 0 auto clamp(56px, 6.5vw, 100px); text-align: center; }
/* consecutive sections inside one stretch of daylight share a gap */
.day > .sec + .sec { padding-top: calc(var(--sec) * .3); }
.head .t-lead { margin: 22px auto 0; max-width: 700px; }

/* day: an opaque stretch of daylight with a lit horizon at each end */
.day { position: relative; background: var(--day); color: var(--ink); isolation: isolate; }
.day--paper { background: var(--paper); }
.day::before, .day::after {
  content: ""; position: absolute; left: 50%; width: max(180vw, 2200px); height: calc(var(--arc) * 2);
  transform: translateX(-50%); border-radius: 50%; background: inherit; z-index: -1; pointer-events: none;
}
.day::before { top: calc(var(--arc) * -1); clip-path: inset(-400px 0 50% 0); box-shadow: 0 -10px 40px -6px rgba(var(--lux-rgb), .55), 0 -40px 120px -20px rgba(var(--lux-rgb), .4); }
.day::after { bottom: calc(var(--arc) * -1); clip-path: inset(50% 0 -400px 0); box-shadow: 0 10px 40px -6px rgba(var(--lux-rgb), .35), 0 40px 120px -30px rgba(var(--lux-rgb), .25); }
.day--flat-top::before, .day--flat-bottom::after { display: none; }
.day + .day::before { display: none; }
.day:has(+ .day)::after { display: none; }
.day .sec:first-child { padding-top: calc(var(--sec) * .8); }
.night { position: relative; color: var(--n-fg); }

/* ----------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 22px; border-radius: 999px;
  background: var(--hue); color: #fff;
  font-family: var(--ft); font-size: 16px; line-height: 1; font-weight: 600; letter-spacing: -.005em; white-space: nowrap;
  transition: background-color .25s var(--ease), transform .2s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover { box-shadow: 0 8px 24px -8px rgba(var(--hue-rgb), .7); }
.btn:active { transform: scale(.97); }
.btn--sm { min-height: 32px; padding: 7px 15px; font-size: 14px; }
.night .btn, .hero .btn, .gbar .btn { background: #fff; color: var(--ink); }
.night .btn:hover, .hero .btn:hover { box-shadow: 0 0 0 6px rgba(255, 255, 255, .1); }
.btn--paypal { background: #ffc439 !important; color: #111 !important; }
.glass {
  background: rgba(26, 29, 40, .5);
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  box-shadow: inset 0 0 0 1px var(--edge), inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 48px -18px rgba(0, 0, 0, .6);
}
.day .glass, .glass--day {
  background: rgba(255, 255, 255, .72);
  box-shadow: inset 0 0 0 1px rgba(18, 22, 30, .08), 0 14px 40px -18px rgba(18, 22, 30, .3);
}

/* --------------------------------------------------------------- site bar */
.gbar { position: absolute; top: 0; left: 0; right: 0; z-index: 30; height: var(--gbar); }
.gbar__in { height: 100%; width: min(100% - 2 * var(--gutter), var(--w-wide)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--fd); font-weight: 650; font-size: 17px; letter-spacing: -.02em; }
.brand__mark { width: 20px; height: 20px; flex: none; }
.gbar__links { display: flex; gap: clamp(14px, 2.2vw, 30px); margin-left: auto; }
.gbar__links a { font-size: 13px; color: var(--n-fg-2); transition: color .2s var(--ease); }
.gbar__links a:hover, .gbar__links a[aria-current="page"] { color: var(--n-fg); }
.nav__burger { display: none; width: 40px; height: 40px; border-radius: 999px; align-items: center; justify-content: center; flex-direction: column; gap: 6px; }
.nav__burger span { display: block; width: 16px; height: 1.5px; background: var(--n-fg); border-radius: 2px; }
@media (max-width: 860px) { .gbar__links { display: none; } .nav__burger { display: inline-flex; } }
.menu { position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column; justify-content: center; padding: 80px var(--gutter) 40px; background: rgba(7, 9, 19, .9); -webkit-backdrop-filter: blur(28px) saturate(150%); backdrop-filter: blur(28px) saturate(150%); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s .3s; color: var(--n-fg); }
.menu.is-open { opacity: 1; visibility: visible; transition: opacity .3s var(--ease); }
.menu nav { display: flex; flex-direction: column; gap: 6px; }
.menu nav a { font-family: var(--fd); font-size: clamp(30px, 8vw, 44px); font-weight: 620; letter-spacing: -.016em; color: var(--n-fg-2); padding: 4px 0; }
.menu nav a[aria-current="page"], .menu nav a:hover { color: var(--n-fg); }
.menu__close { position: absolute; top: 14px; right: var(--gutter); width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; background: rgba(255, 255, 255, .08); }
.menu-open { overflow: hidden; }

/* -------------------------------------------------------- floating local nav
   It reads the tone of what passes under it (data-under from stage.js). */
.lnav { position: fixed; top: 10px; left: 0; right: 0; z-index: 60; display: flex; justify-content: center; padding-inline: 12px; opacity: 0; transform: translateY(-14px); visibility: hidden; transition: opacity .45s var(--ease), transform .55s var(--ease-out), visibility 0s .45s; color: var(--n-fg); }
.lnav.is-shown { opacity: 1; transform: none; visibility: visible; transition: opacity .45s var(--ease), transform .55s var(--ease-out); }
.lnav__bar { width: min(100%, 1000px); border-radius: 30px; padding: 8px 8px 8px 16px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; min-height: var(--lnav); transition: background-color .4s var(--ease), box-shadow .4s var(--ease), color .4s var(--ease); }
.lnav__name { display: inline-flex; align-items: center; gap: 10px; font-family: var(--fd); font-weight: 650; font-size: 18px; letter-spacing: -.02em; white-space: nowrap; }
.lnav__name img { width: 26px; height: 26px; border-radius: 7px; }
.lnav__links { display: flex; justify-content: center; gap: clamp(12px, 1.8vw, 26px); }
.lnav__links a { font-size: 13.5px; color: var(--n-fg-2); padding: 6px 2px; transition: color .2s var(--ease); white-space: nowrap; }
.lnav__links a:hover, .lnav__links a[aria-current="true"] { color: var(--n-fg); }
.lnav__end { display: inline-flex; align-items: center; gap: 12px; }
.lnav__price { font-size: 13.5px; color: var(--n-fg-2); white-space: nowrap; }
.lnav .btn { background: #fff; color: var(--ink); }
.lnav__toggle { display: none; width: 34px; height: 34px; border-radius: 999px; align-items: center; justify-content: center; background: rgba(255, 255, 255, .1); }
.lnav__toggle svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform .3s var(--ease); }
.lnav.is-open .lnav__toggle svg { transform: rotate(180deg); }
.lnav[data-under="day"] { color: var(--ink); }
.lnav[data-under="day"] .lnav__bar { background: rgba(255, 255, 255, .74); box-shadow: inset 0 0 0 1px rgba(18, 22, 30, .08), 0 14px 40px -18px rgba(18, 22, 30, .35); }
.lnav[data-under="day"] .lnav__links a, .lnav[data-under="day"] .lnav__price { color: var(--ink-2); }
.lnav[data-under="day"] .lnav__links a:hover, .lnav[data-under="day"] .lnav__links a[aria-current="true"] { color: var(--ink); }
.lnav[data-under="day"] .btn { background: var(--hue); color: #fff; }
.lnav[data-under="day"] .lnav__toggle { background: rgba(18, 22, 30, .06); }
.lnav[data-under="day"] :focus-visible { outline-color: var(--hue); }
/* OptiCord's Discord: a small glass pill beside the price, the icon alone on a phone */
.lnav__discord { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: background-color .25s var(--ease); }
.lnav__discord svg { width: 16px; height: 16px; flex: none; fill: currentColor; }
.lnav__discord:hover { background: rgba(255, 255, 255, .17); }
.lnav[data-under="day"] .lnav__discord { background: rgba(18, 22, 30, .05); box-shadow: inset 0 0 0 1px rgba(18, 22, 30, .09); }
.lnav[data-under="day"] .lnav__discord:hover { background: rgba(18, 22, 30, .1); }
@media (max-width: 734px) {
  .lnav__discord { width: 34px; min-height: 34px; padding: 0; justify-content: center; }
  .lnav__discord span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 900px) {
  .lnav__bar { grid-template-columns: 1fr auto; }
  .lnav__price { display: none; }
  .lnav__toggle { display: inline-flex; }
  .lnav__links { grid-column: 1 / -1; grid-row: 2; flex-direction: column; align-items: flex-start; gap: 0; max-height: 0; overflow: hidden; transition: max-height .4s var(--ease-out); }
  .lnav__links a { font-size: 17px; padding: 12px 2px; width: 100%; border-top: 1px solid var(--n-line); }
  .lnav[data-under="day"] .lnav__links a { border-top-color: var(--line); }
  .lnav.is-open .lnav__links { max-height: 420px; padding-top: 8px; }
  .lnav.is-open .lnav__bar { border-radius: 24px; }
}

/* -------------------------------------------------------------------- hero
   Centred: the app's name, the headline, the views fanned out beneath, the
   controls and the platter. The stage takes whatever height is left. */
.hero {
  --h1: clamp(40px, min(5vw, 8svh), 80px);
  position: relative; min-height: max(100svh, 680px); height: 100svh; max-height: 1180px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: calc(var(--gbar) + 26px) var(--gutter) 28px; overflow: clip; color: var(--n-fg);
}
/* the first daylight starts just below the first screen, so the horizon's
   glow shows at the bottom of the hero without covering it */
.hero + .day { margin-top: var(--arc); }
.hero__name { display: inline-flex; align-items: center; gap: 12px; font-family: var(--fd); font-size: clamp(20px, 1.7vw, 24px); font-weight: 620; letter-spacing: -.02em; margin-bottom: 12px; }
.hero__name img { width: 34px; height: 34px; border-radius: 9px; }
.hero h1 { max-width: 18ch; text-shadow: 0 2px 30px rgba(7, 9, 19, .5); }
.hero__stage { flex: 1 1 auto; min-height: 0; width: 100%; margin-top: clamp(22px, 3.4vh, 36px); container-type: size; display: grid; place-items: center; }
.hero__foot { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }

/* the fan: the view in front, its neighbours tilted away at either side */
.stack { --ar-box: 1.6; position: relative; height: 100cqh; width: min(100cqw - 0px, 100cqh * var(--ar-box)); max-width: 1080px; perspective: 2200px; }
.stack__card { position: absolute; inset: 0; display: grid; place-items: center; transition: transform 1.05s var(--ease-out), opacity .8s var(--ease), filter .8s var(--ease); will-change: transform, opacity; container-type: size; }
.stack__media { position: relative; width: min(100cqw, calc(100cqh * var(--ar, 1.6))); aspect-ratio: var(--ar, 1.6); border-radius: var(--rad, 14px); overflow: hidden; background: #0a0c14; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 100px -40px rgba(0, 0, 0, .9), 0 20px 120px -40px rgba(var(--lux-rgb), .45); }
.stack__media > img, .stack__media .film > video { width: 100%; height: 100%; object-fit: cover; }
.stack__media--free { background: transparent; box-shadow: none; overflow: visible; }
.stack__media--free > img { border-radius: var(--rad, 14px); filter: drop-shadow(0 34px 50px rgba(0, 0, 0, .65)); }
.stack__card[data-off="0"] { transform: none; opacity: 1; z-index: 5; }
.stack__card[data-off="1"]  { transform: translate3d(64%, 2%, -260px) rotateY(-22deg) scale(.8); opacity: .55; filter: brightness(.6); z-index: 4; }
.stack__card[data-off="-1"] { transform: translate3d(-64%, 2%, -260px) rotateY(22deg) scale(.8); opacity: .55; filter: brightness(.6); z-index: 4; }
.stack__card[data-off="2"]  { transform: translate3d(98%, 3%, -520px) rotateY(-30deg) scale(.66); opacity: 0; z-index: 3; }
.stack__card[data-off="-2"] { transform: translate3d(-98%, 3%, -520px) rotateY(30deg) scale(.66); opacity: 0; z-index: 3; }
.stack__card.is-leaving { z-index: 4; }
html:not(.js) .stack__card:not(:first-child) { display: none; }

/* controls: timed dots, the name of the view, play and pause */
.ctl { display: inline-flex; align-items: center; gap: 4px; padding: 6px 6px 6px 18px; border-radius: 999px; }
.hero .glass { background: rgba(14, 16, 26, .72); }
.ctl__dots { display: inline-flex; align-items: center; gap: 10px; margin-right: 12px; }
.ctl__dot { --t: 0; position: relative; width: 8px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .38); overflow: hidden; transition: width .45s var(--ease-out), background-color .3s var(--ease); }
.ctl__dot:hover { background: rgba(255, 255, 255, .6); }
.ctl__dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #fff; transform: scaleX(var(--t)); transform-origin: 0 50%; opacity: 0; }
.ctl__dot[aria-pressed="true"] { width: 40px; background: rgba(255, 255, 255, .3); }
.ctl__dot[aria-pressed="true"]::after { opacity: 1; }
.ctl__label { min-width: 7.5em; text-align: left; font-size: 14px; font-weight: 600; color: var(--n-fg); }
.ctl__play { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; color: var(--n-fg-2); transition: background-color .3s var(--ease), color .3s var(--ease); }
.ctl__play:hover { background: rgba(255, 255, 255, .12); color: var(--n-fg); }
.ctl__play svg { width: 12px; height: 12px; fill: currentColor; }
[data-state="playing"] > .i-play, [data-state="paused"] > .i-pause { display: none; }

.platter { display: inline-flex; align-items: center; gap: 22px; padding: 9px 9px 9px 22px; border-radius: 999px; }
.platter__copy { font-size: 14px; line-height: 1.3; color: var(--n-fg-2); white-space: nowrap; text-align: left; }
.platter__copy strong { display: block; color: var(--n-fg); font-weight: 600; font-size: 15px; }

/* ---------------------------------------------------------------------- film */
.film { position: relative; width: 100%; height: 100%; }
.film video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.film__ui { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; pointer-events: none; }
.film__ui > * { pointer-events: auto; }
.film__sound { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 12px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #fff; background: rgba(16, 18, 26, .58); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); box-shadow: inset 0 0 0 1px var(--edge); }
.film__sound:hover { background: rgba(30, 33, 44, .78); }
.film__sound[aria-pressed="true"] { background: rgba(var(--lux-rgb), .2); box-shadow: inset 0 0 0 1px rgba(var(--lux-rgb), .5); }
.bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.bars i { width: 2.5px; height: 40%; border-radius: 2px; background: var(--lux); transform-origin: 50% 100%; }
.bars i:nth-child(2) { height: 75%; } .bars i:nth-child(3) { height: 55%; } .bars i:nth-child(4) { height: 90%; }
.has-sound .bars i { animation: eq 1.1s var(--ease) infinite alternate; }
.has-sound .bars i:nth-child(2) { animation-delay: -.3s; } .has-sound .bars i:nth-child(3) { animation-delay: -.7s; } .has-sound .bars i:nth-child(4) { animation-delay: -.5s; }
@keyframes eq { 0% { transform: scaleY(.35); } 100% { transform: scaleY(1); } }
.film__right { display: inline-flex; align-items: center; gap: 8px; }
.film__vol { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 999px; background: rgba(16, 18, 26, .58); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px var(--edge); opacity: 0; transform: translateX(8px); pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.has-sound .film__vol { opacity: 1; transform: none; pointer-events: auto; }
.film__toggle { width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; background: rgba(16, 18, 26, .58); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px var(--edge); color: #fff; }
.film__toggle svg { width: 12px; height: 12px; fill: currentColor; }
.range { --level: 80%; -webkit-appearance: none; appearance: none; width: 108px; height: 22px; background: transparent; margin: 0; }
.range::-webkit-slider-runnable-track { height: 5px; border-radius: 5px; background: linear-gradient(90deg, var(--lux) var(--level), rgba(255, 255, 255, .22) var(--level)); }
.range::-moz-range-track { height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .22); }
.range::-moz-range-progress { height: 5px; border-radius: 5px; background: var(--lux); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -5.5px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.range::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff; }

/* ----------------------------------------------------------- statement/stats */
.say { text-align: center; }
.say .t-say { max-width: 920px; margin-inline: auto; }
.stats { margin: clamp(64px, 7vw, 104px) auto 0; max-width: 1080px; display: grid; grid-template-columns: repeat(4, auto); justify-content: space-evenly; gap: 28px; text-align: center; }
.stat__v { display: block; font-size: clamp(36px, 3.9vw, 58px); line-height: 1.04; color: var(--ink); white-space: nowrap; }
.stat__k { display: block; margin-top: 12px; font-size: 15px; color: var(--ink-2); }
.stat__v { background: linear-gradient(180deg, var(--ink) 30%, rgba(var(--hue-rgb), .92)); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 734px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; } }
/* lights down for reading in the night bands (stage.js sets --dim) */
.veil::after { content: ""; position: absolute; inset: 0; background: var(--night); opacity: var(--dim, 0); transition: opacity 1.1s var(--ease); }

/* ------------------------------------------------- media card gallery (day) */
.cards { position: relative; }
.cards__track { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: max(var(--gutter), calc((100% - var(--w-media)) / 2)); scroll-padding-inline: max(var(--gutter), calc((100% - var(--w-media)) / 2)); padding-bottom: 6px; overscroll-behavior-x: contain; }
.cards__track::-webkit-scrollbar { display: none; }
.cards { --card-h: clamp(250px, 29vw, 430px); }
.card { flex: 0 0 auto; scroll-snap-align: start; display: flex; flex-direction: column; }
.card__frame { height: var(--card-h); display: flex; align-items: flex-end; }
.card__frame > img, .card__frame > video {
  height: 100%; width: auto; max-width: calc(100vw - 2 * var(--gutter));
  object-fit: contain; object-position: left bottom; border-radius: var(--rad, 12px);
  filter: drop-shadow(0 26px 34px rgba(18, 22, 30, .26)) drop-shadow(0 2px 6px rgba(18, 22, 30, .1));
}
.card__frame > .terminator, .card__frame > .duo { height: 100%; width: auto; max-width: calc(100vw - 2 * var(--gutter)); aspect-ratio: 4 / 3; }
.card__frame .duo > img:first-child { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* the caption takes the picture's width without widening the card */
.card__cap { width: 0; min-width: 100%; margin-top: 22px; font-size: 17px; line-height: 1.47; color: var(--ink-2); text-wrap: pretty; }
.card__cap b { color: var(--ink); font-weight: 600; }
.cards__track { gap: clamp(22px, 2.6vw, 36px); }
.cards__nav { display: flex; justify-content: flex-end; gap: 12px; width: min(100% - 2 * var(--gutter), var(--w-media)); margin: 30px auto 0; }
.round { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: rgba(18, 22, 30, .06); transition: background-color .25s var(--ease), opacity .25s var(--ease); }
.round:hover { background: rgba(18, 22, 30, .11); }
.round:disabled { opacity: .35; cursor: default; }
.round svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.night .round { color: #fff; background: rgba(255, 255, 255, .12); }
.round.round--play svg { fill: currentColor; stroke: none; }

/* ------------------------------------------------- tabbed media (night band) */
.tabbed { text-align: center; }
.tabbed__stage { position: relative; display: grid; place-items: center; width: min(100% - 2 * var(--gutter), 1080px); margin: 0 auto; aspect-ratio: 1.42; }
.tabbed__stage > figure { grid-area: 1 / 1; width: 100%; height: 100%; display: grid; place-items: center; opacity: 0; transform: translateY(18px) scale(.97); visibility: hidden; pointer-events: none; transition: opacity .6s var(--ease), transform .9s var(--ease-out), visibility 0s linear .6s; }
.tabbed__stage > figure.is-active { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.tabbed__stage img { width: auto; max-width: 100%; max-height: 100%; border-radius: var(--rad, 14px); filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .7)); }
.seg { display: inline-flex; gap: 6px; padding: 6px; border-radius: 999px; margin-top: 30px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button { height: 36px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--n-fg-2); white-space: nowrap; transition: background-color .3s var(--ease), color .3s var(--ease); }
.seg button:hover { color: var(--n-fg); }
.seg button[aria-expanded="true"] { background: #fff; color: var(--ink); }
.tabbed__notes { position: relative; min-height: 4.6em; margin: 24px auto 0; max-width: 640px; }
.tabbed__notes p { position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--ease); color: var(--n-fg-2); font-size: 17px; line-height: 1.47; }
.tabbed__notes p b { color: var(--n-fg); font-weight: 600; }
.tabbed[data-current="0"] .tabbed__notes p:nth-child(1), .tabbed[data-current="1"] .tabbed__notes p:nth-child(2),
.tabbed[data-current="2"] .tabbed__notes p:nth-child(3), .tabbed[data-current="3"] .tabbed__notes p:nth-child(4),
.tabbed[data-current="4"] .tabbed__notes p:nth-child(5), .tabbed[data-current="5"] .tabbed__notes p:nth-child(6) { opacity: 1; position: relative; }
.tabbed:not([data-current]) .tabbed__notes p:first-child { opacity: 1; position: relative; }

/* ---------------------------------------------------------- feature list */
.feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(44px, 5vw, 72px) clamp(28px, 4vw, 56px); text-align: center; max-width: 1080px; margin-inline: auto; }
.feat { position: relative; }
.feat h3 { font-family: var(--fd); font-size: 21px; line-height: 1.22; font-weight: 620; letter-spacing: -.018em; margin-bottom: 8px; color: var(--ink); }
.feat p { color: var(--ink-2); font-size: 17px; line-height: 1.5; max-width: 30ch; margin-inline: auto; }
@media (max-width: 1068px) { .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .feats { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- compare */
.compare { overflow-x: auto; scrollbar-width: none; max-width: 1040px; margin-inline: auto; }
.compare table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 640px; }
.compare thead th { padding: 30px 26px 24px; font-family: var(--fd); font-size: clamp(21px, 2vw, 28px); font-weight: 620; letter-spacing: -.02em; text-align: left; vertical-align: bottom; color: var(--ink-3); }
.compare thead th.is-us { color: var(--ink); background: var(--wash); border-radius: 26px 26px 0 0; }
.compare__app { display: inline-flex; align-items: center; gap: 14px; }
.compare__app img { width: 42px; height: 42px; border-radius: 11px; flex: none; }
.compare tbody th { width: 20%; text-align: left; padding: 20px 26px 20px 0; font-size: 14px; font-weight: 600; color: var(--ink-3); vertical-align: top; border-top: 1px solid var(--line); }
.compare td { width: 40%; padding: 20px 26px; font-size: 17px; line-height: 1.45; vertical-align: top; color: var(--ink-2); border-top: 1px solid var(--line); }
.compare td.is-us { color: var(--ink); font-weight: 500; background: var(--wash); border-top-color: rgba(var(--hue-rgb), .12); }
.compare tbody tr:last-child td.is-us { border-radius: 0 0 26px 26px; }

/* ---------------------------------------------------------- alternatives */
.switch { max-width: 780px; margin-inline: auto; text-align: center; }
.switch__line { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 14px; font-size: 18px; font-weight: 500; color: var(--ink-2); }
.pick { position: relative; }
.pick__btn {
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 18px 0 22px; border-radius: 999px;
  background: var(--paper); color: var(--ink); font-family: var(--fd); font-size: 18px; font-weight: 600; letter-spacing: -.012em;
  box-shadow: inset 0 0 0 1px var(--line), 0 12px 30px -20px rgba(18, 22, 30, .4);
  transition: box-shadow .25s var(--ease);
}
.pick__btn:hover { box-shadow: inset 0 0 0 1px rgba(var(--hue-rgb), .35), 0 14px 34px -20px rgba(18, 22, 30, .5); }
.pick__btn svg { width: 12px; height: 12px; stroke: var(--hue); stroke-width: 2.2; fill: none; transition: transform .3s var(--ease-out); }
.pick__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.pick__list {
  position: absolute; top: calc(100% + 10px); left: 50%; z-index: 30; width: max-content; min-width: 100%; max-width: min(360px, 88vw);
  max-height: min(440px, 60vh); overflow: auto; overscroll-behavior: contain; margin: 0; padding: 8px; list-style: none; text-align: left;
  border-radius: 22px; background: #fff;
  box-shadow: 0 0 0 1px rgba(18, 22, 30, .08), 0 32px 70px -24px rgba(18, 22, 30, .4);
  transform: translateX(-50%); transform-origin: 50% 0; animation: pickIn .22s var(--ease-out);
}
.pick__list[hidden] { display: none; }
@keyframes pickIn { from { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(.98); } }
.pick.is-up .pick__list { top: auto; bottom: calc(100% + 10px); transform-origin: 50% 100%; animation-name: pickUp; }
@keyframes pickUp { from { opacity: 0; transform: translateX(-50%) translateY(6px) scale(.98); } }
.pick__opt { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px; font-size: 16px; line-height: 1.3; font-weight: 500; color: var(--ink); cursor: pointer; }
.pick__opt:hover, .pick__opt.is-active { background: var(--wash); }
.pick__opt[aria-selected="true"] { color: var(--hue); font-weight: 600; }
.pick__opt svg { width: 14px; height: 14px; margin-left: auto; flex: none; stroke: var(--hue); stroke-width: 2.4; fill: none; opacity: 0; }
.pick__opt[aria-selected="true"] svg { opacity: 1; }
.switch__panels { margin-top: clamp(40px, 4.6vw, 60px); text-align: left; }
.switch__panels [data-switch-panel] { animation: panelIn .5s var(--ease-out); }
@keyframes panelIn { from { opacity: 0; transform: translateY(8px); } }
.switch__panels [data-switch-panel] h3 { font-family: var(--fd); font-size: clamp(22px, 2vw, 28px); font-weight: 620; letter-spacing: -.02em; margin-bottom: 14px; color: var(--ink); }
.switch__panels [data-switch-panel] p { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.6; color: var(--ink-2); }
.switch__tabs { display: none; }
html:not(.js) .switch__line, html.stage-late .switch:not(.is-ready) .switch__line { display: none; }
html:not(.js) .switch [data-switch-panel] + [data-switch-panel], html.stage-late .switch:not(.is-ready) [data-switch-panel] + [data-switch-panel] { margin-top: 36px; }
/* the first frame is already the one Switch() draws (see eclipse.css) */
html.js:not(.stage-late) .switch:not(.is-ready) [data-switch-panel] + [data-switch-panel] { display: none; }

/* --------------------------------------------------------------------- FAQ */
.faq { max-width: 920px; margin-inline: auto; border-bottom: 1px solid var(--line); }
.faq details { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; font-family: var(--fd); font-size: clamp(18px, 1.55vw, 21px); font-weight: 600; letter-spacing: -.016em; line-height: 1.3; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(18, 22, 30, .06); transition: transform .4s var(--ease-out), background-color .3s var(--ease); }
.faq summary .plus svg { width: 10px; height: 10px; stroke: var(--ink); stroke-width: 2; fill: none; }
.faq summary:hover .plus { background: rgba(18, 22, 30, .1); }
.faq details[open] summary .plus { transform: rotate(45deg); background: var(--hue); }
.faq details[open] summary .plus svg { stroke: #fff; }
.faq .faq__a { padding: 0 0 28px; max-width: 760px; color: var(--ink-2); font-size: 17px; line-height: 1.58; }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { height: 0; overflow: clip; transition: height .4s var(--ease-out), content-visibility .4s allow-discrete; }
  .faq details[open]::details-content { height: auto; }
}

/* -------------------------------------------------------------------- buy */
.buy { text-align: center; padding-block: calc(var(--sec) + var(--arc)) calc(var(--sec) * 1.1); }
.buy__icon { width: clamp(96px, 9vw, 124px); height: auto; margin: 0 auto 28px; border-radius: 27%; filter: drop-shadow(0 24px 50px rgba(var(--lux-rgb), .45)); }
.buy__price { margin-top: 22px; display: flex; align-items: baseline; justify-content: center; gap: 12px; }
.buy__price .t-num { font-size: clamp(52px, 5.6vw, 80px); line-height: 1; }
.buy__price small { font-size: 17px; color: var(--n-fg-2); }
.buy .t-lead { max-width: 620px; margin: 20px auto 0; }
/* the checkout is daylight cut from the same sky: a pale nebula, a few
   stars, and the app's own colour glowing up from below */
.checkout {
  position: relative; isolation: isolate; overflow: hidden;
  margin: 44px auto 0; width: min(100%, 448px); border-radius: 32px; padding: 26px 26px 20px; text-align: left; color: var(--ink);
  background:
    radial-gradient(120% 70% at 50% 118%, rgba(var(--lux-rgb), .75), transparent 62%),
    radial-gradient(80% 60% at 0% 0%, rgba(196, 210, 255, .95), transparent 60%),
    radial-gradient(70% 60% at 100% 6%, rgba(255, 214, 236, .9), transparent 62%),
    linear-gradient(165deg, #fbfbff 0%, #eef0fc 46%, #f5effa 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .75), inset 0 1px 0 #fff, 0 0 80px -10px rgba(var(--lux-rgb), .55), 0 50px 120px -50px rgba(0, 0, 0, .9);
}
.checkout::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .9;
  background-image:
    linear-gradient(118deg, transparent 32%, rgba(255, 255, 255, .7) 47%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(1.4px 1.4px at 12% 22%, rgba(110, 120, 220, .55) 50%, transparent 52%),
    radial-gradient(1px 1px at 28% 64%, rgba(110, 120, 220, .45) 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 47% 12%, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 63% 44%, rgba(150, 110, 210, .5) 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 81% 30%, rgba(110, 120, 220, .5) 50%, transparent 52%),
    radial-gradient(1px 1px at 91% 72%, rgba(150, 110, 210, .45) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 8% 86%, rgba(110, 120, 220, .4) 50%, transparent 52%),
    radial-gradient(1px 1px at 38% 92%, rgba(150, 110, 210, .4) 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 72% 90%, #fff 50%, transparent 52%);
}
.checkout__head { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--ink-3); margin-bottom: 16px; }
.checkout__head strong { color: var(--ink); font-weight: 600; }
.checkout__pp { min-height: 112px; display: grid; align-content: center; }
.checkout__pp .btn { width: 100%; }
[data-paypal] [id^="carousel-container"] { display: none !important; }
[data-paypal] [id$="-wrapper"] { margin: 0 !important; }
[data-paypal] .item-header { margin: 0 0 2px !important; font-size: 17px !important; font-weight: 600 !important; }
[data-paypal] .item-header h3 { font-size: 17px !important; font-weight: 600 !important; }
[data-paypal] .item-description { margin: 0 0 18px !important; color: var(--ink-3); font-size: 14px; }
.facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 26px; font-size: 14px; color: var(--n-fg-2); }
.facts li { display: inline-flex; align-items: center; gap: 8px; }
.facts svg { width: 14px; height: 14px; stroke: var(--lux); fill: none; stroke-width: 2; }

/* ------------------------------------------------------------------ footer */
.foot { position: relative; z-index: 1; background: var(--day); color: var(--ink); padding: 100px 0 calc(40px + env(safe-area-inset-bottom)); isolation: isolate; text-align: center; }
.foot::before { content: ""; position: absolute; left: 50%; top: calc(var(--arc) * -1); clip-path: inset(-400px 0 50% 0); width: max(180vw, 2200px); height: calc(var(--arc) * 2); transform: translateX(-50%); border-radius: 50%; background: var(--day); z-index: -1; box-shadow: 0 -10px 40px -6px rgba(var(--lux-rgb), .5), 0 -40px 120px -20px rgba(var(--lux-rgb), .35); }
.foot__in { width: min(100% - 2 * var(--gutter), var(--w-wide)); margin-inline: auto; display: flex; flex-direction: column; align-items: center; }
/* The apps sit on a Dock in daylight. Icons grow under the pointer and name
   themselves; the app this page is about carries the running dot. */
.dock { --icon: clamp(36px, 9.2vw, 56px); --gap: clamp(5px, 1.1vw, 12px); }
.dock__shelf {
  display: flex; align-items: flex-end; gap: var(--gap); height: calc(var(--icon) + 20px); padding: 10px calc(var(--gap) + 5px);
  border-radius: calc(var(--icon) * .3 + 12px); background: rgba(255, 255, 255, .72);
  box-shadow: inset 0 0 0 1px rgba(18, 22, 30, .07), inset 0 1px 0 #fff, 0 26px 50px -26px rgba(18, 22, 30, .4), 0 2px 6px rgba(18, 22, 30, .05);
  -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%);
}
.dock__shelf > li { --m: 1; position: relative; display: flex; align-items: flex-end; }
.dock__app { position: relative; display: block; width: calc(var(--icon) * var(--m)); height: calc(var(--icon) * var(--m)); transition: width .26s var(--ease-out), height .26s var(--ease-out); -webkit-tap-highlight-color: transparent; }
.dock__app img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 6px 9px rgba(18, 22, 30, .28)); }
.dock__home { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 23%; color: #fff; background: radial-gradient(120% 90% at 30% 8%, #2b3550, #070913 72%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 6px 12px rgba(18, 22, 30, .25); }
.dock__home svg { width: 54%; height: 54%; }
.dock__app[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--ink-2); }
.dock__sep { width: 1px; align-self: stretch; margin: 4px calc(var(--gap) * .35); background: rgba(18, 22, 30, .14); }
.dock__label {
  position: absolute; left: 50%; bottom: calc(100% + 14px); padding: 5px 11px; border-radius: 8px;
  font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap; color: var(--ink);
  background: rgba(255, 255, 255, .96); box-shadow: 0 0 0 1px rgba(18, 22, 30, .08), 0 10px 24px -10px rgba(18, 22, 30, .4);
  transform: translate(-50%, 4px); opacity: 0; pointer-events: none; transition: opacity .16s var(--ease), transform .24s var(--ease-out);
}
.dock__app:focus-visible { outline: none; }
.dock__app:focus-visible > img, .dock__app:focus-visible > .dock__home { outline: 2px solid var(--hue); outline-offset: 3px; border-radius: 23%; }
.dock__app:focus-visible .dock__label { opacity: 1; transform: translate(-50%, 0); }
.dock__shelf > li:has(> .dock__app:focus-visible) { --m: 1.3; }
/* magnification is driven by assets/stage/dock.js, frame by frame; without
   it, hovering still names the app */
.dock.is-live .dock__app { transition: none; }
.dock__shelf > li.is-near .dock__label { opacity: 1; transform: translate(-50%, 0); }
@media (hover: hover) { .dock:not(.is-live) .dock__app:hover .dock__label { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .dock__app { transition: none; } }
.foot__tag { margin-top: 34px; font-family: var(--fd); font-size: 17px; font-weight: 600; letter-spacing: -.012em; color: var(--ink); }
.foot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 18px; max-width: 760px; }
.foot__links a, .foot__links button { font-size: 13.5px; color: var(--ink-2); transition: color .2s var(--ease); }
.foot__links a:hover, .foot__links button:hover { color: var(--ink); }
.foot__base { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 24px; margin-top: 36px; font-size: 12.5px; color: var(--ink-3); }
.status { display: inline-flex; align-items: center; gap: 8px; }
.status i { width: 7px; height: 7px; border-radius: 50%; background: #1fae7f; box-shadow: 0 0 8px rgba(31, 174, 127, .6); }

/* ------------------------------------------------------------------ modals */
.modal { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 20px; background: rgba(7, 9, 19, .5); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s .3s; --accent: var(--hue); --accent-ink: var(--hue); color: var(--ink); }
.modal.is-open { opacity: 1; visibility: visible; transition: opacity .3s var(--ease); }
.modal__panel { position: relative; width: min(100%, 520px); max-height: calc(100svh - 40px); overflow: auto; padding: 36px 32px 30px; border-radius: 30px; background: var(--paper); box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .6); transform: translateY(14px) scale(.98); transition: transform .4s var(--ease-out); }
.modal.is-open .modal__panel { transform: none; }
.modal__panel h2 { font-family: var(--fd); font-size: 30px; font-weight: 620; letter-spacing: -.03em; margin-bottom: 10px; }
.modal__panel p { color: var(--ink-2); }
.modal__close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(18, 22, 30, .06); }
.modal__close svg { width: 14px; height: 14px; }
.mono-label { font-size: 14px; font-weight: 600; }
.field { display: grid; gap: 6px; margin-bottom: 14px; position: relative; }
.field span { font-size: 13px; color: var(--ink-2); }
.field input, .field textarea { width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: var(--day); border: 0; border-radius: 14px; padding: 12px 14px; box-shadow: inset 0 0 0 1px var(--line); }
.field textarea { min-height: 120px; resize: vertical; }
.field__count { position: absolute; right: 12px; bottom: 10px; font-size: 12px; color: var(--ink-3); }
.btn--accent { width: 100%; margin-top: 6px; }
.form__note { margin-top: 14px; font-size: 13px; color: var(--ink-3); }
.picks { display: grid; gap: 10px; margin-top: 22px; }
.picks a { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: var(--day); transition: background-color .2s var(--ease); }
.picks a:hover { background: var(--wash); }
.picks svg { width: 28px; height: 28px; flex: none; }
.picks b { display: block; font-weight: 600; }
.picks span span { font-size: 13px; color: var(--ink-2); }
.modal-open { overflow: hidden; }

/* ===================================================================== motion
   The opening: the headline rises word-group by word-group, then the front
   window unfolds towards you and its neighbours slide out from behind it,
   then the controls and the platter arrive. */
html.motion.intro-pending .hero__name, html.motion.intro-pending .hero h1, html.motion.intro-pending .stack,
html.motion.intro-pending .hero__foot, html.motion.intro-pending .gbar { opacity: 0; }
html.motion .gbar { transition: opacity .8s var(--ease) .1s; }
html.motion .hero__name { transition: opacity .7s var(--ease), transform 1s var(--ease-out); }
html.motion.intro-pending .hero__name { transform: translateY(16px); }
html.motion .hero h1 { transition: opacity .9s var(--ease) .12s, transform 1.2s var(--ease-out) .12s, filter 1s var(--ease) .12s; }
html.motion.intro-pending .hero h1 { transform: translateY(26px); filter: blur(8px); }
html.motion .stack { transition: opacity .6s var(--ease) .3s; }
html.motion .stack__card[data-off="0"] { transition: transform 1.3s var(--ease-out), opacity .8s var(--ease), filter .8s var(--ease); }
html.motion.intro-pending .stack__card[data-off="0"], html.motion.intro-run:not(.intro-fan) .stack__card[data-off="0"] { transform: translate3d(0, 6%, -200px) rotateY(-74deg) scale(.86); filter: brightness(.4); }
html.motion.intro-pending .stack__card:not([data-off="0"]), html.motion.intro-run:not(.intro-fan) .stack__card:not([data-off="0"]) { transform: translate3d(0, 4%, -300px) scale(.7); opacity: 0; }
html.motion .hero__foot { transition: opacity .7s var(--ease), transform .9s var(--ease-out); }
html.motion.intro-run:not(.intro-platter) .hero__foot { opacity: 0; transform: translateY(12px); }

html.motion [data-reveal].rise { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform 1.2s var(--ease-out); }
html.motion [data-reveal].rise.is-in { opacity: 1; transform: none; }
html.motion [data-reveal].rise-late { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease) .15s, transform 1.2s var(--ease-out) .15s; }
html.motion [data-reveal].rise-late.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------- small screens */
@media (max-width: 734px) {
  .hero { height: auto; min-height: 0; max-height: none; padding-bottom: 36px; }
  .hero__stage { container-type: inline-size; flex: none; }
  .stack { width: 100%; height: auto; aspect-ratio: var(--ar-box); }
  .stack__card[data-off="1"], .stack__card[data-off="-1"] { opacity: 0; }
  .ctl { padding-left: 14px; }
  .ctl__label { min-width: 0; }
  .platter { gap: 14px; }
  .film__ui { left: 10px; right: 10px; bottom: 10px; }
  .film__sound { height: 36px; font-size: 13px; padding: 0 13px 0 10px; }
  .film__vol { display: none; }
  .film__toggle { width: 36px; height: 36px; }
  .card { flex-basis: 84vw; }
  .tabbed__stage { aspect-ratio: 1.1; }
  .compare table { min-width: 0; }
  .compare thead tr, .compare tbody tr { display: grid; grid-template-columns: 1fr 1fr; }
  .compare thead th:first-child { display: none; }
  .compare thead th { padding: 18px 14px 14px; font-size: 18px; }
  .compare tbody th { grid-column: 1 / -1; width: auto; padding: 16px 0 6px; }
  .compare td { width: auto; padding: 8px 14px 16px; font-size: 15px; border-top: 0; }
  .compare tbody tr:last-child td.is-us { border-radius: 0 0 20px 0; }
}

/* =================================================================== chapters
   Shared chapter components, drawn for daylight first with a night variant
   for the bands that open back onto space. */

/* ------------------------------------------------------------------ split */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.split--flip .split__copy { order: 2; }
.split__copy .t-eyebrow { text-align: left; }
.split__copy .t-lead { margin-top: 20px; }
.split__copy .cta-row { margin-top: 28px; }
.split__media { position: relative; min-width: 0; }
.split__media--portrait { max-width: 440px; justify-self: center; width: 100%; }
.split__media img, .split__media video { border-radius: var(--rad, 14px); }
.shot { filter: drop-shadow(0 30px 50px rgba(18, 22, 30, .28)); }
.night .shot { filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .7)); }
@media (max-width: 1068px) { .split { grid-template-columns: 1fr; } .split--flip .split__copy { order: 0; } }

/* ------------------------------------------------------------------ points */
.points { display: grid; gap: 20px; margin-top: 30px; }
.points li { position: relative; padding-left: 30px; font-size: 17px; line-height: 1.52; color: var(--ink-2); max-width: 58ch; }
.points li::before { content: ""; position: absolute; left: 3px; top: .5em; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, var(--lux) 55%, var(--hue)); box-shadow: 0 2px 8px rgba(var(--hue-rgb), .35); }
.points strong { color: var(--ink); font-weight: 600; }
.night .points li { color: var(--n-fg-2); }
.night .points strong { color: var(--n-fg); }

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.cta-row--center { justify-content: center; }
.cta-note { margin-top: 18px; font-size: 14px; color: var(--ink-3); }
.night .cta-note { color: var(--n-fg-2); }
.feats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1180px; }
@media (max-width: 1200px) { .feats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .feats--4 { grid-template-columns: 1fr; } }
.night .feat h3 { color: var(--n-fg); }
.night .feat p { color: var(--n-fg-2); }


.picks--inline { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.picks--inline a { display: flex; align-items: center; gap: 14px; min-width: 230px; padding: 14px 18px; border-radius: 20px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line), 0 10px 30px -18px rgba(18, 22, 30, .35); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.picks--inline a:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line), 0 16px 40px -18px rgba(18, 22, 30, .45); }
.picks--inline svg { width: 28px; height: 28px; flex: none; }
.picks--inline b { display: block; font-weight: 600; color: var(--ink); }
.picks--inline span span { font-size: 13px; color: var(--ink-2); }

/* --------------------------------------------------------------- terminator */
.terminator {
  --x: 50%;
  position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: #0b0c10; touch-action: pan-y; isolation: isolate;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 40px 100px -40px rgba(0, 0, 0, .8), 0 20px 120px -40px rgba(var(--lux-rgb), .45);
}
.day .terminator { box-shadow: 0 0 0 1px rgba(18, 22, 30, .08), 0 40px 90px -40px rgba(18, 22, 30, .45); }
.terminator img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.terminator__on { clip-path: inset(0 0 0 var(--x)); }
.terminator__line { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; z-index: 2; pointer-events: none; background: linear-gradient(180deg, transparent, var(--lux) 18%, #fff 50%, var(--lux) 82%, transparent); box-shadow: 0 0 22px 3px rgba(var(--lux-rgb), .65); }
.terminator__knob { position: absolute; top: 50%; left: var(--x); z-index: 3; width: 46px; height: 46px; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; pointer-events: none; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.terminator__knob svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.terminator__range { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.terminator__range:focus-visible ~ .terminator__knob { outline: 2px solid var(--hue); outline-offset: 3px; }
.terminator__tag { position: absolute; top: 14px; z-index: 2; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; pointer-events: none; transition: opacity .3s var(--ease); }
.terminator__tag--off { left: 14px; background: rgba(255, 255, 255, .9); color: var(--ink); box-shadow: 0 4px 14px rgba(0, 0, 0, .15); }
.terminator__tag--on { right: 14px; background: rgba(12, 14, 22, .72); color: #fff; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.terminator.is-left .terminator__tag--off { opacity: 0; }
.terminator.is-right .terminator__tag--on { opacity: 0; }

/* ------------------------------------------------------------------ orbits */
.orbits { position: relative; width: min(100%, 860px); aspect-ratio: 1; margin: 0 auto; --u: min(1px, calc((100vw - 2 * var(--gutter)) / 860)); }
.orbits__core { position: absolute; left: 50%; top: 50%; width: calc(132 * var(--u)); transform: translate(-50%, -50%); z-index: 2; }
.orbits__core img { width: 100%; height: auto; border-radius: 28%; filter: drop-shadow(0 0 60px rgba(var(--lux-rgb), .55)); }
.orbits__ring { position: absolute; left: 50%; top: 50%; width: calc(var(--r) * 2 * var(--u)); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.orbits__spin { position: absolute; inset: 0; animation: spin var(--dur, 90s) linear infinite; animation-play-state: var(--play, running); }
.orbits__ring--rev .orbits__spin { animation-direction: reverse; }
.orbits__body { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateX(calc(var(--r) * var(--u))) rotate(calc(-1 * var(--a))); }
.orbits__mark { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 8px; translate: -50% -50%; animation: spin var(--dur, 90s) linear infinite reverse; animation-play-state: var(--play, running); }
.orbits__ring--rev .orbits__mark { animation-direction: normal; }
.orbits__mark i { width: calc(56 * var(--u)); height: calc(56 * var(--u)); min-width: 34px; min-height: 34px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .8); }
.orbits__mark svg { width: 54%; height: 54%; }
.orbits__mark span { font-size: 12.5px; font-weight: 600; color: var(--n-fg-2); white-space: nowrap; }
@keyframes spin { to { transform: rotate(360deg); } }
.orbits[data-paused] { --play: paused; }
.orbits__ctl { display: flex; justify-content: center; gap: 12px; align-items: center; margin-top: 26px; }
.orbits__more { font-family: var(--fd); font-size: clamp(20px, 1.7vw, 24px); font-weight: 600; letter-spacing: -.016em; color: var(--n-fg-2); }
@media (max-width: 734px) { .orbits__mark span { display: none; } }

/* --------------------------------------------------------------- segments */
.segs { display: grid; gap: 26px; max-width: 980px; margin: 0 auto; }
.segs__row { display: grid; grid-template-columns: 220px 1fr; gap: 22px; align-items: center; }
.segs__label { font-size: 15px; color: var(--ink-2); }
.segs__label strong { display: block; color: var(--ink); font-size: 17px; font-weight: 600; font-family: var(--fd); letter-spacing: -.01em; }
.segs__bar { position: relative; height: 28px; border-radius: 999px; overflow: hidden; background: #e8ebef; display: grid; grid-template-columns: repeat(var(--n, 1), 1fr); gap: 1px; padding: 3px; }
.segs__bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(180deg, var(--lux), var(--hue)); transform: scaleX(0); transform-origin: 0 50%; }
.segs__bar--one i { border-radius: 999px; background: linear-gradient(90deg, #b7bcc4, #8a9099); }
.segs.is-in .segs__bar i { animation: seg var(--t, 1.4s) cubic-bezier(.3, .1, .3, 1) var(--d, 0s) forwards; }
.segs.is-in .segs__bar--one i { animation-duration: 5.4s; animation-timing-function: linear; }
html:not(.motion) .segs__bar i { transform: none; }
@keyframes seg { to { transform: scaleX(1); } }
@media (max-width: 734px) { .segs__row { grid-template-columns: 1fr; gap: 10px; } }

/* ---------------------------------------------------------------- terminal */
.term { border-radius: 18px; overflow: hidden; background: #0d1018; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 50px 120px -50px rgba(0, 0, 0, .9), 0 30px 140px -70px rgba(var(--lux-rgb), .45); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: clamp(13px, 1.1vw, 15px); line-height: 1.75; text-align: left; }
.term__bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: rgba(255, 255, 255, .04); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.term__bar i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.term__bar span { margin-left: 10px; font-size: 12px; color: var(--n-fg-2); font-family: var(--ft); }
.term__body { padding: 20px 22px 24px; color: #d6dae1; white-space: pre-wrap; }
.term__body .p { color: var(--lux); }
.term__body .ok { color: #fff; font-weight: 600; }
.term__body .c { color: #7c8188; }
.term__caret { display: inline-block; width: .6em; height: 1.1em; vertical-align: -.2em; background: var(--lux); animation: caret 1.1s steps(1) 7; }
@keyframes caret { 50% { opacity: 0; } }

/* -------------------------------------------------------------------- babel */
.babel { display: block; min-height: 1.3em; font-family: var(--fd); font-size: clamp(18px, 1.5vw, 22px); font-weight: 600; color: var(--hue); margin-bottom: 14px; }
.babel span { display: inline-block; transition: opacity .35s var(--ease), transform .45s var(--ease-out), filter .35s var(--ease); }
.babel.is-swapping span { opacity: 0; transform: translateY(-8px); filter: blur(4px); }

/* --------------------------------------------------------------- tool index */
.tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tools a { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px 0 12px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--n-fg); background: rgba(14, 16, 26, .72); box-shadow: inset 0 0 0 1px var(--edge); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); transition: background-color .25s var(--ease); }
.tools a:hover { background: rgba(40, 44, 60, .8); }
.tools svg { width: 22px; height: 22px; fill: none; stroke: var(--lux); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hero--free .stack, .hero--free .hero__media { height: 100cqh; width: min(100cqw, 100cqh * 4 / 3); max-width: 960px; }
.hero--free .hero__media .terminator { height: 100%; width: 100%; aspect-ratio: auto; }
@media (max-width: 734px) { .hero--free .hero__media { height: auto; width: 100%; } .hero--free .hero__media .terminator { aspect-ratio: 4 / 3; } }

/* ---------------------------------------------------- a page and its popup */
.duo { position: relative; width: 100%; }
.duo > img:first-child { width: 100%; border-radius: var(--rad, 14px); }
.duo > .duo__pop { position: absolute; right: -4%; bottom: -6%; width: 42%; border-radius: 14px; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .14); }
/* plates: a film or loop given the full width of a section */
.plate { position: relative; border-radius: 22px; overflow: hidden; background: #0a0c14; box-shadow: 0 40px 100px -40px rgba(0, 0, 0, .75); }
.day .plate { box-shadow: 0 0 0 1px rgba(18, 22, 30, .06), 0 40px 90px -40px rgba(18, 22, 30, .45); }
.plate > img, .plate video { display: block; width: 100%; height: auto; }
.plate .film__ui { left: 16px; right: 16px; bottom: 16px; pointer-events: none; }
.statement { text-align: center; }
.statement__i { width: 64px; height: 64px; margin: 0 auto 24px; border-radius: 20px; display: grid; place-items: center; color: var(--hue); background: var(--wash); }
.statement__i svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.statement .t-lead { max-width: 640px; margin: 20px auto 0; }
.lnav__name img[src$=".svg"] { border-radius: 7px; }
.compare__caption { margin: 0 auto 18px; max-width: 1040px; font-size: 15px; color: var(--ink-2); }
.night .compare thead th { color: var(--n-fg-2); }
.night .compare thead th.is-us { color: var(--n-fg); background: rgba(var(--lux-rgb), .12); }
.night .compare tbody th { color: var(--n-fg-2); border-top-color: var(--n-line); }
.night .compare td { color: var(--n-fg-2); border-top-color: var(--n-line); }
.night .compare td.is-us { color: var(--n-fg); background: rgba(var(--lux-rgb), .12); border-top-color: rgba(var(--lux-rgb), .14); }
.night .t-xxl, .night .t-xl, .night .t-l { color: var(--n-fg); }

.picks svg, .picks--inline svg { color: var(--hue); }

/* ---------------------------------------------------------------- cut-outs
   Screenshots cut along the app's own outline: no frame, no CSS corner, no
   background. The shadow follows the window itself. */
img.cut { border-radius: 0 !important; box-shadow: none !important; background: none !important; filter: drop-shadow(0 30px 46px rgba(0, 0, 0, .6)); }
.day img.cut { filter: drop-shadow(0 26px 34px rgba(18, 22, 30, .3)) drop-shadow(0 2px 6px rgba(18, 22, 30, .12)); }
.stack__media--free > img.cut { filter: drop-shadow(0 34px 50px rgba(0, 0, 0, .65)); }

/* ---------------------------------------------------------- design switch
   Sun for Horizon, moon for Eclipse. The thumb sits under the design on
   screen and slides across before the page changes (assets/stage/stage.js). */
.look { position: relative; flex: none; display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); isolation: isolate; }
.look::before { content: ""; position: absolute; z-index: -1; top: 3px; left: 3px; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .17); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .3), 0 2px 8px rgba(0, 0, 0, .45); transition: transform .42s var(--ease-out); }
.look[data-on="eclipse"]::before { transform: translateX(28px); }
.look__opt { position: relative; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--look-off, rgba(241, 244, 247, .5)); transition: color .25s var(--ease); }
.look__opt:hover, .look__opt[aria-current="page"] { color: var(--look-on, #f1f4f7); }
.look__opt svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.look__tip {
  position: absolute; top: calc(100% + 10px); left: 50%; padding: 4px 9px; border-radius: 7px;
  font-size: 12px; font-weight: 500; line-height: 1.3; white-space: nowrap; color: #f1f4f7;
  background: rgba(36, 38, 44, .94); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .16), 0 8px 20px -8px rgba(0, 0, 0, .7);
  transform: translate(-50%, -3px); opacity: 0; pointer-events: none; transition: opacity .15s var(--ease), transform .22s var(--ease-out);
}
.look__opt:focus-visible .look__tip { opacity: 1; transform: translate(-50%, 0); }
@media (hover: hover) { .look__opt:hover .look__tip { opacity: 1; transform: translate(-50%, 0); } }
.look--gbar { margin-left: clamp(18px, 2.4vw, 32px); }
@media (max-width: 860px) { .look--gbar { margin-left: auto; } }
@media (max-width: 734px) { .look--lnav { display: none; } }
@media (prefers-reduced-motion: reduce) { .look::before { transition: none; } }
html.look-leaving body { opacity: 0; transition: opacity .32s var(--ease); }
/* the floating nav turns to daylight over day sections; so does the switch */
.lnav[data-under="day"] .look { --look-off: rgba(18, 22, 30, .42); --look-on: var(--ink); background: rgba(18, 22, 30, .05); box-shadow: inset 0 0 0 1px rgba(18, 22, 30, .07); }
.lnav[data-under="day"] .look::before { background: #fff; box-shadow: 0 0 0 .5px rgba(18, 22, 30, .1), 0 2px 6px rgba(18, 22, 30, .18); }

/* ------------------------------------------------------------ round four */
/* Twitch, and any feature told as headline, film, then details */
.showcase .head { margin-inline: auto; text-align: center; }
.showcase .head .t-lead { margin-inline: auto; max-width: 760px; }
.showcase__media { max-width: var(--w-media); margin: clamp(52px, 6vw, 84px) auto 0; }
.points--grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px) clamp(28px, 4vw, 56px); margin: clamp(56px, 6vw, 88px) auto 0; max-width: var(--w-media); }
.points--grid li { max-width: none; }
@media (max-width: 1068px) { .points--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .points--grid { grid-template-columns: 1fr; } }

/* slideshow, in daylight */
.slides { --slides-rad: 16px; --slides-shadow: 0 0 0 1px rgba(18, 22, 30, .08), 0 50px 110px -50px rgba(18, 22, 30, .55); }
.slides__label { color: var(--ink-2); }
.slides__dots { background: rgba(18, 22, 30, .05); }
.slides .dot { position: relative; width: 8px; height: 8px; border-radius: 999px; background: rgba(18, 22, 30, .2); overflow: hidden; transition: width .4s var(--ease-out), background-color .3s var(--ease); }
.slides .dot.is-current { width: 36px; background: rgba(18, 22, 30, .14); }
.slides .dot__fill { position: absolute; inset: 0; border-radius: inherit; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
.slides .dot.is-current:not(.is-timing) .dot__fill { transform: scaleX(1); }
.slides .dot.is-timing .dot__fill { animation: slideFill var(--dwell, 4.2s) linear forwards; }
@keyframes slideFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.slides__play { width: 44px; height: 44px; }
.slides__play svg { width: 12px; height: 12px; fill: currentColor; stroke: none; }

/* carousels a mouse can drag */
@media (hover: hover) and (pointer: fine) { .cards__track { cursor: grab; } }
.cards__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.cards__track.is-dragging * { pointer-events: none; }
.stack { touch-action: pan-y; }

/* ---------------------------------------------------- the five openings
   Each app's hero opens its own way. OptiMac swings its front window round
   (the default above); OptiSound raises its windows like faders; OptiLoad
   streams them in from the right; OptiTube switches its screen on; the
   OptiExtras before-and-after opens out from its centre. */
html.motion.intro-pending body[data-product="sound"] .stack__card[data-off="0"],
html.motion.intro-run:not(.intro-fan) body[data-product="sound"] .stack__card[data-off="0"] { transform: translate3d(0, 52%, 0) scale(.94); opacity: 0; filter: none; }
html.motion.intro-pending body[data-product="sound"] .stack__card[data-off="-1"],
html.motion.intro-run:not(.intro-fan) body[data-product="sound"] .stack__card[data-off="-1"] { transform: translate3d(-64%, 80%, -260px) rotateY(22deg) scale(.8); opacity: 0; }
html.motion.intro-pending body[data-product="sound"] .stack__card[data-off="1"],
html.motion.intro-run:not(.intro-fan) body[data-product="sound"] .stack__card[data-off="1"] { transform: translate3d(64%, 80%, -260px) rotateY(-22deg) scale(.8); opacity: 0; }
html.motion.intro-fan:not(.intro-done) body[data-product="sound"] .stack__card[data-off="-1"] { transition-delay: 0s; }
html.motion.intro-fan:not(.intro-done) body[data-product="sound"] .stack__card[data-off="0"] { transition-delay: .16s; transition-duration: 1.5s, .9s, .9s; }
html.motion.intro-fan:not(.intro-done) body[data-product="sound"] .stack__card[data-off="1"] { transition-delay: .32s; }

html.motion.intro-pending body[data-product="load"] .stack__card[data-off="1"],
html.motion.intro-run:not(.intro-fan) body[data-product="load"] .stack__card[data-off="1"] { transform: translate3d(170%, 0, -300px) scale(.7); opacity: 0; filter: none; }
html.motion.intro-pending body[data-product="load"] .stack__card[data-off="0"],
html.motion.intro-run:not(.intro-fan) body[data-product="load"] .stack__card[data-off="0"] { transform: translate3d(130%, 0, -260px) scale(.76); opacity: 0; filter: none; }
html.motion.intro-pending body[data-product="load"] .stack__card[data-off="-1"],
html.motion.intro-run:not(.intro-fan) body[data-product="load"] .stack__card[data-off="-1"] { transform: translate3d(100%, 0, -300px) scale(.7); opacity: 0; }
html.motion.intro-fan:not(.intro-done) body[data-product="load"] .stack__card[data-off="1"] { transition-delay: 0s; }
html.motion.intro-fan:not(.intro-done) body[data-product="load"] .stack__card[data-off="0"] { transition-delay: .14s; transition-duration: 1.4s, .8s, .8s; }
html.motion.intro-fan:not(.intro-done) body[data-product="load"] .stack__card[data-off="-1"] { transition-delay: .3s; transition-duration: 1.5s, .9s, .9s; }

html.motion.intro-pending body[data-product="tube"] .stack__card[data-off="0"],
html.motion.intro-run:not(.intro-fan) body[data-product="tube"] .stack__card[data-off="0"] { transform: none; opacity: 1; filter: none; }
html.motion.intro-pending body[data-product="tube"] .stack__card[data-off="0"] .stack__media,
html.motion.intro-run:not(.intro-fan) body[data-product="tube"] .stack__card[data-off="0"] .stack__media { transform: scale(.86, .004); filter: brightness(6); opacity: 0; }
html.motion.intro-fan:not(.intro-done) body[data-product="tube"] .stack__card[data-off="0"] .stack__media { animation: tvOn 1.3s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes tvOn {
  0% { transform: scale(.86, .004); filter: brightness(6); opacity: 1; }
  26% { transform: scale(1, .008); filter: brightness(4); }
  60% { transform: scale(1, 1.015); filter: brightness(1.35); }
  100% { transform: none; filter: none; opacity: 1; }
}
html.motion.intro-pending body[data-product="tube"] .stack__card:not([data-off="0"]),
html.motion.intro-run:not(.intro-fan) body[data-product="tube"] .stack__card:not([data-off="0"]) { opacity: 0; }
html.motion.intro-fan:not(.intro-done) body[data-product="tube"] .stack__card:not([data-off="0"]) { transition-delay: .85s; }

html.motion body[data-product="extras"] .hero__media { clip-path: circle(75% at 50% 50%); transition: clip-path 1.7s cubic-bezier(.65, 0, .35, 1); }
html.motion.intro-pending body[data-product="extras"] .hero__media,
html.motion.intro-run:not(.intro-fan) body[data-product="extras"] .hero__media { clip-path: circle(0% at 50% 50%); }

/* ------------------------------------------------- homepage and OptiCord */
.hero__mark { width: 30px; height: 30px; }
.compare__mark { width: 40px; height: 40px; color: var(--hue); flex: none; }
.night .card__cap { color: var(--n-fg-2); }
.night .card__cap b { color: var(--n-fg); }
.card__cap .link { margin-left: 4px; font-weight: 600; }

/* the lineup: six apps standing in a row, no boxes round them */
.lineup { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 40px); width: min(100% - 2 * var(--gutter), 1320px); margin: 0 auto; text-align: center; }
.lineup__app { display: flex; flex-direction: column; align-items: center; }
.lineup__art { display: block; margin-bottom: 24px; }
.lineup__icon { width: clamp(84px, 7.4vw, 116px); height: auto; filter: drop-shadow(0 22px 26px rgba(18, 22, 30, .26)) drop-shadow(0 4px 8px rgba(18, 22, 30, .12)); transition: transform .6s var(--ease-out), filter .6s var(--ease-out); }
.lineup__app:hover .lineup__icon { transform: translateY(-8px) scale(1.05); filter: drop-shadow(0 32px 34px rgba(18, 22, 30, .3)) drop-shadow(0 4px 8px rgba(18, 22, 30, .12)); }
.lineup__badge { min-height: 20px; font-size: 13px; font-weight: 600; color: var(--hue); }
.lineup__name { font-family: "Funnel Heading", var(--fd); font-size: clamp(21px, 1.8vw, 26px); font-weight: 620; letter-spacing: -.01em; color: var(--ink); }
.lineup__role { margin-top: 4px; font-size: 14px; color: var(--ink-3); }
.lineup__desc { flex: 1; margin-top: 16px; max-width: 24ch; font-size: 15px; line-height: 1.47; color: var(--ink-2); }
.lineup__price { margin-top: 20px; font-family: "Funnel Heading", var(--fd); font-size: 22px; font-weight: 620; letter-spacing: -.01em; color: var(--ink); }
.lineup__price span { display: block; margin-top: 4px; font-family: var(--ft); font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.lineup__cta { margin-top: 18px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lineup__cta .link { font-size: 14px; }
@media (max-width: 1068px) { .lineup { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 64px; } }
@media (max-width: 600px) { .lineup { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* two things side by side, each with its own picture */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 5vw, 80px); max-width: 1180px; margin-inline: auto; }
.pair__item { display: flex; flex-direction: column; align-items: flex-start; }
.pair__media { width: 100%; height: clamp(240px, 26vw, 360px); display: flex; align-items: flex-end; justify-content: center; margin-bottom: 30px; }
.pair__media img { height: 100%; width: auto; max-width: 100%; object-fit: contain; border-radius: 14px; filter: drop-shadow(0 30px 40px rgba(18, 22, 30, .25)); }
.pair__item h3 { font-family: "Funnel Heading", var(--fd); font-size: clamp(24px, 2.2vw, 32px); font-weight: 620; letter-spacing: -.012em; color: var(--ink); }
.pair__item p { margin: 12px 0 14px; font-size: 17px; line-height: 1.5; color: var(--ink-2); max-width: 46ch; }
@media (max-width: 734px) { .pair { grid-template-columns: 1fr; } }

.feat__k { margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--hue); }
.feat .link { font-weight: 600; }

/* films in a tabbed stage, and the notes under them */
.tabbed__stage--film { aspect-ratio: 1.587; }
.tabbed__stage video { width: auto; max-width: 100%; max-height: 100%; border-radius: 14px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 50px 120px -50px rgba(0, 0, 0, .9); }
.note__who { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: var(--lux); }
.coda { margin-top: clamp(40px, 5vw, 64px); text-align: center; font-family: "Funnel Heading", var(--fd); font-size: clamp(22px, 2vw, 30px); font-weight: 620; letter-spacing: -.02em; color: var(--n-fg); }
.tabbed--day .tabbed__notes p { color: var(--ink-2); }
.tabbed--day .tabbed__notes p b { color: var(--ink); }
.tabbed--day .tabbed__stage img { filter: drop-shadow(0 34px 50px rgba(18, 22, 30, .3)); }
.seg--day { background: rgba(18, 22, 30, .05); }
.seg--day button { color: var(--ink-2); }
.seg--day button:hover { color: var(--ink); }
.seg--day button[aria-expanded="true"] { background: var(--ink); color: #fff; }

.plate--rise { max-width: var(--w-media); margin: clamp(48px, 6vw, 80px) auto 0; }
.plate--rise img { display: block; width: 100%; height: auto; }
.shot-day { filter: drop-shadow(0 40px 60px rgba(18, 22, 30, .28)); }
.terminator--wide { aspect-ratio: 1.6; max-width: 1080px; margin: clamp(48px, 6vw, 80px) auto 0; }

.lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 80px); max-width: 980px; margin: clamp(72px, 8vw, 120px) auto 0; }
.lists__col h3 { font-family: "Funnel Heading", var(--fd); font-size: clamp(21px, 1.8vw, 26px); font-weight: 620; letter-spacing: -.01em; color: var(--ink); }
.lists .points { margin-top: 22px; gap: 14px; }
.lists .points li { font-size: 16px; }
@media (max-width: 734px) { .lists { grid-template-columns: 1fr; } }

/* OptiCord's own checkout: same galactic card, with its activation steps */
.checkout__status { margin-top: 10px; font-size: 14px; color: var(--ink-2); text-align: center; }
.checkout__status:empty, .checkout__status[hidden] { display: none; }
.checkout__steps { display: grid; gap: 18px; margin: 6px 0 18px; padding-left: 20px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.checkout__steps b { color: var(--ink); }
.checkout__steps .btn { display: flex; width: fit-content; margin-top: 10px; background: var(--ink); color: #fff; }
.checkout__keep { font-size: 13.5px; color: var(--ink-2); margin-bottom: 12px; }
.checkout__keep code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); }
.checkout__done .link { font-size: 14px; color: var(--hue); }
.checkout__foot { margin-top: 12px; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
.checkout__foot a { color: var(--hue); }

/* openings: the homepage deals its apps out like a hand; OptiCord's
   window settles into place the way a call connects */
html.motion.intro-pending body[data-product="home"] .stack__card,
html.motion.intro-run:not(.intro-fan) body[data-product="home"] .stack__card { transform: translate3d(0, 34%, -300px) scale(.62); opacity: 0; filter: none; }
html.motion.intro-fan:not(.intro-done) body[data-product="home"] .stack__card[data-off="0"] { transition-delay: .1s; transition-duration: 1.4s, .9s, .9s; }
html.motion.intro-fan:not(.intro-done) body[data-product="home"] .stack__card[data-off="-1"] { transition-delay: .28s; }
html.motion.intro-fan:not(.intro-done) body[data-product="home"] .stack__card[data-off="1"] { transition-delay: .4s; }
html.motion.intro-pending body[data-product="cord"] .stack__card[data-off="0"],
html.motion.intro-run:not(.intro-fan) body[data-product="cord"] .stack__card[data-off="0"] { transform: translate3d(0, 0, 240px) scale(1.12); opacity: 0; filter: blur(18px); }
html.motion.intro-pending body[data-product="cord"] .stack__card:not([data-off="0"]),
html.motion.intro-run:not(.intro-fan) body[data-product="cord"] .stack__card:not([data-off="0"]) { opacity: 0; }
html.motion.intro-fan:not(.intro-done) body[data-product="cord"] .stack__card[data-off="0"] { transition-duration: 1.5s, 1s, 1.1s; }
html.motion.intro-fan:not(.intro-done) body[data-product="cord"] .stack__card:not([data-off="0"]) { transition-delay: .6s; }

/* the lit arcs are wider than any screen; they must not widen the page */
.day, .foot, .night { overflow-x: clip; }

/* ------------------------------------------------------------ round five */
/* feature icons: SF Symbols-style glyphs (Framework7 Icons, MIT), standing
   on their own in the page's colour, the way Apple's feature lists do */
.feat__i { display: block; width: 44px; height: 44px; margin: 0 auto 20px; color: var(--hue); transition: transform .5s var(--ease-out); }
.night .feat__i { color: var(--lux); }
.feat__i svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.feat:hover .feat__i { transform: translateY(-3px) scale(1.04); }

/* a film that opens out as it reaches the middle of the screen */
.feature .head { margin-bottom: 0; }
.expand { position: relative; max-width: var(--w-media); margin: clamp(56px, 6vw, 96px) auto 0; transform-origin: 50% 20%; }
.expand .plate { position: relative; z-index: 1; border-radius: 18px; }
.expand__glow { position: absolute; inset: -14% -10%; z-index: 0; pointer-events: none; background: radial-gradient(50% 50% at 50% 58%, rgba(var(--lux-rgb), .42), transparent 72%); filter: blur(34px); }

/* essentials: two night tiles on the daylight page, each holding something
   to play with — OptiDark's line to drag, OptiLoad's screens to flick */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px); max-width: var(--w-media); margin-inline: auto; }
.tile {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; min-height: clamp(620px, 52vw, 720px);
  padding: clamp(30px, 3.4vw, 48px); border-radius: 30px; color: var(--n-fg);
  background: radial-gradient(90% 60% at 50% 115%, rgba(var(--lux-rgb), .45), transparent 65%), radial-gradient(70% 50% at 0% 0%, rgba(var(--hue-rgb), .4), transparent 62%), linear-gradient(170deg, #121731, #070913 70%);
  box-shadow: 0 40px 90px -46px rgba(18, 22, 30, .7);
}
.tile::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .8; pointer-events: none;
  background-image: radial-gradient(1px 1px at 12% 20%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 34% 8%, rgba(255, 255, 255, .7) 50%, transparent 52%), radial-gradient(1.4px 1.4px at 71% 16%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 88% 34%, rgba(255, 255, 255, .6) 50%, transparent 52%), radial-gradient(1px 1px at 52% 28%, rgba(255, 255, 255, .5) 50%, transparent 52%), radial-gradient(1.2px 1.2px at 22% 44%, rgba(255, 255, 255, .6) 50%, transparent 52%);
}
.tile__copy { max-width: 470px; }
.tile__k { margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--lux); }
.tile h3 { font-family: "Funnel Heading", var(--fd); font-size: clamp(28px, 2.6vw, 38px); line-height: 1.06; font-weight: 620; letter-spacing: -.012em; color: #fff; }
.tile__copy p:not(.tile__k) { margin: 14px 0 16px; font-size: 17px; line-height: 1.5; color: var(--n-fg-2); }
.tile .link { color: var(--lux); font-weight: 600; }
.tile__media { flex: 1; display: flex; align-items: flex-end; justify-content: center; margin-top: 30px; min-height: 0; }
.tile__media .terminator { width: 100%; aspect-ratio: 4 / 3; border-radius: 18px; }
.tile__media .slides { width: 100%; }
@media (max-width: 960px) { .tiles { grid-template-columns: 1fr; } .tile { min-height: 0; } }

/* a slideshow of cut-out windows: no backing, each window whole */
.slides--contain { --slides-shadow: none; }
.slides--contain .slides__view { background: none; aspect-ratio: 1.2; overflow: visible; }
.slides--contain .slides__item img { object-fit: contain; object-position: center bottom; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55)); }
.tile .slides__label { color: var(--n-fg-2); }
.tile .slides__dots { background: rgba(255, 255, 255, .08); }
.tile .slides .dot { background: rgba(255, 255, 255, .3); }
.tile .slides .dot.is-current { background: rgba(255, 255, 255, .2); }
.tile .slides .dot__fill { background: #fff; }
.tile .slides__play { background: rgba(255, 255, 255, .1); color: #fff; }
.tile .slides__ctl { margin-top: 18px; }
.inside { max-width: 1080px; margin-inline: auto; }

/* the apps' planets: their names ride beside them in the opening */
.orbit-nodes { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.orbit-nodes.is-away { visibility: hidden; }
.orbit-node {
  position: absolute; top: 0; left: 0; pointer-events: auto; opacity: 0; will-change: transform;
  display: inline-flex; align-items: center; padding: 7px 13px; border-radius: 999px; white-space: nowrap;
  font-family: var(--ft); font-size: 13px; font-weight: 600; letter-spacing: -.005em; color: var(--n-fg); text-decoration: none;
  background: rgba(10, 12, 22, .66); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.orbit-node:hover, .orbit-node:focus-visible { background: #fff; color: var(--ink); }

/* the planets' names sit behind the opening's own windows */
.orbit-nodes { z-index: 1; }
body[data-product="home"] .hero > * { position: relative; z-index: 2; }

/* Chrome softens a clip-path's edge; when the arc is cut exactly where the
   daylight below begins, that soft pixel lets the dark sky through as a grey
   hairline. The arcs now overlap the daylight by a few pixels instead. */
.day::before, .foot::before { clip-path: inset(-400px 0 calc(50% - 4px) 0); }
.day::after { clip-path: inset(calc(50% - 4px) 0 -400px 0); }

/* the calls, pinned: one stretch of scroll per moment, each film rising
   into place as the one before lifts away */
.scrolly { position: relative; height: calc(var(--steps, 5) * 72vh + 100vh); margin-top: clamp(16px, 2vw, 32px); }
.scrolly__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-content: center; padding-top: calc(var(--lnav) + 16px); }
.scrolly .tabbed__stage { width: min(100% - 2 * var(--gutter), 1080px, 58svh * 1.587); }
.scrolly .tabbed__stage > figure { transform: translateY(14%) scale(.9); transition: opacity .7s var(--ease), transform 1.1s var(--ease-out), visibility 0s linear .7s; }
.scrolly .tabbed__stage > figure.is-past { transform: translateY(-12%) scale(.9); }
.scrolly .tabbed__stage > figure.is-active { transform: none; }
.scrolly .seg { margin-top: 22px; }
.scrolly .tabbed__notes { margin-top: 16px; }

/* a carousel that plays by itself: timed dots beside the paddles */
.cards__nav { align-items: center; }
.cards__dots { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px; margin-right: auto; border-radius: 999px; background: rgba(18, 22, 30, .05); }
.cards__dots .dot { position: relative; width: 8px; height: 8px; border-radius: 999px; background: rgba(18, 22, 30, .2); overflow: hidden; transition: width .4s var(--ease-out), background-color .3s var(--ease); }
.cards__dots .dot.is-current { width: 32px; background: rgba(18, 22, 30, .14); }
.cards__dots .dot__fill { position: absolute; inset: 0; border-radius: inherit; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
.cards__dots .dot.is-current:not(.is-timing) .dot__fill { transform: scaleX(1); }
.cards__dots .dot.is-timing .dot__fill { animation: slideFill var(--dwell, 4.2s) linear forwards; }
.night .cards__dots { background: rgba(255, 255, 255, .08); }
.night .cards__dots .dot { background: rgba(255, 255, 255, .3); }
.night .cards__dots .dot__fill { background: #fff; }
.round--play .i-play { display: none; }
.round--play[data-state="paused"] .i-play { display: block; }
.round--play[data-state="paused"] .i-pause { display: none; }
.round--play svg { fill: currentColor; stroke: none; }

/* inside the apps: two rows of screens drifting past in opposite
   directions. Pointing stops the drift; the screen under the pointer lifts
   and names its app while the rest dim; a click opens that app. */
.marquee { position: relative; overflow: hidden; padding-block: 30px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee__row + .marquee__row { margin-top: 24px; }
.marquee__track { display: flex; gap: 24px; width: max-content; animation: drift 80s linear infinite; animation-play-state: paused; }
.marquee__row--rev .marquee__track { animation-direction: reverse; animation-duration: 92s; }
.marquee.is-running .marquee__track { animation-play-state: running; }
.marquee.is-running:hover .marquee__track { animation-play-state: paused; }
@keyframes drift { to { transform: translateX(-50%); } }
.shot-card { position: relative; flex: none; display: block; width: clamp(280px, 29vw, 440px); aspect-ratio: 1.6; border-radius: 16px; overflow: hidden; isolation: isolate; box-shadow: 0 0 0 1px rgba(18, 22, 30, .06), 0 26px 50px -30px rgba(18, 22, 30, .55); transition: transform .7s var(--ease-out), box-shadow .7s var(--ease-out); }
.shot-card > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 1.4s var(--ease-out), filter .6s var(--ease); }
.shot-card__cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 46px 18px 16px; font-size: 14px; font-weight: 600; color: #fff; background: linear-gradient(180deg, transparent, rgba(7, 9, 19, .88)); transform: translateY(100%); transition: transform .55s var(--ease-out); }
.shot-card__cap b { margin-left: auto; font-weight: 500; color: rgba(255, 255, 255, .72); }
.shot-card__icon { width: 26px; height: 26px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .4)); }
.shot-card:hover, .shot-card:focus-visible { z-index: 2; transform: translateY(-10px) scale(1.05); box-shadow: 0 0 0 1px rgba(18, 22, 30, .06), 0 44px 80px -34px rgba(var(--hue-rgb), .65); outline: none; }
.shot-card:hover > img, .shot-card:focus-visible > img { transform: scale(1.06); }
.shot-card:hover .shot-card__cap, .shot-card:focus-visible .shot-card__cap { transform: none; }
.marquee:hover .shot-card:not(:hover) > img { filter: brightness(.82) saturate(.75); }
.marquee__hint { margin-top: 6px; text-align: center; font-size: 13px; color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .marquee { overflow-x: auto; } .marquee__track { animation: none; } }