/* ==========================================================================
   ECLIPSE — redesigned product pages, design A.
   Cinematic and quiet: true black, the planet as the only light source,
   the app windows lit by it. One typeface (Instrument Sans) in two widths:
   condensed for headlines, normal for reading. Colour comes from each app's
   own icon and is spent sparingly: links, the active control, focus.
   Content sits on the sky, never in boxes; only controls are glass.
   ========================================================================== */

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  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: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  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 {
  --bg: #000;
  --fg: #f1f4f7;
  --fg-2: #a6abb3;
  --fg-3: #7c8188;
  --line: rgba(241, 244, 247, .14);
  --line-soft: rgba(241, 244, 247, .08);
  --glass: rgba(24, 26, 32, .58);
  --glass-hi: rgba(44, 47, 56, .72);
  --edge: rgba(255, 255, 255, .11);

  --f: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, 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);

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

  /* product light: overridden per app below */
  --lux: #c9d1da;
  --lux-rgb: 201, 209, 218;
  --alt: #8f97a3;
  --alt-rgb: 143, 151, 163;
  --deep: #1b2230;
}
/* Each app's light comes from its icon. */
body[data-product="mac"]    { --lux: #95beff; --lux-rgb: 149, 190, 255; --alt: #c9d1da; --alt-rgb: 201, 209, 218; --deep: #07348b; }
body[data-product="sound"]  { --lux: #fca676; --lux-rgb: 252, 166, 118; --alt: #8f8cff; --alt-rgb: 143, 140, 255; --deep: #6b2200; }
body[data-product="load"]   { --lux: #ef9ee3; --lux-rgb: 239, 158, 227; --alt: #8fa9d4; --alt-rgb: 143, 169, 212; --deep: #660b5f; }
body[data-product="tube"]   { --lux: #5ed7b5; --lux-rgb: 94, 215, 181; --alt: #8c7dff; --alt-rgb: 140, 125, 255; --deep: #004b38; }
body[data-product="extras"] { --lux: #82ccd7; --lux-rgb: 130, 204, 215; --alt: #c9d1da; --alt-rgb: 201, 209, 218; --deep: #004751; }
/* Headline ink: white that warms into the app's own colours towards the end
   of each line, taken from the app icon. */
body[data-product="mac"]    { --ink: linear-gradient(96deg, #f6f9ff 0%, #dbe7ff 38%, #9fc4ff 72%, #7d9eff 100%); }
body[data-product="sound"]  { --ink: linear-gradient(96deg, #fff8f2 0%, #ffdcc4 36%, #fca676 70%, #a59dff 100%); }
body[data-product="load"]   { --ink: linear-gradient(96deg, #fff5fd 0%, #f8d3f1 38%, #ef9ee3 72%, #9db3dc 100%); }
body[data-product="tube"]   { --ink: linear-gradient(96deg, #f2fffa 0%, #c2f2e2 38%, #5ed7b5 72%, #9f91ff 100%); }
body[data-product="extras"] { --ink: linear-gradient(96deg, #f3fcfd 0%, #c9eaf0 40%, #82ccd7 76%, #d6dde5 100%); }

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

/* -------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--bg);
  color-scheme: dark;
  -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(--bg);
  color: var(--fg);
  font-family: var(--f);
  font-size: 17px;
  line-height: 1.53;
  letter-spacing: -.005em;
  font-kerning: normal;
  -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), .34); color: #fff; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--lux); outline-offset: 3px; border-radius: 6px; }
[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: var(--fg); color: #000; font-weight: 600; transform: translateY(-160%);
  transition: transform .2s var(--ease);
}
.skip:focus-visible { transform: none; }

/* the sky: the WebGL planet sits behind everything */
/* the trackball listens on window and ignores presses on content, so the
   canvas itself never takes the pointer */
#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(0, 0, 0, .55), transparent 60%),
    linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .35));
}
/* lights down for reading: stage.js sets --dim from the section in view */
.veil::after {
  content: ""; position: absolute; inset: 0; background: #000;
  opacity: var(--dim, 0); transition: opacity 1.1s var(--ease);
}
body.no-webgl { background: radial-gradient(90% 60% at 50% 105%, rgba(var(--lux-rgb), .18), transparent 60%), #000; }
.page { position: relative; z-index: 1; }

/* --------------------------------------------------------------- typography */
/* Headlines use static cuts of Instrument Sans made from the variable font
   with overlapping outlines merged: at display sizes the variable outlines
   show seams where strokes overlap (the bowl of an a, the join of an M). */
@font-face { font-family: "Instrument Heading"; src: url("../fonts/instrument-sans-80-620-static.woff2") format("woff2"); font-weight: 610 700; font-stretch: 75% 82%; 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: "Instrument Heading"; src: url("../fonts/instrument-sans-84-620-static.woff2") format("woff2"); font-weight: 610 700; font-stretch: 82.5% 86%; 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: "Instrument Heading"; src: url("../fonts/instrument-sans-88-600-static.woff2") format("woff2"); font-weight: 400 609; font-stretch: 86.5% 100%; 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, .t-num {
  font-family: "Instrument Heading", var(--f);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-stretch: 80%;
  font-weight: 620;
  letter-spacing: -.012em;
  font-feature-settings: "ss01" 0;
  text-wrap: balance;
}
.t-hero { font-size: var(--h1, clamp(52px, 6.4vw, 100px)); line-height: .94; }
.t-xxl  { font-size: clamp(48px, 6.3vw, 96px);  line-height: .96; }
.t-xl   { font-size: clamp(40px, 4.8vw, 68px);  line-height: 1;   font-stretch: 84%; }
.t-l    { font-size: clamp(32px, 3.4vw, 48px);  line-height: 1.04; font-stretch: 88%; font-weight: 600; letter-spacing: -.008em; }
.t-m    { font-size: clamp(22px, 1.9vw, 28px);  line-height: 1.16; font-weight: 600; letter-spacing: -.012em; text-wrap: balance; }
.t-lead { font-size: clamp(19px, 1.55vw, 23px); line-height: 1.43; font-weight: 500; letter-spacing: -.012em; color: var(--fg-2); }
.t-lead b, .t-lead strong, .t-say b { color: var(--fg); font-weight: 600; }
.t-say  { font-size: clamp(24px, 2.5vw, 34px); line-height: 1.26; font-weight: 600; letter-spacing: -.018em; color: var(--fg-2); text-wrap: pretty; }
.t-body { font-size: 17px; line-height: 1.53; color: var(--fg-2); }
.t-small { font-size: 14px; line-height: 1.43; color: var(--fg-2); }
.t-micro { font-size: 12px; line-height: 1.34; color: var(--fg-3); letter-spacing: 0; }
.t-num  { font-variant-numeric: tabular-nums lining-nums; }
/* the gradient follows the words, not the column, so each headline is
   sized to its own text */
.t-hero, .t-xxl, .t-xl, .stat__v {
  background: var(--ink, none); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--fg);
}
.t-hero, .t-xxl, .t-xl { width: fit-content; max-width: 100%; }
.head.center > .t-xxl, .head.center > .t-xl, .say .t-xxl, .buy .t-xxl, .statement .t-xl { margin-inline: auto; }
.t-eyebrow {
  display: block;
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.008em;
  color: var(--lux);
  margin-bottom: 14px;
}
.t-eyebrow--quiet { color: var(--fg-2); }

.link {
  color: var(--lux);
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 4px;
  transition: opacity .2s var(--ease);
}
.link:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.link svg { width: 9px; height: 9px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.prose a { color: var(--lux); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(var(--lux-rgb), .45); }
.prose a:hover { text-decoration-color: var(--lux); }

/* ------------------------------------------------------------------ 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)); }
.wrap--wide { width: min(100% - 2 * var(--gutter), var(--w-wide)); }
.sec { padding-block: var(--sec); position: relative; }
.sec--tight { padding-block: calc(var(--sec) * .62); }
.sec--flush-top { padding-top: 0; }
.center { text-align: center; }
.head { max-width: 860px; margin-bottom: clamp(48px, 6vw, 88px); }
.head .t-lead { margin-top: 24px; max-width: 680px; }
.head.center { margin-inline: auto; }
.head.center .t-lead { margin-inline: auto; }

/* ----------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 22px; border-radius: 999px;
  background: var(--fg); color: #05060a;
  font-size: 16px; line-height: 1; font-weight: 600; letter-spacing: -.01em;
  white-space: nowrap;
  transition: background-color .25s var(--ease), transform .2s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover { background: #fff; box-shadow: 0 0 0 6px rgba(255, 255, 255, .08); }
.btn:active { transform: scale(.97); }
.btn--sm { min-height: 32px; padding: 7px 14px; font-size: 14px; }
.btn--glass {
  background: rgba(255, 255, 255, .08); color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--edge);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
}
.btn--glass:hover { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.btn--paypal { background: #ffc439; color: #111; }
.btn--paypal:hover { background: #f5b82e; box-shadow: none; }
.btn svg { width: 14px; height: 14px; }

.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
  box-shadow: inset 0 0 0 1px var(--edge), inset 0 1px 0 rgba(255, 255, 255, .06), 0 20px 50px -20px rgba(0, 0, 0, .7);
}

/* --------------------------------------------------------------- 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-weight: 600; font-size: 16px; letter-spacing: -.01em; color: var(--fg); }
.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(--fg-2); transition: color .2s var(--ease); }
.gbar__links a:hover, .gbar__links a[aria-current="page"] { color: var(--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(--fg); border-radius: 2px; }
@media (max-width: 860px) {
  .gbar__links { display: none; }
  .nav__burger { display: inline-flex; }
}

/* the mobile menu (driven by assets/opti.js) */
.menu {
  position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column; justify-content: center;
  padding: 80px var(--gutter) 40px; background: rgba(0, 0, 0, .86);
  -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;
}
.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-size: clamp(30px, 8vw, 44px); font-weight: 600; font-stretch: 84%; letter-spacing: -.01em; color: var(--fg-2); padding: 4px 0; }
.menu nav a[aria-current="page"], .menu nav a:hover { color: var(--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 */
.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;
}
.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);
}
.lnav__name { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; letter-spacing: -.012em; 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(--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(--fg); }
.lnav__end { display: inline-flex; align-items: center; gap: 12px; }
.lnav__price { font-size: 13.5px; color: var(--fg-2); white-space: nowrap; }
.lnav__toggle { display: none; width: 34px; height: 34px; border-radius: 999px; align-items: center; justify-content: center; background: rgba(255, 255, 255, .08); }
.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); }
@media (max-width: 900px) {
  .lnav__bar { grid-template-columns: 1fr auto; row-gap: 0; }
  .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(--line-soft); }
  .lnav.is-open .lnav__links { max-height: 420px; padding-top: 8px; }
  .lnav.is-open .lnav__bar { border-radius: 24px; }
}

/* -------------------------------------------------------------------- hero */
.hero {
  --h1: clamp(44px, min(5.5vw, 8.6svh), 88px);
  position: relative;
  min-height: max(100svh, 700px);
  display: grid;
  grid-template-rows: 1fr auto auto;
  padding: calc(var(--gbar) + 14px) var(--gutter) 36px;
  overflow: clip;
}
.hero__stage { display: grid; place-items: center; min-height: 0; }
.hero__ctl { display: flex; justify-content: center; margin: 16px 0 26px; }
.hero__foot {
  width: min(100%, var(--w-wide)); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 28px;
  position: relative;
}
.hero__foot::before {
  content: ""; position: absolute; inset: -60px -12vw -40px -12vw; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46% 100% at 20% 92%, rgba(0, 0, 0, .82), transparent 72%),
    radial-gradient(30% 80% at 88% 100%, rgba(0, 0, 0, .55), transparent 70%);
}
.hero__name { display: flex; align-items: center; gap: 12px; font-size: clamp(19px, 1.7vw, 24px); font-weight: 600; letter-spacing: -.012em; margin-bottom: 10px; }
.hero__name img { width: clamp(30px, 2.6vw, 38px); height: auto; border-radius: 9px; }
.hero h1 { max-width: 22ch; }

/* the platter: price and the way to buy, opening from its button */
.platter {
  display: inline-flex; align-items: center; gap: 22px;
  padding: 10px 10px 10px 24px; border-radius: 999px;
  --closed: 0px;
}
.platter__copy { font-size: 14px; line-height: 1.32; color: var(--fg-2); white-space: nowrap; }
.platter__copy strong { display: block; color: var(--fg); font-weight: 600; font-size: 15px; }

/* -------------------------------------------------------------------- stack */
.stack {
  --ar-box: 1.6;
  position: relative;
  /* fill what the copy and controls leave of the first screen */
  width: min(1100px, 86vw, calc((100svh - 230px - 1.88 * var(--h1)) * var(--ar-box)));
  min-width: min(560px, 88vw);
  aspect-ratio: var(--ar-box);
  container-type: size;
  perspective: 2400px;
}
.stack__card {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  transform-origin: 50% 100%;
  transition: transform 1s var(--ease-out), opacity .9s var(--ease), filter .9s var(--ease);
  will-change: transform, opacity;
}
.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: #07080c;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .08),
    0 2px 0 0 rgba(255, 255, 255, .05) inset,
    0 50px 110px -40px rgba(0, 0, 0, .95),
    0 30px 120px -50px rgba(var(--lux-rgb), .35);
}
.stack__media > img, .stack__media > video, .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 { filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .7)); border-radius: var(--rad, 14px); }

.stack__card[data-pos="0"] { transform: none; opacity: 1; z-index: 6; }
.stack__card[data-pos="1"] { transform: translate3d(0, -6.5%, -1px) scale(.93); opacity: .95; filter: brightness(.72) saturate(.9); z-index: 5; }
.stack__card[data-pos="2"] { transform: translate3d(0, -12%, -2px) scale(.865); opacity: .7; filter: brightness(.5) saturate(.8); z-index: 4; }
.stack__card[data-pos="3"] { transform: translate3d(0, -17%, -3px) scale(.80); opacity: .35; filter: brightness(.36) saturate(.7); z-index: 3; }
.stack__card:not([data-pos="0"]):not([data-pos="1"]):not([data-pos="2"]):not([data-pos="3"]) { transform: translate3d(0, -21%, -4px) scale(.74); opacity: 0; z-index: 1; }
.stack__card.is-leaving { transform: translate3d(0, 9%, 0) scale(1.06) !important; opacity: 0 !important; filter: blur(6px) !important; z-index: 7 !important; transition-duration: .75s, .6s, .6s; }
/* without script only the first card is shown */
html:not(.js) .stack__card:not(:first-child) { display: none; }

/* stack controls: named views, each with its own orbit timer */
.views { display: inline-flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.views::-webkit-scrollbar { display: none; }
.views__pick {
  --t: 0;
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 15px 0 12px; border-radius: 999px;
  font-size: 14px; font-weight: 500; color: var(--fg-2); white-space: nowrap;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.views__pick:hover { color: var(--fg); }
.views__pick[aria-pressed="true"] { background: rgba(255, 255, 255, .12); color: var(--fg); }
/* the orbit: a moon that travels its ring while the view is on screen */
.orbit { width: 14px; height: 14px; flex: none; }
.orbit circle { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1.5; }
.orbit .orbit__run { stroke: var(--lux); stroke-dasharray: 37.7; stroke-dashoffset: calc(37.7 - 37.7 * var(--t)); transform: rotate(-90deg); transform-origin: 50% 50%; opacity: 0; }
.views__pick[aria-pressed="true"] .orbit__run { opacity: 1; }
.views__play {
  width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; flex: none;
  color: var(--fg-2); transition: background-color .3s var(--ease), color .3s var(--ease);
}
.views__play:hover { background: rgba(255, 255, 255, .1); color: var(--fg); }
.views__play svg { width: 12px; height: 12px; fill: currentColor; }
[data-state="playing"] > .i-play, [data-state="paused"] > .i-pause { display: none; }

/* ---------------------------------------------------------------------- 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: var(--fg);
  background: rgba(16, 17, 22, .62); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 0 0 1px var(--edge);
  transition: background-color .25s var(--ease);
}
.film__sound:hover { background: rgba(30, 32, 40, .8); }
.film__sound[aria-pressed="true"] { background: rgba(var(--lux-rgb), .18); box-shadow: inset 0 0 0 1px rgba(var(--lux-rgb), .45); }
/* sound bars: still until sound is on */
.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); }
.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); } }
.bars i { transform-origin: 50% 100%; }
.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, 17, 22, .62); -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, 17, 22, .62); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px var(--edge); color: var(--fg);
}
.film__toggle svg { width: 12px; height: 12px; fill: currentColor; }
/* a volume slider drawn like OptiSound's own */
.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, .2) var(--level)); }
.range::-moz-range-track { height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .2); }
.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 */
.say { text-align: center; }
.say .t-say { max-width: 900px; margin-inline: auto; }
.stats {
  margin-top: clamp(64px, 8vw, 112px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px;
  text-align: center;
}
.stat__v { display: inline-block; font-size: clamp(40px, 4.4vw, 66px); line-height: 1.08; padding-bottom: .06em; white-space: nowrap; }
.stat__k { display: block; margin-top: 12px; font-size: 15px; color: var(--fg-2); }
@media (max-width: 734px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; } }

/* --------------------------------------------------------------- chapters */
.chapter__media { margin-top: clamp(48px, 6vw, 96px); }
.plate {
  position: relative; border-radius: var(--rad, 18px); overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 60px 140px -60px rgba(0, 0, 0, .95), 0 40px 160px -80px rgba(var(--lux-rgb), .45);
  background: #06070a;
}
.plate > img, .plate > video { width: 100%; height: auto; }
.plate--free { box-shadow: none; background: none; overflow: visible; }
.plate--free > img { filter: drop-shadow(0 50px 70px rgba(0, 0, 0, .75)); }
.plate .film__ui { left: 18px; right: 18px; bottom: 18px; }

/* ------------------------------------------------------------- viewer */
.viewer {
  display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px);
  align-items: center; min-height: min(760px, 86vh);
}
.viewer__rail { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.pill {
  display: grid; grid-template-columns: 24px 1fr; column-gap: 12px; align-items: start;
  max-width: 100%; text-align: left;
  padding: 17px 26px 17px 18px; border-radius: 30px;
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px var(--edge);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  transition: background-color .35s var(--ease), border-radius .45s var(--ease-out);
}
.pill:hover { background: rgba(255, 255, 255, .11); }
.pill__plus { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); margin-top: 1px; transition: transform .45s var(--ease-out), background-color .3s var(--ease), box-shadow .3s; }
.pill__plus svg { width: 10px; height: 10px; stroke: var(--fg); stroke-width: 2; fill: none; }
.pill__title { font-size: 18px; font-weight: 600; letter-spacing: -.012em; line-height: 24px; }
.pill__body {
  grid-column: 2; display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows .5s var(--ease-out), opacity .35s var(--ease), margin .5s var(--ease-out);
  color: var(--fg-2); font-size: 16px; line-height: 1.47;
}
.pill__body > span { overflow: hidden; }
.pill[aria-expanded="true"] { background: rgba(255, 255, 255, .1); border-radius: 26px; }
.pill[aria-expanded="true"] .pill__plus { transform: rotate(45deg); background: var(--fg); box-shadow: none; }
.pill[aria-expanded="true"] .pill__plus svg { stroke: #000; }
.pill[aria-expanded="true"] .pill__body { grid-template-rows: 1fr; opacity: 1; margin-top: 10px; }
.viewer__stage { position: relative; display: grid; align-items: center; justify-items: center; min-height: 520px; }
.viewer__stage > figure {
  grid-area: 1 / 1; width: 100%; display: grid; place-items: center;
  opacity: 0; transform: scale(.975); filter: blur(4px); visibility: hidden; pointer-events: none;
  transition: opacity .55s var(--ease), transform .8s var(--ease-out), filter .55s var(--ease), visibility 0s linear .55s;
}
.viewer__stage > figure.is-active { opacity: 1; transform: none; filter: none; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.viewer__stage .terminator { width: min(100%, 853px); }
.viewer__stage img, .viewer__stage video { border-radius: var(--rad, 14px); max-height: 640px; width: auto; max-width: 100%; }
/* a lazy picture is 0×0 until it lands; --ar (its width/height) gives it the
   size it will have, so the section does not grow under the reader */
.viewer__stage img[style*="--ar"] { width: min(100%, 640px * var(--ar)); }
.viewer__stage .shot { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 50px 120px -50px rgba(0, 0, 0, .95), 0 30px 140px -70px rgba(var(--lux-rgb), .5); }
@media (max-width: 1068px) {
  .viewer { grid-template-columns: 1fr; min-height: 0; }
  .viewer__stage { order: -1; min-height: 0; }
  .viewer__rail { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .viewer__rail::-webkit-scrollbar { display: none; }
  .pill { flex: none; padding: 10px 16px 10px 12px; }
  .pill__body { display: none; }
  .viewer__note { display: block; }
}
.viewer__note { display: none; margin-top: 18px; min-height: 4.5em; color: var(--fg-2); }

/* ----------------------------------------------------------------- gallery */
.gallery { position: relative; }
.gallery__track {
  display: flex; gap: 20px; 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));
  overscroll-behavior-x: contain;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__item { flex: 0 0 min(var(--w-media), 100% - 2 * var(--gutter)); scroll-snap-align: start; }
.gallery__frame {
  position: relative; aspect-ratio: 16 / 9.6; border-radius: 28px; overflow: hidden;
  background:
    radial-gradient(70% 70% at 50% 120%, rgba(var(--lux-rgb), .22), transparent 70%),
    radial-gradient(60% 50% at 85% -10%, rgba(var(--alt-rgb), .16), transparent 70%),
    #07080b;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  display: grid; place-items: end center;
}
.gallery__frame { padding: clamp(104px, 10vw, 150px) 6% clamp(30px, 3.6vw, 52px); place-items: center; }
.gallery__frame > img, .gallery__frame > video { position: relative; width: auto; height: auto; max-width: 100%; max-height: 100%; min-height: 0; object-fit: contain; margin: 0; border-radius: var(--rad, 12px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 90px -40px rgba(0, 0, 0, .95); }
.gallery__frame--center { place-items: center; }
.gallery__frame--center img, .gallery__frame--center video { border-radius: var(--rad, 12px); max-height: 82%; }
.gallery__cap { position: absolute; top: clamp(24px, 3.4vw, 46px); left: 0; right: 0; text-align: center; padding-inline: 8%; font-size: clamp(19px, 1.8vw, 26px); line-height: 1.22; font-weight: 600; letter-spacing: -.014em; color: var(--fg-2); text-wrap: balance; z-index: 2; }
.gallery__cap b { color: var(--fg); font-weight: 600; }
.gallery__ctl { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 28px; }
.dots { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 20px; border-radius: 999px; }
.dot { position: relative; width: 8px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .38); overflow: hidden; transition: width .4s var(--ease-out), background-color .3s var(--ease); }
.dot:hover { background: rgba(255, 255, 255, .55); }
.dot.is-current { width: 44px; background: rgba(255, 255, 255, .3); }
.dot__fill { position: absolute; inset: 0; border-radius: inherit; background: var(--fg); transform: scaleX(0); transform-origin: 0 50%; }
.dot.is-current:not(.is-timing) .dot__fill { transform: scaleX(1); }
.dot.is-timing .dot__fill { animation: fill var(--dwell, 6s) linear forwards; }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.round {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; flex: none;
  color: var(--fg); transition: background-color .25s var(--ease), opacity .25s var(--ease);
}
.round svg { width: 14px; height: 14px; fill: currentColor; }
.round:disabled { opacity: .35; cursor: default; }
.gallery__paddles { position: absolute; right: max(var(--gutter), calc((100% - var(--w-media)) / 2)); bottom: 0; display: flex; gap: 12px; }
.gallery__paddles .round { width: 40px; height: 40px; }
.gallery__paddles .round svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.2; }
@media (max-width: 734px) {
  .gallery__frame { aspect-ratio: 4 / 4.6; border-radius: 22px; }
  .gallery__frame { padding: 112px 5% 24px; }
  .gallery__paddles { display: none; }
}

/* -------------------------------------------------------------- feature list */
.feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 5vw, 72px) clamp(28px, 4vw, 64px); }
.feat { position: relative; }
.feat h3 { font-size: 21px; line-height: 1.24; font-weight: 600; letter-spacing: -.014em; margin-bottom: 8px; color: var(--fg); }
.feat p { color: var(--fg-2); font-size: 17px; line-height: 1.5; max-width: 34ch; }
@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; }
.compare table { width: 100%; border-collapse: collapse; min-width: 640px; }
.compare thead th { text-align: left; padding: 0 0 26px; font-size: clamp(21px, 2vw, 28px); font-weight: 600; letter-spacing: -.012em; vertical-align: bottom; }
.compare thead th.is-us { color: var(--fg); }
.compare thead th:not(.is-us) { color: var(--fg-3); }
.compare__app { display: inline-flex; align-items: center; gap: 14px; }
.compare__app img { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.compare tbody th { width: 20%; text-align: left; padding: 22px 24px 22px 0; font-size: 14px; font-weight: 500; color: var(--fg-3); vertical-align: top; }
.compare td { width: 40%; padding: 22px 24px 22px 0; font-size: 17px; line-height: 1.45; vertical-align: top; color: var(--fg-3); }
.compare td.is-us { color: var(--fg); }
.compare tbody tr { border-top: 1px solid var(--line-soft); }
.compare td.is-us::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; border-radius: 50%; background: var(--lux); box-shadow: 0 0 12px rgba(var(--lux-rgb), .8); transform: translateY(-1px); }
.compare__note { margin-top: 26px; font-size: 14px; color: var(--fg-3); }

/* ---------------------------------------------------------- alternatives */
.switch__tabs {
  display: flex; flex-wrap: nowrap; gap: 6px; margin-bottom: clamp(40px, 4.4vw, 60px);
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
}
.switch__tabs::-webkit-scrollbar { display: none; }
.switch__tabs [role="tab"] {
  flex: none; white-space: nowrap;
  height: 38px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--fg-2);
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--edge);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.switch__tabs [role="tab"]:hover { color: var(--fg); background: rgba(255, 255, 255, .1); }
.switch__tabs [role="tab"][aria-selected="true"] { background: var(--fg); color: #05060a; box-shadow: none; }
.switch__panels [role="tabpanel"] { max-width: 820px; }
.switch__panels h3 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; letter-spacing: -.016em; line-height: 1.16; margin-bottom: 16px; }
.switch__panels p { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.52; color: var(--fg-2); }
html:not(.js) .switch__panels [role="tabpanel"] + [role="tabpanel"], html.stage-late .switch:not(.is-ready) [role="tabpanel"] + [role="tabpanel"] { margin-top: 40px; }
html:not(.js) .switch__tabs, html.stage-late .switch:not(.is-ready) .switch__tabs { display: none; }
/* with scripts on, the first frame is already the one Switch() draws, so the
   page below does not drop by a screenful when stage.js boots (a reload lands
   where it was). stage-late (head script) brings the stacked fallback back if
   stage.js never arrives. */
html.js:not(.stage-late) .switch:not(.is-ready) [role="tabpanel"] + [role="tabpanel"] { display: none; }

/* --------------------------------------------------------------------- FAQ */
.faq { max-width: 980px; margin-inline: auto; border-bottom: 1px solid var(--line-soft); }
.faq details { border-top: 1px solid var(--line-soft); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 26px 0; font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; letter-spacing: -.012em; line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: #fff; }
.faq summary .chev { width: 14px; height: 14px; flex: none; stroke: var(--fg-2); fill: none; stroke-width: 2; transition: transform .35s var(--ease-out); }
.faq details[open] summary .chev { transform: rotate(180deg); }
.faq .faq__a { padding: 0 0 30px; max-width: 760px; color: var(--fg-2); font-size: 17px; line-height: 1.56; }
@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-bottom: calc(var(--sec) * 1.15); }
.buy__icon { width: clamp(96px, 9vw, 128px); height: auto; margin: 0 auto 30px; border-radius: 28%; filter: drop-shadow(0 30px 60px rgba(var(--lux-rgb), .35)); }
.buy__price { margin-top: 26px; display: flex; align-items: baseline; justify-content: center; gap: 12px; }
.buy__price .t-num { font-size: clamp(56px, 6vw, 88px); line-height: 1; }
.buy__price small { font-size: 17px; color: var(--fg-2); }
.buy .t-lead { max-width: 640px; margin: 22px auto 0; }
.checkout { margin: 44px auto 0; width: min(100%, 440px); border-radius: 28px; padding: 22px 22px 18px; text-align: left; }
.checkout__head { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--fg-2); margin-bottom: 16px; }
.checkout__head strong { color: var(--fg); font-weight: 600; }
.checkout__pp { min-height: 112px; display: grid; align-content: center; }
.checkout__pp .btn { width: 100%; }
/* PayPal's hosted button renders its product card into our container.
   The app icon above already shows the product, so its image goes; the
   rest takes the page's type and colour. Its own rules are ID-scoped,
   hence the !important. */
[data-paypal] [id^="carousel-container"] { display: none !important; }
[data-paypal] [id$="-wrapper"] { margin: 0 !important; }
[data-paypal] .item-header { margin: 0 0 2px !important; color: var(--fg); 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(--fg-3); font-size: 14px; }
[data-paypal] .input-label { color: var(--fg-2) !important; }
[data-paypal] select, [data-paypal] input:not([type="hidden"]) {
  background: rgba(255, 255, 255, .06) !important; color: var(--fg) !important;
  border: 0 !important; border-radius: 12px !important; box-shadow: inset 0 0 0 1px var(--edge);
  font-family: var(--f) !important;
}
.facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 28px; font-size: 14px; color: var(--fg-3); }
.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 */
/* The apps sit on a Dock. Icons grow under the pointer and name themselves;
   the app this page is about carries the running dot. */
.foot { position: relative; z-index: 1; padding: clamp(110px, 12vw, 160px) 0 calc(40px + env(safe-area-inset-bottom)); text-align: center; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .9) 36%); }
.foot__in { width: min(100% - 2 * var(--gutter), var(--w-wide)); margin-inline: auto; display: flex; flex-direction: column; align-items: center; }
.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: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .045));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .11), inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 0 1px rgba(0, 0, 0, .55), 0 34px 70px -28px rgba(0, 0, 0, .95);
  -webkit-backdrop-filter: blur(30px) saturate(160%); backdrop-filter: blur(30px) saturate(160%);
}
.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 10px rgba(0, 0, 0, .5)); }
.dock__home { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 23%; color: #fff; background: radial-gradient(120% 90% at 30% 8%, #30353f, #0b0c0f 72%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 6px 14px rgba(0, 0, 0, .5); }
.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(--fg-2); }
.dock__sep { width: 1px; align-self: stretch; margin: 4px calc(var(--gap) * .35); background: rgba(255, 255, 255, .16); }
.dock__label {
  position: absolute; left: 50%; bottom: calc(100% + 14px); padding: 5px 11px; border-radius: 8px;
  font-size: 13px; font-weight: 500; line-height: 1.3; white-space: nowrap; color: var(--fg);
  background: rgba(36, 38, 44, .94); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .18), 0 10px 26px -10px rgba(0, 0, 0, .8);
  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(--lux); 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-size: 15px; line-height: 1.5; color: var(--fg-2); }
.foot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 20px; max-width: 760px; }
.foot__links a, .foot__links button { font-size: 13.5px; color: var(--fg-3); transition: color .2s var(--ease); }
.foot__links a:hover, .foot__links button:hover { color: var(--fg); }
.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(--fg-3); }
.status { display: inline-flex; align-items: center; gap: 8px; }
.status i { width: 7px; height: 7px; border-radius: 50%; background: #5ed7b5; box-shadow: 0 0 10px rgba(94, 215, 181, .8); }

/* ------------------------------------------------------------------ modals
   Panels opened through optiModal (assets/opti.js): contact and the
   OptiLoad extension sheet. */
.modal {
  position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 20px;
  background: rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s .3s;
  --accent: var(--lux); --accent-ink: var(--lux);
}
.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: rgba(22, 24, 30, .92);
  box-shadow: inset 0 0 0 1px var(--edge), 0 40px 120px -30px rgba(0, 0, 0, .9);
  transform: translateY(14px) scale(.98); transition: transform .4s var(--ease-out);
}
.modal.is-open .modal__panel { transform: none; }
.modal__panel h2 { font-size: 30px; font-weight: 620; font-stretch: 84%; letter-spacing: -.01em; margin-bottom: 10px; }
.modal__panel p { color: var(--fg-2); }
.modal__close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .08); }
.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(--fg-2); }
.field input, .field textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--fg); background: rgba(255, 255, 255, .06);
  border: 0; border-radius: 14px; padding: 12px 14px; box-shadow: inset 0 0 0 1px var(--edge);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--lux); outline-offset: 0; }
.field__count { position: absolute; right: 12px; bottom: 10px; font-size: 12px; color: var(--fg-3); }
.btn--accent { width: 100%; margin-top: 6px; }
.form__note { margin-top: 14px; font-size: 13px; color: var(--fg-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: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--edge); transition: background-color .2s var(--ease); }
.picks a:hover { background: rgba(255, 255, 255, .1); }
.picks svg { width: 28px; height: 28px; flex: none; }
.picks b { display: block; font-weight: 600; }
.picks span span { font-size: 13px; color: var(--fg-2); }
.modal-open { overflow: hidden; }

/* ===================================================================== motion
   html.motion is set before first paint when Reduce Motion is off.
   html.intro-pending holds the hero in its opening pose until stage.js
   releases it step by step (intro-run → intro-copy → intro-ctl →
   intro-platter → intro-done). Without script or with Reduce Motion the
   page simply renders finished. */
html.motion.intro-pending .stack,
html.motion.intro-pending .hero__ctl,
html.motion.intro-pending .hero__name,
html.motion.intro-pending .hero h1,
html.motion.intro-pending .platter,
html.motion.intro-pending .gbar { opacity: 0; }

html.motion .gbar { transition: opacity .8s var(--ease) .1s; }
html.motion .stack { transition: transform 1.6s var(--ease-out), opacity 1.1s var(--ease), filter 1.4s var(--ease); }
html.motion.intro-pending .stack { transform: translateY(16vh) rotateX(16deg) scale(.9); filter: brightness(.15) blur(14px); transform-origin: 50% 100%; }
html.motion.intro-run .stack { transform: none; filter: none; opacity: 1; }

html.motion .hero__name { transition: opacity .7s var(--ease), transform .9s var(--ease-out); }
html.motion.intro-pending .hero__name, html.motion.intro-run:not(.intro-copy) .hero__name { opacity: 0; transform: translateY(8px); }

/* the light sweep: a terminator crossing the headline */
html.motion .sweep {
  padding-block: .1em .22em; margin-block: -.1em -.22em;
  -webkit-mask-image: linear-gradient(100deg, #000 42%, rgba(0, 0, 0, .25) 50%, transparent 58%);
  mask-image: linear-gradient(100deg, #000 42%, rgba(0, 0, 0, .25) 50%, transparent 58%);
  -webkit-mask-size: 280% 100%; mask-size: 280% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
  transition: -webkit-mask-position .95s var(--ease-io), mask-position .95s var(--ease-io);
}
html.motion.intro-copy .hero .sweep, html.motion .sweep.is-in { -webkit-mask-position: 0 0; mask-position: 0 0; }
html.motion .hero h1.sweep { opacity: 1; }
html.motion.intro-pending .hero h1.sweep { opacity: 0; }

html.motion .hero__ctl { transition: opacity .7s var(--ease); }
html.motion.intro-run:not(.intro-ctl) .hero__ctl { opacity: 0; }

/* the platter opens from its button */
html.motion .platter { transition: clip-path .9s var(--ease-out), opacity .5s var(--ease); clip-path: inset(0 0 0 0 round 999px); }
html.motion.intro-run:not(.intro-platter) .platter { opacity: 0; clip-path: inset(0 0 0 var(--closed) round 999px); }
html.motion .platter__copy { transition: opacity .6s var(--ease) .35s; }
html.motion.intro-run:not(.intro-platter) .platter__copy { opacity: 0; }

/* one reveal for media plates: they settle into the light */
html.motion [data-reveal].settle { opacity: 0; transform: translateY(40px) scale(.965); transition: opacity 1s var(--ease), transform 1.4s var(--ease-out); }
html.motion [data-reveal].settle.is-in { opacity: 1; transform: none; }
html.motion [data-reveal].fade { opacity: 0; transition: opacity 1s var(--ease); }
html.motion [data-reveal].fade.is-in { opacity: 1; }

@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 { min-height: 0; grid-template-rows: auto auto auto; padding-top: calc(var(--gbar) + 26px); padding-bottom: 40px; }
  .stack { width: 100%; min-width: 0; }
  .hero__ctl { margin: 16px calc(var(--gutter) * -1) 26px; justify-content: flex-start; padding-inline: var(--gutter); overflow-x: auto; }
  .views { overflow: visible; }
  .hero__foot { grid-template-columns: 1fr; text-align: left; gap: 26px; }
  .platter { width: 100%; justify-content: space-between; }
  .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; }
  .compare table { min-width: 0; }
  .compare thead th { font-size: 19px; }
  .compare tbody th { display: block; width: auto; padding: 18px 0 2px; }
  .compare tbody tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .compare tbody th { grid-column: 1 / -1; }
  .compare td { width: auto; padding: 6px 0 18px; font-size: 15px; }
  .compare thead tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .compare thead th:first-child { display: none; }
}

/* =================================================================== chapters
   Components the product chapters share: a copy-and-media split, a list of
   lit points, OptiDark's terminator, OptiLoad's orbit of sites and its
   segment bars, a terminal, and a line that translates itself. */

/* ------------------------------------------------------------------ split */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 104px); align-items: center; }
.split--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split--flip .split__copy { order: 2; }
.split__copy .t-lead { margin-top: 22px; }
.split__copy .cta-row { margin-top: 30px; }
.split__media { position: relative; min-width: 0; }
.split__media--portrait { max-width: 460px; justify-self: center; width: 100%; }
@media (max-width: 1068px) {
  .split, .split--flip { grid-template-columns: 1fr; }
  .split--flip .split__copy { order: 0; }
}

/* ------------------------------------------------------------------ points */
.points { display: grid; gap: 22px; margin-top: 34px; }
.points li { position: relative; padding-left: 30px; font-size: 17px; line-height: 1.52; color: var(--fg-2); max-width: 58ch; }
.points li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--lux); box-shadow: 0 0 14px rgba(var(--lux-rgb), .85); }
.points strong { color: var(--fg); font-weight: 600; }
.points--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; }
@media (max-width: 860px) { .points--wide { grid-template-columns: 1fr; } }

.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(--fg-3); }
.feats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1200px) { .feats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .feats--4 { grid-template-columns: 1fr; } }

/* ----------------------------------------------------- picks (on the page) */
.picks--inline { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.picks--inline a { min-width: 230px; }

/* --------------------------------------------------------------- terminator
   Day on one side, night on the other: drag the line between them to see a
   page before OptiDark and after it. The range input is the control. */
.terminator {
  --x: 50%;
  position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden;
  background: #0b0c10; touch-action: pan-y; isolation: isolate;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 60px 140px -60px rgba(0, 0, 0, .95), 0 40px 160px -80px rgba(var(--lux-rgb), .5);
}
.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: rgba(16, 17, 22, .66); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 8px 24px rgba(0, 0, 0, .5);
}
.terminator__knob svg { width: 20px; height: 20px; fill: none; stroke: #fff; 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(--lux); 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;
  background: rgba(16, 17, 22, .62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); transition: opacity .3s var(--ease);
}
.terminator__tag--off { left: 14px; }
.terminator__tag--on { right: 14px; color: #fff; }
.terminator.is-left .terminator__tag--off { opacity: 0; }
.terminator.is-right .terminator__tag--on { opacity: 0; }

/* ------------------------------------------------------------------ orbits
   OptiLoad at the centre, the sites people ask about in orbit around it. */
.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; margin: 0; padding: 0; list-style: none; transform: translate(-50%, -50%); border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); }
.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(54 * var(--u)); height: calc(54 * var(--u)); min-width: 34px; min-height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(24, 26, 32, .72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 10px 30px -10px rgba(0, 0, 0, .8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.orbits__mark svg { width: 52%; height: 52%; }
.orbits__mark span { font-size: 12.5px; font-weight: 500; color: var(--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-size: clamp(19px, 1.6vw, 23px); font-weight: 600; color: var(--fg-2); }
@media (max-width: 734px) { .orbits__mark span { display: none; } }

/* --------------------------------------------------------------- segments
   One file as one stream, then the same file as many segments. */
.segs { display: grid; gap: 28px; 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(--fg-2); }
.segs__label strong { display: block; color: var(--fg); font-size: 17px; font-weight: 600; }
.segs__bar { position: relative; height: 26px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); display: grid; grid-template-columns: repeat(var(--n, 1), 1fr); gap: 2px; padding: 3px; }
.segs__bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, rgba(var(--lux-rgb), .6), var(--lux)); transform: scaleX(0); transform-origin: 0 50%; }
.segs__bar--one i { border-radius: 999px; background: linear-gradient(90deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, .55)); }
.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: 16px; overflow: hidden; background: rgba(10, 11, 14, .92); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 50px 120px -50px rgba(0, 0, 0, .95), 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; }
.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, .18); }
.term__bar span { margin-left: 10px; font-size: 12px; color: var(--fg-3); font-family: var(--f); }
.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
   A line that walks through a few languages once, then rests. */
.babel { display: block; min-height: 1.3em; font-size: clamp(17px, 1.45vw, 21px); font-weight: 600; color: var(--lux); 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(--fg); background: rgba(255, 255, 255, .07); 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(255, 255, 255, .13); }
.tools svg { width: 22px; height: 22px; fill: none; stroke: var(--lux); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* the free hero: media and copy share the first screen without a stack */
.hero--free .hero__stage { padding-top: 8px; }
.hero--free .terminator { width: min(980px, 86vw, calc((100svh - 260px - 1.88 * var(--h1)) * 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, .9), 0 0 0 1px rgba(255, 255, 255, .1); }
.plate .film__ui { pointer-events: none; }
.plate--loop video { display: block; width: 100%; height: auto; }
.statement { text-align: center; }
.statement__i { width: 56px; height: 56px; margin: 0 auto 26px; color: var(--lux); }
.statement__i svg { width: 56px; height: 56px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.statement .t-lead { max-width: 640px; margin: 22px auto 0; }
.lnav__name img[src$=".svg"] { border-radius: 7px; }
.compare__caption { margin: 0 0 18px; font-size: 15px; color: var(--fg-2); }

.picks svg { color: var(--lux); }

/* a cut-out panel (transparent around its own rounded shape) takes a shadow
   that follows that shape instead of a rectangle */
.viewer__stage .shot.shot--free { box-shadow: none; border-radius: 0; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .7)) drop-shadow(0 24px 90px rgba(var(--lux-rgb), .28)); }

/* panels cut out of their wallpaper float alone: the windows stacked
   behind would otherwise show through the gaps between them */
.stack:has(.stack__card[data-pos="0"] .stack__media--cutout) .stack__card:not([data-pos="0"]) { opacity: 0; }

/* ---------------------------------------------------------------- cut-outs
   Screenshots cut along the app's own outline (transparent outside its
   rounded corners). They get no frame, no CSS corner and no background: the
   shadow follows the window itself, so nothing shows around it. */
img.cut {
  border-radius: 0 !important; box-shadow: none !important; background: none !important;
  filter: drop-shadow(0 30px 46px rgba(0, 0, 0, .62)) drop-shadow(0 0 1px rgba(255, 255, 255, .05));
}
.stack__media--free > img.cut { filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .7)); }
.gallery__frame img.cut { margin: 0; }

/* ---------------------------------------------------------- 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); }

/* ------------------------------------------------------------ round four */
/* The sweep's mask comes off once it has run, so headlines render as plain
   text instead of staying on a masked, composited layer. */
html.motion .sweep.is-done { -webkit-mask-image: none; mask-image: none; }

/* 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 */
.slides { --slides-rad: 16px; }
.slides__label { color: var(--fg-2); }
.slides__dots { background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px var(--edge); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.slides__play { background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px var(--edge); }
.slides__play svg { width: 12px; height: 12px; fill: currentColor; }

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

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

/* the features beside a picture stand exactly as tall as the picture */
@media (min-width: 1069px) {
  .viewer { align-items: start; min-height: 0; }
  .viewer__rail { align-items: stretch; justify-content: space-between; min-height: var(--media-h, auto); transition: min-height .6s var(--ease-out); }
  .viewer__stage { align-items: start; min-height: 0; }
  .viewer__stage > figure { place-items: start center; }
}

/* gallery: OptiCord's geometry. Words on the left, the window large on the
   right, turned slightly away and running off the card's edge. */
.gallery__frame, .gallery__frame--center {
  height: clamp(520px, 72svh, 720px); aspect-ratio: auto; padding: 0 0 0 clamp(36px, 4vw, 64px);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); align-items: center; place-items: normal; align-content: center;
  perspective: 1600px; perspective-origin: 0% 45%;
}
.gallery__cap { position: relative; top: auto; left: auto; right: auto; padding: 0; max-width: 410px; text-align: left; font-size: 19px; line-height: 1.47; font-weight: 500; letter-spacing: -.008em; color: var(--fg-2); }
.gallery__cap b { display: block; margin-bottom: 18px; font-family: "Instrument Heading", var(--f); font-size: clamp(32px, 3.1vw, 46px); line-height: 1.02; font-weight: 620; font-stretch: 84%; letter-spacing: -.008em; color: var(--fg); }
.gallery__frame > img, .gallery__frame > video, .gallery__frame--center > img {
  justify-self: start; align-self: center; width: 114%; max-width: none; max-height: none; height: auto; margin: 0 0 0 2%;
  border-radius: var(--rad, 12px); transform-origin: 0% 50%; transform: rotateY(-9deg) rotateX(3deg);
  transition: transform 1.4s var(--ease-out);
}
.gallery__frame:hover > img { transform: rotateY(-5deg) rotateX(1.5deg); }
.gallery__frame img.cut { margin: 0 0 0 2%; }
@media (max-width: 1068px) {
  .gallery__frame, .gallery__frame--center { height: auto; grid-template-columns: 1fr; padding: 34px 26px 0; row-gap: 28px; overflow: hidden; }
  .gallery__frame > img, .gallery__frame--center > img { width: 108%; transform: rotateY(-6deg) rotateX(2deg); margin-bottom: -8%; }
  .gallery__cap { font-size: 17px; }
}

/* 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); }

/* light and dark: the reading sections sit on graphite, so the page
   alternates between open sky and solid ground */
.band { position: relative; background: linear-gradient(180deg, rgba(11, 12, 15, 0), #0b0c0f 150px, #0b0c0f calc(100% - 150px), rgba(11, 12, 15, 0)); }

/* OptiMac's hero as a rail: the windows sit side by side and slide along,
   one card at a time, on their own or under a swipe, drag or click */
.stack--rail { perspective: none; }
.stack--rail .stack__card { transform-origin: 50% 50%; transition: transform 1.1s var(--ease-out), opacity .9s var(--ease), filter .9s var(--ease); }
.stack--rail .stack__card[data-off="0"] { transform: none; opacity: 1; filter: none; z-index: 6; }
.stack--rail .stack__card[data-off="1"] { transform: translate3d(88%, 0, 0) scale(.7); opacity: .5; filter: brightness(.6) saturate(.85); z-index: 5; cursor: pointer; }
.stack--rail .stack__card[data-off="-1"] { transform: translate3d(-88%, 0, 0) scale(.7); opacity: .5; filter: brightness(.6) saturate(.85); z-index: 5; cursor: pointer; }
.stack--rail .stack__card[data-off="2"] { transform: translate3d(158%, 0, 0) scale(.52); opacity: 0; z-index: 4; }
.stack--rail .stack__card[data-off="-2"] { transform: translate3d(-158%, 0, 0) scale(.52); opacity: 0; z-index: 4; }
.stack--rail .stack__card.is-leaving { opacity: .5 !important; filter: brightness(.6) !important; z-index: 5 !important; transition-duration: 1.1s, .9s, .9s !important; }
.stack--rail .stack__card.is-leaving[data-off="1"] { transform: translate3d(88%, 0, 0) scale(.7) !important; }
.stack--rail .stack__card.is-leaving[data-off="-1"] { transform: translate3d(-88%, 0, 0) scale(.7) !important; }
.stack.stack--rail:has(.stack__card[data-pos="0"] .stack__media--cutout) .stack__card[data-off="1"],
.stack.stack--rail:has(.stack__card[data-pos="0"] .stack__media--cutout) .stack__card[data-off="-1"] { opacity: .5; }
.hero:has(.stack--rail) { overflow: clip; }
@media (max-width: 734px) { .stack--rail .stack__card[data-off="1"], .stack--rail .stack__card[data-off="-1"] { opacity: .25; } }