/* Built by tools/scope-css.mjs from css/family.css (every selector kept off the library's widgets, with no specificity added):
   never edit this file; copy the shared family.css in again and run node tools/scope-css.mjs. */
/* The Hyper family's sites — the shared parts (v2, 13 Nov 2026; v3 the same evening: the nav on top, the motion kit).
   Hyper Island's copy is the canonical one: Hyperlaunch's and Hyper Widgets' sites copy it whole. Each site keeps its own
   accent, scene, content and config in its own site.css. Motion (reveals, word fills, scroll scenes) is the family's
   kit: css/family-motion.css + js/family-motion.js, loaded beside this file.

   Posters, not screenshots: the page is a run of self-contained cards, each a picture of the app with one point to make,
   cropped tight on a real background, a title and one plain line on a scrim. Type is the system's San Francisco only:
   left-aligned 700 headlines in two tones, 17–20 px body; flat fills, big radii, pill buttons and chips; a floating
   glass nav on top; a dark chapter, a quiet closing call; the blurry screen wherever a Mac display shows. Light and dark
   follow the system until the visitor picks one. Nothing plays by itself.

   A site's site.css sets: --accent, --accent-2, --on-accent, --focus (light and [data-theme="dark"]), --accent-on-dark and
   --on-accent-dark (the dark chapter), --accent-deep (ticks on the dark plan in dark mode), --loud-bg, --loud-ink,
   --loud-ink-2 (the loud card), and the --frost image of each .disp--<grade> it uses. */

:root{
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-d: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --wordmark: "Martian Mono", ui-monospace, "SF Mono", monospace;

  --max: 1220px;
  --gutter: 60px;
  --gap: 28px;
  --r-card: clamp(28px, 3.6vw, 44px);
  --r-big: clamp(30px, 4.2vw, 52px);
  --nav-top: 12px;            /* the nav on top: 52 px tall, 12 px down; content starts at --nav-clear or lower */
  --nav-h: 52px;
  --nav-clear: 88px;

  /* light */
  --bg: #FBFCFD;
  --ink: #04090F;
  --text: #0C1620;
  --text-2: #565F68;          /* 6.3 : 1 on --bg */
  --mute-h: #858D95;          /* the quiet words of a headline: 3.3 : 1 on --bg (large text) */
  --card: #EDF0F2;
  --card-ink: #0C1620;
  --card-2: #E3E7EA;
  --line: rgb(12 22 32 / .1);
  --line-2: rgb(12 22 32 / .18);
  --soft: #EBEDF0;            /* secondary pills */
  --soft-ink: #1E242A;
  --glass: rgb(236 238 240 / .74);
  --glass-line: rgb(255 255 255 / .55);
  --glass-shadow: 0 10px 34px -14px rgb(10 22 32 / .32), 0 1px 2px rgb(10 22 32 / .06);
  --glass-pill: rgb(255 255 255 / .62);
  --glass-pill-hover: rgb(255 255 255 / .92);
  --dark-bg: #08090A;
  --dark-card: #1A1B1D;
  color-scheme: light;
}
[data-theme="dark"]:where(:not(.hw, .hw *)){
  --bg: #0A0B0C;
  --ink: #F6F8F9;
  --text: #E7EBEE;
  --text-2: #9AA2A9;          /* 7.4 : 1 on --bg */
  --mute-h: #6B7279;          /* 3.6 : 1 on --bg */
  --card: #17181A;
  --card-ink: #E7EBEE;
  --card-2: #202124;
  --line: rgb(255 255 255 / .1);
  --line-2: rgb(255 255 255 / .18);
  --soft: #222326;
  --soft-ink: #E7EBEE;
  --glass: rgb(34 35 38 / .72);
  --glass-line: rgb(255 255 255 / .12);
  --glass-shadow: 0 12px 36px -14px rgb(0 0 0 / .7), 0 0 0 .5px rgb(255 255 255 / .06);
  --glass-pill: rgb(255 255 255 / .08);
  --glass-pill-hover: rgb(255 255 255 / .16);
  --dark-bg: #000000;
  --dark-card: #151618;
  color-scheme: dark;
}

/* ───────────────────────── base ───────────────────────── */

*, *:where(:not(.hw, .hw *))::before, *:where(:not(.hw, .hw *))::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-top) + var(--nav-h) + 12px); scroll-padding-bottom: 24px; }   /* the nav on top never hides what has the focus */
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }
body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 500 17px/1.45 var(--font);
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1:where(:not(.hw, .hw *)), h2:where(:not(.hw, .hw *)), h3:where(:not(.hw, .hw *)), h4:where(:not(.hw, .hw *)), p:where(:not(.hw, .hw *)), ul:where(:not(.hw, .hw *)), ol:where(:not(.hw, .hw *)), dl:where(:not(.hw, .hw *)), dd:where(:not(.hw, .hw *)), figure:where(:not(.hw, .hw *)), blockquote:where(:not(.hw, .hw *)), pre:where(:not(.hw, .hw *)){ margin: 0; }
ul:where(:not(.hw, .hw *)), ol:where(:not(.hw, .hw *)){ padding: 0; list-style: none; }
img:where(:not(.hw, .hw *)), svg:where(:not(.hw, .hw *)), video:where(:not(.hw, .hw *)){ display: block; max-width: 100%; }
a:where(:not(.hw, .hw *)){ color: inherit; text-decoration: none; }
button:where(:not(.hw, .hw *)){ font: inherit; color: inherit; }
b:where(:not(.hw, .hw *)), strong:where(:not(.hw, .hw *)){ font-weight: 650; }
code:where(:not(.hw, .hw *)), pre:where(:not(.hw, .hw *)){ font-family: var(--mono); }
:focus-visible:where(:not(.hw, .hw *)){ outline: 2.5px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
::selection{ background: color-mix(in srgb, var(--accent) 30%, transparent); }

.wrap:where(:not(.hw, .hw *)){ width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.sr-only:where(:not(.hw, .hw *)){ position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip:where(:not(.hw, .hw *)){ position: fixed; left: 16px; top: 12px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 600; transform: translateY(-160%); transition: transform .2s; }
.skip:focus:where(:not(.hw, .hw *)){ transform: none; }

/* the system's line glyphs (16 × 16, stroked) */
.i:where(:not(.hw, .hw *)){ width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.i--fill:where(:not(.hw, .hw *)){ fill: currentColor; stroke: none; }

/* ───────────────────────── type ───────────────────────── */

.h-hero:where(:not(.hw, .hw *)){
  font: 700 clamp(46px, 6.4vw, 94px)/1.02 var(--font-d);
  letter-spacing: -.028em;
  color: var(--ink);
  max-width: 9.2em;
}
.h-ch:where(:not(.hw, .hw *)){
  font: 700 clamp(34px, 4.3vw, 60px)/1.05 var(--font-d);
  letter-spacing: -.024em;
  color: var(--ink);
  max-width: 14.6em;
  text-wrap: balance;
}
.m:where(:not(.hw, .hw *)){ color: var(--mute-h); }
.lead:where(:not(.hw, .hw *)){ font: 500 clamp(18px, 1.5vw, 20px)/1.4 var(--font); letter-spacing: -.012em; color: var(--text-2); max-width: 35em; text-wrap: pretty; }
.fine:where(:not(.hw, .hw *)){ font-size: 14px; color: var(--text-2); }
.link:where(:not(.hw, .hw *)){ color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.link:hover:where(:not(.hw, .hw *)){ text-decoration-thickness: 2px; }

/* ───────────────────────── buttons and chips ───────────────────────── */

.btn:where(:not(.hw, .hw *)){
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 54px; padding: 0 26px;
  border-radius: 999px; border: 0;
  font: 500 19px/1 var(--font); letter-spacing: -.01em;
  white-space: nowrap; cursor: pointer;
  transition: background-color .18s, color .18s, transform .12s;
}
.btn:active:where(:not(.hw, .hw *)){ transform: scale(.98); }
.btn--ink:where(:not(.hw, .hw *)){ background: var(--ink); color: var(--bg); }
.btn--ink:hover:where(:not(.hw, .hw *)){ background: var(--accent); color: var(--on-accent); }
.btn--soft:where(:not(.hw, .hw *)){ background: var(--soft); color: var(--soft-ink); }
.btn--soft:hover:where(:not(.hw, .hw *)){ background: var(--card-2); }
.btn--line:where(:not(.hw, .hw *)){ background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn--line:hover:where(:not(.hw, .hw *)){ box-shadow: inset 0 0 0 1.5px var(--text); }
.btn--sm:where(:not(.hw, .hw *)){ height: 40px; padding: 0 18px; font-size: 15px; }
.btn--block:where(:not(.hw, .hw *)){ width: 100%; }

.chips:where(:not(.hw, .hw *)){ display: flex; flex-wrap: wrap; gap: 10px; }
.chip:where(:not(.hw, .hw *)){
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px;
  border-radius: 999px;
  background: var(--soft); color: var(--soft-ink);
  font: 600 15px/1 var(--font); font-variant-numeric: tabular-nums; letter-spacing: -.005em;
  white-space: nowrap;
}
.chip .i:where(:not(.hw, .hw *)){ width: 16px; height: 16px; opacity: .8; }
.row:where(:not(.hw, .hw *)){ display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* ───────────────────────── the nav, on top (v3: the family's, identical on the three sites) ─────────────────────────
   A glass pill fixed at the top, centred, there from the first frame: the brand, the chapter links (aria-current on the
   chapter in view), the theme toggle and "Get notified". Content starts at --nav-clear or lower, so it never covers the
   hero's product. A soft shadow once the page has scrolled 8 px (.is-scrolled, from the sentinel .topnav__mark). Between
   720 and 1100 px the less-used links (li.topnav__more, then under 900 px li.topnav__less) leave the bar and a menu
   button opens a sheet of every link;
   under 720 px the bar is the brand, "Get notified" and the menu (the sheet then holds the theme toggle too). The sheet
   keeps the focus while open; Esc, a click outside or a link closes it. js/site.js drives it (no scroll listener).
   Markup (shell.html; only the links and brand change per site):
     <i class="topnav__mark" aria-hidden="true"></i>
     <header class="topnav" id="topnav"><nav class="topnav__bar" aria-label="Chapters">
       <a class="topnav__brand" href="#top"><img … width="24" height="24" alt=""><span>Name</span></a>
       <ul class="topnav__links"><li><a href="#…">…</a></li> <li class="topnav__more">…</li> …</ul>
       <div class="topnav__end"><button class="topnav__round theme-btn" …>sun, moon</button>
         <a class="topnav__cta" data-buy=…><span data-buy-label>Get notified</span></a>
         <button class="topnav__round topnav__menu" id="topnavMenu" aria-expanded="false" aria-controls="topnavSheet" …>
       </div></nav>
       <div class="topnav__sheet" id="topnavSheet" hidden>every link, then
         <button class="topnav__sheet-theme theme-btn" data-theme-text>sun, moon, <span>…</span></button></div>
     </header> */
.topnav__mark:where(:not(.hw, .hw *)){ position: absolute; top: 0; left: 0; width: 1px; height: 8px; pointer-events: none; }
.topnav:where(:not(.hw, .hw *)){
  position: fixed; z-index: 60;
  top: max(var(--nav-top), env(safe-area-inset-top)); left: 0; right: 0;
  width: min(1120px, 100% - 32px); margin-inline: auto;
}
.topnav__bar:where(:not(.hw, .hw *)){
  height: var(--nav-h);
  display: flex; align-items: center; gap: 8px;
  padding: 0 8px 0 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  backdrop-filter: saturate(1.6) blur(18px);
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px -14px rgb(10 22 32 / 0), 0 1px 2px rgb(10 22 32 / 0);
  transition: box-shadow .35s var(--hf-ease, ease-out);
}
.topnav.is-scrolled .topnav__bar:where(:not(.hw, .hw *)){ box-shadow: 0 10px 30px -14px rgb(10 22 32 / .26), 0 1px 2px rgb(10 22 32 / .05); }
[data-theme="dark"] .topnav.is-scrolled .topnav__bar:where(:not(.hw, .hw *)){ box-shadow: 0 12px 32px -14px rgb(0 0 0 / .7), 0 1px 2px rgb(0 0 0 / .3); }
.topnav__brand:where(:not(.hw, .hw *)){
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 8px 0 4px; border-radius: 999px;
  font: 600 15px/1 var(--font-d); letter-spacing: -.012em; color: var(--ink); white-space: nowrap;
}
.topnav__brand img:where(:not(.hw, .hw *)){ width: 24px; height: 24px; border-radius: 6px; }
.topnav__links:where(:not(.hw, .hw *)){ flex: 1; min-width: 0; display: flex; justify-content: center; gap: 2px; }
.topnav__links a:where(:not(.hw, .hw *)), .topnav__sheet a:where(:not(.hw, .hw *)){ transition: background-color .2s var(--hf-ease, ease-out), color .2s var(--hf-ease, ease-out); }
.topnav__links a:where(:not(.hw, .hw *)){
  display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 999px;
  font: 500 14px/1 var(--font); letter-spacing: -.006em; color: var(--text); white-space: nowrap;
}
.topnav__links a:hover:where(:not(.hw, .hw *)){ background: color-mix(in srgb, var(--ink) 6%, transparent); }
.topnav__links a[aria-current="true"]:where(:not(.hw, .hw *)){ background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); }
.topnav__end:where(:not(.hw, .hw *)){ flex: none; margin-left: auto; display: flex; align-items: center; gap: 6px; }
.topnav__round:where(:not(.hw, .hw *)){
  width: 32px; height: 32px; flex: none; padding: 0;
  display: inline-grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--text);
  cursor: pointer; transition: background-color .2s var(--hf-ease, ease-out);
}
.topnav__round:hover:where(:not(.hw, .hw *)), .topnav__round[aria-expanded="true"]:where(:not(.hw, .hw *)){ background: color-mix(in srgb, var(--ink) 8%, transparent); }
.topnav__round .i:where(:not(.hw, .hw *)){ width: 17px; height: 17px; }
.topnav__cta:where(:not(.hw, .hw *)){
  display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px;
  background: var(--ink); color: var(--bg);
  font: 600 14px/1 var(--font); letter-spacing: -.006em; white-space: nowrap;
  transition: background-color .2s var(--hf-ease, ease-out), color .2s var(--hf-ease, ease-out), transform .12s;
}
.topnav__cta:hover:where(:not(.hw, .hw *)){ background: var(--accent); color: var(--on-accent); }
.topnav__cta:active:where(:not(.hw, .hw *)){ transform: scale(.97); }
.topnav a:focus-visible:where(:not(.hw, .hw *)), .topnav button:focus-visible:where(:not(.hw, .hw *)){ border-radius: 999px; outline-offset: 2px; }
.topnav__menu:where(:not(.hw, .hw *)){ display: none; }
.theme-btn .i-moon:where(:not(.hw, .hw *)){ display: none; }
[data-theme="dark"] .theme-btn .i-sun:where(:not(.hw, .hw *)){ display: none; }
[data-theme="dark"] .theme-btn .i-moon:where(:not(.hw, .hw *)){ display: block; }
.topnav__sheet:where(:not(.hw, .hw *)){
  position: absolute; top: calc(100% + 8px); right: 0;
  width: min(300px, 100%); padding: 8px;
  display: grid; gap: 2px;
  border-radius: 26px;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  backdrop-filter: saturate(1.6) blur(18px);
  border: 1px solid var(--line);
  box-shadow: 0 22px 50px -20px rgb(10 22 32 / .36), 0 1px 2px rgb(10 22 32 / .06);
  transform-origin: top right;
  animation: topnav-sheet .36s var(--hf-ease, ease-out) both;
}
[data-theme="dark"] .topnav__sheet:where(:not(.hw, .hw *)){ box-shadow: 0 22px 50px -20px rgb(0 0 0 / .8), 0 0 0 .5px rgb(255 255 255 / .06); }
.topnav__sheet[hidden]:where(:not(.hw, .hw *)){ display: none; }
.topnav__sheet a:where(:not(.hw, .hw *)), .topnav__sheet-theme:where(:not(.hw, .hw *)){
  display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px; border-radius: 18px;
  font: 500 17px/1.2 var(--font); letter-spacing: -.01em; color: var(--text);
}
.topnav__sheet a:hover:where(:not(.hw, .hw *)), .topnav__sheet a[aria-current="true"]:where(:not(.hw, .hw *)), .topnav__sheet-theme:hover:where(:not(.hw, .hw *)){ background: color-mix(in srgb, var(--ink) 7%, transparent); }
.topnav__sheet a[aria-current="true"]:where(:not(.hw, .hw *)){ color: var(--ink); }
.topnav__sheet-theme:where(:not(.hw, .hw *)){ display: none; width: 100%; border: 0; background: transparent; text-align: left; cursor: pointer; }
.topnav__sheet-theme .i:where(:not(.hw, .hw *)){ width: 18px; height: 18px; }
@keyframes topnav-sheet{ from{ opacity: 0; transform: translate3d(0, -6px, 0) scale(.97); } }
@media (prefers-reduced-motion: reduce){ .topnav__sheet:where(:not(.hw, .hw *)){ animation: none; } }
@media (prefers-reduced-transparency: reduce){
  .topnav__bar:where(:not(.hw, .hw *)), .topnav__sheet:where(:not(.hw, .hw *)){ background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (max-width: 1099px){
  .topnav__more:where(:not(.hw, .hw *)){ display: none; }
  .topnav__menu:where(:not(.hw, .hw *)){ display: inline-grid; }
}
@media (max-width: 899px){ .topnav__less:where(:not(.hw, .hw *)){ display: none; } }
@media (max-width: 719px){
  .topnav__links:where(:not(.hw, .hw *)), .topnav__end > .theme-btn:where(:not(.hw, .hw *)){ display: none; }
  .topnav__sheet:where(:not(.hw, .hw *)){ left: 0; width: auto; transform-origin: top center; }
  .topnav__sheet-theme:where(:not(.hw, .hw *)){ display: flex; }
}

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

.hero:where(:not(.hw, .hw *)){ position: relative; padding: max(var(--nav-clear), clamp(64px, 6.6vw, 96px)) 0 0; isolation: isolate; }
.hero__in:where(:not(.hw, .hw *)){ position: relative; z-index: 1; }
.hero__app:where(:not(.hw, .hw *)){ display: inline-flex; align-items: center; gap: 12px; margin-bottom: 26px; font: 650 19px/1 var(--font-d); letter-spacing: -.015em; color: var(--ink); }
.hero__app img:where(:not(.hw, .hw *)){ width: 48px; height: 48px; border-radius: 12px; }
.hero .lead:where(:not(.hw, .hw *)){ margin-top: 22px; max-width: 36em; }
.hero .row:where(:not(.hw, .hw *)){ margin-top: 28px; }
.hero__poster:where(:not(.hw, .hw *)){ position: relative; z-index: 1; margin-top: clamp(28px, 2.8vw, 40px); }
.for-touch:where(:not(.hw, .hw *)){ display: none; }
@media (hover: none), (pointer: coarse){ .for-touch:where(:not(.hw, .hw *)){ display: inline; } .for-pointer:where(:not(.hw, .hw *)){ display: none; } }

/* ───────────────────────── chapters ───────────────────────── */

.ch:where(:not(.hw, .hw *)){ position: relative; padding: clamp(104px, 12vw, 168px) 0 0; }
.ch__head:where(:not(.hw, .hw *)){ display: grid; gap: 22px; }
.ch__head .lead:where(:not(.hw, .hw *)){ max-width: 33em; }
.ch--dark:where(:not(.hw, .hw *)){
  --bg: #08090A; --ink: #F6F8F9; --text: #E7EBEE; --text-2: #9AA2A9; --mute-h: #62686E; --card: #18191B; --card-ink: #E7EBEE;
  --line: rgb(255 255 255 / .1); --soft: #222326; --soft-ink: #E7EBEE; --accent: var(--accent-on-dark); --on-accent: var(--on-accent-dark); --focus: var(--accent-on-dark);
  margin-top: clamp(104px, 12vw, 168px);
  padding: clamp(96px, 11vw, 150px) 0;
  background: var(--bg); color: var(--text);
  color-scheme: dark;
}
[data-theme="dark"] .ch--dark:where(:not(.hw, .hw *)){ --bg: #000; --card: #121314; }
.ch--dark + .ch:where(:not(.hw, .hw *)){ padding-top: clamp(96px, 11vw, 150px); }

/* ───────────────────────── the bento of posters ───────────────────────── */

.bento:where(:not(.hw, .hw *)){ display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(44px, 5vw, 64px); align-items: stretch; }
.s4:where(:not(.hw, .hw *)){ grid-column: span 4; } .s5:where(:not(.hw, .hw *)){ grid-column: span 5; } .s6:where(:not(.hw, .hw *)){ grid-column: span 6; } .s7:where(:not(.hw, .hw *)){ grid-column: span 7; } .s8:where(:not(.hw, .hw *)){ grid-column: span 8; } .s12:where(:not(.hw, .hw *)){ grid-column: span 12; }

/* A poster: one picture of the app with one point to make, as tall as its picture needs (no fixed heights). Five
   compositions, named, alternated so that no two neighbours match: float, bleed, pieces, side, sequence; and a
   statement, words alone, for a feature without its picture yet. A picture's width is --w (of its column), --wp on a
   phone; --br and --bb let it run off the right and the foot. Pictures show at life size or less wherever they're 2×
   (2 px per CSS px at least); the 4× renders may stand larger. */
.pc:where(:not(.hw, .hw *)){
  --pad: clamp(24px, 2.8vw, 40px);
  position: relative; overflow: clip; isolation: isolate;
  display: flex; flex-direction: column;
  border-radius: var(--r-card);
  background: var(--fill, #0D1217); color: #fff;
}
.pc__bg:where(:not(.hw, .hw *)){ position: absolute; inset: 0; z-index: -2; }
.pc__bg img:where(:not(.hw, .hw *)), .pc__bg picture:where(:not(.hw, .hw *)){ display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--bgpos, 50% 50%); }
.pc__txt:where(:not(.hw, .hw *)){ position: relative; z-index: 2; padding: var(--pad) var(--pad) 0; max-width: 40em; }
.pc__txt h3:where(:not(.hw, .hw *)){ font: 700 clamp(23px, 2vw, 28px)/1.1 var(--font-d); letter-spacing: -.02em; text-wrap: balance; }
.s12 > .pc__txt h3:where(:not(.hw, .hw *)), .s12 .pc__lead h3:where(:not(.hw, .hw *)){ font-size: clamp(30px, 3.3vw, 46px); line-height: 1.04; letter-spacing: -.026em; }
.pc__txt p:where(:not(.hw, .hw *)){ margin-top: 10px; font: 500 16px/1.4 var(--font); letter-spacing: -.004em; color: rgb(236 241 244 / .86); text-wrap: pretty; max-width: 30em; }
.s12 > .pc__txt p:where(:not(.hw, .hw *)), .s12 .pc__lead p:where(:not(.hw, .hw *)){ font-size: 18px; }
.pc__media:where(:not(.hw, .hw *)){ position: relative; z-index: 1; flex: none; width: var(--w, 80%); max-width: none; }
.pc__media > img:where(:not(.hw, .hw *)), .pc__media > video:where(:not(.hw, .hw *)){ display: block; width: 100%; height: auto; }
.pc__media > video:where(:not(.hw, .hw *)){ position: absolute; inset: 0; height: 100%; opacity: 0; transition: opacity .2s; pointer-events: none; }
.pc.is-playing .pc__media > video:where(:not(.hw, .hw *)){ opacity: 1; }
.pc--light:where(:not(.hw, .hw *)){ color: #0C1620; }
.pc--light .pc__txt p:where(:not(.hw, .hw *)){ color: rgb(12 22 32 / .86); }
.pc--card:where(:not(.hw, .hw *)){ background: var(--card); color: var(--card-ink); }
.pc--card .pc__txt p:where(:not(.hw, .hw *)), .pc--card .piece figcaption:where(:not(.hw, .hw *)){ color: var(--text-2); }
[data-theme="dark"] .pc--themed:where(:not(.hw, .hw *)){ color: #fff; }
[data-theme="dark"] .pc--themed .pc__txt p:where(:not(.hw, .hw *)){ color: rgb(236 241 244 / .86); }
.pc--set:where(:not(.hw, .hw *)){ background: var(--set-l, #F1F1F3); color: #0C1620; }
.pc--set .pc__txt p:where(:not(.hw, .hw *)){ color: rgb(12 22 32 / .72); }
[data-theme="dark"] .pc--set:where(:not(.hw, .hw *)){ background: var(--set-d, #1E1E20); color: #fff; }
[data-theme="dark"] .pc--set .pc__txt p:where(:not(.hw, .hw *)){ color: rgb(236 241 244 / .8); }
/* the focus ring on a dark poster is the light accent in either theme */
.pc:not(.pc--light):not(.pc--card):not(.pc--set):where(:not(.hw, .hw *)){ --focus: var(--accent-on-dark); }

/* float: the scene fills the poster, the picture floats large in its middle, the words on a short scrim at the foot */
.pc--float:where(:not(.hw, .hw *)){ justify-content: flex-end; }
.pc--float > .pc__media:where(:not(.hw, .hw *)){ margin: var(--mt, clamp(56px, 7vw, 92px)) 0 var(--mb, clamp(28px, 3.4vw, 48px)) calc((100% - var(--w, 80%)) / 2); transform: translateX(var(--x, 0px)); }
.pc--float > .pc__txt:where(:not(.hw, .hw *)){ padding: 0 var(--pad) var(--pad); }
.pc--float:where(:not(.hw, .hw *))::after{ content: ""; position: absolute; inset: auto 0 0; height: var(--scrim, 44%); z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgb(0 0 0 / 0), rgb(0 0 0 / .6) 62%, rgb(0 0 0 / .72)); }
.pc--float.pc--light:where(:not(.hw, .hw *))::after, .pc--float.pc--set:where(:not(.hw, .hw *))::after{ background: linear-gradient(180deg, rgb(250 251 252 / 0), rgb(250 251 252 / .82) 62%, rgb(250 251 252 / .92)); }
[data-theme="dark"] .pc--float.pc--set:where(:not(.hw, .hw *))::after{ background: linear-gradient(180deg, rgb(30 30 32 / 0), rgb(30 30 32 / .9) 62%); }

/* bleed: the words at the top left; the picture large below them, running off the poster's right and its foot */
.pc--bleed > .pc__media:where(:not(.hw, .hw *)){ align-self: flex-end; margin: clamp(24px, 2.8vw, 40px) calc(-1 * var(--br, 0px)) calc(-1 * var(--bb, 0px)) auto; }
.pc--bleed > .pc__media.disp--flow:where(:not(.hw, .hw *)){ margin-left: var(--ml, auto); }

/* side: the words in the left third, the picture in the rest, running off the right */
.pc--side:where(:not(.hw, .hw *)){ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: center; }
.pc--side > .pc__txt:where(:not(.hw, .hw *)){ padding: var(--pad); }
/* a light side poster on a scene: a soft scrim under its words, from the left */
.pc--side.pc--light:where(:not(.hw, .hw *))::before{ content: ""; position: absolute; inset: 0 auto 0 0; width: 52%; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgb(250 251 252 / .78), rgb(250 251 252 / .5) 55%, rgb(250 251 252 / 0)); }
[data-theme="dark"] .pc--side.pc--light.pc--themed:where(:not(.hw, .hw *))::before{ background: linear-gradient(90deg, rgb(8 12 16 / .55), rgb(8 12 16 / 0)); }
.pc--side > .pc__media:where(:not(.hw, .hw *)){ justify-self: start; margin: var(--mt, var(--pad)) calc(-1 * var(--br, 0px)) var(--mb, var(--pad)) 0; }

/* pieces: states at a large scale on a flat card, each with its label; sequence: one move, frame by frame */
.pc--pieces:where(:not(.hw, .hw *)){ background: var(--card); color: var(--card-ink); }
.pc--pieces .pc__txt p:where(:not(.hw, .hw *)){ color: var(--text-2); }
.pieces:where(:not(.hw, .hw *)){ position: relative; z-index: 1; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: clamp(22px, 2.6vw, 34px) clamp(16px, 2vw, 28px); align-items: end; padding: clamp(26px, 3vw, 42px) var(--pad) var(--pad); }
.piece:where(:not(.hw, .hw *)){ margin: 0; display: grid; gap: 12px; justify-items: center; align-content: end; min-width: 0; }
.piece > img:where(:not(.hw, .hw *)){ display: block; width: var(--pw, 100%); max-width: 100%; height: auto; }
.piece figcaption:where(:not(.hw, .hw *)){ font: 600 14px/1.3 var(--font); letter-spacing: -.004em; color: var(--text-2); text-align: center; }
.piece figcaption b:where(:not(.hw, .hw *)){ display: block; font-weight: 650; color: var(--ink); }
.pc--seq .pieces:where(:not(.hw, .hw *)){ grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); align-items: start; }
.pc--seq .piece:where(:not(.hw, .hw *)){ justify-items: start; align-content: start; }
.pc--seq .piece figcaption:where(:not(.hw, .hw *)){ text-align: left; }
.pc--seq .piece figcaption span:where(:not(.hw, .hw *)){ font-variant-numeric: tabular-nums; }

/* a statement: words alone, large */
.pc--say:where(:not(.hw, .hw *)){ background: var(--card); color: var(--card-ink); justify-content: space-between; }
.pc--say .say:where(:not(.hw, .hw *)){ padding: var(--pad) var(--pad) 0; font: 700 clamp(30px, 3.2vw, 44px)/1.05 var(--font-d); letter-spacing: -.026em; color: var(--ink); text-wrap: balance; }
.pc--say .say .m:where(:not(.hw, .hw *)){ color: var(--mute-h); }
.pc--say .pc__txt:where(:not(.hw, .hw *)){ padding-bottom: var(--pad); }
.pc--say .pc__txt p:where(:not(.hw, .hw *)){ color: var(--text-2); }

/* the chapter that is one tall poster: its own lead, then its parts */
.pc--tall .pc__lead:where(:not(.hw, .hw *)){ position: relative; z-index: 2; padding: var(--pad) var(--pad) 0; max-width: 46em; }
.pc--tall .pc__lead h3:where(:not(.hw, .hw *)){ font: 700 clamp(30px, 3.3vw, 46px)/1.04 var(--font-d); letter-spacing: -.026em; }
.pc--tall .pc__lead p:where(:not(.hw, .hw *)){ margin-top: 10px; font: 500 18px/1.4 var(--font); color: rgb(12 22 32 / .72); max-width: 34em; }
[data-theme="dark"] .pc--tall .pc__lead p:where(:not(.hw, .hw *)){ color: rgb(236 241 244 / .84); }
.pc--tall .part:where(:not(.hw, .hw *)){ position: relative; z-index: 1; padding: clamp(26px, 3vw, 40px) var(--pad) 0; }
.pc--tall .part > h4:where(:not(.hw, .hw *)){ font: 650 15px/1.2 var(--font); letter-spacing: -.004em; margin-bottom: 14px; }
.pc--tall .part > h4 span:where(:not(.hw, .hw *)){ font-weight: 500; opacity: .72; }
.pc--tall .piece figcaption:where(:not(.hw, .hw *)){ padding: 7px 13px; border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--text); }

/* play: a clip plays while the poster is hovered, or after a press (never by itself, never with Reduce Motion) */
.pc__play:where(:not(.hw, .hw *)){
  position: absolute; right: clamp(16px, 2vw, 24px); bottom: clamp(18px, 2.2vw, 26px); z-index: 3;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: rgb(255 255 255 / .18);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff; cursor: pointer; transition: background-color .15s;
}
.pc__play:hover:where(:not(.hw, .hw *)){ background: rgb(255 255 255 / .3); }
.pc__play .i:where(:not(.hw, .hw *)){ width: 16px; height: 16px; }
.pc__play .i-pause:where(:not(.hw, .hw *)){ display: none; }
.pc.is-playing .pc__play .i-play:where(:not(.hw, .hw *)){ display: none; }
.pc.is-playing .pc__play .i-pause:where(:not(.hw, .hw *)){ display: block; }
@media (prefers-reduced-motion: reduce){ .pc__play:where(:not(.hw, .hw *)){ display: none; } }

.pc:has(.pc__play) > .pc__txt:where(:not(.hw, .hw *)){ padding-right: 84px; }
/* two cards side by side (the player and the to-do), at life size */
.cards2:where(:not(.hw, .hw *)){ display: flex; gap: 24px; align-items: flex-start; }
.cards2 > img:where(:not(.hw, .hw *)){ width: min(332px, 48%); flex: none; }
.cards2 > img + img:where(:not(.hw, .hw *)){ margin-top: 48px; }
/* a window standing on a blurry screen (Settings) */
.disp > img.win:where(:not(.hw, .hw *)){ max-width: none; border-radius: 12px; box-shadow: 0 30px 70px -34px rgb(4 12 20 / .55), 0 0 0 .5px rgb(4 12 20 / .2); }
/* the snap bar hanging from the screen's top edge, the zones under it */
.snapzones:where(:not(.hw, .hw *)){ padding: 0 0 34px 30px; display: flex; gap: 34px; align-items: flex-start; }
.snapzones > img + img:where(:not(.hw, .hw *)){ margin-top: 36px; }
.snapzones > img:where(:not(.hw, .hw *)){ max-width: none; }

/* glyph notes (the developers' three) */
.glyphs:where(:not(.hw, .hw *)){ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.glyph:where(:not(.hw, .hw *)){ display: grid; gap: 10px; align-content: start; }
.glyph .i:where(:not(.hw, .hw *)){ width: 40px; height: 40px; stroke-width: 1.5; color: var(--accent); }
.glyph b:where(:not(.hw, .hw *)){ font: 700 20px/1.15 var(--font-d); letter-spacing: -.015em; color: var(--ink); }
.glyph p:where(:not(.hw, .hw *)){ font-size: 15px; line-height: 1.4; color: var(--text-2); }

/* ───────────────────────── the blurry screen (the owner's rule, 10 Nov: "like the cooldock's blurry screen. This is main") ─────────────────────────
   Wherever a poster shows a Mac display, the display is a slab of frosted glass in front of the poster's scene: the
   scene's own frosted copy (--frost: a heavy blur, a little milk or smoke), placed in the poster's box with the same
   cover and position (--bgpos) as the photograph, so the blur lines up with the scene round it; a veil thickening
   toward the foot; a hairline of light along the top edge. The slab is inset from the poster's sides and top (--dl,
   --dr, --dt) and runs off its foot; .disp--foot is inset from the foot (--db) and runs off its top (the Dock).
   .disp--flow stands in the poster's flow (the hero, whose height is the screen's). */
.pc:where(:not(.hw, .hw *)), .hposter:where(:not(.hw, .hw *)), .lost__card:where(:not(.hw, .hw *)){ --dl: 22px; --dt: 22px; --db: 22px; --disp-r: 22px; }
.disp:where(:not(.hw, .hw *)){
  position: absolute; z-index: -1;
  left: var(--dl); right: var(--dr, var(--dl)); top: var(--dt); bottom: 0;
  overflow: hidden;
  border-radius: var(--disp-rr, var(--disp-r) var(--disp-r) 0 0);
}
.disp > img:where(:not(.hw, .hw *)){ position: relative; z-index: 4; }
.disp--foot:where(:not(.hw, .hw *)){ top: 0; bottom: var(--db); border-radius: 0 0 var(--disp-r) var(--disp-r); }
.disp--flow:where(:not(.hw, .hw *)){ position: relative; left: auto; right: auto; top: auto; bottom: auto; z-index: 1; }
.disp__frost:where(:not(.hw, .hw *)){
  position: absolute;
  left: calc(-1 * var(--ox, var(--dl))); top: calc(-1 * var(--oy, var(--dt)));
  width: var(--cw, calc(100% + var(--dl) + var(--dr, var(--dl)))); height: var(--ch, calc(100% + var(--dt)));
  background: var(--frost) var(--bgpos, 50% 50%) / cover no-repeat;
}
.disp:where(:not(.hw, .hw *))::after{
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgb(20 28 36 / .1) 0%, rgb(22 30 38 / .24) 55%, rgb(26 34 42 / .44) 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), inset 0 0 0 .5px rgb(255 255 255 / .12);
}
.disp--milk:where(:not(.hw, .hw *))::after{
  background: linear-gradient(180deg, rgb(255 255 255 / .04) 0%, rgb(248 251 252 / .2) 45%, rgb(248 251 252 / .5) 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .75), inset 0 0 0 .5px rgb(255 255 255 / .35);
}
.disp--foot:where(:not(.hw, .hw *))::after{ background: linear-gradient(0deg, rgb(20 28 36 / .1) 0%, rgb(22 30 38 / .3) 100%); box-shadow: inset 0 -1px 0 rgb(255 255 255 / .18), inset 0 0 0 .5px rgb(255 255 255 / .12); }
.disp--foot.disp--milk:where(:not(.hw, .hw *))::after{ background: linear-gradient(0deg, rgb(248 251 252 / .3) 0%, rgb(248 251 252 / .5) 100%); box-shadow: inset 0 -1px 0 rgb(255 255 255 / .6), inset 0 0 0 .5px rgb(255 255 255 / .35); }
@media (prefers-reduced-transparency: reduce){
  .disp__frost:where(:not(.hw, .hw *)){ background-image: none; background-color: #C3D3DC; }
  [data-theme="dark"] .disp__frost:where(:not(.hw, .hw *)), .disp--dusk .disp__frost:where(:not(.hw, .hw *)), .disp--night .disp__frost:where(:not(.hw, .hw *)){ background-color: #27313B; }
}
@media (max-width: 700px){ .pc:where(:not(.hw, .hw *)), .hposter:where(:not(.hw, .hw *)), .lost__card:where(:not(.hw, .hw *)){ --dl: 14px; --dt: 14px; --db: 14px; --disp-r: 16px; } }

/* ───────────────────────── privacy: dark icon cards and one loud card ───────────────────────── */

.pv-grid:where(:not(.hw, .hw *)){ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: clamp(44px, 5vw, 64px); }
.pv:where(:not(.hw, .hw *)){ min-height: 300px; padding: 30px 28px 28px; border-radius: var(--r-card); background: var(--card); display: flex; flex-direction: column; gap: 16px; }
.pv .i:where(:not(.hw, .hw *)){ width: 46px; height: 46px; stroke-width: 1.45; color: var(--accent); }
.pv h3:where(:not(.hw, .hw *)){ font: 700 23px/1.14 var(--font-d); letter-spacing: -.018em; color: var(--accent); }
.pv h3 span:where(:not(.hw, .hw *)){ display: block; color: var(--ink); }
.pv p:where(:not(.hw, .hw *)){ margin-top: auto; font-size: 15.5px; line-height: 1.45; color: var(--text-2); }
.loud:where(:not(.hw, .hw *)){
  margin-top: 28px;
  display: grid; grid-template-columns: auto 1fr 1fr; gap: clamp(20px, 3vw, 48px); align-items: center;
  padding: clamp(32px, 4vw, 52px) clamp(28px, 4.4vw, 62px);
  border-radius: var(--r-big);
  background: var(--loud-bg); color: var(--loud-ink);
}
.loud .i:where(:not(.hw, .hw *)){ width: clamp(64px, 7vw, 92px); height: clamp(64px, 7vw, 92px); stroke-width: 1.3; }
.loud h3:where(:not(.hw, .hw *)){ font: 700 clamp(28px, 3vw, 40px)/1.08 var(--font-d); letter-spacing: -.022em; }
.loud p:where(:not(.hw, .hw *)){ font: 650 clamp(19px, 1.7vw, 23px)/1.32 var(--font-d); letter-spacing: -.012em; color: var(--loud-ink-2); }

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

.plans:where(:not(.hw, .hw *)){ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(44px, 5vw, 64px); align-items: stretch; }
.plan:where(:not(.hw, .hw *)){ display: flex; flex-direction: column; gap: 18px; padding: 34px 30px 30px; border-radius: var(--r-card); background: var(--card); color: var(--card-ink); }
.plan--best:where(:not(.hw, .hw *)){ background: var(--ink); color: var(--bg); }
.plan__head:where(:not(.hw, .hw *)){ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.plan__head h3:where(:not(.hw, .hw *)){ font: 650 18px/1.2 var(--font-d); letter-spacing: -.012em; }
.tag:where(:not(.hw, .hw *)){ padding: 6px 11px; border-radius: 999px; background: var(--soft); font: 600 12.5px/1 var(--font); color: var(--soft-ink); white-space: nowrap; }
.price:where(:not(.hw, .hw *)){ display: flex; align-items: baseline; gap: 8px; }
.price b:where(:not(.hw, .hw *)){ font: 700 clamp(52px, 5.4vw, 68px)/1 var(--font-d); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.price span:where(:not(.hw, .hw *)){ font-size: 16px; opacity: .7; }
.price span span:where(:not(.hw, .hw *)){ opacity: 1; }
.plan__sum:where(:not(.hw, .hw *)){ font-size: 16px; opacity: .78; }
.ticks:where(:not(.hw, .hw *)){ display: grid; gap: 11px; margin: 4px 0 6px; font-size: 15.5px; }
.ticks li:where(:not(.hw, .hw *)){ display: flex; gap: 10px; align-items: flex-start; }
.ticks .i:where(:not(.hw, .hw *)){ width: 17px; height: 17px; margin-top: 2px; color: var(--accent); }
.plan--best .ticks .i:where(:not(.hw, .hw *)){ color: var(--accent-2); }
[data-theme="dark"] .plan--best .ticks .i:where(:not(.hw, .hw *)){ color: var(--accent-deep); }
.plan .btn:where(:not(.hw, .hw *)){ margin-top: auto; }
.plan--best .btn--soft:where(:not(.hw, .hw *)){ background: var(--bg); color: var(--ink); }
.plan--best .btn--soft:hover:where(:not(.hw, .hw *)){ background: var(--accent); color: var(--on-accent); }
.refund:where(:not(.hw, .hw *)){ font-size: 13.5px; opacity: .66; text-align: center; }
.promises:where(:not(.hw, .hw *)){ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 34px; }
.promises div:where(:not(.hw, .hw *)){ display: flex; gap: 14px; align-items: flex-start; }
.promises .i:where(:not(.hw, .hw *)){ width: 26px; height: 26px; color: var(--accent); margin-top: 2px; }
.promises b:where(:not(.hw, .hw *)){ display: block; font: 650 17px/1.3 var(--font-d); color: var(--ink); }
.promises p:where(:not(.hw, .hw *)){ font-size: 15px; line-height: 1.45; color: var(--text-2); }
.pricing-fine:where(:not(.hw, .hw *)){ margin-top: 30px; max-width: 60em; font-size: 14px; line-height: 1.5; color: var(--text-2); }

/* ───────────────────────── FAQ ───────────────────────── */

.faq:where(:not(.hw, .hw *)){ display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.faq__intro:where(:not(.hw, .hw *)){ position: sticky; top: 40px; display: grid; gap: 18px; }
.faq__list details:where(:not(.hw, .hw *)){ border-bottom: 1px solid var(--line); }
.faq__list details:first-child:where(:not(.hw, .hw *)){ border-top: 1px solid var(--line); }
.faq__list summary:where(:not(.hw, .hw *)){
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 22px 2px; cursor: pointer; list-style: none;
  font: 650 19px/1.3 var(--font-d); letter-spacing: -.014em; color: var(--ink);
}
.faq__list summary:where(:not(.hw, .hw *))::-webkit-details-marker{ display: none; }
.faq__list summary .i:where(:not(.hw, .hw *)){ width: 20px; height: 20px; transition: transform .2s; color: var(--text-2); }
.faq__list details[open] summary .i:where(:not(.hw, .hw *)){ transform: rotate(45deg); }
.faq__list .ans:where(:not(.hw, .hw *)){ padding: 0 40px 24px 2px; font-size: 16.5px; line-height: 1.55; color: var(--text-2); }
@media (prefers-reduced-motion: reduce){ .faq__list summary .i:where(:not(.hw, .hw *)){ transition: none; } }

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

.cta:where(:not(.hw, .hw *)){ position: relative; isolation: isolate; padding: clamp(130px, 14vw, 200px) 0 clamp(230px, 25vw, 340px); overflow: hidden; }
.cta .wrap:where(:not(.hw, .hw *)){ position: relative; z-index: 1; display: grid; gap: 26px; justify-items: start; }

/* ───────────────────────── footer ───────────────────────── */

.foot:where(:not(.hw, .hw *)){ padding: 56px 0 max(64px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); font-size: 14px; color: var(--text-2); }
.foot__top:where(:not(.hw, .hw *)){ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 22px 40px; align-items: center; }
.brand:where(:not(.hw, .hw *)){ display: inline-flex; align-items: center; gap: 10px; font: 650 17px/1 var(--font-d); letter-spacing: -.012em; color: var(--ink); }
.brand img:where(:not(.hw, .hw *)){ width: 30px; height: 30px; border-radius: 8px; }
.foot__links:where(:not(.hw, .hw *)){ display: flex; flex-wrap: wrap; gap: 10px 22px; }
.foot__links a:hover:where(:not(.hw, .hw *)), .foot__family a:hover:where(:not(.hw, .hw *)){ color: var(--ink); }
.foot__family:where(:not(.hw, .hw *)){ display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.foot__family span:where(:not(.hw, .hw *)){ color: var(--ink); font-weight: 600; }
.foot__legal:where(:not(.hw, .hw *)){ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px 40px; margin-top: 30px; align-items: end; }
.foot__legal > div:where(:not(.hw, .hw *)){ display: grid; gap: 6px; max-width: 64em; font-size: 13px; line-height: 1.5; }
.labs:where(:not(.hw, .hw *)){ display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.labs small:where(:not(.hw, .hw *)){ font-size: 12px; color: var(--text-2); }
.labs .mark:where(:not(.hw, .hw *)){ width: 22px; height: 22px; }
.wordmark:where(:not(.hw, .hw *)){ font: 500 16px/1 var(--wordmark); letter-spacing: -.01em; }
@font-face{ font-family: "Martian Mono"; src: url("../assets/fonts/MartianMono-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

/* ───────────────────────── the site's other pages' header (legal/, 404) ───────────────────────── */

.nav:where(:not(.hw, .hw *)){ position: sticky; top: 0; z-index: 50; padding: 14px 0; }
.nav__in:where(:not(.hw, .hw *)){ display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nav .brand:where(:not(.hw, .hw *)){
  height: 52px; padding: 0 18px 0 9px; border-radius: 30px;
  background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(1.7); backdrop-filter: blur(18px) saturate(1.7);
  border: 1.5px solid var(--glass-line); box-shadow: var(--glass-shadow);
}
.nav .brand img:where(:not(.hw, .hw *)){ width: 34px; height: 34px; }
.nav__end:where(:not(.hw, .hw *)){ display: flex; gap: 8px; }
.field:where(:not(.hw, .hw *)){ display: none; }

/* Reveals ([data-reveal], [data-reveal-group]), word fills ([data-fill]) and parallax are the motion kit's:
   css/family-motion.css and js/family-motion.js. */

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

@media (max-width: 1080px){
  .pv-grid:where(:not(.hw, .hw *)){ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .loud:where(:not(.hw, .hw *)){ grid-template-columns: auto 1fr; }
  .loud p:where(:not(.hw, .hw *)){ grid-column: 2; }
}
@media (max-width: 980px){
  :root{ --gutter: 32px; --gap: 20px; }
  .s4:where(:not(.hw, .hw *)), .s5:where(:not(.hw, .hw *)), .s7:where(:not(.hw, .hw *)), .s8:where(:not(.hw, .hw *)){ grid-column: span 6; }
  .s6.s6--full:where(:not(.hw, .hw *)){ grid-column: span 12; }
  .plans:where(:not(.hw, .hw *)){ grid-template-columns: 1fr; max-width: 560px; }
  .promises:where(:not(.hw, .hw *)){ grid-template-columns: 1fr; }
  .faq:where(:not(.hw, .hw *)){ grid-template-columns: 1fr; }
  .faq__intro:where(:not(.hw, .hw *)){ position: static; }
}
@media (max-width: 700px){
  :root{ --gutter: 16px; --gap: 16px; }
  body{ font-size: 16px; }
  .s4:where(:not(.hw, .hw *)), .s5:where(:not(.hw, .hw *)), .s6:where(:not(.hw, .hw *)), .s7:where(:not(.hw, .hw *)), .s8:where(:not(.hw, .hw *)), .s12:where(:not(.hw, .hw *)){ grid-column: span 12; }
  .pc__txt p:where(:not(.hw, .hw *)), .s12 > .pc__txt p:where(:not(.hw, .hw *)), .pc--tall .pc__lead p:where(:not(.hw, .hw *)){ font-size: 15.5px; }
  .pc__media:where(:not(.hw, .hw *)){ width: var(--wp, var(--w, 100%)); }
  .pc--float > .pc__media:where(:not(.hw, .hw *)){ transform: translateX(var(--xp, var(--x, 0px))); margin-top: var(--mtp, 48px); margin-left: calc((100% - var(--wp, var(--w, 100%))) / 2); }
  .pc--bleed > .pc__media:where(:not(.hw, .hw *)), .pc--bleed > .pc__media.disp--flow:where(:not(.hw, .hw *)), .pc--side > .pc__media:where(:not(.hw, .hw *)){ align-self: flex-start; justify-self: start; margin: 22px 0 calc(-1 * var(--bbp, 0px)) var(--xp, var(--pad)); }
  .piece:where(:not(.hw, .hw *)){ justify-items: start; }
  .piece figcaption:where(:not(.hw, .hw *)){ text-align: left; }
  .pc--side:where(:not(.hw, .hw *)){ display: flex; flex-direction: column; align-items: stretch; }
  .pc--side > .pc__txt:where(:not(.hw, .hw *)){ padding-bottom: 0; }
  .pc--side > .pc__media:where(:not(.hw, .hw *)){ margin-bottom: var(--pad); }
  .pieces:where(:not(.hw, .hw *)){ grid-template-columns: repeat(var(--np, 1), minmax(0, 1fr)); }
  .pc--seq .pieces:where(:not(.hw, .hw *)){ grid-template-columns: repeat(var(--np, 1), minmax(0, 1fr)); }
  .piece > img:where(:not(.hw, .hw *)){ width: var(--pwp, var(--pw, 100%)); max-width: none; }
  .cards2:where(:not(.hw, .hw *)){ flex-direction: column; gap: 16px; }
  .cards2 > img:where(:not(.hw, .hw *)){ width: min(332px, 100%); }
  .cards2 > img + img:where(:not(.hw, .hw *)){ margin-top: 0; }
  .snapzones:where(:not(.hw, .hw *)){ padding-left: 18px; flex-direction: column; gap: 0; }
  .snapzones > img + img:where(:not(.hw, .hw *)){ margin-top: 22px; }
  .disp > img.win:where(:not(.hw, .hw *)){ width: 880px !important; }
  .pc--tall .part .pc__media:where(:not(.hw, .hw *)){ margin-left: 0; }
  .pv-grid:where(:not(.hw, .hw *)){ grid-template-columns: 1fr; gap: 14px; }
  .pv:where(:not(.hw, .hw *)){ min-height: 0; display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 16px; row-gap: 8px; padding: 24px 22px; }
  .pv .i:where(:not(.hw, .hw *)){ grid-row: span 2; width: 36px; height: 36px; }
  .pv h3:where(:not(.hw, .hw *)){ font-size: 20px; }
  .pv p:where(:not(.hw, .hw *)){ margin-top: 0; }
  .loud:where(:not(.hw, .hw *)){ grid-template-columns: 1fr; }
  .loud p:where(:not(.hw, .hw *)){ grid-column: auto; }
  .glyphs:where(:not(.hw, .hw *)){ grid-template-columns: 1fr; gap: 22px; }
  .btn:where(:not(.hw, .hw *)){ height: 50px; padding: 0 22px; font-size: 17px; }
  .hero .row .btn:where(:not(.hw, .hw *)){ flex: 1 1 auto; }
  .faq__list summary:where(:not(.hw, .hw *)){ font-size: 17.5px; }
}