/* Hyper Widgets site — posters.
   The page is a run of self-contained cards, each a picture with one point to make. The pictures are the library's own
   widgets, drawn live by the engine (hw/): one widget large and crisp carries a poster, a collection is a wall that
   runs off the card's edges, the seven themes are a set, and wherever a Mac's desktop is the point, the widgets sit on
   a display of frosted glass in front of the misty hills (the owner's "blurry screen"). Type is the system's San
   Francisco: left-aligned headlines in two tones, flat fills, big radii, pill buttons, one accent (blue), and a floating
   glass bar at the foot of the window for the way round. The family's three sites share this system (type, buttons,
   chips, radii, the bar, the footer, the rhythm); each keeps its own accent, scene and content.
   Every page class is prefixed s- and the resets stop at a widget's edge (:not(.hw *)): the library uses plain class
   names (btn, foot, sheet, i…), and the first build's unprefixed CSS restyled widgets.
   v3: each section's own rules are in css/sections/NN-*.css (built into css/sections.css by tools/assemble.mjs); what
   stays here is shared.
   Sections: tokens · base · type · buttons and chips · the bar · echo · hero · the blurry screen · chapters · posters ·
   poster widgets · desks · themes · walls · glyphs · the dark chapter · sizes · hosts · the Index · the sheet · fields ·
   pricing · FAQ · closing · footer · other pages · motion · accessibility · widths */

/* ───────────────────────── tokens ───────────────────────── */

: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: "FL Wordmark", ui-monospace, "SF Mono", monospace;

  --max: 1220px;
  --gutter: 60px;
  --gap: 28px;
  --nav-clear: 88px;          /* the nav on top: the hero starts this far down (the family's name and value) */
  --r-card: clamp(28px, 3.6vw, 44px);
  --r-big: clamp(30px, 4.2vw, 52px);
  --ease: cubic-bezier(.2, .7, .2, 1);

  color-scheme: 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 only) */
  --card: #EDF0F2;
  --card-ink: #0C1620;
  --card-2: #E3E7EA;
  --line: rgb(12 22 32 / .1);
  --line-2: rgb(12 22 32 / .18);
  --line-3: rgb(12 22 32 / .28);
  --soft: #EBEDF0;
  --soft-ink: #1E242A;
  --accent: #0066E0;
  --accent-2: #0052B4;
  --accent-soft: rgb(0 102 224 / .1);
  --on-accent: #FFFFFF;
  --focus: #0066E0;
  --ok: #15803D;
  --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);
  --echo: #3D8BFF;
  --echo-o: .42;
  --hero-wash: radial-gradient(72% 82% at 12% 22%, rgb(250 251 252 / .86) 0%, rgb(250 251 252 / .72) 46%, rgb(250 251 252 / 0) 84%);
  --scene-scrim: linear-gradient(180deg, rgb(248 250 251 / 0) 0%, rgb(248 250 251 / .84) 58%, rgb(248 250 251 / .92) 100%);
  --scene-side: linear-gradient(90deg, rgb(248 250 251 / .9) 0%, rgb(248 250 251 / .74) 24%, rgb(248 250 251 / 0) 38%);
  --scene-side-wide: linear-gradient(90deg, rgb(248 250 251 / .92) 0%, rgb(248 250 251 / .86) 46%, rgb(248 250 251 / 0) 70%);

  /* the Index window and the sheet (macOS 26 glass) */
  --panel: #FFFFFF;
  --muted: #5B6470;
  --win-bg: #F3F4F7;
  --win-side: rgb(236 238 242 / .8);
  --win-sel: rgb(15 17 21 / .07);
  --frost: rgb(251 251 252 / .74);
  --frost-strong: rgb(250 250 252 / .86);
  --frost-edge: rgb(15 17 21 / .1);
  --frost-hi: rgb(255 255 255 / .9);
  --lg-fill: linear-gradient(180deg, rgb(255 255 255 / .62), rgb(246 247 250 / .42));
  --lg-edge: rgb(15 17 21 / .1);
  --lg-rim: rgb(255 255 255 / .3);
  --shadow-1: 0 1px 2px rgb(15 17 21 / .06);
  --shadow-win: 0 0 0 .5px rgb(15 17 21 / .14), 0 2px 4px rgb(15 17 21 / .05), 0 24px 48px -16px rgb(15 17 21 / .22), 0 64px 120px -48px rgb(15 17 21 / .28);
  --tip-bg: #5B606B;
  --tip-fg: #FFFFFF;

  /* the scenery and the display's glass */
  --scene-bg: #D9DDD6;
  --scene-ink: #04090F;
  --scene-text-2: #2B3037;
  --veil: linear-gradient(180deg, rgb(255 255 255 / .08) 0%, rgb(248 251 252 / .28) 45%, rgb(248 251 252 / .56) 100%);
  --veil-small: linear-gradient(180deg, rgb(255 255 255 / .16) 0%, rgb(248 251 252 / .4) 45%, rgb(248 251 252 / .62) 100%);
  --glass-top: rgb(255 255 255 / .75);
  --glass-rim: rgb(255 255 255 / .35);
  --mb-bg: rgb(255 255 255 / .2);
  --mb-mini: rgb(255 255 255 / .46);
  --mb-ink: rgb(14 16 20 / .86);
  --mb-line: rgb(14 16 20 / .06);
  --sheet-bg: rgb(250 250 251 / .56);
  --sheet-edge: inset 0 0 0 .5px rgb(255 255 255 / .85), inset 0 1px 0 rgb(255 255 255 / .9);
  --sheet-ink: rgb(20 24 30 / .7);
  --sheet-field: rgb(255 255 255 / .6);
  --sheet-line: rgb(20 24 30 / .1);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --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);
  --line-3: rgb(255 255 255 / .28);
  --soft: #222326;
  --soft-ink: #E7EBEE;
  --accent: #4C9BFF;
  --accent-2: #7DB6FF;
  --accent-soft: rgb(76 155 255 / .14);
  --on-accent: #04172E;
  --focus: #4C9BFF;
  --ok: #34D399;
  --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);
  --echo: #4C9BFF;
  --echo-o: .34;
  --hero-wash: radial-gradient(72% 82% at 12% 22%, rgb(8 10 12 / .72) 0%, rgb(8 10 12 / .56) 46%, rgb(8 10 12 / 0) 84%);
  --scene-scrim: linear-gradient(180deg, rgb(6 8 10 / 0) 0%, rgb(6 8 10 / .7) 60%, rgb(6 8 10 / .8) 100%);
  --scene-side: linear-gradient(90deg, rgb(6 8 10 / .8) 0%, rgb(6 8 10 / .6) 24%, rgb(6 8 10 / 0) 38%);
  --scene-side-wide: linear-gradient(90deg, rgb(6 8 10 / .8) 0%, rgb(6 8 10 / .66) 46%, rgb(6 8 10 / 0) 70%);

  --panel: #141518;
  --muted: #959CA7;
  --win-bg: #121317;
  --win-side: rgb(24 25 30 / .84);
  --win-sel: rgb(255 255 255 / .09);
  --frost: rgb(14 15 18 / .7);
  --frost-strong: rgb(22 23 27 / .86);
  --frost-edge: rgb(255 255 255 / .1);
  --frost-hi: rgb(255 255 255 / .1);
  --lg-fill: linear-gradient(180deg, rgb(255 255 255 / .1), rgb(255 255 255 / .04));
  --lg-edge: rgb(255 255 255 / .1);
  --lg-rim: rgb(255 255 255 / .05);
  --shadow-1: 0 1px 2px rgb(0 0 0 / .4);
  --shadow-win: 0 0 0 .5px rgb(255 255 255 / .16), 0 2px 4px rgb(0 0 0 / .3), 0 30px 60px -20px rgb(0 0 0 / .7), 0 80px 140px -40px rgb(0 0 0 / .75);
  --tip-bg: #F2F2F4;
  --tip-fg: #3A3D44;

  --scene-bg: #262C33;
  --scene-ink: #F6F8F9;
  --scene-text-2: #D5DAE1;
  --veil: linear-gradient(180deg, rgb(20 28 36 / .16) 0%, rgb(22 30 38 / .32) 55%, rgb(26 34 42 / .5) 100%);
  --veil-small: var(--veil);
  --glass-top: rgb(255 255 255 / .22);
  --glass-rim: rgb(255 255 255 / .12);
  --mb-bg: rgb(8 10 13 / .16);
  --mb-mini: rgb(8 10 13 / .3);
  --mb-ink: rgb(255 255 255 / .92);
  --mb-line: rgb(255 255 255 / .08);
  --sheet-bg: rgb(26 28 34 / .52);
  --sheet-edge: inset 0 0 0 .5px rgb(255 255 255 / .16), inset 0 -1px 0 rgb(255 255 255 / .06);
  --sheet-ink: rgb(255 255 255 / .7);
  --sheet-field: rgb(255 255 255 / .1);
  --sheet-line: rgb(255 255 255 / .16);
}

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

*, *::before, *::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; background: var(--bg); }   /* the nav on top never hides what has the focus */
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;
}
:where(img, svg, video):where(:not(.hw *)) { display: block; }
:where(img):where(:not(.hw *)) { max-width: 100%; }
:where(a):where(:not(.hw *)) { color: inherit; text-decoration: none; }
:where(button):where(:not(.hw *)) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(input, select):where(:not(.hw *)) { font: inherit; color: inherit; }
:where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure):where(:not(.hw *)) { margin: 0; }
:where(ul, ol):where(:not(.hw *)) { padding: 0; list-style: none; }
:where(strong, b):where(:not(.hw *)) { font-weight: 650; }
:where(code, kbd, samp):where(:not(.hw *)) { font-family: var(--mono); }
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }
:focus { outline: none; }
:where(:focus-visible):where(:not(.hw, .hw *)) { outline: 2.5px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

.s-wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.s-wrap--wide { width: min(100% - 2 * var(--gutter), 1320px); }
.s-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.s-skip { 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; }
.s-skip:focus { transform: none; }

/* the line glyphs (16 × 16, stroked) */
.s-i { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

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

.s-h-hero { font: 700 clamp(46px, 6.4vw, 94px)/1.02 var(--font-d); letter-spacing: -.028em; color: var(--ink); max-width: 9.2em; }
.s-h-ch { 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; }
.s-h-sub { font: 700 clamp(28px, 3vw, 40px)/1.08 var(--font-d); letter-spacing: -.022em; color: var(--ink); }
.s-m { color: var(--mute-h); }
.s-lead { font: 500 clamp(18px, 1.5vw, 20px)/1.4 var(--font); letter-spacing: -.012em; color: var(--text-2); max-width: 35em; text-wrap: pretty; }
.s-fine { font-size: 14px; line-height: 1.45; color: var(--text-2); }
.s-link { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.s-link:hover { text-decoration-thickness: 2px; }

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

.s-btn {
  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, box-shadow .18s, transform .12s;
}
.s-btn:active { transform: scale(.98); }
.s-btn .s-i { font-size: 16px; stroke-width: 1.8; }
.s-btn--ink { background: var(--ink); color: var(--bg); }
.s-btn--ink:hover { background: var(--accent); color: var(--on-accent); }
.s-btn--soft { background: var(--soft); color: var(--soft-ink); }
.s-btn--soft:hover { background: var(--card-2); }
.s-btn--line { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.s-btn--line:hover { box-shadow: inset 0 0 0 1.5px var(--text); }
.s-btn--sm { height: 40px; padding: 0 18px; font-size: 15px; }
.s-btn--block { width: 100%; }
/* a glass pill on a poster (it reads on the poster's own fill or picture) */
.s-btn--glass { background: rgb(255 255 255 / .16); color: #fff; -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); }
.s-btn--glass:hover { background: rgb(255 255 255 / .28); }
[data-tone="light"] .s-btn--glass { background: rgb(12 22 32 / .07); color: #0C1620; box-shadow: inset 0 0 0 1px rgb(12 22 32 / .12); }
[data-tone="light"] .s-btn--glass:hover { background: rgb(12 22 32 / .13); }

.s-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.s-chip {
  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;
}
.s-chip .s-i { font-size: 16px; opacity: .8; }
.s-chip--sm { height: 32px; padding: 0 13px; font-size: 13.5px; background: rgb(255 255 255 / .16); color: #fff; }
.s-chip--sm:empty { display: none; }
[data-tone="light"] .s-chip--sm { background: rgb(12 22 32 / .07); color: #0C1620; }
.s-tag { padding: 6px 11px; border-radius: 999px; background: var(--soft); font: 600 12.5px/1 var(--font); color: var(--soft-ink); white-space: nowrap; }
.s-round { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--text); background: var(--soft); transition: background-color .15s; }
.s-round:hover { background: var(--card-2); }
.s-round .s-i { font-size: 17px; }
.s-round:disabled { opacity: .4; cursor: default; }

/* (v3: the bar at the foot of the window is gone; the nav on top is the family's, in css/family.css) */

/* ───────────────────────── hero ─────────────────────────
   One poster, the first thing on the page: the hills edge to edge, the words on the morning haze at the left (a wash
   keeps them AA everywhere on the picture), and a Mac's display of frosted glass with a desk of live widgets, larger
   than life, running off the poster's right and foot. At 1440 × 800 the whole of it is in the first screen. */

/* a photograph of the hills, as a cover of its poster: the point (--fx, --fy) of the picture at the same point of the
   poster, and a little zoom about it (--z) where a poster wants a closer view. A cover keeps the 2400 px file at about
   2 device pixels per CSS pixel on a 2x screen at 1440. */
.s-photo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover;
  object-position: var(--fx, 50%) var(--fy, 50%);
  transform: scale(var(--z, 1));
  transform-origin: var(--fx, 50%) var(--fy, 50%);
}

/* ───────────────────────── the blurry screen: a slab of frosted glass in front of the hills ─────────────────────────
   The owner's rule (10 Nov: "like the cooldock's blurry screen. This is main"), as family.css draws it: wherever a
   poster shows a Mac's display, it is a slab of frosted glass in front of the poster's scene, inset from its sides and
   top and running off its foot, with a veil thickening toward the foot and a hairline of light along the top; the notch
   and the menu bar sit on the glass. The blur is a picture, not a live blur (headless WebKit draws none, and a live one
   costs every frame): each slab holds a pre-blurred copy of the photo (hills-*-blur.webp) that js/site.js lays exactly
   over the sharp photo's box, so the blur lines up with the hills round it. */
.s-display {
  --dr: 22px;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--dr) var(--dr) 0 0;
}
.s-display__glass { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; background: var(--scene-bg); }
.s-display__blur { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); }
.s-display__glass::after { content: ""; position: absolute; inset: 0; background: var(--veil); }
.s-display::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; box-shadow: inset 0 1px 0 var(--glass-top), inset 0 0 0 .5px var(--glass-rim); }
.s-display__notch {
  position: absolute; z-index: 3;
  top: 0; left: 50%;
  width: var(--notch-w, 196px); height: var(--notch-h, 30px);
  transform: translateX(-50%);
  border-radius: 0 0 13px 13px;
  background: #050607;
}
.s-display > .s-menubar, .s-display > .s-desk { position: relative; z-index: 1; }
.s-menubar {
  display: flex; align-items: center; gap: 20px;
  height: 30px; padding: 0 18px;
  font: 500 13px/1 var(--font); letter-spacing: 0;
  color: var(--mb-ink);
  background: var(--mb-bg);
  box-shadow: inset 0 -.5px 0 var(--mb-line);
  white-space: nowrap; overflow: hidden;
}
.s-menubar b { font-weight: 700; }
.s-menubar .s-mb-end { margin-left: auto; display: inline-flex; align-items: center; gap: 14px; font-variant-numeric: tabular-nums; }
.s-menubar .s-mb-end .s-i { font-size: 15px; stroke-width: 1.6; }
.s-menubar--mini { height: 24px; gap: 13px; padding: 0 12px; font-size: 11.5px; background: var(--mb-mini); }
/* a smaller slab on a poster: milkier, as the posters' crops sit lower in the hills than the hero's glass does */
.s-display--poster { --dr: 18px; --notch-w: 92px; --notch-h: 20px; position: absolute; left: clamp(18px, 2.4vw, 30px); right: -110px; top: 150px; bottom: 0; }
.s-display--poster .s-display__glass::after { background: var(--veil-small); }
.s-display--poster .s-desk { padding: 22px 0 0 22px; }
.s-display--poster .s-menubar { padding-right: 124px; }

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

.s-ch { position: relative; padding: clamp(104px, 12vw, 168px) 0 0; }
/* every chapter after the first is skipped while it's off screen (no style, layout or paint): the engine's stylesheets
   arriving (its start, a pack's widgets) then restyle only what's on show, which took the start's one long frame at 4x
   CPU from 117 ms to none over 30. Zero specificity: a section sets its own contain-intrinsic-size (its usual height) */
:where(main > section:not(:first-child)) { content-visibility: auto; contain-intrinsic-size: auto 1200px; }
.s-ch__head { display: grid; gap: 22px; }
.s-ch__head .s-lead { max-width: 33em; }
.s-ch--dark {
  --bg: #08090A; --ink: #F6F8F9; --text: #E7EBEE; --text-2: #9AA2A9; --mute-h: #62686E; --card: #18191B; --card-ink: #E7EBEE; --card-2: #232427;
  --line: rgb(255 255 255 / .1); --soft: #222326; --soft-ink: #E7EBEE; --accent: #4C9BFF; --on-accent: #04172E; --focus: #4C9BFF;
  margin-top: clamp(104px, 12vw, 168px);
  padding: clamp(96px, 11vw, 150px) 0;
  background: var(--bg); color: var(--text);
  color-scheme: dark;
}
[data-theme="dark"] .s-ch--dark { --bg: #000; --card: #121314; }
.s-ch--dark + .s-ch { padding-top: clamp(96px, 11vw, 150px); }

/* ───────────────────────── posters ─────────────────────────
   Five compositions, alternated so no two neighbours match:
     float    the scene (or a fill) fills the card, the widget large in its middle third, a short scrim under the words
     bleed    the words top-left, the content large, running off the card's foot and right
     side     the words in the left third, the content running off the right
     pieces   labelled variants at large scale on a flat card (a theme, a size, a slider)
     seq      one change in three frames, the widget's own states
   Cards are sized to what they hold: pieces and sequences take their content's height; a float, a bleed or a side
   poster is as tall as its row. */

.s-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(44px, 5vw, 64px); }
.s-bento--top { margin-top: 0; }
.s-c4 { grid-column: span 4; } .s-c5 { grid-column: span 5; } .s-c6 { grid-column: span 6; } .s-c7 { grid-column: span 7; } .s-c8 { grid-column: span 8; } .s-c12 { grid-column: span 12; }

.s-pc {
  --pad: clamp(22px, 2.6vw, 34px);
  position: relative;
  height: var(--hd, var(--h, 440px));
  overflow: clip;
  isolation: isolate;
  border-radius: var(--r-card);
  background: var(--fill, #0D1217);
  color: #fff;
  --focus: #4C9BFF;
}
.s-pc--auto { height: auto; }
.s-pc__txt { position: absolute; z-index: 2; left: var(--pad); right: var(--pad); bottom: clamp(22px, 2.4vw, 30px); max-width: 30em; }
.s-pc__txt--top { bottom: auto; top: clamp(24px, 2.6vw, 34px); }
.s-pc__txt--wide { max-width: 40em; }
/* a bleed whose content sits to the right of its words keeps the words in a column */
.s-pc__txt--col { right: auto; width: min(34%, 380px); }
.s-c12 > .s-pc__txt--col { width: min(36%, 430px); }
.s-pc__txt--side { right: auto; width: min(30%, 380px); top: 50%; bottom: auto; transform: translateY(-50%); }
.s-pc__txt h3 { display: flex; align-items: center; gap: 10px; font: 700 clamp(23px, 2vw, 27px)/1.1 var(--font-d); letter-spacing: -.02em; text-wrap: balance; }
.s-pc__txt h3 img { width: 26px; height: 26px; border-radius: 6px; }
/* a full-width poster's title is set larger */
.s-c12 > .s-pc__txt h3 { font-size: clamp(30px, 3.3vw, 46px); letter-spacing: -.024em; }
.s-pc__txt p { margin-top: 8px; font: 500 16px/1.4 var(--font); letter-spacing: -.004em; color: rgb(236 241 244 / .86); text-wrap: pretty; }
.s-c12 > .s-pc__txt p { font-size: clamp(16px, 1.3vw, 18px); }
.s-pc__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.s-pc__txt .s-pc__row { margin-top: 16px; }
.s-pc--light, [data-tone="light"].s-pc { color: #0C1620; --focus: #0066E0; }
.s-pc--light .s-pc__txt p, [data-tone="light"].s-pc .s-pc__txt p { color: rgb(12 22 32 / .76); }
.s-pc--card { background: var(--card); color: var(--card-ink); --focus: var(--accent); }
.s-pc--card .s-pc__txt p { color: var(--text-2); }
/* the hills by the page's theme: ink on the morning haze, white at dusk */
.s-pc--scene { background: var(--scene-bg); color: var(--ink); --focus: var(--accent); }
.s-pc--scene .s-pc__txt p { color: var(--text-2); }
.s-ch--dark .s-pc--scene { color: #fff; }
/* the focus ring on a poster: its own accent, with a dark or light halo so it reads on any picture */
.s-pc :focus-visible { outline-color: var(--focus); box-shadow: 0 0 0 6px rgb(0 0 0 / .45); }
.s-pc--light :focus-visible, [data-tone="light"] :focus-visible { box-shadow: 0 0 0 6px rgb(255 255 255 / .6); }

/* float */
.s-pc--float .s-pw { --pw-inset: 6% 6% var(--pw-b, 34%); }
.s-pc--float::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: var(--scrim, 42%); background: linear-gradient(180deg, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / .62) 58%, rgb(0 0 0 / .74) 100%); pointer-events: none; }
.s-pc--float.s-pc--scene::after { background: var(--scene-scrim); }
.s-ch--dark .s-pc--float.s-scenic::after { background: linear-gradient(180deg, rgb(6 8 10 / 0) 0%, rgb(6 8 10 / .7) 60%, rgb(6 8 10 / .8) 100%); }
/* bleed and side: the content is placed at (--bx, --by) at its own scale and runs off the card */
.s-pc--bleed.s-pc--scene::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, var(--wash-top) 0%, var(--wash-top) 18%, transparent 38%); pointer-events: none; }
.s-pc--bleed.s-pc--scene > .s-display { z-index: 0; }
.s-pw.s-pw--bleed { position: absolute; z-index: 1; inset: auto; left: var(--bx, 30%); top: var(--by, 160px); display: block; }
.s-pc--side .s-pw.s-pw--bleed { transform: translateY(-50%); }
.s-pc--side.s-pc--scene::before, .s-pc--side.s-wallpc.s-scenic::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--scene-side); pointer-events: none; }
/* pieces and sequences: the words, then labelled frames, in the card's own flow */
.s-pc--pieces, .s-pc--seq { height: auto; min-height: var(--h-min, 0); display: flex; flex-direction: column; gap: clamp(26px, 3vw, 40px); padding: clamp(24px, 2.8vw, 36px) var(--pad) clamp(28px, 3vw, 40px); }
.s-pc--pieces > .s-pc__txt, .s-pc--seq > .s-pc__txt { position: relative; inset: auto; }
.s-pc--pieces > .s-pc__row--foot { margin-top: auto; }
.s-frames { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(var(--fcols, 3), max-content); align-items: end; gap: var(--fgy, 22px) var(--fgx, 22px); }
.s-pc--pieces .s-frames { flex: 1; align-content: center; }
.s-frame { display: grid; gap: 12px; justify-items: start; }
.s-frame__w { position: relative; }
.s-frame__w > .hw { position: absolute; left: 0; top: 0; }
.s-frame__l { font: 600 14.5px/1.25 var(--font); color: rgb(236 241 244 / .9); white-space: nowrap; }
.s-pc--card .s-frame__l, [data-tone="light"] .s-frame__l { color: var(--card-ink); }
.s-frame__arrow { align-self: center; display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 30px; border-radius: 50%; background: rgb(255 255 255 / .1); color: rgb(255 255 255 / .8); }
.s-frame__arrow .s-i { font-size: 16px; stroke-width: 1.8; }
.s-pc--seq.s-scenic::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgb(6 8 10 / .45), rgb(6 8 10 / .2) 40%, rgb(6 8 10 / .5)); pointer-events: none; }

/* ───────────────────────── poster widgets: live, larger than life ─────────────────────────
   A stage (s-pw) holds one widget or a few on the 71/16 grid, scaled together (the engine's own zoom, so they stay
   crisp and pressable): fitted to the stage up to data-k (contain), or at data-k exactly (a bleed). On a phone a widget
   is never drawn smaller than its design size: it runs off the card instead. js/show.js builds and mounts them. */
.s-pw { position: absolute; z-index: 1; inset: var(--pw-inset, var(--pad) var(--pad) 118px); display: grid; place-items: center; }
.s-pw.is-over { place-items: center start; }
.s-grid {
  --k: 1;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), calc(71px * var(--k)));
  grid-auto-rows: calc(71px * var(--k));
  gap: calc(16px * var(--k));
}
.s-cell { position: relative; min-width: 0; }
.s-cell::before { content: ""; position: absolute; inset: 0; border-radius: calc(22px * var(--k, 1)); background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 .5px rgb(255 255 255 / .14); transition: opacity .25s; }
[data-tone="light"] .s-cell::before, .s-pc--light .s-cell::before { background: rgb(12 22 32 / .05); box-shadow: inset 0 0 0 .5px rgb(12 22 32 / .06); }
.s-cell.on::before { opacity: 0; }
.s-cell > .hw { position: absolute; left: 0; top: 0; }
.s-cell > .hw:focus-visible, .s-frame__w > .hw:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 3px; }

/* ───────────────────────── desks ───────────────────────── */

.s-desk { --k: 1; position: relative; display: grid; grid-template-columns: repeat(var(--cols, 12), calc(71px * var(--k))); grid-template-rows: repeat(var(--rows, 4), calc(71px * var(--k))); gap: calc(16px * var(--k)); }

/* ───────────────────────── themes: a set of seven, one widget in each ─────────────────────────
   The same widget in every theme, each on what suits it: the hills (by the page's theme) for the three glass themes,
   a flat fill for the solid ones. */

/* ───────────────────────── walls and collection posters: each collection in its own look ───────────────────────── */

.s-wallpc { --scrim: 56%; }
.s-wallpc[data-tone="light"] { color: #0C1620; --focus: #0066E0; }
.s-wallpc[data-tone="light"] .s-pc__txt p { color: rgb(12 22 32 / .76); }
.s-wallpc.s-pc--float::after { background: linear-gradient(180deg, transparent 0%, var(--fade) 54%, var(--fade) 100%); }
.s-wallpc[data-field="sand"] { --fade: #E9E1D6; } .s-wallpc[data-field="fog"] { --fade: #E4DED5; }
.s-wallpc[data-field="paper"] { --fade: #F6F3EE; } .s-wallpc[data-field="ink"] { --fade: #151515; }
.s-wallpc[data-field="graphite"] { --fade: #121416; } .s-wallpc[data-field="slate"] { --fade: #1E252D; } .s-wallpc[data-field="steel"] { --fade: #3A4552; }
.s-wall { position: absolute; z-index: 0; inset: 0; }
.s-wall > .s-grid { position: absolute; left: var(--wx, -30px); top: var(--wy, -30px); }
.s-wallpc .s-pc__txt { max-width: 34em; }
.s-pc__txt--side .s-pc__row { margin-top: 20px; }
.s-pc .s-chip.s-chip--soft { background: var(--soft); color: var(--soft-ink); }

/* ───────────────────────── glyphs: what the app does, in three ───────────────────────── */

/* ───────────────────────── the dark chapter: sources as icon cards, and one loud card ───────────────────────── */

.s-h-sub { margin-top: clamp(88px, 9vw, 128px); }

/* ───────────────────────── sizes: the eleven shapes, and one widget at each of its sizes ───────────────────────── */

/* ───────────────────────── hosts: the same widgets in each Hyper app, three displays on one scene ───────────────────────── */

/* ───────────────────────── the Index: the library window, standing on the hills ───────────────────────── */

/* ───────────────────────── the specimen sheet (the Index's ⓘ) ───────────────────────── */

.s-eyebrow { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--soft); color: var(--soft-ink); font: 600 13px/1 var(--font); }
.s-eyebrow b { font-weight: 650; }
.s-eyebrow b + span::before { content: "·"; margin-right: 8px; opacity: .45; }

/* ───────────────────────── fields: the calm backdrops behind widgets that aren't on the hills ─────────────────────────
   Natural, Mac-like tones: sand and fog on a light page, slate and graphite on a dark one, paper and ink for Frustrated
   Labs. At most two hues each, soft and low in contrast; no purple, pink or rainbow blends (the owner, 9 Nov). */
.s-flds { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; }
.s-flds > i { position: absolute; inset: 0; opacity: 0; transition: opacity .25s ease; }
.s-flds > i.on { opacity: 1; }
.s-fld--sand { background: radial-gradient(70% 90% at 14% 0%, #F5F0E9, transparent 70%), linear-gradient(165deg, #EFE8DF 0%, #E4D9CB 100%); }
.s-fld--fog { background: radial-gradient(65% 85% at 12% 6%, #EEF1F4, transparent 68%), linear-gradient(160deg, #E6EAEE 0%, #E2E3E1 52%, #E4DED5 100%); }
.s-fld--steel { background: radial-gradient(70% 90% at 14% 4%, rgb(203 211 219 / .55), transparent 70%), linear-gradient(160deg, #8E9BA8 0%, #5D6976 55%, #3A4552 100%); }
.s-fld--slate { background: radial-gradient(65% 85% at 16% 4%, hsl(192 24% 30% / .55), transparent 68%), linear-gradient(160deg, #2B3540 0%, #1E252D 100%); }
.s-fld--graphite { background: radial-gradient(70% 90% at 50% 0%, #1C1F23, transparent 72%), linear-gradient(180deg, #16181B, #0F1012); }
.s-fld--paper { background: #F6F3EE; }
.s-fld--ink { background: #151515; }

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

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

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

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

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

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

.s-nav { position: sticky; top: 0; z-index: 50; padding: 14px 0; }
.s-nav__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.s-nav .s-brand { 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); }
.s-nav .s-brand img { width: 34px; height: 34px; }
.s-nav__end { display: flex; gap: 8px; }
.s-page { position: relative; padding: 112px 0 110px; }
.s-page .s-wrap { max-width: 760px; }
.s-page .s-eyebrow { height: 34px; padding: 0 14px; font-size: 14px; margin-bottom: 26px; }
.s-page h1 { font: 700 clamp(40px, 5.4vw, 68px)/1.03 var(--font-d); letter-spacing: -.028em; color: var(--ink); text-wrap: balance; }
.s-page .s-lead { margin-top: 18px; }
.s-prose { margin-top: 52px; font-size: 16.5px; line-height: 1.65; color: var(--text-2); }
.s-prose h2 { margin: 44px 0 10px; padding-top: 24px; border-top: 1px solid var(--line); font: 700 22px/1.25 var(--font-d); letter-spacing: -.016em; color: var(--ink); }
.s-prose h2:first-child { margin-top: 0; }
.s-prose p + p, .s-prose ul + p, .s-prose p + ul { margin-top: 12px; }
.s-prose ul { padding-left: 20px; display: grid; gap: 8px; margin-top: 12px; }
.s-prose li { list-style: disc; }
.s-prose a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.s-prose a:hover { text-decoration-thickness: 2px; }
.s-prose b, .s-prose strong { color: var(--ink); }
.s-prose code { font: 500 .9em var(--mono); overflow-wrap: anywhere; }
.s-prose .s-updated { margin-top: 52px; font-size: 14px; color: var(--text-2); }
.s-page-foot { padding: 34px 0 60px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--text-2); }
.s-page-foot .s-wrap { max-width: 760px; display: grid; gap: 14px; }
.s-page-foot__row { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }
.s-page-foot nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.s-page-foot a:hover, .s-page-foot a[aria-current] { color: var(--ink); }
.s-page-foot a[aria-current] { text-decoration: underline; text-underline-offset: 3px; }
.s-page-foot p { font-size: 12.5px; }

/* ───────────────────────── motion: the family's kit (css/family-motion.css, js/family-motion.js) ─────────────────────────
   [data-reveal], [data-reveal-group], [data-fill], [data-parallax], HF.scene, HF.near, HF.facade: see the kit's headers.
   v2's own reveal (.js [data-reveal] / .in) is gone; the kit's --hf-ease and --hf-spring are the page's curves. */
/* without JavaScript the live showcases have nothing to show: the words stay, the empty stages go */
html:not(.js) .s-display, html:not(.js) .s-pw, html:not(.js) .s-wall, html:not(.js) .s-frames { display: none; }
html:not(.js) .s-pc:not(.s-pc--auto):not(.s-pc--pieces):not(.s-pc--seq) { height: auto; min-height: 260px; }
html:not(.js) .s-pc .s-pc__txt { position: relative; inset: auto; transform: none; width: auto; padding: var(--pad); }

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

/* ───────────────────────── accessibility: transparency and contrast ───────────────────────── */

@media (prefers-reduced-transparency: reduce) {
  .s-nav .s-brand { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .s-display__glass::after { background: color-mix(in srgb, var(--bg) 88%, transparent); }
  .s-btn--glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(10 16 22 / .82); }
  .s-menubar { background: color-mix(in srgb, var(--bg) 92%, transparent); }
  /* the widgets' glass themes turn solid, as the app does with Reduce Transparency */
  .hw[data-theme="liquid"], .hw[data-theme="frost"], .hw[data-theme="light-blur"] { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; --bg: var(--bg-solid) !important; }
}

@media (prefers-contrast: more) {
  :root { --line: rgb(12 22 32 / .22); --line-2: rgb(12 22 32 / .34); --text-2: #3C444C; --mute-h: #5E666E; --muted: #474D58; --glass-line: rgb(12 22 32 / .3); --scene-text-2: #161A20; }
  :root[data-theme="dark"] { --line: rgb(255 255 255 / .22); --line-2: rgb(255 255 255 / .34); --text-2: #C6CCD2; --mute-h: #9AA1A8; --muted: #B4BAC6; --glass-line: rgb(255 255 255 / .3); --scene-text-2: #ECEFF3; }
  .s-ch--dark { --mute-h: #9AA1A8; --text-2: #C6CCD2; }
}

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

@media (max-width: 980px) {
  :root { --gutter: 32px; --gap: 20px; }
  .s-c4, .s-c5, .s-c7, .s-c8 { grid-column: span 6; }
}
/* the hero stacks: the words on top, the display under them, running off the right and the foot */
@media (max-width: 860px) {
  /* a side poster stacks: the words on top, the content under them */
  .s-pc--side { height: var(--hp, auto); }
  .s-pc__txt--side { top: clamp(24px, 2.6vw, 34px); right: var(--pad); width: auto; transform: none; }
  .s-pc--side .s-pw.s-pw--bleed { left: var(--bxs, 22px); top: var(--bys, 190px); transform: none; }
  .s-pc > .s-pc__txt--col, .s-c12 > .s-pc__txt--col { right: var(--pad); width: auto; }
  .s-pc--side.s-pc--scene::before, .s-pc--side.s-wallpc.s-scenic::before { background: linear-gradient(180deg, var(--wash-top) 0%, var(--wash-top) 26%, transparent 46%); }
  .s-wall > .s-grid { left: var(--wxs, -14px); top: var(--wys, 210px); }
  .s-pc--bleed .s-pw.s-pw--bleed { left: var(--bxs, 22px); top: var(--bys, 150px); }
}
:root { --wash-top: rgb(250 251 252 / .8); }
[data-theme="dark"] { --wash-top: rgb(8 10 12 / .62); }
@media (max-width: 700px) {
  :root { --gutter: 16px; --gap: 16px; }
  body { font-size: 16px; }
  .s-c4, .s-c5, .s-c6, .s-c7, .s-c8, .s-c12 { grid-column: span 12; }
  .s-pc { height: var(--hp, var(--h, 380px)); --pad: 20px; }
  .s-pc--auto, .s-pc--pieces, .s-pc--seq { height: auto; }
  .s-pc__txt p { font-size: 15.5px; }
  .s-c12 > .s-pc__txt h3 { font-size: 27px; }
  .s-btn { height: 50px; padding: 0 22px; font-size: 17px; }
  .s-btn--sm { height: 38px; padding: 0 16px; font-size: 14.5px; }
  .s-display--poster { top: 150px; left: 14px; }
  .s-pc--float .s-pw { --pw-inset: 22px 18px var(--pw-bs, 150px); }
  .s-frames { --fgx: 14px; --fgy: 18px; }
  .s-pc--seq, .s-pc--pieces { padding-inline: 12px; }
  .s-pc--seq > .s-pc__txt, .s-pc--pieces > .s-pc__txt, .s-pc--pieces > .s-pc__row--foot { padding-inline: 8px; }
  .s-frame__arrow { display: none; }
  .s-page { padding: 92px 0 80px; }
}