/* Delvo Digital — site v4 · the all-dark EXACT COPY of Dominic's picture (specs/dark-spec.json; every hex measured in
   specs/dark-tokens.json). The :root below is the only place a colour is written; every rule names a token. Layout
   scale k = 1.8623 (the picture's 741 px panel → the page's 1380 px panel, written as --k = 1px at 1440 and scaled
   down with the viewport); text scale T = 1.06 (body 17 → 18). The page: a near-black ground and three stacked
   rounded panels; every section and the footer is data-ground="dark". */

@font-face {
  font-family: "Figtree";
  src: url("assets/fonts/figtree-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* ── tokens: the picture's set (dark-tokens.json → css_map → :root) ────────── */
:root {
  --text: #F5F7FA;
  --hl: linear-gradient(90deg, #9E5BB1 0%, #7559BA 50%, #6957BF 100%);   /* re-measured on the 2592 original, ink pixels (dark round 2); the 1920 copy read #A77BB4 → #776BB5 */
  --page: #0C0C0E;
  --panel: #0E1013;
  --panel-border: #313336;
  --surface: #0E1013;
  --surface-2: #131519;
  --surface-3: #161A1E;
  --border: #232629;
  --border-faint: #181B1E;
  --hairline: #17191C;
  --text-2: #7F8285;
  --text-3: #7F8285;
  --button: #7A47D6;
  --button-hover: #6C3BC6;
  --button-label: #FFFFFF;
  --chip-on: #8955D8;
  --chip-on-label: #FFFFFF;
  --tint-bg: #1B1C33;
  --tint-border: #262739;
  --tint-fg: #8282A6;
  --hl-solid: #7559BA;
  --hl-statement: linear-gradient(90deg, #5E58BB 0%, #7052B8 55%, #9250A4 100%);   /* the original: violet → mauve, the turn at ~60 % */
  --num-grad: linear-gradient(90deg, #6857BB 0%, #9353A8 35%, #9653A2 65%, #6058BD 100%);   /* the original's numerals 01–04 (dark round 2) */
  --accent: linear-gradient(90deg, #724FBC 0%, #CC85B0 100%);   /* the original's progress bar, violet → pink (dark round 2) */
  --accent-1: #724FBC;
  --accent-2: #CC85B0;
  --accent-mid: #9D5DA7;             /* the accent sweep's midpoint (between the two measured stops), for the connector's three-stop gradient */
  --track: #222629;
  --rule-grad: linear-gradient(90deg, #8349D9 0%, #5C57C1 100%);   /* the original's rule (dark round 2) */
  --glow: #201D3C;
  --glow-lift: #534BA7;
  --unlit: #3B3E45;
  --focus: #A98BFF;
  --nav-glass: rgba(12,12,14,0.82);
  --elev: none;
  --screen-glass: #0E1013;
  --ink-faint: #685F72;                 /* kept ONLY so the gate seed g7.dark-text3 can still fail; no component uses it */
  /* the measured stops by name (the engine's tints, the ribbon, the Custom-software glow line; dark-tokens.json) */
  --hl-a: #9E5BB1;
  --hl-b: #7559BA;
  --hl-c: #6957BF;
  --hl-st-a: #5E58BB;
  --hl-st-b: #9250A4;
  --num-a: #6857BB;
  --num-b: #9353A8;
  --rule-a: #8349D9;
  --rule-b: #5C57C1;
  --glow-line: #FDE9FC;
  --glow-line-a: #6A6391;
  --glow-line-b: #5C587B;
  --portal-ground: #F6F3EE;             /* the client portal's own page ground, sampled from its capture (row B's phone) */
  --eyebrow-accent: #937CD3;            /* the walkthrough eyebrows' violet (judge 2026-10-06 C7): the most saturated core ink pixel of
                                           "THE CONSOLE AND YOUR PORTAL", refs/walk-console-portal.png box 86,154 → 343,166 (sharp); 5.64 : 1 on --page,
                                           5.50 on --surface (dark-tokens.json contrast.pairs) */
  /* the semantic set the components and the gates read (the same set is re-declared on [data-ground="dark"] below) */
  --ground: var(--panel);
  --ground-alt: var(--panel);
  --surface-border: var(--border);
  --panel-bg: var(--panel);
  --panel-line: var(--panel-border);
  --line: var(--hairline);
  --btn: var(--button);
  --btn-hover: var(--button-hover);
  --btn-label: var(--button-label);
  --grad-text: var(--hl);
  --grad-solid: var(--hl-solid);
  --grad-line: var(--accent);
  --g1: var(--accent-1);
  --g2: var(--accent-mid);
  --g3: var(--accent-2);
  --num: var(--num-grad);
  --chip-border: var(--border);
  --chip-text: var(--text-2);
  --chip-on-bg: var(--chip-on);
  --pill-bg: var(--panel);
  --pill-fg: var(--text-2);
  --tag-fg: var(--text-3);
}
/* the on-dark switch: every section is dark, and the gates' semantic check reads this rule */
[data-ground="dark"] {
  --ground: var(--panel);
  --ground-alt: var(--panel);
  --surface-border: var(--border);
  --panel-bg: var(--panel);
  --panel-line: var(--panel-border);
  --line: var(--hairline);
  --btn: var(--button);
  --btn-hover: var(--button-hover);
  --btn-label: var(--button-label);
  --grad-text: var(--hl);
  --grad-solid: var(--hl-solid);
  --grad-line: var(--accent);
  --g1: var(--accent-1);
  --g2: var(--accent-mid);
  --g3: var(--accent-2);
  --num: var(--num-grad);
  --chip-border: var(--border);
  --chip-text: var(--text-2);
  --chip-on-bg: var(--chip-on);
  --pill-bg: var(--panel);
  --pill-fg: var(--text-2);
  --tag-fg: var(--text-3);
}

/* ── layout scale (on body, not :root: these are lengths, not colours) ───────── */
body {
  --margin: 30px;                                   /* ground around and between the panels: the picture's 16 px gap × k */
  --gutter: 52px;                                   /* the panel's inner gutter: drawn 28 × k */
  --k: min(1px, calc((100vw - 60px) / 1380));       /* one page px at 1440 (panel 1380); smaller panels scale the display sizes */
  --nav-rest: calc(var(--margin) + 22px);           /* the bar at rest: its 72 px row sits 22–94 under the panel's top edge */
  --nav-h: 72px;
  --font: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --arrive: cubic-bezier(.23,1,.32,1);
  --ui: cubic-bezier(0,0,.2,1);
  --ui2: cubic-bezier(.4,0,.2,1);
  --slow: cubic-bezier(.5,0,.2,1);
}
@media (max-width: 1439px) { body { --margin: 24px; --gutter: 40px; --k: min(1px, calc((100vw - 48px) / 1380)); } }   /* min(): the panel caps at 1380 from 1428, so k never passes 1 */
@media (max-width: 1023px) { body { --margin: 16px; --gutter: 24px; --k: calc((100vw - 32px) / 1380); --nav-rest: var(--margin); --nav-h: 60px; } }
@media (max-width: 639px) { body { --margin: 12px; --gutter: 16px; --k: calc((100vw - 24px) / 1380); } }

/* ── base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--page);
  overflow-x: clip;
  scroll-padding-top: 88px;
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  overflow-x: clip;
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.5;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html.menu-open { overflow: hidden; }
h1, h2, h3, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; }
img { max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip {
  position: fixed; top: 12px; left: 12px; z-index: 100;
  padding: 12px 16px; border-radius: 10px; background: var(--btn); color: var(--btn-label);
  font-weight: 600; text-decoration: none; transform: translateY(-160%);
}
.skip:focus { transform: none; }
.frost-sentinel { position: absolute; top: 12px; left: 0; width: 1px; height: 1px; pointer-events: none; }
/* the engine's canvas: fixed, full viewport, TRANSPARENT and additive (screen), ABOVE the hero crop (z 1) and UNDER the
   copy (z 3): it only ever brightens the picture's own glow pool and the closing frame's field (dark-spec hero_graphic.engine).
   Nothing between it and the root may make a stacking context: no z-index / transform / filter / isolation on main,
   the panel or the hero. */
#stage { position: fixed; inset: 0; width: 100%; height: 100%; display: none; pointer-events: none; z-index: 2; mix-blend-mode: screen; }
html.gl #stage { display: block; }
/* the still (?shot=1), the page's motion switch and reduced motion draw no engine frame: the crop's own pool is the glow */
html.shot #stage, html.motion-off #stage { display: none; }
@media (prefers-reduced-motion: reduce) { html.gl #stage { display: none; } }

/* ── the ground and the three panels ──────────────────────────────────────── */
main { padding: var(--margin); }
.panel {
  position: relative; max-width: 1380px; margin-inline: auto;
  background: var(--panel-bg); border: 1px solid var(--panel-line); border-radius: 16px;
  overflow: clip;                                   /* the hero crop and the pinned rail's frame stay inside the radius; clip makes no scroll container, so sticky still pins */
}
.panel + .panel { margin-top: var(--margin); }
.sec { position: relative; padding-inline: var(--gutter); color: var(--text); }
/* inside a panel, sections are parted by a 1 px hairline running the panel's full inner width (drawn x 39 → 775) */
.sec--rule::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line); pointer-events: none; }

/* ── type (dark-spec.json → type.roles: display × k on cap height, text × T) ── */
.h1 { font-size: clamp(38px, calc(85 * var(--k)), 85px); line-height: 1.04; font-weight: 600; letter-spacing: -0.03em; }
.h1 .ln { display: block; }
/* "Run a tighter / business." is ONE gradient across both lines (the picture's muted sweep, --hl): the span is inline, so
   its background runs across both line boxes laid end to end (slice), and a forced break keeps the two lines */
.h1 .grad { display: inline; -webkit-box-decoration-break: slice; box-decoration-break: slice; }
.h1 .grad .ln { display: inline; }
.h1 .grad .ln:not(:last-child)::after { content: "\A"; white-space: pre; }
.h2 { font-size: clamp(32px, calc(44 * var(--k)), 44px); line-height: 1.15; font-weight: 600; letter-spacing: -0.024em; text-wrap: balance; }
.h3 { font-size: clamp(26px, calc(35 * var(--k)), 35px); line-height: 1.22; font-weight: 600; letter-spacing: -0.018em; text-wrap: balance; }
.statement { font-size: clamp(30px, calc(53 * var(--k)), 53px); line-height: 1.18; font-weight: 600; letter-spacing: -0.022em; text-align: center; }
.lede { font-size: 20px; line-height: 1.5; color: var(--text-2); max-width: 30em; text-wrap: pretty; }
p { text-wrap: pretty; }
.eyebrow { font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 16px; }
.eyebrow--accent { color: var(--eyebrow-accent); }
.grad { background-image: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
@supports not ((background-clip: text) or (-webkit-background-clip: text)) { .grad { background: none; color: var(--grad-solid); } }
.card-t { font-size: 19px; line-height: 1.3; font-weight: 600; color: var(--text); }
.card-p { font-size: 18px; line-height: 27px; color: var(--text-2); }

/* ── controls (dark-spec.json → geometry_1440.controls) ─────────────────── */
.btn {
  --mx: 0px; --my: 0px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 24px; border: 0; border-radius: 10px;
  background: var(--btn); color: var(--btn-label);
  font: 500 18px/1 var(--font); text-decoration: none; white-space: nowrap; cursor: pointer;
  translate: var(--mx) var(--my);
  transition: background-color .16s var(--ui), scale .1s var(--ui);
}
.btn:hover { background: var(--btn-hover); }
.btn:active { scale: .97; }
.btn-arrow { width: 16px; height: 16px; flex: none; transition: transform .16s var(--ui); }
.btn:hover .btn-arrow { transform: translateX(2px); }
.btn--nav { height: 40px; padding: 0 18px; font-size: 15px; }
/* the picture's outlined box beside Book a call: a ghost control that says what it links to (open choice 5 ★) */
.ghost {
  display: inline-flex; align-items: center; height: 48px; padding: 0 28px; border-radius: 10px;
  border: 1px solid var(--border); background: transparent; color: var(--text-2);
  font-size: 17px; line-height: 1; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: color .16s var(--ui), border-color .16s var(--ui);
}
.ghost:hover { color: var(--text); border-color: var(--text-3); }
.tag {
  display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 999px;
  font-size: 14px; line-height: 1; font-weight: 500; white-space: nowrap;
}
.tag--pill { height: 24px; background: var(--surface-3); color: var(--text-2); }
.tag--tint { height: 26px; background: var(--tint-bg); color: var(--tint-fg); }
.tag--sample { height: 26px; padding: 0 10px; font-size: 13px; background: var(--surface-3); color: var(--text); border: 1px solid var(--border); }
.pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; animation: v4-pulse 2s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes v4-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.pause-btn {
  display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; flex: none;
  border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--text-2); cursor: pointer;
  transition: color .16s var(--ui), border-color .16s var(--ui);
}
.pause-btn:hover { color: var(--text); }
.pause-btn svg { width: 16px; height: 16px; }
.pause-btn[aria-pressed="true"] .i-pause, .pause-btn:not([aria-pressed="true"]) .i-play { display: none; }
.shot-box { background: var(--screen-glass); }
.shot-box img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
img.is-missing { visibility: hidden; }                                      /* a file not yet cut shows the panel's own fill, never a broken-image mark */
/* the silk ribbon (the 390 picture's), inline SVG from the sprite: every colour a token */
.ribbon { display: block; overflow: visible; pointer-events: none; }
#rb-wave { overflow: visible; }
.rb-violet { stop-color: var(--hl-c); }
.rb-indigo { stop-color: var(--button); }
.rb-violet2 { stop-color: var(--accent-1); }
.rb-pink { stop-color: var(--hl-a); }
.rb-light { stop-color: var(--accent-2); }
.rb-glow { fill: var(--button); opacity: .5; }
.rb-shade { fill: var(--page); opacity: .32; }
.rb-edge { stroke: var(--accent-2); opacity: .5; }
/* controls that only work with JS are not shown without it */
html:not(.js) .al-bar, html:not(.js) .pause-btn, html:not(.js) .motion-toggle { display: none; }

/* ── 1 · nav: ONE fixed bar in both states (M2) ─────────────────────────── */
/* at rest it sits over panel 1's top (top = margin + 22, transparent) with its row inset at the panel's gutter, so the
   mark lands at viewport x 82 at 1440 (30 + 52) and the button 52 in from the panel's right border; once the
   frost-sentinel leaves the viewport the same bar goes to top 0, glass + blur, a hairline under it. The hero reserves
   the row, so nothing in the flow ever moves and the mark's x never changes between the two states. */
/* (the motion pass, 2026-10-08) the bar moves by `translate`, not `top`: a fixed bar sliding by `top` is a layout shift to
   the browser (CLS 0.004 measured at 1440, gates/night-motion.mjs), the same slide by translate is none, and it looks the same */
.site-header {
  position: fixed; top: 0; translate: 0 var(--nav-rest); left: 0; right: 0; z-index: 50; color: var(--text);
  background-color: transparent; border-bottom: 1px solid transparent;
  transition: translate .3s var(--ui), background-color .3s var(--ui), border-color .3s var(--ui);
}
.site-header.is-frosted {
  translate: 0 0;
  background-color: var(--nav-glass);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}
.hdr-row {
  display: flex; align-items: center; height: var(--nav-h); gap: 16px;
  width: 100%; max-width: calc(1380px + 2 * var(--margin)); margin-inline: auto;
  padding-inline: calc(var(--margin) + var(--gutter));
}
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; font-size: 19px; line-height: 1; font-weight: 600; letter-spacing: -0.01em; }
.brand .mark { width: 28px; height: 28px; flex: none; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 36px; }
.nav-links { display: flex; align-items: center; gap: 56px; margin-right: 20px;   /* the picture's link gaps and the room before the button, measured on the original: 41–42 px → 57 page px (dark round 3) */ list-style: none; }
.nav-links a { color: var(--text-2); font-size: 16px; line-height: 1; font-weight: 500; text-decoration: none; transition: color .16s var(--ui); }
.nav-links a:hover { color: var(--text); }
.menu-only, .menu-btn { display: none; }

/* ── 2 · hero: the picture's own graphic, cut from the picture ──────────── */
/* panel top → pill 125 (the fixed nav's row occupies 22–94 above it); the copy from the gutter; the graphic 708 × 741 at
   top 97, flush to the panel's inner right edge (the plant bleeds to the border as drawn); the hero 842 to the divider */
.hero { position: relative; display: flow-root; min-height: calc(842 * var(--k)); padding-top: 125px; padding-bottom: 52px; }
/* the copy column: the spec's 640 at 1440; below it (100% − 708k + 64) — it may run under the crop's 64 px left feather, which
   is plain patched fill (the laptop's desk shadow begins 82k px into the crop), never under the picture's ink */
.hero-copy { position: relative; z-index: 3; max-width: min(640px, calc(100% - 708 * var(--k) + 64px)); }
/* the four-service pill measures ≈ 603 px at 13 px (Figtree advances read from the served woff2: text 533 + 3 middot margins 36 +
   padding 32 + border 2), so its size follows k down to the spec's 390 size (12) and the two-name pill takes over under 1280 */
.hero-pill {
  display: inline-flex; align-items: center; height: 32px; padding: 0 16px; max-width: 100%;
  border: 1px solid var(--border-faint); border-radius: 999px;
  font-size: clamp(12px, calc(13 * var(--k)), 13px); line-height: 1; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); white-space: nowrap;
}
.pill-narrow { display: none; }
.hero-pill .mid { margin-inline: 6px; }                                    /* middots sit ~10 px from their words */
.hero .h1 { margin-top: 32px; }
.hero-lede { margin-top: 24px; }
.hero-cta { display: flex; align-items: center; gap: 24px; margin-top: 32px; }
.hero-art {
  position: absolute; z-index: 1; top: calc(97 * var(--k)); right: 0;
  width: calc(708 * var(--k)); height: calc(741 * var(--k)); pointer-events: none;
}
/* the crop stays opaque in its file; its left (64), top (24) and bottom (48) edges feather into the panel here, so the
   webp's noise never shows a seam against the flat fill (the right edge meets the panel border and is not feathered) */
.hero-art img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 64px), linear-gradient(180deg, transparent 0, black 24px), linear-gradient(0deg, transparent 0, black 48px);
  -webkit-mask-composite: source-in, source-in;
  mask-image: linear-gradient(90deg, transparent 0, black 64px), linear-gradient(180deg, transparent 0, black 24px), linear-gradient(0deg, transparent 0, black 48px);
  mask-composite: intersect;
}
/* the engine's glow target: the glow pool's ellipse inside the crop (page px from the panel's edges: left 779, top 622,
   492 × 210 → as fractions of the 708 × 741 crop at left 669 / top 97), extended 40 % for softness; it paints nothing */
.aura { position: absolute; left: 1.6%; top: 65.2%; width: 97.3%; height: 39.7%; pointer-events: none; }
.ribbon--hero { display: none; }
/* ── the hero screens (order item 3): two videos laid over the picture's glass ──
   The glass corners, measured on assets/hero/devices.png (the 1× render, 708 × 741) by the bezel-rim method — the bright rim
   line, the black bezel line after it, then the first glass pixel (edge = last glass pixel + 1):
     LAPTOP  (174,216) (525,216) (525,467) (174,467)  = 351 × 251; its lower-right runs BEHIND the phone from x 482 / y 289 (the
             phone body's rim), so the laptop video is clipped there; glass corner r ≈ 3.
     PHONE   (488,297) (586,297) (586,561) (488,561)  = 98 × 264; glass corner r ≈ 8; the island x 515–560 × y 297–306 is merged
             into the top bezel and is redrawn over the video in --page.
   Homography unit square → corners (x' = a·u + b·v + c, y' = d·u + e·v + f, w = g·u + h·v + 1), solved from the four points:
     laptop  a 351  b 0  c 174  d 0  e 251  f 216  g 0  h 0  → matrix3d(351,0,0,0, 0,251,0,0, 0,0,1,0, 174,216,0,1)
     phone   a 98   b 0  c 488  d 0  e 264  f 297  g 0  h 0  → matrix3d(98,0,0,0,  0,264,0,0,  0,0,1,0, 488,297,0,1)
   Both quads are axis-aligned (g = h = 0; every edge straight within 1 px), so each map is a pure scale + translate. It is
   written as the box's percentages (left c/708, top f/741, width a/708, height e/741) rather than a transform, because
   matrix3d's px translation cannot follow --k (the 708k × 741k figure) and a non-uniform matrix scale would squash the
   object-fit: cover crop of the 16:10 / 9:19.5 videos into the 1.40 / 0.37 glass. The wrapper is the img's own box at every
   width (100 % wide, 708 / 741), so the percentages hold above and below 1024. Nothing here moves the hero's layout, the img,
   the crop or the engine: the wrapper sits in the figure's own stacking context (z 1), under #stage (fixed, z 2) and the copy (z 3). */
.hero-screens { position: absolute; left: 0; top: 0; z-index: 1; width: 100%; aspect-ratio: 708 / 741; container-type: inline-size; pointer-events: none; }
.screen { position: absolute; display: block; object-fit: cover; object-position: 50% 50%; background: transparent; }
.screen--laptop { left: 24.5763%; top: 29.1498%; width: 49.5763%; height: 33.8731%; border-radius: 3px; border-radius: 0.4237cqw; clip-path: polygon(0 0, 100% 0, 100% 29.0837%, 87.7493% 29.0837%, 87.7493% 100%, 0 100%); }
.screen--phone { left: 68.9266%; top: 40.081%; width: 13.8418%; height: 35.6275%; border-radius: 8px; border-radius: 1.1299cqw; }
.screen-island { position: absolute; left: 72.7401%; top: 39.946%; width: 6.4972%; height: 1.4845%; border-radius: 999px; background: var(--page); }
/* the picture's own screens show instead: the still, motion off, reduced motion, and a file that is not there (app.js: .is-missing) */
html.shot .hero-screens, html.motion-off .hero-screens, .screen.is-missing, .screen--phone.is-missing ~ .screen-island { display: none; }
@media (prefers-reduced-motion: reduce) { .hero-screens { display: none; } }
/* the living loop: the img's own box (100 % wide, 708 / 741, the same feathered edges above 1024), under the screen videos
   (z 1), over the still; invisible until it is really playing, then it fades in over a still that is its own first frame */
.hero-loop {
  position: absolute; left: 0; top: 0; z-index: 0; display: block; width: 100%; height: auto; aspect-ratio: 708 / 741;
  object-fit: cover; opacity: 0; transition: opacity .6s var(--arrive); pointer-events: none;
  /* a plain rectangle just inside the still's feathered edges (64 left · 24 top · 48 bottom), not a soft mask: a masked
     video that the depth moves is re-masked every frame — every other frame ran long on a 1440 scroll (night-motion,
     2026-10-08). The still's own feather shows around it, and frame 0 is the still, so the seam does not show. */
  clip-path: inset(30px 0 60px 80px);
}
.hero-loop.is-on { opacity: 1; }
html.shot .hero-loop, html.motion-off .hero-loop, .hero-loop.is-missing { display: none; }
@media (prefers-reduced-motion: reduce) { .hero-loop { display: none; } }

/* ── 3 · statement ──────────────────────────────────────────────────────── */
.statement-sec { padding-top: 56px; padding-bottom: 36px; }
.statement { max-width: 1100px; margin-inline: auto; }
.statement .grad { --grad-text: var(--hl-statement); }
/* three ordered lines, each on its own line box at ≥1024 (the longest renders 1023 px at 53 px inside the 1100: 7.5 % slack;
   the type scales with --k below 1440, so the ratio holds); under 1024 the lines wrap freely */
@media (min-width: 1024px) { .statement .ln { display: block; white-space: nowrap; } }
@media (max-width: 1023px) { .statement { text-wrap: balance; } }

/* ── 4 · the automated line ─────────────────────────────────────────────── */
.al-sec { padding-bottom: 32px; }
.al {
  display: grid; grid-template-columns: minmax(0, .7fr) 1px minmax(0, 1fr); column-gap: 40px; padding: 44px 36px 40px;
  background: var(--surface); border: 1px solid var(--surface-border); border-radius: 16px;
}
.al-rule { background: var(--line); }
.al-left .eyebrow { margin-bottom: 12px; }
.al-left .h3 { margin-bottom: 24px; }
.al-step { border-bottom: 1px solid var(--line); }
.al-step:last-child { border-bottom: 0; }
.al-tab {
  display: flex; align-items: center; width: 100%; min-height: 56px; padding: 0; border: 0; background: none;
  text-align: left; color: var(--text-2); cursor: pointer;
}
.al-num { flex: none; width: 56px; font-size: 15px; line-height: 1; font-weight: 500; color: var(--text-3); font-variant-numeric: tabular-nums; }
.al-title { font-size: 19px; line-height: 1.3; font-weight: 500; }
.al-tab[aria-selected="true"] { color: var(--text); }
.al-tab[aria-selected="true"] .al-title { font-weight: 600; }
.al-bar { flex: none; width: 120px; height: 3px; margin-left: 24px; border-radius: 2px; background: var(--track); overflow: hidden; opacity: 0; transition: opacity .3s var(--ui2); }
.al-bar i { display: block; height: 100%; background: var(--grad-line); transform: scaleX(0); transform-origin: left; }
.al-tab[aria-selected="true"] .al-bar { opacity: 1; }
.al-bar i.run { animation: al-fill var(--dwell, 6s) linear forwards; }
.al.is-paused .al-bar i.run, .al.is-off .al-bar i.run { animation-play-state: paused; }
@keyframes al-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.al-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .5s var(--ui); }
.al-body > div { overflow: hidden; min-height: 0; }
.al-body p { padding: 0 0 16px 56px; font-size: 18px; line-height: 27px; color: var(--text-2); opacity: 1; transition: opacity .3s var(--ui2); }
html.js .al-step:not(.is-on) .al-body { grid-template-rows: 0fr; }
html.js .al-step:not(.is-on) .al-body p { opacity: 0; }
.al-ctl { margin-top: 20px; }
.al-now { display: none; }
.al-win { display: flex; flex-direction: column; min-width: 0; }
.al-head { display: flex; flex-wrap: wrap; align-items: center; column-gap: 24px; row-gap: 4px; min-height: 44px; padding-bottom: 6px; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1; font-weight: 500; white-space: nowrap; }
.al-who { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 38px; color: var(--text); }
.al-who::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; background: var(--btn); }
.orb { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 32% 30%, var(--accent-2), var(--hl-a) 45%, var(--button) 100%); }
.al-meta { display: inline-flex; align-items: center; gap: 8px; color: var(--text-3); }
.al-meta svg { width: 16px; height: 16px; }
.al-dots { display: none; }                                                 /* the device window's three dots: under 1024 only */
/* no fade mask: a bubble is either whole or gone. In every rest state (the still, reduced motion, motion off, no JS)
   the window grows to fit its messages (never under --log-h), so the greeting with the automated-assistant disclosure
   is always whole and first. While the call plays the window is --log-live tall; on a phone a bubble pushed past the
   top fades out whole (app.js: .is-gone). */
.al-log { --log-h: 380px; --log-live: 580px; position: relative; height: var(--log-live); overflow-y: auto; overscroll-behavior: auto; scrollbar-width: none; }
.al.is-static .al-log, html:not(.js) .al-log { height: auto; min-height: var(--log-h); overflow: visible; }
@media (min-width: 1024px) { .al.is-static .al-log, html:not(.js) .al-log { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; } }   /* the picture: the first bubble sits right under the tab row and the stack reads top-down (dark round 3) */
html.shot .al-ctl { display: none; }   /* the still: the (empty) pause control reserves no room under step 04 */
.al-msg.is-gone, .al-typing.is-gone { opacity: 0; visibility: hidden; transition: opacity .3s var(--ui2), visibility 0s .3s; }
.al-log::-webkit-scrollbar { display: none; }
.al-msgs { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px 2px 12px; }
.al-msg { max-width: 68%; }
.al-msg--line, .al-msg--caller, .al-typing { padding: 14px 20px; border-radius: 14px; font-size: 17px; line-height: 26px; }
.al-msg--line { background: var(--surface-3); border: 1px solid var(--surface-border); color: var(--text-2); }
.al-msg--caller { align-self: flex-end; background: var(--tint-bg); border: 1px solid var(--tint-border); color: var(--tint-fg); }
.al-chip { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 12px; border-radius: 999px; font-size: 14px; line-height: 1; font-weight: 500; transition: background-color .5s var(--ui2), color .5s var(--ui2); }
.al-chip--wait { background: var(--tint-bg); color: var(--tint-fg); }
.al-chip--done { height: 24px; background: var(--surface-3); color: var(--text-2); }
.al-card { padding: 14px 20px; border-radius: 14px; background: var(--surface-3); border: 1px solid var(--surface-border); font-size: 17px; line-height: 26px; color: var(--text); }
.al-card-l + .al-card-l { color: var(--text-2); }
.al-msg[hidden], .al-card-l[hidden] { display: none; }
.al-msg.enter, .al-card-l.enter { animation: v4-msg .45s var(--arrive) both; }
.al-card.enter .al-card-l { animation: v4-msg .45s var(--arrive) both; }
.al-card.enter .al-card-l + .al-card-l { animation-delay: .14s; }
@keyframes v4-msg { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.al-typing { display: inline-flex; gap: 6px; align-items: center; height: 54px; background: var(--surface-3); border: 1px solid var(--surface-border); color: var(--text-2); }
.al-typing i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: v4-type 1.2s cubic-bezier(.4,0,.6,1) infinite; }
.al-typing i:nth-child(2) { animation-delay: .15s; }
.al-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes v4-type { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.al-win.swap { animation: v4-swap .6s var(--arrive) both; }
.al-win.swap-back { animation: v4-swap-back .6s var(--arrive) both; }
@keyframes v4-swap { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes v4-swap-back { from { opacity: 0; transform: translateY(-18px) scale(.96); } to { opacity: 1; transform: none; } }
.al.is-off .pulse-dot, .al.is-off .al-typing i { animation-play-state: paused; }

/* ── 5 · operations (refs/walk-operations.png): copy + three features left, the window right ─────────────────────────────
   The picture was drawn at 1418 px for a 1380 panel: its px are read as page px × 1.0. Measured: window 748 × 594 at
   x 585 (the row ≈ 41 / 59), tab row 54 with a 2 px underline, title row 64, body padding 14, tiles 190 × 90 at pitch 100,
   the tracker card 494 wide, medallions 40 (square) / 44 (round). */
.op-sec { padding-top: 48px; padding-bottom: 56px; }
/* judge 2026-10-06 O7: the picture's window is 748 wide (x 584 → 1331, sharp); 470 : 748 of the 1218 between the gutters puts the
   window at 748 at 1440 and keeps the copy column ≥ the H2's 393 px widest line down to 1280 */
.op-a { display: grid; grid-template-columns: minmax(0, 470fr) minmax(0, 748fr); column-gap: 56px; align-items: center; }
/* O2: the picture's H2 is 56 px (cap 39 px, sharp) on three lines — "Your day," / "written up" / "before you look." — the lines are
   explicit (.ln) so the break never depends on balance */
.op-copy .h2 { font-size: clamp(40px, calc(56 * var(--k)), 56px); line-height: 1.07; letter-spacing: -0.02em; margin-bottom: 18px; max-width: 430px; }
.op-h .ln { display: block; }
/* the line at 17 / 1.6; 370 px breaks it after "request," as drawn (that line is 363.0 px in Figtree 17, + " in" 380.7) */
.op-intro { font-size: 17px; line-height: 1.6; max-width: 370px; }
.op-cta { margin-top: 28px; }
/* the eyebrow as the picture's pill: a 6 px violet dot, a 1 px border, 30 tall */
.eyebrow--pill { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; letter-spacing: .12em; margin-bottom: 22px; }
.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hl-solid); }
/* icon medallions: the picture's tinted discs and squares; every tint is a mix of two tokens (no new hue: the picture's
   green / orange medallions have no token, so the four tints are the violet family's) */
.medal { display: inline-grid; place-items: center; flex: none; vertical-align: top; width: 44px; height: 44px; border-radius: 50%; background: var(--tint-bg); border: 1px solid var(--tint-border); color: var(--focus); }
.medal svg { width: 22px; height: 22px; }
.medal--sq { width: 40px; height: 40px; border-radius: 10px; }
.medal--lg { width: 58px; height: 58px; }
.medal--lg svg { width: 26px; height: 26px; }
.medal--xs { width: 28px; height: 28px; border-radius: 8px; }
.medal--xs svg { width: 14px; height: 14px; }
.medal--a { background: color-mix(in srgb, var(--hl-c) 22%, var(--surface-2)); border-color: color-mix(in srgb, var(--hl-c) 32%, var(--surface-2)); color: var(--focus); }
.medal--b { background: color-mix(in srgb, var(--accent-2) 18%, var(--surface-2)); border-color: color-mix(in srgb, var(--accent-2) 28%, var(--surface-2)); color: var(--accent-2); }
.medal--c { background: color-mix(in srgb, var(--glow-lift) 28%, var(--surface-2)); border-color: color-mix(in srgb, var(--glow-lift) 38%, var(--surface-2)); color: var(--focus); }
.medal--d { background: color-mix(in srgb, var(--hl-a) 22%, var(--surface-2)); border-color: color-mix(in srgb, var(--hl-a) 32%, var(--surface-2)); color: var(--accent-2); }
/* the three plain-word features: icon medallion, title, one line */
.feats { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 20px; }
.op-feats { margin-top: 40px; column-gap: 20px; row-gap: 0; grid-template-rows: auto auto auto; }
.op-feats .feat { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
.feat { min-width: 0; }
.feat .medal { margin-bottom: 14px; }
.feat-t { font-size: 17px; line-height: 1.3; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.feat-p { font-size: 15px; line-height: 23px; color: var(--text-2); }
.feat--side { display: flex; gap: 14px; align-items: center; }
.feat--side .medal { margin-bottom: 0; }
/* the window: a tab row with an underline, the title row, the two views in ONE grid cell — the window is as tall as the
   taller view (Your build), so switching never moves the page; Your day keeps its rows at the top of that height */
.op-win { background: var(--surface); border: 1px solid var(--surface-border); border-radius: 16px; overflow: hidden; }
.op-strip { display: flex; align-items: center; gap: 18px; height: 52px; padding: 0 20px; border-bottom: 1px solid var(--line); }
/* the picture's bell and gear, right-aligned (refs/walk-operations.png, sharp): bell ink 15 × 16 at x 1259–1273, gear ink 16 × 16 at
   x 1294–1309 — centre pitch 35.5, 20 px between the inks. Stroke included, these symbols ink 16.5 × 19 units (bell) and 19.8 (gear)
   of 24, so a 20 px box draws 13.8 × 15.8 and 16.5 (at 18 they were 12.4 × 14.3 and 14.9); gap 16: pitch 36, ~21 px between the inks */
.op-tools { display: inline-flex; align-items: center; gap: 16px; margin-left: auto; color: var(--text-2); }
.op-tools svg { display: block; width: 20px; height: 20px; }
.seg { display: inline-flex; gap: 28px; height: 100%; }
.seg-tab { position: relative; height: 100%; padding: 0 2px; border: 0; border-radius: 0; background: transparent; color: var(--text-2); font-size: 15px; font-weight: 500; cursor: pointer; transition: color .3s var(--ui2); }
.seg-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--btn); opacity: 0; transition: opacity .3s var(--ui2); }
.seg-tab[aria-selected="true"] { color: var(--text); }
.seg-tab[aria-selected="true"]::after { opacity: 1; }
.seg-tab:focus-visible { outline-offset: -2px; }
.op-views { position: relative; display: grid; }
.op-view { grid-area: 1 / 1; min-width: 0; display: flex; flex-direction: column; transition: opacity .3s var(--ui2), visibility 0s; }
.op-view.is-off { opacity: 0; visibility: hidden; transition: opacity .3s var(--ui2), visibility 0s .3s; }
.op-head { display: flex; align-items: center; gap: 16px; min-height: 60px; padding: 0 20px; border-bottom: 1px solid var(--line); }
.op-ico { width: 24px; height: 24px; flex: none; color: var(--text-2); }
.op-title { font-size: 17px; line-height: 1.3; font-weight: 400; color: var(--text); }
.op-biz { font-weight: 600; }
.op-tags { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.op-kind { font-size: 14px; color: var(--tag-fg); white-space: nowrap; }
.op-rows { flex: 1; min-height: var(--op-h, auto); }
.op-row { display: grid; grid-template-rows: 1fr; }
.op-in { overflow: hidden; min-height: 0; }
.op-line { display: flex; align-items: center; gap: 0; min-height: 64px; padding: 8px 20px; border-top: 1px solid var(--line); }
.op-r1 .op-line { border-top: 0; }
.op-line > .op-ico { margin-right: 24px; }
.op-txt { flex: 1; min-width: 0; font-size: 17px; line-height: 26px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.op-side { display: flex; align-items: center; gap: 10px; margin-left: 16px; }
.op-confirm {
  position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 10px;
  background: var(--btn); color: var(--btn-label); font-size: 15px; font-weight: 500;
}
.op-confirm::after { content: ""; position: absolute; inset: -2px; border-radius: 12px; border: 2px solid var(--focus); opacity: 0; pointer-events: none; }
/* Your build: the picture's two-column body — four stat tiles stacked left (190 of 684), the build tracker card right */
.op-build-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(150px, 190fr) minmax(0, 494fr); gap: 16px; padding: 16px; align-items: stretch; }
/* 1fr rows (auto minimum): the four tiles are one height, and never shorter than the tallest tile's content */
.tiles { position: relative; z-index: 1; display: grid; grid-template-rows: repeat(4, 1fr); gap: 10px; }
.tile { display: flex; align-items: center; gap: 14px; min-height: 84px; padding: 12px; background: var(--surface-2); border: 1px solid var(--surface-border); border-radius: 12px; }
.tile-body { display: grid; gap: 1px; min-width: 0; }
.tile-n { font-size: 20px; line-height: 1.15; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.tile-l { font-size: 14px; line-height: 20px; color: var(--text-2); }
/* judge 2026-10-06 O1: the delta line wraps (nowrap + ellipsis on a flex row clipped it mid-word at 1440) */
.tile-d { display: flex; align-items: flex-start; gap: 4px; min-width: 0; font-size: 12px; line-height: 16px; color: var(--tint-fg); text-wrap: pretty; }
.tile-d svg { width: 12px; height: 12px; flex: none; margin-top: 2px; }
/* judge 2026-10-06 O6, measured on refs/walk-operations.png: the violet sits OUTSIDE the card — down its left edge (x 830–840:
   violet against the window's neutral ground) and under its bottom-left — so the bloom is a shadow the tiles (z 1) cover;
   inside, the ground stays flat as drawn (top-left and right edge read the same grey, within 1 level): an 18 % --button bloom inside would drop --text-2 from 4.73 to 4.08 : 1 (10 %: 4.40). A 1 px inner top highlight. */
.trk { display: flex; flex-direction: column; min-width: 0; padding: 18px 22px; background: var(--surface-2); border: 1px solid var(--surface-border); border-radius: 12px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent), -12px 14px 44px -6px color-mix(in srgb, var(--button) 30%, transparent); }
/* O10: two rows — the title and the chip, then the line under both (it no longer squeezes into the title's column at 390) */
.trk-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 4px; align-items: center; }
.trk-t { grid-column: 1; grid-row: 1; font-size: 20px; line-height: 1.2; font-weight: 600; color: var(--text); }
.trk-s { grid-column: 1 / -1; grid-row: 2; font-size: 14px; line-height: 20px; color: var(--text-2); }
.trk-chip { grid-column: 2; grid-row: 1; justify-self: end; flex: none; height: 24px; padding: 0 10px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
/* the picture's step pitch is 30 (448 → 478 → 508): 22 + 8 */
.trk-steps { list-style: none; display: grid; gap: 8px; margin-top: 14px; }
.trk-steps li { position: relative; padding-left: 24px; font-size: 15px; line-height: 22px; color: var(--text-2); }
.trk-steps li::before { content: ""; position: absolute; left: 3px; top: 7px; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid var(--text-3); }
.trk-steps li::after { content: ""; position: absolute; left: 7px; top: 19px; bottom: -9px; width: 1px; background: var(--border); }
.trk-steps li:last-child::after { display: none; }
.trk-steps li.is-now { color: var(--text); font-weight: 600; }
.trk-steps li.is-now::before { background: var(--hl-solid); border-color: var(--hl-solid); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hl-solid) 24%, transparent); }
/* O8: wraps as drawn — "…and gathering" / "what we need from you." (Figtree's ch is 8.33 px at 13 px, so 46ch = 383 px would
   break "…from" / "you." 59 px from the edge; 34ch = 283 px breaks after "gathering", 260.8 px, 175 px from the inner edge) */
.trk-note { display: block; max-width: 34ch; margin-top: 2px; font-size: 13px; line-height: 18px; font-weight: 400; color: var(--text-2); }
.act { margin-top: 12px; padding: 12px 16px; background: var(--surface-3); border: 1px solid var(--surface-border); border-radius: 10px; }
.act-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.act-t { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text); }
.act-list { display: grid; gap: 6px; margin-top: 10px; }
.act-item { display: flex; align-items: center; gap: 12px; min-width: 0; }
.act-body { flex: 1; min-width: 0; display: grid; gap: 1px; }
.act-n { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--text); }
.act-m { font-size: 12px; line-height: 16px; color: var(--text-2); }   /* wraps, never elides (O1's acceptance: no text clipped) */
/* O5: the picture's pills — one size for View all, View and Open: 4 × 10 padding, radius 6, 12 px, a 1 px edge */
.act-chip { flex: none; display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; font-size: 12px; line-height: 12px; font-weight: 500; white-space: nowrap; }
.act-chip--line { border: 1px solid var(--border); color: var(--text-2); }
.act-chip--tint { border: 1px solid var(--tint-border); background: var(--tint-bg); color: var(--tint-fg); }
.crop { position: relative; }
/* row B (refs/walk-console-portal.png): the H2 + line left and the three features right, then the console window BESIDE the
   portal phone — measured on the picture: window 938 · gap 72 · phone 231 of a 1241 row — never one over the other */
.op-b { position: relative; isolation: isolate; display: grid; gap: 40px; margin-top: 96px; }
/* C10: the picture's faint dot grid behind the third feature and the phone's top, measured on refs/walk-console-portal.png
   (sharp): the grid's pitch is 10 px in x and in y (autocorrelation peak at lag 10, both axes; not 20), a dot lifts the ground
   ~6 levels (≈ 3 % of the way to --text; 8 % at the brightest), and the field is the row's top-right corner — present from
   x ≈ 85 % of the row (none at 78 %), full from above the eyebrow to the features' foot, gone ~290 px under the eyebrow. Drawn
   as 2 px dots at 4 % of --text (--text-2 over a dot's centre stays 4.60 : 1; at 6 % it fell to 4.32) inside the right 55 %
   box, masked to that corner; under the row's content (z −1 in .op-b). The mask reads alpha only: any opaque token. */
.op-b::before {
  content: ""; position: absolute; z-index: -1; top: -48px; bottom: 0; right: calc(-1 * var(--gutter)); width: calc(55% + var(--gutter)); pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--text) 4%, transparent) 1px, transparent 1.4px) 0 0 / 10px 10px;
  -webkit-mask-image: linear-gradient(90deg, transparent 56%, var(--text) 68%), linear-gradient(180deg, var(--text) 140px, transparent 340px);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 56%, var(--text) 68%), linear-gradient(180deg, var(--text) 140px, transparent 340px);
  mask-composite: intersect;
}
/* C6 / C11, measured on refs/walk-console-portal.png: the H2 is 40 px (cap 28 px; "What I see on my side," inks 387 px = Figtree 40/700's
   389) on TWO lines broken after "side,"; its second line is 468.3 px at 40/600 (fontkit, −0.024em), so the column is 480 (11.7 px
   spare; at 472 it had 3.7) with a 32 px gap, and the three features keep 762: text columns 182.7 px (the picture's text blocks
   are 142–177 px: x 738 / 974 / 1195, sharp) where each caption is two lines at 15 px (widest line 172.5) */
.op-b-head { display: grid; grid-template-columns: minmax(0, 480fr) minmax(0, 762fr); column-gap: 32px; align-items: center; }
.op-b-copy .eyebrow { margin-bottom: 14px; }
.cp-h { font-size: clamp(32px, calc(40 * var(--k)), 40px); max-width: none; }
.cp-h .ln { display: block; }
.cp-lede { margin-top: 16px; font-size: 17px; line-height: 1.6; max-width: none; }   /* one line as drawn: 432.6 px at 17 in the 480 column */
.cp-feats, .bf-feats { gap: 20px; }
.cp-feats .feat-p, .bf-feats .feat-p { text-wrap: pretty; }
.op-b-fig { display: grid; grid-template-columns: minmax(0, 938fr) minmax(0, 231fr); column-gap: 72px; align-items: start; }
.browser { min-width: 0; background: var(--surface); border: 1px solid var(--surface-border); border-radius: 16px; overflow: hidden; }
.browser-body img { display: block; width: 100%; height: auto; }
.browser-bar { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 8px 0 14px; border-bottom: 1px solid var(--line); }
.browser-dots { display: inline-flex; gap: 7px; }
.browser-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--panel-border); }
.browser-body { padding: 16px; }
.crop--board { aspect-ratio: 1090 / 458; border-radius: 8px; overflow: hidden; }   /* the board from its H1 to "Nothing is waiting on you.", captured at a 1370 viewport (main column 1090 wide: the console's 13 px text shows at 11.1 px in the 930 px window) */
/* the phone in the picture's violet-outlined device frame: 231 × 429 as drawn, a 1 px --hl-solid line with a soft violet
   halo, the screen inset 7; its own Sample data tag on the bar */
.phone { position: relative; background: var(--page); border: 1px solid var(--hl-solid); border-radius: 32px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--hl-solid) 30%, transparent), 0 0 28px color-mix(in srgb, var(--button) 28%, transparent); }
.phone-screen { position: relative; height: 100%; border-radius: 25px; overflow: hidden; }
.phone--op { width: 100%; max-width: 260px; aspect-ratio: 231 / 457; margin-top: 18px; padding: 7px; }   /* the screen = the 40 px bar + the 390×637 portal capture scaled to the inner width (246 → 402) + 7 px padding twice: the capture ends between the build card and the Updates label, so no empty ground shows */
.phone--op .phone-screen { padding-top: 40px; background: var(--portal-ground); }   /* the portal page's own ground under the crop */
.phone--op .phone-screen img { height: auto; }
.phone--op .phone-screen::after { content: ""; position: absolute; left: 50%; bottom: 8px; width: 104px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--page) 28%, transparent); transform: translateX(-50%); }
.phone-bar { position: absolute; left: 0; right: 0; top: 0; height: 40px; display: flex; align-items: center; padding: 0 14px 0 12px; background: var(--page); }

/* ── 6 · what you get ───────────────────────────────────────────────────── */
.wyg-sec { padding-top: 52px; padding-bottom: 0; }
.wyg-sec .h2 { margin-bottom: 20px; }
.wyg-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 28px; row-gap: 12px; align-items: stretch; }  /* the picture draws four equal cards: the row takes the tallest (Campaigns) */
.wyg-group { display: none; }
.group-label { grid-row: 1; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.group-label--ca { grid-column: 1 / 4; }
.group-label--op { grid-column: 4; }
.wyg-card { grid-row: 2; min-height: 0; padding: 24px; background: var(--surface-2); border: 1px solid var(--surface-border); border-radius: 16px; transition: translate .2s var(--ui); }
.illo { position: relative; height: 140px; margin-bottom: 28px; color: var(--text); }
.illo svg { display: block; width: 100%; height: 100%; overflow: visible; }
.illo .ln-grow { transform-box: fill-box; transform-origin: left center; }
.illo .tap-card { transform-box: fill-box; transform-origin: center; }
/* the Custom-software card's glowing line: the picture's violet → white-hot → dusk sweep with a soft blur copy under it */
.illo-bar { position: absolute; left: 8px; top: 122px; width: 150px; height: 3px; border-radius: 2px; }
.illo-bar i { position: relative; display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--glow-line-a) 0%, var(--hl-b) 35%, var(--glow-line) 52%, var(--glow-line) 60%, var(--glow-line-b) 100%); transform-origin: left; }
.illo-bar i::before { content: ""; position: absolute; inset: -3px 0; border-radius: 4px; background: inherit; filter: blur(6px); opacity: .7; }
.wyg-card .card-t { margin-bottom: 12px; }
.long-rule { height: 4px; margin-top: 54px; background: linear-gradient(var(--line), var(--line)) 0 50% / 100% 1px no-repeat; }
.long-rule i { display: block; width: min(391px, 100%); height: 100%; border-radius: 2px; background: var(--rule-grad); transform: scaleX(1); transform-origin: left; }
html.mo .long-rule i { transform: scaleX(var(--rule, 0)); }
@media (max-width: 639px) { .long-rule { display: none; } }

/* ── 6b · built for fast-moving teams (copy rulings 2026-10-07, ruling 1) ── the console row's head on its own band after the
   four services: the H2 left (the row-B H2's size), the three medallion features right, the same 480 / 762 split; it stacks
   under 1280 like .op-b-head, and under 640 the features go one per line through the shared .feats / .feat rules (16 px captions) */
.bf-sec { padding-top: 48px; padding-bottom: 48px; }
.bf-head { display: grid; grid-template-columns: minmax(0, 480fr) minmax(0, 762fr); column-gap: 32px; align-items: center; }
.bf-h { font-size: clamp(32px, calc(40 * var(--k)), 40px); max-width: 12em; }

/* ── 7 · the read-through rail (as built, re-skinned) ───────────────────── */
.rail-sec { padding: 52px 0 48px; overflow-x: clip; }
.rail-head, .rail-frame { padding-inline: var(--gutter); }
.rail-head .h2 { max-width: 18em; }
.rail-frame { margin-top: 40px; }
.rail-row {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
}
.rail-row::-webkit-scrollbar { display: none; }
/* under 1024 the rail is site-copy §7's swipe row: one scroll-snap row (280 wide at 390, the next card peeking) */
.rc { flex: none; width: min(296px, calc(100vw - 2 * var(--margin) - 2 * var(--gutter) - 54px)); min-height: 0; padding: 28px; scroll-snap-align: start; background: var(--surface); border: 1px solid var(--surface-border); border-radius: 16px; transition: translate .2s var(--ui); }
.rc-group { font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.rc-ico { display: block; width: 28px; height: 28px; margin: 20px 0; color: var(--text); }
.rc .card-t { margin-bottom: 12px; }
.rail-track { height: 2px; margin-top: 28px; background: var(--track); overflow: hidden; }
.rail-track i { display: block; height: 100%; background: var(--grad-line); transform: scaleX(var(--q, 0)); transform-origin: left; }
@media (min-width: 1024px) {
  .rail-row { gap: 20px; }
  .rc { width: 400px; min-height: 0; }
  html.mo .rail-sec.is-pinned { height: calc(100svh + var(--rail-x, 0px) * 1.1); padding-block: 0; }
  /* the sticky frame is a one-column grid whose column can shrink under its content (minmax(0, 1fr)): without it the
   * frame grows to the six cards' 2500 px, the script measures no overflow and nothing pins (dark round 1, gate 3) */
  html.mo .rail-sec.is-pinned .rail-sticky { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; padding-top: 72px; }
  html.mo .rail-sec.is-pinned .rail-head, html.mo .rail-sec.is-pinned .rail-frame { min-width: 0; max-width: 100%; }
  html.mo .rail-sec.is-pinned .rail-row {
    overflow: visible; scroll-snap-type: none; margin-inline: 0; padding-inline: 0;
    transform: translate3d(calc(var(--q, 0) * var(--rail-x, 0px) * -1), 0, 0);
  }
  html.mo .rail-sec.is-pinned .rc { height: auto; }
}

/* ── 8 · work: the picture's photo cards ────────────────────────────────── */
.work-sec { padding-top: 48px; padding-bottom: 36px; }
.work-sec .h2 { margin-bottom: 24px; }
.chips { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }
.chip {
  position: relative; height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--chip-border); background: transparent;
  color: var(--chip-text); font-size: 16px; line-height: 1; font-weight: 500; cursor: pointer;
  transition: background-color .2s var(--ui), color .2s var(--ui), border-color .2s var(--ui);
}
.chip::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }   /* a 44 px hit area on a 32 px chip */
.chip:hover { color: var(--text); }
.chip[aria-pressed="true"] { background: var(--chip-on-bg); border-color: var(--chip-on-bg); color: var(--chip-on-label); }
.wk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; row-gap: 24px; }
.wk {
  display: block; padding: 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border-faint);
  color: var(--text); text-decoration: none; transition: border-color .2s var(--ui), scale .25s var(--ui), opacity .25s var(--ui);
}
.wk:hover { border-color: var(--border); }
.wk.is-hidden { display: none; }
html .wk.is-leaving, html.mo .wk.in.is-leaving { opacity: 0; scale: .96; transition: opacity .25s var(--ui), scale .25s var(--ui); }
.wk-media { display: block; aspect-ratio: 2 / 1; border-radius: 8px; overflow: hidden; background: var(--screen-glass); }
.wk-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ui); }
.wk-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name name" "town tag"; align-items: center; row-gap: 8px; padding: 20px 0 0; }
.wk-name { grid-area: name; font-size: 19px; line-height: 1.3; font-weight: 600; }
.wk-town { grid-area: town; font-size: 17px; line-height: 26px; color: var(--text-2); }
.wk-tag { grid-area: tag; display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border-faint); font-size: 14px; line-height: 1; font-weight: 500; color: var(--tag-fg); }

/* ── 9 · how it works (refs/walk-process-pricing.webp, the top): the copy column left, the four step cards right ────────────
   Measured on the picture (1418 ≈ the 1380 panel, × 1.0): copy column 58 → ~470, cards 555 → 1366 (182 wide, gap 28, 283
   tall), chip 34 × 34 r 8 top-left, medallion 58 centred, title 17/600, body 13/20 → the page's text roles (19 / 17–18). */
/* the walkthrough's medallions (P2), measured on refs/walk-process-pricing.webp: the step discs are a solid violet (median of the r 18–22
   annulus, all four alike) = the CTA violet at ~42 % over the card; the glyphs = --focus halfway to white; a faint ring 6 px
   outside (r 27–33 = the CTA violet at 15 %). The band's discs are darker (≈ 30 %) with a 1 px rim (the sampled values are in the
   2026-10-07 homepage-lane report). Mixes of tokens, no new hue. */
.how-sec, .price-sec {
  --medal-disc: color-mix(in srgb, var(--button) 42%, var(--surface));
  --medal-glyph: color-mix(in srgb, var(--focus) 50%, var(--button-label));
  --medal-ring: color-mix(in srgb, var(--button) 15%, transparent);
}
.how-sec { --how-fs: clamp(36px, calc(64 * var(--k)), 64px); padding-top: 48px; padding-bottom: 56px; }
/* 424 : 812 (was 440 : 796): the cards gain 4 px each, so step 04's "automation go live." (144.6 px at 17) fits its 147.7 px line and
   every description is two lines — the void under the short ones came from step 04's third line, not a min-height (P7) */
.how-top { display: grid; grid-template-columns: minmax(0, 424fr) minmax(0, 812fr); column-gap: 40px; align-items: start; }
.how-copy .eyebrow { margin-bottom: 18px; }
/* the H2 at the picture's size: cap 45 drawn → 64 px, two lines ("From first call" / "to live.") */
.how-h { font-size: var(--how-fs); line-height: 1.02; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 20px; }   /* P11: 700 / −0.02em */
.how-h .ln { display: block; }   /* the picture's two lines, not balance's ("From first / call to live.") */
/* the violet full stop: "live." stays ONE word (one text node, so the copy gate still reads "From first call to live."); a
   two-stop gradient clipped to the word turns violet at the period's advance. app.js measures that advance in the real font
   (--dot, px); .26em is the no-script estimate; the +.05em lands the stop inside the period's left side bearing, clear of
   the e's ink on one side and the dot's on the other. Once M3 has split the heading the word is the .wi, which carries it. */
.dot-w { --dot: .26em; }
.dot-w, .dot-w .wi { background-image: linear-gradient(90deg, var(--text) calc(100% - var(--dot) + .05em), var(--hl-solid) calc(100% - var(--dot) + .05em)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dot-w:has(.wi) { background: none; color: inherit; }
@supports not ((background-clip: text) or (-webkit-background-clip: text)) { .dot-w, .dot-w .wi { background: none; color: inherit; } }
.how-lede { max-width: 20em; }
.how-cta { margin-top: 28px; }
.how-facts { list-style: none; margin: 20px 0 0; padding: 0; }   /* the picture's check line under the button (PRICE-09) */
.how-facts li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 22px; color: var(--text-2); }
.how-facts li + li { margin-top: 10px; }   /* the second check line, copy ruling 5 (2026-10-07) */
.how-facts .chk { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--focus); --chk-tick: var(--panel-bg); }
.how-row { position: relative; }
/* P3: the picture's second eyebrow on the left eyebrow's line; under it the cards' top edge meets the H2's cap top — the H2 starts
   36 px down (18 + 18) and its cap top sits 0.16 em into its 1.02 line (Figtree: ascent .95, descent .25, cap .70) */
.how-row-eyebrow { margin-bottom: calc(18px + 0.16 * var(--how-fs)); }
.how-list { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 28px; }
.hw { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-height: 0; padding: 16px; background: var(--surface); border: 1px solid var(--surface-border); border-radius: 16px; }   /* P7: the bottom padding = the top */
/* the numbered chip top-left (34 × 34, radius 8, tinted); the numeral keeps its quarter of the row's --num gradient
   (violet, mauve, mauve, violet as drawn: each numeral shows its quarter of a strip four cards wide) */
.hw-chip { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--tint-bg); border: 1px solid var(--tint-border); }
.hw-num {
  display: block; font-size: 14px; line-height: 1; font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums;
  background-image: var(--num); background-size: 400% 100%; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hw:nth-child(1) .hw-num { background-position: 0 0; }
.hw:nth-child(2) .hw-num { background-position: 33.333% 0; }
.hw:nth-child(3) .hw-num { background-position: 66.667% 0; }
.hw:nth-child(4) .hw-num { background-position: 100% 0; }
@supports not ((background-clip: text) or (-webkit-background-clip: text)) { .hw-num { background: none; color: var(--grad-solid); } }
.hw .medal--lg { align-self: center; margin: 14px 0 22px; }
.hw .medal--lg, .price-card .medal { background: var(--medal-disc); border-color: var(--medal-disc); color: var(--medal-glyph); box-shadow: 0 0 0 6px var(--medal-ring); }
.price-card .medal { --medal-disc: color-mix(in srgb, var(--button) 30%, var(--surface)); border-color: color-mix(in srgb, var(--button) 55%, var(--surface)); }   /* P2 / P9: all three band discs one violet */
.hw-t { margin-bottom: 8px; font-size: 19px; line-height: 1.3; font-weight: 600; color: var(--text); }
.hw-p { font-size: 17px; line-height: 26px; color: var(--text-2); }
/* the four short arrows between the cards (24 wide in the 44 gap, 1.5 px, the picture's violet → pink-lavender) */
.conn { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.conn .cs1 { stop-color: var(--g1); }
.conn .cs2 { stop-color: var(--g2); }
.conn .cs3 { stop-color: var(--g3); }
/* P8: the medallion glyph's lavender (measured: the arrow core reads a little darker than the glyph only because a 1.5 px stroke anti-aliases) — one colour, no rose */
.seg-base, .seg-head { fill: none; stroke: var(--medal-glyph); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.seg-dash { fill: none; stroke: var(--button-label); stroke-width: 2.5; stroke-linecap: round; opacity: 0; }
.seg-ring { fill: none; stroke: var(--medal-glyph); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.seg-head { transform-box: fill-box; transform-origin: center; }

/* ── 10 · pricing (refs/walk-process-pricing.webp, the band): copy left, the two lists with check glyphs, Ready to start? right
   Measured: band 58 → 1366 × 230 tall, copy from x 106, list 1 from 555, dividers at 762 and 1037, the CTA column 329 wide;
   the page's text roles make the band taller (the H2 at 44, three lines). The dot field in the band's left corner is the
   picture's; drawn as a token dot on a 14 px grid, faded out by 55 % of the band. */
.price-sec { padding-top: 56px; padding-bottom: 48px; }
/* P1: intro · list · list · CTA at 1.5 : 1 : 1 : 1.15 (the lists sit in .price-cols, so the card's middle track is 2): at 1440 the
   lists are 273.5 px with 221.5 px for words — "Customer acquisition" is 184.5 px at 19 / 600, "Automated phone line" 175.1 px
   with its check at 15. P6: the picture's indigo wash, lighter at the band's left (8 % of the CTA violet → nothing by 45 %). */
.price-card { position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 2fr) minmax(0, 1.15fr); padding: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--button) 8%, transparent) 0%, transparent 45%), var(--surface); border: 1px solid var(--surface-border); border-radius: 16px; overflow: hidden; }
.price-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 55%; background: radial-gradient(circle, var(--border) 1px, transparent 1.3px) 0 0 / 14px 14px; -webkit-mask-image: radial-gradient(90% 120% at 0% 100%, var(--text) 0%, transparent 70%); mask-image: radial-gradient(90% 120% at 0% 100%, var(--text) 0%, transparent 70%); pointer-events: none; }   /* the mask only reads alpha: any opaque token */
.price-card { isolation: isolate; }   /* the P6 glow (z −1) paints over the card's ground and under its words */
.price-intro, .price-col, .price-cta { position: relative; }
.price-intro { padding: 44px 24px 44px 48px; }
/* P6: the soft violet glow where the picture draws its four-point star — between the headline block and the first list, 64 px
   short of the list column and 64 px down (the picture: star at 491, 563 in a band from 58, 500; list 1 at 555) */
.price-intro::after { content: ""; position: absolute; z-index: -1; top: 4px; right: -4px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--button) 25%, transparent), transparent); pointer-events: none; }
.price-intro .eyebrow { margin-bottom: 14px; }
/* the band's H2 is the picture's smaller one (30 drawn against the section H2s' 45–66): 38 px, three lines as drawn */
.price-h { font-size: clamp(30px, calc(38 * var(--k)), 38px); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; max-width: 12em; margin-bottom: 16px; }   /* P11 */
.price-lede { font-size: 17px; line-height: 26px; color: var(--text-2); max-width: 22em; }
.price-cols { display: grid; grid-template-columns: 1fr 1fr; }
.price-col { padding: 44px 24px 40px 28px; }
/* P4, measured: no divider after the headline; one solid hairline between the lists and one DASHED before "Ready to start?",
   both inset from the band's edges (the picture's run y 528 → 703 in a band 500 → 723) and faded at their ends; the picture's
   line core reads 1.75 : 1 on the band, so the visible token (1.50 : 1), --panel-border, not the near-invisible hairline */
.price-col + .price-col::before, .price-cta::before { content: ""; position: absolute; left: 0; top: 32px; bottom: 32px; width: 1px; pointer-events: none; }
.price-col + .price-col::before { background: linear-gradient(180deg, transparent, var(--panel-border) 18%, var(--panel-border) 82%, transparent); }
.price-cta::before { background: repeating-linear-gradient(180deg, var(--panel-border) 0 4px, transparent 4px 8px); }
.price-col .medal { margin-bottom: 16px; }
.price-head { margin-bottom: 14px; font-size: 19px; line-height: 1.3; font-weight: 600; color: var(--text); }
/* P1 / P2: 15 px items, the glyph on the first line (3 px down in its 22 px line); the check is the picture's — a solid lavender
   disc with a dark tick (sampled at r 3–4 and at the centre; values in the 2026-10-07 homepage-lane report) */
.price-list { list-style: none; display: grid; gap: 6px; }
.price-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 22px; color: var(--text-2); }
.price-list .chk { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--focus); --chk-tick: var(--surface); }
.price-cta { display: flex; flex-direction: column; align-items: flex-start; padding: 44px 40px 40px; }
.price-cta .medal { margin-bottom: 16px; }
.price-cta-t { font-size: 19px; line-height: 1.3; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.price-cta-p { font-size: 17px; line-height: 26px; color: var(--text-2); margin-bottom: 22px; }

/* ── 11 · faq: two columns, the question and answer grey as drawn ───────── */
.faq-sec { padding-top: 40px; padding-bottom: 40px; }
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 48px; align-items: start; }
.faq-grid .h2 { max-width: 7em; }
.faq-card { background: var(--surface); border: 1px solid var(--surface-border); border-radius: 16px; overflow: hidden; }
.faq-card details + details { border-top: 1px solid var(--line); }
.faq-card summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; min-height: 66px; padding: 20px 24px;
  font-size: 17px; line-height: 26px; font-weight: 500; color: var(--text-2); cursor: pointer; list-style: none;
}
.faq-card details[open] summary { padding-bottom: 12px; }
.faq-card summary::-webkit-details-marker { display: none; }
.faq-card summary:focus-visible { outline-offset: -3px; }
.plus { width: 16px; height: 16px; flex: none; margin-top: 5px; color: var(--text-3); }
.faq-card details[open] .plus { --pv: 0; }                                  /* the open row shows a −, never an × */
.faq-card details p { padding: 0 24px 16px; font-size: 17px; line-height: 26px; color: var(--text-2); }
@supports (interpolate-size: allow-keywords) {
  .faq-card details { interpolate-size: allow-keywords; }
  .faq-card details::details-content { block-size: 0; opacity: 0; overflow: hidden; transition: block-size .4s var(--arrive), opacity .4s var(--arrive), content-visibility .4s allow-discrete; }
  .faq-card details[open]::details-content { block-size: auto; opacity: 1; }
}

/* ── 12 · pick a time to talk: frame left, text right, no ribbon at 1440 ─ */
.book-sec { padding-top: 48px; padding-bottom: 72px; }
.book-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 64px; align-items: center; max-width: 900px; }
/* 4:7 as drawn; until Dominic's photo exists it holds a soft glow field and no words (the engine's second scene drifts
   over it; the still shows the CSS field alone) */
.photo-frame {
  width: 200px; height: 350px; border-radius: 16px; border: 1px solid var(--surface-border);
  background: radial-gradient(70% 48% at 50% 44%, var(--glow) 0%, transparent 100%), var(--surface-2);
}
.book-ribbon { display: none; }
.book-h { margin-bottom: 20px; }
.book-lines > span { display: block; font-size: 18px; line-height: 32px; color: var(--text-2); }
.book-text .btn { margin-top: 24px; }

/* ── 13 · footer: the panel's last block ────────────────────────────────── */
.site-footer { position: relative; padding: 72px var(--gutter) 52px; color: var(--text); }
.f-grid { display: grid; grid-template-columns: 4fr 2fr 2fr 2fr 2fr; gap: 32px; }
.f-head { margin-bottom: 20px; font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.f-col ul { list-style: none; display: grid; gap: 0; }
.f-col li a, .f-plain { font-size: 15px; line-height: 30px; color: var(--text-3); text-decoration: none; transition: color .3s var(--ui2); }
.f-col li a:hover { color: var(--text); }
.f-bottom { display: flex; align-items: center; gap: 24px; margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); font-size: 15px; line-height: 24px; color: var(--text-3); }
.f-bottom p:nth-child(2) { margin-left: auto; }
.motion-toggle {
  padding: 0; border: 0; background: transparent; color: var(--text-3); font-size: 15px; line-height: 24px; font-weight: 400;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border); cursor: pointer; transition: color .16s var(--ui);
}
.motion-toggle:hover { color: var(--text); }
.motion-toggle[aria-pressed="true"] { color: var(--text); text-decoration-color: currentColor; }

/* ── fine pointers: hover lifts ─────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .wyg-card:hover, .rc:hover { translate: 0 -4px; }
  .wk:hover .wk-media img { transform: scale(1.02); }
}

/* ══ motion states ══════════════════════════════════════════════════════
   html.mo = JS on, motion allowed, not a still. Every hidden-before-reveal state lives under it, so the page
   reads in full with JS off, under reduced motion, with motion off, and in ?shot=1. */
@keyframes v4-failsafe { to { visibility: visible; } }
html.mo [data-words]:not(.is-split) { visibility: hidden; animation: v4-failsafe 0s 2.5s forwards; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.wi { display: inline-block; }
html.mo .wi { transform: translateY(125%); opacity: 0; transition: transform .8s var(--arrive), opacity .8s var(--arrive); transition-delay: var(--d, 0ms); }
html.mo [data-words].in .wi { transform: none; opacity: 1; }
.grad.is-split { background: none; color: inherit; }
.grad.is-split .wi { background-image: var(--grad-text); background-repeat: no-repeat; background-size: var(--gw, 100%) var(--gh, 100%); background-position: var(--gx, 0) var(--gy, 0); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* M8: the statement's words light with the scroll, from --unlit to --text; the closing words from grey to the sweep */
html.mo .statement .wi { color: color-mix(in oklab, var(--text) calc(var(--lit, 0) * 100%), var(--unlit)); }
html.mo .statement .grad .wi { color: transparent; filter: grayscale(calc(1 - var(--lit, 0))) opacity(calc(.35 + .65 * var(--lit, 0))); }

/* M4 fade-rise (blocks 620 ms / 14 px; windows and the hero graphic 900 ms / 28 px) */
html.mo [data-rise], html.mo [data-hero-rise] { opacity: 0; transform: translateY(14px); transition: opacity .62s var(--arrive), transform .62s var(--arrive); transition-delay: var(--d, 0ms); }
html.mo [data-rise="win"], html.mo [data-dev] { transform: translateY(28px); transition-duration: .9s; }
html.mo [data-rise].in, html.mo .hero.in [data-hero-rise] { opacity: 1; transform: none; }
html.mo .btn[data-rise], html.mo .btn[data-hero-rise] { transition: opacity .62s var(--arrive) var(--d, 0ms), transform .62s var(--arrive) var(--d, 0ms), background-color .16s var(--ui) 0ms, scale .1s var(--ui) 0ms; }
html.mo .ghost[data-hero-rise] { transition: opacity .62s var(--arrive) var(--d, 0ms), transform .62s var(--arrive) var(--d, 0ms), color .16s var(--ui) 0ms, border-color .16s var(--ui) 0ms; }
html.mo .wyg-card[data-rise], html.mo .rc[data-rise] { transition: opacity .62s var(--arrive) var(--d, 0ms), transform .62s var(--arrive) var(--d, 0ms), translate .2s var(--ui) 0ms; }
html.mo .price-list li { opacity: 0; transform: translateY(14px); transition: opacity .62s var(--arrive), transform .62s var(--arrive); transition-delay: var(--d, 0ms); }
html.mo .price-card.in .price-list li { opacity: 1; transform: none; }
html.mo .wk { opacity: 0; transform: translateY(14px); transition: opacity .62s var(--arrive) var(--d, 0ms), transform .62s var(--arrive) var(--d, 0ms), border-color .2s var(--ui) 0ms, scale .25s var(--ui) 0ms; }
html.mo .wk.in { opacity: 1; transform: none; }
html.mo .wk.in.is-leaving { opacity: 0; transition: opacity .25s var(--ui), scale .25s var(--ui); }

/* M20 footer columns un-blur */
html.mo .f-col { opacity: 0; filter: blur(4px); transform: translateY(-8px); transition: opacity .8s var(--arrive), filter .8s var(--arrive), transform .8s var(--arrive); transition-delay: var(--d, 0ms); }
html.mo .site-footer.in .f-col { opacity: 1; filter: none; transform: none; }

/* M13 the Operations window's day, 15.0 s (beats 0.6 / 1.8 / 3.4 / 5.0 / 6.6 / 8.4, hold, fade at 13.8) */
html.mo .op-win.is-live .op-row { grid-template-rows: 0fr; opacity: 0; }
html.mo .op-win.is-live .op-done { opacity: 0; }
/* the Your build live feed (app.js FEED): a row that has not arrived keeps its space and is see-through; arriving, it
   slides up into place and glows once; the tile it bumps lifts its number in the accent for a beat */
html.mo .op-win.is-feed .act-item { transition: opacity .5s var(--arrive), translate .5s var(--arrive), background-color .7s var(--ui); border-radius: 10px; }
html.mo .op-win.is-feed .act-item.is-out { opacity: 0; translate: 0 10px; transition-duration: .3s, .3s, 0s; }
html.mo .op-win.is-feed .act-item.is-new { background-color: color-mix(in srgb, var(--accent-1) 14%, transparent); }
html.mo .op-win.is-feed .tile-n { transition: color .5s var(--ui); }
html.mo .op-win.is-feed .tile.is-bump .tile-n { color: var(--accent-2); }
html.mo .op-win.is-feed .tile-d { transition: opacity .4s var(--ui); }
html.mo .op-win.is-feed .tile.is-pending .tile-d { opacity: .28; }
html.mo .op-win.is-playing .op-r1 { animation: op-r1 15s infinite; }
html.mo .op-win.is-playing .op-r2 { animation: op-r2 15s infinite; }
html.mo .op-win.is-playing .op-r3 { animation: op-r3 15s infinite; }
html.mo .op-win.is-playing .op-r4 { animation: op-r4 15s infinite; }
html.mo .op-win.is-playing .op-done { animation: op-pill 15s infinite; }
html.mo .op-win.is-playing .op-confirm { animation: op-confirm 15s infinite; }
html.mo .op-win.is-playing .op-confirm::after { animation: op-ring 15s infinite; }
html.mo .op-win.is-playing:is(.is-paused, .is-off) :is(.op-row, .op-done, .op-confirm), html.mo .op-win.is-playing:is(.is-paused, .is-off) .op-confirm::after { animation-play-state: paused; }
.is-off .pulse-dot, .is-paused .pulse-dot { animation-play-state: paused; }
@keyframes op-r1 {
  0%, 4% { grid-template-rows: 0fr; opacity: 0; transform: translateY(10px); animation-timing-function: cubic-bezier(.23,1,.32,1); }
  7.333%, 92% { grid-template-rows: 1fr; opacity: 1; transform: none; animation-timing-function: cubic-bezier(.23,1,.32,1); }
  95% { grid-template-rows: 1fr; opacity: 0; transform: none; }
  95.01%, 100% { grid-template-rows: 0fr; opacity: 0; transform: translateY(10px); }
}
@keyframes op-r2 {
  0%, 22.667% { grid-template-rows: 0fr; opacity: 0; transform: translateY(10px); animation-timing-function: cubic-bezier(.23,1,.32,1); }
  26%, 92% { grid-template-rows: 1fr; opacity: 1; transform: none; animation-timing-function: cubic-bezier(.23,1,.32,1); }
  95% { grid-template-rows: 1fr; opacity: 0; transform: none; }
  95.01%, 100% { grid-template-rows: 0fr; opacity: 0; transform: translateY(10px); }
}
@keyframes op-r3 {
  0%, 33.333% { grid-template-rows: 0fr; opacity: 0; transform: translateY(10px); animation-timing-function: cubic-bezier(.23,1,.32,1); }
  36.667%, 92% { grid-template-rows: 1fr; opacity: 1; transform: none; animation-timing-function: cubic-bezier(.23,1,.32,1); }
  95% { grid-template-rows: 1fr; opacity: 0; transform: none; }
  95.01%, 100% { grid-template-rows: 0fr; opacity: 0; transform: translateY(10px); }
}
@keyframes op-r4 {
  0%, 56% { grid-template-rows: 0fr; opacity: 0; transform: translateY(10px); animation-timing-function: cubic-bezier(.23,1,.32,1); }
  59.333%, 92% { grid-template-rows: 1fr; opacity: 1; transform: none; animation-timing-function: cubic-bezier(.23,1,.32,1); }
  95% { grid-template-rows: 1fr; opacity: 0; transform: none; }
  95.01%, 100% { grid-template-rows: 0fr; opacity: 0; transform: translateY(10px); }
}
@keyframes op-pill { 0%, 12% { opacity: 0; animation-timing-function: cubic-bezier(.4,0,.2,1); } 15.333%, 100% { opacity: 1; } }
@keyframes op-confirm {
  0%, 44% { background-color: var(--btn); animation-timing-function: cubic-bezier(.4,0,.2,1); }
  45.667% { background-color: var(--btn-hover); animation-timing-function: cubic-bezier(.4,0,.2,1); }
  47.333%, 100% { background-color: var(--btn); }
}
@keyframes op-ring {
  0%, 43.99% { opacity: 0; transform: scale(1); }
  44% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(.23,1,.32,1); }
  48%, 100% { opacity: 0; transform: scale(1.25); }
}

/* M15 the card drawings, 6.0 s, only while a card is ≥60 % on screen (paused otherwise) */
html.mo .wyg-card .ln-grow { animation: illo-grow 6s cubic-bezier(.23,1,.32,1) infinite paused; animation-delay: calc(var(--i, 0) * 120ms); }
html.mo .wyg-card .arc { animation: illo-arc 6s cubic-bezier(.23,1,.32,1) infinite paused; animation-delay: calc(var(--i, 0) * 300ms); }
html.mo .wyg-card[data-illo="camp"] .arc { animation-name: illo-arc-late; }
html.mo .wyg-card .tap-card { animation: illo-tap 6s cubic-bezier(.23,1,.32,1) infinite paused; }
html.mo .wyg-card .cursor { animation: illo-cursor 6s cubic-bezier(.23,1,.32,1) infinite paused; transform-box: fill-box; transform-origin: top left; }
html.mo .wyg-card .illo-bar i { animation: illo-bar 6s cubic-bezier(.33,1,.68,1) infinite paused; animation-delay: .6s; }
html.mo .wyg-card.is-vis .illo :is(.ln-grow, .arc, .tap-card, .cursor), html.mo .wyg-card.is-vis .illo-bar i { animation-play-state: running; }
@keyframes illo-grow { 0% { transform: scaleX(0); } 8%, 88% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }
@keyframes illo-arc { 0% { opacity: .25; } 5%, 80% { opacity: 1; } 92%, 100% { opacity: .25; } }
@keyframes illo-arc-late { 0%, 20% { opacity: .25; } 25%, 80% { opacity: 1; } 92%, 100% { opacity: .25; } }
@keyframes illo-tap { 0%, 10% { transform: scale(1); } 12% { transform: scale(.96); } 15.333%, 100% { transform: scale(1); } }
@keyframes illo-cursor { 0% { transform: translate(14px, 14px); opacity: 0; } 8% { transform: translate(0, 0); opacity: 1; } 12% { transform: translate(0, 0) scale(.92); } 15%, 85% { transform: none; opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes illo-bar { 0% { transform: scaleX(0); } 20%, 88% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }

/* M9 / M10 the connector: each arrow drawn once in turn, then a dash that never visibly restarts */
html.mo .conn .seg-base { stroke-dasharray: var(--L) var(--L); stroke-dashoffset: var(--L); transition: stroke-dashoffset 1.4s var(--slow, cubic-bezier(.5,0,.2,1)); transition-delay: var(--dd, 0ms); }
html.mo .conn.is-drawn .seg-base { stroke-dashoffset: 0; }
html.mo .conn .seg-head { opacity: 0; transform: scale(.9); transition: opacity .5s var(--arrive), transform .5s var(--arrive); transition-delay: var(--hd, 0ms); }
html.mo .conn.is-drawn .seg-head { opacity: 1; transform: none; }
html.mo .how-row .hw { opacity: 0; transform: translateY(14px); transition: opacity .62s var(--arrive), transform .62s var(--arrive); transition-delay: var(--d, 0ms); }
html.mo .how-row.is-drawn .hw { opacity: 1; transform: none; }
html.mo .conn.is-pulsing .seg-dash { opacity: 1; stroke-dasharray: 28 var(--L); stroke-dashoffset: 28; animation: conn-dash 4.5s var(--slow) infinite; animation-delay: var(--pd, 0ms); }
html.mo .conn.is-pulsing .seg-ring { animation: conn-ring 4.5s infinite; animation-delay: var(--pd, 0ms); }
html.mo .conn.is-off .seg-dash, html.mo .conn.is-off .seg-ring { animation-play-state: paused; }
@keyframes conn-dash { 0% { stroke-dashoffset: 28; } 36%, 100% { stroke-dashoffset: calc(var(--L) * -1); } }
@keyframes conn-ring {
  0%, 26.9% { opacity: 0; transform: scale(1); }
  27% { opacity: .6; transform: scale(1); animation-timing-function: cubic-bezier(.23,1,.32,1); }
  62%, 100% { opacity: 0; transform: scale(1.4); }
}

/* M22 the phone menu */
@keyframes v4-menu { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ══ reduced motion, motion off, and the still (?shot=1) ═══════════════
   The same overrides twice: once for the system setting, once for the page's own toggle. */
@media (prefers-reduced-motion: reduce) {
  html.js .al-step:not(.is-on) .al-body, .al-body { grid-template-rows: 1fr; transition: none; }
  html.js .al-step:not(.is-on) .al-body p, .al-body p { opacity: 1; transition: none; }
  .al-bar, .pause-btn { display: none; }
  html.js .al-ctl .al-now { row-gap: 16px; }
  html.js .al-now .al-now-item { grid-area: auto; opacity: 1; transform: none; visibility: visible; transition: none; }
  .pulse-dot, .al-typing i { animation: none; }
  .al-win.swap, .al-win.swap-back, .al-msg.enter, .al-card-l.enter { animation: none; }
  .op-view, .op-view.is-off, .seg-tab, .seg-tab::after, .al-tab, .chip, .al-chip { transition: none; }
  .faq-card details::details-content { transition: none; }
  .plus, .site-header, .wyg-card, .rc, .wk, .wk-media img, .ghost { transition: none; }
  .site-header.is-open .nav { animation: none; }
  .wyg-card:hover, .rc:hover { translate: none; }
  .wk:hover .wk-media img { transform: none; }
}
html.motion-off .al-step:not(.is-on) .al-body, html.motion-off .al-body { grid-template-rows: 1fr; transition: none; }
html.motion-off .al-step:not(.is-on) .al-body p, html.motion-off .al-body p { opacity: 1; transition: none; }
html.motion-off .al-bar, html.motion-off .pause-btn { display: none; }
html.motion-off .al-ctl .al-now { row-gap: 16px; }
html.motion-off .al-now .al-now-item { grid-area: auto; opacity: 1; transform: none; visibility: visible; transition: none; }
html.motion-off .pulse-dot, html.motion-off .al-typing i { animation: none; }
html.motion-off .al-win.swap, html.motion-off .al-win.swap-back, html.motion-off .al-msg.enter, html.motion-off .al-card-l.enter { animation: none; }
html.motion-off .op-view, html.motion-off .op-view.is-off, html.motion-off .seg-tab, html.motion-off .seg-tab::after, html.motion-off .al-tab, html.motion-off .chip, html.motion-off .al-chip { transition: none; }
html.motion-off .faq-card details::details-content { transition: none; }
html.motion-off .plus, html.motion-off .site-header, html.motion-off .wyg-card, html.motion-off .rc, html.motion-off .wk, html.motion-off .wk-media img, html.motion-off .ghost { transition: none; }
html.motion-off .site-header.is-open .nav { animation: none; }
html.motion-off .wyg-card:hover, html.motion-off .rc:hover { translate: none; }
html.motion-off .wk:hover .wk-media img { transform: none; }

/* the still: every reveal done, loops parked, autoline on 03 with its bar full, the rail laid flat at ≥1024 */
html.shot .pause-btn { display: none; }
html.shot .pulse-dot, html.shot .al-typing i { animation: none; }
html.shot *, html.shot *::before, html.shot *::after { transition: none !important; }
html.shot .al-tab[aria-selected="true"] .al-bar i { transform: scaleX(1); }
@media (min-width: 1024px) {
  html.shot .rail-row { flex-wrap: wrap; overflow: visible; scroll-snap-type: none; margin-inline: 0; padding-inline: 0; }
  html.shot .rc { width: calc((100% - 40px) / 3); }
}
html.shot .rail-track { display: none; }

/* ══ below 1024: the stacked panels ═════════════════════════════════════ */
@media (max-width: 1023px) {
  html { scroll-padding-top: 72px; }
  /* nav → the M22 panel */
  .hdr-row { height: auto; min-height: var(--nav-h); flex-wrap: wrap; column-gap: 12px; row-gap: 0; }
  .brand { font-size: 17px; gap: 10px; min-height: 44px; }
  .brand .mark { width: 24px; height: 24px; }
  .menu-btn {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    width: 44px; height: 44px; margin-left: auto; margin-right: -10px; padding: 0; border: 0; background: transparent; cursor: pointer;
  }
  .menu-btn span { display: block; width: 20px; height: 2px; border-radius: 1px; background: var(--text); transition: transform .22s var(--arrive), opacity .22s var(--arrive); }
  .site-header.is-open .menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-header.is-open .menu-btn span:nth-child(2) { opacity: 0; }
  .site-header.is-open .menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav { display: none; order: 3; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; margin-left: 0; padding: 4px 0 20px; }
  .site-header.is-open { background-color: var(--panel-bg); border-bottom-color: var(--panel-line); }
  .site-header.is-open .nav { display: flex; animation: v4-menu .22s var(--arrive); }
  .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-links li { border-bottom: 1px solid var(--line); }
  .nav-links li.menu-rule { border-top: 1px solid var(--line); margin-top: 12px; }
  .nav-links { gap: 0; margin-right: 0; }   /* the phone menu is a list of 52 px rows; the desktop link gap does not apply */
  .nav-links a { display: flex; align-items: center; min-height: 52px; font-size: 18px; color: var(--text); }
  .menu-only { display: block; }
  .btn--nav { width: 100%; height: 52px; margin-top: 20px; font-size: 18px; }

  /* hero: the copy, then the graphic flush to the panel's right border, its bottom on the divider (geometry_390.hero) */
  .hero { min-height: 0; padding-top: 76px; padding-bottom: 0; }
  .hero-copy { max-width: 640px; }
  .hero .h1 { margin-top: 20px; }
  .hero-lede { margin-top: 20px; font-size: 17px; line-height: 26px; max-width: none; }
  .hero-cta { display: block; margin-top: 24px; }
  .hero-cta .btn { width: 100%; height: 52px; }
  .hero-cta .ghost { display: none; }
  /* the box is 350 × 324 and CLIPS the picture's lower 42 px (the pool's tail), so the feather must sit on the box, not on the
     img: masked on the img, its bottom 24 px fade was clipped away with the tail and the pool ended in a hard line (Δ 42 from
     the panel at the cut row) on the hero divider. Left 37 / top 12 / bottom 24, intersected, the right edge unfeathered. */
  .hero-art {
    position: relative; top: auto; right: auto; width: clamp(350px, 58%, 560px); height: auto; aspect-ratio: 350 / 324;
    margin: 28px calc(-1 * var(--gutter)) 0 auto; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, black 37px), linear-gradient(180deg, transparent 0, black 12px), linear-gradient(0deg, transparent 0, black 24px);
    -webkit-mask-composite: source-in, source-in;
    mask-image: linear-gradient(90deg, transparent 0, black 37px), linear-gradient(180deg, transparent 0, black 12px), linear-gradient(0deg, transparent 0, black 24px);
    mask-composite: intersect;
  }
  .hero-art img, .hero-loop { height: auto; -webkit-mask-image: none; mask-image: none; }
  .hero-loop { clip-path: none; }   /* below 1024 the figure itself feathers its edges */
  .aura { top: 65%; height: auto; bottom: 0; }
  /* the 390 picture's silk ribbon crosses behind the devices and bleeds to the panel's edges (the panel clips) */
  .ribbon--hero { display: none; }   /* dark round 1: behind the opaque hero crop only a stub of the ribbon showed; the dark picture has nothing purple left of the laptop */

  .statement-sec { padding-top: 44px; padding-bottom: 28px; }

  /* the automated line: the list over the window inside one card */
  .al-sec { padding-bottom: 24px; }
  .al { grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: 20px; padding: 24px 20px; }
  .al-rule { display: none; }
  .al-head {
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "dots note" "who call"; align-items: center;
    column-gap: 20px; row-gap: 12px; min-height: 0; padding-bottom: 12px; white-space: nowrap;
  }
  .al-dots { grid-area: dots; display: inline-flex; align-items: center; gap: 7px; height: 26px; }
  .al-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--panel-border); }
  .al-who { grid-area: who; justify-self: start; height: 32px; }
  .al-who::after { bottom: -5px; }
  .al-meta--call { grid-area: call; justify-self: start; }
  .al-meta--note { grid-area: note; justify-self: end; max-width: 100%; min-height: 26px; height: auto; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--chip-border); font-size: 13px; line-height: 1.25; white-space: normal; text-align: right; }   /* dark round 2: the chip wraps inside the window; a Concept marking is never clipped */

  /* operations: stacked (copy, then the window); the Your build body one column with the tiles two-up; row B stacks the
     head, the window and the phone (centred) — nothing overlaps at any width */
  .op-a { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .op-feats { margin-top: 32px; }
  .op-build-body { grid-template-columns: minmax(0, 1fr); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .op-b { margin-top: 64px; gap: 28px; }
  .op-b::before { display: none; }   /* C10: the field is the 1440 row's top-right corner; stacked, that box lands behind the headline */
  .op-b-head { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .op-b-fig { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .phone--op { margin: 0 auto; max-width: 280px; }

  /* what you get, how it works, pricing, faq, close */
  .wyg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wyg-grid .group-label { grid-row: auto; grid-column: 1 / -1; }
  .wyg-card { grid-row: auto; min-height: 0; }
  .how-list { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .hw { padding: 20px; }   /* P10: 20 top, 20 bottom, no min-height */
  .hw .medal--lg { align-self: flex-start; margin: 14px 0 18px; }
  .price-intro { padding: 32px 24px 28px; }
  .price-col { padding: 28px 24px; }
  .price-cta { padding: 28px 24px 32px; }
  .faq-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .faq-grid .h2 { max-width: none; }
  .book-row { display: block; max-width: none; }
  .photo-frame { display: none; }
  /* the 390 picture's closing card carries the ribbon at its top: across the section, panel edge to panel edge */
  .book-ribbon { display: block; position: relative; height: 160px; margin: -48px calc(-1 * var(--gutter)) 16px; overflow: hidden; }
  .book-ribbon .ribbon { position: absolute; inset: 0; width: 100%; height: 100%; }
  .book-h { margin-bottom: 14px; }
  .book-text .btn { width: 100%; }

  /* footer: the two service columns side by side, LEGAL under them; COMPANY is in the menu */
  .site-footer { padding-top: 56px; padding-bottom: 40px; }
  .f-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .f-brand { grid-column: 1 / -1; }
  .f-company { display: block; }   /* dark round 1: COMPANY beside LEGAL on the second row (2×2), nothing left alone */
  .f-head { font-size: 11px; letter-spacing: .1em; }
  .f-col li a, .f-plain { display: flex; align-items: center; min-height: 44px; font-size: 17px; line-height: 28px; }
  .f-bottom { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 32px; font-size: 16px; }
  .f-bottom p:nth-child(2) { margin-left: 0; }
  .motion-toggle { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; }
}

/* the four-service pill is ≈ 562 px at its 12 px floor (measured from the font, see .hero-pill); the hero copy column is
   0.487 × vw − 41 px between 1024 and 1439 (582 at 1280, 457 at 1024), so under 1280 the two-name pill (site-copy §2, the
   390 words) takes over — at 1280 the wide pill would have 20 px to spare, at 1200 it would overflow its own border */
@media (max-width: 1279px) {
  .pill-wide { display: none; }
  .pill-narrow { display: inline; }
  /* how it works: under 1280 the four cards would be ≤ 130 px beside the copy column, so the copy sits above the row */
  .how-top { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  /* operations: the three features one under the other (medallion beside the words) in the narrower copy column; row B's
     head stacks (copy, then the three features across the full width); the pricing band stacks (copy · lists two-up · CTA) */
  .op-feats { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 18px; margin-top: 36px; }
  /* O9: the medallion in its own 44 px column, the title on its own line, the body under it — never icon | title | body in a row */
  .op-feats .feat { display: grid; grid-row: auto; grid-template-rows: none; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: start; }
  .op-feats .feat .medal { grid-column: 1; grid-row: 1 / span 2; margin-bottom: 0; }
  .op-feats .feat-t, .op-feats .feat-p { grid-column: 2; }
  .how-row-eyebrow { margin-bottom: 16px; }
  .op-b-head { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .bf-head { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .bf-h { max-width: none; }
  .price-card { grid-template-columns: minmax(0, 1fr); }
  .price-intro { padding: 36px 28px 32px; }
  .price-cols { border-top: 1px solid var(--line); }
  .price-col { padding: 28px 28px; }
  .price-cta { border-left: 0; border-top: 1px solid var(--line); padding: 28px 28px 32px; }
  .price-cta::before, .price-intro::after { display: none; }
}

/* ══ phone (< 640, designed at 390: 12 px margins, panel 366, gutter 16) ═ */
@media (max-width: 639px) {
  .panel { border-radius: 12px; }
  .hero-pill { height: 30px; padding: 0 14px; font-size: 12px; letter-spacing: .08em; }
  .lede { font-size: 17px; line-height: 26px; }
  .hero .h1 { line-height: 1.05; }

  /* the automated line: the tabs as a chip row that wraps (no sideways scroll), the one step block, the window */
  .al-left .h3 { margin-bottom: 20px; }
  .al-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
  .al-step { flex: none; border: 0; }
  .al-tab {
    min-height: 44px; height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--chip-border);
    color: var(--chip-text); white-space: nowrap;
    transition: background-color .3s var(--ui2), color .3s var(--ui2), border-color .3s var(--ui2);
  }
  .al-tab .al-num, .al-tab .al-bar { display: none; }
  .al-tab .al-title, .al-tab[aria-selected="true"] .al-title { font-size: 16px; line-height: 1; font-weight: 500; }
  .al-tab[aria-selected="true"] { background: var(--chip-on-bg); border-color: var(--chip-on-bg); color: var(--chip-on-label); }
  .al-body { display: none; }
  .al-ctl { display: flex; align-items: flex-start; gap: 12px; margin: 20px 0 0; }
  .al-now { display: grid; row-gap: 16px; flex: 1; min-width: 0; }
  html.js .al-now { row-gap: 0; }
  html.js .al-now-item {
    grid-area: 1 / 1; opacity: 0; transform: translateY(10px); visibility: hidden;
    transition: opacity .35s var(--arrive), transform .35s var(--arrive), visibility 0s .35s;
  }
  html.js .al-now-item.is-on { opacity: 1; transform: none; visibility: visible; transition: opacity .35s var(--arrive) .35s, transform .35s var(--arrive) .35s, visibility 0s .35s; }
  html.js .al-now-item.is-out { transform: translateY(-8px); }
  .al-now-h { display: flex; align-items: baseline; font-size: 19px; line-height: 26px; font-weight: 600; color: var(--text); }
  .al-now-h .al-num { width: 40px; font-size: 16px; }                      /* inside a <p> on a phone: 16 is the body floor (gate 6) */
  .al-now-b { margin-top: 6px; padding-left: 40px; font-size: 17px; line-height: 26px; color: var(--text-2); }
  .pause-btn { width: 44px; height: 44px; border-radius: 10px; }
  /* the window is the card's bottom block, the card's full width (the 390 picture's device window): 292 px inside for the
     three-dot row and its 210 px note chip */
  .al-win { margin: 4px -20px -24px; padding: 16px 20px 20px; border-radius: 0 0 15px 15px; background: var(--surface-2); border-top: 1px solid var(--surface-border); }
  .al-log { --log-h: 0px; --log-live: 360px; }   /* the still fits its bubbles; the live call keeps a 360 window */
  @media (max-width: 359px) { .al-meta--note { white-space: normal; height: auto; min-height: 26px; line-height: 1.25; padding: 3px 10px; text-align: right; } }
  .al-msg { max-width: 86%; }
  .al-msgs { padding-top: 20px; }
  .al-msg--line, .al-msg--caller, .al-card { font-size: 16px; line-height: 24px; }

  /* operations: the features one under the other (medallion beside the words), the button full width; the window's rows two-line */
  .op-cta .btn { width: 100%; }
  .feats { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .feat { display: flex; gap: 14px; align-items: flex-start; }
  .feat .medal { margin-bottom: 0; }
  .feat-p { font-size: 16px; line-height: 24px; }
  .op-feats .feat-t { margin-bottom: 4px; font-size: 16px; line-height: 22px; }
  .op-tools { display: none; }   /* the bell and the gear are 1440 pictures; the 334 px strip keeps the tabs and the pause */
  .act-list { gap: 12px; }   /* O11 */
  .op-strip { height: 52px; }
  .seg-tab { font-size: 16px; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .trk { padding: 18px 16px; }
  .trk-steps li { font-size: 16px; line-height: 24px; }
  .trk-note { display: none; }
  .act-m { white-space: normal; }
  .crop--board { aspect-ratio: 430 / 517; }   /* under 640 the board is the console's own phone layout (captured at a 430 viewport), H1 to "Nothing is waiting on you." */
  .browser-body { padding: 12px; }
  .phone--op { max-width: 236px; }
  .how-h { max-width: none; }
  .how-cta .btn { width: 100%; }
  .op-head { flex-wrap: wrap; padding: 14px 16px; gap: 6px 12px; }
  .op-tags { margin-left: 0; justify-content: flex-start; flex-basis: 100%; }
  .op-line { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; row-gap: 10px; align-items: start; padding: 14px 16px; }
  .op-line > .op-ico { margin: 1px 0 0; }
  .op-txt { font-size: 16px; line-height: 24px; }
  .op-sep { display: none; }
  .op-t1, .op-t2 { display: block; }
  .op-side { grid-column: 2; justify-content: flex-end; margin-left: 0; }
  .op-confirm { font-size: 16px; }
  .op-build-body { padding: 16px; }

  /* what you get: one column, the group name inside each card */
  .wyg-sec { padding-top: 40px; }
  .bf-sec { padding-top: 40px; padding-bottom: 40px; }
  .wyg-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .wyg-grid .group-label { display: none; }
  .wyg-card { padding: 20px; }
  .wyg-group { display: block; margin-bottom: 14px; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
  .illo { height: 96px; margin-bottom: 20px; }
  .illo-bar { top: 84px; width: 110px; }
  .wyg-card .card-t { margin-bottom: 8px; font-size: 18px; }
  .card-p, .hw-p { font-size: 17px; line-height: 26px; }
  .rail-sec { padding: 40px 0 40px; }
  .rail-frame { margin-top: 28px; }
  .rc { padding: 24px; min-height: 0; }
  .rc .card-t { font-size: 18px; }

  /* work: one column; the chips are one row that scrolls sideways (the page's second deliberate swipe row), its cut
     edge fading, starting on the gutter */
  .work-sec { padding-top: 40px; padding-bottom: 32px; }
  /* dark round 1: the five chips wrap (two rows of 36 px, the 390 picture's chip height) instead of a sideways row that cut "Barbers" */
  .chips { flex-wrap: wrap; gap: 8px 8px; margin-bottom: 24px; }
  .chip { flex: none; height: 36px; padding: 0 14px; font-size: 14px; }
  .chip::before { top: -4px; bottom: -4px; }
  .wk-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .wk-meta { padding-top: 16px; row-gap: 6px; }
  .wk-name { font-size: 18px; }
  .wk-town { font-size: 16px; line-height: 24px; }
  .wk-tag { height: 26px; font-size: 13px; }

  /* how, pricing, faq, close, footer */
  .how-sec { padding-top: 32px; padding-bottom: 40px; }
  .how-list { row-gap: 40px; }
  .hw-t { font-size: 18px; }
  .price-sec { padding-top: 40px; padding-bottom: 32px; }
  .price-intro { padding: 28px 20px 24px; }
  .price-cols { grid-template-columns: minmax(0, 1fr); }
  .price-col { padding: 24px 20px; }
  .price-col + .price-col { border-left: 0; border-top: 1px solid var(--line); }
  .price-col + .price-col::before { display: none; }
  .price-head { font-size: 18px; margin-bottom: 12px; }
  .price-list li { font-size: 17px; }
  .how-facts li { font-size: 17px; }
  .price-cta { padding: 24px 20px 28px; }
  .price-cta .btn { width: 100%; }
  .faq-sec { padding-top: 32px; padding-bottom: 32px; }
  .faq-card summary { min-height: 60px; padding: 18px 16px; font-size: 16px; line-height: 24px; }
  .faq-card details[open] summary { padding-bottom: 10px; }
  .faq-card details p { padding: 0 16px 16px; font-size: 16px; line-height: 24px; }
  .book-sec { padding-top: 40px; padding-bottom: 48px; }
  .book-ribbon { margin-top: -40px; }
  .book-h { font-size: 32px; }
  .book-lines > span { font-size: 17px; line-height: 28px; }
  .hero-cta .btn-arrow, .book-text .btn-arrow { display: none; }
  .f-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .f-col[data-fcol="4"] { grid-column: auto; }
  .f-col .f-head { min-height: 0; }
}

/* ── page transitions (Dominic, 2026-10-07: "smooth page transitions") ──────────────────────────────────────────────
   Between Delvo's own five pages the browser cross-fades the page (the leaving page dims out fast, the arriving one rises
   8 px into place) while the header, which is the same on every page, stays put. Cross-document view transitions: a
   browser without them simply navigates as before. Off under reduced motion and with the page's own motion toggle. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: vt-out .2s var(--ui) both; }
::view-transition-new(root) { animation: vt-in .42s var(--arrive) both; }
::view-transition-group(site-header) { animation-duration: .38s; animation-timing-function: var(--arrive); }   /* the header glides between its two pages' places (judge round 2: it jumped) */
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; translate: 0 8px; } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
html.motion-off::view-transition-old(root), html.motion-off::view-transition-new(root) { animation: none; }

/* (the motion pass, 2026-10-08) on a phone the hero's pieces only rise — they do not fade in from nothing. The lede is a
   phone's largest paint and the browser counts it only once it is visible, so a fade put its LCP behind app.js, the fonts
   and the stagger (the skeptic's review); rising alone keeps the arrival and lets it count at first paint. */
@media (max-width: 639px) { html.mo .hero [data-hero-rise] { opacity: 1; } }

/* ═══ 2026-10-08 · Dominic's hero and console pictures (his three reference images + his moving picture) ═══════════════
   Full-bleed like both pictures (no rounded frame), the reference's nav (links centred, a square violet button), its hero
   (a display serif, a pill with a dot, square buttons, the moving picture on the right fading into the page, four services
   in a strip at the foot) and its console row. Our words throughout. */
@font-face {
  font-family: "Source Serif 4";
  src: url("assets/fonts/source-serif-4-latin-opsz-normal.woff2") format("woff2");
  font-weight: 200 900; font-style: normal; font-display: swap;
}
/* a fallback sized to the serif's own measure, so the swap does not move the lines under it */
@font-face { font-family: "Source Serif 4 Fallback"; src: local("Georgia"); size-adjust: 96%; ascent-override: 92%; descent-override: 26%; line-gap-override: 0%; }
body { --serif: "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif; --hero-violet: #7d57cf; }

/* full-bleed: the panels keep their order and spacing, lose their frame */
main { padding-inline: 0; }
.panel { max-width: none; background: transparent; border: 0; border-radius: 0; }
.panel > .sec, .panel > section { max-width: calc(1380px + 2 * var(--gutter)); margin-inline: auto; }
.sec--rule::before { left: var(--gutter); right: var(--gutter); }

/* nav: the reference's row — the mark left, the links centred, a square violet button right */
.brand { font-size: 22px; gap: 14px; }
.brand .mark { width: 34px; height: 34px; }
.nav { flex: 1; margin-left: 32px; }
.nav-links { margin-inline: auto; gap: 64px; }
.nav-links a { font-size: 17px; font-weight: 400; color: var(--text-2); }
.btn, .ghost { border-radius: 5px; }
.btn--nav { height: 52px; padding: 0 26px; font-size: 17px; gap: 14px; }

/* the hero */
.hero { min-height: auto; padding-top: 150px; padding-bottom: 56px; overflow: visible; }
.hero-art.hero-motion {
  position: absolute; z-index: 0; top: 118px; right: calc(-1 * var(--gutter)); width: min(58%, 900px); height: auto; aspect-ratio: 1244 / 736;
  pointer-events: none; overflow: hidden;
}
.hero-art.hero-motion .hero-poster, .hero-art.hero-motion .hero-loop {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: none; mask-image: none; clip-path: none; aspect-ratio: auto;
}
/* the picture fades into the page on its left and foot (a still overlay, never a mask on the video) */
.hero-fade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--page) 0%, transparent 34%), linear-gradient(0deg, var(--page) 0%, transparent 26%), linear-gradient(180deg, var(--page) 0%, transparent 18%); }
.hero-copy { max-width: 760px; }
.hero-pill { height: 44px; padding: 0 20px; gap: 12px; font-size: 14px; letter-spacing: .16em; border-color: var(--border); }
.hero-pill .mid { margin-inline: 10px; }
.hero-pill .pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hero-violet); flex: none; }
.h1.h1--serif { font-family: var(--serif); font-weight: 430; font-size: clamp(44px, calc(78 * var(--k)), 78px); line-height: 1.05; letter-spacing: -0.018em; margin-top: 40px; }
.h1--serif .ln { display: block; }
.h1--serif .violet { color: var(--hero-violet); }
.hero .hero-lede { margin-top: 28px; font-size: 21px; max-width: 32em; }
.hero-cta { gap: 18px; margin-top: 40px; }
.btn.btn--lg { height: 56px; padding: 0 30px; font-size: 18px; gap: 16px; }
.ghost.ghost--lg { height: 56px; padding: 0 34px; font-size: 18px; color: var(--text); border-color: var(--border); }
/* the strip at the foot: four services, an icon beside a title and a line, thin rules between */
.hero-feats { position: relative; z-index: 2; list-style: none; margin: 120px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.hero-feats li { display: flex; align-items: flex-start; gap: 18px; padding: 6px 28px; }
.hero-feats li:first-child { padding-left: 0; }
.hero-feats li + li { border-left: 1px solid var(--border); }
.hero-feats svg { width: 34px; height: 34px; flex: none; color: var(--text-2); margin-top: 2px; }
.hf-t { display: block; font-size: 18px; line-height: 1.3; color: var(--text); }
.hf-p { display: block; margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--text-3); }

@media (max-width: 1023px) {
  .nav { margin-left: 0; }
  .hero { padding-top: 104px; display: flex; flex-direction: column; }
  .hero-copy { order: 1; } .hero-art.hero-motion { order: 2; } .hero-feats { order: 3; }
  .hero-pill { height: 38px; padding: 0 14px; gap: 10px; font-size: 12px; letter-spacing: .1em; max-width: 100%; }
  .hero-pill .mid { margin-inline: 6px; }
  .hero-cta .ghost { display: inline-flex; }
  .hero-art.hero-motion { position: relative; top: auto; right: auto; width: calc(100% + 2 * var(--gutter)); margin: 32px calc(-1 * var(--gutter)) 0; aspect-ratio: 1244 / 736; -webkit-mask-image: none; mask-image: none; }
  .hero-fade { background: linear-gradient(0deg, var(--page) 0%, transparent 22%), linear-gradient(180deg, var(--page) 0%, transparent 18%); }
  .hero-feats { grid-template-columns: repeat(2, 1fr); row-gap: 28px; margin-top: 36px; }
  .hero-feats li { padding: 0 16px; }
  .hero-feats li:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 639px) {
  .hero-cta { flex-wrap: wrap; }
  .btn.btn--lg, .ghost.ghost--lg { flex: 1 1 100%; justify-content: center; }
  .hero-feats { grid-template-columns: 1fr; }
  .hero-feats li, .hero-feats li + li { padding: 0; border-left: 0; }
}

/* the console row, to Dominic's console picture: the headline large with its two key phrases in violet, the lede under it,
   three features with ringed medallions on the right; the board and the phone unchanged below */
.cp-h { font-size: clamp(30px, calc(46 * var(--k)), 46px); line-height: 1.18; letter-spacing: -0.025em; }
.cp-h .ln { display: block; white-space: nowrap; }
@media (max-width: 1023px) { .cp-h .ln { white-space: normal; } }
.cp-h .violet { color: var(--hero-violet); }
.cp-lede { margin-top: 20px; font-size: 19px; line-height: 1.6; max-width: 34em; }
.op-b-head { grid-template-columns: minmax(0, 640fr) minmax(0, 700fr); align-items: start; column-gap: 40px; }
.cp-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 6px; }
.cp-feats .feat--side { align-items: flex-start; gap: 18px; }
.medal.medal--ring { width: 60px; height: 60px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: color-mix(in srgb, var(--hero-violet) 14%, var(--page)); border: 1px solid color-mix(in srgb, var(--hero-violet) 55%, transparent); color: #c9b8f5; }
.medal.medal--ring svg { width: 26px; height: 26px; }
.medal.medal--ring-pink { background: color-mix(in srgb, #c97fb0 14%, var(--page)); border-color: color-mix(in srgb, #c97fb0 50%, transparent); color: #f0c9e2; }
.cp-feats .feat-t { font-size: 19px; }
.cp-feats .feat-p { margin-top: 6px; font-size: 16px; line-height: 1.55; }
@media (max-width: 1279px) { .cp-feats { grid-template-columns: minmax(0, 1fr); } }
.cp-feats { gap: 18px; }
.cp-feats .feat--side { gap: 14px; }
.medal.medal--ring { width: 52px; height: 52px; }
.medal.medal--ring svg { width: 24px; height: 24px; }
@media (max-width: 639px) {
  .hero .hero-cta { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .hero .hero-cta .btn, .hero .hero-cta .ghost { flex: none; width: 100%; height: 56px; justify-content: center; }
}
@media (max-width: 1023px) { .hf-p { font-size: 16px; } }   /* the 16 px body floor at 390 (gate 6) */
/* the loop hides in the still, with motion off, under reduced motion and when its file is missing — at the same strength
   as the rule above that places it (it had out-ranked the older hide rules: night-motion reduce arm, 2026-10-08) */
html.shot .hero-art.hero-motion .hero-loop, html.motion-off .hero-art.hero-motion .hero-loop, .hero-art.hero-motion .hero-loop.is-missing { display: none; }
@media (prefers-reduced-motion: reduce) { .hero-art.hero-motion .hero-loop { display: none; } }

/* ══ the hero, to Dominic's reference picture (2026-10-08, second order: "The hero is my reference picture itself: the glowing
   violet-to-blue particle wave flowing across the right side of a near-black page. No laptop, no phone, no screen, no
   frame.") Every number below is measured on refs/hero-wave-reference.png (1920 × 1138) and scaled to 1440 (× 0.75). ══ */

/* the headline face: Gambetta (Indian Type Foundry, Fontshare, ITF Free Font License 2.0 — self-hosting for our own site is
   granted in §01; the official file, unmodified: assets/fonts/licenses/Gambetta-FFL.txt). Measured against the reference's
   three lines among 30 serifs, it fits best (word-mask overlap 0.640, blurred correlation 0.894 at weight 400). Georgia
   stands in until it loads, sized to Gambetta's measured advance (98.7 %) and metrics, so the swap moves nothing. */
@font-face { font-family: "Gambetta"; src: url("assets/fonts/Gambetta-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Gambetta Fallback"; src: local("Georgia"); size-adjust: 98.7%; ascent-override: 94.3%; descent-override: 29.4%; line-gap-override: 0%; }
body { --serif: "Gambetta", "Gambetta Fallback", Georgia, serif; --hero-ground: #020713; --hero-violet: #8264BA; }   /* the headline's violet line, sampled on the reference (#8163B8) */
:root { --button: #7044C6; --button-hover: #6C3BC6; }   /* the reference's button violet (sampled #643DB1) lifted 12 % in the same hue: as drawn it is 2.58 : 1 on the page, under the 3 : 1 a control needs (gate 7); #7044C6 is 3.02 : 1, white on it 6.30 : 1 */
/* every headline on the site in it, at its one weight (no synthetic bold) */
.h1, .h2, .h3, .statement { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; }

/* the bar: the mark at 84, the button's right edge 70 from the screen's (the reference's 1204–1370 × 45–94), its row centred
   at 69.5 */
@media (min-width: 1024px) {
  body { --nav-rest: 32.5px; }
  .btn--nav { position: relative; top: 1px; }
  .btn--nav .btn-arrow { width: 19px; height: 19px; }   /* the reference's arrow: 15 wide, its head 14 tall (judge r3) */
  .brand { font-size: 22.7px; position: relative; top: -1px; }
  .hdr-row { padding-left: 84px; padding-right: 70px; }
}
.btn--nav { height: 50px; padding: 0 24px 0 25px; gap: 22px; font-size: 17px; font-weight: 400; border-radius: 3px; }
.nav-links { gap: 50px; }
.nav-links a { font-size: 15.5px; color: #9DA1AD; }   /* the reference's links: a size down, ~50 px apart (judge, 2026-10-08) */   /* the reference's links: lighter and a size down */

/* the hero runs the full width of the screen (its ground is the reference's navy-black, #020713, which eases into the page's
   own near-black under the strip) and keeps its content on the bar's lines: 84 from the left, 70 from the right */
main { padding-top: 0; }
.panel > #hero { max-width: none; }
.hero {
  min-height: 0; overflow-x: clip; overflow-y: visible;
  padding: 187px calc(max(0px, (100% - 1440px) / 2) + 70px) 74px calc(max(0px, (100% - 1440px) / 2) + 84px);
  background: linear-gradient(180deg, var(--hero-ground) 0, var(--hero-ground) calc(100% - 60px), var(--page) 100%);
}
/* around Dominic's film: the reference's own glow just outside the crop (the blue above its top-right, the violet behind its
   left end) as three soft hazes; the wide navy wash under them lit the page past the film's black at its foot and drew a
   faint band there (judge, 2026-10-09), so it is gone */
@media (min-width: 1024px) {
  .hero {
    background:
      radial-gradient(ellipse 20% 12% at 66% 27%, rgba(30, 58, 170, .14), transparent 75%),
      radial-gradient(ellipse 36% 32% at 72% 50%, rgba(58, 44, 160, .30), transparent 72%),
      radial-gradient(ellipse 28% 38% at 92% 32%, rgba(34, 58, 180, .28), transparent 72%),
      linear-gradient(180deg, var(--hero-ground) 0, var(--hero-ground) calc(100% - 60px), var(--page) 100%);
  }
}
/* the hazes the code wave was tuned with (2026-10-08) come back only with it (.is-code, the film's fallback): around
   Dominic's film they lit the page past the film's own black and drew a faint band at its feathered foot (judge,
   2026-10-09) */
@media (min-width: 1024px) {
  .hero:has(.hero-wave.is-code) {
    background:
      radial-gradient(ellipse 20% 12% at 66% 27%, rgba(30, 58, 170, .14), transparent 75%),   /* the blue haze between the arcs and the bundle (judge r7) */
      radial-gradient(ellipse 36% 32% at 72% 50%, rgba(58, 44, 160, .30), transparent 72%),
      radial-gradient(ellipse 28% 38% at 92% 32%, rgba(34, 58, 180, .28), transparent 72%),
      radial-gradient(ellipse 60% 55% at 78% 42%, rgba(14, 24, 70, .55), transparent 75%),
      linear-gradient(180deg, var(--hero-ground) 0, var(--hero-ground) calc(100% - 60px), var(--page) 100%);
  }
}
/* the wave's canvas: from 34 % across (left of the reference's first strand at every width) to 24 px past the right edge,
   so the pointer's ±14 px tilt never shows its edge; the hero clips it sideways */
.hero-art.hero-wave { position: absolute; z-index: 0; top: 0; bottom: 0; left: 34%; right: -24px; width: auto; height: auto; pointer-events: none; }
.hero-wave canvas { display: block; width: 100%; height: 100%; }
.hero-wave.no-gl { background: url("assets/hero/wave-still.webp") left top / 100% auto no-repeat; }   /* the same wave, one frame (made by gates from the page at 1440, text hidden) */
.hero-copy { max-width: 640px; }

/* the pill: 36 tall, the dot 19 in, the label 43 in (reference 270 × 36 at 85,187) */
.hero-pill { height: 36px; padding: 0 17px 0 19px; gap: 17px; font-size: 13px; letter-spacing: .16em; border-color: #272D36; color: #9A9DA8; font-weight: 500; }
.hero-pill .pill-dot { width: 7px; height: 7px; }
/* the headline: 85.8 px on 84 px lines, its first ascender 265.5 from the top (measured on the reference) */
.h1.h1--serif { font-size: clamp(44px, calc(88 * var(--k)), 88px); line-height: 0.943; letter-spacing: -0.02em; margin-top: 35px; font-weight: 400; }   /* 88 on 83 px lines: the reference's baseline pitch (110.5 px at 1920) and the judge's cap-height reading (61 px) */
.hero .hero-lede { margin-top: 11px; font-size: 20px; line-height: 30.75px; max-width: 560px; color: #9FA3AF; }
.hero-cta { gap: 18px; margin-top: 30px; }
/* the two buttons: 171 × 50 filled, 160 × 50 outlined, 1 px border, square corners (the reference's ≤ 2 px) */
.btn.btn--lg .btn-arrow { width: 19px; height: 19px; }
.btn.btn--lg { height: 50px; padding: 0 27px 0 24px; gap: 22px; font-size: 17px; font-weight: 400; border-radius: 3px; }
.ghost.ghost--lg { height: 50px; padding: 0 30px; font-size: 17px; font-weight: 400; color: var(--text); border-color: #2A303A; border-radius: 3px; }
/* the strip: icon, a title over a line, thin rules between; column widths and the 77 px inset after each rule from the
   reference (rules at 370 · 706 · 1048) */
.hero-feats { margin-top: 76px; grid-template-columns: 286fr 336fr 342fr 322fr; }
.hero-feats li { align-items: center; gap: 24px; padding: 0 12px 0 52px; min-height: 41px; }
.hero-feats li:first-child { padding-left: 8px; }
.hero-feats li + li { border-left-color: #262D37; }
.hero-feats svg { width: 44px; height: 44px; margin-top: 0; color: #B7BAC4; }
.hf-t { font-size: 18.5px; line-height: 1.25; color: #D5D8E0; }
.hf-p { margin-top: 4px; font-size: 15.5px; line-height: 1.35; color: #80858F; }

@media (max-width: 1279px) and (min-width: 1024px) {
  .hero-feats li { padding-left: 40px; gap: 20px; }
}
@media (max-width: 1023px) {
  .hero { padding: 104px var(--gutter) 40px; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--hero-ground) 0, var(--hero-ground) calc(100% - 40px), var(--page) 100%); }
  .hero-copy { order: 1; } .hero-art.hero-wave { order: 2; } .hero-feats { order: 3; }
  .hero-art.hero-wave { position: relative; inset: auto; left: auto; right: auto; width: calc(100% + 2 * var(--gutter)); margin: 12px calc(-1 * var(--gutter)) 0; aspect-ratio: 1100 / 740;
    background: radial-gradient(ellipse 70% 52% at 60% 62%, rgba(112, 68, 198, .22), transparent 74%), radial-gradient(ellipse 46% 56% at 88% 40%, rgba(58, 91, 217, .16), transparent 72%), radial-gradient(ellipse 90% 70% at 70% 55%, rgba(14, 24, 70, .55), transparent 78%); }
  .hero-pill { height: 34px; padding: 0 14px; gap: 10px; font-size: 11.5px; letter-spacing: .1em; max-width: 100%; }
  .hero-pill .mid { margin-inline: 6px; }
  .h1.h1--serif { margin-top: 24px; line-height: 1; }
  .hero .hero-lede { margin-top: 16px; }
  .hero-cta { margin-top: 24px; }
  .hero-feats { margin-top: 20px; grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .hero-feats li, .hero-feats li:first-child { padding: 0 0 0 16px; gap: 14px; }
  .hero-feats li:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 639px) {
  .hero-feats { grid-template-columns: 1fr; }
  .hero-feats li, .hero-feats li + li { padding: 0; border-left: 0; }
  .hf-p { font-size: 16px; }
}

/* ══ the wave is Dominic's own video (2026-10-09, third order: "HERO = MY HIGGSFIELD VIDEO, EXACTLY … Use ONLY the wave …
   Place it where the reference has the wave, feathered into the page on the left, top and bottom"). The film is the crop of
   his clip, which is the reference's x 883–1920 × y 136.6–909.7 (of 1920 × 1138). On a desktop it lands where the reference
   has it by the rule the copy already follows: the reference's content edge (x 115) on ours, its pill top (y 249) on ours
   (187 down), its right edge on the screen's, so s = (width − content edge) / 1805. CSS alone places it (the hero's panel is
   the size container), so no script moves it and nothing shifts. It runs 14 px past the right edge, off screen at rest, so
   the pointer's ±14 px tilt never shows its side. The code wave's canvas is shown only when the video fails (.is-code). ══ */
.panel--hero { container-type: inline-size; }
.wave-film {
  --L: calc(max(0px, (100cqw - 1440px) / 2) + 84px); --s: calc((100cqw - var(--L)) / 1805);
  position: absolute; z-index: 1; pointer-events: none;
  left: calc(var(--L) + 768 * var(--s) - 34cqw); top: calc(187px - 112.44 * var(--s));
  width: calc(1037 * var(--s) + 14px); aspect-ratio: 2020 / 1506;
  /* short feathers that hide the crop's straight edges: the reference's own strands run to the crop's left edge and its
     pink tail to near its foot, and our words end left of it (judge, 2026-10-09: a 22 % left fade dimmed the tail; a
     2.5 % one clipped the bright strands, so 7 % on a smoothstep; the top 3.5 % and the foot from 95 % keep the top-right
     strands and the faint tails) */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .1) 1.75%, rgba(0, 0, 0, .5) 3.5%, rgba(0, 0, 0, .9) 5.25%, #000 7%), linear-gradient(180deg, transparent 0, #000 3.5%, #000 95%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .1) 1.75%, rgba(0, 0, 0, .5) 3.5%, rgba(0, 0, 0, .9) 5.25%, #000 7%), linear-gradient(180deg, transparent 0, #000 3.5%, #000 95%, transparent 100%);
  mask-composite: intersect;
}
.wave-film img, .wave-film video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: fill; }
.wave-film video { opacity: 0; }                                  /* its first frame is the poster, so the swap is invisible */
.hero-wave.is-playing .wave-film video { opacity: 1; }
.hero-wave:not(.is-code) canvas { display: none; }
.hero-wave.is-code .wave-film { display: none; }
@media (max-width: 1023px) {
  /* the band below the copy is the film itself, full bleed, feathered into the page */
  .hero-art.hero-wave { aspect-ratio: 2020 / 1506; background: none; }
  .wave-film { left: 0; top: 0; width: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%), linear-gradient(180deg, transparent 0, #000 10%, #000 84%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 12%), linear-gradient(180deg, transparent 0, #000 10%, #000 84%, transparent 100%); }
}

/* ══ launch pass (Dominic, 2026-10-11: "FINISH THE SITE FOR LAUNCH … Refero pass on every remaining feature and section";
   the picks are filed in docs/refs/delvo-launch-refs.md) ══ */
/* the footer's brand column held only the wordmark (≈ 380 px of nothing at 1440, and no way to reach Delvo from the foot of
   any page): a small label over the address the privacy page already publishes, and the outlined button (Resend's footer, Linear's) */
.f-reach { margin-top: 22px; display: grid; gap: 2px; }
.f-reach-l { font-size: 13px; line-height: 20px; color: var(--text-3); }
.f-reach a { font-size: 15px; line-height: 30px; color: var(--text-2); text-decoration: none; justify-self: start; transition: color .3s var(--ui2); }
.f-reach a:hover { color: var(--text); }
.f-book { margin-top: 14px; height: 44px; padding: 0 20px; font-size: 15px; justify-self: start; }
.f-brand { display: flex; flex-direction: column; align-items: flex-start; }
/* the FAQ's questions were the answers' grey and read as disabled (Vercel's and JetBrains' FAQs set the question in the page's
   ink); the answers stay grey */
.faq-card summary { color: var(--text); }
/* Concept builds (2026-10-11): two cards, a status label, the trade, one line, the page and the try link */
.cbs-sec { padding-top: 64px; padding-bottom: 64px; }
.cbs-line { margin-top: 14px; max-width: 34em; font-size: 18px; line-height: 28px; color: var(--text-2); }
.cbs-cards { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 36px; }
.cbs-card { display: flex; flex-direction: column; padding: 28px 32px 30px; border: 1px solid var(--surface-border); border-radius: 16px; background: var(--surface); }
.cbs-label { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.cbs-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hero-violet); }
.cbs-t { margin-top: 20px; font-family: var(--serif); font-weight: 400; font-size: 36px; line-height: 1.1; letter-spacing: -0.02em; color: var(--text); }
.cbs-p { margin-top: 10px; font-size: 18px; line-height: 28px; color: var(--text-2); flex: 1; }
.cbs-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 24px; }
.cbs-read { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 17px; color: var(--text); text-decoration: none; }
.cbs-read .btn-arrow { width: 16px; height: 16px; transition: transform .2s var(--ui); }
.cbs-read:hover .btn-arrow { transform: translateX(3px); }
.cbs-try { height: 44px; padding: 0 20px; font-size: 16px; }
@media (max-width: 1023px) { .cbs-cards { grid-template-columns: 1fr; gap: 16px; } .cbs-card { padding: 22px 20px 24px; } .cbs-t { font-size: 30px; } .cbs-line, .cbs-p { font-size: 17px; line-height: 27px; } .cbs-sec { padding-top: 44px; padding-bottom: 44px; } }
@media (prefers-reduced-motion: reduce) { .cbs-read .btn-arrow { transition: none; } }
@media (max-width: 1023px) { .f-reach-l, .f-reach a { font-size: 16px; } }   /* the body floor under 1024 (gate 6) */
.cbs-try span[aria-hidden] { margin-left: 5px; }

/* ══ the hero, full bleed (Dominic, 2026-10-11, second launch order: "the wave video fills the WHOLE hero, edge to edge, top of
   page (behind the transparent nav) to the bottom of the hero. No visible box, seam or edge anywhere. Anchor the wave so the
   bright crossing sits right of center and strands run behind the headline; add a left-side navy fade so the text keeps
   contrast (check AA). Phone: same full-bleed behind the headline, stronger fade.") The film covers the hero (object-fit:
   cover), past every edge by the pointer tilt's reach (±14 px across, ±10 down) so the tilt never shows a side; the old
   boxed placement and its masks are off. One overlay carries the fades: navy from the left under the words, a little at the
   top under the nav, and into the page at the foot — the hero has no edge of its own. ══ */
.hero { background: var(--hero-ground); }
.hero-art.hero-wave { inset: -16px -24px -12px -24px; left: -24px; right: -24px; top: -16px; bottom: -12px; width: auto; height: auto; }
.hero-wave .wave-film { inset: 0; left: 0; top: 0; width: auto; height: auto; aspect-ratio: auto; -webkit-mask-image: none; mask-image: none; }
.hero-wave .wave-film img, .hero-wave .wave-film video { object-fit: cover; object-position: var(--wave-x, 62%) var(--wave-y, 46%); }
.hero-wave::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(2, 7, 19, .55) 0, rgba(2, 7, 19, 0) 150px),
    linear-gradient(90deg, rgba(2, 7, 19, .9) 0, rgba(2, 7, 19, .82) calc(var(--fade-at, 34%) - 14%), rgba(2, 7, 19, .5) var(--fade-at, 34%), rgba(2, 7, 19, 0) calc(var(--fade-at, 34%) + 22%)),
    linear-gradient(180deg, rgba(10, 10, 12, 0) 72%, var(--page) 100%); }
.hero-wave.is-code::after { display: none; }
@media (min-width: 1441px) { .hero-wave::after { --fade-at: calc(max(0px, (100% - 1440px) / 2) + 490px); } }
@media (max-width: 1023px) {
  /* the phone: the film behind the headline, the lede and the buttons (the strip below sits on the page), a stronger fade */
  .hero { position: relative; }
  .hero-art.hero-wave { position: absolute; inset: -12px -16px auto -16px; top: -12px; left: -16px; right: -16px; bottom: auto; height: 720px; width: auto; margin: 0; aspect-ratio: auto; order: 0; background: none; }
  .hero-wave .wave-film img, .hero-wave .wave-film video { object-position: var(--wave-x-phone, 64%) 50%; }
  .hero-wave::after { background:
    linear-gradient(180deg, rgba(2, 7, 19, .62) 0, rgba(2, 7, 19, .5) 45%, rgba(2, 7, 19, .72) 78%, var(--hero-ground) 100%),
    linear-gradient(90deg, rgba(2, 7, 19, .55) 0, rgba(2, 7, 19, .2) 70%); }
  .hero-copy, .hero-feats { position: relative; z-index: 3; }
}

/* ══ the console + portal block, to Dominic's reference (2026-10-11, portal-ref/03): a sans headline with violet accents, the
   three features in ringed badges beside it, the Board in the console's own dark (console/src/app/globals.css: canvas #0A0710,
   panel #140D1D, raised #1E1428, hairline #241833, plum #652A97, the plum wash behind "What needs your hand"), and the portal in its
   own dark (console/src/components/portal/portal.css: paper #110F0C, card #1C1915, ink #F0EEEA, accent #CDAEF2) on a drawn phone.
   Panel and phone end on one line. ══ */
.cp-h.cp-h--sans { font-family: var(--sans, "Figtree", system-ui, sans-serif); font-weight: 650; letter-spacing: -0.025em; line-height: 1.08; }
.cp-h--sans .violet { color: #9B7BF0; background: none; -webkit-text-fill-color: currentColor; }
.cp-feats .medal--ring { width: 62px; height: 62px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, rgba(124, 92, 220, .28), rgba(20, 14, 40, .9) 70%); border: 1px solid rgba(155, 123, 240, .45); box-shadow: 0 0 24px rgba(124, 92, 220, .25); }
.cp-feats .medal--ring svg { width: 26px; height: 26px; }
.cp-fig { display: grid !important; grid-template-columns: minmax(0, 1fr) 300px; gap: 72px; align-items: end; margin-top: 48px; }
.cp-fig > .cp-board, .cp-fig > .cp-phone { position: static; inset: auto; transform: none; width: auto; margin: 0; }
.cp-board { background: #0A0710; border: 1px solid #241833; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.cp-board .browser-bar { background: #0A0710; border-bottom: 1px solid #241833; }
.cb-body { padding: 30px 38px 30px; color: #EEEAF3; font-family: var(--sans, "Figtree", system-ui, sans-serif); }
.cb-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.cb-title { font-size: 40px; line-height: 1.1; font-weight: 650; letter-spacing: -0.02em; }
.cb-count { font-size: 14px; color: #A79BB8; white-space: nowrap; }
.cb-line { margin-top: 10px; max-width: 46em; font-size: 15px; line-height: 24px; color: #B9AFC7; }
.cb-hand { position: relative; margin-top: 26px; padding: 22px 22px 24px; border-radius: 16px; background: radial-gradient(120% 90% at 30% 0%, rgba(110, 50, 170, .22), rgba(110, 50, 170, 0) 70%), #120B1A; border: 1px solid #241833; }
.cb-sec { font-size: 17px; font-weight: 600; color: #F2EEF7; margin-bottom: 14px; }
.cb-queue { border: 1px solid #2A1D3B; border-radius: 12px; background: #140D1D; padding: 6px 16px; margin-bottom: 16px; }
.cb-queue--quiet { margin-bottom: 0; }
.cb-qh { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #A79BB8; padding: 10px 0 6px; }
.cb-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid #241833; }
.cb-biz { font-size: 15px; font-weight: 600; color: #F2EEF7; }
.cb-det { font-size: 14px; color: #B9AFC7; margin-top: 2px; }
.cb-due { flex: none; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; color: #2A1E00; background: oklch(0.84 0.15 88); }
.cb-due--calm { color: #EEEAF3; background: #2A1D3B; }
.cb-age { flex: none; font-size: 13px; color: #A79BB8; }
.cb-crew { position: relative; padding: 20px 22px 22px; border-radius: 14px; background: #160E22; border: 1px solid rgba(155, 123, 240, .55);
  box-shadow: 0 0 0 1px rgba(155, 123, 240, .12), 0 0 36px rgba(124, 92, 220, .35), inset 0 0 40px rgba(124, 92, 220, .08); }
.cb-crew-t { font-size: 17px; font-weight: 600; color: #F2EEF7; }
.cb-crew-p { margin-top: 6px; font-size: 14px; line-height: 22px; color: #C6BDD3; max-width: 52em; }
.cb-input { margin-top: 14px; height: 64px; padding: 12px 14px; border-radius: 10px; background: #0D0814; border: 1px solid #2E2140; font-size: 14px; color: #7E7290; }
.cb-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; height: 42px; padding: 0 18px; border-radius: 8px; font-size: 15px; font-weight: 600; color: #fff;
  background: linear-gradient(180deg, #8B5CF0, #6B39D8); box-shadow: 0 0 0 1px rgba(196, 170, 255, .35) inset, 0 6px 22px rgba(124, 77, 240, .55); }
.cb-moving { margin-top: 22px; }
/* the phone: a dark handset drawn in CSS — rounded body, a violet edge light, side buttons, the status bar with the island, the
   home bar — holding the portal's dark page */
.cp-phone { position: relative; width: 300px; justify-self: end; }
.cp-phone::before, .cp-phone::after { content: ""; position: absolute; width: 4px; border-radius: 2px; background: #2C2638; }
.cp-phone::before { left: -4px; top: 120px; height: 34px; box-shadow: 0 54px 0 #2C2638, 0 112px 0 #2C2638; }
.cp-phone::after { right: -4px; top: 168px; height: 72px; }
.cp-phone-body { position: relative; height: 620px; border-radius: 46px; padding: 12px 12px 0; background: #0B0910; border: 2px solid #3A3150;
  box-shadow: 0 0 0 1px rgba(155, 123, 240, .35), 0 0 40px rgba(124, 92, 220, .3), 0 30px 70px rgba(0, 0, 0, .55); overflow: hidden; display: flex; flex-direction: column;
  font-family: var(--sans, "Figtree", system-ui, sans-serif); color: #F0EEEA; }
.cp-status { display: flex; align-items: center; justify-content: space-between; height: 34px; padding: 0 16px; font-size: 13px; font-weight: 600; }
.cp-island { width: 86px; height: 24px; border-radius: 14px; background: #000; }
.cp-icons { display: inline-flex; gap: 5px; align-items: center; }
.cp-icons i { display: block; background: #F0EEEA; }
.cp-sig { width: 14px; height: 9px; clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.cp-wifi { width: 12px; height: 9px; border-radius: 12px 12px 0 0; clip-path: polygon(50% 100%, 0 0, 100% 0); }
.cp-bat { width: 20px; height: 9px; border-radius: 2px; }
.cp-head { display: flex; align-items: center; gap: 9px; padding: 12px 10px 12px; border-bottom: 1px solid #2E2A24; }
.cp-mark { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #F0EEEA; color: #110F0C; font-size: 10px; font-weight: 700; flex: none; }
.cp-agency { font-family: var(--serif); font-size: 15px; flex: 1; }
.cp-head .tag--sample { font-size: 10px; padding: 3px 8px; }
.cp-scroll { flex: 1; overflow: hidden; padding: 14px 12px 0; background: #110F0C; border-radius: 0 0 6px 6px; }
.cp-client { font-family: var(--serif); font-size: 22px; line-height: 1.15; }
.cp-intro { margin-top: 6px; font-size: 12px; line-height: 17px; color: #B5AEA4; }
.cp-label { margin: 14px 0 7px; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #B5AEA4; }
.cp-card { padding: 12px 12px 6px; border-radius: 12px; background: #1C1915; border: 1px solid #2E2A24; }
.cp-card-head { display: flex; justify-content: space-between; gap: 8px; }
.cp-ph { font-family: var(--serif); font-size: 15px; line-height: 1.2; }
.cp-meta { font-size: 11px; color: #B5AEA4; margin-top: 2px; }
.cp-pill { flex: none; align-self: flex-start; font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 4px 7px; border-radius: 999px; color: #CDAEF2; border: 1px solid rgba(205, 174, 242, .45); }
.cp-steps { list-style: none; margin: 8px 0 0; padding: 0; }
.cp-steps li { position: relative; padding: 0 0 11px 20px; font-size: 12px; color: #B5AEA4; }
.cp-steps li::before { content: ""; position: absolute; left: 3px; top: 4px; width: 7px; height: 7px; border-radius: 50%; border: 1px solid #8A857D; background: #110F0C; box-sizing: border-box; }
.cp-steps li::after { content: ""; position: absolute; left: 6px; top: 12px; bottom: 0; width: 1px; background: #4A453E; }
.cp-steps li:last-child::after { display: none; }
.cp-steps li.is-done { color: #F0EEEA; } .cp-steps li.is-done::before { background: #F0EEEA; border-color: #F0EEEA; }
.cp-steps li.is-now { color: #F0EEEA; font-weight: 600; }
.cp-steps li.is-now::before { left: 1px; top: 2px; width: 11px; height: 11px; background: #CDAEF2; border-color: #CDAEF2; box-shadow: 0 0 10px rgba(205, 174, 242, .6); }
.cp-steps li span { display: block; font-weight: 400; color: #B5AEA4; margin-top: 2px; }
.cp-letter { padding: 11px 12px; border-radius: 12px; background: #1C1915; border: 1px solid #2E2A24; }
.cp-letter-meta { display: flex; align-items: center; gap: 8px; font-size: 10px; color: #B5AEA4; margin-bottom: 6px; }
.cp-chip { font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; color: #FFA997; border: 1px solid rgba(255, 169, 151, .45); }
.cp-letter-body { font-size: 12px; line-height: 17px; color: #D9D3CA; margin-top: 4px; }
.cp-sign { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 11px; color: #B5AEA4; }
.cp-sign .cp-mark { width: 20px; height: 20px; font-size: 8px; }
.cp-tabs { display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 4px 2px; background: #0E0C0A; border-top: 1px solid #2E2A24; font-size: 10px; color: #B5AEA4; text-align: center; }
.cp-tabs span { display: grid; justify-items: center; gap: 4px; } .cp-tabs .is-on { color: #CDAEF2; }
.cp-ti { display: block; width: 18px; height: 16px; border: 1.5px solid currentColor; border-radius: 4px; }
.cp-ti--bell { border-radius: 9px 9px 3px 3px; } .cp-ti--msg { border-radius: 4px 4px 4px 0; } .cp-ti--file { width: 14px; }
.cp-homebar { display: block; width: 110px; height: 4px; margin: 9px auto 8px; border-radius: 3px; background: #F0EEEA; opacity: .85; }
/* not in the real portal or console yet (Lane A adds them; Dominic's word 2026-10-11): shown only with ?tabs=1 for review */
[data-pending-real] { display: none !important; }
html.show-pending [data-pending-real] { display: revert !important; }
html.show-pending .cp-tabs[data-pending-real] { display: grid !important; }
@media (max-width: 1023px) {
  .cp-fig { grid-template-columns: 1fr; gap: 40px; align-items: start; }
  .cp-phone { justify-self: center; }
  .cb-body { padding: 22px 18px; } .cb-title { font-size: 30px; } .cb-hand { padding: 16px 14px; }
  .cb-top { flex-direction: column; gap: 4px; }
}
/* the block's proportions to the reference: the headline at the section-headline size, the Board tightened, the phone taller and
   wider so its top sits just above the Board's and both end on one line */
.cp-h.cp-h--sans { font-size: clamp(34px, calc(58 * var(--k)), 58px); }
.cp-fig { grid-template-columns: minmax(0, 1fr) 360px; gap: 64px; }
.cb-body { padding: 24px 32px 26px; }
.cb-title { font-size: 34px; }
.cb-line { font-size: 14px; line-height: 21px; }
.cb-hand { margin-top: 18px; padding: 16px 18px 18px; }
.cb-sec { font-size: 16px; margin-bottom: 10px; }
.cb-queue { padding: 2px 14px; margin-bottom: 12px; }
.cb-qh { padding: 8px 0 4px; }
.cb-row { padding: 8px 0; }
.cb-crew { padding: 16px 18px 16px; }
.cb-input { height: 46px; margin-top: 10px; padding: 11px 12px; }
.cb-btn { margin-top: 12px; height: 40px; }
.cb-moving { margin-top: 16px; }
.cp-phone { width: 360px; }
.cp-phone-body { height: 760px; border-radius: 54px; padding: 14px 14px 0; }
.cp-status { font-size: 14px; height: 38px; } .cp-island { width: 100px; height: 28px; }
.cp-client { font-size: 25px; } .cp-intro { font-size: 13px; line-height: 19px; }
.cp-ph { font-size: 17px; } .cp-meta { font-size: 12px; } .cp-steps li { font-size: 13px; padding-bottom: 13px; }
.cp-letter-body { font-size: 13px; line-height: 19px; }
@media (max-width: 1279px) and (min-width: 1024px) { .cp-fig { grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; } .cp-phone { width: 320px; } .cp-phone-body { height: 700px; } }
@media (max-width: 1023px) { .cp-phone { width: min(340px, 100%); } .cp-phone-body { height: 700px; } }
/* the headline at the reference's size needs ~760 px: side by side with the three features from 1600 (the reference is a
   1920 picture); under it the features run in a row below the headline */
@media (min-width: 1024px) {
  .op-b-head { grid-template-columns: minmax(0, 1fr); row-gap: 34px; align-items: start; }
  .cp-h.cp-h--sans { font-size: clamp(40px, calc(56 * var(--k)), 56px); }
  .cp-feats { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1100px; }
}
@media (min-width: 1600px) { .op-b-head { grid-template-columns: minmax(0, 800fr) minmax(0, 700fr); column-gap: 48px; } .cp-feats { max-width: none; } }
.cp-phone-body { height: 820px; }
@media (max-width: 1279px) and (min-width: 1024px) { .cp-phone-body { height: 740px; } }
@media (max-width: 1023px) { .cp-phone-body { height: 700px; } }
/* AA over the moving film (measured: specs-free aa.mjs, the 95th-percentile background under every text box at 8 moments): the navy
   holds under the copy column (its right edge, --cx: 84 + 640 px, centred past 1440) and clears beyond it, and the foot turns to the
   page before the strip — the strands still run behind the words, dimmed to what AA allows */
.hero { --cx: calc(max(0px, (100vw - 1440px) / 2) + 724px); }
.hero-wave::after { background:
    linear-gradient(180deg, rgba(2, 7, 19, .6) 0, rgba(2, 7, 19, 0) 150px),
    linear-gradient(90deg, rgba(2, 7, 19, .93) 0, rgba(2, 7, 19, .9) calc(var(--cx) - 40px), rgba(2, 7, 19, .6) calc(var(--cx) + 90px), rgba(2, 7, 19, .2) calc(var(--cx) + 220px), rgba(2, 7, 19, 0) calc(var(--cx) + 340px)),
    linear-gradient(180deg, rgba(10, 10, 12, 0) 62%, rgba(10, 10, 12, .9) 80%, var(--page) 86%); }
@media (max-width: 1023px) {
  .hero-wave::after { background:
    linear-gradient(180deg, rgba(2, 7, 19, .8) 0, rgba(2, 7, 19, .84) 50%, rgba(2, 7, 19, .9) 80%, var(--hero-ground) 100%); }
}
/* the foot's turn to the page goes on top of the navy (it was under it, so the hero's left half ended navy over a #0C0C0E page — a seam) */
.hero-wave::after { background:
    linear-gradient(180deg, rgba(12, 12, 14, 0) 62%, rgba(12, 12, 14, .9) 80%, var(--page) 86%),
    linear-gradient(180deg, rgba(2, 7, 19, .6) 0, rgba(2, 7, 19, 0) 150px),
    linear-gradient(90deg, rgba(2, 7, 19, .93) 0, rgba(2, 7, 19, .9) calc(var(--cx) - 40px), rgba(2, 7, 19, .6) calc(var(--cx) + 90px), rgba(2, 7, 19, .2) calc(var(--cx) + 220px), rgba(2, 7, 19, 0) calc(var(--cx) + 340px)); }
.hero { background: var(--page); }
@media (max-width: 1023px) { .hero-wave::after { background: linear-gradient(180deg, rgba(2, 7, 19, .8) 0, rgba(2, 7, 19, .84) 50%, rgba(2, 7, 19, .9) 78%, var(--page) 100%); } .hero { background: var(--page); } }
/* the photo frame waits, hidden, for a still from Dominic's VSL shoot (2026-10-11); the band's words take the row alone */
.photo-frame[hidden] { display: none !important; }
.book-row:has(> .photo-frame[hidden]) { grid-template-columns: minmax(0, 1fr); }

/* ══ What you get, one still grid (2026-10-11, the ★ layout changes): three columns × two rows drawn with thin rules, no card
   boxes (Resend's "All boxes checked"), the group named once at the head of its row, each cell a drawing, a title and its line ══ */
.wyg-sub { margin-top: 12px; max-width: 34em; font-size: 19px; line-height: 29px; color: var(--text-2); }
.wyg-sec--grid .wyg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 40px; border-top: 1px solid var(--line); }
.wyg-sec--grid .group-label { grid-column: 1 / -1; padding: 22px 0 6px; font-size: 13px; line-height: 20px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); display: block; }
.wyg-sec--grid .group-label--op { border-top: 1px solid var(--line); margin-top: 0; }
.wyg-sec--grid .wyg-cell { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 18px 32px 34px 0; min-height: 0; }
.wyg-sec--grid .wyg-cell + .wyg-cell { padding-left: 32px; border-left: 1px solid var(--line); }
.wyg-sec--grid .wyg-cell .wyg-group { display: none; }
.wyg-sec--grid .wyg-cell .illo { height: 112px; margin: 0 0 18px; }
.wyg-sec--grid .wyg-cell .illo svg { height: 100%; width: auto; }
.wyg-sec--grid .wyg-cell .card-t { font-size: 22px; }
.wyg-sec--grid .wyg-cell .card-p { margin-top: 8px; max-width: 26em; }
.wyg-sec--grid .illo-bar { display: none; }
@media (max-width: 1023px) {
  .wyg-sec--grid .wyg-grid { grid-template-columns: minmax(0, 1fr); }
  .wyg-sec--grid .wyg-cell, .wyg-sec--grid .wyg-cell + .wyg-cell { padding: 20px 0 24px; border-left: 0; border-top: 1px solid var(--line); }
  .wyg-sec--grid .group-label + .wyg-cell { border-top: 0; }
  .wyg-sec--grid .wyg-cell .illo { height: 88px; }
}
.wyg-sec--grid .wyg-cell, .wyg-sec--grid .group-label { grid-row: auto; }
.wyg-sec--grid .group-label--ca, .wyg-sec--grid .group-label--op { grid-column: 1 / -1; border-bottom: 0; }
@media (max-width: 1023px) { .wyg-sec--grid .group-label { display: block; } }
/* the Work cards (2026-10-11, the ★ layout changes): the picture runs to the card's edge (no inner frame), the name over one
   small-caps line (trade · town · concept), and a "View site →" that answers the hover (Programa, Thomas Vimare, Vercel) */
.wk { padding: 0 !important; overflow: hidden; }
.wk-media { border-radius: 0 !important; }
.wk-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name view" "line view"; row-gap: 6px; padding: 18px 22px 20px !important; align-items: center; }
.wk-name { grid-area: name; }
.wk-line { grid-area: line; font-size: 12px; line-height: 18px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.wk-line .wk-town, .wk-line .wk-tag { all: unset; }
.wk-view { grid-area: view; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--text-2); transition: color .2s var(--ui); }
.wk-view .btn-arrow { width: 15px; height: 15px; transition: transform .2s var(--ui); }
.wk:hover .wk-view, .wk:focus-visible .wk-view { color: var(--text); }
.wk:hover .wk-view .btn-arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .wk-view .btn-arrow, .wk-view { transition: none; } .wk:hover .wk-view .btn-arrow { transform: none; } }
@media (max-width: 479px) { .wk-meta { grid-template-areas: "name" "line" "view"; grid-template-columns: 1fr; } .wk-view { margin-top: 4px; } }

/* ══ How it works, thin-rule columns (2026-10-11, the ★ layout changes; Cartesia's "Line overview", Resend): no card box and no
   icon disc; the step number large in the headline face; a hairline between the four; the short arrows stay (Dominic,
   2026-10-08: "Keep the short arrows"). Under 1024 a ruled list with one line down the left. ══ */
.how-sec .hw { background: none; border: 0; border-radius: 0; padding: 4px 24px 8px 24px; }
.how-sec .hw + .hw { border-left: 1px solid var(--line); }
.how-sec .hw:first-child { padding-left: 0; }
.how-sec .hw .medal--lg { display: none; }
.how-sec .hw-chip { width: auto; height: auto; background: none; border: 0; border-radius: 0; place-items: start; margin-bottom: 18px; }
.how-sec .hw-num { font-family: var(--serif); font-weight: 400; font-size: 46px; line-height: 1; letter-spacing: -0.02em; }
.how-sec .how-list { column-gap: 0; }
@media (max-width: 1023px) {
  .how-sec .how-list { display: block; border-left: 1px solid var(--line); margin-left: 6px; }
  .how-sec .hw, .how-sec .hw + .hw, .how-sec .hw:first-child { border-left: 0; padding: 4px 0 26px 26px; position: relative; }
  .how-sec .hw::before { content: ""; position: absolute; left: -5px; top: 14px; width: 9px; height: 9px; border-radius: 50%; background: var(--hero-violet); }
  .how-sec .hw-chip { margin-bottom: 6px; }
  .how-sec .hw-num { font-size: 32px; }
}
/* the short arrows are the dividers (the hairline collided with them): the gap comes back, the rules go */
@media (min-width: 1024px) { .how-sec .how-list { column-gap: 56px; } .how-sec .hw, .how-sec .hw + .hw { border-left: 0; padding: 4px 0 8px; } }
@media (max-width: 1023px) {
  .how-sec .how-list { border-left: 0; margin-left: 0; }
  .how-sec .hw::before { display: none; }
  .how-sec .hw, .how-sec .hw + .hw, .how-sec .hw:first-child { padding: 0; margin-bottom: 48px; }
  .how-sec .hw:last-child { margin-bottom: 0; }
}
/* the FAQ (2026-10-11, the ★ layout changes): unboxed rows on hairlines (Vercel's security FAQ), questions in the ink, and a
   closing line that sends the rest to the call */
.faq-rows { background: none !important; border: 0 !important; border-radius: 0 !important; border-top: 1px solid var(--line) !important; }
.faq-rows details { border-bottom: 1px solid var(--line); }
.faq-rows details + details { border-top: 0 !important; }
.faq-rows summary { padding-left: 0 !important; padding-right: 0 !important; font-size: 18px; }
.faq-rows details p { padding-left: 0 !important; padding-right: 48px !important; }
.faq-close { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 26px; font-size: 18px; color: var(--text-2); }
/* the film's foot stays inside the hero (the overlap arm: it covered the next section by its 12 px tilt margin); the foot is the
   page's own colour, so a tilt that lifts it shows no edge */
@media (min-width: 1024px) { .hero-art.hero-wave { bottom: 0; } }
/* under 1024 the block stacks (the later desktop rules above were unscoped and won at 390: a 0 px Board column, a fixed 360 px phone) */
@media (max-width: 1023px) {
  .op-b-head { grid-template-columns: minmax(0, 1fr) !important; row-gap: 24px; }
  .cp-feats { grid-template-columns: minmax(0, 1fr) !important; max-width: none; }
  .cp-fig { grid-template-columns: minmax(0, 1fr) !important; gap: 36px; }
  .cp-phone { width: min(340px, 100%); justify-self: center; }
  .cp-h.cp-h--sans { font-size: clamp(30px, 8.4vw, 40px); }
  .cp-h .ln { white-space: normal; }
}

/* ══ the hero = 04 (Dominic, 2026-10-12: "HERO = 04 exactly. Real HTML text and buttons placed to match it: nav, chip, the
   four-line Gambetta headline, subhead, both buttons, and the purple-tinted logo. Background: a clean plate of 04 … Full
   bleed, no seams, AA contrast."). 04 is the page at 1440 drawn 2.4× (3456 × 2048); every number below is read off it with
   Vision's text boxes and divided by 2.4, in --u: 1 px at 1440, scaled with the screen (0.78–1.5), so the hero is 04 at any
   desktop width — the sky is the plate itself (assets/hero/plate.mjs), the hero exactly its height (853 at 1440). The nav
   takes the same numbers (--un), across the full width like 04's; its links never under 14 px. ══ */
:root { --u: clamp(0.7px, calc(100vw / 1440), 1.5px); --un: var(--u); }
/* the purple-tinted mark (04's: white at its top left, lavender, violet at its foot — sampled #F5F5F7 → #B198E4 → #7E5ECB) */
.site-header .brand .mark { --mark-fill: url(#g-mark); }
@media (min-width: 1024px) {
  body { --nav-rest: calc(var(--un) * 27.4); }                 /* 04's bar centred at 64.9 (was 69.5) */
  .hdr-row { position: relative; max-width: none; margin: 0; }
  .nav-links { position: absolute; left: calc(var(--un) * 506.5); top: 50%; translate: 0 -50%; margin: 0; }   /* 04's links begin at 506.5, whatever their words */
  .nav > .btn--nav { margin-left: auto; }                     /* the links' auto margin pushed it right; out of the row now, the button takes it */
  .hdr-row { padding-left: calc(var(--un) * 88.4); padding-right: calc(var(--un) * 56.7); }
  .site-header .brand { font-size: calc(var(--un) * 23.6); gap: calc(var(--un) * 10.5); }
  .site-header .brand .mark { width: calc(var(--un) * 32.6); height: calc(var(--un) * 32.6); }
  .nav-links { gap: calc(var(--un) * 50); }
  .nav-links a { font-size: max(14px, calc(var(--un) * 17)); }
  .btn--nav { height: calc(var(--un) * 46.25); min-width: calc(var(--un) * 174.6); justify-content: center; font-size: calc(var(--un) * 17); padding: 0 calc(var(--un) * 22); gap: calc(var(--un) * 20); }
}

#hero.hero--plate { background: var(--hero-ground); }
.hero-sky { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; width: auto; height: auto; top: 0; right: 0; left: 0; bottom: 0; }
.hero-sky .sky-drift { position: absolute; inset: 0; transform-origin: 50% 50%; }
.hero-sky picture, .hero-sky .sky-plate { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.hero-sky .sky-plate { object-fit: cover; object-position: 50% 50%; -webkit-mask-image: none; mask-image: none; }
.hero-sky .sky-stars { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-sky .sky-glow { position: absolute; left: 0; top: 0; width: 760px; height: 760px; margin: -380px 0 0 -380px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(150, 112, 255, .17), rgba(118, 92, 232, .07) 55%, rgba(118, 92, 232, 0));
  opacity: 0; transition: opacity .7s var(--ui, ease); mix-blend-mode: screen; }
.hero-sky.has-glow .sky-glow { opacity: 1; }
/* the foot: the plate's last strands ease into the page's own black, so the hero has no edge (04 ends at the screen's) */
#hero.hero--plate::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7%; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(12, 12, 14, 0), var(--page)); }

@media (min-width: 1024px) {
  #hero.hero--plate { height: calc(var(--u) * 853); min-height: 0; padding: 0; overflow: clip; display: block; }
  #hero.hero--plate .hero-copy { position: absolute; z-index: 3; left: calc(var(--u) * 82.5); top: calc(var(--u) * 163.75); width: calc(var(--u) * 720); max-width: none; margin: 0; }
  /* the chip: 04's box 82–513 × 163.8–203.3, its words 12.6 tall and widely spaced */
  #hero.hero--plate .hero-pill { height: calc(var(--u) * 39.6); padding: 0 calc(var(--u) * 18) 0 calc(var(--u) * 17); gap: 0; font-size: max(11px, calc(var(--u) * 12)); letter-spacing: .32em; }
  #hero.hero--plate .hero-pill .pill-dot { margin-right: calc(var(--u) * 12); }
  #hero.hero--plate .hero-pill .mid { margin-inline: calc(var(--u) * 14) calc(var(--u) * 10); }
  /* the headline: 88 on a 81.6 pitch (04's baselines, 82.0 apart as Vision boxes them), its cap line at 243.8 */
  #hero.hero--plate .h1 { position: absolute; left: 0; top: calc(var(--u) * 74.05); margin: 0; width: calc(var(--u) * 720); font-size: calc(var(--u) * 88); line-height: calc(var(--u) * 81.6); }
  /* the line under it: 19.2 / 29.25 from 587.8; the buttons 51.4 tall from 673.6, 185 and 195.4 wide, 23.8 apart */
  #hero.hero--plate .hero-lede { position: absolute; left: 0; top: calc(var(--u) * 424.05); margin: 0; width: max(430px, calc(var(--u) * 540)); max-width: none; font-size: max(15px, calc(var(--u) * 19.2)); line-height: max(22px, calc(var(--u) * 29.25)); }
  #hero.hero--plate .hero-cta { position: absolute; left: 0; top: calc(var(--u) * 509.85); margin: 0; gap: calc(var(--u) * 23.8); }
  #hero.hero--plate .hero-cta .btn, #hero.hero--plate .hero-cta .ghost { height: calc(var(--u) * 51.4); padding: 0; justify-content: center; font-size: max(16px, calc(var(--u) * 18.5)); }
  #hero.hero--plate .hero-cta .btn { width: calc(var(--u) * 185); gap: calc(var(--u) * 24); }
  #hero.hero--plate .hero-cta .ghost { width: calc(var(--u) * 195.4); }
}
/* below 1024: the copy stacks as before on the picture's right side (where the strands cross), a stronger fade under it */
@media (max-width: 1023px) {
  #hero.hero--plate { overflow: clip; }
  #hero.hero--plate .hero-sky .sky-plate { object-position: 70% 50%; }
  #hero.hero--plate .hero-sky::after { content: ""; position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(180deg, rgba(2, 7, 19, .74) 0, rgba(2, 7, 19, .84) 34%, rgba(2, 7, 19, .84) 62%, rgba(2, 7, 19, .76) 80%, rgba(2, 7, 19, .5) 100%); }   /* the violet lines sit on the bright crossing here: .84 under them holds AA (measured with the glow off — a phone has none) */
  #hero.hero--plate .hero-copy { position: relative; z-index: 3; }
}
/* the strip that sat at the hero's foot, now its own band under the hero */
.hero-strip { padding-top: calc(var(--u) * 56); padding-bottom: calc(var(--u) * 24); }
.hero-strip .hero-feats { margin-top: 0; }
@media (max-width: 1023px) { .hero-strip { padding: 28px var(--gutter) 8px; } }
/* 04's own inks, sampled on the picture: the headline white and violet, the line under it, the links, the chip's words, the
   outlined button's edge */
#hero.hero--plate .h1 { color: #FFFFFF; }
#hero.hero--plate .h1 .violet { color: #7A54C1; }
#hero.hero--plate .hero-lede { color: #C7C7D2; }
#hero.hero--plate .hero-pill { color: #A6A6B0; }
#hero.hero--plate .hero-cta .ghost { border-color: #8981A5; background: transparent; }
@media (min-width: 1024px) { .nav-links a { color: #BFC0C7; } }
/* motion off and the still: the sky stands still (04 itself) */
html:not(.mo) .hero-sky .sky-drift { transform: none !important; }
html:not(.mo) .hero-sky .sky-glow { display: none; }

/* ══ the phone = 05 with the real portal's tabs, and the head row beside it from 1280 (Dominic, 2026-10-12: "The three
   features sit BESIDE the headline from 1280 up (scale the headline to fit, don't stack)"). The tabs as console f9e4734
   draws them: the card's ground, a hairline over them, the words only, the current one in the ink with a 2 px line above
   it (the portal keeps its accent for the current dot). The headline is sized to its column (cqw of the head row), so
   its two lines always fit beside the features. ══ */
.cp-tabs { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0; background: #1C1915; border-top: 1px solid #2E2A24; font-size: 11px; line-height: 1.4; font-weight: 500; color: #B5AEA4; text-align: center; }
.cp-tabs span { display: flex; align-items: center; justify-content: center; min-height: 42px; }
.cp-tabs .is-on { color: #F0EEEA; font-weight: 600; box-shadow: inset 0 2px 0 #F0EEEA; }
@media (min-width: 1280px) {
  .op-b-head { container-type: inline-size; grid-template-columns: minmax(0, 42fr) minmax(0, 54fr); column-gap: 4%; align-items: start; row-gap: 0; }
  .cp-h.cp-h--sans { font-size: clamp(32px, 3.15cqw, 62px); }
  .cp-h .ln { white-space: nowrap; }
  .cp-feats { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; gap: 2.2cqw; margin-top: 4px; }
  .cp-feats .feat--side { gap: 1.1cqw; }
  .cp-feats .medal--ring { width: clamp(46px, 4.1cqw, 62px); height: clamp(46px, 4.1cqw, 62px); flex: none; }
  .cp-feats .medal--ring svg { width: clamp(20px, 1.75cqw, 26px); height: clamp(20px, 1.75cqw, 26px); }
  .cp-feats .feat-t { font-size: clamp(16px, 1.3cqw, 19px); }
  .cp-feats .feat-p { font-size: 16px; }
}
/* the chip's new words (2026-10-12, "Get more customers / Run your business") are longer than the old pair: on a phone they
   keep inside the pill at 11 px with a tighter spacing */
@media (max-width: 639px) { #hero.hero--plate .hero-pill { font-size: 11px; letter-spacing: .05em; padding: 0 12px; gap: 8px; } #hero.hero--plate .hero-pill .mid { margin-inline: 5px; } }
/* on a phone the violet lines sit over the strands' crossing: 04's #7A54C1 can reach at most 3.7 : 1 even on its navy, so below
   1024 the same violet is lifted to #8E70D4 (≈ 5.3 : 1 on the navy) and holds AA there (04 itself is a desktop picture) */
@media (max-width: 1023px) { #hero.hero--plate .h1 .violet { color: #8E70D4; } }

/* the strands flowing (Dominic's yes, 2026-10-12): the Kling loop of the plate, placed by app.js exactly over the rows of the
   plate it was made from (the plate's 16:9 cut, rows 52-1996), its top and bottom edges feathered into the plate; it shows
   only once it plays, from 1024 px up and with motion allowed — otherwise the plate is the picture */
.hero-sky .sky-film { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; object-fit: fill; opacity: 0;
  transition: opacity .9s ease; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 4%, #000 96%, transparent 100%); }
.hero-sky .sky-film.is-on { opacity: 1; }
@media (max-width: 1023px) { .hero-sky .sky-film { display: none; } }
html:not(.mo) .hero-sky .sky-film { display: none; }

/* the concept builds' "Try it", HELD (Dominic, 2026-10-12) until Lane B2 ships the sample software */
.cbs-try[hidden] { display: none !important; }

/* the phone follows the real portal's 05 look (Lane A, live 2026-10-12 15:49 PT, console migration 066; its screenshots
   docs/proofs/2026-10-12-portal-look/portal-dark-390.png): a menu button at the left of the header, an icon on every tab
   with the current one on a violet tile (#7a55e0, its word in the accent), and the navy dark mode (ground #0f1421, card
   #171d2c) in place of the warm near-black */
.cp-phone-body { background: #0b0f19; border-color: #2c3346; }
.cp-head { border-bottom-color: #252c3d; background: #0f1421; }
.cp-menu { display: inline-grid; align-content: center; gap: 3px; width: 26px; height: 26px; padding: 0 6px; border-radius: 7px; border: 1px solid #2c3346; background: #171d2c; flex: none; }
.cp-menu i { display: block; height: 1.5px; border-radius: 1px; background: #E8EBF2; }
.cp-mark { background: #E8EBF2; color: #0f1421; }
.cp-scroll { background: #0f1421; }
.cp-intro, .cp-label, .cp-meta, .cp-steps li, .cp-steps li span, .cp-letter-meta, .cp-sign { color: #A3ABBD; }
.cp-card, .cp-letter { background: #171d2c; border-color: #252c3d; }
.cp-letter-body { color: #D5DAE4; }
.cp-steps li::before { background: #0f1421; border-color: #8790A3; }
.cp-steps li::after { background: #3A4256; }
.cp-tabs { background: #0f1421; border-top: 1px solid #252c3d; box-shadow: none; padding: 7px 4px 2px; color: #A3ABBD; }
.cp-tabs span { gap: 3px; font-weight: 500; }
.cp-tabs .is-on { color: #B9A3F5; box-shadow: none; font-weight: 600; }
.cp-tile { display: grid; place-items: center; width: 30px; height: 26px; border-radius: 8px; }
.cp-tabs .is-on .cp-tile { background: #7a55e0; color: #FFFFFF; }
.cp-tico { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cp-homebar { background: #E8EBF2; }
.cp-tabs span { flex-direction: column; min-height: 48px; }

/* (2026-10-16, Dominic: "reveals slowed and eased") the reveals the SCROLL brings in take Diaz Co's pace — .9 s (1.1 s for the
   windows) on the same curve (--arrive = cubic-bezier(.23,1,.32,1), Diaz Co's own), 20 px of travel. scroll.js marks <html>
   "scrolled" at the first scroll; what is on the first screen at load keeps .62 s, because slowing it delayed /contact's
   first paint of its time slots (phone LCP +260 ms, bisected). Only transform and opacity move: no layout shift. */
html.mo.scrolled [data-rise]:not(.in) { transform: translateY(20px); }
html.mo.scrolled [data-rise] { transition-duration: .9s, .9s; }
html.mo.scrolled [data-rise="win"]:not(.in), html.mo.scrolled [data-dev]:not(.in) { transform: translateY(32px); }
html.mo.scrolled [data-rise="win"], html.mo.scrolled [data-dev] { transition-duration: 1.1s; }
html.mo.scrolled .btn[data-rise] { transition: opacity .9s var(--arrive) var(--d, 0ms), transform .9s var(--arrive) var(--d, 0ms), background-color .16s var(--ui) 0ms, scale .1s var(--ui) 0ms; }
html.mo.scrolled .wyg-card[data-rise], html.mo.scrolled .rc[data-rise] { transition: opacity .9s var(--arrive) var(--d, 0ms), transform .9s var(--arrive) var(--d, 0ms), translate .2s var(--ui) 0ms; }

/* Lenis 1.3.26's own stylesheet (dist/lenis.css), carried here so no extra file is fetched (2026-10-16) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch], .lenis [data-lenis-prevent-vertical], .lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }