/* Made by tools/tokens.py from tokens/debuginit.tokens.json. Do not edit. */
:root {
  color-scheme: light;
  --desk: #FFFFFF;
  --paper: #FFFFFF;
  --paper-2: #F5F5F7;
  --ink: #1D1D1F;
  --ink-2: #424245;
  --ink-3: #6E6E73;
  --accent: #1D1D1F;
  --accent-2: #424245;
  --on-accent: #FFFFFF;
  --gilt: #D2D2D7;
  --success: #2E6B3A;
  --attention: #855000;
  --problem: #A8321A;
  --info: #424245;
  --brand-orange: #E2E2E2;
  --brand-pink: #9A9A9A;
  --brand-violet: #3A3A3A;
  --product-pulse: #B3006D;
  --product-signals: #7A1E1E;
  --product-beat: #1D4ED8;
  --product-myna: #B8164F;
  --product-node: #A3133B;
  --product-wayworks: #9C3A06;
  --product-debuginit: #1C2C63;
  --font-display: "Cormorant Garamond", "EB Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-serif: "EB Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --sp-xs: 4px;
  --sp-base: 8px;
  --sp-sm: 12px;
  --sp-mid: 16px;
  --sp-md: 24px;
  --sp-wide: 32px;
  --sp-lg: 40px;
  --sp-xl: 64px;
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-full: 9999px;
  --pitch: 32px;
  --tap: 44px;
  --w-text: 68ch;
  --w-page: 1200px;
  --w-wide: 1440px;
  --spring-snap: linear(0, 0.0094, 0.0343, 0.0703, 0.1139, 0.1626, 0.2142, 0.267, 0.3197, 0.3715, 0.4216, 0.4696, 0.5151, 0.5579, 0.598, 0.6352, 0.6697, 0.7015, 0.7308, 0.7575, 0.7819, 0.8041, 0.8243, 0.8426, 0.8592, 0.8741, 0.8876, 0.8997, 0.9106, 0.9203, 0.9291, 0.9369, 0.9439, 0.9502, 0.9558, 0.9608, 0.9652, 0.9692, 0.9727, 0.9759, 0.9786, 0.9811, 0.9833, 0.9852, 0.987, 0.9885, 0.9898, 0.991, 1);
  --spring-snap-dur: 242ms;
  --spring-move: linear(0, 0.013, 0.0473, 0.0967, 0.1562, 0.2218, 0.2903, 0.3593, 0.427, 0.4919, 0.5533, 0.6104, 0.6629, 0.7107, 0.7537, 0.792, 0.826, 0.8558, 0.8817, 0.904, 0.9232, 0.9395, 0.9532, 0.9646, 0.9741, 0.9818, 0.9881, 0.9931, 0.997, 1, 1.0022, 1.0039, 1.005, 1.0057, 1.0061, 1.0063, 1.0062, 1.006, 1.0058, 1.0054, 1.005, 1.0046, 1.0041, 1.0037, 1.0033, 1.0029, 1.0025, 1.0022, 1);
  --spring-move-dur: 440ms;
  --spring-glide: linear(0, 0.0111, 0.0404, 0.0828, 0.134, 0.1908, 0.2505, 0.3113, 0.3714, 0.4298, 0.4858, 0.5386, 0.588, 0.6338, 0.6759, 0.7144, 0.7493, 0.7808, 0.8091, 0.8343, 0.8568, 0.8766, 0.8942, 0.9095, 0.923, 0.9347, 0.9449, 0.9537, 0.9613, 0.9678, 0.9734, 0.9781, 0.9821, 0.9855, 0.9884, 0.9907, 0.9927, 0.9944, 0.9957, 0.9968, 0.9977, 0.9984, 0.999, 0.9995, 0.9998, 1.0001, 1.0003, 1.0004, 1);
  --spring-glide-dur: 669ms;
  --spring-play: linear(0, 0.0192, 0.0695, 0.1412, 0.2265, 0.3187, 0.4128, 0.5048, 0.592, 0.6723, 0.7445, 0.808, 0.8626, 0.9086, 0.9465, 0.9768, 1.0004, 1.0181, 1.0307, 1.039, 1.0438, 1.0458, 1.0457, 1.0439, 1.0409, 1.0372, 1.033, 1.0287, 1.0244, 1.0203, 1.0165, 1.013, 1.0099, 1.0073, 1.005, 1.0031, 1.0016, 1.0004, 0.9995, 0.9988, 0.9983, 0.9981, 0.9979, 0.9979, 0.9979, 0.9981, 0.9982, 0.9984, 1);
  --spring-play-dur: 1099ms;
  --fade: cubic-bezier(.2,0,0,1);
  --fade-dur: 180ms;
}
:root[data-theme="night"] {
  color-scheme: dark;
  --desk: #0F0F10;
  --paper: #1C1C1E;
  --paper-2: #2C2C2E;
  --ink: #F5F5F7;
  --ink-2: #D1D1D6;
  --ink-3: #A1A1A6;
  --accent: #F5F5F7;
  --accent-2: #D1D1D6;
  --on-accent: #1D1D1F;
  --gilt: #3A3A3C;
  --success: #7FC48C;
  --attention: #E2B15C;
  --problem: #F09A86;
  --info: #D1D1D6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="day"]) {
  color-scheme: dark;
  --desk: #0F0F10;
  --paper: #1C1C1E;
  --paper-2: #2C2C2E;
  --ink: #F5F5F7;
  --ink-2: #D1D1D6;
  --ink-3: #A1A1A6;
  --accent: #F5F5F7;
  --accent-2: #D1D1D6;
  --on-accent: #1D1D1F;
  --gilt: #3A3A3C;
  --success: #7FC48C;
  --attention: #E2B15C;
  --problem: #F09A86;
  --info: #D1D1D6;
  }
}
@supports not (transition-timing-function: linear(0, 1)) {
  :root { --spring-snap: cubic-bezier(.2,0,0,1); --spring-move: cubic-bezier(.34,1.56,.64,1); --spring-glide: cubic-bezier(.22,1,.36,1); --spring-play: cubic-bezier(.34,1.56,.64,1); }
}
/* Base: fonts, the page, type. Tokens come from tokens.css (made from tokens/debuginit.tokens.json). */

@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(fonts/cormorant-garamond-n-latin-ac5feb.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(fonts/cormorant-garamond-n-latin-ext-480720.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300 700; font-display: swap;
  src: url(fonts/cormorant-garamond-i-latin-880eab.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300 700; font-display: swap;
  src: url(fonts/cormorant-garamond-i-latin-ext-28d800.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/eb-garamond-n-latin-88e225.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/eb-garamond-n-latin-ext-5b9269.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20C4, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400 800; font-display: swap; src: url(fonts/eb-garamond-i-latin-ad9197.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(fonts/plus-jakarta-sans-var.woff2) format("woff2"); }

/* One stacking scale for the whole site. Dialogs (sheets, Jump to, sign-in) live in the browser's top layer, above all of it. */
:root { --z-art: -1; --z-base: 1; --z-raised: 3; --z-popover: 30; --z-header: 40; --z-tabbar: 45; --z-skip: 100; }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }   /* hidden means hidden, whatever display a class gives */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--desk);
  scroll-padding-top: 88px; scroll-padding-bottom: 96px; }
@media (prefers-reduced-motion: no-preference) { html:focus-within { scroll-behavior: smooth; } }
body { margin: 0; min-height: 100svh; background: var(--desk); color: var(--ink); font: 400 17px/1.65 var(--font-sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.skip { position: absolute; left: 16px; top: -60px; z-index: var(--z-skip); padding: 10px 16px; background: var(--accent); color: var(--on-accent);
  border-radius: var(--r-full); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Type. Display in Cormorant (the royal note), everything else in Jakarta (the minimal note). */
h1, h2, h3, h4 { margin: 0; font-weight: 600; text-wrap: balance; overflow-wrap: anywhere; }
.t-hero, h1 { font: 600 clamp(42px, 6.6vw, 92px)/1.0 var(--font-display); letter-spacing: -.015em; }
h2, .t-h2 { font: 600 clamp(30px, 3.6vw, 48px)/1.08 var(--font-display); letter-spacing: -.01em; }
h3, .t-h3 { font: 700 clamp(18px, 1.5vw, 21px)/1.3 var(--font-sans); letter-spacing: -.005em; }
p { margin: 0; text-wrap: pretty; }
.lead { font-size: clamp(18px, 1.55vw, 21px); line-height: 1.55; color: var(--ink-2); max-width: 60ch; }
.label { font: 700 12px/1.4 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.label--accent { color: var(--accent); }
.small { font-size: 14px; color: var(--ink-3); }
/* The one flourish: the last word of a headline in Cormorant italic, in the accent. */
.em { font-style: italic; font-weight: 500; color: var(--accent); }
.mono { font-family: var(--font-mono); font-size: .92em; }

/* Layout */
.wrap { width: min(var(--w-page), 100% - 2 * clamp(16px, 4vw, 48px)); margin-inline: auto; }
.wrap--text { width: min(var(--w-text), 100% - 32px); margin-inline: auto; }
.stack > * + * { margin-top: var(--sp-mid); }
main { display: block; }

/* The shell: header with menus, the phone tab bar, the launcher, sheets, Jump to (research/07). */

/* Header */
.hd { position: sticky; top: 0; z-index: var(--z-header); background: color-mix(in srgb, var(--desk) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); view-transition-name: hd; }
.hd__in { display: flex; align-items: center; gap: var(--sp-md); height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 700 19px/1 var(--font-sans); letter-spacing: -.01em; flex: none; }
.brand img, .brand svg { width: 42px; height: auto; }
.brand b { font-weight: 800; }
.brand span { background: linear-gradient(90deg, var(--brand-orange), var(--brand-pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav > a, .nav__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 0; border-radius: var(--r-full);
  background: none; color: var(--ink-2); font: 500 15px/1 var(--font-sans); text-decoration: none; cursor: pointer; }
.nav > a:hover, .nav__btn:hover, .nav__btn[aria-expanded="true"] { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.nav > a[aria-current] { color: var(--accent); }
.nav__btn svg { width: 12px; transition: transform var(--spring-move-dur) var(--spring-move); }
.nav__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.hd__tools { display: flex; align-items: center; gap: 6px; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--r-full); background: none; color: var(--ink-2); cursor: pointer;
  transition: transform var(--spring-snap-dur) var(--spring-snap), background-color var(--fade-dur) var(--fade); }
.icon-btn:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.icon-btn:active { transform: scale(.92); }
.icon-btn svg { width: 20px; height: 20px; }
.kbd { font: 600 11px/1 var(--font-mono); padding: 3px 6px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); color: var(--ink-3); }

/* Mega-menu: a ruled sheet under the header */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--ink) 35%, transparent); }
.mega[hidden] { display: none; }
.mega__in { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-md) var(--sp-wide); padding: var(--sp-wide) 0 var(--sp-lg); }
.mega h2 { font: 700 12px/1.4 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.mega a { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  color: var(--ink); text-decoration: none; font-weight: 500; }
.mega a:hover { color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .mega:not([hidden]) { animation: drop var(--spring-move-dur) var(--spring-move) both; }
}
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } }

/* Phone and tablet */
@media (max-width: 1023px) {
  .hd .nav, .hd .hd__cta { display: none; }
  .hd__tools { margin-left: auto; }
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
}
@media (min-width: 1024px) { .tabbar, .only-phone { display: none !important; } }

/* Tab bar: five tabs, a navy pill that slides between them */
.tabbar { position: fixed; z-index: var(--z-tabbar); left: 0; right: 0; bottom: 0; padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--paper) 90%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px);
  border-top: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); view-transition-name: tabbar;
  transition: transform var(--spring-move-dur) var(--spring-move); }
.tabbar.is-away { transform: translateY(110%); }
.tabbar ul { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; list-style: none; }
.tabbar a, .tabbar button { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  width: 100%; min-height: 54px; border: 0; background: none; color: var(--ink-3); font: 600 11px/1 var(--font-sans); text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.tabbar svg { width: 22px; height: 22px; }
.tabbar [aria-current="page"] { color: var(--accent); }
.tabbar__pill { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 20%; border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--accent) 10%, transparent); transform: translateX(calc(var(--i, 0) * 100%));
  transition: transform var(--spring-move-dur) var(--spring-move); }
.tabbar a:active, .tabbar button:active { transform: scale(.94); }

/* Sheets: <dialog> as a bottom sheet on phones, a side sheet on desktop */
dialog.sheet { position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: none; max-height: calc(100dvh - 24px); padding: 0; border: 0;
  border-radius: 22px 22px 0 0; background: var(--paper); color: var(--ink); overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 -20px 60px -20px rgba(0,0,0,.35); transform: translateY(var(--y, 0px)); }
dialog.sheet:not([open]) { display: none; }
/* The backdrop doesn't inherit custom properties in every browser, so its dim is fixed; dragging fades the sheet, not it. */
dialog.sheet::backdrop { background: rgba(10, 10, 12, .4); -webkit-backdrop-filter: blur(3px) saturate(.9); backdrop-filter: blur(3px) saturate(.9); }
@media (prefers-reduced-motion: no-preference) { dialog.sheet[open]::backdrop { animation: dim-in 260ms ease both; } }
@keyframes dim-in { from { opacity: 0; } }
.sheet__grab { display: grid; place-items: center; height: 26px; cursor: grab; touch-action: none; flex: none; }
.sheet__grab::before { content: ""; width: 42px; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 22%, transparent); }
.sheet__hd { display: flex; align-items: center; gap: 12px; padding: 0 20px 10px; flex: none; touch-action: none; }
.sheet__hd h2 { font: 600 26px/1.1 var(--font-display); }
.sheet__hd .icon-btn { margin-left: auto; }
.sheet__body { overflow: auto; overscroll-behavior: contain; padding: 4px 20px calc(24px + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) {
  dialog.sheet { inset: 0 0 0 auto; width: min(440px, 92vw); height: 100dvh; max-height: none; border-radius: 4px 0 0 4px; transform: translateX(var(--x, 0px)); }
  .sheet__grab { display: none; } .sheet__hd { padding-top: 22px; }
}
@media (prefers-reduced-motion: no-preference) {
  dialog.sheet[open] { animation: sheet-up var(--spring-move-dur) var(--spring-move); }
  @media (min-width: 1024px) { dialog.sheet[open] { animation-name: sheet-in; } }
}
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes sheet-in { from { transform: translateX(100%); } }

/* Launcher: the "More" sheet, laid out like a home screen */
.launch__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 8px; margin: 8px 0 22px; padding: 0; list-style: none; }
.launch__grid a { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; text-decoration: none; font: 600 12px/1.25 var(--font-sans); color: var(--ink-2); }
.app { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; background: var(--paper-2); color: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); }
.app svg { width: 26px; height: 26px; }
.app--brand { color: #fff; background: linear-gradient(145deg, var(--brand-orange), var(--brand-pink) 60%, var(--brand-violet)); }
.launch__grid a { min-width: 0; }
.launch__grid .badge { margin-top: -2px; max-width: 100%; padding: 3px 7px; font-size: 9.5px; letter-spacing: .03em; white-space: normal; justify-content: center; }
@media (prefers-reduced-motion: no-preference) {
  dialog[open] .launch__grid li { animation: tile var(--spring-move-dur) var(--spring-move) both; animation-delay: calc(var(--n, 0) * 20ms); }
}
@keyframes tile { from { opacity: 0; transform: translateY(10px) scale(.92); } }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; border-top: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); }

/* Jump to */
.jump__line { display: flex; align-items: center; gap: 12px; border-bottom: 1.5px solid var(--ink); padding: 8px 0; }
.jump__line svg { width: 20px; height: 20px; flex: none; color: var(--ink-3); }
.jump__line input { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font: 500 20px/1.3 var(--font-sans); outline: none; }
.jump__list { list-style: none; margin: 8px 0 0; padding: 0; }
.jump__list a { display: flex; justify-content: space-between; gap: 12px; padding: 11px 10px; border-radius: var(--r-sm); text-decoration: none; }
.jump__list a[aria-selected="true"], .jump__list a:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--accent); }
.jump__list small { color: var(--ink-3); white-space: nowrap; }

/* Switches */
.switch { position: relative; width: 52px; height: 32px; flex: none; appearance: none; -webkit-appearance: none; margin: 0; border-radius: 16px;
  background: color-mix(in srgb, var(--ink) 18%, transparent); cursor: pointer; transition: background-color var(--fade-dur) var(--fade); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: var(--paper);
  box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform var(--spring-move-dur) var(--spring-move); }
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(20px); }

.jump-open svg { width: 18px; height: 18px; }
.tabbar__pill[hidden] { display: none; }

/* Content parts: hero, sections, buttons, badges, feature lines, cards, measures, steps, FAQ, CTA, footer (research/06). */

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border: 0; border-radius: var(--r-full);
  font: 600 15px/1 var(--font-sans); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform var(--spring-snap-dur) var(--spring-snap), translate var(--spring-move-dur) var(--spring-move), background-color var(--fade-dur) var(--fade), box-shadow var(--fade-dur) var(--fade); }
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn--primary:hover { background: var(--accent-2); }
.btn--quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 22%, transparent); }
.btn--quiet:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn svg { width: 16px; height: 16px; transition: transform var(--spring-move-dur) var(--spring-move); }
.btn:hover svg { transform: translateX(3px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 520px) { .btn-row .btn { flex: 1 1 100%; } }
.go { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 600; text-decoration: none; }
.go::after { content: "→"; transition: transform var(--spring-move-dur) var(--spring-move); }
.go:hover::after { transform: translateX(4px); }

/* Maturity badge: words and colour together */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-full); font: 700 11px/1.2 var(--font-sans);
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: var(--c, var(--ink-3)); background: color-mix(in srgb, var(--c, var(--ink-3)) 11%, transparent); }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge[data-s="Concept"] { --c: var(--ink-3); }
.badge[data-s="R&D"] { --c: var(--info); }
.badge[data-s="Building"] { --c: var(--attention); }
.badge[data-s="Private pilot"] { --c: var(--accent); }
.badge[data-s="Available"] { --c: var(--success); }

/* Hero */
.hero { position: relative; isolation: isolate; min-height: min(100svh, 920px); display: grid; align-items: center; padding: clamp(48px, 8vw, 110px) 0 clamp(48px, 7vw, 96px); }
.hero--page { min-height: 0; padding-top: clamp(40px, 6vw, 88px); }
.hero__in { display: grid; gap: var(--sp-md); max-width: 940px; }
.hero h1 { max-width: 16ch; }
.hero--page h1 { max-width: 20ch; font-size: clamp(38px, 5.4vw, 72px); }
.hero .lead { margin-top: 4px; }
.pillars { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 6px 0 0; padding: 14px 0 0; list-style: none; border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  font-size: 14px; color: var(--ink-2); }
.pillars li::before { content: "✓"; color: var(--accent); margin-right: 8px; font-weight: 700; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--ink-3); }
.crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .6; }
.crumbs a { text-decoration: none; } .crumbs a:hover { color: var(--accent); }

/* Sections on paper */
.sec { padding: clamp(56px, 8vw, 120px) 0; }
.sec + .sec { border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.sec--paper { background: var(--paper); }
.sec__hd { display: grid; gap: 12px; max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.sec__hd p { color: var(--ink-2); font-size: 18px; }
.sec__note { margin-top: var(--sp-md); max-width: 70ch; color: var(--ink-3); font-size: 15px; }

/* Feature lines: a list on rules, not boxes */
.lines { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 0 var(--sp-wide); margin: 0; padding: 0; list-style: none; }
.lines li { display: flex; gap: 14px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 11%, transparent); font-weight: 500; }
.lines li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); transform: translateY(-2px); }

/* Cards: paper sheets bound on the left edge */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr)); gap: var(--sp-mid); margin: 0; padding: 0; list-style: none; }
.card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px 22px 22px 26px; background: var(--paper); border-radius: 4px 14px 14px 4px;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 7%, transparent), 0 14px 34px -24px color-mix(in srgb, var(--ink) 40%, transparent);
  transition: transform var(--spring-move-dur) var(--spring-move), box-shadow var(--spring-move-dur) var(--spring-move); }
.card::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 2px; background: color-mix(in srgb, var(--accent) 55%, transparent); }
.card p { color: var(--ink-2); font-size: 15.5px; }
.card .num { font: 600 13px/1 var(--font-mono); color: var(--ink-3); }
a.card { text-decoration: none; color: inherit; }
a.card:hover, a.card:focus-visible { transform: translateY(-3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 7%, transparent), 0 24px 40px -24px color-mix(in srgb, var(--ink) 50%, transparent); }
a.card h3 { color: var(--ink); }
a.card:hover h3 { color: var(--accent); }
.sec--paper .card { background: var(--desk); }

/* Measures and definitions */
.defs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 0 var(--sp-wide); margin: 0; }
.defs div { padding: 18px 0; border-top: 1.5px solid var(--ink); }
.defs dt { font: 600 24px/1.15 var(--font-display); }
.defs dd { margin: 6px 0 0; color: var(--ink-2); font-size: 15.5px; }

/* Steps: a rule that draws itself as it scrolls into view */
.steps { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--sp-md); margin: 0; padding: 26px 0 0; list-style: none; counter-reset: s; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent); transform-origin: left; }
.steps li { counter-increment: s; }
.steps li::before { content: counter(s, decimal-leading-zero); display: block; font: 600 13px/1 var(--font-mono); color: var(--accent); margin-bottom: 10px; }
.steps h3 { margin-bottom: 6px; } .steps p { color: var(--ink-2); font-size: 15.5px; }

/* Chips (works-with, deployment options) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chips li, .chips a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--r-full); font-size: 14px; font-weight: 600;
  background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--accent); text-decoration: none; }

/* Decision set: Retain · Integrate · Consolidate · Replace · Retire */
.decide { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1.5px solid var(--ink); }
.decide li { padding: 20px 18px 6px 0; }
.decide b { display: block; font: 600 30px/1.1 var(--font-display); margin-bottom: 8px; }
.decide b small { font: 600 12px var(--font-mono); color: var(--accent); margin-right: 8px; vertical-align: .4em; }
.decide p { color: var(--ink-2); font-size: 15.5px; }

/* FAQ */
.faq { border-top: 1.5px solid var(--ink); }
.faq details { border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 64px; padding: 14px 0; cursor: pointer; list-style: none; font: 600 18px/1.35 var(--font-sans); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font: 400 26px/1 var(--font-sans); color: var(--accent); transition: transform var(--spring-move-dur) var(--spring-move); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 20px; color: var(--ink-2); max-width: 70ch; }

/* CTA band */
.cta { position: relative; overflow: hidden; display: grid; gap: 16px; justify-items: start; padding: clamp(36px, 6vw, 72px); border-radius: 4px 22px 22px 4px;
  background: var(--accent); color: var(--on-accent); }
.cta h2 { max-width: 20ch; } .cta p { max-width: 58ch; opacity: .86; }
.cta .btn--primary { background: var(--paper); color: var(--accent); box-shadow: none; }
.cta .btn--quiet { color: var(--on-accent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--on-accent) 45%, transparent); }
.cta__art { position: absolute; inset: 0; z-index: -1; opacity: .5; }
.cta > * { position: relative; }

/* Footer: the full sitemap */
.ft { padding: clamp(56px, 7vw, 96px) 0 calc(40px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); }
.ft__top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--sp-lg); padding-bottom: var(--sp-lg); border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
@media (max-width: 760px) { .ft__top { grid-template-columns: 1fr; } }
.ft__map { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--sp-wide) var(--sp-md); padding: var(--sp-lg) 0; }
.ft__map h3 { font: 700 12px/1.4 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.ft__map ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.ft__map a { font-size: 14.5px; color: var(--ink-2); text-decoration: none; } .ft__map a:hover { color: var(--accent); text-decoration: underline; }
.ft__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--ink-3); }
.news { display: flex; gap: 10px; align-items: end; border-bottom: 1.5px solid var(--ink); padding-bottom: 6px; max-width: 460px; }
.news label { flex: 1; display: grid; gap: 2px; }
.news input { border: 0; background: none; font: 500 17px/1.4 var(--font-sans); color: var(--ink); padding: 6px 0; outline: none; min-width: 0; }
.ft-house { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; margin-top: 18px; }
.ft-house img { height: 54px; width: auto; mix-blend-mode: multiply; }
:root[data-theme="night"] .ft-house img { mix-blend-mode: normal; filter: invert(1) hue-rotate(180deg); }
.pending { display: inline-block; font: 600 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; padding: 4px 8px; border-radius: 6px;
  background: color-mix(in srgb, var(--attention) 12%, transparent); color: var(--attention); margin-right: 8px; }

.card .badge { align-self: flex-start; }
.sec__art { margin: 0 0 var(--sp-wide); aspect-ratio: 16 / 8; max-height: 520px; width: 100%; }
.sec__art svg { width: 100%; height: 100%; }
@media (max-width: 640px) { .sec__art { aspect-ratio: 4 / 3; } }

/* Forms on ruled lines, not boxes (pulse/docs/LINES-NOT-BOXES.md); tables; running text. */

.prose { max-width: 70ch; color: var(--ink-2); margin-top: var(--sp-mid); }
.sec__hd + .prose { margin-top: 0; }
.cards + .prose, .lines + .prose, .defs + .prose, .tbl + .prose { margin-top: var(--sp-md); font-size: 15px; color: var(--ink-3); }
.sec .wrap > .label, .sec .wrap > * + .label { margin-top: var(--sp-wide); margin-bottom: 4px; }
.sec .wrap > .btn-row { margin-top: var(--sp-md); }
.sec .wrap > .chips { margin-top: var(--sp-mid); }

.form { display: grid; gap: var(--sp-md); max-width: 760px; padding: clamp(22px, 4vw, 40px); background: var(--paper); border-radius: 4px 16px 16px 4px;
  background-image: linear-gradient(to right, transparent 0 calc(clamp(22px, 4vw, 40px) - 14px), color-mix(in srgb, var(--accent) 28%, transparent) 0 calc(clamp(22px, 4vw, 40px) - 13px), transparent 0);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 7%, transparent), 0 18px 40px -26px color-mix(in srgb, var(--ink) 40%, transparent); }
.sec--paper .form { background-color: var(--desk); }
.topics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0 var(--sp-md); margin: 0; padding: 0; border: 0; }
.topics legend { margin-bottom: 8px; }
.topic { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); cursor: pointer; }
.topic input { appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 2px 0 0; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 45%, transparent); transition: box-shadow var(--spring-snap-dur) var(--spring-snap); }
.topic input:checked { box-shadow: inset 0 0 0 6px var(--accent); }
.topic b { display: block; font-weight: 600; } .topic small { display: block; color: var(--ink-3); font-size: 13.5px; line-height: 1.4; }
.pl { display: grid; }
.pl-line { display: grid; grid-template-columns: minmax(110px, 170px) 1fr; align-items: end; gap: 14px; min-height: var(--pitch);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 26%, transparent); padding-top: 14px; }
.pl-line label { position: relative; padding-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.pl-line .req { display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--brand-pink); vertical-align: middle; }
.pl-line input, .pl-line textarea { width: 100%; min-width: 0; border: 0; background: none; color: var(--ink); font: 500 17px/1.5 var(--font-sans); padding: 6px 0 7px; outline: none; resize: vertical; }
.pl-line--tall { align-items: start; }
.pl-line--tall textarea { background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--pitch) - 1px), color-mix(in srgb, var(--ink) 14%, transparent) 0 var(--pitch));
  line-height: var(--pitch); padding: 0; min-height: calc(var(--pitch) * 4); }
.pl-line:focus-within { border-bottom-color: var(--accent); box-shadow: 0 1.5px 0 var(--accent); }
.pl-line[data-error] { border-bottom-color: var(--problem); }
@media (max-width: 560px) { .pl-line { grid-template-columns: 1fr; gap: 0; } .pl-line label { padding-bottom: 0; } }
.pl-act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding-top: 10px; border-top: 1.5px dashed color-mix(in srgb, var(--ink) 22%, transparent); }
.pl-status { font-size: 14px; color: var(--ink-2); }

.tbl { overflow-x: auto; border-top: 1.5px solid var(--ink); -webkit-overflow-scrolling: touch; }
.tbl table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.tbl thead th { font: 700 12px/1.4 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.tbl tbody th { font-weight: 600; }
.tbl td { color: var(--ink-2); }

/* Inputs, Pulse's way (pulse/docs/LINES-NOT-BOXES.md), with paper and ink motion.
   A form is a sheet: each thing is one ruled line with its name in the margin; needed lines carry a pink dot that fades
   once they hold something; optional lines stay off the paper until "/" asks for them; one action bar at the foot says,
   in words, what is still needed. Every movement here stops for reduced motion (motion.css). */

/* ---- The sheet ---- */
.sheetform { position: relative; display: grid; gap: 18px; max-width: 780px; padding: clamp(24px, 4vw, 44px) clamp(20px, 4vw, 44px) 22px clamp(34px, 5vw, 64px);
  background: var(--paper); border-radius: 4px 16px 16px 4px; isolation: isolate;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 7%, transparent), 0 22px 44px -28px color-mix(in srgb, var(--ink) 45%, transparent); }
/* the margin line and a faint paper grain */
.sheetform::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(90deg, transparent calc(clamp(34px, 5vw, 64px) - 14px), color-mix(in srgb, var(--accent) 34%, transparent) 0 calc(clamp(34px, 5vw, 64px) - 13px), transparent 0),
              url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.sec--paper .sheetform { background-color: var(--desk); }
.sheetform__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sheetform__hd h3 { font: 600 clamp(24px, 2.6vw, 32px)/1.1 var(--font-display); }

/* The "/" in the sheet's corner: the same tools, for a finger */
.slash-btn { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; cursor: pointer;
  font: italic 500 26px/1 var(--font-display); color: var(--accent); transition: background-color var(--fade-dur) var(--fade), transform var(--spring-snap-dur) var(--spring-snap); }
.slash-btn:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.slash-btn:active { transform: scale(.9); }

/* ---- A line ---- */
.ln-line { position: relative; display: grid; grid-template-columns: minmax(96px, 150px) 1fr; align-items: end; gap: 14px; min-height: var(--pitch); padding-top: 12px; }
.ln-line::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: color-mix(in srgb, var(--ink) 24%, transparent); }
/* the rule inks in from the margin when you write on it */
.ln-line::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 1; background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--spring-glide-dur) var(--spring-glide); }
.ln-line:focus-within::before { transform: scaleX(1); }
.ln-name { position: relative; padding-bottom: 8px; font: 600 13.5px/1.3 var(--font-sans); color: var(--ink-3); transition: color var(--fade-dur) var(--fade); }
.ln-line:focus-within .ln-name { color: var(--accent); }
/* the needed dot: pink, and it fades once the line holds something */
.ln-dot { display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-radius: 50%; background: var(--accent); vertical-align: middle;
  transition: transform var(--spring-move-dur) var(--spring-move), opacity var(--fade-dur) var(--fade); }
.ln-line.is-filled .ln-dot { transform: scale(0); opacity: 0; }
.ln-in { width: 100%; min-width: 0; border: 0; background: none; color: var(--ink); caret-color: var(--accent);
  font: 500 18px/1.45 var(--font-sans); padding: 6px 0 7px; outline: none; }
.ln-in::placeholder { color: color-mix(in srgb, var(--ink) 34%, transparent); font-style: italic; font-family: var(--font-display); font-size: 19px; }
textarea.ln-in { resize: none; min-height: calc(var(--pitch) * 3); line-height: var(--pitch); padding: 0; overflow: hidden;
  background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--pitch) - 1px), color-mix(in srgb, var(--ink) 13%, transparent) 0 var(--pitch)); }
.ln-line--tall { align-items: start; } .ln-line--tall .ln-name { padding-top: 6px; }
/* a line written wrong gets a red-pen note in the margin, never a red box */
.ln-line[data-note]::after { background: var(--problem); }
.ln-note { grid-column: 2; font: italic 500 16px/1.3 var(--font-display); color: var(--problem); margin: 4px 0 0; }
.ln-note::before { content: "✎ "; font-style: normal; }
@media (max-width: 560px) { .ln-line { grid-template-columns: 1fr; gap: 0; } .ln-name { padding-bottom: 0; } .ln-note { grid-column: 1; } }
/* optional lines arrive when "/" asks: they unfold onto the paper */
.ln-line[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="reduced"]) .ln-line.is-new { animation: unfold var(--spring-move-dur) var(--spring-move) both; transform-origin: top; }
}
@keyframes unfold { from { opacity: 0; transform: perspective(600px) rotateX(-70deg); } }

/* ---- Choose one: you circle it with a pen ---- */
.ln-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0 22px; margin: 0; padding: 0; border: 0; }
.ln-pick legend { margin-bottom: 6px; }
.ln-opt { position: relative; display: block; padding: 11px 6px 11px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ln-opt input { position: absolute; opacity: 0; pointer-events: none; }
.ln-opt b { position: relative; display: inline-block; font-weight: 600; padding: 0 6px; margin-left: -6px; }
.ln-opt small { display: block; color: var(--ink-3); font-size: 13.5px; line-height: 1.4; }
.ln-opt .ring { position: absolute; left: -12px; top: -9px; width: calc(100% + 22px); height: calc(100% + 16px); overflow: visible; pointer-events: none; }
.ln-opt .ring path { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 520ms var(--fade); }
.ln-opt .ring path { opacity: 0; }
.ln-opt input:checked ~ b .ring path { stroke-dashoffset: 0; opacity: 1; }
.ln-opt input:focus-visible ~ b { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ---- Tick: drawn, not toggled ---- */
.ln-tick { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; cursor: pointer; }
.ln-tick input { position: absolute; opacity: 0; }
.ln-tick .box { flex: none; position: relative; width: 22px; height: 22px; margin-top: 1px; border-radius: 3px 5px 4px 3px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 45%, transparent); }
.ln-tick .box path { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 360ms var(--fade); }
.ln-tick .box path { opacity: 0; }
.ln-tick input:checked + .box path { stroke-dashoffset: 0; opacity: 1; }
.ln-tick input:focus-visible + .box { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Stars and moods, drawn in ink ---- */
.ln-stars, .ln-moods { display: flex; gap: 4px; margin: 0; padding: 0; border: 0; }
.ln-stars label, .ln-moods label { display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; border-radius: 50%; -webkit-tap-highlight-color: transparent; }
.ln-stars input, .ln-moods input { position: absolute; opacity: 0; }
.ln-stars svg { width: 30px; height: 30px; }
.ln-stars path { fill: transparent; stroke: color-mix(in srgb, var(--ink) 50%, transparent); stroke-width: 1.5; stroke-linejoin: round;
  transition: fill var(--fade-dur) var(--fade), stroke var(--fade-dur) var(--fade), transform var(--spring-move-dur) var(--spring-move); transform-origin: center; transform-box: fill-box; }
.ln-stars:has(input:checked) label:has(~ label input:checked) path, .ln-stars label:has(input:checked) path { fill: var(--accent); stroke: var(--accent); }
.ln-stars label:hover path { transform: scale(1.12) rotate(-6deg); }
.ln-moods label { font-size: 26px; filter: grayscale(1) opacity(.6); transition: filter var(--fade-dur) var(--fade), transform var(--spring-move-dur) var(--spring-move); }
.ln-moods label:hover { transform: translateY(-3px) rotate(-4deg); filter: none; }
.ln-moods label:has(input:checked) { filter: none; transform: scale(1.18); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.ln-stars label:has(input:focus-visible), .ln-moods label:has(input:focus-visible) { outline: 2px solid var(--accent); }

/* ---- The action bar: what is still needed, in words, then the action ---- */
.ln-act { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; padding-top: 14px; border-top: 1.5px dashed color-mix(in srgb, var(--ink) 22%, transparent); }
.ln-needs { font: italic 500 17px/1.3 var(--font-display); color: var(--ink-2); }
.ln-needs.is-ready { color: var(--success); }
.ln-act .btn[aria-disabled="true"] { opacity: .55; }

/* ---- The "/" menu on a line ---- */
.slash-menu { position: absolute; z-index: var(--z-popover); min-width: 240px; max-width: min(340px, 90vw); margin: 0; padding: 6px; list-style: none; background: var(--paper);
  border-radius: 4px 12px 12px 4px; box-shadow: 0 18px 40px -16px color-mix(in srgb, var(--ink) 50%, transparent), 0 0 0 1px color-mix(in srgb, var(--ink) 9%, transparent); }
.slash-menu[hidden] { display: none; }
.slash-menu button { display: flex; width: 100%; gap: 10px; align-items: baseline; padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: 500 15px var(--font-sans); text-align: left; cursor: pointer; }
.slash-menu button i { font: italic 500 19px/1 var(--font-display); color: var(--accent); width: 18px; }
.slash-menu button small { margin-left: auto; color: var(--ink-3); font-size: 12.5px; }
.slash-menu button[aria-selected="true"], .slash-menu button:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="reduced"]) .slash-menu:not([hidden]) { animation: unfold var(--spring-move-dur) var(--spring-move) both; transform-origin: top left; }
}

/* ---- Sent: the sheet folds, and an ink stamp presses in ---- */
.sheetform.is-sent > :not(.stamp) { opacity: .35; transition: opacity 400ms var(--fade); }
.stamp { position: absolute; right: clamp(16px, 6%, 48px); top: 34%; z-index: var(--z-raised); display: grid; place-items: center; padding: 14px 22px; border: 3px double var(--accent); border-radius: 10px;
  color: var(--accent); font: 700 15px/1.2 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; text-align: center; transform: rotate(-8deg); mix-blend-mode: multiply;
  background: color-mix(in srgb, var(--paper) 70%, transparent); }
:root[data-theme="night"] .stamp { mix-blend-mode: normal; }
.stamp small { display: block; margin-top: 4px; font: italic 500 15px/1.2 var(--font-display); letter-spacing: 0; text-transform: none; }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="reduced"]) .sheetform.is-sending { animation: fold 520ms var(--spring-move) both; }
  :root:not([data-motion="reduced"]) .stamp { animation: stamp 460ms var(--spring-play) both; }
}
@keyframes fold { 50% { transform: perspective(900px) rotateX(10deg) scaleY(.96); } }
@keyframes stamp { from { opacity: 0; transform: rotate(-8deg) scale(1.45); } 60% { opacity: 1; } }

/* The Pulse feel (research/11 C): the heartbeat, paper you can handle, ink. Borrowed from Pulse's boot screen
   (pulse/index.html: pb-trace, pb-beat) and Beat's paper (one-peace/web/assets/site.css: .tape, .idx). Quiet by default;
   all of it stops for reduced motion (motion.css). */

/* ---- Under the headline: DebugInit's circuit trace (the lines off the "D"), drawn in, then a signal runs along it ---- */
.trace-line { display: block; width: min(320px, 72%); height: 36px; margin: -2px 0 2px; overflow: visible; }
.trace-line .tr-path { fill: none; stroke: url(#tr-g); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.trace-line .tr-node { fill: var(--desk); stroke: url(#tr-g); stroke-width: 2.2; }
.trace-line .tr-node.is-small { fill: var(--accent); stroke: none; }
.trace-line .tr-sig { fill: #fff; stroke: var(--accent); stroke-width: 2; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="reduced"]) .trace-line .tr-path { stroke-dashoffset: 1; animation: tr-draw 1.4s cubic-bezier(.6,0,.2,1) .4s forwards; }
  :root:not([data-motion="reduced"]) .trace-line .tr-node { transform-box: fill-box; transform-origin: center; animation: tr-node 500ms cubic-bezier(.3,1.6,.5,1) both; }
  :root:not([data-motion="reduced"]) .trace-line .tr-node:nth-of-type(1) { animation-delay: .35s; }
  :root:not([data-motion="reduced"]) .trace-line .tr-node:nth-of-type(2) { animation-delay: 1.75s; }
  :root:not([data-motion="reduced"]) .trace-line .tr-node.is-small { animation-delay: 1s; }
  :root:not([data-motion="reduced"]) .trace-line .tr-sig { offset-path: path("M10 17 H92 L100 9 H150 L158 17 H232 L240 25 H300"); offset-rotate: 0deg;
    animation: tr-sig 2.2s cubic-bezier(.5,0,.3,1) 2.2s infinite; }
}
@keyframes tr-draw { to { stroke-dashoffset: 0; } }
@keyframes tr-node { from { transform: scale(0); } }
@keyframes tr-sig { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
:root[data-theme="night"] .trace-line .tr-node { fill: var(--desk); }

/* Lub-dub: the "D" on hover, and a primary button the first time it comes into view (shell.js adds .beat). */
@keyframes lubdub { 0%, 45%, 100% { transform: scale(1); } 10% { transform: scale(1.1); } 20% { transform: scale(.98); } 30% { transform: scale(1.06); } }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="reduced"]) .brand:hover svg { animation: lubdub 1.2s ease-in-out; }
  :root:not([data-motion="reduced"]) .btn--primary.beat { animation: lubdub 1.1s ease-in-out .2s; }
}

/* ---- Paper you can handle ---- */
/* Cards sit a hair off-straight, as sheets on a desk do, and straighten as you reach for them; on desktop they lean
   toward the pointer (shell.js sets --rx/--ry with a spring). */
.cards > li:nth-child(4n + 1) .card { --r: -.5deg; } .cards > li:nth-child(4n + 2) .card { --r: .4deg; }
.cards > li:nth-child(4n + 3) .card { --r: -.25deg; } .cards > li:nth-child(4n) .card { --r: .55deg; }
.card { transform: perspective(900px) rotate(var(--r, 0deg)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px)); }
a.card:hover, a.card:focus-visible { --r: 0deg; --lift: -4px; transform: perspective(900px) rotate(var(--r)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift)); }
/* Washi tape on the first card of each set, as Beat pins its cuttings. */
.cards > li:first-child .card::after { content: ""; position: absolute; top: -10px; left: 50%; width: 84px; height: 22px; margin-left: -42px; transform: rotate(-2.5deg);
  background: color-mix(in srgb, var(--brand-pink) 22%, transparent); box-shadow: 0 1px 2px rgba(0,0,0,.08);
  border-left: 2px dotted color-mix(in srgb, var(--paper) 70%, transparent); border-right: 2px dotted color-mix(in srgb, var(--paper) 70%, transparent); }
/* A page hero is a sheet: Pulse's margin line and faint rules. */
.hero--page::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(90deg, transparent calc(clamp(16px, 4vw, 48px) - 14px), color-mix(in srgb, var(--gilt) 40%, transparent) 0 calc(clamp(16px, 4vw, 48px) - 13px), transparent 0),
              repeating-linear-gradient(180deg, transparent 0 calc(var(--pitch) - 1px), color-mix(in srgb, var(--ink) 5%, transparent) 0 var(--pitch)); }

/* ---- Ink ---- */
/* The accent word gets a swash drawn under it, as if by pen. */
.hero h1 .em { position: relative; }
.hero h1 .em::after { content: ""; position: absolute; left: 2%; right: -2%; bottom: -.08em; height: .22em; background: var(--brand-pink); opacity: .55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9C40 3 90 2 198 6' stroke='%23000' stroke-width='3.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9C40 3 90 2 198 6' stroke='%23000' stroke-width='3.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="reduced"]) .hero h1 .em::after { animation: swash 700ms var(--spring-glide) 1.1s both; }
}
@keyframes swash { from { transform: scaleX(0); } }
/* Links in running text underline as a hand would draw them. */
.prose a, .faq a, .sec__hd a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size var(--spring-move-dur) var(--spring-move); }
.prose a:hover, .faq a:hover, .sec__hd a:hover { background-size: 100% 1.5px; }

/* ---- Magnetic buttons (desktop): shell.js moves --mx/--my with a spring ---- */
.btn.mag { translate: var(--mx, 0px) var(--my, 0px); }

/* ---- The feedback line at the foot of every page (embedded from debuginit-intake) ---- */
.helpful { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 22px 0; border-top: 1px dashed color-mix(in srgb, var(--ink) 20%, transparent); }
.helpful p { font: 600 22px/1.2 var(--font-display); }

/* Premium (research/11, the owner's brief: "like the world's top brands"): quiet confidence, not decoration.
   Generous space, type set with care, art kept very dim so words always read first. Pulse's own fonts and colours. */

/* Art: dim, and dimmer still behind words (WCAG contrast is the words' job; the art never competes). */
.art { opacity: .42; }
.sec__art { opacity: .7; }
:root[data-theme="night"] .art { opacity: .34; }

/* Type, set with care: optical tightening at size, true small figures, balanced lines. */
h1, .t-hero { letter-spacing: -.022em; font-weight: 600; font-feature-settings: "kern", "liga", "clig", "calt"; }
.hero h1 { font-size: clamp(46px, 7.4vw, 108px); line-height: .98; }
.hero--page h1 { font-size: clamp(40px, 5.8vw, 80px); }
h2, .t-h2 { letter-spacing: -.015em; font-size: clamp(32px, 4.2vw, 58px); line-height: 1.04; }
body { font-feature-settings: "kern", "liga", "calt", "ss01"; font-size: 17.5px; }
.lead { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.5; letter-spacing: -.005em; }
.label { letter-spacing: .16em; font-size: 11.5px; }
.sec { padding: clamp(72px, 10vw, 160px) 0; }
.sec__hd { margin-bottom: clamp(36px, 5vw, 64px); }
.sec__hd p { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; }
.btn { letter-spacing: -.005em; }
.btn--primary { box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 12px 28px -14px color-mix(in srgb, var(--accent) 80%, transparent); }

/* The House: products as app icons, the way a phone shows what it holds. */
.house { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.house__card { position: relative; display: grid; grid-template-columns: 78px 1fr; gap: 18px; height: 100%; padding: 22px; border-radius: 4px 22px 22px 4px; background: var(--paper);
  color: var(--ink); text-decoration: none; overflow: hidden;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 7%, transparent), 0 18px 40px -28px color-mix(in srgb, var(--ink) 45%, transparent);
  transition: transform var(--spring-move-dur) var(--spring-move), box-shadow var(--spring-move-dur) var(--spring-move); }
.house__card::before { content: ""; position: absolute; inset: auto -30% -60% auto; width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--pa) 16%, transparent), transparent); pointer-events: none; }
a.house__card:hover { transform: translateY(-4px); box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 7%, transparent), 0 26px 48px -26px color-mix(in srgb, var(--pa) 55%, transparent); }
.appicon { width: 78px; height: 78px; border-radius: 22%; box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--pa) 70%, transparent), 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent); }
.house__t h3 { font: 600 24px/1.1 var(--font-display); letter-spacing: -.01em; }
.house__line { margin: 4px 0 8px; font: italic 500 18px/1.3 var(--font-display); color: var(--pa); }
.house__t p:not(.house__line):not(.small) { color: var(--ink-2); font-size: 15px; }
.house__t .small { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.badge[data-s="In use"] { --c: var(--success); } .badge[data-s="Proposed"] { --c: var(--ink-3); }

/* Inside Pulse: modules on rules */
.mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 0 32px; margin: 0; padding: 0; list-style: none; }
.mods li { display: grid; gap: 4px; padding: 18px 0; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.mods b { font: 600 22px/1.15 var(--font-display); } .mods span { color: var(--ink-2); font-size: 15px; }
.plans { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 0; padding: 0; list-style: none; }
.plans li { display: grid; gap: 2px; padding: 12px 16px; border-radius: 4px 14px 14px 4px; background: var(--desk); max-width: 260px; }
.sec--paper .plans li { background: var(--desk); }
.plans b { font-weight: 700; font-size: 15px; } .plans span { font-size: 13.5px; color: var(--ink-3); }

/* Brand page */
.brandrows { display: grid; gap: 28px; }
.brandrow { padding: clamp(20px, 3vw, 32px); background: var(--paper); border-radius: 4px 22px 22px 4px; box-shadow: 0 18px 40px -30px color-mix(in srgb, var(--ink) 45%, transparent); }
.brandrow__hd { display: grid; grid-template-columns: 96px 1fr minmax(0, 300px); gap: 22px; align-items: center; margin-bottom: 22px; }
.brandrow__hd > img:first-child { width: 96px; height: 96px; border-radius: 22%; box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--pa) 70%, transparent); }
.brandrow__hd h2 { font-size: clamp(28px, 3vw, 40px); }
.brandrow .og { width: 100%; height: auto; border-radius: 10px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); }
@media (max-width: 760px) { .brandrow__hd { grid-template-columns: 72px 1fr; } .brandrow__hd > img:first-child { width: 72px; height: 72px; } .brandrow .og { grid-column: 1 / -1; } }
.brandrow__dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 18px 28px; }
.dl { margin: 6px 0 0; padding: 0; list-style: none; }
.dl a { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); font: 500 13.5px var(--font-mono); color: var(--ink-2); text-decoration: none; overflow-wrap: anywhere; }
.dl a:hover { color: var(--accent); } .dl small { color: var(--ink-3); white-space: nowrap; }

/* Love: the footer's last line beats, quietly. */
.love { display: inline-flex; align-items: center; gap: 6px; }
.love svg { width: 14px; height: 14px; color: var(--accent); }
@media (prefers-reduced-motion: no-preference) { :root:not([data-motion="reduced"]) .love svg { animation: lubdub 1.4s ease-in-out infinite; animation-delay: 2s; } }

/* Folds, as in a code editor: a chevron in the margin, "⋯ 14 lines" where the text waits. */
.fold > summary { list-style: none; cursor: pointer; position: relative; margin-bottom: 0; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: ""; position: absolute; left: -30px; top: .9em; width: 9px; height: 9px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(-45deg); transition: transform var(--spring-move-dur) var(--spring-move), border-color var(--fade-dur) var(--fade); }
.fold[open] > summary::before { transform: rotate(45deg); }
.fold > summary:hover::before { border-color: var(--accent); }
@media (max-width: 1320px) { .fold > summary::before { position: static; display: inline-block; margin: 0 0 4px; } }
.fold__more { justify-self: start; display: inline-flex; align-items: center; padding: 3px 12px; border-radius: var(--r-full); font: 600 13px/1.6 var(--font-mono);
  color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); transition: background-color var(--fade-dur) var(--fade); }
.fold > summary:hover .fold__more { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.fold[open] .fold__more { display: none; }
.fold[open] > summary { margin-bottom: clamp(36px, 5vw, 64px); }
@media (prefers-reduced-motion: no-preference) {
  
}
.foldbar { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 0 0; font-size: 13px; color: var(--ink-3); }
.foldbar button { border: 0; background: none; color: var(--accent); font: 600 13px var(--font-sans); cursor: pointer; min-height: 32px; }

/* The stack: four layers, the base at the bottom; each opens like a fold. */
.stack { display: flex; flex-direction: column; gap: 10px; perspective: 1400px; }
.stack__layer { position: relative; border-radius: 4px 22px 22px 4px; background: var(--paper); overflow: hidden;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 7%, transparent), 0 18px 40px -30px color-mix(in srgb, var(--ink) 50%, transparent);
  margin-inline: calc(var(--n) * clamp(0px, 1.6vw, 22px)); transition: margin var(--spring-move-dur) var(--spring-move); }
.stack__layer:nth-child(1) { background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 7%, var(--paper)), var(--paper) 60%); }
.stack__layer:last-child { background: linear-gradient(120deg, var(--paper), color-mix(in srgb, var(--ink) 4%, var(--paper))); }
.stack__layer > summary { display: grid; grid-template-columns: 54px 1fr auto; grid-template-areas: "num name chev" "num line chev"; align-items: center; gap: 2px 14px;
  padding: 22px 24px; cursor: pointer; list-style: none; }
.stack__layer > summary::-webkit-details-marker { display: none; }
.stack__num { grid-area: num; font: 600 15px var(--font-mono); color: var(--accent); }
.stack__name { grid-area: name; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 600 clamp(24px, 2.6vw, 34px)/1.1 var(--font-display); }
.stack__line { grid-area: line; color: var(--ink-2); font-size: 15.5px; }
.stack__chev { grid-area: chev; width: 10px; height: 10px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); transition: transform var(--spring-move-dur) var(--spring-move); }
.stack__layer[open] .stack__chev { transform: rotate(225deg); }
.stack__layer > :not(summary) { padding: 0 24px 24px 92px; }
@media (max-width: 640px) { .stack__layer > :not(summary) { padding-left: 24px; } .stack__layer > summary { grid-template-columns: 34px 1fr auto; } }
.stack__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-app { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 14px 4px 6px; border-radius: var(--r-full); background: var(--desk);
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; transition: transform var(--spring-snap-dur) var(--spring-snap), background-color var(--fade-dur) var(--fade); }
.chip-app:not(:has(img)) { padding-left: 14px; }
.chip-app img { width: 28px; height: 28px; border-radius: 8px; }
.chip-app:hover { background: color-mix(in srgb, var(--pa, var(--accent)) 12%, var(--desk)); transform: translateY(-2px); }
.stack__grid { display: grid; grid-template-columns: repeat(36, 1fr); gap: 4px; max-width: 640px; margin-bottom: 10px; }
.stack__grid i { aspect-ratio: 1; border-radius: 2px; background: color-mix(in srgb, var(--ink) 16%, transparent); }
.stack__grid i:nth-child(12n+5) { background: color-mix(in srgb, var(--accent) 55%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="reduced"]) .stack__layer[open] .stack__grid i { animation: rise-t 500ms var(--spring-move) both; animation-delay: calc(var(--d, 0) * 1ms); }
}

/* Team: the 11·11 portraits on paper */
.teams { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.teamchip { padding: 6px 14px; border-radius: var(--r-full); background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--accent); font-weight: 700; font-size: 14px; }
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 26px 20px; margin: 0; padding: 0; list-style: none; }
.person { position: relative; display: grid; justify-items: center; text-align: center; gap: 4px; padding: 26px 18px 22px; background: var(--paper); border-radius: 4px 22px 22px 4px;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 7%, transparent), 0 18px 40px -28px color-mix(in srgb, var(--ink) 45%, transparent);
  transition: transform var(--spring-move-dur) var(--spring-move); }
.person:hover { transform: translateY(-4px) rotate(-.4deg); }
.person--lead { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent), 0 18px 40px -26px color-mix(in srgb, var(--accent) 55%, transparent); }
.cameo { width: 132px; height: 132px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; margin-bottom: 10px;
  background: color-mix(in srgb, var(--accent) 12%, var(--desk)); font: 600 40px var(--font-display); color: var(--accent);
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px color-mix(in srgb, var(--ink) 10%, transparent); }
.cameo svg { width: 100%; height: 100%; }
@media (prefers-reduced-motion: no-preference) { :root:not([data-motion="reduced"]) .cameo .blink { animation: blink 5s infinite; transform-origin: center 61px; transform-box: view-box; } }
@keyframes blink { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
.person__icon { position: absolute; top: 18px; right: 18px; font-size: 22px; }
.person__name { font: 600 26px/1.1 var(--font-display); }
.person__role { color: var(--ink-3); font-size: 14px; font-weight: 600; }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--success); }
.live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: ping 2s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 7px transparent; } }
.socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.soc { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: var(--r-full); background: var(--desk); color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 600; }
.soc svg { width: 14px; height: 14px; fill: currentColor; }
.soc:hover { background: color-mix(in srgb, var(--accent) 12%, var(--desk)); color: var(--accent); }
.follow { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.follow h2 { margin: 8px 0; } .follow p { color: var(--ink-2); }
.follow__links { display: flex; flex-wrap: wrap; gap: 12px; } .follow .btn svg { width: 16px; height: 16px; fill: currentColor; }
@media (max-width: 760px) { .follow { grid-template-columns: 1fr; } }

/* Email channels: nine inboxes, each an envelope you can open */
.inboxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.inbox { position: relative; display: grid; grid-template-columns: 44px 1fr; grid-template-areas: "icon kind" "icon mail" "icon for"; gap: 2px 14px; padding: 20px 22px; height: 100%;
  background: var(--paper); border-radius: 4px 18px 18px 4px; color: var(--ink); text-decoration: none; overflow: hidden;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 7%, transparent), 0 16px 36px -28px color-mix(in srgb, var(--ink) 45%, transparent);
  transition: transform var(--spring-move-dur) var(--spring-move), box-shadow var(--spring-move-dur) var(--spring-move); }
.sec--paper .inbox { background: var(--desk); }
.inbox::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: repeating-linear-gradient(90deg, var(--accent) 0 14px, transparent 14px 20px, var(--product-debuginit) 20px 34px, transparent 34px 40px); opacity: .55; }
.inbox:hover { transform: translateY(-3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 7%, transparent), 0 24px 44px -26px color-mix(in srgb, var(--accent) 50%, transparent); }
.inbox__icon { grid-area: icon; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.inbox__icon svg { width: 22px; height: 22px; }
.inbox:hover .inbox__icon svg { animation: lubdub 1s ease-in-out; }
.inbox__kind { grid-area: kind; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.inbox__mail { grid-area: mail; font: 600 21px/1.25 var(--font-display); color: var(--accent); overflow-wrap: anywhere; }
.inbox__for { grid-area: for; color: var(--ink-2); font-size: 14.5px; }

/* Folding and unfolding on scroll, smoothly: the body's height eases with a spring where the browser can animate to and
   from "auto" (interpolate-size, ::details-content); elsewhere it opens at once. Scroll anchoring keeps the view still. */
html { overflow-anchor: auto; }
.fold, .fold * { overflow-anchor: auto; }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .fold::details-content { height: 0; overflow: clip; transition: height 560ms var(--spring-glide), content-visibility 560ms allow-discrete; }
  .fold[open]::details-content { height: auto; }
  @media (prefers-reduced-motion: reduce) { .fold::details-content { transition: none; } }
  :root[data-motion="reduced"] .fold::details-content { transition: none; }
}
.fold__body { transition: opacity 360ms var(--fade), transform 460ms var(--spring-move); }
.fold:not([open]) .fold__body { opacity: 0; transform: translateY(-8px); }
.fold[open] .fold__body { opacity: 1; transform: none; }
/* A folded section reads as a line of the outline: quieter, with its "⋯" */
.fold:not([open]) > summary h2 { color: var(--ink-2); transition: color var(--fade-dur) var(--fade); }
.fold:not([open]) > summary { margin-bottom: 0; }
.sec:has(> .wrap > .fold:not([open])) { padding-block: clamp(22px, 3vw, 38px); transition: padding 560ms var(--spring-glide); }
.sec { transition: padding 560ms var(--spring-glide); }

/* ---- The homepage story: a pinned stage, short steps that swap it (tools/story.py) ---- */
.story { padding: clamp(40px, 6vw, 80px) 0 clamp(60px, 8vw, 120px); }
.story__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.story__stage { position: sticky; top: calc(50vh - min(260px, 32vh)); height: min(520px, 64vh); display: grid; grid-template-rows: 1fr auto; gap: 16px; }
.story__frame { position: relative; border-radius: 4px 28px 28px 4px; background: var(--paper); overflow: hidden;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 7%, transparent), 0 30px 60px -36px color-mix(in srgb, var(--ink) 50%, transparent); }
.story__frame::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 26px, color-mix(in srgb, var(--gilt) 45%, transparent) 26px 27px, transparent 27px); pointer-events: none; }
.story__scene { position: absolute; inset: 6% 6% 6% 9%; display: grid; place-items: center; opacity: 0; transform: translateY(14px) scale(.985);
  transition: opacity 420ms var(--fade), transform 620ms var(--spring-glide); pointer-events: none; }
.story__scene.on { opacity: 1; transform: none; }
.story__scene svg { width: 100%; height: 100%; }
.story__scene .lay.on path { filter: drop-shadow(0 12px 18px color-mix(in srgb, var(--accent) 30%, transparent)); }
.story__dots { display: flex; gap: 6px; justify-content: center; }
.story__dots i { width: 6px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 18%, transparent); transition: width 420ms var(--spring-move), background-color 300ms var(--fade); }
.story__dots i.on { width: 22px; background: var(--accent); }
.story__steps { margin: 0; padding: 0; list-style: none; }
.story__step { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; gap: 12px; opacity: .28; transition: opacity 420ms var(--fade); }
.story__step.on { opacity: 1; }
.story__step h2 { font-size: clamp(32px, 3.8vw, 54px); }
.story__text { font-family: var(--font-serif); font-size: clamp(19px, 1.5vw, 22px); line-height: 1.55; color: var(--ink-2); max-width: 46ch; }
.story__pic { display: none; }
.story__step .go { margin-top: 6px; }
/* Phone and no script: no pinned stage; each step carries its own picture, one after another. */
@media (max-width: 900px) {
  .story__grid { grid-template-columns: 1fr; }
  .story__stage { display: none; }
  .story__step { min-height: 0; opacity: 1; padding: 36px 0; border-top: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); }
  .story__pic { display: block; border-radius: 4px 22px 22px 4px; background: var(--paper); padding: 14px; margin-bottom: 8px; }
  .story__pic svg { width: 100%; height: auto; max-height: 300px; }
}
html:not(.js) .story__step { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .story__scene { transition: opacity 120ms linear; transform: none; } }

/* ---- Thinking in ecosystems (tools/thinking_page.py) ---- */
.think__hook { font: italic 500 clamp(20px, 1.8vw, 24px)/1.35 var(--font-display); color: var(--ink-2); max-width: 44ch; }
.think { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; max-width: 860px; }
.think li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 20px 0; border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.think b { font: 600 clamp(20px, 1.7vw, 24px)/1.25 var(--font-sans); letter-spacing: -.01em; }
.think span { font-family: var(--font-serif); font-size: 18.5px; line-height: 1.55; color: var(--ink-2); }
.think cite { font: 600 12px/1.4 var(--font-sans); font-style: normal; letter-spacing: .06em; color: var(--ink-3); }
.think cite::before { content: "↳ "; color: var(--gilt); }
.refs { margin: 0; padding-left: 1.4em; display: grid; gap: 8px; font-family: var(--font-serif); font-size: 16.5px; color: var(--ink-2); overflow-wrap: anywhere; }

/* The signature: a note in his words, signed by hand, sealed; then the facts on record */
.sig { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px);
  padding: clamp(24px, 4vw, 52px); background: var(--paper); border-radius: 4px 28px 28px 4px; border: 1px solid color-mix(in srgb, var(--gilt) 35%, transparent); }
@media (max-width: 900px) { .sig { grid-template-columns: 1fr; } }
.sig__note { position: relative; }
.sig blockquote { margin: 14px 0 22px; font: italic 500 clamp(24px, 2.4vw, 32px)/1.3 var(--font-display); color: var(--ink); text-wrap: balance; }
.sig blockquote::before { content: "“"; display: block; font: 600 64px/.6 var(--font-display); color: var(--gilt); }
.sig__hand { font: italic 600 clamp(38px, 4vw, 54px)/1 var(--font-display); color: var(--accent); transform: rotate(-3deg); transform-origin: left; margin: 6px 0 4px; }
@media (prefers-reduced-motion: no-preference) { :root:not([data-motion="reduced"]) .sig__hand { clip-path: inset(0 100% 0 0); animation: write 1.6s var(--fade) forwards; animation-timeline: view(); animation-range: entry 30% cover 45%; } }
@keyframes write { to { clip-path: inset(0 0 0 0); } }
.sig__who { font-size: 15px; } .sig__who b { font-weight: 700; }
.sig__seal { position: absolute; right: 0; top: 0; width: 84px; height: 84px; transform: rotate(-12deg); }
.sig__facts { display: grid; gap: 26px; align-content: start; }
.sig__resp { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.sig__resp li { padding: 6px 14px; border-radius: var(--r-full); background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--accent); font-weight: 700; font-size: 14px; }
.sig__path { margin: 8px 0 0; padding: 0; list-style: none; border-left: 1.5px solid color-mix(in srgb, var(--gilt) 55%, transparent); }
.sig__path li { position: relative; display: grid; gap: 1px; padding: 0 0 16px 18px; }
.sig__path li::before { content: ""; position: absolute; left: -5px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 1.5px var(--gilt); }
.sig__path li:first-child::before { background: var(--accent); box-shadow: none; }
.sig__when { font: 600 12px var(--font-mono); color: var(--ink-3); } .sig__path b { font-weight: 700; } .sig__where { font-size: 14px; color: var(--ink-2); }
.sig__path p { font-family: var(--font-serif); font-size: 16px; color: var(--ink-2); }
.sig__certs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; margin-top: 8px; }
.sig__certs .chips li { font-size: 12.5px; min-height: 30px; padding: 0 11px; }

/* ---- Myna & Pulse, the episode ---- */
.ep__stage { display: grid; gap: 18px; padding: var(--card-pad, 26px); border-radius: 4px 28px 28px 4px; background: var(--paper); border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.ep__cast { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; }
.ep__who { display: flex; align-items: center; gap: 12px; margin: 0; }
.ep__who--pulse { flex-direction: row-reverse; text-align: right; }
.ep__who img { width: 56px; height: 56px; border-radius: 18px; transition: transform var(--spring-move-dur) var(--spring-move); }
.ep__who b { display: block; font: 600 22px/1 var(--font-display); } .ep__who small { color: var(--ink-3); font-size: 12.5px; }
.ep__who.talk img { transform: translateY(-4px) rotate(-4deg) scale(1.06); }
@media (prefers-reduced-motion: no-preference) { .ep__who.talk img { animation: lubdub 1.1s ease-in-out infinite; } }
.ep__ctl { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ep__chat { display: grid; gap: 10px; margin: 0; padding: 6px 0; list-style: none; max-height: 460px; overflow: auto; overscroll-behavior: contain; scroll-padding: 20px; }
.ep__line { display: grid; gap: 4px; max-width: min(78%, 560px); }
.ep__line--pulse { justify-self: end; text-align: right; }
.ep__say { padding: 12px 16px; border-radius: 18px 18px 18px 6px; background: var(--desk); font: 500 17px/1.45 var(--font-sans); }
.ep__line--myna .ep__say { background: color-mix(in srgb, var(--accent) 10%, var(--desk)); color: var(--ink); }
.ep__line--pulse .ep__say { border-radius: 18px 18px 6px 18px; }
.ep__think { font: italic 500 16px/1.35 var(--font-display); color: var(--ink-3); padding: 0 6px; }
.ep__think::before { content: "thinks: "; font-style: normal; font: 600 11px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--gilt); }
.ep.is-live:not(.show-all) .ep__line:not(.in) { display: none; }
.ep.is-live .ep__line.in { animation: rise-t 360ms var(--spring-move) both; }
.ep.is-live .ep__line.in .ep__think { animation: rise-t 360ms var(--spring-move) 700ms both; }
.ep__note { color: var(--ink-3); }
@media (max-width: 640px) { .ep__cast { grid-template-columns: 1fr 1fr; } .ep__ctl { grid-column: 1 / -1; order: 3; } .ep__line { max-width: 90%; } }

/* ---- The letter ---- */
.letter__paper { position: relative; padding: 26px 26px 22px 40px; border-radius: 4px 18px 18px 4px; background: var(--paper);
  background-image: linear-gradient(90deg, transparent 22px, color-mix(in srgb, var(--accent) 30%, transparent) 22px 23px, transparent 23px),
                    repeating-linear-gradient(180deg, transparent 0 calc(var(--pitch) - 1px), color-mix(in srgb, var(--ink) 7%, transparent) 0 var(--pitch));
  font: 400 19px/var(--pitch) var(--font-serif); color: var(--ink); }
.letter__paper p { margin: 0 0 var(--pitch); } .letter__paper .small { margin: 0; line-height: 1.4; font-family: var(--font-sans); }
.letter__greet { font: italic 500 22px/var(--pitch) var(--font-display); }
.letter__close { margin-bottom: 0 !important; }
.letter__hand { font: italic 600 40px/1.1 var(--font-display); color: var(--accent); transform: rotate(-3deg); transform-origin: left; margin: 2px 0 6px !important; }
.letter__seal { position: absolute; right: 18px; top: 18px; width: 64px; height: 64px; transform: rotate(-12deg); }
dialog.letter { max-width: 640px; }
@media (min-width: 1024px) { dialog.letter { inset: 0; margin: auto; height: auto; max-height: 88dvh; width: min(640px, 92vw); border-radius: 4px 22px 22px 4px; } }
@media (prefers-reduced-motion: no-preference) { :root:not([data-motion="reduced"]) dialog.letter[open] .letter__paper { animation: unfold 620ms var(--spring-glide) both; transform-origin: top; } }
.letter--inline { max-width: 760px; }

/* Paper, on every screen (research/11): grain on the desk, sheets with deckled edges, a page that turns like a leaf,
   and art that steps back as the screen gets smaller — full but dim on a desk, quieter on a tablet, gone on a phone,
   where the page is clean paper with Pulse's margin line. Fonts: Pulse's own three. */

/* ---- Type, by the job it does (Pulse: --font-hand Cormorant, --font-sans Jakarta, --font-serif EB Garamond) ---- */
.prose, .faq details p, .defs dd, .steps p, .card p, .decide p, .house__t p:not(.house__line):not(.small) {
  font-family: var(--font-serif); font-size: 1.13em; line-height: 1.6; font-variant-numeric: oldstyle-nums proportional-nums; hanging-punctuation: first; }
.prose { font-size: clamp(18px, 1.35vw, 20px); color: var(--ink-2); }
.lead { font-family: var(--font-sans); font-weight: 400; }
h1, h2, .person__name, .stack__name, .mods b, .defs dt, .decide b, .house__t h3 { font-variant-numeric: lining-nums; font-kerning: normal; }
.mono, .num, .stack__num, .fold__more, .dl a { font-variant-numeric: tabular-nums slashed-zero; }
/* Display weight and leading tuned to size: Cormorant is delicate small, so it gets heavier and looser as it shrinks. */
@media (max-width: 760px) {
  .hero h1 { font-size: clamp(40px, 11.5vw, 56px); line-height: 1.02; font-weight: 650; letter-spacing: -.012em; }
  .hero--page h1 { font-size: clamp(36px, 10vw, 48px); }
  h2, .t-h2 { font-size: clamp(30px, 8.4vw, 40px); font-weight: 650; line-height: 1.06; }
  body { font-size: 17px; }
  .prose, .faq details p { hyphens: auto; -webkit-hyphens: auto; }
}
@media (min-width: 1440px) { .hero h1 { font-size: 112px; } }
.legal-page main .prose { max-width: 66ch; }

/* ---- Paper grain on the desk, every page, every screen (a fixed layer, never in the way) ---- */
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .3 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); }
:root[data-theme="night"] body::before { mix-blend-mode: screen; opacity: .25; }
main, .ft { position: relative; z-index: var(--z-base); }

/* ---- Sheets with deckled edges: a paper section has torn top and bottom edges, as hand-made paper does ---- */
.sec--paper { position: relative; background: transparent; z-index: 1; }
.sec--paper::before { content: ""; position: absolute; inset: 10px 0; z-index: -1; background: var(--paper);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 10' preserveAspectRatio='none'%3E%3Cpath d='M0 10V4l9 2 11-3 8 2 13-2 9 3 12-3 7 2 14-1 9 2 10-3 12 2 8-1 13 3 9-3 11 2 10-2 12 3 8-2 13 1 10-2 9 3 12-3 11 2 8-1 13 2 9-3 10 3 12-2 9 1 11-3 10 2 13-1 8 3 12-3 9 1 11 2V10z'/%3E%3C/svg%3E") top / 400px 10px repeat-x,
                 linear-gradient(#000, #000) center / 100% calc(100% - 20px) no-repeat,
                 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0v6l10-2 12 3 8-2 13 2 9-3 12 3 7-2 14 1 9-2 10 3 12-2 8 1 13-3 9 3 11-2 10 2 12-3 8 2 13-1 10 2 9-3 12 3 11-2 8 1 13-2 9 3 10-3 12 2 9-1 11 3 10-2 13 1 8-3 12 3 9-1 11-2V0z'/%3E%3C/svg%3E") bottom / 400px 10px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 10' preserveAspectRatio='none'%3E%3Cpath d='M0 10V4l9 2 11-3 8 2 13-2 9 3 12-3 7 2 14-1 9 2 10-3 12 2 8-1 13 3 9-3 11 2 10-2 12 3 8-2 13 1 10-2 9 3 12-3 11 2 8-1 13 2 9-3 10 3 12-2 9 1 11-3 10 2 13-1 8 3 12-3 9 1 11 2V10z'/%3E%3C/svg%3E") top / 400px 10px repeat-x,
                 linear-gradient(#000, #000) center / 100% calc(100% - 20px) no-repeat,
                 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0v6l10-2 12 3 8-2 13 2 9-3 12 3 7-2 14 1 9-2 10 3 12-2 8 1 13-3 9 3 11-2 10 2 12-3 8 2 13-1 10 2 9-3 12 3 11-2 8 1 13-2 9 3 10-3 12 2 9-1 11 3 10-2 13 1 8-3 12 3 9-1 11-2V0z'/%3E%3C/svg%3E") bottom / 400px 10px repeat-x;
  filter: drop-shadow(0 10px 24px color-mix(in srgb, var(--ink) 9%, transparent)); }
.sec--paper + .sec, .sec + .sec--paper { border-top: 0; }

/* ---- A page turns like a leaf: the new page swings in from its binding on the left ---- */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-new(root) { animation: leaf-in var(--spring-glide-dur) var(--spring-glide) both; transform-origin: left center; }
  ::view-transition-old(root) { animation: leaf-out 260ms var(--fade) both; transform-origin: left center; }
}
@keyframes leaf-in { from { opacity: 0; transform: perspective(1800px) rotateY(-9deg) translateX(18px); } }
@keyframes leaf-out { to { opacity: 0; transform: perspective(1800px) rotateY(4deg) scale(.985); } }

/* ---- Art by screen ---- */
/* Desk (≥1280): the full scene, dim. */
/* Tablet (761–1279): quieter, and pushed to the right half so it never sits under the words. */
@media (min-width: 761px) and (max-width: 1279px) {
  .hero .art { opacity: .26; left: 38%; }
  .hero .art::after { background: linear-gradient(90deg, var(--desk) 0%, transparent 40%); }
  .sec__art { opacity: .55; }
}
/* Phone (≤760): no art behind the words at all. Clean paper: Pulse's margin line and faint rules, the heartbeat stays. */
@media (max-width: 760px) {
  .hero .art { display: none; }
  .hero { background:
      linear-gradient(90deg, transparent 10px, color-mix(in srgb, var(--accent) 26%, transparent) 10px 11px, transparent 11px),
      repeating-linear-gradient(180deg, transparent 0 calc(var(--pitch) - 1px), color-mix(in srgb, var(--ink) 5%, transparent) 0 var(--pitch)); }
  .hero--page::before { display: none; }
  .sec__art { display: none; }
  body::before { opacity: .35; }
  .cards > li .card { --r: 0deg; }   /* straight sheets on a small screen: tidier */
}
/* Night: the art is quieter still. */
:root[data-theme="night"] .hero .art { opacity: .3; }

/* Motion (research/03). Scroll-driven reveals with no script; page changes as view transitions; everything off for
   reduced motion, whether the device asks or the reader turns it off (data-motion="reduced", as in Pulse). */

/* Page to page: the header and tab bar stay, the page glides. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 200ms var(--fade) both; }
::view-transition-new(root) { animation: vt-in var(--spring-glide-dur) var(--spring-glide) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    :root:not([data-motion="reduced"]) .rv { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    :root:not([data-motion="reduced"]) .steps::before { animation: draw linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
    :root:not([data-motion="reduced"]) .defs div { animation: rule linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  }
  /* The headline's words rise one after another on first load (as the live site's did). */
  :root:not([data-motion="reduced"]) .hero h1 .w { display: inline-block; animation: word var(--spring-glide-dur) var(--spring-glide) both; animation-delay: calc(var(--i) * 45ms + 80ms); }
  :root:not([data-motion="reduced"]) .hero .lead, :root:not([data-motion="reduced"]) .hero .btn-row, :root:not([data-motion="reduced"]) .hero .pillars {
    animation: rise-t var(--spring-glide-dur) var(--spring-glide) both; animation-delay: 420ms; }
  :root:not([data-motion="reduced"]) .brand .tr { stroke-dasharray: 1; stroke-dashoffset: 1; animation: trace 900ms var(--fade) forwards; }
  :root:not([data-motion="reduced"]) .brand .tr:nth-of-type(2n) { animation-delay: 120ms; }
}
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes rise-t { from { opacity: 0; transform: translateY(16px); } }
@keyframes word { from { opacity: 0; transform: translateY(.42em); } }
@keyframes draw { from { transform: scaleX(0); } }
@keyframes rule { from { border-top-color: transparent; } }
@keyframes trace { to { stroke-dashoffset: 0; } }

/* Reduced: no movement at all beyond quick fades. */
:root[data-motion="reduced"] *, :root[data-motion="reduced"] *::before, :root[data-motion="reduced"] *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 120ms !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 120ms !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* The art layer: a still is always there; the live canvas fades in over it. */
.art { position: absolute; inset: 0; z-index: var(--z-art); overflow: hidden; pointer-events: none; }
.art img, .art svg, .art canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.art canvas { opacity: 0; transition: opacity 900ms var(--fade); }
.art canvas.on { opacity: 1; }
.art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--desk) 0%, color-mix(in srgb, var(--desk) 82%, transparent) 42%, transparent 78%); }
@media (max-width: 760px) { .hero .art { top: auto; height: 52%; opacity: .7; } .art::after { background: linear-gradient(180deg, var(--desk) 0%, color-mix(in srgb, var(--desk) 55%, transparent) 45%, transparent); } }
.pause { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; color: var(--ink-3); font: 600 13px var(--font-sans); cursor: pointer; min-height: 44px; padding: 0; }

/* Polish (the owner, 1 Nov): the original logo, dimmer art, one spacing rhythm for every card, a calmer layout. Loaded last. */

/* The logo: the original DebugInit mark beside the wordmark, optically aligned. */
.brand { gap: 10px; }
.brand__mark { width: 44px; height: auto; display: block; }
.ft .brand__mark { width: 52px; }
.brand b { font-size: 20px; letter-spacing: -.015em; }

/* Art: dimmer still, so pages read first and the art is felt more than seen. */
.art { opacity: .26 !important; }
.sec__art { opacity: .45; }
.story__scene { opacity: 0; } .story__scene.on { opacity: .92; }
@media (min-width: 761px) and (max-width: 1279px) { .hero .art { opacity: .18 !important; } }

/* One rhythm for every card: the same inner space, the same gaps between them. */
:root { --card-pad: clamp(22px, 2.4vw, 30px); --card-gap: clamp(14px, 1.6vw, 22px); }
.cards, .house, .people, .inboxes, .brandrows, .mods, .sig__certs, .myna-facts { gap: var(--card-gap); }
.card { padding: var(--card-pad) var(--card-pad) calc(var(--card-pad) - 2px) calc(var(--card-pad) + 4px); gap: 12px; }
.house__card { padding: var(--card-pad); gap: 20px; }
.inbox { padding: var(--card-pad); gap: 4px 16px; }
.person { padding: calc(var(--card-pad) + 6px) var(--card-pad) var(--card-pad); }
.stack__layer > summary { padding: var(--card-pad) calc(var(--card-pad) + 4px); }
.stack__layer > :not(summary) { padding-bottom: var(--card-pad); }
.brandrow, .sig, .sheetform { padding: calc(var(--card-pad) + 8px); }
.card h3, .house__t h3 { margin-bottom: 2px; }
.card p + p { margin-top: -4px; }

/* Layout: a slightly wider page on large screens, steadier section rhythm, headings that never crowd. */
@media (min-width: 1440px) { .wrap { width: min(1280px, 100% - 96px); } }
.sec__hd { gap: 14px; max-width: 780px; }
.sec__hd h2 + p, .sec__hd h2 + .think__hook { margin-top: 2px; }
.hero__in { gap: clamp(18px, 2vw, 28px); }
.hero .btn-row { margin-top: 6px; }
.label { line-height: 1.2; }
h2 { text-wrap: balance; } p { text-wrap: pretty; }

/* Icons: one size per place, so the new set reads as one family. */
.icon-btn svg { width: 21px; height: 21px; }
.tabbar svg { width: 23px; height: 23px; }
.app svg { width: 26px; height: 26px; }
.nav__btn svg { width: 14px; height: 14px; }
.inbox__icon svg, .myna-chip svg { width: 22px; height: 22px; }
.hero__more { max-width: 58ch; font-family: var(--font-serif); font-size: clamp(18px, 1.4vw, 20px); line-height: 1.55; color: var(--ink-2);
  padding-left: 14px; border-left: 2px solid color-mix(in srgb, var(--gilt) 60%, transparent); }

/* ---- The House: dock, filters, cards, sheet ---- */
.dock { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 18px; padding: 12px 14px; width: fit-content; max-width: 100%;
  border-radius: 24px; background: color-mix(in srgb, var(--paper) 80%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.dock__app { display: grid; justify-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--ink-2); font: 600 11px var(--font-sans);
  transform-origin: bottom center; transform: scale(var(--s, 1)); transition: transform 280ms var(--spring-move); }
.dock__app img, .dock__app .mono-tile { width: 52px; height: 52px; border-radius: 15px; }
.dock__app span { max-width: 72px; text-align: center; line-height: 1.2; opacity: .8; }
.dock__app:hover span, .dock__app:focus-visible span { opacity: 1; color: var(--ink); }
.mono-tile { display: grid; place-items: center; background: color-mix(in srgb, var(--pa, var(--accent)) 14%, var(--paper)); color: var(--pa, var(--accent));
  font: 600 26px var(--font-display); border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); }
@media (max-width: 640px) { .dock { gap: 8px; } .dock__app img, .dock__app .mono-tile { width: 44px; height: 44px; border-radius: 13px; } .dock__app span { display: none; } }

.hx__filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.hx__filter { min-height: 40px; padding: 0 16px; border-radius: var(--r-full); border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); background: transparent;
  color: var(--ink-2); font: 600 14px var(--font-sans); cursor: pointer; transition: background-color var(--fade-dur) var(--fade), color var(--fade-dur) var(--fade); }
.hx__filter.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.hxs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--card-gap); margin: 0; padding: 0; list-style: none; }
.hx__card { position: relative; display: grid; grid-template-columns: 72px 1fr; gap: 18px; align-items: start; width: 100%; height: 100%; padding: var(--card-pad);
  text-align: left; border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); border-radius: 4px 22px 22px 4px; background: var(--paper); color: var(--ink); cursor: pointer;
  transition: transform var(--spring-move-dur) var(--spring-move), border-color var(--fade-dur) var(--fade); }
.hx__card::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 2px; background: var(--pa); opacity: .7; }
.hx__card:hover, .hx__card:focus-visible { transform: translateY(-3px); border-color: color-mix(in srgb, var(--pa) 45%, transparent); }
.hx__card .appicon { width: 72px; height: 72px; border-radius: 20px; }
.hx__t { display: grid; gap: 4px; min-width: 0; }
.hx__t b { font: 600 24px/1.1 var(--font-display); }
.hx__t i { font: italic 500 17px/1.35 var(--font-display); color: color-mix(in srgb, var(--pa) 70%, var(--ink)); }
.hx__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; color: var(--ink-3); }
.hx__go { position: absolute; right: 18px; top: 18px; font: 600 12px var(--font-sans); color: var(--ink-3); opacity: 0; transition: opacity var(--fade-dur) var(--fade); }
.hx__card:hover .hx__go, .hx__card:focus-visible .hx__go { opacity: 1; }
.hx-sheet__og { width: 100%; height: auto; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); margin-bottom: 16px; }
.hx-sheet__line { font: italic 500 22px/1.3 var(--font-display); color: color-mix(in srgb, var(--pa) 70%, var(--ink)); }
.hx-sheet__about { font-family: var(--font-serif); font-size: 18px; color: var(--ink-2); margin-top: 8px; }
.hx-sheet__meta { display: flex; align-items: center; gap: 8px; margin: 14px 0 18px; }
:root[data-theme="night"] .hx__t i, :root[data-theme="night"] .hx-sheet__line { color: color-mix(in srgb, var(--pa) 40%, var(--ink)); }

/* Myna on the homepage: Pulse's own Myna screen, in a window */
.myna-home { padding-top: clamp(28px, 4vw, 56px); }
.myna-frame { position: relative; overflow: hidden; border-radius: 4px 26px 26px 4px; border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); background: #FBFAF6; height: min(760px, 86vh); }
.myna-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---- Phone fixes (1 Nov QA) ---- */
@media (max-width: 640px) {
  .ep__who small { display: block; white-space: nowrap; }
  .ep__who b { font-size: 19px; }
  .ep__who img { width: 46px; height: 46px; border-radius: 14px; }
  .sig__seal { position: static; float: right; width: 58px; height: 58px; margin: -4px -4px 6px 10px; }
  .sig blockquote { clear: none; }
}

/* The homepage hero, split: words left, Myna live right */
.hero__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.hero__split .hero__in { max-width: 620px; }
.hero__split h1 { max-width: 12ch; }
.hero__myna .myna-frame { height: min(680px, 78vh); }
.hero__myna-k { margin-top: 10px; color: var(--ink-3); }
@media (max-width: 1100px) {
  .hero__split { grid-template-columns: 1fr; }
  .hero__myna .myna-frame { height: min(620px, 82vh); }
}

/* The House, as a shelf of app tiles */
.shelf__hd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 12px 40px; max-width: none; }
.shelf__hd p:not(.label) { color: var(--ink-2); }
@media (max-width: 760px) { .shelf__hd { grid-template-columns: 1fr; } }
.shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--card-gap); margin: 0; padding: 0; list-style: none; }
.shelf__tile { position: relative; display: grid; grid-template-columns: 64px 1fr; grid-template-areas: "icon name" "icon line" "icon meta"; column-gap: 18px; row-gap: 2px;
  align-items: center; height: 100%; padding: var(--card-pad); border-radius: 4px 22px 22px 4px; background: var(--paper); color: var(--ink); text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); transition: transform var(--spring-move-dur) var(--spring-move), border-color var(--fade-dur) var(--fade); }
.shelf__tile:hover, .shelf__tile:focus-visible { transform: translateY(-3px); border-color: color-mix(in srgb, var(--pa) 45%, transparent); }
.shelf__icon { grid-area: icon; width: 64px; height: 64px; border-radius: 18px; align-self: start; transition: transform var(--spring-move-dur) var(--spring-move); }
.shelf__tile:hover .shelf__icon { transform: rotate(-4deg) scale(1.04); }
.shelf__name { grid-area: name; font: 600 23px/1.1 var(--font-display); }
.shelf__line { grid-area: line; font: italic 500 16.5px/1.3 var(--font-display); color: color-mix(in srgb, var(--pa) 72%, var(--ink)); }
.shelf__meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.shelf__more { margin-top: 22px; }
:root[data-theme="night"] .shelf__line { color: color-mix(in srgb, var(--pa) 40%, var(--ink)); }
@media (max-width: 1000px) { .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .shelf { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: -16px; padding: 4px 16px 10px; scrollbar-width: none; }
  .shelf::-webkit-scrollbar { display: none; }
  .shelf__item { flex: 0 0 78%; scroll-snap-align: start; }
}

/* ---- The episode as a chat: the whole bird, Pulse's mark, typing, times, thoughts ---- */
.ep { --primary: var(--accent); --on-surface: var(--ink); --on-surface-variant: var(--ink-2); --surface: var(--paper); }
.ep__av { display: grid; place-items: center; width: 92px; height: 74px; --amp: 0; }
.ep__av--myna .mb { width: 92px; transform: none; }   /* facing Pulse, who sits to her right here */
.ep__av--pulse { width: 64px; height: 64px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 7%, transparent);
  box-shadow: inset 0 0 0 1.2px color-mix(in srgb, var(--accent) 32%, transparent); transition: transform 60ms linear, box-shadow 60ms linear; transform: scale(calc(1 + var(--amp) * .12)); }
.ep__av--pulse img { width: 40px; height: 40px; }
/* Pulse beats to his own voice: the mark swells with each peak of the sound (--amp from the audio); no fixed rhythm while he talks. */
.ep__av--pulse.is-speaking img { transform: scale(calc(1 + var(--amp) * .35)); transition: transform 40ms linear; }
.ep__av--pulse.is-speaking { box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 calc(var(--amp) * 22px) color-mix(in srgb, var(--accent) 55%, transparent); }
.ep__who img { border-radius: 0; } .ep__who.talk img, .ep__who.talk .mb { transform: none; animation: none; }
.ep__who--myna.talk .ep__av--myna .mb { transform: translateY(calc(var(--amp) * -3px)); }
.ep__time { display: block; margin-top: 4px; font: 600 10.5px var(--font-sans); letter-spacing: .04em; color: var(--ink-3); text-align: right; }
.ep__line--pulse .ep__time { text-align: left; }
.ep__typing { display: inline-flex; gap: 4px; align-items: center; width: fit-content; padding: 13px 16px; border-radius: 18px 18px 18px 6px; background: var(--desk); }
.ep__typing--pulse { justify-self: end; border-radius: 18px 18px 6px 18px; }
.ep__typing--myna { background: color-mix(in srgb, var(--accent) 10%, var(--desk)); }
.ep__typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); animation: dots 1.1s ease-in-out infinite; }
.ep__typing span:nth-child(2) { animation-delay: .15s; } .ep__typing span:nth-child(3) { animation-delay: .3s; }
@keyframes dots { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }
.ep.is-live:not(.show-all) .ep__line:not(.think-in) .ep__think { display: none; }
.ep.is-live .ep__line.think-in .ep__think { animation: rise-t 360ms var(--spring-move) both; }
.ep.is-live .ep__line.in .ep__think { animation-delay: 0ms; }

/* Myna's bird on /brand */
.mf { display: grid; gap: 22px; padding: calc(var(--card-pad) + 8px); border-radius: 4px 28px 28px 4px; background: var(--paper); border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.mf__hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
.mf__hero img { width: 100%; height: auto; }
.mf__hero p:not(.label) { color: var(--ink-2); margin-top: 10px; max-width: 52ch; }
@media (max-width: 760px) { .mf__hero { grid-template-columns: 1fr; } }
.mf__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.mf__tile { margin: 0; display: grid; gap: 8px; padding: 16px; border-radius: 14px; background: var(--desk); }
.mf__tile img { width: 100%; height: 120px; object-fit: contain; }
.mf__tile--dark { background: #111111; } .mf__tile--dark figcaption a { color: #FBFAF6; }
.mf__tile figcaption a { font: 500 12.5px var(--font-mono); color: var(--ink-2); text-decoration: none; overflow-wrap: anywhere; }
.mf__tile figcaption a:hover { color: var(--accent); }
.mf__dl { columns: 3 220px; }

/* Their characters, shown in how they move rather than told: Myna is quick and sure of herself, Pulse is calm. */
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="reduced"]) .ep.is-live .ep__line--myna.in { animation: myna-pop 420ms cubic-bezier(.3,1.6,.5,1) both; transform-origin: bottom left; }
  :root:not([data-motion="reduced"]) .ep.is-live .ep__line--pulse.in { animation: pulse-glide 700ms cubic-bezier(.2,.8,.2,1) both; }
  :root:not([data-motion="reduced"]) .ep__typing--myna span { animation-duration: .7s; }          /* she types fast */
  :root:not([data-motion="reduced"]) .ep__typing--pulse span { animation-duration: 1.5s; }        /* he takes his time */
  :root:not([data-motion="reduced"]) .ep__who--myna:not(.talk) .ep__av--myna .mb { animation: perch 3.2s ease-in-out infinite; }
  :root:not([data-motion="reduced"]) .ep__who--pulse:not(.talk) .ep__av--pulse { animation: breathe 4.6s ease-in-out infinite; }
}
@keyframes myna-pop { from { opacity: 0; transform: scale(.82) rotate(-2.5deg); } }
@keyframes pulse-glide { from { opacity: 0; transform: translateY(10px); } }
@keyframes perch { 0%, 100% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-3px) rotate(-3deg); } 60% { transform: translateY(0) rotate(1deg); } }
@keyframes breathe { 50% { transform: scale(1.05); } }
.ep__line--myna .ep__say { font-weight: 600; }
.ep__line--pulse .ep__say { font-weight: 400; }

/* Myna as the phoenix in the episode: her wing beats at rest and lifts with her voice (--amp from the audio) */
.ep__av--myna .mb { width: 84px; }
.ep__av--myna .ph-wing { transform-box: view-box; transform-origin: 62% 62%; transform: rotate(calc(var(--amp, 0) * -14deg)); transition: transform 45ms linear; }
@media (prefers-reduced-motion: no-preference) { :root:not([data-motion="reduced"]) .ep__who--myna:not(.talk) .ep__av--myna .ph-wing { animation: ph-beat 2.4s cubic-bezier(.45,0,.2,1) infinite; } }
@keyframes ph-beat { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 50% { transform: rotate(3deg); } }

/* ===== UX audit fixes (1 Nov 2026; research/ux-audit) ===== */
/* 1, 2: the form's margin line sits clear of its words; air after the form */
.sheetform { padding-left: clamp(52px, 5.5vw, 76px); }
.sheetform::before { background:
  linear-gradient(90deg, transparent 26px, color-mix(in srgb, var(--accent) 34%, transparent) 26px 27px, transparent 27px),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ln-opt .ring { left: -10px; }
.sheetform + *, .form + * { margin-top: clamp(40px, 5vw, 64px) !important; }
.sheetform__hd .label { color: var(--ink-3); }
/* 7, 17: folds read as part of the page — chevron inside the column, a plain-language chip that goes once open */
.fold > summary::before { position: static; display: inline-block; margin: 0 10px 0 2px; vertical-align: middle; }
.fold > summary { padding-left: 0; }
.fold__more { font: 600 13px/1.6 var(--font-sans); letter-spacing: 0; }
.fold[open] .fold__more { display: none; }
.foldbar { gap: 4px; } .foldbar button { min-height: 44px; padding: 0 10px; }
/* 8: a not-yet-ready Send keeps full contrast; the words beside it say what's missing */
.ln-act .btn[aria-disabled="true"] { opacity: 1; }
/* 16: one label style everywhere (section-intro rules were enlarging them) */
.sec__hd p.label, .sec__hd .label, .shelf__hd .label { font: 700 11.5px/1.2 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); max-width: none; }
.sec__hd p.label--accent, .shelf__hd .label--accent { color: var(--accent); }
/* 15: long headlines step down so the page's first screen still shows its content */
.hero h1.is-long { font-size: clamp(36px, 4.6vw, 72px); }
/* 4: emails break only after the "@" */
.inbox__mail { overflow-wrap: normal; word-break: normal; font-size: clamp(16px, 1.3vw, 21px); }
/* 3: the phone footer: groups fold; rows big enough to tap */
.ft__grp > summary { list-style: none; cursor: pointer; }
.ft__grp > summary::-webkit-details-marker { display: none; }
.ft__grp > summary h3 { display: inline; }
@media (max-width: 640px) {
  .ft__map { display: block; padding: 18px 0; }
  .ft__grp { border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
  .ft__grp > summary { display: flex; justify-content: space-between; align-items: center; min-height: 52px; }
  .ft__grp > summary::after { content: "+"; font-size: 22px; color: var(--accent); transition: transform var(--spring-move-dur) var(--spring-move); }
  .ft__grp[open] > summary::after { transform: rotate(45deg); }
  .ft__grp ul { padding-bottom: 12px; } .ft__map a { display: flex; align-items: center; min-height: 44px; font-size: 16px; }
}
/* 19: the footer's family as icons with names */
.ft-house { gap: 10px 18px; }
.ft-app { display: inline-flex; align-items: center; gap: 8px; font: 600 13px var(--font-sans); color: var(--ink-2); text-decoration: none; }
.ft-app img { width: 28px; height: 28px; }
.ft-app:hover { color: var(--accent); }
.shelf__icon, .hx__card .appicon, .dock__app img { border-radius: 0; box-shadow: none; background: none; }
/* 18: status pills never wrap */
.badge { white-space: nowrap; }
.launch__grid .badge { white-space: nowrap; font-size: 9px; padding: 3px 6px; }
/* 11: the homepage story, shorter, with no empty run after its last step */
.story__step { min-height: 64vh; }
.story__steps { padding-bottom: 0; } .story { padding-bottom: clamp(32px, 4vw, 56px); }
/* 22: tablet tab bar: a compact centred dock, not five stretched tabs */
@media (min-width: 641px) and (max-width: 1023px) {
  .tabbar { left: 50%; right: auto; width: min(480px, 92vw); transform: translateX(-50%); bottom: 12px; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); padding-bottom: 6px; }
  .tabbar.is-away { transform: translate(-50%, 140%); }
}
/* 21: art labels never sit behind words on smaller screens */
@media (max-width: 900px) { .art svg text { display: none; } }
/* 23: /brand file links are tappable; the white logo's caption is readable on its dark tile */
.dl a { min-height: 36px; align-items: center; }
.mf__tile--dark figcaption a { color: #FBFAF6 !important; }

/* ===== One card (UX audit #10): paper, a hairline edge, a page-bound corner. No shadow, tape, side bar, dashed top or tilt. ===== */
:root { --card-edge: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); --card-radius: 4px 18px 18px 4px; }
.card, .house__card, .hx__card, .shelf__tile, .inbox, .person, .stack__layer, .brandrow, .story__frame, .ep__stage, .sig, .mf,
.sheetform, .form, .plans li, .myna-frame, .cta {
  border: var(--card-edge) !important; border-radius: var(--card-radius) !important; box-shadow: none !important; }
.card, .house__card, .hx__card, .shelf__tile, .inbox, .person, .stack__layer, .brandrow, .story__frame, .ep__stage, .sig, .mf, .sheetform, .form { background-color: var(--paper); }
.sec--paper .card, .sec--paper .inbox, .sec--paper .sheetform, .sec--paper .shelf__tile { background-color: var(--desk); }
.card::before, .hx__card::before, .house__card::before, .inbox::after, .cards > li:first-child .card::after { display: none !important; }
.card, .cards > li .card { --r: 0deg !important; transform: none; }
a.card:hover, a.card:focus-visible, .hx__card:hover, .hx__card:focus-visible, .shelf__tile:hover, .shelf__tile:focus-visible,
a.house__card:hover, .inbox:hover, .person:hover {
  transform: translateY(-2px) !important; border-color: color-mix(in srgb, var(--pa, var(--accent)) 45%, transparent) !important; }
.person:hover { rotate: none; }
.cta { border-color: transparent !important; }

/* The original logo in the header (tools/header_logo.py): the "D" and the DEBUGINIT letters, as drawn. */
.brand { gap: 9px; }
.brand__mark { width: 63px; height: auto; }
.brand__word { display: block; line-height: 0; }
.brand__word img { width: 153px; height: auto; }
.brand__night { display: none; }
:root[data-theme="night"] .brand__day { display: none; }
:root[data-theme="night"] .brand__night { display: block; }
.ft .brand__mark { width: 76px; }
@media (max-width: 420px) { .brand__mark { width: 52px; } .brand__word img { width: 122px; } }

/* Myna, calling (tools/story.py hero_with_call): her place in the hero while she is hidden. Calm: one blue, slow rings. */
.call { display: grid; justify-items: center; text-align: center; padding: clamp(36px, 6vw, 72px) 24px; border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  border-radius: 4px 26px 26px 4px; background: var(--paper); }
.call__ring { position: relative; width: 168px; height: 168px; display: grid; place-items: center; margin-bottom: 26px; }
.call__ring i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); opacity: 0; }
.call__ring img { width: 112px; height: auto; position: relative; }
.call__who { font: 600 15px/1 var(--font-sans); letter-spacing: .42em; margin-right: -.42em; color: var(--ink); }
.call__state { margin-top: 10px; font: italic 500 30px/1.1 var(--font-display, "Cormorant Garamond", serif); color: var(--accent); }
.call__dots b { font-weight: inherit; }
.call__line { margin-top: 18px; max-width: 30ch; color: var(--ink-2); font-size: 17px; line-height: 1.5; }
.call__line--2 { margin-top: 4px; color: var(--ink-3); }
:root:not([data-motion="reduced"]) .call__ring i { animation: call-ring 3.6s cubic-bezier(.2,.6,.3,1) infinite; }
:root:not([data-motion="reduced"]) .call__ring i:nth-child(2) { animation-delay: 1.2s; }
:root:not([data-motion="reduced"]) .call__ring i:nth-child(3) { animation-delay: 2.4s; }
:root:not([data-motion="reduced"]) .call__ring img { animation: call-float 4.8s ease-in-out infinite; }
:root:not([data-motion="reduced"]) .call__dots b { animation: call-dot 1.6s ease-in-out infinite; opacity: .2; }
:root:not([data-motion="reduced"]) .call__dots b:nth-child(2) { animation-delay: .25s; }
:root:not([data-motion="reduced"]) .call__dots b:nth-child(3) { animation-delay: .5s; }
@keyframes call-ring { 0% { transform: scale(.62); opacity: .0; } 15% { opacity: .9; } 100% { transform: scale(1.18); opacity: 0; } }
@keyframes call-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes call-dot { 0%, 100% { opacity: .2; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .call__ring i, .call__ring img, .call__dots b { animation: none !important; opacity: 1; } .call__ring i { opacity: .35; } }
:root[data-motion="reduced"] .call__ring i { opacity: .35; }
:root[data-motion="reduced"] .call__dots b { opacity: 1; }

/* Evergreen, final (the owner, 2 Nov): every heading and label in black, white ground; green is for actions only
   (buttons, links, the one underline). Three blacks: --ink for headings, --ink-2 for body, --ink-3 for quiet notes. */
h1, h2, h3, h4, .em, h1 .em, h2 .em, h3 .em { color: var(--ink); }
.label, .label--accent, .sec__hd p.label--accent, .shelf__hd .label--accent { color: var(--ink); }
.call__state { color: var(--ink); }

/* DebugInit type system (the owner, 2 Nov 2026: "world-best typography"; audit in deploy/TYPE-AUDIT.md).
   Loaded last, so it is the one place sizes are decided; the older rules in base/paper/premium/polish no longer win.

   One fluid modular scale (the Utopia method): every step grows smoothly from a 360 px screen to a 1440 px one,
   with a ratio of 1.2 on phones and 1.333 (a perfect fourth) on desktops. Base 17 → 19 px.
   step:   -1      0      1      2      3      4      5      6
   phone:  14.2   17     20.4   24.5   29.4   35.3   42.3   50.8
   desk:   14.3   19     25.3   33.8   45     60     80     106.6
   Line height tightens as size grows; letter spacing tightens optically (big type is set tighter, small caps wider). */
:root {
  --t--1: clamp(0.8875rem, 0.8854rem + 0.0093vw, 0.8938rem);   /* 14.2 → 14.3 px */
  --t-0: clamp(1.0625rem, 1.0208rem + 0.1852vw, 1.1875rem);   /* 17.0 → 19.0 px */
  --t-1: clamp(1.2750rem, 1.1724rem + 0.4562vw, 1.5829rem);   /* 20.4 → 25.3 px */
  --t-2: clamp(1.5300rem, 1.3366rem + 0.8593vw, 2.1101rem);   /* 24.5 → 33.8 px */
  --t-3: clamp(1.8360rem, 1.5104rem + 1.4470vw, 2.8127rem);   /* 29.4 → 45.0 px */
  --t-4: clamp(2.2032rem, 1.6878rem + 2.2906vw, 3.7493rem);   /* 35.3 → 60.0 px */
  --t-5: clamp(2.6438rem, 1.8592rem + 3.4874vw, 4.9979rem);   /* 42.3 → 80.0 px */
  --t-6: clamp(3.1726rem, 2.0094rem + 5.1697vw, 6.6622rem);   /* 50.8 → 106.6 px */
  --measure: 34em;            /* the reading line: about 66 characters (45–75 is comfortable); em, because Plus Jakarta's
                                 "0" is wide, so 66ch would really be ~90 letters */
  --measure-lead: 30em;
}

body { font-size: var(--t-0); line-height: 1.6; font-feature-settings: "kern", "liga", "calt"; text-rendering: optimizeLegibility; }

/* Headings: one family each, one size each, everywhere. Display serif for h1/h2, the sans for h3/h4. */
h1, .t-hero { font: 600 var(--t-5)/1.0 var(--font-display); letter-spacing: -0.02em; font-feature-settings: "kern", "liga", "dlig", "lnum"; }
.hero h1 { font-size: var(--t-5); line-height: 1.0; max-width: 15ch; }
.hero h1.is-long { font-size: var(--t-4); line-height: 1.04; letter-spacing: -0.015em; max-width: 20ch; }
body:has(#the-story) .hero h1 { font-size: var(--t-6); line-height: .96; letter-spacing: -0.025em; }   /* the home hero only */
h2, .t-h2 { font: 600 var(--t-3)/1.08 var(--font-display); letter-spacing: -0.01em; max-width: 24ch; }
h3, .t-h3 { font: 650 var(--t-1)/1.3 var(--font-sans); letter-spacing: -0.006em; }
h4 { font: 650 var(--t-0)/1.4 var(--font-sans); letter-spacing: 0; }
h1, h2, h3, h4 { text-wrap: balance; hanging-punctuation: first; }

/* Reading text: one size, one line length. */
p, li, dd { text-wrap: pretty; }
:where(main) :where(p:not(.label, .small, .lead), li, dd) { max-width: var(--measure); }   /* low specificity: the serif rule below can narrow it */
.lead { font-size: var(--t-1); line-height: 1.45; letter-spacing: -0.005em; max-width: var(--measure-lead); }
.small, small, figcaption { font-size: var(--t--1); line-height: 1.5; }

/* A section's opening line, under its heading: body size, a shade lighter, on the same reading line. */
.sec__hd p:not(.label) { font-size: var(--t-0); line-height: 1.55; color: var(--ink-2); max-width: var(--measure); }
.cta p { max-width: var(--measure); }

/* The book face (EB Garamond) is narrower than the sans, so the same 66 letters need a shorter line. */
.prose, .faq details p, .defs dd, .steps p, .card p, .decide p, .story__text, .think span, .hero__more, .house__t p, .letter__paper { max-width: 30em; }
.prose, .faq details p, .defs dd, .decide p { font-size: var(--t-0); }

/* Labels: small capitals, never below 12.5 px, tracked open so they read as a label and not a word. */
.label, .sec__hd p.label, .sec__hd .label, .shelf__hd .label { font: 700 0.78rem/1.2 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; }

/* Display serif is for size: under 20 px it reads thin, so long serif reading uses the book face instead. */
main p[style*="font-display"], .think p, .think li { font-family: var(--font-serif); }

/* Numbers line up in tables and figures. */
table, .tbl, .stat, .num { font-variant-numeric: tabular-nums lining-nums; }

@media (max-width: 640px) {
  .hero h1, .hero h1.is-long { max-width: none; }
  h2, .t-h2 { max-width: none; }
}

/* ── Heading links ───────────────────────────────────────────────────────────
   Every section heading can be linked to: hover or focus shows a quiet "§"; a click copies the address. */
.hlink { margin-left: .3em; font: 400 .5em/1 var(--font-sans); color: var(--ink-3); text-decoration: none; vertical-align: .45em;
  opacity: 0; transition: opacity var(--fade-d, 180ms) ease; }
h2:hover .hlink, h2:focus-within .hlink, .hlink:focus-visible { opacity: 1; }
@media (hover: none) { .hlink { display: none; } }

/* ── Running head (new component) ────────────────────────────────────────────
   From book typography: the line at the top of a page that tells you which chapter you are in. Here it appears once
   you scroll past the page's headline: the page's name, the section you are reading (numbered, § 03 of 07), and a
   hairline that fills as you read. Tap it for the contents; pick a section to go there. */
.rhead { position: fixed; left: 0; right: 0; top: var(--hd-h, 68px); z-index: 40; pointer-events: none; }
.rhead__bar { pointer-events: auto; display: flex; align-items: center; gap: 14px; width: 100%; padding: 9px max(16px, calc((100vw - var(--w-page, 1200px)) / 2 + 16px));
  border: 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px); color: var(--ink); text-align: left; cursor: pointer;
  font: 600 .78rem/1.2 var(--font-sans); letter-spacing: .12em; text-transform: uppercase;
  transform: translateY(-110%); opacity: 0; transition: transform 360ms cubic-bezier(.2,.8,.2,1), opacity 240ms ease; }
.rhead.is-on .rhead__bar { transform: none; opacity: 1; }
.rhead__page { color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 32ch; }
.rhead__sep { color: var(--ink-3); }
.rhead__now { font: italic 500 1.05rem/1.2 var(--font-display); letter-spacing: 0; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.rhead__num { color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rhead__chev { width: 14px; height: 14px; flex: none; transition: transform 240ms ease; }
.rhead.is-open .rhead__chev { transform: rotate(180deg); }
.rhead__rule { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--read, 0)); }
.rhead__list { pointer-events: auto; list-style: none; margin: 0; padding: 10px max(16px, calc((100vw - var(--w-page, 1200px)) / 2 + 16px)) 18px; background: var(--paper);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); max-height: min(70vh, 560px); overflow: auto; counter-reset: rh; }
.rhead__list[hidden] { display: none; }
.rhead__list li { counter-increment: rh; }
.rhead__list a { display: grid; grid-template-columns: 3.2em 1fr; gap: 10px; align-items: baseline; padding: 10px 0; color: var(--ink-2); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); font: 600 var(--t-1)/1.2 var(--font-display); }
.rhead__list a::before { content: "§ " counter(rh, decimal-leading-zero); font: 600 .72rem/1 var(--font-sans); letter-spacing: .1em; color: var(--ink-3); }
.rhead__list a:hover, .rhead__list a:focus-visible { color: var(--ink); }
.rhead__list a[aria-current="true"] { color: var(--ink); }
.rhead__list a[aria-current="true"]::before { color: var(--ink); }
@media (max-width: 640px) { .rhead__page, .rhead__sep { display: none; } .rhead { top: var(--hd-h, 56px); } }
@media (prefers-reduced-motion: reduce) { .rhead__bar, .rhead__chev { transition: none; } }
:root[data-motion="reduced"] .rhead__bar, :root[data-motion="reduced"] .rhead__chev { transition: none; }
@media print { .rhead, .hlink { display: none; } }

main h2[id] { scroll-margin-top: calc(var(--hd-h, 68px) + 64px); }

/* ── Paper sheets (the owner, 2 Nov: "paper look, a paper cut in each section, expand on scroll, closed by default") ──
   Every page's hero is ruled paper with Pulse's margin line, as the platform page has; every section is a sheet cut
   from it: hairline edge, faint rules, the margin line, and a cut corner folded down. Closed, a sheet shows its heading;
   it unfolds (height eases open) as it reaches the middle of the screen. Black and white only. */
:root { interpolate-size: allow-keywords; }
.hero { position: relative; isolation: isolate; }
.hero:not(.hero--page)::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(90deg, transparent calc(clamp(16px, 4vw, 48px) - 14px), color-mix(in srgb, var(--gilt) 60%, transparent) 0 calc(clamp(16px, 4vw, 48px) - 13px), transparent 0),
              repeating-linear-gradient(180deg, transparent 0 calc(var(--pitch) - 1px), color-mix(in srgb, var(--ink) 5%, transparent) 0 var(--pitch)); }
.sec > .wrap > details.fold { position: relative; padding: clamp(22px, 3vw, 36px) clamp(20px, 3.4vw, 44px) clamp(22px, 3vw, 36px) clamp(36px, 5vw, 64px);
  background-color: var(--paper);
  background-image: linear-gradient(90deg, transparent calc(clamp(36px, 5vw, 64px) - 16px), color-mix(in srgb, var(--gilt) 70%, transparent) 0 calc(clamp(36px, 5vw, 64px) - 15px), transparent 0),
                    repeating-linear-gradient(180deg, transparent 0 calc(var(--pitch) - 1px), color-mix(in srgb, var(--ink) 4.5%, transparent) 0 var(--pitch));
  border: 1px solid color-mix(in srgb, var(--ink) 11%, transparent); border-radius: 2px;
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 5%, transparent); transition: box-shadow 300ms ease; }
.sec > .wrap > details.fold::after { content: ""; position: absolute; top: 0; right: 0; width: 26px; height: 26px; pointer-events: none;
  background: linear-gradient(225deg, transparent 50%, color-mix(in srgb, var(--ink) 10%, var(--paper-2)) 50%);
  box-shadow: -1px 1px 2px color-mix(in srgb, var(--ink) 10%, transparent); }
.sec > .wrap > details.fold[open] { box-shadow: 0 18px 40px -28px color-mix(in srgb, var(--ink) 35%, transparent); }
.sec > .wrap > details.fold > summary { padding-left: 0; }
.sec > .wrap > details.fold > summary::before { position: static; display: inline-block; margin: 0 10px 4px 0; }
.sec > .wrap > details.fold:not([open]) > summary { margin-bottom: 0; }
.fold::details-content { height: 0; overflow: clip; transition: height 520ms cubic-bezier(.2,.8,.2,1), content-visibility 520ms allow-discrete; }
.fold[open]::details-content { height: auto; }
.fold__more { background: transparent; color: var(--ink-3); border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.sec + .sec { padding-top: clamp(14px, 2vw, 24px); }
@media (prefers-reduced-motion: reduce) { .fold::details-content { transition: none; } }
:root[data-motion="reduced"] .fold::details-content { transition: none; }

/* Black and white everywhere: the products' own colours stay in their logo files only. */
[style*="--pa"] { --pa: var(--ink) !important; }
:root { --product-pulse: var(--ink); --product-signals: var(--ink); --product-beat: var(--ink); --product-myna: var(--ink);
        --product-node: var(--ink); --product-wayworks: var(--ink); --product-debuginit: var(--ink); }
.badge[data-s] { --c: var(--ink-2) !important; }
.badge[data-s="Available"], .badge[data-s="Private pilot"] { --c: var(--ink) !important; }
.foldbar button { color: var(--ink); }

/* ── Readable in both modes (the owner, 2 Nov: "readable like Apple's site", light and dark) ──
   Apple's text colours in light; in dark, soft white on near-black (pure white on pure black glares and smears for many
   readers), type a touch heavier because light-on-dark looks thinner, and no hairline serif at small sizes. */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
:root[data-theme="night"] body { font-weight: 420; }
:root[data-theme="night"] :is(h1, h2, .t-hero, .t-h2) { font-weight: 650; letter-spacing: -0.005em; }
:root[data-theme="night"] :is(h3, h4) { font-weight: 680; }
:root[data-theme="night"] :is(.prose, .faq details p, .defs dd, .steps p, .card p, .decide p, .story__text, .think span, .hero__more, .house__t p) { font-weight: 470; }
:root[data-theme="night"] .label { font-weight: 720; }
:root[data-theme="night"] .lead, :root[data-theme="night"] .sec__hd p:not(.label) { color: var(--ink-2); font-weight: 430; }
:root[data-theme="night"] .art { opacity: .22; }
:root[data-theme="night"] .hero::before, :root[data-theme="night"] .sec > .wrap > details.fold { --rule: 7%; }
:root[data-theme="night"] .sec > .wrap > details.fold { border-color: color-mix(in srgb, var(--ink) 14%, transparent); }
/* The quietest text never drops below the secondary grey. */
.small, small, figcaption, .foldbar, .crumbs { color: var(--ink-3); }

/* Each section now carries its own sheet (the paper sheets above), so the alternating torn band behind sections goes. */
.sec--paper:has(> .wrap > details.fold)::before { display: none; }
.sec--paper:has(> .wrap > details.fold) { background: transparent; }

/* ── Mega menu (the owner, 2 Nov: "modern, with art and aesthetic") ─────────────────────────────────────────────
   A sheet drops from the header: on the left the menu's own drawing on ruled paper with the main page's headline;
   on the right the pages, numbered, each with its own headline as a quiet note. Hovering a page writes its headline
   on the sheet and turns the drawing a little. The page behind dims. Black and white; the drawing in greys. */
.mega { background: var(--paper); border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--ink) 40%, transparent); }
.mega__in { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: clamp(24px, 3.4vw, 56px); padding: 26px 0 22px; align-items: start; }
.mega__feature { position: relative; overflow: hidden; min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 22px 22px 20px 34px; border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); border-radius: 2px;
  background-color: var(--paper-2);
  background-image: linear-gradient(90deg, transparent 18px, color-mix(in srgb, var(--gilt) 80%, transparent) 18px 19px, transparent 19px),
                    repeating-linear-gradient(180deg, transparent 0 calc(var(--pitch) - 1px), color-mix(in srgb, var(--ink) 5%, transparent) 0 var(--pitch));
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
.mega__feature::after { content: ""; position: absolute; top: 0; right: 0; width: 22px; height: 22px;
  background: linear-gradient(225deg, transparent 50%, color-mix(in srgb, var(--ink) 12%, var(--paper)) 50%); }
.mega__art { position: absolute; inset: -10% -25% 30% -10%; opacity: .55; transform: rotate(var(--turn, 0deg)) scale(var(--zoom, 1)); transform-origin: 60% 40%;
  transition: transform 900ms cubic-bezier(.2,.8,.2,1), opacity 400ms ease; pointer-events: none; }
.mega__art svg { width: 100%; height: 100%; display: block; }
.mega__copy { position: relative; }
.mega__copy .label { color: var(--ink); }
.mega__lead { margin-top: 8px; font: 600 var(--t-2)/1.12 var(--font-display); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; min-height: 2.3em;
  transition: opacity 180ms ease; }
.mega__lead.is-swapping { opacity: 0; }
.mega__go { display: inline-block; margin-top: 14px; font: 600 14px/1.3 var(--font-sans); color: var(--ink); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.mega__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px clamp(20px, 2.6vw, 40px); }
.mega .mega__col h2 { font: 700 .74rem/1.2 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 4px 0 6px; max-width: none; }
.mega__col ul { list-style: none; margin: 0; padding: 0; }
.mega .mega__link { display: grid; grid-template-columns: 2.1em 1fr; column-gap: 6px; padding: 10px 10px 10px 4px; margin: 0 -10px 0 -4px; border-bottom: 0;
  border-radius: 10px; color: var(--ink); text-decoration: none; transition: background 180ms ease; }
.mega .mega__link:hover, .mega .mega__link:focus-visible { background: var(--paper-2); color: var(--ink); }
.mega__n { grid-row: span 2; padding-top: 3px; font: 600 .7rem/1 var(--font-sans); letter-spacing: .06em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mega__t { display: flex; align-items: center; gap: 8px; font: 600 15.5px/1.3 var(--font-sans); }
.mega__t .badge { font-size: 10px; padding: 2px 7px; }
.mega__d { margin-top: 2px; font: 400 13.5px/1.4 var(--font-sans); color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; max-width: none; }
.mega__link:hover .mega__n, .mega__link:focus-visible .mega__n { color: var(--ink); }
.mega__foot { display: flex; justify-content: flex-end; gap: 10px; align-items: baseline; padding: 0 0 22px; font-size: 14px; color: var(--ink-3); }
.mega__foot a { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; }
/* Opening: the sheet unrolls from the header, the pages follow one after another. */
:root:not([data-motion="reduced"]) .mega:not([hidden]) { animation: mega-unroll 460ms cubic-bezier(.2,.8,.2,1) both; }
:root:not([data-motion="reduced"]) .mega:not([hidden]) .mega__col li { animation: mega-in 420ms cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(60ms + var(--i, 0) * 28ms); }
:root:not([data-motion="reduced"]) .mega:not([hidden]) .mega__feature { animation: mega-in 520ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes mega-unroll { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes mega-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mega, .mega *, .mega__art { animation: none !important; transition: none !important; } }
/* The page behind steps back while a menu is open. */
main, .ft, .rhead { transition: opacity 260ms ease, filter 260ms ease; }
body:has(.mega:not([hidden])) :is(main, .ft, .rhead) { opacity: .38; filter: blur(1.5px); }
@media (max-width: 980px) { .mega__in { grid-template-columns: 1fr; } .mega__feature { min-height: 180px; } }
:root[data-theme="night"] .mega { box-shadow: 0 40px 80px -40px #000; }

/* ── Pulse's own colour, where the story is told (the owner, 2 Nov: "add Pulse's primary colour") ── */
:root { --pulse: #B3006D; --pulse-soft: color-mix(in srgb, #B3006D 12%, var(--paper)); }
:root[data-theme="night"] { --pulse: #FF7CB8; --pulse-soft: color-mix(in srgb, #FF7CB8 16%, var(--paper)); }

/* ── The story, frameless: no box on the left; the drawing stands on the page itself ── */
.story__frame { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0; overflow: visible; }
.story__frame::before, .story__frame::after { display: none !important; }
.story__scene { inset: 0; }
.story__dots i.on { background: var(--pulse); }
.story__step .label, .story__step .label--accent { color: var(--pulse); }
.story__step.on h2 { color: var(--ink); }
.story__scene .lay.on path { stroke: var(--pulse) !important; filter: drop-shadow(0 14px 22px color-mix(in srgb, var(--pulse) 28%, transparent)) !important; }
.story__scene .lay.on text { fill: var(--pulse) !important; }
.story__scene svg rect[fill*="accent"] { fill: var(--pulse-soft); }
.story__scene svg text[fill="var(--accent)"] { fill: var(--pulse); }

/* The problem: your business (Pulse pink), the same stack as everyone (grey tiles), problems as pinned scraps. */
.pb { overflow: visible; }
.pb__stack rect { fill: var(--paper-2); stroke: color-mix(in srgb, var(--ink) 22%, transparent); stroke-width: 1.2; }
.pb__cap { font: 500 12.5px var(--font-sans); fill: var(--ink-3); letter-spacing: .02em; }
.pb__you { fill: var(--pulse); }
.pb__youlabel { font: italic 600 21px var(--font-display); fill: #fff; }
.pb__thread { fill: none; stroke: var(--pulse); stroke-width: 1.2; stroke-dasharray: 3 5; opacity: .55; }
.pb__scrap { transform-box: fill-box; transform-origin: center; transform: rotate(var(--r)); }
.pb__scrap rect { fill: var(--paper); stroke: color-mix(in srgb, var(--ink) 16%, transparent); stroke-width: 1; filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--ink) 10%, transparent)); }
.pb__scrap text { font: 600 13px var(--font-sans); fill: var(--ink); }
:root:not([data-motion="reduced"]) .story__scene.on .pb__scrap { animation: pb-pin 700ms cubic-bezier(.2,.9,.25,1.2) both, pb-float 5.5s ease-in-out infinite; animation-delay: calc(var(--i) * 90ms), calc(800ms + var(--i) * 400ms); }
:root:not([data-motion="reduced"]) .story__scene.on .pb__thread { stroke-dashoffset: 0; animation: pb-thread 1.6s linear infinite; }
:root:not([data-motion="reduced"]) .story__scene.on .pb__you { transform-box: fill-box; transform-origin: center; animation: pb-breathe 4.5s ease-in-out infinite; }
@keyframes pb-pin { from { opacity: 0; transform: translateY(-14px) rotate(calc(var(--r) * 4)); } to { opacity: 1; transform: rotate(var(--r)); } }
@keyframes pb-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes pb-thread { to { stroke-dashoffset: -16; } }
@keyframes pb-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.035; } }
@media (prefers-reduced-motion: reduce) { .pb * { animation: none !important; } }

/* ── Calls to action (the owner, 2 Nov: "modern, intuitive, lovely; full-page CTA; audit padding and margins") ──────
   One spacing rhythm: 12 px between buttons, 24 px above a button row, sections breathe on the same steps. */
.btn { min-height: 50px; padding: 0 24px; gap: 10px; font: 600 15.5px/1 var(--font-sans); letter-spacing: -.005em;
  transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 200ms cubic-bezier(.2,.8,.2,1); }
.btn--primary { background: var(--ink); color: var(--paper); box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 30%, transparent), 0 10px 26px -14px color-mix(in srgb, var(--ink) 70%, transparent); }
.btn--primary:hover { background: var(--ink); transform: translateY(-1px); box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 30%, transparent), 0 16px 30px -14px color-mix(in srgb, var(--ink) 70%, transparent); }
.btn--primary svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: color-mix(in srgb, var(--paper) 18%, transparent); box-sizing: border-box; }
.btn--quiet { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 20%, transparent); }
.btn--quiet:hover { box-shadow: inset 0 0 0 1.5px var(--ink); background: var(--paper-2); }
.btn:focus-visible, .go:focus-visible, .mega__link:focus-visible { outline: 2px solid var(--pulse); outline-offset: 3px; }
.btn-row { gap: 12px; }
.sec .wrap > .btn-row, .fold__body > .btn-row, .cta .btn-row { margin-top: 24px; }
.go { color: var(--ink); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; padding-bottom: 2px; transition: background-size 260ms ease; }
.go:hover { background-size: 100% 1.5px; }

/* The closing call to action: a full-width band, not a box. Ink ground, paper type, faint rules; it reverses at night. */
.sec:has(> .wrap > .cta) { padding-block: clamp(32px, 5vw, 64px) 0; }
.cta { width: 100vw; margin-left: calc(50% - 50vw); border-radius: 0; padding: clamp(64px, 10vw, 140px) max(20px, calc((100vw - var(--w-page, 1200px)) / 2 + 20px));
  background-color: var(--ink); color: var(--paper); gap: 18px;
  background-image: repeating-linear-gradient(180deg, transparent 0 calc(var(--pitch) - 1px), color-mix(in srgb, var(--paper) 7%, transparent) 0 var(--pitch));
  clip-path: none; }
.cta::before { content: ""; display: block; width: 44px; height: 3px; border-radius: 2px; background: var(--pulse); }
.cta h2 { color: var(--paper); font-size: var(--t-5); line-height: 1.02; max-width: 16ch; }
.cta p { color: color-mix(in srgb, var(--paper) 78%, transparent); font-size: var(--t-1); line-height: 1.45; max-width: 30em; opacity: 1; }
.cta .label { color: color-mix(in srgb, var(--paper) 70%, transparent); }
.cta .btn--primary { background: var(--paper); color: var(--ink); box-shadow: none; }
.cta .btn--primary svg { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.cta .btn--quiet { color: var(--paper); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--paper) 40%, transparent); background: transparent; }
.cta .btn--quiet:hover { box-shadow: inset 0 0 0 1.5px var(--paper); background: color-mix(in srgb, var(--paper) 8%, transparent); }
.cta__art { opacity: .16; }

/* The booking strip: one line of paper with a calendar, the question, and the button inside it. */
.cta-inline { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px 24px; margin-top: 28px; padding: 22px 24px;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 18px; background: var(--paper-2); }
.cta-inline__icon { width: 46px; height: 46px; color: var(--ink); }
.cta-inline h3 { font: 650 var(--t-1)/1.25 var(--font-sans); }
.cta-inline p { margin-top: 4px; color: var(--ink-2); max-width: 38em; }
.cta-inline .btn { white-space: nowrap; }
@media (max-width: 720px) { .cta-inline { grid-template-columns: auto 1fr; } .cta-inline .btn { grid-column: 1 / -1; width: 100%; } }

/* Story drawing on phones: no box behind it. */
.story__pic { background: none !important; border: 0 !important; box-shadow: none !important; }

/* ── One layer (the owner, 2 Nov: "cards look like 3–4 layers, mostly on phones; it should have one") ──────────────
   The paper sheet is the only surface. Anything card-like inside it lies flat on the sheet: no fill, no border, no
   shadow, no radius, only a hairline above it. On phones the sheet itself also loses its inner padding to the margin. */
details.fold :is(.card, .house__card, .hx__card, .inbox, .person, .shelf__tile, .brandrow, .sig, .mf, .stack__layer, .plans li, .sheetform, .form) {
  background: transparent !important; background-image: none !important; border: 0 !important; border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent) !important;
  border-radius: 0 !important; box-shadow: none !important; clip-path: none !important; }
details.fold :is(.card, .house__card, .hx__card, .inbox, .person, .shelf__tile)::before,
details.fold :is(.card, .house__card, .hx__card, .inbox, .person, .shelf__tile)::after { display: none !important; }
details.fold .card { padding: 18px 0 6px !important; }
details.fold :is(.sheetform, .form) { padding: 8px 0 0 !important; }
@media (max-width: 760px) {
  .sec > .wrap > details.fold { padding: 20px 18px 20px 30px; background-image: linear-gradient(90deg, transparent 14px, color-mix(in srgb, var(--gilt) 70%, transparent) 14px 15px, transparent 15px),
    repeating-linear-gradient(180deg, transparent 0 calc(var(--pitch) - 1px), color-mix(in srgb, var(--ink) 4%, transparent) 0 var(--pitch)); }
  .sec > .wrap > details.fold[open] { box-shadow: none; }
  details.fold .cards, details.fold .grid { gap: 0 !important; }
  .cta-inline { background: transparent; border-width: 1px 0; border-radius: 0; padding: 20px 0; }
}

/* The platform map: six layers drawn as a stack of thin strata on the sheet; the hovered layer lifts in Pulse pink. */
.pmap { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: none; }
.pmap__row { display: grid; grid-template-columns: 3.2em minmax(10em, 15em) 1fr; gap: 6px 18px; align-items: baseline; padding: 16px 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); transition: background 200ms ease, padding 200ms ease; }
.pmap__row:last-child { border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.pmap__n { font: 600 var(--t-2)/1 var(--font-display); color: var(--ink-3); font-variant-numeric: lining-nums; }
.pmap__name { font: 650 var(--t-0)/1.3 var(--font-sans); color: var(--ink); }
.pmap__about { color: var(--ink-2); max-width: 34em; }
.pmap__row:hover { padding-left: 10px; background: linear-gradient(90deg, var(--pulse-soft), transparent 70%); }
.pmap__row:hover .pmap__n { color: var(--pulse); }
@media (max-width: 760px) { .pmap__row { grid-template-columns: 2.4em 1fr; } .pmap__about { grid-column: 2; } }
.cta { border-radius: 0 !important; }

/* Running head fix (the owner's screenshot, 2 Nov): hidden, it was only transparent — it still sat over the header and
   caught clicks meant for "About", opening the contents over the hero. Hidden now means gone: no clicks, no list. It also
   sits under the header (and its menus), never over them. */
.rhead { z-index: 39; }
.rhead:not(.is-on) { visibility: hidden; transition: visibility 0s linear 360ms; }
.rhead:not(.is-on) .rhead__bar { pointer-events: none; }
.rhead:not(.is-on) .rhead__list { display: none !important; }
body:has(.mega:not([hidden])) .rhead { visibility: hidden; }

/* Unfold all / Fold all: two quiet chips at the start of the content, right above the first sheet — not a stray line
   in the far corner. */
.foldbar { justify-content: flex-start; align-items: center; gap: 8px; padding: clamp(20px, 3vw, 32px) 0 0; font-size: 13px; }
.foldbar > span { display: none; }
.foldbar button { min-height: 34px; padding: 0 14px; border-radius: 999px; font: 600 13px/1 var(--font-sans); color: var(--ink-2);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 16%, transparent); background: var(--paper); transition: box-shadow 160ms ease, color 160ms ease; }
.foldbar button:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.foldbar::before { content: "Sections"; font: 700 .72rem/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-right: 4px; }

/* Hero art never sits behind the words: it fades out across the text column, so labels in a drawing can't read through. */
.hero .art { -webkit-mask-image: linear-gradient(90deg, transparent 0 38%, #000 72%); mask-image: linear-gradient(90deg, transparent 0 38%, #000 72%); }
@media (max-width: 760px) { .hero .art { -webkit-mask-image: none; mask-image: none; } }
/* The running head is solid paper: frosted glass let dark buttons scrolling beneath it show through as a grey smudge. */
.rhead__bar { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
/* The first sheet follows the Sections chips closely. */
.foldbar + .sec, .foldbar + section { padding-top: 16px !important; }

/* The contents dropdown is gone (the owner, 2 Nov): the running head is a quiet line, not a control. */
.rhead__bar { cursor: default; pointer-events: none; }
.rhead__list, .rhead__chev { display: none !important; }

/* ── Brand page: the family, and the capital D made of every logo ── */
.family { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.family a { display: grid; justify-items: center; gap: 10px; padding: 18px 10px 14px; border-radius: 18px; text-decoration: none; color: var(--ink);
  font: 600 14px/1.3 var(--font-sans); text-align: center; transition: background 180ms ease, transform 220ms cubic-bezier(.2,.8,.2,1); }
.family a:hover { background: var(--paper-2); transform: translateY(-2px); }
.family img { width: 96px; height: 96px; border-radius: 22px; }
.dm { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(320px, 1.25fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.dm__copy p:not(.label) { color: var(--ink-2); margin-top: 10px; }
.dm__leg { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.dm__leg a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; text-decoration: none; color: var(--ink);
  font: 600 13px/1 var(--font-sans); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent); transition: box-shadow 160ms ease, background 160ms ease; }
.dm__leg a:hover, .dm__leg a:focus-visible { box-shadow: inset 0 0 0 1px var(--ink); background: var(--paper-2); }
.dm__leg img { width: 24px; height: 24px; border-radius: 7px; }
.dm__grid { display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: repeat(var(--rows), auto); gap: clamp(2px, .5vw, 6px);
  max-width: 560px; width: 100%; justify-self: center; }
.dm__t { grid-column: var(--c); grid-row: var(--r); aspect-ratio: 1; display: block; transition: opacity 260ms ease, filter 260ms ease, transform 220ms cubic-bezier(.2,.8,.2,1); }
.dm__t img { width: 100%; height: 100%; display: block; border-radius: 24%; }
.dm__t:hover { transform: scale(1.5); position: relative; z-index: 2; }
:root:not([data-motion="reduced"]) .dm__t { animation: dm-in 600ms cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--d) * 22ms); animation-timeline: view(); animation-range: entry 0% cover 30%; }
@keyframes dm-in { from { opacity: 0; transform: scale(.4) rotate(-12deg); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) { .dm { grid-template-columns: 1fr; } }
/* Each tile is a small sheet of its own, so the D reads as one solid letter from afar. */
.dm__grid { gap: clamp(3px, .45vw, 6px); }
.dm__t { background: var(--paper-2); border-radius: 26%; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent); padding: 9%; }
.dm__t img { border-radius: 0; }

/* "Send us the problem" (the owner, 2 Nov: the paper's lines overlapped the form's). On a sheet, the form is the sheet:
   its own paper layer (margin line, rules, grain) goes, and that sheet drops its background rules, so the only lines are
   the form's writing lines — nothing runs through the words. */
details.fold .sheetform::before, details.fold .form::before { display: none !important; }
details.fold .sheetform { padding-left: 0 !important; max-width: 46rem; gap: 14px; }
.sec > .wrap > details.fold:has(.sheetform, .form) {
  background-image: linear-gradient(90deg, transparent calc(clamp(36px, 5vw, 64px) - 16px), color-mix(in srgb, var(--gilt) 70%, transparent) 0 calc(clamp(36px, 5vw, 64px) - 15px), transparent 0); }
@media (max-width: 760px) {
  .sec > .wrap > details.fold:has(.sheetform, .form) { background-image: linear-gradient(90deg, transparent 14px, color-mix(in srgb, var(--gilt) 70%, transparent) 14px 15px, transparent 15px); }
  .sheetform .ln-opt { padding-block: 12px; }
  .sheetform .ln-opt small { font-size: 15px; line-height: 1.45; }
  .sheetform .ln-act { flex-direction: column; align-items: stretch; gap: 10px; }
  .sheetform .ln-act .btn { width: 100%; }
  .cta-inline { grid-template-columns: 44px 1fr; gap: 14px; }
  .cta-inline__icon { width: 40px; height: 40px; }
  .cta-inline h3 { font-size: 19px; }
  .cta-inline p { font-size: 16px; }
}

/* Mega menu, audited (deploy/MENU-AUDIT.md): never taller than the screen (it scrolls inside, the page doesn't);
   switching menus cross-fades instead of unrolling again; the page behind steps back without blur. */
.mega { max-height: calc(100dvh - var(--hd-h, 68px) - 12px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
:root:not([data-motion="reduced"]) .mega.is-switch:not([hidden]) { animation: mega-swap 180ms ease both; }
:root:not([data-motion="reduced"]) .mega.is-switch:not([hidden]) .mega__col li,
:root:not([data-motion="reduced"]) .mega.is-switch:not([hidden]) .mega__feature { animation: none; }
@keyframes mega-swap { from { opacity: .35; } to { opacity: 1; } }
body:has(.mega:not([hidden])) :is(main, .ft, .rhead) { opacity: .5; filter: none; }
.nav__btn[aria-expanded="true"] { background: var(--paper-2); }
.nav__btn:focus-visible { outline: 2px solid var(--pulse); outline-offset: 2px; }
.mega .mega__link:focus-visible { outline: 2px solid var(--pulse); outline-offset: -2px; }

/* Header fits every desktop width (audit: it overflowed from 1366 px down to 1024 px, cutting off "Book assessment").
   Links that also live in the footer and the More sheet step out first; the logo keeps its D at the narrowest. */
@media (max-width: 1400px) { .nav { gap: 2px; } .nav__btn, .nav > a { padding-inline: 10px; } }
@media (max-width: 1460px) { .nav > a[href="/newsroom"] { display: none; } }
@media (max-width: 1270px) { .nav > a[href="/company"], .nav > a[href="/contact"] { display: none; } }
@media (max-width: 1100px) { .hd .brand__word { display: none; } }
/* A menu link: its name and its note sit together. */
.mega .mega__link { row-gap: 2px; column-gap: 8px; }

/* Story steps: the dim on steps not in focus is a reading cue, not a hiding place. Night needs a lighter hand
   (the same opacity on a dark desk reads fainter), and anyone who asked for less motion gets every step at full. */
:root[data-theme="night"] .story__step:not(.on) { opacity: .4; }
:root[data-motion="reduced"] .story__step { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .story__step { opacity: 1; } }

/* Launcher tiles: the brand gradient is grey now, and white letters on its light end read at 1.3:1. Solid ink instead. */
.app--brand { color: var(--paper); background: var(--ink); }
.brand span { background: none; color: inherit; }

/* The art's signal gradient runs pale grey to near-black; on the night desk the dark end vanishes, so night runs it the other way. */
:root[data-theme="night"] linearGradient[id^="sig"] stop:first-child { stop-color: #3A3A3C; }
:root[data-theme="night"] linearGradient[id^="sig"] stop:last-child { stop-color: #F5F5F7; }

/* Day / Night switch: the browser draws its own controls and scrollbars to match, and the button shows where a tap takes you. */
:root { color-scheme: light; }
:root[data-theme="night"] { color-scheme: dark; }
[data-act="theme"] .t-sun { display: none; }
:root[data-theme="night"] [data-act="theme"] .t-sun { display: inline; }
:root[data-theme="night"] [data-act="theme"] .t-moon { display: none; }
[data-act="theme"] svg { transition: transform 420ms var(--spring-move, ease); }
:root[data-theme="night"] [data-act="theme"] svg { transform: rotate(90deg); }
:root[data-motion="reduced"] [data-act="theme"] svg { transition: none; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 320ms; animation-timing-function: cubic-bezier(.2,.8,.2,1); }

/* Status marks in black and white: "pending" is a dashed outline (not yet drawn in), "live" a solid ink dot that breathes.
   Only a form's error keeps a colour, because an error has to stop the eye. */
.pending { background: none; color: var(--ink-2); border: 1px dashed color-mix(in srgb, var(--ink) 40%, transparent); }
.live { color: var(--ink); }
.ln-needs.is-ready { color: var(--ink); }
:root[data-motion="reduced"] .story__step:not(.on) { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .story__step:not(.on) { opacity: 1; } }

/* Footer group titles are h2 (a page without its own h2 should not jump from h1 to h3), drawn as the small caps label they were. */
.ft__map h2.ft__h { font: 700 12px/1.4 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 10px; max-width: none; }
.ft__grp > summary h2.ft__h { display: inline; }
.brandrow img.og, img.og { height: auto; }

/* Home: "The problem we solve" and "The DebugInit ecosystem" (tools/ecosystem.py). Black and white; Pulse pink only for
   the arrow into the answer and the signal travelling in from the edge. */

/* ---- The problem we solve: today, beside what changes ---- */
.ps { list-style: none; margin: 0; padding: 0; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.ps__row { display: grid; grid-template-columns: 3.2em minmax(0, 1fr) 48px minmax(0, 1fr); gap: 0 clamp(14px, 2.4vw, 32px); align-items: start;
  padding: clamp(18px, 2.4vw, 28px) 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.ps__n { font: 600 var(--t-1, 20px)/1.2 var(--font-display); color: var(--ink-3); font-variant-numeric: lining-nums tabular-nums; padding-top: 2px; }
.ps__now h3 { font: 650 var(--t-0)/1.3 var(--font-sans); color: var(--ink); margin: 0 0 6px; }
.ps__now p, .ps__then p { margin: 0; font-size: var(--t-0); line-height: 1.55; max-width: 30em; }
.ps__now p { color: var(--ink-3); }
.ps__then p { color: var(--ink); font-weight: 500; }
.ps__k { display: block; font: 700 11px/1.4 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.ps__then .ps__k { color: var(--pulse); }
.ps__arrow { width: 40px; height: 16px; margin-top: 30px; fill: none; stroke: var(--pulse); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ps__row:hover .ps__arrow { transform: translateX(4px); transition: transform 260ms cubic-bezier(.2,.8,.2,1); }
.ps__sum { margin: clamp(22px, 3vw, 34px) 0 0; font-size: var(--t-1, 20px); line-height: 1.45; color: var(--ink); max-width: 36em; }
.ps__sum .go { margin-left: 6px; white-space: nowrap; }
@media (max-width: 760px) {
  .ps__row { grid-template-columns: 2.4em minmax(0, 1fr); row-gap: 12px; }
  .ps__arrow { display: none; }
  .ps__then { grid-column: 2; padding-left: 14px; border-left: 2px solid var(--pulse); }
}

/* ---- The DebugInit ecosystem: one map ---- */
.eco { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.eco__fig { margin: 0; }
.eco__map { display: block; width: 100%; height: auto; max-width: 640px; margin-inline: auto; overflow: visible; }
.eco__ring { fill: none; stroke: color-mix(in srgb, var(--ink) 16%, transparent); stroke-width: 1; }
.eco__ring--edge { stroke-dasharray: 2 6; stroke: color-mix(in srgb, var(--ink) 30%, transparent); }
.eco__dev { fill: var(--ink-3); opacity: .55; }
.eco__spoke { fill: none; stroke: color-mix(in srgb, var(--ink) 18%, transparent); stroke-width: 1; transition: stroke 200ms; }
.eco__pn { fill: var(--paper); stroke: var(--ink); stroke-width: 2; transition: fill 200ms; }
.eco__pt { font: 600 17px var(--font-sans); fill: var(--ink); }
.eco__fn { fill: var(--ink); }
.eco__ft { font: 500 12.5px var(--font-sans); fill: var(--ink-2); }
.eco__core { fill: var(--ink); }
.eco__cn { font: 600 44px var(--font-display); fill: var(--paper); font-variant-numeric: lining-nums; }
.eco__cl { font: 600 11px var(--font-sans); fill: var(--paper); letter-spacing: .06em; opacity: .8; }
.eco__rc { font: 700 11.5px var(--font-sans); letter-spacing: .16em; fill: var(--ink-3); }
.eco__sig { fill: var(--pulse); }
.eco__p:hover .eco__spoke { stroke: var(--ink); stroke-width: 1.6; }
.eco__p:hover .eco__pn { fill: var(--ink); }
:root[data-motion="reduced"] .eco__sig { display: none; }
@media (prefers-reduced-motion: reduce) { .eco__sig { display: none; } }

.eco__pts { list-style: none; counter-reset: eco; margin: 0; padding: 0; display: grid; gap: 0; }
.eco__pts li { counter-increment: eco; display: grid; grid-template-columns: 2.4em 1fr; column-gap: 12px; row-gap: 4px;
  padding: 16px 0; border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.eco__pts li::before { content: counter(eco, decimal-leading-zero); grid-row: span 2; font: 600 var(--t-0)/1.35 var(--font-display); color: var(--ink-3); }
.eco__pts b { font: 650 var(--t-0)/1.35 var(--font-sans); color: var(--ink); }
.eco__pts span { color: var(--ink-2); line-height: 1.55; max-width: 30em; }
.eco__go { margin-top: clamp(24px, 3vw, 36px); }
@media (max-width: 900px) { .eco { grid-template-columns: 1fr; } .eco__map { max-width: 520px; } }
@media (max-width: 560px) { .eco__fig { margin-inline: -8px; } .eco__pt { font-size: 23px; } .eco__ft { display: none; } .eco__rc { font-size: 17px; letter-spacing: .1em; } .eco__pn { r: 11; } }

/* rows are layouts, not running text: the list-item measure (type.css) does not apply to them */
.ps .ps__row, .eco__pts li { max-width: none; }
.eco__pt, .eco__ft { paint-order: stroke; stroke: var(--paper); stroke-width: 5px; stroke-linejoin: round; }
.eco__map { max-width: 720px; }

/* ---- Inbox cards: a Copy button beside each address (tools/company.py) ---- */
.inbox__item { position: relative; }
.inbox__copy { position: absolute; top: 14px; right: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); border-radius: 999px; background: var(--paper); color: var(--ink-2);
  font: 600 12.5px/1 var(--font-sans); cursor: pointer; transition: color 160ms, border-color 160ms, background-color 160ms, transform 160ms; }
.inbox__copy svg { width: 15px; height: 15px; }
.inbox__copy:hover { color: var(--ink); border-color: var(--ink); }
.inbox__copy:active { transform: scale(.94); }
.inbox__copy:focus-visible { outline: 2px solid var(--pulse); outline-offset: 2px; }
.inbox__copy.is-done { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.inbox__item .inbox { padding-right: 104px; }
@media (max-width: 480px) { .inbox__copy span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .inbox__copy { padding: 0 10px; min-width: 40px; justify-content: center; } .inbox__item .inbox { padding-right: 64px; } }

/* ---- "What one part knows, the rest can use", shown (assets/shell.js drives it) ----
   One product lights; a pink signal runs in to the core; the core ripples; the signal runs out along every other spoke,
   one after another, and each product it reaches blinks. About 2.4 s, then the next product. Pointing at a product starts
   it from there. Under reduced motion the same moment is shown still: the paths drawn, nothing moving. */
.eco__in, .eco__out { fill: none; stroke: var(--pulse); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.eco__halo, .eco__ripple { fill: none; stroke: var(--pulse); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.eco__p { cursor: pointer; }
.eco__pn { transition: fill 240ms, stroke 240ms; }
@keyframes eco-draw { 0% { stroke-dashoffset: 1; opacity: 1; } 70% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes eco-halo { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.8); opacity: 0; } }
@keyframes eco-ripple { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes eco-lit { 0%, 100% { fill: var(--paper); stroke: var(--ink); } 35% { fill: var(--pulse); stroke: var(--pulse); } }
.eco__map.is-share .is-src .eco__pn { fill: var(--pulse); stroke: var(--pulse); }
.eco__map.is-share .is-src .eco__halo { animation: eco-halo 800ms ease-out both; }
.eco__map.is-share .is-src .eco__in { animation: eco-draw 900ms cubic-bezier(.5,0,.3,1) both; }
.eco__map.is-share .eco__ripple { animation: eco-ripple 800ms ease-out 650ms both; }
.eco__map.is-share .is-dst .eco__out { animation: eco-draw 900ms cubic-bezier(.2,.7,.3,1) both; animation-delay: calc(800ms + var(--d, 0ms)); }
.eco__map.is-share .is-dst .eco__pn { animation: eco-lit 700ms ease-out both; animation-delay: calc(1450ms + var(--d, 0ms)); }
.eco__map.is-share .is-dst .eco__halo { animation: eco-halo 700ms ease-out both; animation-delay: calc(1450ms + var(--d, 0ms)); }
.eco__map.is-share .is-src .eco__pt, .eco__p:hover .eco__pt { fill: var(--ink); font-weight: 700; }
:root[data-motion="reduced"] .eco__map.is-share :is(.eco__in, .eco__out) { animation: none; stroke-dashoffset: 0; opacity: .85; }
:root[data-motion="reduced"] .eco__map.is-share :is(.eco__halo, .eco__ripple, .eco__pn) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .eco__map.is-share :is(.eco__in, .eco__out) { animation: none; stroke-dashoffset: 0; opacity: .85; }
  .eco__map.is-share :is(.eco__halo, .eco__ripple, .eco__pn) { animation: none; }
}
.eco__cap { margin: 14px auto 0; max-width: 34em; text-align: center; font-size: var(--t--1, 15px); color: var(--ink-3); }
.eco__say { color: var(--ink); font: italic 500 var(--t-0)/1.4 var(--font-display); }
.eco__hint::before { content: "· "; }
@media (hover: none) { .eco__hint { display: none; } }
.inbox__copy.is-done svg { display: none; }
.inbox__copy.is-done::before { content: "✓"; font: 700 14px/1 var(--font-sans); }

/* Home, made livelier (the owner, 2 Nov: "modern, Gen Z vibes"), still black and white with Pulse pink as the one spark.
   The touches: a ticker band under the hero, story pictures as stickers with a hard ink shadow, shorter story steps,
   the problem drawn beside its list, a strike-through on "today" as you point at it, product tiles that lift with a
   hard shadow, and a numbered FAQ. All of it stands still under reduced motion. Loaded last. */

/* ---- The page's own section bar is not needed on the home page: the page is one story ---- */
body:has(#the-story) .foldbar { display: none; }

/* ---- Ticker band ---- */
.tick { position: relative; display: flex; overflow: hidden; background: var(--ink); color: var(--paper); padding: 15px 0; user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.tick__row { display: flex; flex: none; margin: 0; padding: 0; list-style: none; animation: tick 60s linear infinite; }
.tick li { display: flex; align-items: center; white-space: nowrap; padding-right: 26px; font: 600 var(--t-0)/1.2 var(--font-sans); letter-spacing: -.005em; max-width: none; }
.tick li:nth-child(even) { font: italic 500 calc(var(--t-0) * 1.2)/1.2 var(--font-display); letter-spacing: 0; }
.tick li::after { content: "✦"; margin-left: 26px; color: var(--pulse); font: 400 14px/1 var(--font-sans); font-style: normal; }
.tick:hover .tick__row { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-100%); } }
/* Reduced motion: the band stays a band; it just does not move by itself. It scrolls sideways by hand, a swipe or a
   trackpad, and the fade at the edges says there is more. (Wrapped into centred lines it read as a list: the owner, 2 Nov.) */
:root[data-motion="reduced"] .tick { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
:root[data-motion="reduced"] .tick::-webkit-scrollbar { display: none; }
:root[data-motion="reduced"] .tick__row { animation: none; padding-inline: 6%; }
:root[data-motion="reduced"] .tick__row[aria-hidden] { display: none; }
:root[data-motion="reduced"] .tick li { scroll-snap-align: start; }
@media (prefers-reduced-motion: reduce) {
  .tick { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
  .tick::-webkit-scrollbar { display: none; }
  .tick__row { animation: none; padding-inline: 6%; }
  .tick__row[aria-hidden] { display: none; }
  .tick li { scroll-snap-align: start; }
}

/* ---- Story: shorter steps, pictures as stickers ---- */
.story__step { min-height: 62vh; }
.stks { overflow: visible; }
.stk { transform-box: fill-box; transform-origin: center; transform: rotate(var(--r)); }
.stk rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1.6; filter: drop-shadow(3px 3px 0 var(--ink)); }
.stk text { font: 600 17px var(--font-sans); fill: var(--ink); }
.stk--on rect { fill: var(--ink); }
.stk--on text { fill: var(--paper); }
.stk circle { fill: var(--pulse); }
@keyframes stk-in { from { opacity: 0; transform: translateY(-18px) rotate(calc(var(--r) * 4)) scale(.92); } to { opacity: 1; transform: rotate(var(--r)); } }
.story__scene.on .stk, .story__step.on .story__pic .stk { animation: stk-in 560ms cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(var(--i) * 80ms); }
:root[data-motion="reduced"] .stk { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .stk { animation: none !important; } }

/* ---- The problem: its drawing beside the list ---- */
.sec--ps details.fold > summary { position: relative; }
.ps__art { margin: 0 0 8px; }
.ps__art svg { display: block; width: 100%; height: auto; }
@media (min-width: 1100px) {
  .ps__art { position: absolute; top: 34px; right: 40px; width: min(36%, 440px); pointer-events: none; }
}
@media (max-width: 1099px) { .ps__art { max-width: 460px; margin: 0 auto 12px; } }
.ps__now p { text-decoration: line-through transparent; text-decoration-thickness: 1.5px; transition: text-decoration-color 260ms, color 260ms; }
.ps__row:hover .ps__now p { text-decoration-color: var(--pulse); color: color-mix(in srgb, var(--ink-3) 80%, transparent); }
.ps__then p { transition: transform 260ms cubic-bezier(.2, .8, .2, 1); }
.ps__row:hover .ps__then p { transform: translateX(4px); }

/* ---- Product tiles: lift with a hard ink shadow ---- */
.shelf .shelf__tile { transition: transform 220ms cubic-bezier(.2, .8, .2, 1), box-shadow 220ms, border-color 220ms; }
.shelf .shelf__tile:hover, .shelf .shelf__tile:focus-visible { transform: translate(-3px, -3px); border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink) !important; }
.shelf .shelf__tile:hover .shelf__icon { transform: rotate(-8deg) scale(1.08); }
.shelf .badge[data-s="In use"]::before { animation: live-dot 2.4s ease-in-out infinite; }
@keyframes live-dot { 50% { opacity: .25; } }
:root[data-motion="reduced"] .shelf .badge::before { animation: none; }

/* ---- FAQ: numbered, big open/close, the answer on a pink rule ---- */
.faq { counter-reset: faq; }
.faq details { counter-increment: faq; }
.faq summary { display: grid; grid-template-columns: 2.6em 1fr 40px; align-items: center; gap: 12px; font: 650 var(--t-1)/1.3 var(--font-sans); padding: 20px 0; }
.faq summary::before { content: counter(faq, decimal-leading-zero); font: 600 var(--t-0)/1 var(--font-display); color: var(--ink-3); font-variant-numeric: lining-nums; }
.faq summary::after { content: "+"; display: grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid var(--ink); border-radius: 50%;
  font: 400 22px/1 var(--font-sans); color: var(--ink); transition: transform 300ms cubic-bezier(.2, 1.4, .4, 1), background-color 200ms, color 200ms; }
.faq summary:hover::after { background: var(--ink); color: var(--paper); }
.faq details[open] summary::after { transform: rotate(135deg); background: var(--ink); color: var(--paper); }
.faq details > p { margin-left: calc(2.6em + 12px); padding-left: 16px; border-left: 2px solid var(--pulse); }
.faq details > p:last-child { margin-bottom: 22px; }
@media (max-width: 560px) { .faq summary { grid-template-columns: 2em 1fr 36px; font-size: var(--t-0); } .faq summary::after { width: 36px; height: 36px; } .faq details > p { margin-left: 0; } }

/* ---- Story: every product on a turning ring ---- */
.pring { position: relative; width: min(100%, 440px); aspect-ratio: 1; margin: 0 auto; container-type: inline-size; }
.pring::before { content: ""; position: absolute; inset: 14%; border: 1.5px dashed color-mix(in srgb, var(--ink) 25%, transparent); border-radius: 50%; }
.pring__core { position: absolute; left: 50%; top: 50%; width: 22%; height: auto; transform: translate(-50%, -50%); border-radius: 22%; box-shadow: 4px 4px 0 var(--ink); border: 1.5px solid var(--ink); background: var(--paper); }
.pring__ring { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; animation: pring 60s linear infinite; }
.pring__ring li { position: absolute; left: 50%; top: 50%; width: 0; height: 0; max-width: none; transform: rotate(var(--a)) translateY(-36cqi) rotate(calc(var(--a) * -1)); }
.pring__it { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; animation: pring 60s linear infinite reverse; }
.pring__ring img { position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 14px; background: var(--paper); border: 1.5px solid var(--ink); padding: 4px; box-sizing: border-box; transition: transform 200ms; }
.pring__ring span { position: absolute; left: 0; top: 32px; transform: translateX(-50%); white-space: nowrap; font: 600 12px/1 var(--font-sans); color: var(--ink-2); background: var(--paper); padding: 2px 6px; border-radius: 6px; }
@keyframes pring { to { transform: rotate(360deg); } }
:root[data-motion="reduced"] .pring__ring, :root[data-motion="reduced"] .pring__it { animation: none; }
@media (prefers-reduced-motion: reduce) { .pring__ring, .pring__it { animation: none; } }
.pring__ring img { max-width: none; }

/* Home hero: no grey swash under the headline's italic word; in grey it read as a shadow (the owner, 2 Nov). */
body:has(#the-story) .hero h1 .em::after, body:has(#the-story) .hero h1 .em::before { content: none; display: none; }
.ps__art { aspect-ratio: 560 / 450; } .ps__art svg { aspect-ratio: 560 / 450; }   /* space reserved: no jump when it draws */
.sec--ps details.fold > summary.sec__hd { max-width: none; }
.sec--ps details.fold > summary.sec__hd > p:not(.label) { max-width: 36em; }
@media (min-width: 1100px) { .sec--ps details.fold > summary.sec__hd > :is(h2, p) { margin-right: 40%; } .sec--ps .ps__art { top: 0; right: 0; } }

/* Inner pages, made livelier (the owner, 2 Nov: "each page, each section: unique, interesting, modern, Gen Z").
   The same vocabulary as the home page: black and white, a hard ink shadow when something is picked up, Pulse pink as
   the one spark, stickers and tags rather than bullets. Each kind of section gets its own shape, so a page no longer reads
   as one grid repeated. Reading text in cards moves to the sans (small serif read as dated and thin). Loaded last. */

/* ---- Section numbers: a big outlined numeral in each sheet's corner ---- */
main { counter-reset: sec; }
body:not(:has(#the-story)) .sec > .wrap > details.fold { counter-increment: sec; }
body:not(:has(#the-story)) .sec > .wrap > details.fold > summary.sec__hd { position: relative; }
body:not(:has(#the-story)) .sec > .wrap > details.fold > summary.sec__hd::after {
  content: counter(sec, decimal-leading-zero); position: absolute; right: 0; top: -4px; pointer-events: none;
  font: 600 var(--t-5)/1 var(--font-display); font-variant-numeric: lining-nums; color: transparent;
  -webkit-text-stroke: 1.2px color-mix(in srgb, var(--ink) 26%, transparent); transition: -webkit-text-stroke-color 300ms; }
body:not(:has(#the-story)) .sec > .wrap > details.fold:hover > summary.sec__hd::after { -webkit-text-stroke-color: var(--pulse); }
@media (max-width: 640px) { body:not(:has(#the-story)) .sec > .wrap > details.fold > summary.sec__hd::after { font-size: var(--t-3); top: 0; } }

/* ---- Hero on inner pages: the breadcrumb as a small tag, the label as a sticker ---- */
.hero--page .crumbs { display: inline-flex; padding: 6px 12px; border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); border-radius: 999px; background: var(--paper); }
.hero--page .hero__in > .label { display: inline-block; padding: 6px 10px 5px; background: var(--ink); color: var(--paper); border-radius: 6px; transform: rotate(-2deg); box-shadow: 3px 3px 0 var(--pulse); }

/* ---- Capability lists become tags ---- */
body:not(.legal-page) .fold__body > .lines { display: flex; flex-wrap: wrap; gap: 10px; }
body:not(.legal-page) .fold__body > .lines li { display: inline-flex; align-items: center; gap: 10px; max-width: none; padding: 10px 16px; border: 1.5px solid var(--ink);
  border-radius: 14px; background: var(--paper); font: 550 var(--t-0)/1.35 var(--font-sans); color: var(--ink);
  transition: transform 180ms cubic-bezier(.2, .8, .2, 1), box-shadow 180ms, background-color 180ms, color 180ms; }
body:not(.legal-page) .fold__body > .lines li::before { width: auto; height: auto; border-radius: 0; background: none; transform: none; content: "✦"; color: var(--pulse); font-size: 12px; }
body:not(.legal-page) .fold__body > .lines li:hover { transform: translate(-2px, -2px) rotate(-.6deg); box-shadow: 3px 3px 0 var(--ink); }
body:not(.legal-page) .fold__body > .lines li:nth-child(5n + 1) { background: var(--ink); color: var(--paper); }

/* ---- Definitions (outcomes, security): numbered cards that lift ---- */
.fold__body > .defs { counter-reset: def; gap: 14px; }
.fold__body > .defs > div { counter-increment: def; position: relative; padding: 22px 20px 20px; border: 1.5px solid var(--ink); border-radius: 16px; background: var(--paper);
  transition: transform 200ms cubic-bezier(.2, .8, .2, 1), box-shadow 200ms; }
.fold__body > .defs > div::before { content: counter(def, decimal-leading-zero); position: absolute; top: 14px; right: 16px; font: 600 13px/1 var(--font-sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.fold__body > .defs > div:hover { transform: translate(-3px, -3px); box-shadow: 4px 4px 0 var(--ink); }
.fold__body > .defs dt { font: 600 var(--t-2)/1.1 var(--font-display); padding-right: 28px; }
.fold__body > .defs dd { font: 400 var(--t-0)/1.5 var(--font-sans); color: var(--ink-2); max-width: none; }

/* ---- Cards: sans text, a pink corner tick, the hard-shadow lift ---- */
.fold__body .cards .card { border: 1.5px solid var(--ink); border-radius: 16px; padding: 22px 20px; background: var(--paper);
  transition: transform 200ms cubic-bezier(.2, .8, .2, 1), box-shadow 200ms; position: relative; overflow: hidden; }
.fold__body .cards .card::after { content: ""; position: absolute; top: 0; right: 0; width: 28px; height: 28px; background: linear-gradient(225deg, var(--pulse) 50%, transparent 50%); opacity: 0; transition: opacity 200ms; }
.fold__body .cards .card:hover, .fold__body .cards a.card:focus-visible { transform: translate(-3px, -3px); box-shadow: 4px 4px 0 var(--ink); }
.fold__body .cards .card:hover::after { opacity: 1; }
.fold__body .cards .card h3 { font: 650 var(--t-1)/1.25 var(--font-sans); }
.fold__body .cards .card p { font: 400 var(--t-0)/1.55 var(--font-sans); color: var(--ink-2); max-width: none; }

/* ---- Steps: a timeline with numbered stations ---- */
.fold__body > .steps { counter-reset: step; padding-top: 0; gap: 18px; }
.fold__body > .steps::before { top: 22px; height: 1.5px; background: repeating-linear-gradient(90deg, var(--ink) 0 8px, transparent 8px 14px); }
.fold__body > .steps > li { counter-increment: step; position: relative; padding-top: 62px; }
.fold__body > .steps > li::before { content: counter(step, decimal-leading-zero); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 44px; height: 44px;
  border: 1.5px solid var(--ink); border-radius: 50%; background: var(--paper); font: 600 var(--t-0)/1 var(--font-display); font-variant-numeric: lining-nums; color: var(--ink);
  transition: background-color 200ms, color 200ms, transform 300ms cubic-bezier(.2, 1.4, .4, 1); }
.fold__body > .steps > li:hover::before { background: var(--ink); color: var(--paper); transform: scale(1.12) rotate(-6deg); }
.fold__body > .steps > li:first-child::before { background: var(--ink); color: var(--paper); box-shadow: 3px 3px 0 var(--pulse); }
.fold__body > .steps h3 { font: 650 var(--t-1)/1.25 var(--font-sans); }
.fold__body > .steps p { font: 400 var(--t-0)/1.55 var(--font-sans); color: var(--ink-2); }
.fold__body > .steps .step__n, .fold__body > .steps > li > small:first-child { display: none; }
@media (max-width: 640px) {
  .fold__body > .steps::before { left: 21px; right: auto; top: 0; bottom: 0; width: 1.5px; height: auto; background: repeating-linear-gradient(180deg, var(--ink) 0 8px, transparent 8px 14px); }
  .fold__body > .steps > li { padding: 4px 0 0 62px; min-height: 44px; }
}

/* ---- Tables: an ink header band, rows that light on hover ---- */
.fold__body .tbl { border-top: 0; border: 1.5px solid var(--ink); border-radius: 16px; }
.fold__body .tbl thead th { background: var(--ink); color: var(--paper); padding: 14px 16px; }
.fold__body .tbl th, .fold__body .tbl td { padding: 14px 16px; }
.fold__body .tbl tbody tr { transition: background-color 160ms; }
.fold__body .tbl tbody tr:hover { background: var(--paper-2); }
.fold__body .tbl tbody th { font: 650 var(--t-0)/1.4 var(--font-sans); }

/* ---- Chips ---- */
.fold__body .chips li { border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); border-radius: 999px; }

/* ---- Where this connects (module pages): a hub ---- */
.conn { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
.conn__hub { display: grid; justify-items: center; gap: 0; }
.conn__k { display: block; font: 700 11px/1.4 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.conn__me { margin: 0; padding: 16px 22px; border-radius: 16px; background: var(--ink); color: var(--paper); text-align: center; box-shadow: 4px 4px 0 var(--pulse); max-width: none; }
.conn__me .conn__k { color: color-mix(in srgb, var(--paper) 70%, transparent); }
.conn__me b { font: 600 var(--t-2)/1.1 var(--font-display); }
.conn__to-list { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 12px; width: 100%; margin: 0; padding: 40px 0 0; list-style: none; }
.conn__to-list::before { content: ""; position: absolute; top: 0; left: 50%; width: 1.5px; height: 20px; background: var(--ink); }
.conn__to-list::after { content: ""; position: absolute; top: 20px; left: calc(50% / var(--n)); right: calc(50% / var(--n)); height: 1.5px; background: var(--ink); }
.conn__to-list li { position: relative; max-width: none; }
.conn__to-list li::before { content: ""; position: absolute; top: -20px; left: 50%; width: 1.5px; height: 20px; background: var(--ink); }
.conn__to { display: grid; gap: 2px; height: 100%; padding: 14px 16px; border: 1.5px solid var(--ink); border-radius: 14px; background: var(--paper); color: var(--ink); text-decoration: none;
  transition: transform 200ms cubic-bezier(.2, .8, .2, 1), box-shadow 200ms; }
.conn__to b { font: 650 var(--t-0)/1.3 var(--font-sans); }
.conn__to i { font-style: normal; color: var(--pulse); transition: transform 200ms; }
.conn__to:hover, .conn__to:focus-visible { transform: translate(-3px, -3px); box-shadow: 4px 4px 0 var(--ink); }
.conn__to:hover i { transform: translateX(4px); }
.conn__why p { font: 400 var(--t-0)/1.6 var(--font-sans); color: var(--ink-2); margin: 0 0 12px; }
.conn__why p:first-child { font: italic 500 var(--t-1)/1.4 var(--font-display); color: var(--ink); }
@media (max-width: 860px) {
  .conn { grid-template-columns: 1fr; }
  .conn__to-list { grid-template-columns: 1fr; padding: 20px 0 0 28px; }
  .conn__to-list::before { left: 14px; height: 100%; top: 0; }
  .conn__to-list::after { display: none; }
  .conn__to-list li::before { top: 50%; left: -14px; width: 14px; height: 1.5px; }
}

/* ---- Reduced motion: things still respond, they just do not travel ---- */
:root[data-motion="reduced"] :is(.fold__body .lines li, .defs > div, .cards .card, .conn__to, .steps > li::before) { transition: none; }

/* fixes after the first look */
.hero--page .hero__in > .label { justify-self: start; width: max-content; max-width: 100%; }
body:not(:has(#the-story)) .sec > .wrap > details.fold > summary.sec__hd { max-width: none; padding-right: clamp(64px, 9vw, 140px); }
body:not(:has(#the-story)) .sec > .wrap > details.fold > summary.sec__hd > p:not(.label) { max-width: 40em; }
@media (max-width: 640px) {   /* one layer on a phone: the sheet is the card */
  .fold__body > .defs > div { border: 0; border-top: 1.5px solid var(--ink); border-radius: 0; padding: 18px 0; }
  .fold__body > .defs > div:hover { transform: none; box-shadow: none; }
  .fold__body > .defs > div::before { right: 0; }
}
@media (max-width: 640px) {
  body:not(:has(#the-story)) .sec > .wrap > details.fold > summary.sec__hd { padding-right: 44px; }
  body:not(:has(#the-story)) .sec > .wrap > details.fold > summary.sec__hd::after { font-size: var(--t-2); top: 26px; right: 4px; }
}

/* ---- Footnotes under a list or a paragraph: a note on a pink rule, not faded small serif ---- */
.fold__body > :is(.cards, .lines, .defs, .tbl, .steps, .conn) + .prose { font: 450 15.5px/1.55 var(--font-sans); color: var(--ink-2);
  padding: 2px 0 2px 14px; border-left: 2px solid var(--pulse); margin-top: 22px; }
.fold__body > :is(.cards, .lines, .defs, .tbl, .steps, .conn) + .prose::before { content: "Note  "; font-weight: 700; letter-spacing: .06em; font-size: 11px; text-transform: uppercase; color: var(--ink-3); white-space: pre; }

/* ---- A card's closing small line (for example "so we refuse boxed software"): a rubber stamp ---- */
.fold__body .cards .card > p.small:last-child { display: inline-block; margin-top: 12px; padding: 5px 10px 4px; border: 1.5px solid var(--pulse); border-radius: 6px;
  color: var(--pulse); font: 700 11.5px/1.3 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; transform: rotate(-2deg); max-width: 100%; }
.fold__body .cards .card:hover > p.small:last-child { transform: rotate(-4deg) scale(1.04); transition: transform 240ms cubic-bezier(.2, 1.4, .4, 1); }
/* a "Pending" mark inside a solid tag takes the tag's own colours */
body:not(.legal-page) .fold__body > .lines li:nth-child(5n + 1) .pending { color: var(--paper); border-color: color-mix(in srgb, var(--paper) 55%, transparent); }

/* One signature piece per page (the owner, 2 Nov: "each page unique"). Each is the page's own content given a shape
   that suits it, in the site's vocabulary: black and white, hard ink shadow, Pulse pink as the spark. Loaded last.

   Pricing           "What you pay for"           an itemised paper receipt that prints as it scrolls in
   Platform          "The platform map"           a stack of layers, each lifting when you point at it
   Trust family      "Evidence and documentation" a shelf of folders, each stamped Pending until published
   Trust family      "Shared responsibility"      DebugInit and You side by side, with the area as the seam
   Careers           "Hiring process"             four levels on a path, the last one the decision        */

/* ---- Pricing: the receipt ---- */
#what-you-pay-for .tbl { position: relative; max-width: 820px; margin: 8px auto 0; padding: 30px clamp(18px, 3vw, 34px) 26px; border: 1.5px solid var(--ink); border-radius: 4px;
  background: var(--paper); box-shadow: 6px 6px 0 var(--ink); transform: rotate(-.5deg); font-family: var(--font-mono); }
#what-you-pay-for .tbl::before { content: "DEBUGINIT ✦ HOW AN ESTIMATE IS BUILT"; display: block; text-align: center; font: 700 12px/1.4 var(--font-mono); letter-spacing: .16em;
  padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1.5px dashed var(--ink); }
#what-you-pay-for .tbl::after { content: "NO OPAQUE SUBSCRIPTION ✦ EVERY LINE CAN BE CHALLENGED"; display: block; text-align: center; font: 700 11px/1.5 var(--font-mono); letter-spacing: .14em;
  color: var(--pulse); padding-top: 14px; margin-top: 6px; border-top: 1.5px dashed var(--ink); }
#what-you-pay-for .tbl table { min-width: 0; font: 400 14px/1.5 var(--font-mono); }
#what-you-pay-for .tbl thead th { background: none; color: var(--ink-3); font: 700 11px/1.4 var(--font-mono); letter-spacing: .12em; padding: 10px 12px 10px 0; border-bottom: 1px dotted var(--ink-3); }
#what-you-pay-for .tbl th, #what-you-pay-for .tbl td { padding: 14px 12px 14px 0; border-bottom: 1px dotted color-mix(in srgb, var(--ink) 35%, transparent); }
#what-you-pay-for .tbl tbody th { font: 700 14px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
#what-you-pay-for .tbl tbody td:nth-of-type(1) { white-space: nowrap; color: var(--ink); }
#what-you-pay-for .tbl tbody tr:hover { background: none; }
#what-you-pay-for .tbl tbody tr:hover th { color: var(--pulse); }
@supports (animation-timeline: view()) {
  :root:not([data-motion="reduced"]) #what-you-pay-for .tbl tbody tr { animation: rcpt linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  @keyframes rcpt { from { opacity: 0; transform: translateY(-8px); } }
}
@media (max-width: 640px) {
  #what-you-pay-for .tbl { transform: none; box-shadow: 4px 4px 0 var(--ink); overflow: visible; }
  #what-you-pay-for .tbl thead { display: none; }
  #what-you-pay-for .tbl tbody tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px dotted color-mix(in srgb, var(--ink) 35%, transparent); }
  #what-you-pay-for .tbl tbody :is(th, td) { padding: 0; border: 0; }
  #what-you-pay-for .tbl tbody td:nth-of-type(1) { text-align: right; color: var(--ink-3); }
  #what-you-pay-for .tbl tbody td:nth-of-type(2) { grid-column: 1 / -1; }
  #what-you-pay-for .tbl + .prose { display: none; }   /* "scroll the table sideways" no longer applies */
}

/* ---- Platform: the layer stack ---- */
#the-platform-map .pmap { display: grid; gap: 10px; margin-top: 14px; }
#the-platform-map .pmap__row { position: relative; margin-left: calc((var(--n) - 1) * clamp(0px, 2.2vw, 30px)); padding: 18px 22px; border: 1.5px solid var(--ink); border-radius: 14px;
  background: var(--paper); box-shadow: 0 4px 0 -1px var(--paper), 0 4px 0 0 var(--ink); transition: transform 220ms cubic-bezier(.2, .8, .2, 1), box-shadow 220ms, background-color 220ms; }
#the-platform-map .pmap__row:last-child { border-bottom: 1.5px solid var(--ink); }
#the-platform-map .pmap__row:hover, #the-platform-map .pmap__row:focus-within { padding-left: 22px; background: var(--paper); transform: translate(-4px, -6px); box-shadow: 5px 6px 0 var(--ink); }
#the-platform-map .pmap__row:hover .pmap__n { color: var(--pulse); }
#the-platform-map .pmap__row:first-child { background: var(--ink); }
#the-platform-map .pmap__row:first-child :is(.pmap__name, .pmap__about) { color: var(--paper); }
#the-platform-map .pmap__row:first-child .pmap__n { color: var(--paper); text-decoration: underline 3px var(--pulse); text-underline-offset: 6px; }
#the-platform-map .pmap__row:first-child:hover { background: var(--ink); }
#the-platform-map .pmap__row::after { content: "LAYER"; position: absolute; right: 16px; top: 12px; font: 700 10px/1 var(--font-sans); letter-spacing: .16em; color: var(--ink-3); }
#the-platform-map .pmap__row:first-child::after { color: color-mix(in srgb, var(--paper) 60%, transparent); }
@media (max-width: 760px) { #the-platform-map .pmap__row { margin-left: 0; } #the-platform-map .pmap__row::after { display: none; } }

/* ---- Trust family: evidence as folders ---- */
#evidence-and-documentation .fold__body > .lines { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 30px 16px; padding-top: 14px; }
#evidence-and-documentation .fold__body > .lines li { position: relative; display: flex; flex-direction: column-reverse; align-items: flex-start; justify-content: flex-end; gap: 12px; min-height: 104px;
  padding: 18px 18px 16px; border-radius: 0 14px 14px 14px; background: var(--paper); color: var(--ink); font: 600 var(--t-0)/1.35 var(--font-sans); }
#evidence-and-documentation .fold__body > .lines li:nth-child(5n + 1) { background: var(--paper); color: var(--ink); }
#evidence-and-documentation .fold__body > .lines li::before { content: ""; position: absolute; top: -13px; left: -1.5px; width: 44%; height: 13px; border: 1.5px solid var(--ink); border-bottom: 0;
  border-radius: 8px 10px 0 0; background: var(--paper); color: transparent; font-size: 0; }
#evidence-and-documentation .fold__body > .lines li:hover { transform: translate(-2px, -3px) rotate(-.8deg); box-shadow: 4px 4px 0 var(--ink); }
#evidence-and-documentation .fold__body > .lines .pending { align-self: flex-end; margin: 0; padding: 4px 9px 3px; border: 1.5px solid var(--pulse) !important; border-radius: 5px; background: none;
  color: var(--pulse) !important; font: 700 11px/1.2 var(--font-sans); letter-spacing: .12em; transform: rotate(-6deg); }

/* ---- Trust family: shared responsibility, two sides ---- */
#shared-responsibility .tbl thead th:nth-child(2) { background: var(--ink); color: var(--paper); }
#shared-responsibility .tbl thead th:nth-child(3) { background: var(--pulse); color: #fff; }
#shared-responsibility .tbl thead th:first-child { background: var(--paper-2); color: var(--ink-3); }
#shared-responsibility .tbl tbody td:nth-of-type(1) { border-right: 1.5px dashed color-mix(in srgb, var(--ink) 35%, transparent); color: var(--ink); }
#shared-responsibility .tbl tbody td:nth-of-type(2) { color: var(--ink); }
#shared-responsibility .tbl tbody td::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; vertical-align: 1px; }
#shared-responsibility .tbl tbody td:nth-of-type(1)::before { background: var(--ink); }
#shared-responsibility .tbl tbody td:nth-of-type(2)::before { background: var(--pulse); }
:root[data-theme="night"] #shared-responsibility .tbl thead th:nth-child(3) { color: #1D1D1F; }

/* ---- Careers: the hiring path ---- */
#hiring-process .fold__body > .defs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; position: relative; }
#hiring-process .fold__body > .defs > div::before { content: "LEVEL " counter(def, decimal-leading-zero); position: static; display: inline-block; margin-bottom: 12px; padding: 4px 8px 3px;
  border-radius: 5px; background: var(--ink); color: var(--paper); font: 700 10.5px/1.2 var(--font-sans); letter-spacing: .14em; }
#hiring-process .fold__body > .defs > div:not(:last-child)::after { content: "→"; position: absolute; right: -24px; top: 50%; transform: translateY(-50%); font: 600 20px/1 var(--font-sans); color: var(--pulse); }
#hiring-process .fold__body > .defs > div:last-child { background: var(--ink); color: var(--paper); box-shadow: 4px 4px 0 var(--pulse); }
#hiring-process .fold__body > .defs > div:last-child :is(dt, dd) { color: var(--paper); }
#hiring-process .fold__body > .defs > div:last-child::before { background: var(--pulse); color: #fff; }
@media (max-width: 900px) { #hiring-process .fold__body > .defs { grid-template-columns: 1fr 1fr; } #hiring-process .fold__body > .defs > div::after { display: none; } }
@media (max-width: 640px) {
  #hiring-process .fold__body > .defs { grid-template-columns: 1fr; }
  #hiring-process .fold__body > .defs > div:last-child { border: 0; border-radius: 14px; padding: 18px; }
}
#the-platform-map .pmap__row { max-width: none; }

/* ======== Round two: Team, and one piece per family of pages ======== */

/* ---- Team: crew ID badges ---- */
.people .person { border: 1.5px solid var(--ink); border-radius: 18px; padding-top: 40px; background: var(--paper); box-shadow: 4px 4px 0 var(--ink);
  transition: transform 260ms cubic-bezier(.2, 1.3, .4, 1), box-shadow 260ms; }
.people .person::before { content: ""; position: absolute; top: 14px; left: 50%; width: 44px; height: 9px; transform: translateX(-50%); border-radius: 999px;
  border: 1.5px solid var(--ink); background: var(--paper-2); }
.people .person:nth-child(3n + 1) { rotate: -1.2deg; } .people .person:nth-child(3n + 2) { rotate: .8deg; } .people .person:nth-child(3n) { rotate: -.4deg; }
.people .person:hover { rotate: 0deg; transform: translate(-3px, -6px); box-shadow: 7px 9px 0 var(--ink); }
.people .person--lead { box-shadow: 4px 4px 0 var(--pulse); border-color: var(--ink); }
.people .person--lead:hover { box-shadow: 7px 9px 0 var(--pulse); }
.people .person__role { display: inline-block; padding: 3px 9px; border-radius: 6px; background: var(--ink); color: var(--paper); font-size: 12.5px; letter-spacing: .02em; }
:root[data-motion="reduced"] .people .person { rotate: none; }
@media (max-width: 640px) { .people .person { rotate: none !important; box-shadow: none; } }

/* ---- Solutions: what we will not do ---- */
#what-we-will-not-do .fold__body > .defs > div { padding-top: 54px; }
#what-we-will-not-do .fold__body > .defs > div::before { content: "✕"; top: 16px; right: auto; left: 18px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--pulse); color: #fff; font: 700 14px/1 var(--font-sans); }
#what-we-will-not-do .fold__body > .defs > div::after { content: "WE WON'T"; position: absolute; top: 18px; right: 16px; padding: 3px 8px 2px; border: 1.5px solid var(--pulse); border-radius: 5px;
  color: var(--pulse); font: 700 10.5px/1.3 var(--font-sans); letter-spacing: .14em; transform: rotate(4deg); }
#what-we-will-not-do .fold__body > .defs dt { text-decoration: line-through 2px color-mix(in srgb, var(--pulse) 70%, transparent); text-decoration-skip-ink: none; }
@media (max-width: 640px) { #what-we-will-not-do .fold__body > .defs > div { padding-top: 52px; } #what-we-will-not-do .fold__body > .defs > div::before { left: 0; } #what-we-will-not-do .fold__body > .defs > div::after { right: 0; } }

/* ---- Products: the lifecycle track ---- */
.track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 6px 0 26px; padding: 0; list-style: none; counter-reset: stg; }
.track li { position: relative; max-width: none; padding-top: 30px; counter-increment: stg; font: 600 var(--t--1)/1.3 var(--font-sans); color: var(--ink-3); }
.track li::before { content: ""; position: absolute; top: 9px; left: 0; right: 0; height: 3px; background: color-mix(in srgb, var(--ink) 14%, transparent); }
.track li::after { content: ""; position: absolute; top: 3px; left: 0; width: 15px; height: 15px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--ink) 30%, transparent); background: var(--paper); }
.track li.is-done { color: var(--ink-2); }
.track li.is-done::before { background: var(--ink); }
.track li.is-done::after { background: var(--ink); border-color: var(--ink); }
.track li.is-now { color: var(--ink); }
.track li.is-now::before { background: linear-gradient(90deg, var(--ink) 0 12px, color-mix(in srgb, var(--ink) 14%, transparent) 12px); }
.track li.is-now::after { width: 21px; height: 21px; top: 0; left: -3px; background: var(--pulse); border-color: var(--pulse); box-shadow: 0 0 0 6px color-mix(in srgb, var(--pulse) 18%, transparent); animation: here 2s ease-in-out infinite; }
.track li b { display: inline-block; margin-top: 6px; padding: 3px 8px 2px; border-radius: 5px; background: var(--ink); color: var(--paper); font: 700 10.5px/1.3 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; transform: rotate(-2deg); }
.track li span { display: block; }
@keyframes here { 50% { box-shadow: 0 0 0 11px color-mix(in srgb, var(--pulse) 0%, transparent); } }
:root[data-motion="reduced"] .track li.is-now::after { animation: none; }
@media (max-width: 560px) { .track { grid-template-columns: 1fr; gap: 0; } .track li { padding: 0 0 18px 34px; } .track li::before { top: 0; bottom: 0; left: 6px; right: auto; width: 3px; height: auto; }
  .track li.is-now::before { background: color-mix(in srgb, var(--ink) 14%, transparent); } .track li::after { top: 2px; } .track li b { margin-left: 8px; margin-top: 0; } .track li span { display: inline; } }

/* ---- Platform pages: the fine print ---- */
#what-this-page-does-not-claim details.fold { border: 1.5px dashed var(--ink) !important; background: var(--paper-2) !important; background-image: none !important; box-shadow: none !important; }
#what-this-page-does-not-claim details.fold::after { display: none; }
#what-this-page-does-not-claim summary.sec__hd { cursor: default; pointer-events: none; padding-right: 0 !important; }
#what-this-page-does-not-claim summary.sec__hd::before, #what-this-page-does-not-claim .fold__more { display: none !important; }
#what-this-page-does-not-claim summary.sec__hd::after { content: "THE FINE PRINT" !important; position: static !important; display: inline-block !important; order: -1; justify-self: start; width: max-content;
  padding: 4px 9px 3px; border-radius: 5px; background: var(--ink); color: var(--paper) !important; -webkit-text-stroke: 0 !important; font: 700 11px/1.3 var(--font-sans) !important; letter-spacing: .14em; transform: rotate(-2deg); }
#what-this-page-does-not-claim summary.sec__hd > p { font: 450 var(--t-0)/1.6 var(--font-mono); max-width: 46em; }

/* ---- Empty libraries (Resources, Docs, Guides, Research, Status): a terminal that has nothing to list yet ---- */
#nothing-to-read-yet-bring-us-the-problem-instead details.fold { background: var(--ink) !important; background-image: none !important; border-color: var(--ink) !important; color: var(--paper); }
#nothing-to-read-yet-bring-us-the-problem-instead details.fold::before { content: "●  ●  ●     ~/library  $ ls\A→ 0 items"; white-space: pre; display: block; margin: 0 0 22px;
  font: 500 13px/1.6 var(--font-mono); color: color-mix(in srgb, var(--paper) 62%, transparent); }
#nothing-to-read-yet-bring-us-the-problem-instead details.fold :is(h2, p) { color: var(--paper); }
#nothing-to-read-yet-bring-us-the-problem-instead h2::after { content: "▍"; margin-left: 4px; color: var(--pulse); animation: caret 1s steps(1) infinite; }
#nothing-to-read-yet-bring-us-the-problem-instead summary.sec__hd::after { -webkit-text-stroke-color: color-mix(in srgb, var(--paper) 30%, transparent) !important; }
#nothing-to-read-yet-bring-us-the-problem-instead summary.sec__hd::before { border-color: var(--paper) !important; }
#nothing-to-read-yet-bring-us-the-problem-instead .fold__more { color: var(--paper); border-color: color-mix(in srgb, var(--paper) 30%, transparent); }
#nothing-to-read-yet-bring-us-the-problem-instead .btn--primary { background: var(--paper); color: var(--ink); }
#nothing-to-read-yet-bring-us-the-problem-instead .btn--quiet { color: var(--paper); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--paper) 45%, transparent); }
@keyframes caret { 50% { opacity: 0; } }
:root[data-motion="reduced"] #nothing-to-read-yet-bring-us-the-problem-instead h2::after { animation: none; }

/* ---- Business Foundations: the twelve as a bento ---- */
#the-foundation-map .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: fd; }
#the-foundation-map .cards > li { counter-increment: fd; }
#the-foundation-map .cards > li:first-child { grid-column: span 2; }
#the-foundation-map .cards .card h3::before { content: counter(fd, decimal-leading-zero); display: block; margin-bottom: 10px; font: 600 var(--t-2)/1 var(--font-display); font-variant-numeric: lining-nums; color: var(--ink-3); }
#the-foundation-map .cards > li:first-child .card { background: var(--ink) !important; border-color: var(--ink); box-shadow: 4px 4px 0 var(--pulse); }
#the-foundation-map .cards > li:first-child .card :is(h3, p, a) { color: var(--paper); }
#the-foundation-map .cards > li:first-child .card h3::before { color: var(--pulse); }
@media (max-width: 1000px) { #the-foundation-map .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { #the-foundation-map .cards { grid-template-columns: 1fr; } #the-foundation-map .cards > li:first-child { grid-column: auto; } }

/* ---- Deployment: five models on a scale of control ---- */
#five-operating-models .tbl { border: 0; overflow: visible; }
#five-operating-models .tbl table { display: block; min-width: 0; }
#five-operating-models .tbl thead { display: none; }
#five-operating-models .tbl tbody { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding-top: 44px; position: relative; }
#five-operating-models .tbl tbody::before { content: "LESS TO RUN"; position: absolute; top: 0; left: 0; font: 700 11px/1 var(--font-sans); letter-spacing: .14em; color: var(--ink-3); }
#five-operating-models .tbl tbody::after { content: "MORE CONTROL →"; position: absolute; top: 0; right: 0; font: 700 11px/1 var(--font-sans); letter-spacing: .14em; color: var(--pulse); }
#five-operating-models .tbl tbody tr { display: grid; align-content: start; gap: 8px; padding: 18px 16px; border: 1.5px solid var(--ink); border-radius: 14px; background: var(--paper);
  box-shadow: inset 0 4px 0 color-mix(in srgb, var(--ink) calc(var(--k, 1) * 20%), transparent); transition: transform 200ms cubic-bezier(.2, .8, .2, 1), box-shadow 200ms; }
#five-operating-models .tbl tbody tr:nth-child(1) { --k: 1; } #five-operating-models .tbl tbody tr:nth-child(2) { --k: 2; } #five-operating-models .tbl tbody tr:nth-child(3) { --k: 3; }
#five-operating-models .tbl tbody tr:nth-child(4) { --k: 4; } #five-operating-models .tbl tbody tr:nth-child(5) { --k: 5; }
#five-operating-models .tbl tbody tr:hover { transform: translate(-3px, -3px); box-shadow: inset 0 4px 0 var(--pulse), 4px 4px 0 var(--ink); background: var(--paper); }
#five-operating-models .tbl tbody :is(th, td) { display: block; padding: 0; border: 0; }
#five-operating-models .tbl tbody th { font: 600 var(--t-1)/1.15 var(--font-display); }
#five-operating-models .tbl tbody td:nth-of-type(1) { font: 600 13px/1.4 var(--font-sans); color: var(--ink-3); }
#five-operating-models .tbl tbody td:nth-of-type(2) { font: 400 15px/1.5 var(--font-sans); color: var(--ink-2); }
#five-operating-models .tbl + .prose { display: none; }
@media (max-width: 1000px) { #five-operating-models .tbl tbody { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { #five-operating-models .tbl tbody { grid-template-columns: 1fr; } }

/* ---- Studio: what we need from you, as a checklist you can tick ---- */
#what-we-need-from-you .fold__body > .defs > div { cursor: pointer; padding-left: 58px; user-select: none; }
#what-we-need-from-you .fold__body > .defs > div::before { content: ""; top: 22px; left: 18px; right: auto; width: 24px; height: 24px; border: 1.5px solid var(--ink); border-radius: 7px; background: var(--paper); }
#what-we-need-from-you .fold__body > .defs > div.is-ticked::before { content: "✓"; display: grid; place-items: center; background: var(--ink); color: var(--paper); font: 700 15px/1 var(--font-sans); }
#what-we-need-from-you .fold__body > .defs > div.is-ticked dt { text-decoration: line-through 2px var(--pulse); }
#what-we-need-from-you .fold__body > .defs > div.is-ticked dd { color: var(--ink-3); }
@media (max-width: 640px) { #what-we-need-from-you .fold__body > .defs > div { padding-left: 40px; } #what-we-need-from-you .fold__body > .defs > div::before { left: 0; } }
#nothing-to-read-yet-bring-us-the-problem-instead h2::after { content: ""; display: inline-block; width: .07em; height: .82em; margin-left: .12em; vertical-align: -.06em; background: var(--pulse); }
#the-foundation-map .cards > li:first-child .card { padding: 22px 24px !important; border-radius: 16px; height: 100%; box-sizing: border-box; }
#the-foundation-map .cards > li:first-child .card h3::before { color: var(--paper); text-decoration: underline 3px var(--pulse); text-underline-offset: 6px; }

/* Sleek, flat, never shiny (the owner, 1 Nov): buttons and tiles are flat colour, everywhere. At night nothing casts a
   shadow and nothing glows: surfaces are told apart by a hairline and a step in tone, not by depth. :root[data-theme="night"] is written out
   by tools/build.py as both the chosen Night and the device's dark preference. */

/* Day and night: no gradient fills on anything you press. */
.btn--primary { box-shadow: none; background: var(--accent); }
.btn--primary:hover { background: var(--accent-2); }
.app--brand { background: var(--accent); color: var(--on-accent); }
.cta { background: var(--accent); }
.house__card::before { display: none; }
.story__frame::before { background: linear-gradient(90deg, transparent 26px, color-mix(in srgb, var(--gilt) 45%, transparent) 26px 27px, transparent 27px); }
.stack__layer:nth-child(1), .stack__layer:last-child { background: var(--paper); }
.chip-app:hover, .soc:hover { transform: none; }

/* Night: flat surfaces with hairlines, no shadows, no blend tricks. */
:root[data-theme="night"] .card, :root[data-theme="night"] .house__card, :root[data-theme="night"] .person, :root[data-theme="night"] .inbox, :root[data-theme="night"] .stack__layer, :root[data-theme="night"] .brandrow, :root[data-theme="night"] .sheetform,
:root[data-theme="night"] .form, :root[data-theme="night"] .story__frame, :root[data-theme="night"] .myna-card, :root[data-theme="night"] .myna-desk, :root[data-theme="night"] .appicon, :root[data-theme="night"] .cameo, :root[data-theme="night"] .story__pic,
:root[data-theme="night"] .brandrow__hd > img:first-child, :root[data-theme="night"] .plans li {
  box-shadow: none !important; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
:root[data-theme="night"] a.card:hover, :root[data-theme="night"] a.house__card:hover, :root[data-theme="night"] .inbox:hover, :root[data-theme="night"] .person:hover { box-shadow: none !important; border-color: color-mix(in srgb, var(--accent) 45%, transparent); transform: translateY(-2px); }
:root[data-theme="night"] .btn, :root[data-theme="night"] .btn--primary, :root[data-theme="night"] .btn--quiet, :root[data-theme="night"] .icon-btn, :root[data-theme="night"] .myna-chip, :root[data-theme="night"] .chip-app, :root[data-theme="night"] .soc { box-shadow: none !important; }
:root[data-theme="night"] .btn--quiet { border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); }
:root[data-theme="night"] .btn--quiet:hover { border-color: var(--ink-2); }
:root[data-theme="night"] .hd, :root[data-theme="night"] .tabbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--desk); border-color: color-mix(in srgb, var(--ink) 10%, transparent); }
:root[data-theme="night"] dialog.sheet { box-shadow: none; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
:root[data-theme="night"] .mega { box-shadow: none; }
:root[data-theme="night"] .slash-menu { box-shadow: none; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
:root[data-theme="night"] .sec--paper::before { filter: none; }
:root[data-theme="night"] body::before { display: none; }                      /* no grain sheen at night */
:root[data-theme="night"] .card::after { opacity: .5; }                         /* the tape, quieter */
:root[data-theme="night"] .hero h1 .em::after { opacity: .35; }                 /* the ink swash, quieter */
:root[data-theme="night"] .story__scene .lay.on path { filter: none; }
:root[data-theme="night"] .stamp { mix-blend-mode: normal; background: var(--paper); }
:root[data-theme="night"] .badge { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, var(--ink-3)) 45%, transparent); }
:root[data-theme="night"] .live i { animation: none; }
:root[data-theme="night"] .art { opacity: .22; }
:root[data-theme="night"] .house__line { color: color-mix(in srgb, var(--pa) 40%, var(--ink)); }

@media (prefers-color-scheme: dark) {

:root:not([data-theme="day"]) .card, :root:not([data-theme="day"]) .house__card, :root:not([data-theme="day"]) .person, :root:not([data-theme="day"]) .inbox, :root:not([data-theme="day"]) .stack__layer, :root:not([data-theme="day"]) .brandrow, :root:not([data-theme="day"]) .sheetform,
:root:not([data-theme="day"]) .form, :root:not([data-theme="day"]) .story__frame, :root:not([data-theme="day"]) .myna-card, :root:not([data-theme="day"]) .myna-desk, :root:not([data-theme="day"]) .appicon, :root:not([data-theme="day"]) .cameo, :root:not([data-theme="day"]) .story__pic,
:root:not([data-theme="day"]) .brandrow__hd > img:first-child, :root:not([data-theme="day"]) .plans li {
  box-shadow: none !important; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
:root:not([data-theme="day"]) a.card:hover, :root:not([data-theme="day"]) a.house__card:hover, :root:not([data-theme="day"]) .inbox:hover, :root:not([data-theme="day"]) .person:hover { box-shadow: none !important; border-color: color-mix(in srgb, var(--accent) 45%, transparent); transform: translateY(-2px); }
:root:not([data-theme="day"]) .btn, :root:not([data-theme="day"]) .btn--primary, :root:not([data-theme="day"]) .btn--quiet, :root:not([data-theme="day"]) .icon-btn, :root:not([data-theme="day"]) .myna-chip, :root:not([data-theme="day"]) .chip-app, :root:not([data-theme="day"]) .soc { box-shadow: none !important; }
:root:not([data-theme="day"]) .btn--quiet { border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); }
:root:not([data-theme="day"]) .btn--quiet:hover { border-color: var(--ink-2); }
:root:not([data-theme="day"]) .hd, :root:not([data-theme="day"]) .tabbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--desk); border-color: color-mix(in srgb, var(--ink) 10%, transparent); }
:root:not([data-theme="day"]) dialog.sheet { box-shadow: none; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
:root:not([data-theme="day"]) .mega { box-shadow: none; }
:root:not([data-theme="day"]) .slash-menu { box-shadow: none; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
:root:not([data-theme="day"]) .sec--paper::before { filter: none; }
:root:not([data-theme="day"]) body::before { display: none; }                      /* no grain sheen at night */
:root:not([data-theme="day"]) .card::after { opacity: .5; }                         /* the tape, quieter */
:root:not([data-theme="day"]) .hero h1 .em::after { opacity: .35; }                 /* the ink swash, quieter */
:root:not([data-theme="day"]) .story__scene .lay.on path { filter: none; }
:root:not([data-theme="day"]) .stamp { mix-blend-mode: normal; background: var(--paper); }
:root:not([data-theme="day"]) .badge { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, var(--ink-3)) 45%, transparent); }
:root:not([data-theme="day"]) .live i { animation: none; }
:root:not([data-theme="day"]) .art { opacity: .22; }
:root:not([data-theme="day"]) .house__line { color: color-mix(in srgb, var(--pa) 40%, var(--ink)); }

}