/* Built by tools/assemble.mjs from css/sections/*.css: edit those, then run it. */
/* ▸ 10-hero.css */
/* css/sections/10-hero.css: L-1 · the hero and the signature scene (#top). Every class and id here starts with .v3-hero-.

   The header stacked (the line, two lines, one call), then the scene: a sticky stage holding one blurry screen in
   front of the lake. js/sections/10-hero.js picks the state from the scroll and writes it as data-state on the section
   (closed, half, tq, full) and .is-end; everything below is what each state looks like and the app's own motion
   between them (sim/NOTES-core.md "Motion from the app"): the slide on the open spring (0.42, 0.86), the close on
   0.26 s cubic-bezier(0.4, 0, 0.9, 0.6), the resize on easeInOut 0.32 s, the backdrop's 22 % dim, and each size's cards
   building in as the app's Reveal does (opacity and an 8-pt rise, spring 0.42 / 0.9). Transforms and opacity only.
   Inside the screen everything is in the simulator's points (1224 × 795) under one scale, --k. Class selectors only:
   the slab holds the live simulator, which an element selector here would style too. */

.v3-hero{
  --v3-open: linear(0, 0.0371, 0.1253, 0.238, 0.3579, 0.4737, 0.5793, 0.6715, 0.7493, 0.8132, 0.8643, 0.9043, 0.9348, 0.9576, 0.9742, 0.9859, 0.9939, 0.9992, 1.0023, 1.0041, 1.0049, 1.005, 1.0047, 1.0043, 1.0037, 1.0031, 1.0025, 1.002, 1.0015, 1);
  --v3-reveal: linear(0, 0.0376, 0.126, 0.2379, 0.3557, 0.4689, 0.5715, 0.6609, 0.7364, 0.7986, 0.8487, 0.8884, 0.9192, 0.9427, 0.9604, 0.9734, 0.9829, 0.9895, 0.9942, 0.9972, 0.9992, 1.0004, 1.0011, 1.0014, 1.0015, 1.0015, 1.0013, 1);
  --v3-close: cubic-bezier(.4, 0, .9, .6);
  --v3-resize: cubic-bezier(.42, 0, .58, 1);
  --v3-pin: 76px;
  --v3-w: min(100% - 48px, 1392px);
  position: relative; isolation: isolate;
  padding-top: clamp(80px, 6.1vw, 88px);
}

/* ───────── the header, stacked ───────── */
.v3-hero-head{ position: relative; z-index: 1; }
.v3-hero .v3-hero-h{ font-size: clamp(42px, 4.86vw, 70px); max-width: none; }   /* (family.scoped.css's rules weigh 0,2,0) */
.v3-hero .v3-hero-lead{ margin-top: 14px; max-width: 34em; }
.v3-hero .v3-hero-row{ margin-top: 20px; }

/* ───────── the scene: a tall box, its stage sticky ───────── */
.v3-hero-scene{ position: relative; height: 220vh; margin-top: 20px; }
.v3-hero-stage{ position: sticky; top: var(--v3-pin); height: calc(100vh - var(--v3-pin) - 12px); display: flex; flex-direction: column; }
.v3-hero-fig{ display: flex; flex-direction: column; flex: 1; min-height: 0; }
.v3-hero-poster{
  position: relative; flex: 1; min-height: 0;
  width: var(--v3-w); margin: 0 auto;
  border-radius: var(--r-big);
  overflow: clip; isolation: isolate;
  background: #9FB0BC;
}
[data-theme="dark"] .v3-hero-poster{ background: #2B3138; }
/* the world: the photograph and the screen together, so a camera move keeps the frost lined up with the lake */
.v3-hero-world{ position: absolute; inset: 0; transform-origin: var(--v3ox, 50%) var(--v3oy, 0px); }
.v3-hero-photo{ position: absolute; left: -12%; right: -12%; top: -10%; bottom: -30%; z-index: -2; display: block; }
.v3-hero-photo > img{ width: 100%; height: 100%; object-fit: cover; object-position: var(--bgpos, 50% 50%); }

/* the screen (a slab: css/site.css draws it, js/site.js lines its frost up with the photograph) */
.v3-hero-slab{ --k: var(--v3k, 1); --ax: 612; --px: 50%; --ay: 0; --py: var(--v3py, 20px); }
.v3-hero-slab::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"] .v3-hero-slab::after{ box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), inset 0 0 0 .5px rgb(255 255 255 / .12); }

/* ───────── the simulator's pictures, in its points ───────── */
.v3-hero-pts{ position: absolute; left: 0; top: 0; z-index: 1; width: 1224px; height: 795px; transform: scale(var(--k)); transform-origin: 0 0; pointer-events: none; }
.v3-hero-dim{ position: absolute; inset: 0; background: rgb(0 0 0 / .22); opacity: 0; transition: opacity .22s ease-out; }
.v3-hero-sheet{
  position: absolute; left: 0; top: 0; width: 1224px; height: 795px;
  transform: translate3d(0, -438px, 0);                         /* off its edge: Half's height + 40 */
  transition: transform .26s var(--v3-close);
  will-change: transform;
}
/* the sheet's surface, Dark & Sleek (sim.css): black, a 0.5-pt hairline at 9 %; a tall box whose foot is the free edge */
.v3-hero-body{
  position: absolute; left: 0; top: -805px; width: 1224px; height: 1600px;
  background: #000; border-radius: 0 0 32px 32px;
  box-shadow: inset 0 0 0 .5px rgb(255 255 255 / .09);
  transform: translate3d(0, -397px, 0);                          /* its foot at 398: Half */
  transition: transform .32s var(--v3-resize), border-radius .32s var(--v3-resize), opacity .32s var(--v3-resize);
}
.v3-hero-c{
  position: absolute; left: 0; top: 0; width: 1224px; height: auto; max-width: none;
  opacity: 0; transform: translate3d(0, 8px, 0);
  transition: opacity .12s ease-out, transform 0s linear .12s;
  will-change: opacity, transform;
}
.v3-hero-c--warm{ opacity: .004; transition: none; }
.v3-hero-bar{ position: absolute; left: 0; top: 0; width: 1224px; height: 33px; max-width: none; transition: opacity .1s linear; }
.v3-hero-bar--dark{ opacity: 0; }

/* open (Half, ¾, Full): the sheet in place on the app's open spring, the dim in over 0.30 s */
[data-state="half"] .v3-hero-sheet, [data-state="tq"] .v3-hero-sheet, [data-state="full"] .v3-hero-sheet{ transform: none; transition: transform 575ms var(--v3-open); }
[data-state="half"] .v3-hero-dim, [data-state="tq"] .v3-hero-dim{ opacity: 1; transition: opacity .3s ease-out; }
[data-state="full"] .v3-hero-dim{ transition: opacity .32s var(--v3-resize); }
/* the free edge: ¾ at 596 pt with 44-pt corners; Full square, the sheet's own 82 % black and its wallpaper's dim */
[data-state="tq"] .v3-hero-body{ transform: translate3d(0, -199px, 0); border-radius: 0 0 44px 44px; }
[data-state="full"] .v3-hero-body{ transform: none; border-radius: 0; opacity: .876; }
/* each size's cards build in where they sit; the last size's leave at once */
[data-state="half"] .v3-hero-c--half, [data-state="tq"] .v3-hero-c--tq, [data-state="full"] .v3-hero-c--full{
  opacity: 1; transform: none;
  transition: opacity 542ms var(--v3-reveal) 40ms, transform 542ms var(--v3-reveal) 40ms;
}
/* closing: Half's cards ride the sheet out, then reset for the next build-in */
[data-state="closed"] .v3-hero-c--half{ transition: opacity 0s linear .26s, transform 0s linear .26s; }
/* the menu bar's ink: dark on the bright frost when nothing lies under it, light over the sheet */
[data-theme="light"] [data-state="closed"] .v3-hero-bar--dark{ opacity: 1; transition: opacity .1s linear .18s; }
[data-theme="light"] [data-state="closed"] .v3-hero-bar--light{ opacity: 0; transition: opacity .1s linear .18s; }

/* the camera: on a short window, Full pulls back with the resize so the whole screen shows */
.v3-hero-world{ transition: transform .32s var(--v3-resize); }
[data-state="full"] .v3-hero-world{ transform: scale(var(--v3cam, 1)); }

/* a jump (a chapter link, a reload, Home or End): the state at once */
.v3-hero.is-snap :is(.v3-hero-sheet, .v3-hero-body, .v3-hero-c, .v3-hero-dim, .v3-hero-bar, .v3-hero-world){ transition: none !important; }

/* ───────── the live Command centre (facade first) ───────── */
.v3-hero-slab .slab__sim{ visibility: hidden; }
/* mounted and ready but not shown yet: drawn at a trace of opacity, so showing it costs no first raster */
.v3-hero-slab.is-ready .slab__sim{ visibility: visible; opacity: .002; }
.v3-hero.is-live .v3-hero-slab.is-ready .slab__sim{ opacity: 1; }
.v3-hero.is-live .v3-hero-pts{ visibility: hidden; }
/* the hero's Tab stop: a real search field laid over the sheet's own at Full; the live field takes over once it runs */
.v3-hero-q{
  position: absolute; z-index: 3;
  left: calc(76px * var(--k)); top: calc(66px * var(--k)); width: calc(826px * var(--k)); height: calc(48px * var(--k));
  margin: 0; padding: 0; border: 0; border-radius: 999px;
  background: transparent; color: transparent; caret-color: transparent;
  font: 500 15px/1 var(--font);
  -webkit-appearance: none; appearance: none; outline: none;
  pointer-events: none;
}
.v3-hero-q::-webkit-search-cancel-button{ -webkit-appearance: none; }
.v3-hero.is-end .v3-hero-q{ pointer-events: auto; cursor: text; }
.v3-hero.is-live .v3-hero-q{ pointer-events: none; }
.v3-hero-q:focus-visible{ box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--focus); }
.v3-hero:not(.is-end) .v3-hero-q:focus-visible{ box-shadow: none; }

/* ───────── the caption under the poster: the sizes, and the live hint at the end ───────── */
.v3-hero-cap{
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: var(--v3-w); height: 46px; margin: 0 auto; padding: 0 clamp(8px, 1.4vw, 20px);
  font: 500 15px/1.2 var(--font); color: var(--text-2);
}
.v3-hero-steps{ display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.v3-hero-steps b{ color: var(--ink); font-weight: 650; margin-right: 8px; }
.v3-hero-step{ padding: 3px 9px; border-radius: 999px; color: var(--text-2); transition: color .2s, background-color .2s; }
[data-state="half"] .v3-hero-step--half, [data-state="tq"] .v3-hero-step--tq, [data-state="full"] .v3-hero-step--full{ color: var(--ink); background: var(--soft); }
.v3-hero-hint{ display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; opacity: 0; transition: opacity .3s ease; }
.v3-hero-hint .i{ width: 16px; height: 16px; }
.v3-hero-hint kbd{
  display: inline-grid; place-items: center; min-width: 2.1em; height: 1.6em; padding: 0 .45em; border-radius: .4em;
  font: 600 .8em/1 var(--font); color: var(--ink); background: var(--bg); box-shadow: 0 0 0 .5px var(--line-2), 0 1px 0 var(--line-2);
}
.v3-hero.is-end .v3-hero-hint{ opacity: 1; }
.v3-hero.is-used .v3-hero-hint{ opacity: 0; }
.v3-hero-for-touch{ display: none; }
@media (hover: none) and (pointer: coarse){ .v3-hero-for-keys{ display: none; } .v3-hero-for-touch{ display: inline; } }

/* ───────── phones: the sheet at Half, large enough to read, and a pan across it ───────── */
@media (max-width: 720px){
  .v3-hero{ --v3-w: calc(100% - 32px); padding-top: 80px; }
  .v3-hero .v3-hero-h{ font-size: clamp(40px, 11.6vw, 52px); }
  .v3-hero .v3-hero-lead{ margin-top: 12px; }
  .v3-hero .v3-hero-row{ margin-top: 18px; }
  .v3-hero-scene{ height: 150vh; margin-top: 20px; }
  /* a shorter stage, centred under the nav: Half's sheet and a little of the desktop below it */
  .v3-hero-stage{ top: max(var(--v3-pin), calc((100svh - 600px) / 2 + 20px)); height: min(100svh - var(--v3-pin) - 12px, 600px); }
  .v3-hero-poster{ border-radius: 30px; }
  .v3-hero-world{ right: auto; width: calc(1224px * var(--v3k, 1.06) + 32px); transition: none; will-change: transform; }
  .v3-hero-photo{ inset: 0; }
  .v3-hero-slab{ --ax: 0; --px: 16px; }
  /* phones end at Half, so no step pill says more than the poster does; the hint takes a line of its own only under ~340 px */
  .v3-hero-step{ display: none; }
  .v3-hero-steps b{ margin-right: 0; }
  /* the Tab stop over Half's search field (phones end at Half) */
  .v3-hero-q{ left: calc(60px * var(--k)); top: calc(54px * var(--k)); width: calc(874px * var(--k)); height: calc(40px * var(--k)); }
  .v3-hero-cap{ flex-wrap: wrap; row-gap: 2px; height: auto; min-height: 42px; font-size: 14px; padding: 6px; }
}

/* ───────── no script (or the motion kit never came): the end state, still ───────── */
.no-js .v3-hero-scene, .hf-fallback .v3-hero-scene{ height: auto; }
.no-js .v3-hero-stage, .hf-fallback .v3-hero-stage{ position: static; height: auto; }
.no-js .v3-hero-poster, .hf-fallback .v3-hero-poster{ flex: none; height: calc(795px * var(--v3k, 1) + 40px); }
.no-js .v3-hero-sheet, .hf-fallback .v3-hero-sheet{ transform: none; }
.no-js .v3-hero-body, .hf-fallback .v3-hero-body{ transform: none; border-radius: 0; opacity: .876; }
.no-js .v3-hero-c--full, .hf-fallback .v3-hero-c--full{ opacity: 1; transform: none; }
.no-js .v3-hero-q, .no-js .v3-hero-hint, .no-js .v3-hero-steps, .hf-fallback .v3-hero-q, .hf-fallback .v3-hero-hint{ display: none; }

/* ───────── Reduce Motion: no scene; three stills, Half, ¾ and Full (the script builds them) ───────── */
@media (prefers-reduced-motion: reduce){
  .v3-hero-scene{ height: auto; }
  .v3-hero-stage{ position: static; height: auto; display: grid; gap: 28px; }
  .v3-hero-fig{ flex: none; }
  .v3-hero-poster{ flex: none; height: var(--v3h, 560px); }
  .v3-hero-hint{ opacity: 1; }
}

/* ▸ 20-best.css */
/* css/sections/20-best.css: L-2 · the best of it (#best). Every class and id here starts with .v3-best-.
   Class selectors only: the posters hold the simulator, and an element selector would reach into it.
   Five posters on the bento: the six layouts (pieces), Dashboard (float), Hyper Widgets (side), search (bleed, the
   moment), Control Centre (float). A pane's crop is set here per poster: --kd (the scale), --axd/--ayd (the point of the
   1224 × 795 screen at the pane's top left); the same ending in p on phones (≤ 700 px). */

.v3-best-defs{ position: absolute; width: 0; height: 0; overflow: hidden; }

/* ───────── the words on a poster ───────── */
.v3-best-txt{ position: absolute; z-index: 3; max-width: 34em; pointer-events: none; }
.v3-best-txt a{ pointer-events: auto; }
.v3-best-h3{ font: 700 clamp(28px, 2.35vw, 34px)/1.07 var(--font-d); letter-spacing: -.022em; text-wrap: balance; color: inherit; }
.s12 .v3-best-h3{ font-size: clamp(32px, 3.2vw, 46px); line-height: 1.04; letter-spacing: -.026em; }
.v3-best-p{ margin-top: 10px; font: 500 17px/1.42 var(--font); letter-spacing: -.006em; text-wrap: pretty; max-width: 31em; }
.s12 .v3-best-p{ font-size: 18px; }
.v3-best-tag{
  display: inline-flex; align-items: center; vertical-align: .28em;
  height: 26px; margin-left: 8px; padding: 0 11px; border-radius: 999px;
  font: 600 13px/1 var(--font); letter-spacing: 0; font-variant-numeric: tabular-nums; white-space: nowrap;
  background: rgb(8 12 16 / .46); color: #fff;
}
.v3-best-keys{ display: inline-flex; gap: 3px; vertical-align: .06em; }
.v3-best-keys kbd{
  display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 .35em; border-radius: .4em;
  font: 600 .78em/1 var(--font); color: var(--ink); background: var(--bg); box-shadow: 0 0 0 .5px var(--line-2), 0 1px 0 var(--line-2);
}

/* ───────── poster shells ───────── */
.pc.v3-best-pc{ position: relative; height: auto; overflow: clip; isolation: isolate; }
.pc.v3-best-pc.pc--sim{ height: var(--v3-best-h, 600px); }
.v3-best-pc > .scene{ position: absolute; inset: 0; z-index: -2; display: block; }
.v3-best-pc > .scene img{ width: 100%; height: 100%; object-fit: cover; object-position: var(--bgpos, 50% 50%); }
.v3-best-pc .pane{ inset: auto; }

/* float: the scene fills it, one piece of the app floats in its middle, the words on a short scrim at the foot */
.pc.v3-best-float{ color: #fff; }
.v3-best-float::after{
  content: ""; position: absolute; inset: auto 0 0; z-index: 0; height: var(--v3-best-scrim, 46%); pointer-events: none;
  background: linear-gradient(180deg, rgb(6 10 14 / 0), rgb(6 10 14 / .5) 46%, rgb(6 10 14 / .74));
}
.v3-best-txt--foot{ left: clamp(24px, 2.8vw, 40px); right: clamp(24px, 2.8vw, 40px); bottom: clamp(24px, 2.6vw, 36px); }
.v3-best-float .v3-best-p{ color: rgb(240 244 247 / .9); }

/* bleed: the words on the sky at the top left, the app running off the right and the foot */
.pc.v3-best-bleed{ color: var(--ink); }
.v3-best-bleed::after{
  content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 0; height: 46%; pointer-events: none;
  background: linear-gradient(180deg, var(--sky-a) 0%, var(--sky-b) 56%, transparent 100%);
}
.v3-best-txt--top{ left: clamp(24px, 2.8vw, 44px); top: clamp(26px, 3vw, 44px); }
.v3-best-bleed .v3-best-p{ color: var(--sky-ink); }
.v3-best-bleed .pane, .v3-best-side .pane{ border-radius: var(--r-pane) 0 0 0; }

/* side: the words in the left third on the mist, the app running off the right and the foot */
.pc.v3-best-side{ color: var(--ink); }
.v3-best-side::after{
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; z-index: 0; width: 58%; pointer-events: none;
  background: linear-gradient(90deg, var(--side-a) 0%, var(--side-a) 50%, var(--side-b) 74%, transparent 100%);
}
.v3-best-txt--side{ left: clamp(24px, 2.8vw, 40px); width: calc(37% - clamp(24px, 2.8vw, 40px) - 18px); top: 50%; transform: translateY(-50%); }
.v3-best-side .v3-best-h3{ font-size: clamp(26px, 2.1vw, 31px); }
.v3-best-side .v3-best-p{ color: var(--side-ink); }
.v3-best-side .v3-best-tag, .v3-best-bleed .v3-best-tag{ background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); }

/* ───────── 1 · the six layouts (pieces) ───────── */
.pc.v3-best-layouts{
  display: grid; grid-template-columns: minmax(250px, 26%) minmax(0, 1fr); gap: clamp(28px, 3.4vw, 52px); align-items: center;
  padding: clamp(28px, 3.4vw, 48px);
}
.v3-best-txt--flow{ position: static; max-width: 22em; pointer-events: auto; }
.v3-best-layouts .v3-best-p{ color: var(--text-2); }
.v3-best-maps{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 2.4vw, 34px) clamp(14px, 1.7vw, 24px); }
.v3-best-map{ margin: 0; min-width: 0; }
.v3-best-scr{
  position: relative; aspect-ratio: 1224 / 795; container-type: inline-size; overflow: clip;
  border-radius: calc(26 * 100cqw / 1224);
  background: linear-gradient(180deg, #2D343C, #15181C 80%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06), 0 18px 32px -24px rgb(8 14 20 / .55);
}
[data-theme="dark"] .v3-best-scr{ background: linear-gradient(180deg, #30373F, #191C21 80%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1), 0 18px 32px -24px rgb(0 0 0 / .8); }
.v3-best-scr > i{ position: absolute; display: block; }
.v3-best-sheet{ background: rgb(255 255 255 / .085); box-shadow: inset 0 0 0 calc(2 * 100cqw / 1224) rgb(255 255 255 / .12); }
.v3-best-sheet.is-top{ border-radius: 0 0 calc(40 * 100cqw / 1224) calc(40 * 100cqw / 1224); }
.v3-best-sheet.is-bottom{ border-radius: calc(40 * 100cqw / 1224) calc(40 * 100cqw / 1224) 0 0; }
.v3-best-field{ border-radius: 999px; background: rgb(255 255 255 / .12); }
.v3-best-chip{ border-radius: 999px; background: rgb(255 255 255 / .08); }
.v3-best-t{
  display: grid !important; place-items: center;
  border-radius: calc(var(--r, 24) * 100cqw / 1224);
  background: linear-gradient(180deg, color-mix(in srgb, var(--a) 80%, transparent), color-mix(in srgb, var(--b) 72%, transparent));
  box-shadow: inset 0 calc(1.5 * 100cqw / 1224) 0 rgb(255 255 255 / .22);
  color: var(--c, #fff);
}
.v3-best-t.is-glass{ background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 calc(1.5 * 100cqw / 1224) rgb(255 255 255 / .1); }
.v3-best-t svg{ width: calc(var(--g) * 100cqw / 1224); height: calc(var(--g) * 100cqw / 1224); }
.v3-best-ic{ border-radius: 23%; background: url("../assets/best/apps.webp") 0 0 / 800% auto no-repeat; }
.v3-best-bar{ left: 0; top: 0; right: 0; height: calc(33 * 100cqw / 1224); background: rgb(0 0 0 / .24); }
.v3-best-notch{ left: calc(512 * 100cqw / 1224); top: 0; width: calc(200 * 100cqw / 1224); height: calc(33 * 100cqw / 1224); border-radius: 0 0 calc(14 * 100cqw / 1224) calc(14 * 100cqw / 1224); background: #000; }
.v3-best-map figcaption{ display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 7px; align-items: center; margin-top: 13px; }
.v3-best-map figcaption svg{ width: 15px; height: 15px; color: var(--text-2); }
.v3-best-map figcaption b{ font: 650 16px/1.25 var(--font-d); letter-spacing: -.01em; color: var(--ink); }
.v3-best-map figcaption span{ grid-column: 1 / -1; margin-top: 2px; font: 500 14.5px/1.35 var(--font); color: var(--text-2); }

/* The widths the posters have (the column is 1220 px from a 1340-px window, the window less 120 px below it): the
   Dashboard and widgets posters share a row (s5, s7) down to 1181 px and take a row each below that; each pane's scale
   steps with its poster's width, so the app is never cut by accident and its text stays at 11 px or more on phones. */
.v3-best-pc .pane, .v3-best-pc .slab{ overflow: clip; }      /* a pane never scrolls (scrollIntoView inside the app) */

/* ───────── 2 · Dashboard: the smart stack, floating (1.2–1.4×) ───────── */
.v3-best-dash{ --v3-best-h: 600px; --v3-best-scrim: 40%; }
.v3-best-dash .pane{ left: calc(50% - 199px); top: 64px; width: 398px; height: 294px; border-radius: 29px; --kd: 1.2; --axd: 55; --ayd: 114; }

/* ───────── 3 · Hyper Widgets: a board at 1.0×, off the right and the foot ───────── */
.v3-best-widgets{ --v3-best-h: 600px; }
.v3-best-widgets .pane{ left: 37%; top: 52px; right: 0; bottom: 0; --kd: 1; --axd: 39; --ayd: 138; }

/* ───────── 4 · search as you type: 1.3×, off the right and the foot ───────── */
.v3-best-search{ --v3-best-h: 680px; }
.v3-best-search .pane{ left: clamp(24px, 4vw, 56px); top: 200px; right: 0; bottom: 0; --kd: 1.3; --axd: 12; --ayd: 50; }
/* the moment's track: the poster's whole pass through the window, from a screen above it to a screen below (HF.scene) */
.v3-best-track{ position: absolute; left: 0; top: -100vh; width: 1px; height: calc(100% + 200vh); visibility: hidden; pointer-events: none; }

/* ───────── 5 · Control Centre, floating at 1.8× ───────── */
.v3-best-control{ --v3-best-h: 720px; --v3-best-scrim: 34%; }
.v3-best-control .pane{ left: calc(50% - 470px); top: 60px; width: 940px; height: 470px; border-radius: 58px; --kd: 1.8; --axd: 47; --ayd: 106; }

/* ───────── widths ───────── */
@media (max-width: 1339px){
  .v3-best-dash .pane{ left: calc(50% - 174.5px); width: 349px; height: 257px; border-radius: 26px; --kd: 1.05; }
  .v3-best-widgets .pane{ left: 39%; }
  .v3-best-txt--side{ width: calc(39% - clamp(24px, 2.8vw, 40px) - 16px); }
  .v3-best-side .v3-best-h3{ font-size: 26px; }
  .v3-best-control{ --v3-best-h: 650px; }
  .v3-best-control .pane{ left: calc(50% - 404.5px); width: 809px; height: 405px; border-radius: 50px; --kd: 1.55; }
}
@media (max-width: 1180px){
  .v3-best-bento > .v3-best-dash, .v3-best-bento > .v3-best-widgets{ grid-column: span 12; }
  .v3-best-dash{ --v3-best-h: 560px; --v3-best-scrim: 34%; }
  .v3-best-dash .pane{ left: calc(50% - 232.5px); top: 52px; width: 465px; height: 343px; border-radius: 34px; --kd: 1.4; }
  .v3-best-widgets .pane{ left: 35%; }
  .v3-best-txt--side{ width: calc(35% - clamp(24px, 2.8vw, 40px) - 16px); }
  .v3-best-side .v3-best-h3{ font-size: clamp(26px, 2.6vw, 30px); }
  .v3-best-search .pane{ --kd: 1.15; }
  .v3-best-control{ --v3-best-h: 590px; }
  .v3-best-control .pane{ left: calc(50% - 352.5px); top: 52px; width: 705px; height: 352px; border-radius: 43px; --kd: 1.35; }
}
@media (max-width: 980px){
  .pc.v3-best-layouts{ grid-template-columns: 1fr; }
  .v3-best-txt--flow{ max-width: 36em; }
  .v3-best-search .pane{ --kd: 1; }
  .v3-best-control{ --v3-best-h: 520px; }
  .v3-best-control .pane{ left: calc(50% - 274px); top: 48px; width: 548px; height: 274px; border-radius: 34px; --kd: 1.05; }
}
@media (max-width: 860px){
  .v3-best-widgets .pane{ left: 40%; }
  .v3-best-txt--side{ width: calc(40% - clamp(24px, 2.8vw, 40px) - 14px); }
  .v3-best-side .v3-best-h3{ font-size: 26px; }
  .v3-best-dash .pane{ left: calc(50% - 199px); width: 398px; height: 294px; border-radius: 29px; --kd: 1.2; }
}
@media (max-width: 700px){
  .v3-best-h3, .s12 .v3-best-h3, .v3-best-side .v3-best-h3{ font-size: 28px; line-height: 1.08; }
  .v3-best-p, .s12 .v3-best-p{ font-size: 16px; }
  .v3-best-maps{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .v3-best-map figcaption b{ font-size: 15px; }
  .v3-best-map figcaption span{ font-size: 13.5px; }
  .v3-best-map figcaption svg{ width: 13px; height: 13px; }
  .v3-best-txt--foot{ left: 22px; right: 22px; bottom: 22px; }
  .v3-best-txt--top{ left: 22px; right: 22px; top: 24px; }
  .v3-best-side::after{ width: 100%; height: 44%; bottom: auto; background: linear-gradient(180deg, var(--side-a) 0%, var(--side-a) 48%, var(--side-b) 76%, transparent 100%); }
  .v3-best-txt--side{ left: 22px; right: 22px; width: auto; top: 24px; transform: none; }
  .v3-best-dash{ --v3-best-h: 500px; --v3-best-scrim: 44%; }
  .v3-best-dash .pane{ left: calc(50% - 166px); top: 26px; width: 332px; height: 245px; border-radius: 24px; --kp: 1; --axp: 55; --ayp: 114; }
  .v3-best-widgets{ --v3-best-h: 620px; }
  .v3-best-widgets .pane{ left: 16px; top: 196px; --kp: 1; --axp: 39; --ayp: 138; }
  .v3-best-search{ --v3-best-h: 600px; }
  .v3-best-search .pane{ left: 16px; top: 196px; --kp: 1; --axp: 20; --ayp: 50; }
  .v3-best-control{ --v3-best-h: 520px; --v3-best-scrim: 44%; }
  .v3-best-control .pane{ left: calc(50% - 156.5px); top: 28px; width: 313px; height: 235px; border-radius: 29px; --kp: .9; --axp: 47; --ayp: 106; }
}

/* ▸ 30-day.css */
/* css/sections/30-day.css: L-3 · every day (#every-day). Every class and id here starts with .v3-day-.
   Five posters, self-contained (they set their own layout, so they don't lean on v1's or v2's .pc): a bleed (the live
   Launchpad behind its picture, its tiles settling in as you arrive), a sequence (the same key once and twice), a side
   (the sheet up from the bottom over the Dock), a float (the day on one sheet) and a row (the other ways in).
   Every rule is scoped under .v3-day (two classes: the page's own rules end in :not(.hls-host *), which weighs one more
   class). Class selectors only round a simulator. Crops are in the simulator's points (--k CSS px per point), and each
   one ends in a gap between the app's tiles or cards at every width, so no word is ever cut. */

.v3-day{
  --v3-day-pad: clamp(24px, 2.8vw, 40px);
  /* the app's own spring for its tiles appearing (AppsPanels: spring(response 0.5, damping 0.8)), sampled */
  --v3-day-spring: linear(0, 0.026, 0.091, 0.179, 0.279, 0.381, 0.481, 0.574, 0.657, 0.731, 0.794, 0.846, 0.889, 0.924, 0.951, 0.972, 0.988, 0.999, 1.006, 1.011, 1.014, 1.015, 1.015, 1.014, 1.013, 1.012, 1.01, 1.009, 1.007, 1.006, 1.005, 1.004, 1);
  /* words on the scene's sky (light: the morning mist; dark: the dusk) */
  --v3-day-sky-ink: #04090F;
  --v3-day-sky-ink-2: #3B444D;
}
[data-theme="dark"] .v3-day{ --v3-day-sky-ink: #F6F8F9; --v3-day-sky-ink-2: #D3D9DE; }

.v3-day .v3-day-posters{ display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap, 28px); margin-top: clamp(44px, 5vw, 64px); }

/* a poster: its own box, as tall as what's in it */
.v3-day .v3-day-p{
  position: relative; display: block; height: auto; min-height: 0;
  overflow: clip; isolation: isolate;
  border-radius: var(--r-card, 44px);
  background: var(--card); color: var(--card-ink, var(--ink));
}
.v3-day .v3-day-p > .scene{ position: absolute; inset: 0; z-index: -2; display: block; }
.v3-day .v3-day-p > .scene img{ display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--bgpos, 50% 0%); }

/* words */
.v3-day .v3-day-words{ position: relative; z-index: 3; padding: var(--v3-day-pad) var(--v3-day-pad) 0; max-width: 36em; }
.v3-day .v3-day-h3{ font: 700 clamp(30px, 3.3vw, 46px)/1.04 var(--font-d); letter-spacing: -.026em; text-wrap: balance; color: inherit; }
.v3-day .v3-day-cap{ margin-top: 12px; font: 500 18px/1.42 var(--font); letter-spacing: -.008em; text-wrap: pretty; max-width: 31em; color: var(--text-2); }
.v3-day .v3-day-keys{ display: inline-flex; gap: 3px; vertical-align: .1em; }
.v3-day .v3-day-keys kbd{
  display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 .38em;
  border-radius: .4em; font: 600 .78em/1 var(--font); color: var(--ink);
  background: var(--bg); box-shadow: 0 0 0 .5px var(--line-2), 0 1px 0 var(--line-2);
}

/* ═════════════ 1 · bleed: Launchpad, plus, live behind its picture ═════════════ */

.v3-day .v3-day-apps{ --bgpos: 50% 0%; display: flex; flex-direction: column; color: var(--v3-day-sky-ink); background: #9FB0BC; }
[data-theme="dark"] .v3-day .v3-day-apps{ background: #2B3138; }
.v3-day .v3-day-apps .v3-day-cap{ color: var(--v3-day-sky-ink-2); }
/* the sky behind the words, calmed (the mist's own colour, fading out) */
.v3-day .v3-day-apps::before{
  content: ""; position: absolute; inset: 0 0 auto 0; height: 46%; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(236 240 243 / .72) 0%, rgb(236 240 243 / .36) 55%, transparent 100%);
}
[data-theme="dark"] .v3-day .v3-day-apps::before{ background: linear-gradient(180deg, rgb(30 35 42 / .6) 0%, rgb(30 35 42 / .26) 55%, transparent 100%); }
/* the screen's corner: the pane ends flush with the poster's right edge and foot, in a gap of the grid */
.v3-day .v3-day-apps__pane{
  --k: 1.3; --ax: 0; --ay: 44; --px: 0px; --py: 0px;
  --vw: 756; --vh: 408;                          /* points shown: to the gap after the 8th column, to mid-icon of the 4th row */
  position: relative; inset: auto; z-index: 1; flex: none;
  align-self: flex-end;
  width: calc(var(--vw) * var(--k) * 1px); height: calc(var(--vh) * var(--k) * 1px);
  margin-top: clamp(26px, 3vw, 40px);
  overflow: hidden; isolation: isolate;
  border-radius: clamp(18px, 2vw, 26px) 0 0 0;
  box-shadow: 0 30px 70px -30px rgb(8 14 20 / .5), 0 10px 26px -16px rgb(8 14 20 / .3);
}
.v3-day .v3-day-apps__slab{ --W: 1512; --H: 982; }
.v3-day .v3-day-apps__slab:focus-visible{ outline: 2px solid #fff; outline-offset: -4px; box-shadow: inset 0 0 0 6px var(--focus); }

/* the facade: the app's own render as two layers (the sheet with its tiles hidden, and the tiles alone), lined up to
   the pixel; it goes once the live slab is ready */
.v3-day .v3-day-face{
  --fx: 0; --fy: 40; --fw: 760; --fh: 420;       /* the rendered clip, in points (tools/jobs.mjs, apps) */
  position: absolute; z-index: 1; pointer-events: none;
  left: calc(var(--fx) * var(--k) * 1px); top: calc(var(--fy) * var(--k) * 1px);
  width: calc(var(--fw) * var(--k) * 1px); height: calc(var(--fh) * var(--k) * 1px);
  transition: opacity .24s var(--hf-ease, ease), visibility 0s linear .24s;
}
.v3-day .v3-day-apps__slab.is-ready .v3-day-face{ opacity: 0; visibility: hidden; }
.v3-day .v3-day-face__base{ position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.v3-day .v3-day-tiles{ position: absolute; inset: 0; }
.v3-day .v3-day-tiles > i{
  position: absolute; display: block;
  left: calc(var(--x) * var(--k) * 1px); top: calc(var(--y) * var(--k) * 1px);
  width: calc(var(--w) * var(--k) * 1px); height: calc(var(--h) * var(--k) * 1px);
  background-repeat: no-repeat;
  background-size: calc(var(--fw) * var(--k) * 1px) calc(var(--fh) * var(--k) * 1px);
  background-position: calc(var(--x) * var(--k) * -1px) calc(var(--y) * var(--k) * -1px);
  transform-origin: 50% 40%;
}
/* the tiles' picture loads once the poster is near (a CSS background would otherwise load with the page) */
.v3-day .v3-day-tiles.is-near > i{ background-image: image-set(url("../assets/day/apps-tiles.webp") 1x, url("../assets/day/apps-tiles@2x.webp") 2x); }
.no-js .v3-day .v3-day-tiles > i, .hf-fallback .v3-day .v3-day-tiles > i{ background-image: image-set(url("../assets/day/apps-tiles.webp") 1x, url("../assets/day/apps-tiles@2x.webp") 2x); }
/* the moment: as the poster arrives, each tile appears as the app's grid does when it opens (opacity and scale from
   0.86 on its spring), in a wave from the top left; once */
.hf-js .v3-day .v3-day-tiles > i{ opacity: 0; transform: scale(.86); }
.v3-day .v3-day-tiles.is-in > i{ animation: v3-day-settle .62s var(--v3-day-spring) both; animation-delay: calc(var(--d, 0) * 1ms); }
@keyframes v3-day-settle{ from{ opacity: 0; transform: scale(.86); } to{ opacity: 1; transform: none; } }
.hf-fallback .v3-day .v3-day-tiles > i{ opacity: 1; transform: none; animation: none; }
@media (prefers-reduced-motion: reduce){
  .hf-js .v3-day .v3-day-tiles > i, .v3-day .v3-day-tiles.is-in > i{ opacity: 1; transform: none; animation: none; }
}

/* ═════════════ 2 · sequence: once and twice ═════════════ */

.v3-day .v3-day-again{ padding-bottom: var(--v3-day-pad); }
.v3-day .v3-day-again__row{
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 18px;
  margin: clamp(26px, 3vw, 36px) var(--v3-day-pad) 0;
}
.v3-day .v3-day-frame{ margin: 0; display: grid; gap: 14px; align-content: start; min-width: 0; }
.v3-day .v3-day-frame__box{
  position: relative; overflow: hidden; border-radius: clamp(16px, 1.8vw, 22px); background: #000;
  box-shadow: 0 0 0 .5px rgb(255 255 255 / .1), 0 24px 50px -30px rgb(8 14 20 / .55);
}
.v3-day .v3-day-frame__img{ display: block; width: 100%; height: auto; }
.v3-day .v3-day-frame__cap{ font: 500 15px/1.35 var(--font); color: var(--text-2); }
.v3-day .v3-day-frame__cap b{ margin-right: 6px; font: 700 19px/1.2 var(--font-d); letter-spacing: -.012em; color: var(--ink); }
/* the same key, again: the four keys stacked in the gutter between the frames, level with their middles */
.v3-day .v3-day-again__key{ align-self: center; margin-bottom: 40px; display: grid; justify-items: center; gap: 10px; }
.v3-day .v3-day-again__stack{ display: grid; gap: 6px; }
.v3-day .v3-day-again__stack kbd{
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px;
  font: 600 16px/1 var(--font); color: var(--ink); background: var(--bg);
  box-shadow: 0 0 0 .5px var(--line-2), 0 1.5px 0 var(--line-2), 0 8px 18px -10px rgb(8 14 20 / .35);
}
.v3-day .v3-day-again__word{ font: 600 13px/1.2 var(--font); letter-spacing: .01em; color: var(--text-2); }

/* ═════════════ 3 · side: up from the bottom, over the Dock ═════════════ */

.v3-day .v3-day-up{ --vw: 830; --bgpos: 50% 0%; display: flex; flex-direction: row; align-items: center; min-height: 520px; color: var(--v3-day-sky-ink); background: #9FB0BC; }
[data-theme="dark"] .v3-day .v3-day-up{ background: #2B3138; }
.v3-day .v3-day-up .v3-day-cap{ color: var(--v3-day-sky-ink-2); }
.v3-day .v3-day-up::before{
  content: ""; position: absolute; inset: 0 auto 0 0; width: 46%; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgb(236 240 243 / .74) 0%, rgb(236 240 243 / .5) 55%, transparent 100%);
}
[data-theme="dark"] .v3-day .v3-day-up::before{ background: linear-gradient(90deg, rgb(28 33 40 / .66) 0%, rgb(28 33 40 / .34) 55%, transparent 100%); }
.v3-day .v3-day-words--side{ flex: 1 1 0; min-width: 0; padding: var(--v3-day-pad); padding-right: 16px; }
/* the screen's foot: inset from the poster's foot, running off its top and right, cut in the gap after the 5th card */
.v3-day .v3-day-up__pane{
  --k: 1; --ax: 0; --ay: 795; --px: 0px; --py: 100%;
  position: absolute; inset: 0 0 clamp(28px, 3.4vw, 44px) auto; z-index: 1;
  width: calc(var(--vw) * var(--k) * 1px);
  overflow: hidden; isolation: isolate; border-radius: 0; box-shadow: none;
}
.v3-day .v3-day-up__pane::after{ display: none; }
.v3-day .v3-day-up__slab{ --W: 1224; --H: 795; box-shadow: 0 30px 60px -30px rgb(8 14 20 / .55); }
.v3-day .v3-day-up__pane .v3-day-shot{ left: 0; top: calc(330 * var(--k) * 1px); width: calc(860 * var(--k) * 1px); }
.v3-day .v3-day-up .v3-day-words--side{ max-width: calc(100% - var(--vw) * 1px); }
.v3-day .v3-day-shot{ position: absolute; z-index: 1; display: block; height: auto; }

/* ═════════════ 4 · float: the day on one sheet ═════════════ */

.v3-day .v3-day-today{ --bgpos: 50% 58%; display: flex; flex-direction: column; align-items: center; color: #fff; background: #1D2329; }
.v3-day .v3-day-today::after{
  content: ""; position: absolute; inset: auto 0 0 0; height: 46%; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(0 0 0 / 0), rgb(0 0 0 / .56) 58%, rgb(0 0 0 / .72));
}
.v3-day .v3-day-today__pane{
  --vw: 1090;                                    /* points shown (k 1): the whole render; 703 to the gap after Now Playing */
  position: relative; z-index: 1; flex: none;
  width: calc(var(--vw) * 1px); max-width: calc(100% - 2 * var(--v3-day-pad)); height: 391px;
  margin-top: clamp(40px, 5vw, 64px);
  overflow: hidden; border-radius: clamp(18px, 2vw, 26px); background: #000;
  box-shadow: 0 0 0 .5px rgb(255 255 255 / .1), 0 50px 90px -40px rgb(2 6 10 / .7), 0 18px 40px -22px rgb(2 6 10 / .5);
}
.v3-day .v3-day-today__img{ position: absolute; left: var(--ix, 0px); top: 0; display: block; width: 1090px; max-width: none; height: 391px; }
.v3-day .v3-day-words--foot{ align-self: stretch; padding: clamp(26px, 3vw, 36px) var(--v3-day-pad) var(--v3-day-pad); }
.v3-day .v3-day-today .v3-day-cap{ color: rgb(236 241 244 / .86); }

/* ═════════════ 5 · a row: the other ways in ═════════════ */

.v3-day .v3-day-ways{ padding: var(--v3-day-pad); }
.v3-day .v3-day-h3--row{ font-size: clamp(24px, 2.2vw, 30px); line-height: 1.12; letter-spacing: -.02em; color: var(--ink); max-width: 30em; }
.v3-day .v3-day-ways__list{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 20px; margin-top: clamp(22px, 2.4vw, 30px); }
.v3-day .v3-day-way{ display: grid; grid-template-rows: auto auto 1fr; gap: 6px; min-width: 0; }
.v3-day .v3-day-way__pic{
  position: relative; overflow: hidden; height: 156px; margin-bottom: 10px;
  border-radius: 18px; isolation: isolate;
  background: var(--veil), var(--frost) 50% 50% / cover no-repeat, #8E9AA4;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), inset 0 0 0 .5px rgb(255 255 255 / .25);
}
[data-theme="dark"] .v3-day .v3-day-way__pic{ background-color: #262B31; box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), inset 0 0 0 .5px rgb(255 255 255 / .1); }
.v3-day .v3-day-way__name{ font: 650 18px/1.25 var(--font-d); letter-spacing: -.012em; color: var(--ink); }
.v3-day .v3-day-way__line{ font: 500 15px/1.42 var(--font); color: var(--text-2); text-wrap: pretty; }
/* the Dock and the menu bar: the simulator's own renders on the frosted glass */
.v3-day .v3-day-way__slab{ position: absolute; inset: 0; --k: 1; --ax: 0; --ay: 0; --px: 0px; --py: 0px; width: auto; height: auto; border-radius: 0; background: transparent; }
.v3-day .v3-day-way__pic--dock .v3-day-shot{ left: 0; bottom: -2px; width: 250px; }
.v3-day .v3-day-way__pic--menu .v3-day-shot{ right: -6px; top: 0; width: 264px; }
/* Launchpad's key: an Apple keyboard's F4, with Launchpad's glyph */
.v3-day .v3-day-way__pic--key{ display: grid; place-items: center; }
.v3-day .v3-day-cap-key{
  position: relative; z-index: 1; width: 104px; height: 104px; border-radius: 17px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #FFFFFF 0%, #F1F3F5 100%);
  box-shadow: inset 0 -1px 0 rgb(12 22 32 / .06), 0 1.5px 0 rgb(12 22 32 / .18), 0 0 0 .5px rgb(12 22 32 / .14), 0 16px 30px -14px rgb(8 14 20 / .5);
  color: #1D2228;
}
[data-theme="dark"] .v3-day .v3-day-cap-key{
  background: linear-gradient(180deg, #3A3D43 0%, #2B2E33 100%); color: #E9EDF0;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), 0 1.5px 0 rgb(0 0 0 / .6), 0 0 0 .5px rgb(0 0 0 / .5), 0 16px 30px -14px rgb(0 0 0 / .7);
}
.v3-day .v3-day-cap-key__glyph{ width: 38px; height: auto; margin-top: -8px; fill: currentColor; }
.v3-day .v3-day-cap-key__f{ position: absolute; left: 0; right: 0; bottom: 11px; text-align: center; font: 600 12px/1 var(--font); letter-spacing: .02em; opacity: .7; }
/* a link: hyperlaunch://open, as a hot corner, a Shortcut or a script would call it */
.v3-day .v3-day-way__pic--link{ display: grid; place-items: center; padding: 0 16px; }
.v3-day .v3-day-url{
  position: relative; z-index: 1; display: grid; gap: 2px; padding: 14px 16px; border-radius: 12px; max-width: 100%;
  background: rgb(8 12 16 / .78); box-shadow: inset 0 0 0 .5px rgb(255 255 255 / .12), 0 14px 30px -16px rgb(0 0 0 / .6);
  font: 500 14px/1.45 var(--mono); letter-spacing: -.01em; color: #E9EEF1; white-space: nowrap;
}
.v3-day .v3-day-url__s{ color: #FF8A5C; }
.v3-day .v3-day-url__q{ padding-left: 1.2em; color: #B9C6CF; }

/* ═════════════ widths ═════════════ */

@media (max-width: 1259px){
  .v3-day .v3-day-up{ --vw: 656; }           /* to the gap after Control Centre */
}
@media (max-width: 1239px){
  .v3-day .v3-day-today__pane{ --vw: 703; }   /* the clipboard, and Now Playing, the tasks and the display */
}
@media (max-width: 1179px){
  .v3-day .v3-day-apps__pane{ --k: 1.2; --vw: 669; }           /* to the gap after the 7th column */
}
@media (max-width: 1080px){
  /* the side poster stacks: the words above, the screen's foot below */
  .v3-day .v3-day-up{ display: block; min-height: 0; }
  .v3-day .v3-day-up::before{ inset: 0 0 auto 0; width: auto; height: 40%; background: linear-gradient(180deg, rgb(236 240 243 / .74), transparent); }
  [data-theme="dark"] .v3-day .v3-day-up::before{ background: linear-gradient(180deg, rgb(28 33 40 / .66), transparent); }
  .v3-day .v3-day-up .v3-day-words--side{ max-width: 36em; padding: var(--v3-day-pad) var(--v3-day-pad) 0; }
  .v3-day .v3-day-up__pane{ position: relative; inset: auto; margin: 26px 0 clamp(24px, 3vw, 36px) auto; height: calc(465px * var(--k)); }
  .v3-day .v3-day-ways__list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px){
  .v3-day .v3-day-apps__pane{ --k: 1; --vw: 582; }             /* to the gap after the 6th column */
  .v3-day .v3-day-again__row{ grid-template-columns: minmax(0, 1fr); gap: 18px; justify-items: center; }
  .v3-day .v3-day-frame{ width: min(100%, 580px); }
  .v3-day .v3-day-again__key{ margin: 0; grid-auto-flow: column; align-items: center; gap: 12px; }
  .v3-day .v3-day-again__stack{ grid-auto-flow: column; }
}
@media (max-width: 700px){
  /* phones: each poster its own crop, the app's text at 11 px or more (k ≥ 1) */
  .v3-day .v3-day-h3{ font-size: clamp(27px, 7.4vw, 32px); }
  .v3-day .v3-day-cap{ font-size: 16px; }
  .v3-day .v3-day-apps__pane{ --k: 1; --vw: 321; --vh: 321; margin-top: 22px; }   /* three columns, to mid-icon of the 3rd row */
  /* the frames: the Apps card, and three columns of the grid, below the search row */
  .v3-day .v3-day-frame{ width: 100%; }
  /* exactly x 24–310, y 120–392 of the screen (286 × 272 pt) at any phone width: the picture (464 × 344 pt from
     x 24, y 48) as a share of the box's width */
  .v3-day .v3-day-frame__box{ aspect-ratio: 286 / 272; }
  .v3-day .v3-day-frame__img{ width: 162.24%; max-width: none; height: auto; margin-top: -25.17%; }
  /* the screen's foot: the Apps card and, under the glass, Finder and Hyperlaunch in the Dock */
  .v3-day .v3-day-up{ --vw: 308; }
  .v3-day .v3-day-up__pane{ height: calc(315px * var(--k)); margin-top: 22px; }
  /* the day: the next meeting, Do Not Disturb, what's playing and the tasks */
  /* from the gap after the clipboard to the one after Now Playing (rel 356–708): nearly edge to edge, so the whole card
     fits at k 1 from a 328-px poster up */
  .v3-day .v3-day-today__pane{ --vw: 352; --ix: -356px; height: 391px; max-width: 100%; margin-top: 28px; border-radius: 18px; }
  .v3-day .v3-day-ways__list{ grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .v3-day .v3-day-way__pic{ height: 148px; }
}
@media (max-width: 359px){
  .v3-day .v3-day-apps__pane{ --vw: 300; }
}

/* ▸ 40-mine.css */
/* css/sections/40-mine.css: L-4 · make it yours (#yours). Every class and id here starts with .v3-mine-, and only class
   selectors are used near a simulator (an element selector under a box holding a .slab would style the app too).
   The shared rules are scoped with :not(.hls-host *), and their element resets (ul, p, button…) outweigh a class, so
   every rule here starts with the section's id. Pictures are cut from the real simulator at its 1224 × 795-point
   screen (assets/mine/); any url() here would be ../assets/mine/… (this file is built into css/sections.css).
   Desktop posters with a pane cut from the glass have a set height (the pane is placed in them); on phones
   everything is in the flow and sized by its content. */

/* ───────── shared: a picture pane (a window cut from the glass), its frosted wall behind a transparent render ───────── */
#yours .pane.v3-mine-pane{ inset: auto; }
#yours .slab.v3-mine-slab{ left: 0; top: 0; width: 100%; height: 100%; border-radius: inherit; }
#yours .v3-mine-pic{ position: absolute; z-index: 1; inset: 0; display: block; width: 100%; height: 100%; max-width: none; }
/* the simulator's screen, in points, at the slab's scale (poster 1's facade) */
#yours .v3-mine-scr{ position: absolute; left: 0; top: 0; width: 1224px; height: 795px; transform: scale(var(--k, 1)); transform-origin: 0 0; pointer-events: none; }

/* ───────── 1 · drag a card anywhere (side, live): the words in the grid's first third, the sheet off the right ───────── */
#yours .pc.v3-mine-edit{ height: 620px; }
#yours .pane.v3-mine-edit__pane{ inset: 36px 0 0 35%; border-radius: var(--r-pane) 0 0 0;
  --kd: 1.128; --axd: 40; --ayd: 112; --kp: 1.025; --axp: 30; --ayp: 112; }
#yours .pc__txt.v3-mine-edit__txt{ align-self: center; }
#yours .v3-mine-edit__txt h3{ max-width: 9em; }
#yours .v3-mine-try{
  display: inline-flex; align-items: center; height: 40px; margin: 20px 0 0; padding: 0 18px;
  border: 0; border-radius: 999px; cursor: pointer; pointer-events: auto;
  font: 600 15px/1 var(--font); letter-spacing: -.005em; white-space: nowrap;
  background: var(--ink); color: var(--bg);
  transition: background-color .18s, color .18s, transform .12s;
}
#yours .v3-mine-try:hover{ background: var(--accent); color: var(--on-accent, #fff); }
#yours .v3-mine-try:active{ transform: scale(.97); }
#yours .v3-mine-try:focus-visible{ outline: 2px solid var(--focus, var(--accent)); outline-offset: 3px; }
#yours .v3-mine-edit.is-live .v3-mine-try{ visibility: hidden; }

/* the facade: the sheet in edit mode without the two cards that move, the drag's guides and target, and those cards */
#yours .v3-mine-fac{ z-index: 1; transition: opacity .24s var(--hf-ease, ease-out); }
#yours .v3-mine-fac.is-gone{ opacity: 0; }
#yours .v3-mine-fac__sheet, #yours .v3-mine-fac__guides, #yours .v3-mine-fac__target, #yours .v3-mine-fac__w{ position: absolute; display: block; max-width: none; }
#yours .v3-mine-fac__sheet, #yours .v3-mine-fac__guides{ left: 30px; top: 100px; width: 720px; height: 548px; }
#yours .v3-mine-fac__guides{ opacity: 0; transition: opacity .2s ease-out; }
#yours .v3-mine-fac__target{ left: 52px; top: 127px; width: 164px; height: 164px; opacity: 0;
  transition: transform .16s cubic-bezier(.16, 1, .3, 1), opacity .2s ease-out; }
#yours .v3-mine-fac.is-dragging .v3-mine-fac__guides, #yours .v3-mine-fac.is-dragging .v3-mine-fac__target{ opacity: 1; }
#yours .v3-mine-fac__w{ top: 118px; width: 176px; height: 176px; will-change: transform; }
#yours .v3-mine-fac__w--timer{ left: 391px; z-index: 1; }
#yours .v3-mine-fac__w--clock{ left: 43px; z-index: 2; }
/* lifted, as the app's drag draws it (sim.css .hls-slot.is-dragging): 1.04×, a soft drop shadow, a brighter rim */
#yours .v3-mine-fac__c{ position: absolute; inset: 0; transform-origin: 91px 91px;
  transition: transform .22s var(--hf-ease, ease-out), filter .22s var(--hf-ease, ease-out); }
#yours .v3-mine-fac__c > img{ display: block; width: 176px; height: 176px; max-width: none; }
#yours .v3-mine-fac__c::after{ content: ""; position: absolute; left: 12px; top: 12px; width: 158px; height: 158px; border-radius: 24px;
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .5); opacity: 0; transition: opacity .22s; }
#yours .v3-mine-fac__w.is-lifted .v3-mine-fac__c{ transform: scale(1.04); filter: drop-shadow(0 12px 24px rgb(0 0 0 / .45)); }
#yours .v3-mine-fac__w.is-lifted .v3-mine-fac__c::after{ opacity: 1; }
/* the poster's own scroll track for the moment (HF.scene): from its top at 85 % of the window to 15 % */
#yours .v3-mine-track{ position: absolute; left: 0; top: -85vh; width: 1px; height: 170vh; visibility: hidden; pointer-events: none; }

/* ───────── 2 · every card, its own settings (float: the card and its popover in the middle, the words on a scrim) ───────── */
#yours .pc.v3-mine-set{ height: 660px; justify-content: flex-end; }
#yours .pc.v3-mine-set::after{ content: ""; position: absolute; inset: auto 0 0; height: 34%; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgb(0 0 0 / 0), rgb(0 0 0 / .5) 58%, rgb(0 0 0 / .64)); }
#yours .v3-mine-set__pic{ position: absolute; z-index: 2; left: 50%; top: 4px; width: 424px; height: auto; max-width: none; transform: translateX(-50%); }
#yours .pc__txt.v3-mine-set__txt{ z-index: 3; padding: 0 var(--pad) var(--pad); max-width: none; }
#yours .v3-mine-set__txt p{ max-width: 27em; }

/* ───────── 3 · add from the gallery (bleed: the words on the sky, the gallery off the right) ───────── */
#yours .pc.v3-mine-gal{ height: 660px; --sky-h: 38%; }
#yours .pc__txt.v3-mine-gal__txt{ z-index: 3; max-width: 26em; }
#yours .pane.v3-mine-gal__pane{ left: var(--pad); right: 0; top: 168px; aspect-ratio: 414 / 338; border-radius: var(--r-pane) 0 0 var(--r-pane); }

/* ───────── 4 · three surfaces (pieces) ───────── */
#yours .pc.v3-mine-surf{ padding-bottom: clamp(20px, 2.2vw, 30px); }
#yours .v3-mine-surf__fig{ margin: clamp(22px, 2.4vw, 32px) 0 0; }
#yours .v3-mine-surf__pic{ display: block; width: 100%; height: auto; max-width: none; }
#yours .v3-mine-surf__labels{ display: grid; grid-template-columns: 395fr 435fr 394fr; margin: 18px 0 0; }
#yours .v3-mine-surf__labels > p{ margin: 0; padding: 0 clamp(18px, 2.2vw, 30px); font: 500 15.5px/1.4 var(--font); letter-spacing: -.004em; color: var(--text-2); text-wrap: pretty; }
#yours .v3-mine-surf__labels b{ display: block; margin-bottom: 4px; font: 650 19px/1.2 var(--font-d); letter-spacing: -.012em; color: var(--card-ink); }

/* ───────── 5 · a look for every card, and stacks (side, mirrored: the picture off the left, the words in the last third) ───────── */
#yours .pc.v3-mine-looks{ height: 595px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (min-width: 701px){
  #yours .pc--side.v3-mine-looks::after{ left: auto; right: 0;
    background: linear-gradient(270deg, var(--side-a) 0%, var(--side-a) 58%, var(--side-b) 80%, transparent 100%); }
}
#yours .pc__txt.v3-mine-looks__txt{ grid-column: 2; align-self: center; }
#yours .pane.v3-mine-looks__pane{ left: 0; top: 40px; width: 64%; aspect-ratio: 704 / 500; border-radius: 0 var(--r-pane) 0 0; }

/* ───────── 6 · macOS 26's icon styles (pieces) ───────── */
#yours .v3-mine-ico__grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 20px; margin: clamp(22px, 2.6vw, 34px) var(--pad) var(--pad); padding: 0; list-style: none; }
#yours .v3-mine-ico__tile{ position: relative; aspect-ratio: 260 / 134; border-radius: 18px; overflow: hidden; isolation: isolate;
  box-shadow: 0 18px 36px -24px rgb(8 14 20 / .5); }
#yours .slab.v3-mine-slab .v3-mine-pic{ object-fit: cover; }
#yours .v3-mine-ico__grid b{ display: block; margin-top: 11px; font: 600 15px/1.25 var(--font); letter-spacing: -.004em; color: var(--card-ink); }

/* ───────── widths ───────── */
@media (max-width: 1339px){ #yours .pane.v3-mine-edit__pane{ --kd: 1.07; } }
@media (max-width: 1279px){ #yours .pane.v3-mine-edit__pane{ --kd: 1.0; } }
@media (max-width: 1199px){ #yours .pane.v3-mine-edit__pane{ --kd: .96; } #yours .v3-mine-set__pic{ width: 388px; } }
@media (max-width: 1079px){ #yours .pane.v3-mine-edit__pane{ --kd: .9; } #yours .v3-mine-set__pic{ width: 365px; } #yours .v3-mine-surf__labels > p{ font-size: 14.5px; } }
@media (max-width: 980px){
  #yours .pane.v3-mine-edit__pane{ --kd: .84; }
  #yours .v3-mine-set__pic{ width: 342px; }
  #yours .pane.v3-mine-gal__pane{ top: 190px; }
  #yours .v3-mine-ico__grid{ gap: 22px 14px; }
}
@media (max-width: 700px){
  /* phones: the words first, then the picture, in the flow */
  #yours .pc.v3-mine-edit, #yours .pc.v3-mine-set, #yours .pc.v3-mine-gal, #yours .pc.v3-mine-looks{ height: auto; display: flex; flex-direction: column; }
  #yours .pane.v3-mine-edit__pane, #yours .pane.v3-mine-gal__pane, #yours .pane.v3-mine-looks__pane{ position: relative; inset: auto; flex: none; }
  #yours .pane.v3-mine-edit__pane{ height: 372px; margin: 20px 0 0 16px; border-radius: var(--r-pane) 0 0 0; }
  #yours .v3-mine-edit__txt h3{ max-width: none; }
  #yours .v3-mine-try{ margin-top: 14px; }
  #yours .v3-mine-set__pic{ position: relative; left: auto; top: auto; transform: none; order: -1; width: min(358px, calc(100% - 32px)); margin: 22px auto 0; }
  #yours .pc.v3-mine-set::after{ height: 28%; }
  #yours .pc__txt.v3-mine-set__txt{ padding-top: 18px; }
  #yours .pane.v3-mine-gal__pane{ left: auto; right: auto; top: auto; width: calc(100% - 16px); margin: 20px 0 0 16px; }
  #yours .pane.v3-mine-looks__pane{ left: auto; top: auto; width: calc(100% - 32px); margin: 20px 16px 16px; aspect-ratio: 349 / 356; border-radius: var(--r-pane); }
  #yours .pane.v3-mine-looks__pane .v3-mine-pic{ object-fit: cover; object-position: 100% 0; }
  #yours .pc__txt.v3-mine-looks__txt{ grid-column: auto; }
  #yours .v3-mine-surf__pic{ height: 240px; object-fit: cover; object-position: 50% 50%; }
  #yours .v3-mine-surf__labels{ grid-template-columns: 1fr; gap: 14px; margin-top: 16px; }
  #yours .v3-mine-surf__labels > p{ padding: 0 var(--pad); font-size: 15px; }
  #yours .v3-mine-surf__labels b{ display: inline; margin: 0 6px 0 0; font-size: 16.5px; }
  #yours .v3-mine-ico__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  #yours .v3-mine-ico__tile{ aspect-ratio: 260 / 104; border-radius: 14px; }
  #yours .v3-mine-ico__grid b{ margin-top: 8px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce){
  #yours .v3-mine-fac, #yours .v3-mine-fac__guides, #yours .v3-mine-fac__target, #yours .v3-mine-fac__c, #yours .v3-mine-fac__c::after{ transition: none; }
}

/* ▸ 50-pro.css */
/* css/sections/50-pro.css: for developers and specialists (#developers), the dark chapter. Prefix .v3-pro-.
   Four posters, all pictures: Workbench (side, with the moment), the developer cards (bleed), widgets a coding assistant
   made (pieces), Ask (float, data-show="ask"). The sim's renders are crops of a 1512 × 982 pt (Workbench) or
   1280 × 800 pt (Ask) screen; every overlay is placed in percent of its picture, so it holds at any width.
   Never put an element selector under a box that could hold a simulator: there is none in this chapter. */

.v3-pro [hidden]{ display: none !important; }
.v3-pro{
  /* SwiftUI's spring(response: 0.4, dampingFraction: 0.85), the Notification Centre's insertion (NotificationsPanel) */
  --v3-pro-ins: linear(0, .0361, .1222, .2332, .3519, .4673, .5731, .666, .7448, .8098, .862, .9031, .9345, .958, .9751,
    .9872, .9954, 1.0007, 1.0039, 1.0056, 1.0062, 1.0062, 1.0058, 1.0051, 1.0044, 1.0037, 1.003, 1.0023, 1);
  --v3-pro-r: clamp(18px, 2vw, 26px);
  content-visibility: auto;
  contain-intrinsic-size: auto 2850px;
}

/* the chapter's head: the headline, and the link in one line */
.v3-pro-lead{ max-width: 44em; }
.v3-pro-url{
  display: inline-block; margin-top: 2px; padding: 3px 10px; border-radius: 9px;
  font: 500 .84em/1.4 var(--mono); letter-spacing: -.01em; color: var(--ink);
  background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 .5px rgb(255 255 255 / .12);
  overflow-wrap: anywhere;
}

/* the grid */
.v3-pro-grid{ display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(44px, 5vw, 64px); }

/* a poster */
.v3-pro-pc{
  --pad: clamp(24px, 2.8vw, 40px);
  position: relative; overflow: clip; isolation: isolate; min-width: 0;
  border-radius: var(--r-card);
  background: #0D1115; color: #fff;
}
.v3-pro-scene{ position: absolute; inset: 0; z-index: -2; display: block; }
.v3-pro-scene img{ width: 100%; height: 100%; object-fit: cover; object-position: var(--bgpos, 50% 50%); filter: brightness(.7) saturate(.85) contrast(1.05); }
.v3-pro-txt{ position: relative; z-index: 3; }
.v3-pro-txt h3{ font: 700 clamp(28px, 2.4vw, 34px)/1.08 var(--font-d); letter-spacing: -.022em; text-wrap: balance; }
.v3-pro-txt p{ margin-top: 10px; font: 500 16px/1.42 var(--font); letter-spacing: -.004em; color: rgb(236 241 244 / .86); text-wrap: pretty; max-width: 30em; }
.v3-pro-tag{
  display: inline-flex; align-items: center; height: 26px; padding: 0 11px; margin-left: 4px; border-radius: 999px;
  font: 600 14px/1 var(--font); letter-spacing: 0; vertical-align: .32em;
  background: rgb(255 255 255 / .14); color: #fff;
}

/* a pane of the blurry screen, as a picture: the glass's edge catches the light */
.v3-pro-pane{ position: relative; z-index: 1; margin: 0; overflow: clip; border-radius: var(--v3-pro-r); box-shadow: 0 40px 80px -40px rgb(0 0 0 / .6), 0 12px 30px -18px rgb(0 0 0 / .4); }
.v3-pro-pane img{ display: block; width: 100%; height: auto; }
.v3-pro-pane::after{ content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit; box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), inset 0 0 0 .5px rgb(255 255 255 / .14); }

/* ── 1 · Workbench: side (the words in the left third, the pane running off the right and the foot) ── */
.v3-pro-work{
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(0, 31%) minmax(0, 1fr); align-items: center;
  --bgpos: 50% 58%;
}
.v3-pro-work::before{ content: ""; position: absolute; inset: 0 auto 0 0; width: 52%; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgb(6 8 10 / .66) 0%, rgb(6 8 10 / .42) 55%, rgb(6 8 10 / 0) 100%); }
.v3-pro-work > .v3-pro-txt{ padding: var(--pad); padding-right: 8px; }
.v3-pro-work > .v3-pro-txt h3{ font-size: clamp(30px, 3.2vw, 44px); line-height: 1.04; letter-spacing: -.026em; }
.v3-pro-work > .v3-pro-txt p{ font-size: clamp(16px, 1.3vw, 18px); max-width: 19em; }
/* (.v3-pro first: family.css resets figure margins with a :not() that outweighs one class) */
.v3-pro .v3-pro-work-pane{ align-self: end; margin-top: clamp(36px, 3.6vw, 52px); border-radius: var(--v3-pro-r) 0 0 0; }

/* the moment: an agent's alert lands at the top of the Claude Code group (two renders of one session, cut into layers:
   the list before it, moving down, and the new card, sliding in from under the group's head as it fades in) */
.v3-pro-work-pane{
  /* the layers' box in the desktop crop (screen points 750…1478 × 56…616): the panel's inside from the new card down */
  --v3-pro-nx: 50%; --v3-pro-ny: 35.179%; --v3-pro-nw: 45.055%; --v3-pro-nh: 64.821%;
  --v3-pro-nd: 22.796%;                                   /* the new card and its gap, of the list layer's own height */
  --v3-pro-nfill: linear-gradient(180deg, #202020, #1d1d1d 22.8%, #131313 88%);   /* the panel's own fill there */
}
.v3-pro-note{
  position: absolute; z-index: 2; pointer-events: none; overflow: clip; visibility: hidden;
  left: var(--v3-pro-nx); top: var(--v3-pro-ny); width: var(--v3-pro-nw); height: var(--v3-pro-nh);
  background: var(--v3-pro-nfill);
}
.v3-pro-note img{ position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; }
.v3-pro-note.is-armed{ visibility: visible; }
.v3-pro-note-new{ opacity: 0; transform: translate3d(0, -100%, 0); }
.v3-pro-note.is-in .v3-pro-note-list{ transform: translate3d(0, var(--v3-pro-nd), 0); transition: transform .52s var(--v3-pro-ins); }
.v3-pro-note.is-in .v3-pro-note-new{ opacity: 1; transform: none; transition: transform .52s var(--v3-pro-ins), opacity .36s cubic-bezier(.2, .7, .3, 1); }
.v3-pro-note.is-done{ visibility: hidden; }
.v3-pro-note-cue{ position: absolute; left: 72%; top: 74%; width: 1px; height: 1px; pointer-events: none; }   /* under the cards: they are in view */

/* ── 2 · the developer cards: bleed (the words top left, the pane running off the right and the foot) ── */
.v3-pro-tools{ grid-column: span 8; display: flex; flex-direction: column; --bgpos: 40% 92%; }
.v3-pro-tools::before{ content: ""; position: absolute; inset: 0 0 auto; height: 46%; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(6 8 10 / .78) 0%, rgb(6 8 10 / .5) 55%, rgb(6 8 10 / 0) 100%); }
.v3-pro-tools > .v3-pro-txt{ padding: var(--pad) var(--pad) 0; margin-bottom: clamp(24px, 2.6vw, 34px); }
.v3-pro .v3-pro-tools-pane{ margin: auto 0 0 var(--pad); border-radius: var(--v3-pro-r) 0 0 0; }   /* pinned to the foot when the row is taller */

/* ── 3 · widgets a coding assistant made: pieces (at their design size, on the one grid's 16-pt gaps) ── */
.v3-pro-mba{
  grid-column: span 4;
  --pad: clamp(18px, 1.7vw, 28px);
  display: flex; flex-direction: column; justify-content: space-between; gap: clamp(26px, 2.6vw, 36px);
  padding: calc(var(--pad) + 8px) var(--pad) var(--pad);
  background: var(--card); color: var(--card-ink);
}
.v3-pro-mba > .v3-pro-txt p{ color: var(--text-2); }
.v3-pro-mba-board{ display: grid; gap: 20px; justify-items: center; }
.v3-pro .v3-pro-mba-w{ margin: 0; display: grid; gap: 10px; width: 332px; max-width: 100%; }
.v3-pro-mba-w img{ display: block; width: 100%; height: auto; border-radius: 24px; box-shadow: 0 18px 36px -22px rgb(0 0 0 / .7); }
.v3-pro-mba-w figcaption{ font: 500 14px/1.38 var(--font); letter-spacing: -.004em; color: var(--text-2); text-wrap: pretty; }

/* ── 4 · Ask: float (the scene, the pane at its middle, what goes with a question beside it, the words at the foot) ── */
.v3-pro-ask{ grid-column: 1 / -1; display: flex; flex-direction: column; --bgpos: 50% 30%; }
.v3-pro-ask::after{ content: ""; position: absolute; inset: auto 0 0; height: 46%; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(0 0 0 / 0), rgb(0 0 0 / .58) 62%, rgb(0 0 0 / .7)); }
.v3-pro-ask-frame{ position: relative; z-index: 1; width: min(70%, 878px); margin: clamp(56px, 6vw, 84px) auto clamp(30px, 3.2vw, 44px); }
.v3-pro-ask > .v3-pro-txt{ padding: 0 var(--pad) var(--pad); }
.v3-pro-ask > .v3-pro-txt h3{ font-size: clamp(30px, 3.2vw, 44px); line-height: 1.04; letter-spacing: -.026em; }
.v3-pro-ask > .v3-pro-txt p{ font-size: clamp(16px, 1.3vw, 18px); }
/* a callout: words beside the pane, a hairline to what it names, a dot on it. The frame is a container, so a target’s
   place (measured on the render, in percent of the picture) is in cqw and holds at any width. */
.v3-pro-ask-frame{ container-type: inline-size; }
.v3-pro-call{
  position: absolute; z-index: 2; top: var(--y); width: clamp(112px, 10vw, 140px);
  font: 600 14.5px/1.3 var(--font); letter-spacing: -.006em; color: #fff; text-wrap: balance;
  transform: translateY(-50%);
}
.v3-pro-call::before{ content: ""; position: absolute; top: 50%; height: 1px; background: rgb(255 255 255 / .6); }
.v3-pro-call::after{ content: ""; position: absolute; top: calc(50% - 3.5px); width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgb(255 255 255 / .24); }
.v3-pro-call--ctx{ right: calc(100% + 20px); text-align: right; --y: 32.8%; --dx: 1.9cqw; }        /* by Context's clipboard switch */
.v3-pro-call--ctx::before{ left: calc(100% + 8px); width: calc(12px + var(--dx)); }
.v3-pro-call--ctx::after{ left: calc(100% + 20px + var(--dx) - 3.5px); }
.v3-pro-call--sent{ left: calc(100% + 20px); --y: 33.6%; --dx: 2.0cqw; }                          /* past "Sent the clipboard · 66 bytes" */
.v3-pro-call--sent::before{ right: calc(100% + 8px); width: calc(12px + var(--dx)); }
.v3-pro-call--sent::after{ right: calc(100% + 20px + var(--dx) - 3.5px); }

/* ── between a desk and a tablet ── */
@media (max-width: 1239px){
  .v3-pro-tools, .v3-pro-mba{ grid-column: 1 / -1; }
  .v3-pro .v3-pro-tools-pane{ align-self: flex-end; width: min(calc(100% - var(--pad)), 764px); }
  .v3-pro-mba-board{ grid-template-columns: repeat(3, minmax(0, 332px)); justify-content: start; justify-items: start; }
}
@media (max-width: 1099px){
  .v3-pro-ask-frame{ width: min(66%, 840px); }
  .v3-pro-call{ width: 104px; font-size: 13.5px; }
}

/* ── a phone: each poster its own crop, the app's text at 11 px or more ── */
@media (max-width: 699px){
  .v3-pro-url{ font-size: .8em; }
  .v3-pro-work{ display: flex; flex-direction: column; }
  .v3-pro-work::before{ inset: 0 0 auto; width: auto; height: 40%; background: linear-gradient(180deg, rgb(6 8 10 / .8), rgb(6 8 10 / .45) 60%, rgb(6 8 10 / 0)); }
  .v3-pro-work > .v3-pro-txt{ padding: var(--pad) var(--pad) 0; }
  .v3-pro .v3-pro-work-pane{ margin-top: 24px;
    /* the phone crop (1104…1429.5 × 150…580) */
    --v3-pro-nx: 3.072%; --v3-pro-ny: 23.953%; --v3-pro-nw: 100.768%; --v3-pro-nh: 76.047%;
    --v3-pro-nfill: linear-gradient(180deg, #202020, #1d1d1d 25.3%, #131313 97%); }
  .v3-pro .v3-pro-tools-pane{ width: 100%; margin: auto 0 0; }
  .v3-pro-tools > .v3-pro-txt{ margin-bottom: 24px; }
  .v3-pro-mba-board{ grid-template-columns: 1fr; justify-items: center; }
  .v3-pro-ask-frame{ width: 100%; margin: 28px 0 22px; }
  .v3-pro .v3-pro-call{ position: static; transform: none; width: auto; display: flex; align-items: center; gap: 10px; margin: 0 var(--pad); padding-top: 12px; font-size: 14.5px; }
  .v3-pro-call::before{ content: none; }
  .v3-pro-call::after{ position: static; flex: none; order: -1; }
  .v3-pro-call--ctx{ text-align: left; }
}

@media (prefers-reduced-motion: reduce){
  .v3-pro-note{ visibility: hidden !important; }
}

/* ▸ 60-all.css */
/* css/sections/60-all.css: L-6 · everything, how it runs, pricing, FAQ, the closing call (#everything, #pricing, #faq).
   Every class and id here starts with .v3-all-. The index is set like Apple's "All new features" pages: groups flowing
   in three balanced columns, a line glyph, a name and one plain line per feature; a finder over it that matches the way
   Hyperlaunch's own search does. Pricing, the FAQ and the closing call wear the family's components. */


/* ───────────────────────── the head and the finder ───────────────────────── */

.v3-all-top{ display: grid; gap: 22px; justify-items: start; }
.v3-all-top .lead{ max-width: 34em; }
.v3-all-find{ display: grid; gap: 14px; width: min(100%, 640px); margin-top: clamp(14px, 2vw, 26px); }
.v3-all-find[hidden]{ display: none; }
.v3-all-field{
  position: relative; display: flex; align-items: center; gap: 12px;
  height: 56px; padding: 0 10px 0 52px; border-radius: 999px;
  background: var(--soft); box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow .2s var(--hf-ease, ease), background-color .2s var(--hf-ease, ease);
}
.v3-all-field:focus-within{ background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--text-2), 0 10px 30px -18px rgb(10 22 32 / .45); }
.v3-all-fi{
  position: absolute; left: 19px; top: 50%; width: 22px; height: 22px; margin-top: -11px;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: var(--text-2);
}
.v3-all-q{
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; outline: none;
  font: 500 18px/1 var(--font); letter-spacing: -.012em; color: var(--ink);
}
.v3-all-q::placeholder{ color: var(--text-2); opacity: 1; }
.v3-all-q::-webkit-search-cancel-button, .v3-all-q::-webkit-search-decoration{ -webkit-appearance: none; appearance: none; }
.v3-all-field:has(.v3-all-q:focus-visible){ outline: 2.5px solid var(--focus); outline-offset: 3px; }
.v3-all-field .v3-all-q:focus-visible{ outline: none; }   /* the ring goes round the whole pill, not the field inside it */
.v3-all-count{ padding-right: 10px; font: 600 14px/1 var(--font); font-variant-numeric: tabular-nums; color: var(--text-2); white-space: nowrap; }
.v3-all-clear{
  display: grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  background: var(--card-2); color: var(--text); cursor: pointer;
}
.v3-all-clear[hidden]{ display: none; }
.v3-all-clear svg{ width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.v3-all-clear:hover{ background: var(--line-2); }
.v3-all-hint{ padding-left: 4px; font-size: 15px; line-height: 1.4; color: var(--text-2); }
.v3-all-tries{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-left: 4px; margin-top: -4px; font-size: 15px; color: var(--text-2); }
.v3-all-tries > span{ margin-right: 2px; }
.v3-all-try{
  height: 30px; padding: 0 12px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--soft); color: var(--soft-ink); font: 600 14px/1 var(--font); letter-spacing: -.005em;
  transition: background-color .18s;
}
.v3-all-try:hover{ background: var(--card-2); }
.v3-all-answer{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 2px 4px 0;
  font: 500 17px/1.35 var(--font); color: var(--text-2);
}
.v3-all-answer[hidden]{ display: none; }
.v3-all-aq{ font-family: var(--mono); font-size: 15px; color: var(--text); }
.v3-all-av{ font: 700 22px/1.1 var(--font-d); letter-spacing: -.015em; color: var(--ink); font-variant-numeric: tabular-nums; }
.v3-all-ah{ flex-basis: 100%; font-size: 14px; }

/* ───────────────────────── the index ───────────────────────── */

.v3-all-cols{ margin-top: clamp(52px, 5.6vw, 84px); columns: 3; column-gap: clamp(36px, 4.2vw, 64px); }
.v3-all-grp{ padding: 22px 0 40px; border-top: 1px solid var(--line-2); break-inside: avoid; }   /* whole groups: Chrome balances the three columns only then */
.v3-all-grp[hidden]{ display: none; }
h3.v3-all-gh{
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 20px;
  font: 700 21px/1.2 var(--font-d); letter-spacing: -.016em; color: var(--ink);
  break-after: avoid;
}
.v3-all-gc{ font: 600 14px/1 var(--font); font-variant-numeric: tabular-nums; color: var(--text-2); }
.v3-all-it{ position: relative; padding-left: 36px; break-inside: avoid; }
.v3-all-it + .v3-all-it{ margin-top: 17px; }
.v3-all-it[hidden]{ display: none; }
.v3-all-g{
  position: absolute; left: 0; top: -1px; width: 23px; height: 23px;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  color: var(--ink); opacity: .84;
}
.v3-all-it dt{ font: 650 15.5px/1.3 var(--font-d); letter-spacing: -.012em; color: var(--ink); text-wrap: balance; }
.v3-all-it dd{ margin: 3px 0 0; font: 500 14.5px/1.42 var(--font); letter-spacing: -.004em; color: var(--text-2); text-wrap: pretty; }
.v3-all-flag{
  display: inline-block; margin: 0 0 0 7px; padding: 3px 7px 3px; border-radius: 6px; vertical-align: 2px;
  background: var(--soft); box-shadow: inset 0 0 0 1px var(--line);
  font: 600 11.5px/1.2 var(--font); letter-spacing: 0; color: var(--soft-ink); white-space: nowrap;
}
.v3-all-it kbd, .v3-all-facts kbd, .v3-all-faq kbd{
  display: inline-block; padding: 2px 5px 1px; border-radius: 6px;
  background: var(--soft); box-shadow: inset 0 -1px 0 var(--line-2), inset 0 0 0 1px var(--line);
  font: 600 .88em/1.25 var(--font); letter-spacing: .06em; color: var(--soft-ink); white-space: nowrap;
}
.v3-all-it code, .v3-all-faq code{ font: 500 .9em/1 var(--mono); color: var(--text); }
.v3-all-n mark{ background: none; color: var(--accent); }
.v3-all-it.is-hit .v3-all-g{ color: var(--accent); opacity: 1; }
p.v3-all-none{ margin-top: 28px; font-size: 17px; color: var(--text-2); }
.v3-all-none[hidden]{ display: none; }
.v3-all-none span{ color: var(--ink); }

/* a group as a disclosure on phones (the script makes the buttons; without it every group is open) */
.v3-all-gbtn{
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; margin: -12px 0; padding: 0;
  border: 0; background: none; font: inherit; letter-spacing: inherit; color: inherit; text-align: left; cursor: pointer;
}
.v3-all-gbtn .v3-all-gt{ flex: 1; }
.v3-all-gbtn svg{ width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--text-2); transition: transform .3s var(--hf-ease, ease); }
.v3-all-gbtn[aria-expanded="true"] svg{ transform: rotate(180deg); }
.v3-all-grp.is-shut .v3-all-list{ display: none; }
.v3-all-grp.is-shut{ padding-bottom: 22px; }
.v3-all-grp.is-shut h3.v3-all-gh{ margin-bottom: 0; }

/* ───────────────────────── how it runs ───────────────────────── */

.v3-all-runs{ margin-top: clamp(40px, 5vw, 76px); }
.v3-all-runs__in{ padding: clamp(32px, 4.6vw, 64px); border-radius: var(--r-big); background: var(--card); color: var(--card-ink); }
.v3-all-runs__h{
  max-width: 17em; text-wrap: balance;
  font: 700 clamp(30px, 3.2vw, 46px)/1.06 var(--font-d); letter-spacing: -.022em; color: var(--ink);
}
.v3-all-runs__cols{ display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); gap: clamp(28px, 4.4vw, 72px); margin-top: clamp(30px, 3.4vw, 48px); align-items: start; }
.v3-all-runs__k{ padding-bottom: 14px; border-bottom: 1px solid var(--line-2); font: 650 17px/1.2 var(--font-d); letter-spacing: -.012em; color: var(--ink); }
.v3-all-facts > div{ padding: 16px 0 17px; border-bottom: 1px solid var(--line); }
.v3-all-facts > div[hidden]{ display: none; }
.v3-all-facts dt{ font: 650 16px/1.3 var(--font-d); letter-spacing: -.012em; color: var(--ink); }
.v3-all-facts dd{ margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
/* the accent as words on the light card reads 4.1 : 1; its deeper step 4.9 : 1 */
:root:not([data-theme="dark"]) .v3-all-runs .link{ color: var(--accent-deep); }

/* ───────────────────────── pricing ───────────────────────── */

.v3-all-price .plan__head{ min-height: 30px; }   /* the pass's row of icons is 30 px tall: every plan's price starts on one line */
.v3-all-fam__apps{ display: inline-flex; gap: 6px; }
.v3-all-fam__apps img{ width: 30px; height: 30px; border-radius: 7px; }
p.v3-all-fine{ margin-top: 30px; max-width: 62em; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.v3-all-fine b{ color: var(--ink); font-weight: 650; }

/* ───────────────────────── the closing call ───────────────────────── */

.v3-all-cta__icon{ width: clamp(88px, 9vw, 112px); height: auto; border-radius: 24%; }
.v3-all-cta .fine{ max-width: 46em; }
/* the echo (js/site.js fills it): greys only in the light theme (critic #12: the accent tiles read as salmon on white) */
:root:not([data-theme="dark"]) .v3-all-cta .echo__grid i.a{ background: var(--tile); opacity: calc(.78 * var(--tile-o)); }

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

@media (max-width: 1099px){
  .v3-all-cols{ columns: 2; }
  .v3-all-runs__cols{ grid-template-columns: 1fr; }
}
@media (max-width: 699px){
  .v3-all-cols{ columns: 1; margin-top: 40px; }
  .v3-all-grp{ padding: 20px 0 30px; }
  h3.v3-all-gh{ font-size: 20px; margin-bottom: 18px; }
  .v3-all-field{ height: 52px; padding-left: 48px; }
  .v3-all-fi{ left: 16px; }
  .v3-all-q{ font-size: 17px; }
  .v3-all-count{ display: none; }
  .v3-all-it dd{ font-size: 15px; }
  .v3-all-runs__in{ padding: 28px 22px 12px; border-radius: 30px; }
  .v3-all-fam__apps img{ width: 26px; height: 26px; border-radius: 6px; }
}
@media (prefers-reduced-motion: reduce){
  .v3-all-field, .v3-all-gbtn svg{ transition: none; }
}