/* Hyperlaunch's site — its own parts, on top of css/family.css (Hyper Island's canonical copy, unchanged, linked as
   css/family.scoped.css: type, buttons, chips, the nav on top, chapters, the bento and its six compositions, the dark
   chapter, privacy cards and the loud card, pricing, FAQ, the closing call, the footer).
   Here: the warm red accent and the loud card's colours; the echo (the sheet's grid of cards, out of focus); the blurry
   screen itself with the live Hyperlaunch on it (the simulator, sim/), seen through panes cut from the glass, and its
   light-theme glass; v2's poster parts (the hero, bleed/float/side panes, pieces, sequence, the cut poster, the maps,
   glyph cards, the search's chips) until each section has replaced them; the scene's grades.
   Every selector ends in :not(.hls-host *) (node tools/scope-css.mjs), so no page style reaches the simulator or a
   library widget that happens to share a class name. */

:root{
  --accent: #D63A26;
  --accent-2: #FF8A5C;          /* the ticks on the ink plan (light) */
  --on-accent: #FFFFFF;
  --focus: #D63A26;
  --accent-on-dark: #FF7A45;    /* the dark chapter */
  --on-accent-dark: #240800;
  --accent-deep: #C2321F;       /* the ticks on the light plan (dark) */
  --loud-bg: #FF7A45;
  --loud-ink: #240800;
  --loud-ink-2: #5A1A07;
  --r-pane: clamp(18px, 2vw, 26px);
  /* the blurry screen: the scene's frosted copy and the milky veil over it */
  --frost: url("../assets/scene/lake-frost.webp");
  --veil: linear-gradient(180deg, rgb(255 255 255 / .06) 0%, rgb(248 250 251 / .22) 45%, rgb(246 248 250 / .46) 100%);
  /* the words on a poster's sky (bleed, search) and beside a side pane: the mist's own colour */
  --sky-a: rgb(236 240 243 / .9);
  --sky-b: rgb(236 240 243 / .5);
  --sky-ink: #48515A;
  --side-a: rgb(234 238 241 / .94);
  --side-b: rgb(234 238 241 / .72);
  --side-ink: #3B434B;
  --tile: #8C9BA8;              /* the echo's quiet tiles */
  --tile-o: .5;
  --map-bg: #DCE2E7;
}
[data-theme="dark"]:not(.hls-host *){
  --accent: #FF7A45;
  --accent-2: #FF9A6E;
  --on-accent: #240800;
  --focus: #FF7A45;
  --frost: url("../assets/scene/lake-dark-frost.webp");
  --veil: linear-gradient(180deg, rgb(12 14 18 / .1) 0%, rgb(12 14 18 / .3) 45%, rgb(10 12 15 / .52) 100%);
  --sky-a: rgb(46 52 60 / .88);
  --sky-b: rgb(46 52 60 / .5);
  --sky-ink: #C3CAD1;
  --side-a: rgb(28 32 38 / .9);
  --side-b: rgb(28 32 38 / .66);
  --side-ink: #C4CBD2;
  --tile: #56636F;
  --tile-o: .55;
  --map-bg: #22272D;
}
/* the dusk posters (the developers' chapter) are dusk in either theme */
.pc--dusk:not(.hls-host *){
  --frost: url("../assets/scene/lake-dark-frost.webp");
  --veil: linear-gradient(180deg, rgb(12 14 18 / .1) 0%, rgb(12 14 18 / .3) 45%, rgb(10 12 15 / .52) 100%);
  --side-a: rgb(6 8 10 / .86);
  --side-b: rgb(6 8 10 / .56);
  --side-ink: #B9C1C8;
}

/* ───────────────────────── the echo: the sheet's grid of cards, out of focus ───────────────────────── */

/* Hanging from the top of the page over the hero (it fades out before the words) and standing at the foot of the
   closing call: the sheet's own grid of cards, a few in the accent, blurred and still. */
.echo:not(.hls-host *){ position: absolute; z-index: 0; right: 0; width: min(66vw, 940px); pointer-events: none; overflow: hidden; }
.echo--top:not(.hls-host *){ top: 0; height: clamp(110px, 11vw, 160px);
  -webkit-mask-image: linear-gradient(180deg, #000 12%, transparent 100%), linear-gradient(90deg, transparent 2%, #000 46%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, #000 12%, transparent 100%), linear-gradient(90deg, transparent 2%, #000 46%);
  mask-composite: intersect; }
.echo--bottom:not(.hls-host *){ bottom: 0; left: 0; width: auto; height: clamp(240px, 30vw, 400px);
  -webkit-mask-image: linear-gradient(0deg, #000 14%, transparent 94%), linear-gradient(90deg, transparent, #000 26%, #000 74%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(0deg, #000 14%, transparent 94%), linear-gradient(90deg, transparent, #000 26%, #000 74%, transparent);
  mask-composite: intersect; }
.echo__grid:not(.hls-host *){ position: absolute; display: grid; gap: clamp(14px, 1.7vw, 24px); filter: blur(clamp(10px, 1.2vw, 17px)); }
.echo--top .echo__grid:not(.hls-host *){ top: clamp(-60px, -4vw, -24px); right: clamp(-40px, -2vw, -10px); grid-template-columns: repeat(10, clamp(40px, 5vw, 70px)); }
.echo--bottom .echo__grid:not(.hls-host *){ bottom: clamp(-30px, -2vw, -10px); left: 50%; transform: translateX(-50%); grid-template-columns: repeat(16, clamp(40px, 5vw, 70px)); }
.echo__grid i:not(.hls-host *){ display: block; aspect-ratio: 1; border-radius: 28%; background: var(--tile); opacity: calc(var(--o, .5) * var(--tile-o)); }
.echo__grid i.a:not(.hls-host *){ background: var(--accent); opacity: .34; }
/* in the light theme the echo is greys only: the accent's red, blurred on white, read as salmon pink (critic #12) */
:root:not([data-theme="dark"]) .echo__grid i.a:not(.hls-host *){ background: var(--tile); opacity: calc(.78 * var(--tile-o)); }

/* ───────────────────────── the hero ───────────────────────── */

/* A compact head (the name and the line on the left, two lines and one call on the right), then the live Command
   centre on a blurry screen, wider than the words, so the app is in view in a 1440 × 800 window */
.hero__grid:not(.hls-host *){ display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); align-items: end; gap: 24px clamp(32px, 5vw, 72px); }
.hero__app:not(.hls-host *){ margin-bottom: 18px; }
.hero__app img:not(.hls-host *){ width: 40px; height: 40px; border-radius: 10px; }
.hero .h-hero:not(.hls-host *){ font-size: clamp(46px, 5.7vw, 82px); max-width: none; }
.hero__r .lead:not(.hls-host *){ margin-top: 0; max-width: 25em; }
.hero__r .row:not(.hls-host *){ margin-top: 22px; }
.hero__poster:not(.hls-host *){ margin: clamp(30px, 3.4vw, 48px) auto 0; width: min(100% - 48px, 1392px); }
.hposter:not(.hls-host *){
  --k: 1; --ax: 612; --ay: 0; --px: 50%; --py: clamp(28px, 3vw, 44px); --vis: 560;
  position: relative; overflow: clip; isolation: isolate;
  height: calc(var(--py) + var(--vis) * var(--k) * 1px);
  border-radius: var(--r-big);
  background: #9FB0BC;
}
[data-theme="dark"] .hposter:not(.hls-host *){ background: #2B3138; }
.hposter > .scene:not(.hls-host *), .pc > .scene:not(.hls-host *){ position: absolute; inset: 0; z-index: -2; display: block; }
.hposter > .scene img:not(.hls-host *), .pc > .scene img:not(.hls-host *){ width: 100%; height: 100%; object-fit: cover; object-position: var(--bgpos, 50% 50%); }
.hero__hint:not(.hls-host *){
  position: absolute; left: clamp(14px, 2vw, 26px); bottom: clamp(14px, 2vw, 24px); z-index: 7;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 38px; padding: 6px 15px;
  border-radius: 999px;
  background: rgb(10 16 22 / .58);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: #F4F7F9; font: 600 14px/1.2 var(--font);
  pointer-events: none;
  transition: opacity .2s;
}
.hero__hint .i:not(.hls-host *){ width: 16px; height: 16px; }
.hero__hint kbd:not(.hls-host *){ background: rgb(255 255 255 / .16); color: #fff; box-shadow: none; }
.hposter.is-used .hero__hint:not(.hls-host *){ opacity: 0; }
.hero__cap:not(.hls-host *){ display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 18px; font-size: 15px; line-height: 1.45; color: var(--text-2); }
.hero__cap b:not(.hls-host *){ color: var(--ink); font-weight: 650; }

/* ───────────────────────── the blurry screen, with the live Hyperlaunch on it ───────────────────────── */

/* The owner's rule (10 Nov): every Mac display is a slab of frosted glass in front of the scene. A slab is the
   simulator's whole virtual screen (--W × --H points) at a scale (--k), placed so a chosen point of it (--ax, --ay)
   sits at a point of its box (--px, --py): the hero's poster, or a pane cut from the glass (below). Through the glass:
   the poster's own scene, frosted, in the same box as the photograph behind it (js/site.js measures where the slab sits
   on it: --sx, --sy, --sw, --sh), so the blur lines up with the scene round the glass; a veil over it; then the
   simulator, which draws the notch and the menu bar. Never a filter, mask, clip-path, opacity < 1 or backdrop filter on
   an ancestor of the simulator: the sheet's glass would stop seeing what's behind it. */
.slab:not(.hls-host *){
  --W: 1224; --H: 795; --r: 18;
  position: absolute; z-index: 0;
  left: calc(var(--px, 0px) - var(--ax, 0) * var(--k, 1) * 1px);
  top: calc(var(--py, 0px) - var(--ay, 0) * var(--k, 1) * 1px);
  width: calc(var(--W) * var(--k, 1) * 1px);
  height: calc(var(--H) * var(--k, 1) * 1px);
  border-radius: calc(var(--r) * var(--k, 1) * 1px);
  overflow: hidden;
  isolation: isolate;
  background: #B9C3CB;
}
[data-theme="dark"] .slab:not(.hls-host *), .pc--dusk .slab:not(.hls-host *){ background: #262B31; }
.slab[data-sim="search"]:not(.hls-host *){ --H: 533; }
.slab[data-sim="native"]:not(.hls-host *), .slab[data-sim="something"]:not(.hls-host *){ --H: 700; }
.slab__wall:not(.hls-host *){
  position: absolute; z-index: 0;
  left: calc(-1 * var(--sx, 0px)); top: calc(-1 * var(--sy, 0px));
  width: var(--sw, 100%); height: var(--sh, 100%);
  background: var(--veil), var(--frost) var(--bgpos, 50% 50%) / cover no-repeat;
}
/* The light theme's glass (critic #1): on the bright scene a sheet of glass reads as dark glass, as macOS draws it over
   a light wallpaper, so a Liquid or Frosted slab's wall is the light frost under a 40 % rgb(16 22 28) veil (its words
   then read white at AA, its coloured labels at 3 : 1 or more). Dark & Sleek slabs keep the light frost (the sheet is
   black already), as does any slab marked .slab--bright (a poster about the surfaces themselves). data-surface is the
   spec's theme: HLPosters.add stamps it; put it in the HTML too on a slab in the first screen, so it paints right. */
:root:not([data-theme="dark"]) .slab[data-surface="liquid"]:not(.slab--bright) .slab__wall:not(.hls-host *),
:root:not([data-theme="dark"]) .slab[data-surface="frosted"]:not(.slab--bright) .slab__wall:not(.hls-host *){
  background: linear-gradient(rgb(16 22 28 / .4), rgb(16 22 28 / .4)), var(--frost) var(--bgpos, 50% 50%) / cover no-repeat;
}
:root:not([data-theme="dark"]) .slab[data-surface="liquid"]:not(.slab--bright):not(.hls-host *),
:root:not([data-theme="dark"]) .slab[data-surface="frosted"]:not(.slab--bright):not(.hls-host *){ background: #5E6770; }
.slab__sim:not(.hls-host *){ position: absolute; inset: 0; z-index: 2; }
/* the simulator's own tokens never inherit the page's (a .pc sets --h, which the library's buttons read) */
.slab__sim:not(.hls-host *){ --h: initial; --w: initial; --fc: initial; --card: initial; --soft: initial; --fill: initial; --bg: initial; --line: initial; --accent: initial; --on-accent: initial; --k: initial; --box: initial; }
/* a slab's facade: the picture of exactly what its simulator will show (tools/facade.mjs), at its crop (--fx, --fy,
   --fw, --fh: points of the virtual screen), until the simulator is in; then the live one takes its place */
.slab__facade:not(.hls-host *){
  position: absolute; z-index: 3; max-width: none; pointer-events: none;
  left: calc(var(--fx, 0) * var(--k, 1) * 1px); top: calc(var(--fy, 0) * var(--k, 1) * 1px);
  width: calc(var(--fw, var(--W)) * var(--k, 1) * 1px); height: calc(var(--fh, var(--H)) * var(--k, 1) * 1px);
}
.slab.is-ready > .slab__facade:not(.hls-host *){ visibility: hidden; }
/* a picture shows once it's in its state (a board, a menu, a typed search), never on its way there */
.js .slab:not(.is-ready) .slab__sim:not(.hls-host *){ visibility: hidden; }
.hposter > .slab:not(.hls-host *)::after{
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .55), inset 0 0 0 .5px rgb(255 255 255 / .32);
}
[data-theme="dark"] .hposter > .slab:not(.hls-host *)::after{ box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), inset 0 0 0 .5px rgb(255 255 255 / .12); }
/* edit mode's cards jiggle only while the visitor is on the poster (nothing moves by itself) */
.pc:not(:hover):not(:focus-within) .slab__sim.hls-host .hls-jiggle.is-jiggling{ animation-play-state: paused; }
/* the words and the scrims never take a click meant for the live sheet */
.pc--sim .pc__txt:not(.hls-host *){ pointer-events: none; }
.pc--sim .pc__txt a:not(.hls-host *){ pointer-events: auto; }
/* focus over a picture: a double ring (the accent, white, the accent), so it reads on the photograph's light and dark parts */
.tries button:focus-visible:not(.hls-host *), .slab__closed button:focus-visible:not(.hls-host *){ outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px var(--focus); }

/* closed (Esc, a click outside): say so, and offer the two keys as buttons */
.slab__closed:not(.hls-host *){
  position: absolute; left: 50%; top: 50%; z-index: 8;
  transform: translate(-50%, -50%);
  width: max-content; max-width: calc(100% - 24px);
  display: grid; justify-items: center; gap: 14px;
  padding: 22px 26px 20px;
  border-radius: 26px;
  color: var(--text); text-align: center;
  background: var(--glass);
  -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5);
  border: 1.5px solid var(--glass-line);
  box-shadow: var(--glass-shadow);
}
.slab__closed[hidden]:not(.hls-host *){ display: none; }
.slab__closed p:not(.hls-host *){ font-size: 15px; color: var(--text-2); }
.slab__closed .row:not(.hls-host *){ justify-content: center; gap: 8px; }
.slab__closed button:not(.hls-host *){
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px 0 8px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 14px/1 var(--font); color: var(--text); white-space: nowrap;
  background: var(--glass-pill-hover);
}
.slab__closed button:hover:not(.hls-host *){ background: var(--bg); }
.slab__closed .keys kbd:not(.hls-host *){ min-width: 22px; height: 22px; font-size: 11px; }
.slab__nojs:not(.hls-host *){ position: absolute; left: 50%; bottom: 24px; z-index: 8; transform: translateX(-50%); width: max-content; max-width: 90%; padding: 10px 16px; border-radius: 14px; font-size: 14px; color: #fff; text-align: center; background: rgb(0 0 0 / .4); }
.js .slab__nojs:not(.hls-host *){ display: none; }
.no-js .hero__hint:not(.hls-host *), .no-js .tries:not(.hls-host *){ display: none; }

/* ───────────────────────── panes: windows cut from the glass ───────────────────────── */

/* A pane is a window onto a slab (--box: its inset in the poster; --kd/--axd/--ayd/--pxd/--pyd: the crop; the same
   with -p on phones). Its glass edge catches the light; it stands above the poster's scrims, its words above it.
     bleed  the title on the sky top left, the pane running off the bottom right
     float  the scene fills the poster, a pane of one piece at 1.2–1.8× in its middle, the words on a short scrim
     side   the words in the left third, the pane running off the right
     frame, tile   panes in the flow of a flat card (a sequence, pieces) */
.pane:not(.hls-host *){
  --k: var(--kd, 1); --ax: var(--axd, 0); --ay: var(--ayd, 0); --px: var(--pxd, 0px); --py: var(--pyd, 0px);
  position: absolute; z-index: 1; inset: var(--box, 0);
  overflow: hidden; isolation: isolate;
  border-radius: var(--r-pane);
  box-shadow: 0 40px 80px -40px rgb(8 14 20 / .55), 0 12px 30px -18px rgb(8 14 20 / .3);
}
.pane:not(.hls-host *)::after{ content: ""; position: absolute; inset: 0; z-index: 7; pointer-events: none; border-radius: inherit; box-shadow: inset 0 1px 0 rgb(255 255 255 / .55), inset 0 0 0 .5px rgb(255 255 255 / .34); }
[data-theme="dark"] .pane:not(.hls-host *)::after, .pc--dusk .pane:not(.hls-host *)::after{ box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), inset 0 0 0 .5px rgb(255 255 255 / .14); }
.pane--bleed:not(.hls-host *){ border-radius: var(--r-pane) 0 0 0; }
.pane--side:not(.hls-host *){ border-radius: var(--r-pane) 0 0 var(--r-pane); }
.pane--frame:not(.hls-host *), .pane--tile:not(.hls-host *){ position: relative; inset: auto; width: 100%; box-shadow: 0 18px 36px -24px rgb(8 14 20 / .5); }
.pane--frame:not(.hls-host *){ aspect-ratio: 4 / 3; border-radius: 18px; }
.pane--tile:not(.hls-host *){ aspect-ratio: 7 / 5; border-radius: 16px; }

/* ───────────────────────── poster words ───────────────────────── */

.pc__txt:not(.hls-host *){ z-index: 3; }
.pc--wide .pc__txt h3:not(.hls-host *), .pc__h2:not(.hls-host *){ font: 700 clamp(30px, 3.2vw, 46px)/1.06 var(--font-d); letter-spacing: -.024em; text-wrap: balance; }
.pc--wide .pc__txt p:not(.hls-host *){ font-size: clamp(16px, 1.3vw, 18px); max-width: 34em; }
.pc__txt--flow:not(.hls-host *){ position: static; max-width: 36em; }
.pc__tag:not(.hls-host *){
  display: inline-flex; align-items: center; vertical-align: .3em;
  height: 24px; margin-left: 8px; padding: 0 10px;
  border-radius: 999px;
  background: rgb(255 255 255 / .18);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font: 600 12.5px/1 var(--font); letter-spacing: 0; color: #fff; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pc--wide .pc__tag:not(.hls-host *){ vertical-align: .55em; }
/* on the sky (bleed, search): the scene's misty sky at the top, its words in ink */
.pc--sky:not(.hls-host *){ color: var(--ink); }
.pc--sky .pc__txt p:not(.hls-host *){ color: var(--sky-ink, var(--text-2)); }
.pc--sky:not(.hls-host *)::after{ content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 0; height: var(--sky-h, 40%); background: linear-gradient(180deg, var(--sky-a) 0%, var(--sky-b) 58%, transparent 100%); pointer-events: none; }
.pc--sky .pc__tag:not(.hls-host *), .pc--side .pc__tag:not(.hls-host *){ background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
/* side: the words in the left third, on a scrim of the mist's colour */
.pc--side:not(.hls-host *){ color: var(--ink); }
.pc--side .pc__txt p:not(.hls-host *){ color: var(--side-ink, var(--text-2)); }
.pc--side:not(.hls-host *)::after{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; z-index: 0; width: calc(var(--side-w, 36%) + 16%); background: linear-gradient(90deg, var(--side-a) 0%, var(--side-a) 58%, var(--side-b) 80%, transparent 100%); pointer-events: none; }
.pc__txt--side:not(.hls-host *){ left: clamp(24px, 2.8vw, 38px); right: auto; width: calc(var(--side-w, 36%) - clamp(24px, 2.8vw, 38px) - 22px); top: 50%; bottom: auto; transform: translateY(-50%); }
.pc--wide .pc__txt--side:not(.hls-host *){ --side-w: 34%; }
.sample:not(.hls-host *){ display: inline-block; padding: 2px 6px 1px; border-radius: 5px; font: 700 10.5px/1.3 var(--mono); letter-spacing: .06em; vertical-align: .1em; color: inherit; box-shadow: inset 0 0 0 1px currentColor; opacity: .9; }

/* keys in running text */
.keys:not(.hls-host *){ display: inline-flex; gap: 3px; vertical-align: .08em; }
.keys kbd:not(.hls-host *){
  display: inline-grid; place-items: center;
  min-width: 1.75em; height: 1.75em; padding: 0 .4em;
  border-radius: .42em;
  font: 600 .74em/1 var(--font);
  color: var(--ink);
  background: var(--bg);
  box-shadow: 0 0 0 .5px var(--line-2), 0 1px 0 var(--line-2);
}
.pc--scrim .pc__txt .keys kbd:not(.hls-host *){ background: rgb(255 255 255 / .2); color: #fff; box-shadow: none; }

/* ───────────────────────── a full-bleed poster (wider than the column, as the hero's) ───────────────────────── */

.bleed:not(.hls-host *){ width: min(100% - 48px, 1392px); margin: clamp(44px, 5vw, 64px) auto 0; }
.bleed > .pc:not(.hls-host *){ border-radius: var(--r-big); }
.bento--after:not(.hls-host *){ margin-top: var(--gap); }

/* ───────────────────────── flat cards: pieces, a sequence, glyphs ───────────────────────── */

.pc--pieces:not(.hls-host *), .pc--seq:not(.hls-host *), .glyphcard:not(.hls-host *){ height: auto; }
.pc--seq:not(.hls-host *){ padding: clamp(28px, 3vw, 40px); }
.pc--seq .pc__txt h3:not(.hls-host *), .maps .pc__txt h3:not(.hls-host *), .icons .pc__txt h3:not(.hls-host *){ font: 700 clamp(26px, 2.6vw, 38px)/1.08 var(--font-d); letter-spacing: -.022em; color: var(--ink); text-wrap: balance; }
.pc--seq .pc__txt p:not(.hls-host *), .maps .pc__txt p:not(.hls-host *), .icons .pc__txt p:not(.hls-host *){ margin-top: 10px; font-size: 17px; line-height: 1.45; color: var(--text-2); }

/* a sequence: one move in three frames */
.seq:not(.hls-host *){ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); margin-top: clamp(24px, 2.6vw, 32px); }
.seq li:not(.hls-host *){ display: grid; gap: 14px; align-content: start; }
.seq p:not(.hls-host *){ font-size: 15px; line-height: 1.35; color: var(--text-2); }
.seq p b:not(.hls-host *){ display: block; margin-bottom: 2px; font: 700 19px/1.2 var(--font-d); letter-spacing: -.012em; color: var(--ink); }

/* pieces: each layout's map, from the simulator's own presets */
.maps:not(.hls-host *){ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); gap: 28px clamp(28px, 4vw, 60px); align-items: center; padding: clamp(28px, 3vw, 40px); }
.maps__grid:not(.hls-host *){ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 18px; }
.maps__grid li:not(.hls-host *){ display: grid; gap: 2px; align-content: start; font-size: 14px; line-height: 1.3; color: var(--text-2); }
.maps__grid b:not(.hls-host *){ margin-top: 10px; font: 650 15.5px/1.25 var(--font-d); letter-spacing: -.01em; color: var(--ink); }
.map:not(.hls-host *){
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 1224 / 795; border-radius: 12px;
  background: var(--frost) 50% 60% / cover no-repeat, var(--map-bg);
  box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .1);
}
.map svg:not(.hls-host *){ position: absolute; inset: 0; width: 100%; height: 100%; }

/* pieces: the four icon styles */
.icons:not(.hls-host *){ padding: clamp(26px, 2.8vw, 34px); }
.icons__grid:not(.hls-host *){ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; margin-top: 24px; }
.icons__grid li:not(.hls-host *){ display: grid; gap: 10px; }
.icons__grid b:not(.hls-host *){ font: 650 15.5px/1.2 var(--font-d); letter-spacing: -.01em; color: var(--ink); }

/* glyph cards */
.glyphcard:not(.hls-host *){ display: flex; flex-direction: column; gap: 24px; padding: clamp(28px, 3vw, 38px) clamp(24px, 2.8vw, 34px); }
.glyphcard__h:not(.hls-host *){ font: 700 clamp(23px, 2vw, 27px)/1.12 var(--font-d); letter-spacing: -.02em; color: var(--ink); }
.glyphs--col:not(.hls-host *){ grid-template-columns: 1fr; gap: 22px; }
/* a glyph card's rows share its height with the poster beside it */
.glyphcard .glyphs--col:not(.hls-host *){ flex: 1; align-content: space-evenly; }
.glyphs--col .glyph:not(.hls-host *){ grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 3px; align-items: start; }
.glyphs--col .glyph > :first-child:not(.hls-host *){ grid-row: span 2; }
.glyphs--col .glyph .i:not(.hls-host *){ width: 34px; height: 34px; margin-top: 2px; }
.glyphs--col .glyph b:not(.hls-host *){ font-size: 19px; }
.glyph__icon:not(.hls-host *){ width: 40px; height: 40px; border-radius: 10px; }
.glyph__sym:not(.hls-host *), .glyph__url:not(.hls-host *), .glyph__key:not(.hls-host *){ width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; }
.glyph__sym:not(.hls-host *){ background: var(--ink); color: var(--bg); }
.glyph__sym svg:not(.hls-host *){ width: 22px; height: 22px; }
.glyph__url:not(.hls-host *){ background: var(--bg); color: var(--accent); font: 700 15px/1 var(--mono); box-shadow: inset 0 0 0 1px var(--line); }
.glyph__key:not(.hls-host *){ background: linear-gradient(180deg, #FFFFFF, #F1F3F5); color: #1D2228; box-shadow: 0 0 0 .5px rgb(12 22 32 / .16), 0 1.5px 0 rgb(12 22 32 / .18); }
[data-theme="dark"] .glyph__key:not(.hls-host *){ background: linear-gradient(180deg, #34373D, #2A2D32); color: #E7EBEE; box-shadow: 0 0 0 .5px rgb(255 255 255 / .1), 0 1.5px 0 rgb(0 0 0 / .6); }
.glyph__key svg:not(.hls-host *){ width: 20px; height: auto; }
.glyph code:not(.hls-host *){ font-size: .92em; color: var(--ink); }
.more:not(.hls-host *){ display: inline-flex; align-items: center; gap: 6px; margin-top: auto; font: 600 16px/1 var(--font); color: var(--accent); }
.more .i:not(.hls-host *){ width: 16px; height: 16px; }
.more:hover:not(.hls-host *){ text-decoration: underline; text-underline-offset: 3px; }

/* ───────────────────────── the search: what you can type, as chips on the poster ───────────────────────── */

.pc--search:not(.hls-host *){ border-radius: var(--r-big); }
.tries:not(.hls-host *){ position: absolute; left: clamp(24px, 2.8vw, 38px); right: clamp(24px, 2.8vw, 38px); bottom: clamp(26px, 3vw, 38px); z-index: 3; display: flex; flex-wrap: wrap; gap: 10px; }
.tries button:not(.hls-host *){
  height: 42px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 15px/1 var(--mono); letter-spacing: -.01em; color: #10161C; white-space: nowrap;
  background: rgb(255 255 255 / .94);
  box-shadow: 0 8px 20px -12px rgb(0 0 0 / .4);
  transition: background-color .15s;
}
.tries button:hover:not(.hls-host *){ background: rgb(255 255 255 / .96); }
.tries button[aria-pressed="true"]:not(.hls-host *){ background: #10161C; color: #fff; }

/* ───────────────────────── the surfaces: one sheet cut into thirds, each third a surface ───────────────────────── */

/* Three simulators, the same layout at the same size, each in one surface, each seen through a third of the poster;
   the sheet runs on across the cuts, so its cards change material at each seam. */
.pc--cut:not(.hls-host *){ background: #6E7A84; }
[data-theme="dark"] .pc--cut:not(.hls-host *){ background: #262B31; }
.cut__stage:not(.hls-host *){ position: absolute; inset: 0; z-index: 0; overflow: clip; isolation: isolate; }
.cut__stage > .scene:not(.hls-host *){ position: absolute; inset: 0; z-index: -2; display: block; }
.cut__stage > .scene img:not(.hls-host *){ width: 100%; height: 100%; object-fit: cover; object-position: var(--bgpos, 50% 50%); }
.cut:not(.hls-host *){ position: absolute; top: 0; bottom: 0; left: calc(var(--i) * 100% / 3); width: calc(100% / 3 + 1px); overflow: hidden; }
.cut + .cut:not(.hls-host *)::before{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; z-index: 9; width: 1px; background: rgb(255 255 255 / .7); box-shadow: 0 0 0 .5px rgb(0 0 0 / .12); pointer-events: none; }
.cut .slab:not(.hls-host *){ --k: 1.2; --ax: 612; --px: calc(150% - var(--i) * 100%); --ay: 686; --py: 100%; }
.pc--cut:not(.hls-host *)::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 34%;
  background: linear-gradient(180deg, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / .5) 50%, rgb(0 0 0 / .66) 100%);
  pointer-events: none;
}
.cut__labels:not(.hls-host *){ position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cut__labels li:not(.hls-host *){ padding: 0 clamp(22px, 2.6vw, 34px) clamp(22px, 2.4vw, 30px); }
.cut__labels h4:not(.hls-host *){ font: 700 clamp(23px, 2vw, 27px)/1.12 var(--font-d); letter-spacing: -.02em; }
.cut__labels p:not(.hls-host *){ margin-top: 8px; font: 500 16px/1.4 var(--font); letter-spacing: -.004em; color: rgb(236 241 244 / .86); text-wrap: pretty; max-width: 22em; }

/* ───────────────────────── the scene's grades for a poster ───────────────────────── */

/* The photograph and its frosted copy are graded together, so the glass still lines up with the scene round it. Dawn
   (a little warmth) and mist (lighter, softer) in the light theme only, night (the developers' chapter) in either;
   never toward pink. */
.graded > .scene img:not(.hls-host *), .graded .slab__wall:not(.hls-host *){ filter: var(--grade, none); }
:root:not([data-theme="dark"]) .g-dawn{ --grade: sepia(.2) saturate(1.2) brightness(1.03); }
:root:not([data-theme="dark"]) .g-mist{ --grade: brightness(1.06) contrast(.9) saturate(.85); }
.g-night:not(.hls-host *){ --grade: brightness(.7) saturate(.85) contrast(1.05); }

/* ───────────────────────── the dark chapters, pricing, the closing call ───────────────────────── */

.ch--dark + .ch--dark:not(.hls-host *){ margin-top: 0; padding-top: 0; }
.ch--dark .pc--card:not(.hls-host *){ background: var(--card); }
.ch--dark .glyph .i:not(.hls-host *){ color: var(--accent); }
.ch--dark .pv .sample:not(.hls-host *){ color: var(--ink); }
.pv-grid--3:not(.hls-host *){ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pv-grid--3 .pv:not(.hls-host *){ min-height: 260px; }
.loud .i:not(.hls-host *){ color: var(--loud-ink); }
.h-ch--one:not(.hls-host *){ max-width: 17em; }
/* the founders' number reads at its sentence's own strength (no opacity on opacity) */
.price span span:not(.hls-host *){ opacity: 1; }
.cta__icon:not(.hls-host *){ width: clamp(88px, 9vw, 112px); height: auto; }
.cta .fine:not(.hls-host *){ max-width: 46em; }

/* ───────────────────────── motion ───────────────────────── */

@media (prefers-reduced-motion: reduce){
  .hero__hint:not(.hls-host *){ transition: none; }
}

/* ───────────────────────── widths ───────────────────────── */

@media (max-width: 1400px){ .hposter:not(.hls-host *){ --k: .92; } }
@media (max-width: 1280px){ .hposter:not(.hls-host *){ --k: .84; } }
@media (max-width: 1100px){
  .hposter:not(.hls-host *){ --k: .76; }
  .pv-grid--3:not(.hls-host *){ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px){
  .hero__grid:not(.hls-host *){ grid-template-columns: 1fr; align-items: start; }
  .hposter:not(.hls-host *){ --k: .68; }
  .maps:not(.hls-host *){ grid-template-columns: 1fr; }
  .cut__labels p:not(.hls-host *){ font-size: 15px; }
}
@media (max-width: 700px){
  .hero__poster:not(.hls-host *){ width: calc(100% - 32px); }
  .hposter:not(.hls-host *){ --k: .86; --ax: 14; --px: 0px; --py: 20px; --vis: 540; }
  .hero__hint:not(.hls-host *){ left: 12px; bottom: 12px; font-size: 13px; min-height: 34px; }
  .hero__hint .for-pointer:not(.hls-host *){ display: none; }
  .hero__hint .for-touch:not(.hls-host *){ display: inline; }
  .bleed:not(.hls-host *){ width: calc(100% - 32px); }
  /* phones: each pane its own crop, the app's text at 11 px or more (--kp ≥ .86) */
  .pane:not(.hls-host *){
    inset: var(--box-p, var(--box, 0));
    --k: var(--kp, var(--kd, 1)); --ax: var(--axp, var(--axd, 0)); --ay: var(--ayp, var(--ayd, 0));
    --px: var(--pxp, var(--pxd, 0px)); --py: var(--pyp, var(--pyd, 0px));
  }
  .pc__txt--side:not(.hls-host *){ left: 22px; right: 22px; width: auto; top: 24px; transform: none; }
  .pc--side:not(.hls-host *)::after{ width: 100%; height: 50%; bottom: auto; background: linear-gradient(180deg, var(--side-a) 0%, var(--side-b) 62%, transparent 100%); }
  .pc--sky:not(.hls-host *){ --sky-h: 46%; }
  .pc--scrim:not(.hls-host *)::after{ height: max(var(--scrim, 50%), 58%); }
  .seq:not(.hls-host *){ grid-template-columns: 1fr; gap: 22px; }
  .maps__grid:not(.hls-host *){ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .pv-grid--3:not(.hls-host *){ grid-template-columns: 1fr; }
  .pv-grid--3 .pv:not(.hls-host *){ min-height: 0; }
  .tries:not(.hls-host *){ gap: 8px; left: 22px; right: 22px; bottom: 24px; }
  .tries button:not(.hls-host *){ height: 38px; padding: 0 13px; font-size: 14px; }
  .pc--cut:not(.hls-host *){ height: auto; background: var(--card); color: var(--card-ink); }
  .pc--cut:not(.hls-host *)::after{ display: none; }
  .cut__stage:not(.hls-host *){ position: relative; height: 440px; }
  .cut .slab:not(.hls-host *){ --k: .86; --ay: 640; }
  .cut__labels:not(.hls-host *){ position: static; grid-template-columns: 1fr; gap: 16px; padding: 22px 22px 24px; }
  .cut__labels li:not(.hls-host *){ padding: 0; }
  .cut__labels h4:not(.hls-host *){ font-size: 21px; }
  .cut__labels p:not(.hls-host *){ margin-top: 4px; color: var(--text-2); font-size: 15.5px; }
}
@media (max-width: 420px){
  .maps__grid b:not(.hls-host *){ font-size: 14.5px; }
}