/* ===========================================================================
CASEFLOW NOTE — marketing site
---------------------------------------------------------------------------
Aesthetic: "Daylight Eucalypt" — the app's own design system (Fraunces +
DM Sans, cream + eucalyptus teal, from yarn-note/utils/theme.ts) in a bright,
warm, airy register. The organising image is the light in the hero film:
late-afternoon sun, a warm room, a phone in one hand.
Light grounds carry the whole page. Exactly two dark moments — the practice
doctrine quote and the footer — and both are deep EUCALYPTUS, not black, so
the page never goes cold.
Zero dependencies — no GSAP, no Lenis, no CDN JS. A content site with an
LCP budget of 2.5s does not get to spend 90KB on scroll easing; the reveal
work is ~2KB of IntersectionObserver in script.js.
=========================================================================== */
/* ===========================================================================
0 · FONTS — self-hosted (was Google Fonts: render-blocking cross-origin
fetch + FOUT swap, the page's only remaining CLS residual).
---------------------------------------------------------------------------
Weight/style ranges mirror actual usage in this file (Fraunces 300–600
roman+italic; DM Sans 400–700 roman, 400 italic only). Latin subset only —
Google's css2 also serves latin-ext/vietnamese ranges this site never uses.
Fraunces MUST be requested from Google's css2 API with the SOFT and WONK
axes explicit in the family tuple (…SOFT,WONK,wght@…) or Google silently
drops them from the delivered variable font — confirmed against the file
this site's OWN production in index.html for why it rebuilds the gradient above in
GLSL rather than refracting a photograph.
LAYERING inside .hero, bottom to top:
- .hero's own background gradient (untouched — it is the fallback)
0 .hero-water the simulated surface
1 .hero::after the readability veil
2 .hero-wrap copy + stage
.hero-wrap moved from z-index 1 to 2 to make room for the veil. That is the
ONLY line of pre-existing CSS this feature changes.
ROLLBACK: delete this section, revert .hero-wrap's z-index to 1, drop
.hero-water from the print and reduced-motion lists below, and remove the
from index.html. Nothing in §7 was edited, so the hero returns to
exactly what it was. `git checkout -- styles.css index.html script.js` does
the same in one command — www-v2/ is a clean git repo, so that IS the
rollback; ../rollback-hero-water-2026-08-19/ holds file copies as well.
That directory lives OUTSIDE www-v2 on purpose: build-www.sh copies the
whole source tree into the dist, so anything left in here ships.
=========================================================================== */
.hero-water {
position: absolute; inset: 0; z-index: 0;
display: block; width: 100%; height: 100%;
/* Events belong to .hero, which is what the module listens on — the canvas
must not swallow them or the CTAs beneath the pointer stop hovering. */
pointer-events: none;
/* Held back until a frame has actually been drawn, so a device that fails
halfway through WebGL setup never flashes a bare canvas over the wash. */
opacity: 0;
transition: opacity 1100ms ease;
/* "Top background": the surface is strongest at the masthead and dissolves
into the existing wash well before the fold, so the bottom edge of the
hero — where it meets the page's paper — is unchanged. */
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 44%, rgba(0,0,0,.52) 74%, transparent 100%);
mask-image: linear-gradient(180deg, #000 0%, #000 44%, rgba(0,0,0,.52) 74%, transparent 100%);
}
.hero-water.is-live { opacity: 1; }
/* The readability veil. flowoutcomes.au darkens toward its headline; this page
does the opposite and LIGHTENS, because the contrast at risk here is dark
ink on a moving pale ground, plus the 1px strokes of the five-beat stage.
Three layers: calm the copy column, settle the ground under the stage, and
return to the wash at the fold.
Gated on .has-water, which the module adds to .hero only once a frame has
been drawn. The veil exists solely to protect contrast FROM the water, so on
any device that never gets the water — no WebGL, shader failure,
prefers-reduced-motion — it must not paint either, or the fallback would be
a quietly lightened version of the hero rather than the hero. With this
gate the fallback is the current design pixel for pixel. */
/* 2026-08-21: was `.hero.has-water::after`. The hero no longer runs the water,
so that class is never added and the veil would have vanished with it. Scoped
to the two heroes that actually want one rather than to bare `.hero` —
training.html also has a .hero, and has never had a veil over it. */
.hero.is-deep::after,
.hero.has-water::after {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background:
linear-gradient(100deg, rgba(244,250,247,.80) 0%, rgba(244,250,247,.52) 36%, rgba(244,250,247,0) 64%),
radial-gradient(56% 60% at 74% 50%, rgba(251,249,245,.40) 0%, rgba(251,249,245,0) 72%),
linear-gradient(0deg, rgba(230,241,237,.82) 0%, rgba(230,241,237,0) 24%);
}
/* ===========================================================================
7c · DEEP HERO — the app's own register, added 20 Aug 2026
---------------------------------------------------------------------------
`class="hero is-deep"` swaps the pale eucalyptus wash for the ground the
product's own home screen uses: brand.earth into brand.barkDark
(utils/theme.ts:62-63), water on top, the BrandGlyph rings ghosted
underneath, cream serif over it.
WHY. The pale full-bleed version read as a stock WebGL hero — the effect was
a BACKGROUND, and a background is where every site puts water. On the app's
home card the water is an OBJECT: dark, bounded, carrying the primary action
in cream Fraunces, with the mark submerged in it. Dark, contained and marked
is what makes it ours; pale and ambient is what made it anyone's.
NOT A NEW REGISTER. --on-deep / --on-deep-2 / --on-deep-3, .band-deep,
.h2-light, .sec-lede-light and .eyebrow-light already exist in this
stylesheet — dark grounds were designed for here from the start. This
section reuses those tokens rather than inventing hero-only colours.
THE FALLBACK IS DIFFERENT HERE, deliberately. In section 7b the no-WebGL
fallback is .hero's own gradient. It cannot be that here: the copy is cream,
so the ground must be dark whether or not the water ever runs. The static
deep gradient below therefore applies unconditionally, and only the moving
surface is conditional.
ROLLBACK: remove `is-deep` from the in index.html and
`deep-hero` from . Everything in this section is scoped under one of
those two classes, so the pale hero returns untouched.
=========================================================================== */
/* 2026-08-21 — THE PLATE, AND NO WATER OVER IT.
The ripple was tried behind this first and taken off: refraction over a
treeline tears it into what read as scratches, and refraction over a face
reads as a defect rather than a surface, because people are exquisitely
tuned to facial geometry. The water still owns every other deep surface in
the product; it just does not belong on top of a photograph of a person.
`left center` is deliberate and counter-intuitive. The plate is wider than
the hero, so cover crops the RIGHT — which pushes her toward the right edge,
clear of the stage cards, and leaves the quiet dark bush under the copy.
Centring her puts her face directly behind the case-history card.
The grade is baked into the asset rather than done with a CSS filter: no
filter cost, no repaint on scroll, and what ships is exactly what was
measured. 28 KB at 1280, 39 KB at 1600. */
.hero.is-deep {
background:
radial-gradient(58% 50% at 88% 8%, rgba(79,192,166,.14) 0%, transparent 62%),
radial-gradient(70% 62% at 12% 96%, rgba(5,38,32,.55) 0%, transparent 64%),
image-set(url("assets/hero-bush-1600.webp") 1x) left center / cover no-repeat,
linear-gradient(160deg, #1A6658 0%, #1E7466 52%, #17594D 100%);
}
@media (max-width: 900px) {
/* Narrower viewport crops harder, so take the smaller plate and pull the
framing back toward her — at phone widths the bush is mostly gone and she
is the only thing left worth keeping. */
.hero.is-deep {
background:
radial-gradient(70% 62% at 12% 96%, rgba(5,38,32,.55) 0%, transparent 64%),
image-set(url("assets/hero-bush-1280.webp") 1x) 34% center / cover no-repeat,
linear-gradient(160deg, #1A6658 0%, #1E7466 52%, #17594D 100%);
}
}
/* Full bleed: no bottom fade. The pale version dissolved into the page because
it was a wash; this one is an object, and an object wants an edge. */
.hero.is-deep .hero-water {
-webkit-mask-image: none;
mask-image: none;
}
/* Left-weighted depth so the cream type has something solid under it — the
same move the app card makes, and flowoutcomes.au's scrim, inverted back to
dark now that the ground is dark again. */
.hero.is-deep::after {
background:
/* 2026-08-21: was .80/.52/.08 to 66%. Strengthened when the hero plate went
in behind the water. The plate is a graded photograph rather than a
duotone, so it is lighter than the procedural ground it replaced and the
copy column lost contrast: measured 2.94:1 against white, an AA fail.
This lands it at 4.94:1, and it is the right lever because it is local to
the type — the right-hand side, where she is, is untouched. */
linear-gradient(102deg, rgba(6,40,34,.94) 0%, rgba(6,40,34,.70) 42%, rgba(6,40,34,.12) 72%),
linear-gradient(0deg, rgba(6,40,34,.34) 0%, rgba(6,40,34,0) 24%),
/* fixed dark pool under the stage caption — see .hv-caption's note */
radial-gradient(32% 13% at 69% 79%, rgba(6,40,34,.45) 0%, rgba(6,40,34,0) 72%),
/* the nav sits directly on this — hold the top band down so the links keep
their contrast before .is-stuck paints its own backdrop */
linear-gradient(180deg, rgba(6,40,34,.52) 0%, rgba(6,40,34,0) 14%);
}
/* — copy, inverted — */
/* NOT --euc-light: #4FC0A6 measures 3.70:1 against the brightest water
this zone reaches — an AA fail that predates the deep hero's tuning
pass (the original probe measured this zone with cream by mistake).
#7FD3BD is the app's own dark-palette `earth` accent (utils/theme.ts
line 22) — the token the product already uses for exactly this job,
accent-on-deep-teal — and measures 5.19:1 on the same worst case. */
.hero.is-deep .eyebrow { color: #7FD3BD; }
.hero.is-deep .display { color: var(--on-deep); }
/* Cream for the emphasis too, not the accent teal: the app card sets
and lets the italic carry the distinction. On this
ground the accent would also be the weakest contrast on the page. */
.hero.is-deep .display em { color: var(--on-deep); }
/* Lifted above --on-deep-2's 76% — that left only 0.08 of AA headroom on
the lede, which pinned the scrim at black-hole strength. The brighter
text pays for the gentler scrim; both were remeasured together. */
.hero.is-deep .hero-lede { color: rgba(237,244,241,.88); }
.hero.is-deep .hero-facts { border-top-color: rgba(237,244,241,.20); }
.hero.is-deep .hero-facts li { color: rgba(237,244,241,.86); }
.hero.is-deep .hero-facts b { color: var(--on-deep); }
.hero.is-deep .hero-facts svg { color: var(--euc-light); }
/* The caption sits on OPEN water — bright caustic veins pass directly
behind it, and the veil doesn't reach this far right. Full cream plus
a soft dark halo; the veil below adds a fixed dark pool under the
whole caption zone, which is what actually carries the AA number
(cream alone measured 4.14:1 against the brightest caustic phase). */
.hero.is-deep .hv-caption {
color: var(--on-deep);
text-shadow: 0 1px 16px rgba(6,40,34,.85), 0 0 4px rgba(6,40,34,.6);
}
/* The stage surfaces carry shadows tuned for cream paper
(rgba(16,49,41,.28-.36)) which vanish on teal — the white card read as
pasted on rather than floating. On a mid-toned ground a darker,
tighter shadow reads as depth again. */
.hero.is-deep .hv-frame {
box-shadow:
0 1px 0 rgba(255,255,255,.9) inset,
0 34px 70px -22px rgba(3,26,21,.62),
0 12px 28px -12px rgba(3,26,21,.42);
}
.hero.is-deep .hv-note { box-shadow: 0 14px 32px -14px rgba(3,26,21,.6); }
.hero.is-deep .hv-fold { box-shadow: 0 18px 36px -16px rgba(3,26,21,.62); }
/* — buttons on the deep ground —
The filled button inverts to cream-on-teal, which is what the app does with
its own primary surfaces; --euc-deep on --on-deep clears AA comfortably. */
.hero.is-deep .btn-primary {
background: var(--on-deep); color: var(--euc-deep);
box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 12px 32px rgba(26,102,88,.28);
}
.hero.is-deep .btn-primary:hover {
background: #fff; color: var(--euc-deep);
box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 18px 38px rgba(26,102,88,.34);
}
.hero.is-deep .btn-outline {
color: var(--on-deep);
background: rgba(237,244,241,.15);
border-color: rgba(237,244,241,.46);
}
.hero.is-deep .btn-outline:hover {
background: rgba(237,244,241,.24);
border-color: rgba(237,244,241,.7);
}
/* — nav over the deep hero —
.nav is fixed and transparent until it sticks, so at the top of this page it
sits directly on the water with --ink links. Inverted only while unstuck;
the moment .is-stuck paints its light backdrop the normal colours are right
again. Scoped to body.deep-hero so no other page is touched. */
body.deep-hero .nav:not(.is-stuck) .brand,
body.deep-hero .nav:not(.is-stuck) .nav-menu > a { color: var(--on-deep); }
body.deep-hero .nav:not(.is-stuck) .nav-menu > a:hover {
color: #fff; background: rgba(237,244,241,.12);
}
body.deep-hero .nav:not(.is-stuck) .nav-menu > a.nav-cta {
background: var(--on-deep); color: var(--euc-deep);
}
body.deep-hero .nav:not(.is-stuck) .nav-menu > a.nav-cta:hover { background: #fff; }
.hero-wrap {
position: relative; z-index: 2;
display: grid;
/* Not 1fr 1fr. At beat 5 the visual side has to hold a note card, a flight
track and a desktop window side by side — 488px of hard minimum — and an
even split starved the flight to ~20px, which is the one thing in this
hero the founder asked to feel special ("like it jumps over"). The copy
side loses ~40px it had spare. */
grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
align-items: center;
gap: clamp(30px, 4.4vw, 60px);
}
.hero-copy { max-width: 560px; }
.hero-lede {
margin-top: 18px;
font-size: clamp(1.02rem, 1.3vw, 1.14rem);
line-height: 1.6;
color: var(--ink-2);
max-width: 46ch;
}
.hero-facts {
display: grid; gap: 10px;
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid rgba(16,49,41,.14);
}
.hero-facts li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.hero-facts svg { color: var(--euc); flex: none; margin-top: 2px; }
.hero-facts b { font-weight: 600; color: var(--ink); }
/* ── THE STAGE — five illustrative beats ──────────────────────────────
REBUILT 17 Aug 2026 (second pass). What was here before: six faithful
recreations of real app screens inside a 268px-wide phone. Accurate to
the pixel and unreadable — 7.6px metadata, 8px tile sublabels, 9.2px
options. A visitor spent fifteen seconds squinting at a device instead
of one second understanding a product, which is fidelity to the
screenshots winning over fidelity to the IDEA.
Now: five beats, one oversized readable idea each, on one large surface,
with a narrator line that changes underneath. The SMALLEST type inside
the board is 12px at desktop. That constraint is the whole rebuild.
Two structural rules make the rest safe:
1. .hv-board has a hard px height per breakpoint and every beat is
position:absolute inside it. Nothing a beat does — a note card
growing, a case-history row expanding, a plane taking off — can
change the page's layout. The ~16s sequence costs zero CLS by
construction, not by luck.
2. Every staggered entrance uses `backwards` fill and NO forwards fill,
so its resting state is the element's own base style. That is what
lets the reduced-motion block simply say `animation: none` without
stranding anything at opacity 0 — the trap that bit this file twice.
──────────────────────────────────────────────────────────────────── */
.hv-stage { display: grid; }
.hv-board {
position: relative;
width: 100%;
/* 424px, and every beat is measured against it below. See the size
budget in each beat's own comment. */
height: 424px;
transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
/* Scene 0 is the ONLY state that hides the board, and it exists solely for
the moment between script start and sequence start. The visible state is
the BASE state, so a page whose JS never runs still renders the finished
beat-5 tableau. Replay goes 5 → 1 and never passes 0, so this transition
does not re-fire and the board never flashes out mid-replay. */
.hv-stage[data-scene="0"] .hv-board { opacity: 0; transform: translateY(18px) scale(.975); }
/* Beats 1–4 share ONE surface — a single element wrapping four beats rather
than four separately-framed cards, because the surface itself is what
recedes at beat 5. overflow:hidden is load-bearing: the beats push in and
out horizontally and must be clipped by the device edge. */
.hv-frame {
position: absolute; inset: 0;
border-radius: 24px; overflow: hidden;
background: var(--surface);
border: 1px solid var(--line);
box-shadow:
0 1px 0 rgba(255,255,255,.9) inset,
0 30px 60px -26px rgba(16,49,41,.28),
0 10px 24px -14px rgba(16,49,41,.14);
transition: opacity .42s var(--ease), transform .55s var(--ease-out);
}
.hv-stage[data-scene="5"] .hv-frame { opacity: 0; transform: translateX(-7%) scale(.86); }
/* Beats push rather than cross-fade — the way the app itself navigates.
Default is "waiting off to the right"; `.is-past` (set by script.js) is
"already been, gone left". CSS can express "is the active beat" but not
"is behind us" without enumerating every scene/beat pair, so direction is
carried by one class. */
.hv-beat {
position: absolute; inset: 0;
display: flex; flex-direction: column;
padding: 16px 20px 20px;
opacity: 0; transform: translateX(15%);
/* visibility rides along, delayed past the exit so the outgoing beat stays
paintable while it slides — then goes genuinely invisible. Opacity alone
was not enough: axe computes contrast on opacity-0 text mid-fade, and
Lighthouse caught beat 1's "Back" label blended to near-white against the
panel (1.02:1) while the beat was hidden. visibility:hidden removes the
text from that computation entirely. */
visibility: hidden;
transition: opacity .34s var(--ease), transform .52s var(--ease-out),
visibility 0s .52s;
}
.hv-beat.is-past { transform: translateX(-13%); }
.hv-stage[data-scene="1"] .hv-beat[data-b="1"],
.hv-stage[data-scene="2"] .hv-beat[data-b="2"],
.hv-stage[data-scene="3"] .hv-beat[data-b="3"],
.hv-stage[data-scene="4"] .hv-beat[data-b="4"] {
opacity: 1; transform: none;
visibility: visible; transition-delay: 0s;
}
/* — the app's own chrome, per beat —
space-between, and deliberately no auto margins: an auto margin consumes
free space BEFORE justify-content does, so `margin-left:auto` on the
third child would pack the first two together and un-centre the step
counter. */
.hv-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 26px; }
.hv-i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hv-back { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--euc); }
.hv-back .hv-i { width: 16px; height: 16px; stroke-width: 2.2; }
.hv-spk { color: var(--ink-3); }
.hv-pill { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--paper-2); color: var(--ink-2); }
.hv-pill .hv-i { width: 14px; height: 14px; stroke-width: 2.2; }
.hv-step { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.hv-stepdot { width: 6px; height: 6px; border-radius: 50%; background: var(--euc-mid); flex: none; }
/* The review screen's real segmented control. is the selected half and
the unselected one — element choice carries the state, so there is no
third class to keep in sync with the markup. */
.hv-seg {
display: inline-flex; align-items: center; gap: 3px; flex: none;
padding: 3px; border-radius: 999px; background: var(--paper-2);
font-size: 12px; font-weight: 600;
}
.hv-seg b, .hv-seg i { display: inline-flex; padding: 5px 11px; border-radius: 999px; font-style: normal; }
.hv-seg b { background: var(--surface); color: var(--euc); box-shadow: 0 1px 3px -1px rgba(16,49,41,.22); }
.hv-seg i { color: var(--ink-3); }
.hv-prog { flex: none; height: 3px; border-radius: 3px; background: var(--line); margin-top: 12px; overflow: hidden; }
.hv-prog span { display: block; height: 100%; border-radius: 3px; background: var(--euc); }
.hv-q {
flex: none; margin-top: 14px;
font-family: var(--display); font-weight: 600;
font-variation-settings: "SOFT" 18, "opsz" 30;
font-size: 17px; line-height: 1.3; letter-spacing: -.012em;
color: var(--ink);
}
/* ── beat 1 · the visit ──────────────────────────────────────────────
Size budget, desktop (board 424 − 2 border − 36 padding = 386 of beat
height): bar 26 + question 22 + 14 margin leaves 324 for the tiles;
three columns, two rows, 12px gap = 156px rows against ~106px of tile
content, so the tiles are generously airy rather than cramped.
──────────────────────────────────────────────────────────────────── */
.hv-tiles {
flex: 1 1 auto; min-height: 0; margin-top: 14px;
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
grid-auto-rows: 1fr; gap: 12px;
}
.hv-tile {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 3px; padding: 12px 8px; text-align: center;
border-radius: 14px;
background-color: var(--euc-wash);
box-shadow: inset 0 0 0 1px rgba(33,122,106,.10);
}
.hv-ico {
width: 44px; height: 44px; border-radius: 50%; flex: none;
display: grid; place-items: center; margin-bottom: 4px;
background: var(--surface); color: #38473F;
box-shadow: 0 4px 10px -4px rgba(16,49,41,.26);
}
.hv-ico .hv-i { width: 22px; height: 22px; stroke-width: 1.5; }
.hv-tile b {
font-family: var(--display); font-weight: 600;
font-variation-settings: "SOFT" 16, "opsz" 20;
font-size: 13.5px; line-height: 1.18; color: var(--ink);
}
/* --ink-2, not --ink-3: the --ink-3 token is documented as ">=4.55:1 on
every surface incl. the tinted washes" but was tuned against --clay-wash,
and the eucalyptus washes are darker. Opt up rather than trust it. */
.hv-tile i { font-size: 12px; font-style: italic; line-height: 1.25; color: var(--ink-2); }
/* ── beat 2 · just talk ──────────────────────────────────────────────
Size budget, desktop: bar 26 + prog 15 + fragments 167 + mic 94 +
"Listening" 26 = 328 in 386, so space-between leaves ~14px between each
pair — enough that the outermost ripple (1.75 × a 76px button, i.e.
26px of reach) clears the last fragment instead of washing over it.
──────────────────────────────────────────────────────────────────── */
.hv-beat[data-b="2"] { justify-content: space-between; }
.hv-frags { flex: none; display: grid; justify-items: start; gap: 10px; width: 100%; margin-top: 16px; }
.hv-frag {
max-width: 84%;
padding: 11px 15px;
border-radius: 16px 16px 16px 5px;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: 0 8px 18px -12px rgba(16,49,41,.28);
font-size: 14px; font-style: italic; line-height: 1.4; color: var(--ink-2);
}
/* One fragment lands on the other side, tail flipped — three identically
placed bubbles read as a list, alternating ones read as a conversation. */
.hv-frag-r { justify-self: end; border-radius: 16px 16px 5px 16px; }
.hv-mic-wrap { flex: none; position: relative; width: 76px; height: 76px; margin: 18px auto 0; }
.hv-mic {
position: absolute; inset: 0; border-radius: 50%;
display: grid; place-items: center;
background: var(--euc); color: #fff;
box-shadow: 0 12px 26px -12px rgba(33,122,106,.7);
}
.hv-mic .hv-i { width: 32px; height: 32px; stroke-width: 1.8; }
/* Rings, not an animated box-shadow spread: transform+opacity only, and
three of them can be staggered off one keyframe. */
.hv-mic-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--euc-mid); opacity: 0; }
.hv-listen {
flex: none; margin-top: 10px;
display: flex; align-items: center; justify-content: center; gap: 7px;
font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
color: var(--euc);
}
.hv-listen i { width: 7px; height: 7px; border-radius: 50%; background: var(--clay); flex: none; }
/* ── beat 3 · it becomes a note ──────────────────────────────────────
`margin: auto 0` rather than justify-content:center on the beat, so the
bar stays pinned at the top and only the card centres in what is left.
──────────────────────────────────────────────────────────────────── */
.hv-note {
margin: auto 0;
padding: 18px 18px 20px;
border-radius: 16px;
background: var(--paper);
border: 1px solid var(--line);
box-shadow: 0 12px 28px -18px rgba(16,49,41,.3);
}
.hv-note-h {
display: flex; align-items: center; gap: 10px;
font-family: var(--display); font-weight: 600;
font-variation-settings: "SOFT" 16, "opsz" 24;
font-size: 15.5px; color: var(--ink);
}
.hv-note-h .hv-chip { margin-left: auto; }
/* Gold use #2 of exactly two in this stage (the other is the landing
burst) — and it is the app's real "Draft" chip, not decoration. */
.hv-chip {
flex: none; padding: 2px 9px; border-radius: 999px;
background: var(--gold-wash); color: var(--gold-ink);
font-family: var(--body); font-size: 12px; font-weight: 700;
letter-spacing: .05em; text-transform: uppercase;
}
.hv-note-m { margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.hv-note-rule { height: 1px; background: var(--line); margin: 12px 0; }
.hv-note-l { position: relative; padding-right: 22px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.hv-note-l + .hv-note-l { margin-top: 10px; }
.hv-pen { position: absolute; right: 0; top: 5px; width: 14px; height: 14px; color: var(--ink-3); }
/* The provenance highlight is a background IMAGE, not a background colour,
so the sweep can be animated as background-size (paint only, no layout)
from 0 to full width. box-decoration-break:clone keeps the padding and
radius on both halves when a mark wraps across a line. */
.hv-note-l mark,
.hv-fold-b mark {
background-color: transparent;
background-image: linear-gradient(var(--euc-wash), var(--euc-wash));
background-repeat: no-repeat;
background-size: 100% 100%;
color: inherit; border-radius: 3px; padding: 0 2px;
-webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* ── beat 4 · safety, every time ─────────────────────────────────────
The base style of `.is-pick` is the ANSWERED state — tinted row, euc
ring, tick drawn. The animation runs from the unanswered state via
`backwards` fill, which means a no-JS or reduced-motion reader sees a
finished answer rather than an empty radio, and nothing has to be
un-stranded when the animation is switched off.
──────────────────────────────────────────────────────────────────── */
/* flex:1 + align-content:center rather than a margin: the three options centre
in whatever height is left under a question that wraps to one, two or three
lines depending on width, instead of leaving 114px of dead paper at 1440px
and none at 320px. */
.hv-opts {
flex: 1 1 auto; min-height: 0;
display: grid; align-content: center; gap: 10px; margin-top: 16px;
}
.hv-opt {
display: flex; align-items: center; gap: 12px;
padding: 13px 14px; border-radius: 12px;
background-color: var(--paper-2);
box-shadow: inset 0 0 0 1px rgba(22,36,31,.05);
font-size: 14px; line-height: 1.45; color: var(--ink);
}
.hv-radio { position: relative; width: 24px; height: 24px; flex: none; border-radius: 50%; border: 1.6px solid var(--line-2); background: var(--surface); }
.hv-opt.is-pick { background-color: var(--euc-wash); box-shadow: inset 0 0 0 1.6px var(--euc-mid); }
.hv-opt.is-pick .hv-radio { border-color: var(--euc); }
/* NO vector-effect here. `non-scaling-stroke` resolves the dash pattern in
screen space, which defeats the pathLength="1" normalisation the
dashoffset draw depends on — the tick would never fully hide. */
/* A definite 15px box, not `inset: 3px`. An inline with a viewBox but no
width/height attributes is a replaced element with an intrinsic ratio, and an
absolutely-positioned replaced element with `width: auto` takes its INTRINSIC
width and treats the opposite inset as over-constrained — the size would come
out engine-dependent. 3 + 15 + 3 = 21 ≈ the radio's 20.8px content box. */
.hv-tick { position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; }
.hv-tick path {
fill: none; stroke: var(--euc); stroke-width: 3.2;
stroke-linecap: round; stroke-linejoin: round;
stroke-dasharray: 1; stroke-dashoffset: 0;
}
/* ── beat 5 · already there ──────────────────────────────────────────
Three columns at desktop: the note card, the flight track, the desktop
window. 176 + 16 + 296 = 488 against a 525–562px board, so it fits with
room at every desktop width. Below 1350px (nav's hamburger breakpoint,
raised from 1100 19 Aug 2026, see "6 · NAV") the same three things
stack and the flight swaps to the vertical arc.
──────────────────────────────────────────────────────────────────── */
.hv-b5 {
position: absolute; inset: 0;
display: grid;
grid-template-columns: minmax(0, 176px) minmax(16px, 1fr) minmax(0, 296px);
align-items: center;
opacity: 0;
transition: opacity .45s var(--ease);
}
.hv-stage[data-scene="5"] .hv-b5 { opacity: 1; }
/* grid-row is stated, not left to auto-placement: two items with definite
columns and auto rows land in row 1 only because the placement cursor happens
to allow it, and that is not a thing to leave to chance in a 3-column track. */
.hv-fold {
grid-column: 1; grid-row: 1; justify-self: center;
width: 100%; max-width: 176px;
padding: 14px 14px 15px;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: 0 16px 32px -18px rgba(16,49,41,.36);
}
.hv-fold-h { font-family: var(--display); font-weight: 600; font-variation-settings: "SOFT" 16, "opsz" 22; font-size: 14px; color: var(--ink); }
.hv-fold-m { margin-top: 2px; font-size: 12px; color: var(--ink-3); }
.hv-fold-rule { height: 1px; background: var(--line); margin: 9px 0; }
.hv-fold-b { font-size: 13px; line-height: 1.55; color: var(--ink-2); }
/* desktop — a plain browser-window chrome, same paper/white treatment. */
.hv-desktop { grid-column: 3; grid-row: 1; justify-self: center; width: 100%; }
.hv-desktop-shell {
width: 100%; max-width: 296px; margin-inline: auto;
border-radius: 16px; overflow: hidden;
background: #fff;
border: 1px solid rgba(16,49,41,.07);
box-shadow:
0 1px 0 rgba(255,255,255,.9) inset,
0 30px 60px -24px rgba(16,49,41,.30),
0 10px 22px -12px rgba(16,49,41,.16);
}
.hv-desktop-bar { display: flex; gap: 5px; padding: 10px 13px; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.hv-desktop-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); }
.hv-desktop-screen { padding: 14px 14px 15px; }
.hv-dt-title { font-family: var(--display); font-weight: 500; font-size: 14.5px; color: var(--ink); margin-bottom: 11px; }
.hv-dt-row { padding: 9px 0 8px; border-top: 1px solid var(--line); }
.hv-dt-row.hv-dt-new { padding-top: 0; border-top: 0; }
.hv-dt-tag {
display: inline-block; margin-bottom: 5px;
padding: 2px 9px; border-radius: 999px;
background: var(--euc-wash); color: var(--euc-deep);
font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.hv-dt-h { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.hv-dt-b { margin-top: 4px; font-size: 12px; line-height: 1.55; color: var(--ink-2); }
.hv-dt-b mark { background: var(--euc-wash); color: inherit; border-radius: 3px; padding: 0 2px; }
.hv-dt-old .hv-dt-h { font-size: 12px; font-weight: 500; color: var(--ink-3); }
/* The arriving row's content fades in on its own beat (the "catch"),
separate from the desktop window's own entrance. */
.hv-dt-new-body { opacity: 0; }
/* ── THE FLIGHT ──────────────────────────────────────────────────────
Founder, verbatim: "we want to make it feel special like it jumps over."
The old version arced a small rectangle. This folds the note into a
paper plane, flies it, and unfolds it as the row — the one place in this
design where boldness is deliberately spent.
The plane lives INSIDE the arc , not as an HTML overlay, so it
inherits that svg's own responsive viewBox scaling; a px-based CSS
offset-path on an HTML element cannot track a fluid path across
breakpoints. It uses offset-rotate:AUTO — unlike the old note token,
which deliberately stayed upright at 0deg. A card should not tumble; a
plane that does not point where it is going is a plane falling sideways.
The fold is a crossfade-and-scale swap, not a shape morph: the card
shrinks and rotates away while the plane scales up at the same point.
Full path morphing between a rounded rectangle and a folded triangle is
not something CSS can do honestly, and faking it badly would cost more
than the swap does.
──────────────────────────────────────────────────────────────────── */
.hv-arc { pointer-events: none; overflow: visible; }
/* Overlays the WHOLE board so the arc has real height to climb into. The
viewBox aspect (128/100 = 1.28) is chosen to match the board's rendered
aspect across every desktop width (525–562 / 424 = 1.24–1.33), so
preserveAspectRatio="none" shears the plane by at most 4% — invisible on
a 35px glyph, and the price of endpoints that stay pinned to the card
and the row as the column flexes. */
.hv-arc-h { position: absolute; inset: 0; width: 100%; height: 100%; }
.hv-arc-v { display: none; }
/* Trail: nine discrete dashes sampled at even ARC-LENGTH intervals along
the same curve the plane flies (even t would bunch them at the ends),
each fading in as the plane passes. A single dashed cannot be
revealed progressively — stroke-dashoffset shifts the pattern rather
than uncovering it — so the dashes are elements and the reveal is
opacity. non-scaling-stroke is safe here (and wanted, so both
orientations get the same weight) because nothing dashes this stroke. */
.hv-trail line {
/* 2.1/round: at 1.7 the dashes sat close to the wash and the trail read as
an accident of the background rather than the flight's wake — verified
against a frozen mid-flight frame, where only 2 of 9 dashes registered. */
stroke: var(--euc-mid); stroke-width: 2.1; stroke-linecap: round;
opacity: 0; vector-effect: non-scaling-stroke;
}
.hv-burst {
fill: none; stroke: var(--gold); stroke-width: 1.6;
opacity: 0; transform-box: fill-box; transform-origin: center;
vector-effect: non-scaling-stroke;
}
/* Two wings in two tones, meeting on the crease — the cheapest honest way
to read as folded paper rather than as a "send" arrow. Symmetric about
x=0 so the fill-box centre is the nose axis and the scale pivots true. */
.hv-plane { opacity: 0; transform-box: fill-box; transform-origin: center; }
.hv-plane-a { fill: var(--surface); stroke: var(--line-2); stroke-width: .35; vector-effect: non-scaling-stroke; }
.hv-plane-b { fill: var(--euc-wash2); stroke: var(--line-2); stroke-width: .35; vector-effect: non-scaling-stroke; }
@supports (offset-path: path('M0 0')) {
.hv-plane {
offset-path: path('M20 50 C 50 18, 72 28, 94 48');
offset-distance: 0%;
offset-rotate: auto;
}
.hv-plane-v { offset-path: path('M20 2 C 34 8, 34 19, 20 28'); }
.hv-stage[data-scene="5"] .hv-plane { animation: hv-fly 1.35s var(--ease) 1.05s backwards; }
/* `backwards` and NOT forwards: the plane's resting state is its own base
style (opacity 0), so it is simply gone once it has landed and the row
it became is what remains. */
@keyframes hv-fly {
0% { offset-distance: 0%; opacity: 0; transform: scale(.4); filter: drop-shadow(0 2px 3px rgba(16,49,41,.22)); }
11% { opacity: 1; transform: scale(1); }
52% { offset-distance: 52%; transform: scale(1.14); filter: drop-shadow(0 22px 22px rgba(16,49,41,.34)); }
88% { opacity: 1; transform: scale(1); }
100% { offset-distance: 100%; opacity: 0; transform: scale(.72); filter: drop-shadow(0 3px 5px rgba(16,49,41,.2)); }
}
}
/* Fallback: no motion path. Same five sampled points off the same curve,
with their real tangent angles hard-coded, so the flight keeps its shape
and its heading. CSS px on an SVG child are user units, so these
translate values are viewBox coordinates. */
@supports not (offset-path: path('M0 0')) {
.hv-stage[data-scene="5"] .hv-plane { animation: hv-fly-h 1.35s var(--ease) 1.05s backwards; }
.hv-stage[data-scene="5"] .hv-plane-v { animation: hv-fly-v 1.35s var(--ease) 1.05s backwards; }
@keyframes hv-fly-h {
0% { opacity: 0; transform: translate(20px,50px) rotate(-46.8deg) scale(.4); }
11% { opacity: 1; }
25% { transform: translate(36.3px,36.1px) rotate(-32.2deg) scale(1); }
50% { transform: translate(56.4px,29.4px) rotate(-1.5deg) scale(1.14); }
75% { transform: translate(76.9px,35.1px) rotate(29.5deg) scale(1); }
100% { opacity: 0; transform: translate(94px,48px) rotate(42.3deg) scale(.72); }
}
@keyframes hv-fly-v {
0% { opacity: 0; transform: translate(20px,2px) rotate(23.2deg) scale(.4); }
11% { opacity: 1; }
25% { transform: translate(27.3px,6.7px) rotate(45.7deg) scale(1); }
50% { transform: translate(30.5px,14.6px) rotate(94.7deg) scale(1.14); }
75% { transform: translate(26.7px,22.4px) rotate(131.4deg) scale(1); }
100% { opacity: 0; transform: translate(20px,28px) rotate(147.3deg) scale(.72); }
}
}
/* ══ THE SEQUENCE ══════════════════════════════════════════════════════
Driven by a `data-scene` attribute on .hv-stage that script.js steps
1 → 5, not by a chain of animation-delays. A delay chain was fine for a
one-shot intro but cannot be replayed: `forwards` fill makes the end
state permanent and there is no way to rewind it without tearing the
elements out of the DOM.
1 THE VISIT six real interaction types; "Home visit" is chosen
2 JUST TALK she says it out loud; three fragments land
3 A NOTE the fragments become the real draft, marks and all
4 SAFETY the question that is never skipped, answered
5 ALREADY THERE the note folds, flies, and lands on the desk
hv-pop is NOT used in this section any more — it is kept here because
§10b's .flow-node reuses it ("staggered along the line" without new
keyframes). Do not delete it with the rest of the hero's keyframes.
──────────────────────────────────────────────────────────────────── */
@keyframes hv-pop { 0% { opacity: 0; transform: scale(.2); } 50% { opacity: 1; transform: scale(1.8); } 74% { transform: scale(.85); } 100% { opacity: 1; transform: scale(1); } }
@keyframes hv-burst { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(3.6); } }
@keyframes hv-land { 0%, 100% { transform: none; } 26% { transform: translateY(-5px) scale(1.018); } 58% { transform: translateY(2px) scale(.995); } }
@keyframes hv-dt-new-in { 0% { opacity: 0; transform: translateY(11px) scale(.93); } 62% { opacity: 1; transform: translateY(-3px) scale(1.025); } 100% { opacity: 1; transform: none; } }
@keyframes hv-fade-up { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
/* — beat 1 — */
@keyframes hv-tile-in { from { opacity: 0; transform: translateY(12px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes hv-tile-out { from { opacity: 1; transform: none; } to { opacity: .32; transform: scale(.955); } }
@keyframes hv-tile-pick {
0% { transform: none; background-color: var(--euc-wash); box-shadow: inset 0 0 0 1px rgba(33,122,106,.10); }
62% { transform: scale(1.08); }
100% { transform: scale(1.05); background-color: var(--euc-wash2); box-shadow: inset 0 0 0 2px var(--euc-mid), 0 12px 26px -14px rgba(16,49,41,.34); }
}
/* Two animations, one element, no overlap in time: the entrance ends by
0.94s at the latest and the choice starts at 1.35s, so neither has to
out-cascade the other while both are active. */
.hv-stage[data-scene="1"] .hv-tile {
animation: hv-tile-in .48s var(--ease-out) var(--sd, 0s) backwards,
hv-tile-out .5s var(--ease) 1.5s forwards;
}
.hv-stage[data-scene="1"] .hv-tile.is-pick {
animation: hv-tile-in .48s var(--ease-out) var(--sd, 0s) backwards,
hv-tile-pick .6s var(--ease-out) 1.35s forwards;
}
.hv-tiles .hv-tile:nth-child(1) { --sd: .16s; }
.hv-tiles .hv-tile:nth-child(2) { --sd: .22s; }
.hv-tiles .hv-tile:nth-child(3) { --sd: .28s; }
.hv-tiles .hv-tile:nth-child(4) { --sd: .34s; }
.hv-tiles .hv-tile:nth-child(5) { --sd: .40s; }
.hv-tiles .hv-tile:nth-child(6) { --sd: .46s; }
/* — beat 2 — */
@keyframes hv-frag-in { from { opacity: 0; transform: translateY(10px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes hv-ripple { from { opacity: .5; transform: scale(1); } to { opacity: 0; transform: scale(1.75); } }
@keyframes hv-blink { 0%, 100% { opacity: 1; } 50% { opacity: .22; } }
.hv-stage[data-scene="2"] .hv-frag { animation: hv-frag-in .5s var(--ease-out) var(--sd, 0s) backwards; }
.hv-frags .hv-frag:nth-child(1) { --sd: .45s; }
.hv-frags .hv-frag:nth-child(2) { --sd: 1.15s; }
.hv-frags .hv-frag:nth-child(3) { --sd: 1.85s; }
.hv-stage[data-scene="2"] .hv-mic-ring { animation: hv-ripple 2.1s var(--ease-out) infinite; }
.hv-mic-wrap .hv-mic-ring:nth-child(2) { animation-delay: .7s; }
.hv-mic-wrap .hv-mic-ring:nth-child(3) { animation-delay: 1.4s; }
.hv-stage[data-scene="2"] .hv-listen i { animation: hv-blink 1.3s ease-in-out infinite; }
/* — beat 3 — */
@keyframes hv-line-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes hv-mark { from { background-size: 0 100%; } to { background-size: 100% 100%; } }
.hv-stage[data-scene="3"] .hv-note-l { animation: hv-line-in .45s var(--ease-out) var(--ld, 0s) backwards; }
/* nth-child, not nth-of-type: the heading, the metadata and the rule are
siblings, so the first sentence is child 4. --md is set here too and
inherits down to the s. */
.hv-note .hv-note-l:nth-child(4) { --ld: .28s; --md: 1.30s; }
.hv-note .hv-note-l:nth-child(5) { --ld: .62s; --md: 1.60s; }
.hv-note .hv-note-l:nth-child(6) { --ld: .96s; --md: 1.90s; }
.hv-stage[data-scene="3"] .hv-note-l mark { animation: hv-mark .6s var(--ease-out) var(--md, 0s) backwards; }
/* — beat 4 — */
@keyframes hv-opt-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes hv-opt-pick {
from { background-color: var(--paper-2); box-shadow: inset 0 0 0 1px rgba(22,36,31,.05); }
to { background-color: var(--euc-wash); box-shadow: inset 0 0 0 1.6px var(--euc-mid); }
}
@keyframes hv-radio-on { from { border-color: var(--line-2); } to { border-color: var(--euc); } }
@keyframes hv-tick-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.hv-stage[data-scene="4"] .hv-opt { animation: hv-opt-in .45s var(--ease-out) var(--od, 0s) backwards; }
.hv-opts .hv-opt:nth-child(1) { --od: .22s; }
.hv-opts .hv-opt:nth-child(2) { --od: .36s; }
.hv-opts .hv-opt:nth-child(3) { --od: .50s; }
.hv-stage[data-scene="4"] .hv-opt.is-pick {
animation: hv-opt-in .45s var(--ease-out) var(--od, 0s) backwards,
hv-opt-pick .4s var(--ease) 1.25s backwards;
}
.hv-stage[data-scene="4"] .hv-opt.is-pick .hv-radio { animation: hv-radio-on .35s var(--ease) 1.25s backwards; }
.hv-stage[data-scene="4"] .hv-opt.is-pick .hv-tick path { animation: hv-tick-draw .5s var(--ease-out) 1.45s backwards; }
/* — beat 5 —
The whole beat on one clock:
0.00 the surface recedes, the desktop window slides in from the right
0.10 the note card scales in at the left
0.75 the card folds — tilt + shrink + dim ─┐ crossfade-and-scale swap,
1.05 the plane launches from the same point ─┘ peaking together
1.10 the dashed trail draws itself dash by dash, behind the plane
2.40 the plane is gone, the gold ring rings out, the row opens
2.60 the row's content bounces in — the note, unfolded, on the record
Ends at ~2.9s, which makes the full five-beat run ~15.9s. */
@keyframes hv-desk-in { from { opacity: 0; transform: translateX(26%); } to { opacity: 1; transform: none; } }
@keyframes hv-fold-in { from { opacity: 0; transform: translateX(-14px) scale(.9); } to { opacity: 1; transform: none; } }
/* The card tilts, shrinks and DIMS — it does not disappear.
Two reasons, and the storyboard said "vanishes":
· truth. The note does not leave the phone when it is shared; it is
still there afterwards. A card that vanishes says the opposite.
· composition. Beat 5 is the resting tableau. A fully vanished card
leaves a blank third of the board at rest with a dashed trail
starting from nowhere.
The fold gesture and the plane launching from that exact point are both
intact — this only changes where the card ENDS. To go back to the literal
storyboard, take the 100% keyframe to opacity 0 / scale .22 / -22deg. */
@keyframes hv-fold-fold {
0% { opacity: 1; transform: none; }
55% { opacity: .78; transform: scale(.86) rotate(-7deg); }
100% { opacity: .34; transform: scale(.9) rotate(-4deg); }
}
@keyframes hv-dash-in { from { opacity: 0; } to { opacity: .72; } }
.hv-stage[data-scene="5"] .hv-desktop { animation: hv-desk-in .6s var(--ease-out) backwards; }
.hv-stage[data-scene="5"] .hv-fold {
animation: hv-fold-in .5s var(--ease-out) .1s backwards,
hv-fold-fold .55s var(--ease) .75s forwards;
}
/* `both`, not `backwards`: the trail has to STAY drawn after the plane has
gone — it is the visible record of the route. */
.hv-stage[data-scene="5"] .hv-trail line { animation: hv-dash-in .3s var(--ease-out) var(--dd, 0s) both; }
.hv-trail line:nth-child(1) { --dd: 1.10s; }
.hv-trail line:nth-child(2) { --dd: 1.24s; }
.hv-trail line:nth-child(3) { --dd: 1.38s; }
.hv-trail line:nth-child(4) { --dd: 1.52s; }
.hv-trail line:nth-child(5) { --dd: 1.66s; }
.hv-trail line:nth-child(6) { --dd: 1.80s; }
.hv-trail line:nth-child(7) { --dd: 1.94s; }
.hv-trail line:nth-child(8) { --dd: 2.08s; }
.hv-trail line:nth-child(9) { --dd: 2.22s; }
.hv-stage[data-scene="5"] .hv-burst { animation: hv-burst .8s var(--ease-out) 2.4s forwards; }
.hv-stage[data-scene="5"] .hv-desktop-shell { animation: hv-land .6s var(--ease-out) 2.4s; }
/* The landing slot stays collapsed until the note actually arrives:
reserving the space leaves a conspicuous blank band under the window
title, which reads as a rendering fault rather than as anticipation.
0fr → 1fr animates height with no hard-coded pixel value and costs no
CLS — the card grows inside the fixed-height board, in its own column.
The delay lives on the scene rule, not the base rule, so leaving scene 5
(a replay) collapses it immediately instead of 2.4s later. */
/* The row's space is ALWAYS reserved — no 0fr→1fr opening. That trick was
inherited from the old hero, where the desktop sat on screen for nine
seconds and an empty slot read as a fault. Here the desktop only slides in
at beat 5, so nobody ever sees the slot empty — and the grid-rows animation
was real layout work that scored as CLS twice per run (once at boot when
the no-js tableau collapsed to scene 0, once on landing). Reserved space +
opacity/transform on the content shifts nothing, ever. */
.hv-stage[data-scene="5"] .hv-dt-new-body { animation: hv-dt-new-in .45s var(--ease-out) 2.6s forwards; }
/* — the no-JS floor, finished rather than mid-flight —
The markup ships at beat 5, so without this the scene-5 choreography would
run once on load and a blocked script would leave the visitor looking at an
OPEN BUT EMPTY case-history slot for 2.6s before the row appeared. `.no-js`
is on and script.js removes it at boot (same mechanism .reveal uses),
so this doubles as the pre-script paint: the static tableau is what shows
until JS is definitely running, instead of an animation that starts and is
then cancelled by hvSet(0).
Selectors carry `.hv-stage[data-scene]` so they match the specificity of the
scene-5 animation rules they are switching off, and win on document order —
`!important` is banned in this file. */
.no-js .hv-plane,
.no-js .hv-burst { display: none; }
.no-js .hv-stage[data-scene] .hv-trail line { animation: none; opacity: .72; }
.no-js .hv-stage[data-scene] .hv-fold { animation: none; opacity: 1; transform: none; }
.no-js .hv-stage[data-scene] .hv-desktop { animation: none; }
.no-js .hv-stage[data-scene] .hv-desktop-shell { animation: none; }
.no-js .hv-stage[data-scene] .hv-dt-new-body { animation: none; opacity: 1; }
/* — the narrator — */
.hv-caption {
margin-top: 16px;
/* Two lines' worth of height is RESERVED, because the text changes five
times and the longest line wraps at some widths. Without this the swap
would move the replay button under it — a 0.05 CLS for free. */
min-height: calc(2 * 1.5em);
display: grid; place-items: center;
font-family: var(--display);
font-style: italic; font-weight: 400;
font-variation-settings: "SOFT" 40, "opsz" 40;
font-size: 15px; line-height: 1.5;
color: var(--euc-deep);
text-align: center;
}
.hv-stage[data-scene="0"] .hv-caption { opacity: 0; }
/* The cross-fade is an alternating pair of IDENTICAL keyframes, toggled by
script.js. A transition cannot do it — the end state never changes, only
the text — and re-adding the same animation name does not restart an
animation; the computed animation-name has to actually differ. The other
way to restart it is a forced reflow, i.e. a synchronous layout, on a
page whose entire motion budget is "nothing that touches layout". */
.hv-caption.is-in { animation: hv-cap-in .5s var(--ease-out) both; }
.hv-caption.is-in.is-alt { animation-name: hv-cap-in-b; }
@keyframes hv-cap-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes hv-cap-in-b { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
/* — replay — */
.hero-visual { display: flex; flex-direction: column; align-items: center; }
.hero-visual > .hv-stage { width: 100%; }
.hv-replay {
display: inline-flex; align-items: center; gap: 6px;
margin: 14px auto 0; padding: 7px 14px;
border-radius: var(--r-pill);
border: 1px solid var(--line-2);
background: rgba(255,255,255,.72);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
font-family: var(--body); font-size: 12px; font-weight: 500;
color: var(--ink-2); cursor: pointer;
opacity: 0;
animation: hv-fade-up .4s var(--ease-out) forwards;
transition: color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease);
}
.hv-replay[hidden] { display: none; }
.hv-replay:hover { color: var(--ink); border-color: var(--euc-mid); background: #fff; }
.hv-replay:focus-visible { outline: 2px solid var(--euc); outline-offset: 3px; }
.hv-replay svg { color: var(--euc); }
/* Reduced motion: all five beats, none of the movement.
Resting on one beat would strip the story from exactly the people least
able to get it back, so the sequence simply does not auto-advance and the
replay control becomes a manual stepper (script.js relabels it "Next
screen"). Same beats, same order, under the reader's own thumb.
`!important` is banned in this file, so every override below matches or
beats the specificity of the rule it is switching off and wins on
document order instead — `.hv-stage[data-scene]` mirrors the shape of
`.hv-stage[data-scene="N"]` exactly, and any extra class on the animated
rule is mirrored too. Every stagger here uses `backwards` fill, so
`animation: none` alone would strand elements at opacity 0; opacity and
transform are restored on the same line, every time. */
@media (prefers-reduced-motion: reduce) {
.hv-board { opacity: 1; transform: none; transition: none; }
.hv-frame { transition: none; }
.hv-beat { transition: none; transform: none; }
.hv-beat.is-past { transform: none; }
.hv-b5 { transition: none; }
.hv-stage[data-scene] .hv-tile { animation: none; opacity: 1; transform: none; }
/* The chosen tile keeps its ANSWER, statically. Killing hv-tile-pick alone
would leave beat 1 as six identical tiles and no visible choice — the one
thing that beat is for. (The option in beat 4 needs no equivalent: its
picked look is already the base style there.) */
.hv-stage[data-scene] .hv-tile.is-pick {
animation: none; opacity: 1; transform: none;
background-color: var(--euc-wash2);
box-shadow: inset 0 0 0 2px var(--euc-mid);
}
.hv-stage[data-scene] .hv-frag { animation: none; opacity: 1; transform: none; }
.hv-stage[data-scene] .hv-mic-ring { animation: none; }
.hv-stage[data-scene] .hv-listen i { animation: none; }
.hv-stage[data-scene] .hv-note-l { animation: none; opacity: 1; transform: none; }
.hv-stage[data-scene] .hv-note-l mark { animation: none; background-size: 100% 100%; }
.hv-stage[data-scene] .hv-opt,
.hv-stage[data-scene] .hv-opt.is-pick { animation: none; opacity: 1; transform: none; }
.hv-stage[data-scene] .hv-opt.is-pick .hv-radio { animation: none; border-color: var(--euc); }
.hv-stage[data-scene] .hv-opt.is-pick .hv-tick path { animation: none; stroke-dashoffset: 0; }
/* No flight — the row is simply there. */
.hv-plane { display: none; }
.hv-burst { display: none; }
/* The trail stays, drawn, because it is the only thing left saying the
two halves of the picture are connected. */
.hv-stage[data-scene] .hv-trail line { animation: none; opacity: .72; }
.hv-stage[data-scene] .hv-fold { animation: none; opacity: 1; transform: none; }
.hv-stage[data-scene] .hv-desktop { animation: none; opacity: 1; transform: none; }
.hv-stage[data-scene] .hv-desktop-shell { animation: none; }
.hv-dt-new-body { opacity: 0; animation: none; }
.hv-stage[data-scene="5"] .hv-dt-new-body { opacity: 1; animation: none; }
/* Stepper shows one beat at a time; the visibility gate must not lag. */
.hv-beat { transition: none; }
.hv-caption.is-in,
.hv-caption.is-in.is-alt { animation: none; opacity: 1; transform: none; }
.hv-replay { opacity: 1; animation: none; }
}
/* Narrow: the whole stage stacks and the flight rotates to vertical, at
1350, matching the nav's breakpoint (raised from 1100 19 Aug 2026 to
fit a tenth nav link without clipping, see "6 · NAV" for the
measurements), so the top of the page changes shape once rather than
in two separate steps. script.js's matchMedia mirrors this same
value, see its comment.
Size budget at 390px (board 350 wide × 512 tall, beat inner 320 × 482):
beat 1 bar 26 + q 20 + 12 + tiles 3 rows × 135 = fits
beat 2 bar 26 + prog 15 + frags 167 + mic 94 + 26 = 328 = fits
beat 3 bar 26 + 16 + card 320 = fits
beat 4 bar 26 + prog 15 + q 44 + 14 + opts 198 = 297 = fits
beat 5 fold 143 + arc 78 + window 244 + gaps 12 = 477 = fits
At 320px the ≤420 block below drops the tile and body sizes a step and
every beat still clears 482.
──────────────────────────────────────────────────────────────────── */
@media (max-width: 1350px) {
.hero { min-height: 0; align-items: flex-start; padding: 92px 0 56px; }
.hero-wrap { grid-template-columns: 1fr; }
.hero-copy { max-width: none; }
.hero-visual { margin-top: 30px; }
.hv-board { height: 512px; }
.hv-beat { padding: 14px 14px 16px; }
.hv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hv-b5 {
grid-template-columns: 1fr;
justify-items: center; align-content: center;
row-gap: 6px;
}
.hv-fold { grid-column: 1; grid-row: 1; max-width: 240px; }
.hv-arc-h { display: none; }
.hv-arc-v {
display: block; position: static;
grid-column: 1; grid-row: 2;
width: 100px; height: 78px;
}
.hv-desktop { grid-column: 1; grid-row: 3; }
.hv-desktop-shell { max-width: 280px; }
/* Three lines reserved, not two: the longest narrator line wraps further
in a 350px stage than in a 562px one. */
.hv-caption { min-height: calc(3 * 1.5em); font-size: 14.5px; }
}
@media (max-width: 420px) {
.hv-tile b { font-size: 12.5px; }
.hv-tile i { font-size: 11.5px; }
.hv-ico { width: 38px; height: 38px; }
.hv-ico .hv-i { width: 19px; height: 19px; }
.hv-q { font-size: 15.5px; }
.hv-note { padding: 14px 14px 16px; }
.hv-note-l { font-size: 13.5px; }
.hv-note-m { font-size: 11.5px; }
.hv-opt { font-size: 13.5px; padding: 12px; }
.hv-frag { font-size: 13.5px; max-width: 90%; }
.hv-fold { max-width: 224px; }
.hv-desktop-shell { max-width: 272px; }
/* Beat 3's bar is the tightest row in the stage: "Back" (50) + the
segmented control (169) = 231 against a 248px inner width at 320px.
Trimming the control's padding buys back 16px of that. */
.hv-seg { font-size: 11.5px; }
.hv-seg b, .hv-seg i { padding: 5px 8px; }
}
/* ===========================================================================
8 · SECTOR STRIP
=========================================================================== */
.sectors {
position: relative;
background: var(--paper-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
overflow: hidden; padding: 18px 0;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.sectors-track {
display: flex; align-items: center; gap: 24px;
width: max-content;
animation: marquee 46s linear infinite;
}
.sectors-track span {
font-size: 12.5px; font-weight: 500;
letter-spacing: .07em; text-transform: uppercase;
color: var(--ink-3); white-space: nowrap;
}
.sectors-track i { width: 4px; height: 4px; border-radius: 50%; background: var(--euc); opacity: .5; flex: none; }
@keyframes marquee { to { transform: translateX(-50%) } }
.sectors:hover .sectors-track { animation-play-state: paused; }
/* ===========================================================================
9 · BANDS
=========================================================================== */
.band { position: relative; padding: var(--band-y) 0; }
.band-paper { background: var(--paper); }
.band-cream { background: var(--paper-2); }
.band-deep { background: var(--deep); color: var(--on-deep); }
.band-wash { background: linear-gradient(172deg, var(--euc-wash) 0%, var(--paper) 78%); }
/* ===========================================================================
10 · STEPS
=========================================================================== */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.step {
position: relative;
padding: 32px 28px 30px;
border-radius: var(--r-lg);
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--lift-1);
transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s var(--ease);
}
.step:hover { transform: translateY(-5px); border-color: var(--euc-wash2); box-shadow: var(--lift-2); }
.step-n {
position: absolute; top: 24px; right: 26px;
font-family: var(--display); font-size: 40px; font-weight: 300;
font-variation-settings: "opsz" 100;
line-height: 1; color: var(--paper-3);
transition: color .45s var(--ease);
}
.step:hover .step-n { color: var(--euc-wash2); }
.step-ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 22px; }
.step-ico[data-tone="clay"] { background: var(--clay-wash); color: var(--clay); }
.step-ico[data-tone="euc"] { background: var(--euc-wash); color: var(--euc); }
.step-ico[data-tone="gold"] { background: var(--gold-wash); color: var(--gold-ink); }
.step-t {
font-family: var(--display); font-weight: 500;
font-variation-settings: "SOFT" 22, "opsz" 40;
font-size: 20.5px; letter-spacing: -.018em;
margin-bottom: 11px; color: var(--ink);
}
.step-b { font-size: .96rem; line-height: 1.68; color: var(--ink-2); }
@media (max-width: 880px) { .steps { grid-template-columns: 1fr; } }
/* ===========================================================================
10b · WALKTHROUGH — one continuous flow, restructured 17 Aug 2026.
---------------------------------------------------------------------------
.flow-line is a single static SVG spine (no draw-in animation — this
section is tall and scrolled past in stages, unlike the hero's short,
fully-visible diagram, so a full draw-in would either finish off-screen
or look unfinished above the fold). Same stroke language as the hero's
dashed flight trail (.hv-trail — thin, non-scaling, hand-drawn bezier; the
old .hv-line connector this used to cite was deleted in the 17 Aug rebuild)
so it reads as the same visual family without replaying the hero's own
choreography.
.flow-stage is a two-column grid; .flow-node spans both columns and
centers itself on the spine, .flow-content sits in EITHER column via the
--l/--r modifier (bookends span both, centered). This is CSS placement
only — DOM order stays Before→01→02→03→After regardless of visual side,
so reading order for assistive tech never depends on which side a stage
lands on. Motion is just the node popping in (reuses the hero's `hv-pop`
keyframe, defined in §7 — kept alive for exactly this reuse when the old
.hv-dot landing spark was deleted) as each stage's existing .reveal
fires — "staggered along the line" without new keyframes.
Below 900px the two-column alternation collapses to a single left-rail
timeline (spine + node move to a fixed-width first column, content to a
second column beside it) — genuinely vertical on mobile, not a squashed
two-column grid.
.jr-mock (the note-card look), .compare, .pillar-t/-b, .eyebrow, .ticks
are all reused from #voice/#trust/#integration — only .flow-* and
.jr-mock-head/.jr-mock-badge are new to this section.
=========================================================================== */
.flow { position: relative; margin-top: clamp(8px, 2vw, 16px); }
.flow-line {
position: absolute; top: 6px; bottom: 6px; left: 50%;
width: 56px; margin-left: -28px;
z-index: 0; pointer-events: none;
}
.flow-line svg { width: 100%; height: 100%; display: block; }
.flow-path { fill: none; stroke: var(--euc-wash2); stroke-width: 2; vector-effect: non-scaling-stroke; }
.flow-stages { position: relative; z-index: 1; display: grid; gap: clamp(52px, 7vw, 92px); }
.flow-stage {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: clamp(28px, 4vw, 56px);
row-gap: 18px;
align-items: start;
}
.flow-node {
grid-column: 1 / -1; justify-self: center;
width: 42px; height: 42px; border-radius: 50%;
display: grid; place-items: center;
background: var(--surface); border: 2px solid var(--euc-wash2);
font-family: var(--display); font-weight: 600; font-size: 14.5px; color: var(--euc-deep);
box-shadow: var(--lift-1);
opacity: 0; transform: scale(.3);
transform-box: fill-box; transform-origin: center;
}
.flow-stage.is-in .flow-node { animation: hv-pop .4s var(--ease-out) forwards; }
.flow-node--dot { width: 13px; height: 13px; border: 0; background: var(--gold); box-shadow: none; }
.flow-content { grid-column: 2 / 3; }
.flow-stage--l .flow-content { grid-column: 1 / 2; }
/* Real app screens inside the walkthrough, added 2026-08-23. The section
was entirely text while the hero carried every visual; these are the two
moments worth seeing — a question with voice running, and the finished
note. Captured on an iPhone 6.9" simulator against synthetic data, so no
client information appears in them. Narrow max-width on purpose: a phone
screenshot at full column width dwarfs the prose it illustrates. */
.flow-shot { margin: 18px 0 0; }
.flow-shot img {
display: block;
width: 100%;
max-width: 252px;
height: auto;
border-radius: 20px;
border: 1px solid var(--paper-3);
box-shadow: 0 14px 34px rgba(32, 26, 18, .11);
}
.flow-stage--bookend .flow-content { grid-column: 1 / -1; max-width: 54ch; margin-inline: auto; text-align: center; }
.flow-label {
font-size: 11.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
color: var(--ink-3); margin-bottom: 10px;
}
.flow-p { font-size: 1rem; line-height: 1.7; color: var(--ink-2); }
.flow-pain {
font-size: .93rem; line-height: 1.55; font-style: italic;
color: var(--ink-3); margin-bottom: 10px;
}
.flow-content .jr-mock,
.flow-content .compare { margin-top: 20px; }
.flow-aside { margin-top: 16px; font-size: .87rem; line-height: 1.62; color: var(--ink-3); }
@media (max-width: 900px) {
.flow-line { left: 0; width: 42px; margin-left: 0; }
.flow-stage {
grid-template-columns: 42px 1fr;
column-gap: 16px; row-gap: 0;
}
.flow-node { grid-column: 1; grid-row: 1; justify-self: center; align-self: start; margin-top: 2px; }
.flow-content,
.flow-stage--l .flow-content,
.flow-stage--bookend .flow-content {
grid-column: 2; max-width: none; text-align: left; margin-inline: 0;
}
}
.jr-mock {
padding: 22px 24px 24px;
border-radius: var(--r-lg);
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--lift-1);
}
.jr-mock-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.jr-mock-head .jr-mock-label { margin-bottom: 0; }
.jr-mock-badge {
flex: none;
font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
padding: 3px 9px; border-radius: 999px;
background: var(--euc-wash); color: var(--euc-deep);
}
.jr-mock-label {
font-size: 10.5px; font-weight: 700;
letter-spacing: .09em; text-transform: uppercase;
color: var(--euc); margin-bottom: 12px;
}
.jr-mock-q {
font-family: var(--display); font-weight: 400;
font-variation-settings: "SOFT" 18, "opsz" 20;
font-size: 16px; line-height: 1.42; color: var(--ink);
margin-bottom: 14px;
}
.jr-mock-a {
padding-left: 14px;
border-left: 2px solid var(--euc-wash2);
font-size: .96rem; line-height: 1.62; font-style: italic;
color: var(--ink-2);
}
.jr-mock-draft { font-size: .98rem; line-height: 1.64; color: var(--ink); }
.jr-mock-draft mark { background: var(--euc-wash); color: inherit; border-radius: 3px; padding: 0 1px; }
/* ===========================================================================
11 · PULL QUOTE — dark moment #1
=========================================================================== */
.band-deep.band-quote {
text-align: center;
padding: clamp(60px, 7.5vw, 100px) 0;
background:
radial-gradient(70% 60% at 50% 0%, var(--deep-2) 0%, transparent 70%),
var(--deep);
}
.pull { margin: 0; }
.pull-q {
font-family: var(--display); font-weight: 300;
font-variation-settings: "SOFT" 42, "opsz" 144;
font-size: clamp(2.15rem, 5.6vw, 3.9rem);
line-height: 1.04; letter-spacing: -.03em;
color: var(--on-deep);
}
.pull-q em {
font-style: italic;
font-variation-settings: "SOFT" 72, "opsz" 144;
color: var(--euc-light);
}
.pull-b {
font-size: clamp(1rem, 1.45vw, 1.1rem);
line-height: 1.7; color: var(--on-deep-2);
max-width: 56ch; margin: 26px auto 0;
}
.pull-c {
display: block; margin-top: 26px;
font-size: 11.5px; font-style: normal;
letter-spacing: .11em; text-transform: uppercase;
color: var(--on-deep-3);
transition: color .25s var(--ease);
}
.pull-c span { color: var(--euc-light); transition: color .25s var(--ease); }
/* Now a link to training.html (19 Aug 2026, was a plain ) — a hover
cue of its own, since .band-deep otherwise has no link styling to fall
back on. */
a.pull-c:hover { color: var(--on-deep); }
a.pull-c:hover span { color: #fff; }
/* ===========================================================================
12 · SPLIT (why voice)
=========================================================================== */
.split {
display: grid;
grid-template-columns: minmax(0,1fr) minmax(0,1fr);
gap: clamp(36px, 5.5vw, 70px);
align-items: center;
}
.split-copy .h2 { margin-bottom: 24px; }
.ticks { display: grid; gap: 17px; margin-top: 30px; }
.ticks li { position: relative; padding-left: 30px; font-size: .96rem; line-height: 1.66; color: var(--ink-2); }
.ticks li::before {
content: ""; position: absolute; left: 0; top: 6px;
width: 18px; height: 18px; border-radius: 50%;
background: var(--euc-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m5 12 4.5 4.5L19 7' stroke='%23217A6A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.ticks strong { color: var(--ink); font-weight: 600; }
/* Deliberately ONE column, stated explicitly.
This grid previously declared no `grid-template-columns` at all, so it fell
back to one implicit row per child and stacked — while `.compare-arrow` kept
`justify-self: center` and a rightward SVG, both of which only make sense
side-by-side. So the layout read as a broken two-column grid.
Side-by-side is NOT the fix: `.compare` lives in the walkthrough's alternating
timeline column and measures 522px at a 1440px viewport, so two columns leave
~183px of text width per card — about 23 characters a line, far below
readable for the two quotes that carry this section's whole argument.
Vertical is the right layout here; the arrow was the thing that was wrong. */
.compare { display: grid; grid-template-columns: 1fr; gap: 13px; align-items: center; }
.compare-col { padding: 24px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); }
.compare-then { background: var(--clay-wash); border-color: #EEDBD1; }
.compare-now { background: var(--euc-wash); border-color: var(--euc-wash2); }
.compare-h { font-size: 11px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; margin-bottom: 11px; }
.compare-then .compare-h { color: var(--clay); }
.compare-now .compare-h { color: var(--euc-deep); }
.compare-body {
font-family: var(--display); font-weight: 400;
font-variation-settings: "SOFT" 18, "opsz" 20;
font-size: 15.5px; line-height: 1.5; color: var(--ink);
}
.compare-note {
margin-top: 12px; padding-top: 11px;
border-top: 1px dashed var(--line-2);
font-size: 12.8px; line-height: 1.55; color: var(--ink-3);
}
.compare-arrow {
justify-self: center; width: 34px; height: 34px; border-radius: 50%;
display: grid; place-items: center;
background: var(--surface); border: 1px solid var(--line-2); color: var(--euc);
}
/* Rotate the glyph, don't swap the path: the SVG stays a plain right-arrow in
the markup, so there is one arrow asset and the direction is a layout
concern expressed in the layout layer. Points first-pass → after-the-check,
which is now downward. */
.compare-arrow svg { transform: rotate(90deg); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
/* ===========================================================================
13 · STATS
=========================================================================== */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.stat {
padding: 30px 26px 28px;
border-radius: var(--r-lg);
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--lift-1);
transition: border-color .4s var(--ease);
}
/* A data card isn't clickable, so hover no longer lifts it like the .step/
.pillar tiles — it just brings the card's own citation forward, since the
source link is the one interactive thing here worth pointing at. */
.stat:hover { border-color: var(--euc-wash2); }
.stat:hover .stat-src a { color: var(--euc-deep); border-bottom-color: var(--euc-deep); }
.stat-n {
display: flex; align-items: baseline; gap: 9px;
font-family: var(--display); font-weight: 300;
font-variation-settings: "SOFT" 20, "opsz" 144;
font-size: clamp(2.6rem, 4.2vw, 3.5rem);
line-height: 1; letter-spacing: -.035em;
color: var(--euc); margin-bottom: 16px;
}
.stat-was { font-size: max(13px, .46em); color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.stat-to { color: var(--ink-3); align-self: center; flex: none; }
.stat-t {
font-family: var(--display); font-weight: 500;
font-variation-settings: "SOFT" 20, "opsz" 40;
font-size: 17.5px; letter-spacing: -.016em;
color: var(--ink); margin-bottom: 10px;
}
.stat-b { font-size: .93rem; line-height: 1.66; color: var(--ink-2); }
.stat-src {
margin-top: 15px; padding-top: 13px;
border-top: 1px solid var(--line);
font-size: 11.5px; line-height: 1.55; color: var(--ink-3);
}
.stat-src cite { font-style: italic; }
/* The citation link is the point of the block, so it gets the accent and its
own line — a source you can actually open is what separates a claim from a
number on a slide. */
.stat-src a {
display: inline-flex; align-items: center; gap: 5px;
margin-top: 6px;
color: var(--euc); font-weight: 600;
border-bottom: 1px solid var(--euc-wash2);
padding-bottom: 1px;
transition: color .25s var(--ease), border-color .25s var(--ease), gap .25s var(--ease-out);
}
.stat-src a:hover { border-bottom-color: var(--euc); gap: 8px; }
.stat-src a svg { flex: none; }
/* .caveat component removed 17 Aug 2026 — both of its instances (the
integration "What this isn't" and the evidence "What the evidence does not
yet show" asides) were cut at founder direction, and no HTML file uses the
class any more (grepped all four pages). */
/* 1000, not 900, unlike its neighbours. The third stat is a flex row of three
unbreakable strings ("51.9%" → "38.8%") whose font is clamped at its 2.6rem
floor through this whole band, so at 950px it measured 224px of content in
226px of card — it fits, but on two pixels, and only while Fraunces is the
font actually rendering. Stacking at 1000px skips the band entirely rather
than trusting that margin to survive a fallback serif. */
@media (max-width: 1000px) { .stats { grid-template-columns: 1fr; } }
/* ===========================================================================
14 · VISIT TYPES
=========================================================================== */
.visits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.visit {
display: grid;
grid-template-columns: auto 1fr; grid-template-rows: auto auto;
column-gap: 14px; align-items: center;
padding: 20px 22px;
border-radius: var(--r-md);
background: var(--surface); border: 1px solid var(--line);
transition: background-color .35s var(--ease), border-color .35s var(--ease), box-shadow .45s var(--ease-out);
}
/* Tinted by the same tone as the tile's own icon (see .visit[data-tone] below)
rather than the generic lift — the wash is the differentiator, not motion. */
.visit:hover { border-color: var(--euc-wash2); box-shadow: var(--lift-2); }
.visit[data-tone="in-person"]:hover { background: var(--euc-wash); }
.visit[data-tone="remote"]:hover { background: #E4EEF5; }
.visit[data-tone="attempted"]:hover { background: var(--clay-wash); }
.visit-ico { grid-row: 1 / 3; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; }
.visit[data-tone="in-person"] .visit-ico { background: var(--euc-wash); color: var(--euc); }
.visit[data-tone="remote"] .visit-ico { background: #E4EEF5; color: #3B7699; }
.visit[data-tone="attempted"] .visit-ico { background: var(--clay-wash); color: var(--clay); }
.visit-l {
font-family: var(--display); font-weight: 500;
font-variation-settings: "SOFT" 18, "opsz" 30;
font-size: 16.5px; letter-spacing: -.014em; color: var(--ink); align-self: end;
}
.visit-s { font-size: 12.8px; color: var(--ink-3); align-self: start; }
.visits-foot { margin-top: 24px; font-size: .94rem; line-height: 1.66; color: var(--ink-3); max-width: 62ch; }
@media (max-width: 880px) { .visits { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .visits { grid-template-columns: 1fr; } }
/* ===========================================================================
15 · TRUST PILLARS
=========================================================================== */
.pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.pillar {
padding: 30px 28px;
border-radius: var(--r-lg);
background: var(--surface); border: 1px solid var(--line);
box-shadow: var(--lift-1);
transition: border-color .4s var(--ease), transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.pillar:hover { border-color: var(--euc-wash2); transform: translateY(-4px); box-shadow: var(--lift-2); }
.pillar-ico {
display: grid; place-items: center;
width: 46px; height: 46px; border-radius: 13px;
background: var(--euc-wash); color: var(--euc);
margin-bottom: 20px;
}
.pillar-t {
font-family: var(--display); font-weight: 500;
font-variation-settings: "SOFT" 20, "opsz" 40;
font-size: 19px; letter-spacing: -.018em;
color: var(--ink); margin-bottom: 11px;
}
.pillar-b { font-size: .94rem; line-height: 1.7; color: var(--ink-2); }
.pillar-b code { color: var(--euc-deep); background: var(--euc-wash); padding: 1px 5px; border-radius: 4px; }
.pillar-link {
display: inline-flex; align-items: center; gap: 7px;
margin-top: 15px; font-size: 13.5px; font-weight: 600;
color: var(--euc); border-bottom: 1px solid var(--euc-wash2);
padding-bottom: 2px;
transition: border-color .3s var(--ease), gap .3s var(--ease-out);
}
.pillar-link:hover { border-color: var(--euc); gap: 11px; }
.trust-foot { margin-top: 28px; font-size: .94rem; color: var(--ink-3); line-height: 1.7; }
.trust-foot a { color: var(--euc); border-bottom: 1px solid var(--euc-wash2); }
.trust-foot a:hover { border-bottom-color: var(--euc); }
@media (max-width: 880px) { .pillars { grid-template-columns: 1fr; } }
/* 16 · GLIMPSE (the moved park-bench photo/loop, added 17 Aug 2026) was
removed 18 Aug 2026 along with the #glimpse section in index.html that
used it (reviewer direction). .glimpse-frame/.glimpse-plate had no other
caller; the video it wrapped, "HERO LOOP" below, went with it for the
same reason: no element in the page carries .hero-vid any more, and
script.js's own handler for it was removed too. */
/* ===========================================================================
17 · PRICING
=========================================================================== */
.plans { display: grid; grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr); gap: 18px; align-items: start; }
.plan {
position: relative;
padding: 34px 32px;
border-radius: var(--r-lg);
background: var(--surface); border: 1px solid var(--line);
box-shadow: var(--lift-1);
}
.plan-feature {
border-color: var(--euc-wash2);
box-shadow: var(--lift-3);
background: linear-gradient(172deg, #fff 0%, #F7FCFA 100%);
}
.plan-flag {
position: absolute; top: -11px; left: 32px;
padding: 5px 14px; border-radius: var(--r-pill);
background: var(--euc); color: #fff;
font-size: 10.5px; font-weight: 600;
letter-spacing: .12em; text-transform: uppercase;
}
.plan-e {
font-size: 11.5px; font-weight: 600;
letter-spacing: .14em; text-transform: uppercase;
color: var(--euc); margin-bottom: 14px;
}
.plan-p {
display: flex; align-items: baseline; gap: 3px;
font-family: var(--display); font-weight: 300;
font-variation-settings: "SOFT" 18, "opsz" 144;
font-size: clamp(2.9rem, 4.8vw, 3.8rem);
line-height: 1; letter-spacing: -.035em; color: var(--ink);
}
.plan-cur { font-size: .46em; color: var(--ink-3); }
.plan-per {
font-family: var(--body); font-size: 13.5px; font-weight: 500;
letter-spacing: 0; color: var(--ink-3); margin-left: 6px;
}
.plan-sub { font-size: 13.5px; color: var(--ink-3); margin-top: 9px; }
.plan-b { font-size: .95rem; line-height: 1.68; color: var(--ink-2); margin-top: 18px; }
.plan-list { display: grid; gap: 9px; margin-top: 18px; }
.plan-list li { position: relative; padding-left: 24px; font-size: .91rem; color: var(--ink-2); }
.plan-list li::before {
content: ""; position: absolute; left: 0; top: 6px;
width: 14px; height: 14px; border-radius: 50%;
background: var(--euc-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m5 12 4.5 4.5L19 7' stroke='%23217A6A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 9px no-repeat;
}
.bands { margin-top: 22px; font-size: 14.5px; }
.bands th, .bands td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--line); }
.bands thead th {
font-size: 10.5px; font-weight: 600;
letter-spacing: .12em; text-transform: uppercase;
color: var(--ink-3); border-bottom-color: var(--line-2);
}
.bands tbody th { font-weight: 600; color: var(--ink); }
.bands tbody td { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bands tbody tr:last-child th, .bands tbody tr:last-child td { border-bottom: 0; color: var(--euc-deep); }
.plan-cta { width: 100%; margin-top: 24px; }
.plans-foot { margin-top: 24px; font-size: .92rem; line-height: 1.68; color: var(--ink-3); max-width: 62ch; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } }
/* ===========================================================================
17b · FAQ — native /, added 17 Aug 2026. No JS: the
browser handles keyboard, focus and the open/close state for free.
=========================================================================== */
.faq-list { display: grid; gap: 10px; margin-top: 8px; }
.faq-item {
border: 1px solid var(--line);
border-radius: var(--r-md);
background: var(--surface);
box-shadow: var(--lift-1);
overflow: hidden;
}
.faq-item summary {
list-style: none;
cursor: pointer;
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 18px 22px;
font-family: var(--display);
font-weight: 500;
font-variation-settings: "SOFT" 18, "opsz" 40;
font-size: 1.03rem;
letter-spacing: -.008em;
color: var(--ink);
transition: color .25s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: "";
flex: none;
width: 10px; height: 10px;
border-right: 2px solid var(--euc);
border-bottom: 2px solid var(--euc);
transform: rotate(45deg);
transition: transform .3s var(--ease-out), margin .3s var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: 6px; }
.faq-item summary:hover { color: var(--euc-deep); }
.faq-item summary:focus-visible { outline: 2px solid var(--euc); outline-offset: -3px; border-radius: 8px; }
.faq-a { padding: 0 22px 20px; }
.faq-a p { font-size: .96rem; line-height: 1.68; color: var(--ink-2); max-width: 62ch; }
.faq-a p + p { margin-top: .9em; }
.faq-a a { color: var(--euc); border-bottom: 1px solid var(--euc-wash2); }
.faq-a a:hover { border-bottom-color: var(--euc); }
.faq-a code { color: var(--euc-deep); background: var(--euc-wash); padding: 1px 5px; border-radius: 4px; }
@media (max-width: 600px) {
.faq-item summary { padding: 16px 18px; font-size: 1rem; }
.faq-a { padding: 0 18px 18px; }
}
/* ===========================================================================
18 · CLOSING
=========================================================================== */
.band-close {
position: relative; text-align: center; overflow: hidden;
background:
radial-gradient(64% 56% at 50% 108%, var(--euc-wash2) 0%, transparent 68%),
radial-gradient(44% 38% at 86% -8%, var(--gold-wash) 0%, transparent 66%),
var(--paper);
border-top: 1px solid var(--line);
}
.close .eyebrow { justify-content: center; }
.close-lede {
font-size: clamp(1rem, 1.45vw, 1.12rem);
line-height: 1.68; color: var(--ink-2);
max-width: 52ch; margin: 24px auto 0;
}
.close-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.close-foot { margin-top: 24px; font-size: 13.5px; color: var(--ink-3); }
.close-foot a { color: var(--euc); border-bottom: 1px solid var(--euc-wash2); }
.close-who {
display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px;
margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line);
}
.close-who li {
padding: 7px 15px; border-radius: var(--r-pill);
border: 1px solid var(--line-2); background: rgba(255,255,255,.6);
font-size: 12.5px; color: var(--ink-3);
}
/* ===========================================================================
19 · FOOTER — dark moment #2
=========================================================================== */
.foot {
background: var(--deep); color: var(--on-deep);
padding: clamp(52px, 6.5vw, 78px) 0 32px;
}
.foot .brand { color: var(--on-deep); }
.foot .brand-glyph { color: var(--euc-light); }
.foot-grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,2fr); gap: clamp(34px, 5vw, 60px); }
.brand-foot { margin-bottom: 16px; }
.foot-tag { font-size: .93rem; line-height: 1.66; color: var(--on-deep-3); max-width: 34ch; }
.foot-by { margin-top: 13px; font-size: 13px; color: var(--on-deep-3); }
.foot-by a { color: var(--euc-light); border-bottom: 1px solid rgba(79,192,166,.34); }
.foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.foot-col { display: grid; align-content: start; gap: 10px; }
.foot-h {
font-size: 10.5px; font-weight: 600;
letter-spacing: .14em; text-transform: uppercase;
color: var(--euc-light); margin-bottom: 3px;
}
.foot-col a {
font-size: 14px; color: var(--on-deep-3); width: fit-content;
padding: 9px 0; min-height: 24px; /* WCAG 2.2 SC 2.5.8 — was 23px tall */
display: flex; align-items: center;
transition: color .25s var(--ease);
}
.foot-col a:hover { color: var(--on-deep); }
.foot-bottom {
margin-top: clamp(40px, 5.5vw, 62px); padding-top: 22px;
border-top: 1px solid rgba(237,244,241,.12);
display: flex; flex-wrap: wrap; gap: 12px 28px;
justify-content: space-between; align-items: baseline;
font-size: 12.5px; color: var(--on-deep-3);
}
.foot-ack { max-width: 60ch; line-height: 1.6; }
@media (max-width: 880px) {
.foot-grid { grid-template-columns: 1fr; }
.foot-cols { grid-template-columns: 1fr 1fr; }
}
/* Every other multi-column grid on the page reaches a single column at its
narrow breakpoint; .foot-cols stopped at two and stayed there to 320px,
leaving ~130px per column for links like "Desktop app — Windows" that have
no nowrap and so wrapped to three ragged lines each. */
@media (max-width: 560px) {
.foot-cols { grid-template-columns: 1fr; gap: 28px; }
}
/* ===========================================================================
20 · REVEAL
=========================================================================== */
.reveal {
opacity: 0; transform: translateY(20px);
transition: opacity .8s var(--ease), transform .95s var(--ease-out);
transition-delay: calc(var(--d, 0) * 90ms);
}
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
/* ===========================================================================
21 · LEGACY TOKEN ALIASES — privacy / terms / data-residency
---------------------------------------------------------------------------
Those three pages carry their own inline