/* infiDive — shared design system (2026-07-24 redesign) */
:root {
/* ======================================================================
COLOUR — taken from the C-side product's own Figma file, not invented
here. See docs/app-palette.md for the extraction and the evidence.
The app is LIGHT-CHROME + DARK-CONTENT, not a single dark world: its
bond row and chat surfaces are near-white, its episodes are full-bleed
dark art. The site inherits that duality, because the site rebuilds the
app's UI in HTML — if the two disagree on light vs dark, the rebuilt
screens are simply lying about the product.
Every value below is contrast-verified; the numbers are the measured
WCAG ratios against that mode's own background.
====================================================================== */
/* --- chrome: light ---------------------------------------------------- */
--paper: #f8f8f8; /* the app's page ground (its most common pixel) */
--ink: #0a0a0c; /* content ground, for episode surfaces */
--surface: #ffffff; /* cards and bubbles — white on grey, as the app does */
--surface-2: #eceef2; /* recessed */
--muted: #d2d2d3; /* the app's weak band */
--border: rgba(16, 17, 20, 0.1);
--border-strong: rgba(16, 17, 20, 0.2);
/* One ramp, one hue direction. These three used to be #101114 (cool, B>G>R),
#5a5560 and #6b6771 (both warm/violet, R>=G) — i.e. the page's near-black
leaned cool while its two greys leaned purple, and the product-demo layer
had a THIRD cast (#5b5d67, cool). Three hue families inside one viewport is
what reads as "not quite precise" long before anyone can name why.
Everything is now cool-neutral (B > G > R, same slope), and the contrast
ratios are held at the values the old ramp was verified at. */
--text-hi: #101114; /* 17.78:1 AAA */
--text-lo: #55575f; /* 6.78:1 AA (was #5a5560, 6.81 — parity) */
--text-faint: #666871; /* 5.23:1 AA (was #6b6771, 5.20 — parity) */
/* The accent is text-capable on light ONLY at this depth. #946efe, the
gradient's own violet end, is 3.34:1 here — large text at best. That is
why the product owner handed over #3E119D specifically. */
--accent: #3e119d; /* 11.16:1 AAA on --paper */
--accent-soft: rgba(62, 17, 157, 0.1);
--accent-ink: #ffffff; /* 11.85:1 on the accent */
/* The brand mark is a GRADIENT, not a solid: in the app it rings whichever
character you are currently bonded with. Graphics only — the cyan end is
1.19:1 on light and must never carry text. */
--acc-cyan: #82f8ed;
--acc-mid: #88d0f2;
--acc-violet: #946efe;
--acc-grad: linear-gradient(112deg, #82f8ed 0%, #88d0f2 46%, #946efe 100%);
/* Character identity hues, the second layer of the app's colour system:
inactive characters are ringed in their own colour, the active one in the
brand gradient. Extend this list as the real cast is confirmed. */
--id-elias: #fd4c59;
--id-lead: #86fe4d;
/* Retired. The old site was near-black + #ff5924 warm orange; the product
has no orange anywhere. Kept only so any stylesheet still referencing
--ai-glow resolves — violet is now the BRAND colour, so the old rule that
quarantined violet to "AI is responding" no longer applies. */
--ai-glow: rgba(148, 110, 254, 0.5);
/* type */
--font-display: "Fraunces", "Iowan Old Style", ui-serif, serif;
--font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
/* ---- SMALL-TEXT SCALE ------------------------------------------------
Integers only, and only these. The page previously shipped 23 distinct
pixel sizes of which SIX were fractional (11.5 / 12.5 / 13.5 / 14.5 /
15.5 / 16.5). A half-pixel step cannot be read as hierarchy — it can only
be read as nobody having decided — and at 15.5px it does not even survive
rasterisation. Measured against Linear (10-15, all integers), Stripe and
Vercel (11/12/14 only).
The floor is 11px, not 10px. product-demo.css already states that rule for
the phone mock ("8-10px type was the loudest tell that this is a web page
drawing an app"); the site layer and the walkthrough were exempting
themselves from it in nine places. Same rule now, everywhere.
These lived in three separate blocks (.wt, .stage, and as literals in
product-demo.css) which is why half the page could not reach them. */
--t-11: 0.6875rem;
--t-12: 0.75rem;
--t-13: 0.8125rem;
--t-14: 0.875rem;
--t-15: 0.9375rem;
--t-16: 1rem;
--t-17: 1.0625rem;
/* ---- LINE-HEIGHT LADDER ---------------------------------------------
body sets 1.6, which is right for a 16-18px paragraph and wrong for
everything below it: inherited unchanged it put 11px labels on a 17.6px
line and 13px captions on 20.8px, so small type floated in a band nearly
twice its own height. The references tighten as size drops — Linear 1.4 at
12px / 1.5 at 13-14, Stripe 1.33-1.45 at 11-12, Vercel 1.33 at 12,
Mobbin 1.43 at 14. Nothing in the sub-15px band may inherit 1.6.
--lh-flush is for type that a box positions (pills, badges, buttons):
there the padding sets the height and any line-height above 1 fights it. */
--lh-11: 1.35;
--lh-12: 1.4;
--lh-13: 1.45;
--lh-14: 1.45;
--lh-15: 1.5;
--lh-body: 1.6;
--lh-flush: 1;
/* ---- MICRO-LABEL ----------------------------------------------------
The one recipe for every inert uppercase label on the page (.eyebrow,
.pd-kicker, .wt-stamp, .plan .name, table headers, FAQ groups). Mono at
600 with wide tracking, one step DARKER than body-secondary rather than
lighter: a label earns its quietness from size and case, not from being
faded until its stems break up. */
--label-tracking: 0.13em;
/* ---- DISPLAY STEPS --------------------------------------------------
The small end of this file has had a scale since the token block
above; the large end never did. Thirteen headlines each carried a
hand-tuned font-size and then made three more decisions on their own,
which is how the page ended up with twenty distinct letter-spacing
values (six of them clustered between -0.005em and -0.02em, a spread
no eye resolves) and a font-weight column that was flat at 600 from
an 11px label to a 76px headline.
A step here is FIVE values, not a size. Read across a row and the
relationship is the point: as the size climbs the weight comes DOWN,
the tracking goes further NEGATIVE, the leading TIGHTENS, and opsz
follows the size the line will actually render at.
That last one was the quiet defect. opsz is an optical-size axis
measured in points: Fraunces at "opsz" 144 is drawn with hairlines
meant for a 144pt line. Seven rules pinned 144 regardless of their
own size, so .stage-exit was rendering 144pt hairlines at 36px and
.stage-tail .wt-display at 56px — thin and underfed, which reads as
cheap rather than as delicate. opsz now tracks the step.
Sizes are deliberately NOT tokenised here. Each of the seven live
headlines is clamped against its own container and the homepage
cannot be verified by export (the WebGL stage times the renderer
out), so moving sizes would be betting on something unverifiable.
The four companion values are what were actually adrift.
Fraunces is loaded as wght@400..700 (was 500..700 — nothing below
500 was ever downloaded, which is also why .wt-lockclock's
`font-weight: 300` has been silently clamped for as long as it has
existed). 480 is reachable only because of that widened request; if
the font URL is ever narrowed again, peak silently snaps to 500. */
--fw-peak: 480; --tr-peak: -0.045em; --lh-peak: 0.78; --opsz-peak: 144;
--fw-display: 500; --tr-display: -0.032em; --lh-display: 0.98; --opsz-display: 96;
--fw-h1: 520; --tr-h1: -0.026em; --lh-h1: 1; --opsz-h1: 56;
--fw-h2: 550; --tr-h2: -0.02em; --lh-h2: 1.1; --opsz-h2: 40;
--fw-h3: 570; --tr-h3: -0.015em; --lh-h3: 1.15; --opsz-h3: 32;
/* radius — geometric progression, not round numbers */
--radius-sm: 0.75rem;
--radius-md: 1rem;
--radius-lg: 1.333rem;
--radius-xl: 1.777rem;
/* motion */
--ease-dive: cubic-bezier(0.22, 0.61, 0.36, 1);
--duration-slow: 620ms;
--duration-fast: 180ms;
--max-width: 1120px;
}
/* ========================================================================
DARK-CONTENT SCOPE.
Any surface that is "the episode" rather than "the app around it" opts in
with .on-ink, and the whole neutral + accent set inverts. Components never
need to know which mode they are in — they read --text-hi and --accent and
get the right one. This is the single mechanism that lets the site carry the
app's light-chrome/dark-content duality without two copies of every rule.
The accent swaps ends of the same gradient rather than changing hue: the
deep violet reads on light, the bright violet reads on dark. Same brand,
opposite ground.
======================================================================== */
.on-ink {
--paper: #0a0a0c;
--surface: #16161c;
--surface-2: #1e1e26;
--muted: #2a2a33;
--border: rgba(246, 247, 248, 0.1);
--border-strong: rgba(246, 247, 248, 0.2);
--text-hi: #f6f7f8; /* 18.44:1 AAA */
--text-lo: #a6a8b2; /* 8.35:1 AAA (was #a8a6ae — warm cast) */
--text-faint: #83858f; /* 5.38:1 AA (was #82808a — warm cast) */
--accent: #946efe; /* 5.58:1 AA on --paper */
--accent-soft: rgba(148, 110, 254, 0.16);
--accent-ink: #0a0a0c; /* 5.58:1 on the accent */
}
* { box-sizing: border-box; }
html {
max-width: 100%;
overflow-x: clip;
scroll-behavior: smooth;
}
/* Reduced motion. NOTE: this deliberately does NOT use the common
`animation-duration: 0.001ms !important` sledgehammer. That pattern resets an
animation to frame 0, which would leave the walkthrough's breathing ring at its
dimmest frame and its progress bars at zero width -- i.e. it would break the
still image rather than freeze it. Instead each looping animation is switched
off and explicitly HELD at a chosen frame, further down in the walkthrough
block. See the `.wt` reduced-motion rules. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 1ms !important;
animation-delay: 0s !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important;
transition-delay: 0s !important;
}
}
/* Visually hidden, but present for assistive tech. The walkthrough's beat spine
lives here: zero visible words, full screen-reader navigation. */
.vh {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.vh-focusable {
position: absolute;
left: 12px; top: 12px;
z-index: 60;
transform: translateY(-160%);
background: var(--accent);
color: var(--accent-ink);
font-size: 14px;
font-weight: 600;
padding: 11px 16px;
border-radius: 999px;
transition: transform 180ms var(--ease-dive);
}
.vh-focusable:focus { transform: translateY(0); }
body {
margin: 0;
max-width: 100%;
overflow-x: clip;
font-family: var(--font-body);
background: var(--paper);
color: var(--text-hi);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 4px;
}
img { max-width: 100%; display: block; }
.wrap {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 24px;
}
/* ---- Nav ---- */
.nav {
/* stickiness lives on .nav-shell, which is the scroll-state query container */
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
background: rgba(248, 248, 248, 0.82);
border-bottom: 1px solid var(--border);
}
.nav .wrap {
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
}
.nav-logo {
font-family: var(--font-display);
font-weight: 600;
font-size: 19px;
/* the value that was actually winning, from the duplicate further down */
letter-spacing: -0.005em;
display: flex;
align-items: center;
gap: 9px;
padding: 7px 0; /* 30px tall -> 44 */
}
.nav-logo .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--acc-grad);
box-shadow: 0 0 10px rgba(148, 110, 254, 0.45);
}
.nav-links { display: flex; gap: 28px; align-items: center; }
/* Hit areas, not just labels. These were 45x22 and 33x22 — a third of the 44px
minimum the product layer already honours, and the site layer was quietly
exempting itself from its own rule. Vertical padding only, so nothing moves. */
.nav-links a {
color: var(--text-lo);
font-size: var(--t-14);
/* 1.45 not the inherited 1.6, and the padding goes 11 -> 12 to pay for it:
tightening the line alone would have taken this hit area to 42.3px and
quietly broken the 44px rule the comment above exists to enforce. */
line-height: var(--lh-14);
padding: 12px 0;
/* 220ms on --ease-dive, matching the bar and the wordmark. This property
serves two jobs — hover feedback and the light/dark crossfade over the
stage — and it was running at 180ms/ease while the bar ran at
220ms/--ease-dive, so the state change arrived in two instalments. */
transition: color 220ms var(--ease-dive);
}
.nav-links a:hover { color: var(--text-hi); }
.nav-links .cta {
background: var(--accent);
color: var(--accent-ink);
font-weight: 600;
padding: 12px 18px; /* 38px tall -> 44 */
border-radius: 999px;
}
.nav-links .cta:hover { color: var(--accent-ink); }
@media (max-width: 360px) {
.nav-links > a:not(.cta) { display: none; }
}
/* ---- Hero: full-bleed portrait, no frame ---- */
.hero {
display: grid;
grid-template-columns: minmax(300px, 560px) 1fr;
align-items: stretch;
/* 60svh, not 90vh: the fold has to cut INTO beat 01 so ~40svh of live product
UI is on screen at first paint. That is the scroll pull, and it is also the
fastest product evidence the page can give. */
min-height: 60svh;
position: relative;
overflow: hidden;
}
.hero-copy {
padding: 104px 32px 40px clamp(24px, 4vw, 64px);
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
z-index: 2;
text-align: left;
}
.hero-visual {
position: relative;
min-height: 460px;
}
.hero-visual img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
.hero-visual::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(100deg, var(--ink) 0%, rgba(10, 10, 13, 0) 38%);
}
.hero-visual::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(10, 10, 13, 0) 55%, var(--ink) 100%);
}
@media (max-width: 860px) {
.hero { grid-template-columns: 1fr; min-height: auto; }
.hero-copy { padding: 96px 24px 28px; }
.hero-visual { height: 34svh; min-height: 240px; }
.hero-visual::before { background: linear-gradient(180deg, var(--ink) 0%, rgba(10, 10, 13, 0) 30%); }
}
/* Section label. Deliberately NOT a capsule: in a real product a pill outline
means "tappable", and every one of these labels is inert — which is exactly
what made them read as template chrome. The label is now typography only, in
the display face, and the section break it was faking is carried by a real
rule (see .section-head). Accent purple is freed up for buttons and links. */
/* Mono, not the display serif. Fraunces is a high-contrast face: at 14px its
hairlines are thinner than a device pixel, so setting it in caps, in a 5.2:1
grey, at only 0.06em tracking produced the softest, least deliberate type on
the page — the one place a screenshot at 100% looked blurred. Caps also need
more tracking than 0.06em at any size.
Mono is not a new idea here: .wt-stamp, .plan .name, .compare-table th and
.faq-group > h3 are ALL already mono uppercase labels. The serif eyebrow was
the outlier, so this is the site agreeing with itself. */
.eyebrow {
display: block;
font-family: var(--font-mono);
font-size: var(--t-11);
line-height: var(--lh-11);
font-weight: 600;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
color: var(--text-lo);
margin-bottom: 14px;
}
.hero h1 {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(40px, 6vw, 72px);
margin: 0 0 22px;
letter-spacing: -0.03em;
line-height: 1.02;
text-wrap: balance;
color: var(--text-hi);
}
.hero h1 em {
font-style: italic;
color: var(--accent);
}
.hero p.lead {
font-size: 18px;
color: var(--text-lo);
max-width: 480px;
margin: 0 0 34px;
}
.porthole {
position: relative;
width: min(100%, 420px);
aspect-ratio: 3 / 4;
border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
overflow: hidden;
background: linear-gradient(160deg, var(--surface-2), var(--ink) 70%);
box-shadow: 0 0 0 1px var(--border), 0 40px 90px -30px rgba(0, 0, 0, 0.6), 0 0 120px -40px var(--accent-soft);
}
.porthole img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
.porthole::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(120% 90% at 50% 110%, rgba(10, 10, 13, 0.55), transparent 60%);
pointer-events: none;
}
/* ---- Simple page header (Pricing/Docs — not the full-bleed homepage hero) ---- */
.page-header {
padding: 96px 0 24px;
text-align: center;
}
/* step display. CONSOLIDATED: this rule was declared twice — here at
30-46px/1.1/-0.02em and again further down at 40-76px/0.98/-0.03em, with
the second one winning every property it named. Only the later block's
values were ever on screen; the ones above were dead weight that read like
the live spec. One declaration now, carrying the larger (real) size.
`pretty`, not `balance`: both subpage headlines set their own break with a
, so there is nothing to balance across — balance would only redistribute
the wrap inside a sentence the author already ended. pretty guards the last
line against an orphan and leaves the authored break alone. Same reasoning
as #cast .section-head h2 above. */
.page-header h1 {
font-family: var(--font-display);
font-weight: var(--fw-display);
font-variation-settings: "opsz" var(--opsz-display), "wght" var(--fw-display);
font-size: clamp(40px, 6.2vw, 76px);
letter-spacing: var(--tr-display);
line-height: var(--lh-display);
margin: 0 0 16px;
text-wrap: pretty;
}
.page-header .lead {
font-size: 18px;
color: var(--text-lo);
max-width: 560px;
margin: 0 auto;
}
/* ---- Buttons ---- */
.btn-row { display: flex; gap: 16px; flex-wrap: wrap; }
.hero .btn-row { justify-content: flex-start; }
.appstore-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--accent);
border: 1px solid var(--accent);
color: var(--accent-ink);
padding: 12px 22px;
border-radius: var(--radius-sm);
font-size: 15px;
transition: transform var(--duration-fast) ease, opacity var(--duration-fast) ease;
}
.appstore-badge:hover { transform: translateY(-2px); opacity: 0.92; }
.appstore-badge .glyph { font-size: 22px; line-height: var(--lh-flush); }
/* Two stacked lines inside a fixed-height button: the box sets the rhythm, so
both run flush and the 4px gap is stated once rather than arriving as two
different inherited leadings. opacity 0.75 -> a real weight step, because
fading white type on a saturated accent is how the small line lost its edge. */
.appstore-badge .label small {
display: block;
font-size: var(--t-11);
line-height: var(--lh-flush);
font-weight: 500;
opacity: 0.82;
margin-bottom: 4px;
}
.appstore-badge .label strong {
display: block;
font-size: var(--t-16);
line-height: var(--lh-flush);
font-weight: 600;
}
.btn-secondary {
display: inline-flex;
align-items: center;
padding: 12px 22px;
border-radius: var(--radius-sm);
border: 1px solid var(--border-strong);
color: var(--text-hi);
font-size: 15px;
transition: border-color var(--duration-fast) ease, opacity var(--duration-fast) ease;
}
.btn-secondary:hover { border-color: var(--accent); opacity: 0.92; }
/* ---- Sections ---- */
section { padding: 64px 0; scroll-margin-top: 88px; }
/* The rule spans the section's content column, not the 640px text measure, so
it reads as structure rather than as an underline on the label. */
.section-head {
margin: 0 0 44px;
border-top: 1px solid var(--border);
padding-top: 20px;
}
.section-head h2,
.section-head p { max-width: 640px; }
.section-head.centered { text-align: center; }
.section-head.centered h2,
.section-head.centered p { margin-left: auto; margin-right: auto; }
/* step h2. font-weight and the axis carry the SAME number on purpose: a
pinned "wght" wins over font-weight, but an
whose font-weight is left
at the UA's `bold` = 700 while the axis says 550 declares two weights for
one word, and any renderer that misses the axis synthesises the heavier
one. Both stated, everywhere in this scale. */
.section-head h2 {
font-family: var(--font-display);
font-weight: var(--fw-h2);
font-variation-settings: "opsz" var(--opsz-h2), "wght" var(--fw-h2);
font-size: clamp(26px, 3.6vw, 36px);
margin: 0 0 14px;
letter-spacing: var(--tr-h2);
line-height: var(--lh-h2);
text-wrap: balance;
}
.section-head p {
color: var(--text-lo);
margin: 0;
font-size: var(--t-16);
line-height: var(--lh-body); /* 16px IS the size 1.6 was chosen for */
text-wrap: pretty;
}
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 860px) { .grid-3 { grid-template-columns: 1fr; } }
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 28px;
transition: border-color var(--duration-fast) ease;
}
.card:hover { border-color: var(--border-strong); }
.card .icon {
width: 44px; height: 44px;
border-radius: var(--radius-sm);
background: var(--accent-soft);
color: var(--accent);
display: flex; align-items: center; justify-content: center;
font-size: 19px;
margin-bottom: 18px;
}
.card h3 { font-size: var(--t-17); line-height: var(--lh-15); margin: 0 0 8px; font-weight: 600; }
.card p {
color: var(--text-lo);
font-size: var(--t-14); /* was 14.5 */
line-height: var(--lh-14);
margin: 0;
text-wrap: pretty;
}
/* ---- Vio companion section ---- */
.companion {
display: grid;
grid-template-columns: 0.82fr 1.18fr;
gap: 20px;
align-items: start;
}
@media (max-width: 860px) { .companion { grid-template-columns: 1fr; gap: 40px; } }
.companion-visual { margin-top: 52px; }
@media (max-width: 860px) { .companion-visual { margin-top: 0; } }
.companion-visual .porthole {
width: 100%;
max-width: 260px;
margin: 0 0 0 auto;
transform: rotate(3deg);
position: relative;
z-index: 2;
}
@media (max-width: 860px) { .companion-visual .porthole { margin: 0 auto; transform: none; } }
.companion-copy { position: relative; z-index: 1; }
.companion-copy h2 {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(26px, 3.6vw, 38px);
margin: 0 0 18px;
letter-spacing: -0.015em;
max-width: 12ch;
}
.companion-copy .bio {
color: var(--text-lo);
font-size: var(--t-16); /* was 16.5 */
line-height: var(--lh-body); /* was 1.7 — one leading for all 16px prose */
margin: 0 0 30px;
max-width: 56ch;
text-wrap: pretty;
}
.skill-row {
display: flex;
flex-direction: column;
margin-top: 8px;
max-width: 420px;
}
.skill-pill {
padding: 16px 0;
}
.skill-pill:first-child { padding-top: 0; }
.skill-pill:not(:first-child) {
border-top: 1px solid var(--border);
}
.skill-pill .kind {
display: block;
font-family: var(--font-mono);
font-size: var(--t-11);
line-height: var(--lh-11);
font-weight: 600;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
color: var(--accent);
margin-bottom: 8px;
}
.skill-pill .title {
display: block;
font-weight: 600;
font-size: var(--t-15);
line-height: var(--lh-15);
margin-bottom: 6px;
font-family: var(--font-display);
}
.skill-pill .line {
display: block;
color: var(--text-lo);
font-size: var(--t-13); /* was 13.5 */
line-height: var(--lh-13);
text-wrap: pretty;
}
/* ---- Memory mechanic feature (full-bleed, asymmetric) ---- */
.memory-feature {
background: var(--surface);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: 100px 0;
}
@media (max-width: 600px) { .memory-feature { padding: 72px 0; } }
.memory-feature .inner {
position: relative;
max-width: 620px;
padding-left: 64px;
}
@media (max-width: 600px) { .memory-feature .inner { padding-left: 8px; } }
.memory-feature .quote-mark {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(110px, 16vw, 200px);
line-height: 1;
color: var(--accent);
opacity: 0.16;
position: absolute;
top: -64px;
left: -24px;
pointer-events: none;
user-select: none;
}
@media (max-width: 600px) { .memory-feature .quote-mark { display: none; } }
.memory-feature h2 {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(28px, 3.8vw, 42px);
line-height: 1.12;
max-width: 13ch;
margin: 0 0 20px;
letter-spacing: -0.015em;
}
.memory-feature p {
color: var(--text-lo);
font-size: 17px;
line-height: 1.65;
max-width: 46ch;
margin: 0;
}
/* ---- Social proof band ---- */
.proof-band {
text-align: center;
max-width: 640px;
margin: 0 auto;
padding: 8px 0;
}
.proof-stars { color: var(--accent); font-size: 18px; letter-spacing: 6px; margin-bottom: 18px; }
.proof-band blockquote {
margin: 0 0 14px;
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(19px, 2.4vw, 24px);
line-height: 1.45;
color: var(--text-hi);
}
.proof-band cite {
color: var(--text-faint);
font-style: normal;
font-size: var(--t-14);
line-height: var(--lh-14);
}
.proof-pending {
color: var(--text-faint);
font-size: var(--t-14);
line-height: var(--lh-14);
font-style: italic;
}
/* ---- Cast / More Worlds gallery ---- */
#cast {
max-width: 1440px;
overflow: clip;
--cast-card-width: clamp(224px, 22vw, 320px);
--cast-x-outer: clamp(188px, 24vw, 350px);
--cast-x-inner: clamp(128px, 13vw, 190px);
--cast-y-outer: clamp(58px, 6vw, 90px);
--cast-y-inner: clamp(24px, 2.6vw, 40px);
--cast-caption-muted: rgba(255, 255, 255, 0.72);
view-timeline-name: --cast-fan-timeline;
view-timeline-axis: block;
}
#cast .section-head {
/* 1080, not 920: "More than one relationship." sets to 941px at the 72px
display size, so 920 clipped it by 21px and forced a second line. */
max-width: min(1080px, 100%);
margin: 0 auto;
text-align: center;
}
#cast .section-head .eyebrow {
margin-bottom: 0;
}
.cast-icon-reel {
position: relative;
width: 112px;
height: 58px;
margin: 8px auto 12px;
transform: translateY(20%);
overflow: hidden;
}
.cast-icon-reel img {
position: absolute;
top: 50%;
left: 50%;
width: 112px;
height: 112px;
max-width: none;
opacity: 0;
object-fit: contain;
transform: translate(-50%, calc(-50% + 8px)) rotate(-4deg) scale(0.94);
animation: cast-icon-cycle 12.5s ease-in-out infinite both;
animation-delay: calc(var(--icon-index) * 2.5s);
}
@keyframes cast-icon-cycle {
0% {
opacity: 0;
transform: translate(-50%, calc(-50% + 8px)) rotate(-4deg) scale(0.94);
}
3%, 16% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0) scale(1);
}
20%, 100% {
opacity: 0;
transform: translate(-50%, calc(-50% - 8px)) rotate(3deg) scale(0.98);
}
}
/* .section-head caps h2 and p at a 640px reading measure, which is right for
body copy and far too narrow for a 72px display line — it was the real reason
this headline broke, not the container above. Display sizes take the
container's width. */
#cast .section-head h2 {
max-width: none;
}
/* step display. This headline is twice the size of the .section-head h2 it
inherits from, so it takes the display row, not the h2 row — inheriting
h2's -0.02em left a 72px line tracked for a 36px one. */
#cast .section-head h2 {
margin-bottom: 0;
font-size: clamp(40px, 5.5vw, 72px);
font-weight: var(--fw-display);
font-variation-settings: "opsz" var(--opsz-display), "wght" var(--fw-display);
letter-spacing: var(--tr-display);
line-height: var(--lh-display);
/* pretty, not balance: balance evens out line lengths across the whole block
and will happily break mid-sentence to do it. pretty only guards the last
line against an orphan, which is all this needs once the sentences are
separated below. */
text-wrap: pretty;
}
#cast .section-head h2 span {
display: block;
}
.cast-fan {
position: relative;
height: clamp(490px, 43vw, 610px);
margin-top: 15.6px;
isolation: isolate;
}
.cast-card {
--fan-x: 0px;
--fan-y: 0px;
--fan-rotate: 0deg;
--fan-z: 5;
margin: 0;
position: absolute;
z-index: var(--fan-z);
top: 0;
left: 50%;
width: var(--cast-card-width);
transform:
translateX(calc(-50% + var(--fan-x)))
translateY(var(--fan-y))
rotate(var(--fan-rotate))
scale(var(--fan-scale, 1));
/* The reference fan rotates every card around its own centre. The old 130%
origin pulled the centre card upward and dropped the outer cards into an
exaggerated U, so the layout looked broken even after the animation ended. */
transform-origin: 50% 50%;
transition: transform 1.35s cubic-bezier(.16, 1, .3, 1);
}
.cast-card--far-left {
--fan-x: calc(-1 * var(--cast-x-outer));
--fan-y: var(--cast-y-outer);
--fan-rotate: -14deg;
--fan-scale: 0.82;
--fan-z: 1;
--fan-delay: 140ms;
}
.cast-card--left {
--fan-x: calc(-1 * var(--cast-x-inner));
--fan-y: var(--cast-y-inner);
--fan-rotate: -6deg;
--fan-scale: 0.92;
--fan-z: 2;
--fan-delay: 60ms;
}
.cast-card--right {
--fan-x: var(--cast-x-inner);
--fan-y: var(--cast-y-inner);
--fan-rotate: 6deg;
--fan-scale: 0.92;
--fan-z: 2;
--fan-delay: 60ms;
}
.cast-card--far-right {
--fan-x: var(--cast-x-outer);
--fan-y: var(--cast-y-outer);
--fan-rotate: 14deg;
--fan-scale: 0.82;
--fan-z: 1;
--fan-delay: 140ms;
}
/* Solid, and its own edge. Modelled on the Lando Norris socials fan the owner
supplied: every card there is an edge-to-edge photograph, so the card reads as
one object and needs no border and no shadow to say where it stops.
That exact move is unavailable here — the character webp files are alpha
cutouts (43-71% opaque, figure on transparency), so there is no photograph to
bleed. A deep fill is the equivalent: the card becomes a solid panel with the
figure standing on it instead of a near-white void with a small figure in the
middle, and the fill states the boundary the hairline used to state.
Taller too — 5/8 rather than 3/4 — because the art is 0.46-0.71 aspect and a
squat card left it swimming. */
.cast-card .frame {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 5 / 8;
border: 0;
background:
radial-gradient(120% 80% at 50% 8%, #2b2438 0%, transparent 62%),
linear-gradient(180deg, #1a1620 0%, #0c0a11 100%);
transition:
transform var(--duration-fast) var(--ease-dive),
opacity var(--duration-fast) ease,
border-color var(--duration-fast) ease;
}
/* The lead stays full-size while the surrounding cards step down. Its warmer
ground and top stacking order provide emphasis without pushing it into the
headline above. */
.cast-card--lead .frame {
background:
radial-gradient(120% 80% at 50% 6%, #4a2f7d 0%, transparent 64%),
linear-gradient(180deg, #241a38 0%, #0e0a16 100%);
}
.cast-card--lead {
--fan-scale: 1;
}
.cast-card .frame::after {
content: "";
position: absolute;
z-index: 1;
inset: 0;
background: linear-gradient(180deg, transparent 62%, #07060a 100%);
opacity: 0.9;
pointer-events: none;
}
.cast-card .frame img {
width: 100%;
height: 100%;
/* No padding, bottom-anchored: the subject fills the frame the way it does in
the reference rather than floating inside a margin. */
padding: 0;
object-fit: contain;
object-position: center bottom;
display: block;
}
/* Every card is named. These were opacity 0 with the name revealed on hover,
which meant that on any touch screen four of the five people in "more than
one relationship" were permanently anonymous — the section argues for a cast
and then credits one of them. The .frame::after gradient already darkens the
bottom 42% to --ink, so white type there is legible on all five.
Hover still does something: the card lifts and the others dim. */
.cast-card figcaption {
position: absolute;
z-index: 2;
left: 24px;
right: 24px;
bottom: 24px;
margin: 0;
text-align: left;
font-size: var(--t-16);
line-height: var(--lh-flush);
color: var(--accent-ink);
font-weight: 600;
opacity: 1;
transform: none;
transition:
opacity var(--duration-fast) ease,
transform var(--duration-fast) var(--ease-dive);
}
.cast-card figcaption small {
display: block;
color: var(--cast-caption-muted);
font-family: var(--font-mono);
font-size: var(--t-11);
line-height: var(--lh-11);
font-weight: 600;
margin-top: 6px;
text-transform: uppercase;
letter-spacing: var(--label-tracking);
}
/* The lead's opacity/transform override is gone with the base now visible; it
is distinguished by its accent border and tinted fill instead. */
/* The fan overlaps left-to-right with the lead on top, so each card's LEFT edge
is the one its neighbour covers on the right half of the fan. Left-aligned
captions there were being eaten — "Guitarist" rendered as "rist" and the
bassist's showed a single letter. The two right-hand cards caption from their
own right edge, which is the edge that stays exposed. */
.cast-card--right figcaption,
.cast-card--far-right figcaption {
text-align: right;
}
@media (hover: hover) and (pointer: fine) {
.cast-card:hover {
z-index: 10;
}
.cast-card:hover .frame {
border-color: var(--accent);
transform: translateY(-24px) scale(1.025);
}
.cast-card:hover figcaption {
opacity: 1;
transform: none;
}
.cast-fan:has(.cast-card:hover) .cast-card:not(:hover) .frame {
opacity: 0.64;
}
.cast-fan:has(.cast-card:hover) .cast-card--lead:not(:hover) figcaption {
opacity: 0;
transform: translateY(8px);
}
}
.cast-fan.is-staged .cast-card {
transform:
translateX(-50%)
translateY(96px)
rotate(0deg)
scale(1);
transition-duration: 480ms;
transition-timing-function: cubic-bezier(.22, 1, .36, 1);
transition-delay: 0ms;
}
.cast-fan.is-staged.is-arrived .cast-card {
transform:
translateX(-50%)
translateY(0)
rotate(0deg)
scale(1);
}
.cast-fan.is-staged.is-open .cast-card {
transform:
translateX(calc(-50% + var(--fan-x)))
translateY(var(--fan-y))
rotate(var(--fan-rotate))
scale(var(--fan-scale, 1));
transition-duration: 1.35s;
transition-timing-function: cubic-bezier(.16, 1, .3, 1);
transition-delay: var(--fan-delay, 0ms);
}
@media (max-width: 900px) {
#cast {
/* This band had the widest cards AND the full +/-16deg rotation, with the
rotation only easing off below 600 — the two end cards swung 114px past
the section edge at 900. Narrower cards, a tighter radius, and the
rotation stepped down here rather than in one jump at 600. */
/* The floors have to sit below what 601px produces, or they stop the fan
shrinking exactly where it needs to most: a 180px floor on the radius
meant 25vw was overridden all the way up to 720px wide. */
--cast-card-width: clamp(150px, 27vw, 250px);
--cast-x-outer: clamp(108px, 22vw, 230px);
--cast-x-inner: clamp(58px, 12vw, 120px);
--cast-y-outer: clamp(44px, 6vw, 68px);
--cast-y-inner: clamp(18px, 2.8vw, 30px);
}
.cast-card--far-left { --fan-rotate: -11deg; }
.cast-card--far-right { --fan-rotate: 11deg; }
.cast-card--left { --fan-rotate: -5.5deg; }
.cast-card--right { --fan-rotate: 5.5deg; }
.cast-fan {
height: clamp(460px, 68vw, 580px);
}
}
@media (max-width: 600px) {
#cast {
/* Tighter spread and a narrower card below 600px. With the taller 5/8 card
and the lead scaled up, the previous spread swung the outer two cards past
the viewport on a 390px screen and #cast's overflow:clip cut them through
the middle of a figure — a crop that reads as broken rather than as bleed. */
--cast-card-width: clamp(112px, 33vw, 138px);
--cast-x-outer: clamp(62px, 19vw, 78px);
--cast-x-inner: clamp(31px, 9.5vw, 39px);
--cast-y-outer: 32px;
--cast-y-inner: 12px;
}
#cast .section-head h2 {
font-size: clamp(36px, 11vw, 48px);
}
.cast-icon-reel {
width: 88px;
height: 52px;
margin: 6px auto 9px;
}
.cast-icon-reel img {
width: 92px;
height: 92px;
}
.cast-fan {
height: 290px;
margin-top: 11.7px;
}
.cast-card--lead {
--fan-y: -8px;
}
.cast-card--far-left {
--fan-rotate: -8deg;
}
.cast-card--left {
--fan-rotate: -4.5deg;
}
.cast-card--right {
--fan-rotate: 4.5deg;
}
.cast-card--far-right {
--fan-rotate: 8deg;
}
/* 10px inset, not 16. The card is 138px wide here and the lead is scaled 1.1,
so its LAYOUT width stays 138 while it draws at 152 — "STRONGEST BOND" needs
107px and a 16px inset left only 104.5 of layout measure, wrapping it by
three pixels. 10px gives 118 and keeps the label on one line without going
under 11px type. */
.cast-card figcaption {
left: 10px;
right: 10px;
bottom: 14px;
}
/* The ONE place on the site that deliberately sits below --label-tracking,
and the arithmetic is why: 0.13em pushes "STRONGEST BOND" past the 118px
of measure the inset above buys back. 0.03em fit, but 11px uppercase at
0.03em is under the floor where caps stay legible — the counters close up
and the word turns into a grey bar. 0.08em is the lowest tracking that
still reads as tracked: ~115px set against 118px available. It fits by
three pixels, same as the inset above it. If the label ever grows a
character, shorten the label — do not take the tracking back out. */
.cast-card figcaption small {
letter-spacing: 0.08em;
}
/* Lead only, below 600px. The fan compresses to ~150px cards with heavy
overlap here, so five captions land on top of each other — "Drumm…",
"Bandm…", "…rist" and three stacked CHOOSE LIFEs. Naming everyone is right
on desktop and actively worse here.
This is a patch over a layout problem, not a fix for it: at this width the
fan itself only really shows three of the five people. The names want to
leave the cards entirely on mobile — a row under the fan — which is a
markup change, not a caption tweak. */
.cast-card:not(.cast-card--lead) figcaption {
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.cast-icon-reel img {
display: none;
animation: none;
}
.cast-icon-reel img:first-child {
display: block;
opacity: 1;
transform: translate(-50%, -50%);
}
.cast-card {
animation: none;
transition: none;
}
.cast-card .frame,
.cast-card figcaption {
transition: none;
}
}
/* ---- Steps ---- */
.steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
counter-reset: step;
}
@media (max-width: 860px) { .steps { grid-template-columns: 1fr 1fr; } }
.step { position: relative; padding-top: 12px; }
.step::before {
counter-increment: step;
content: counter(step);
font-family: var(--font-mono);
display: inline-flex;
align-items: center; justify-content: center;
width: 32px; height: 32px;
border-radius: 50%;
background: var(--surface-2);
border: 1px solid var(--border);
color: var(--accent);
font-weight: 600;
margin-bottom: 14px;
}
/* font-weight stated, not inherited: an
takes the UA's `bold` = 700, and
Public Sans is loaded at 400/500/600 only — so every one of these headings
was being SYNTHESISED bold by the browser (a smeared copy of the 600, offset
and re-drawn). Same fix on .faq-item h4. */
.step h4 {
margin: 0 0 6px;
font-size: var(--t-15); /* was 15.5 */
line-height: var(--lh-15);
font-weight: 600;
}
.step p {
color: var(--text-faint);
font-size: var(--t-13); /* was 13.5 */
line-height: var(--lh-13);
margin: 0;
text-wrap: pretty;
}
/* ---- Download CTA band ---- */
.cta-band {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 56px 40px;
text-align: center;
}
/* step h2. This was the barest headline on the site: 34px of display serif
with no tracking and no leading declared anywhere, falling through to the
UA's `normal` — and it is the closing headline on all three pages. */
.cta-band h2 {
font-family: var(--font-display);
font-weight: var(--fw-h2);
font-variation-settings: "opsz" var(--opsz-h2), "wght" var(--fw-h2);
font-size: clamp(24px, 3.5vw, 34px);
margin: 0 0 12px;
letter-spacing: var(--tr-h2);
line-height: var(--lh-h2);
text-wrap: balance;
}
.cta-band p { color: var(--text-lo); margin: 0 0 28px; }
/* index's pre-launch variant: a dated season promise instead of a download.
Slightly tighter than the shared band — with no button to anchor it, the
full 56px padding read as an empty card. */
.cta-band--teaser { padding: 44px 32px 46px; }
.cta-band--teaser .cta-coming {
margin: 0 0 14px;
color: var(--text-hi);
font-family: var(--font-mono);
font-size: 13px;
font-weight: 600;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
}
/* ---- Footer ---- */
footer {
border-top: 1px solid var(--border);
padding: 32px 0;
color: var(--text-faint);
font-size: var(--t-13); /* was 13.5 */
line-height: var(--lh-13);
}
footer .wrap {
display: flex;
flex-direction: column;
gap: 14px;
}
footer .foot-links {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
}
footer a:hover { color: var(--text-hi); }
.disclaimer {
color: var(--text-faint);
font-size: var(--t-12); /* was 12.5 */
line-height: var(--lh-12); /* was 1.6 — 20px of leading on 12.5px type */
max-width: 68ch; /* was 720px; a measure belongs in characters */
text-wrap: pretty;
}
/* ---- Pricing ---- */
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
align-items: stretch;
}
@media (max-width: 860px) { .pricing-grid { grid-template-columns: 1fr; } }
.plan {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 32px 28px;
display: flex;
flex-direction: column;
}
.plan.featured {
border-color: var(--accent);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent),
0 20px 60px color-mix(in srgb, var(--accent) 10%, transparent);
position: relative;
}
/* A badge is type inside a box: line-height flush, padding does the height.
700 -> 600 because 700 does not exist in the loaded Public Sans and was being
synthesised — on 11.5px caps that smear is most of what the badge looked like. */
.plan.featured .badge {
position: absolute; top: -13px; left: 28px;
background: var(--accent);
color: var(--accent-ink);
font-size: var(--t-12); /* was 11.5 */
line-height: var(--lh-flush);
font-weight: 600;
letter-spacing: 0.02em;
padding: 6px 12px; border-radius: 999px;
}
.plan .name {
font-family: var(--font-mono);
font-size: var(--t-13); /* was 14 — it is a label, not a heading */
line-height: var(--lh-13);
font-weight: 600;
color: var(--text-lo);
text-transform: uppercase; letter-spacing: var(--label-tracking);
}
/* Mono, so the Fraunces display steps do not apply — a price is a number.
-0.02em was declared in a second .plan .price block far below (with the note
about "$9.99" setting as "$9 . 99"); folded in here so the price has one
declaration. Mono fits loose by design and a 34px setting has to take some of
that back.
tabular-nums REMOVED as dead weight, NOT as a fix: IBM Plex Mono is
monospaced, so every glyph — figures, the period, the dollar sign — is
already on one advance and the property has nothing left to do. Verified by
render: pricing.html before and after the removal hashes identically, not one
pixel. (It stays on .compare-table td and the three product-demo counters,
where the face is mono but the figures really do form a vertical column.)
Which also means the airy "$9 . 99" is not a bug to close with tracking — it
is what a monospaced face does to a period, and -0.02em cannot reach it. The
only ways to close it are to set the price in Fraunces or Public Sans, or to
accept it as the mono look. Left as mono, deliberately: the price sits in the
same register as .plan .name above it. */
.plan .price {
font-family: var(--font-mono);
font-size: 34px;
font-weight: 600;
letter-spacing: -0.02em;
margin: 10px 0 4px;
}
/* the /month suffix returns to normal tracking — it is words, not figures */
.plan .price span {
font-size: var(--t-14);
color: var(--text-faint);
font-weight: 400;
letter-spacing: 0;
}
.plan .tagline {
color: var(--text-lo);
font-size: var(--t-14);
line-height: var(--lh-14);
margin-bottom: 20px;
text-wrap: pretty;
}
.plan ul { list-style: none; padding: 0; margin: 0 0 28px; flex: 1; }
.plan li {
padding: 10px 0;
border-bottom: 1px solid var(--border);
font-size: var(--t-14);
color: var(--text-lo);
display: flex;
gap: 10px;
line-height: var(--lh-14);
}
/* The mark is defined once, in the polish pass at the foot of this file — a
masked check rather than U+25C6 BLACK DIAMOND. Leaving the old glyph here to
be silently overridden 2000 lines later is how a stylesheet stops being
readable, so it goes. */
.plan .btn-secondary, .plan .appstore-badge { justify-content: center; }
.compare-table {
width: 100%;
border-collapse: collapse;
margin-top: 56px;
font-size: var(--t-14);
line-height: var(--lh-14);
}
.compare-table-wrap { overflow-x: auto; }
.compare-table th, .compare-table td {
padding: 14px 16px;
border-bottom: 1px solid var(--border);
text-align: left;
}
.compare-table th {
color: var(--text-lo); font-weight: 600;
font-size: var(--t-12); /* was 12.5 */
line-height: var(--lh-12);
text-transform: uppercase; letter-spacing: var(--label-tracking);
font-family: var(--font-mono);
}
.compare-table td:not(:first-child), .compare-table th:not(:first-child) {
text-align: center; color: var(--text-lo); font-variant-numeric: tabular-nums;
}
/* ---- Docs ---- */
.docs-layout {
display: grid;
grid-template-columns: 220px 1fr;
gap: 48px;
}
@media (max-width: 860px) { .docs-layout { grid-template-columns: 1fr; } }
.docs-nav { position: sticky; top: 88px; align-self: start; }
.docs-nav a {
display: block;
padding: 8px 0;
color: var(--text-faint);
font-size: var(--t-14);
line-height: var(--lh-14);
border-left: 2px solid transparent;
padding-left: 12px;
transition: color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}
.docs-nav a:hover, .docs-nav a.active { color: var(--text-hi); border-color: var(--accent); }
/* step h3 — 22px is the bottom of that step's range. Tracking was declared in a
second .docs-content h2 block further down (-0.01em); it lives here now with
the rest of the step. */
.docs-content h2 {
font-family: var(--font-display);
font-weight: var(--fw-h3);
font-variation-settings: "opsz" var(--opsz-h3), "wght" var(--fw-h3);
font-size: 22px;
letter-spacing: var(--tr-h3);
line-height: var(--lh-h3);
margin: 48px 0 16px;
}
.docs-content h2:first-child { margin-top: 0; }
.docs-content p { color: var(--text-lo); }
.docs-content ol, .docs-content ul { color: var(--text-lo); padding-left: 20px; }
.docs-content li { margin-bottom: 8px; }
.docs-content code {
font-family: var(--font-mono);
background: var(--surface-2);
padding: 2px 7px;
border-radius: 6px;
font-size: var(--t-13);
}
.faq-group { margin-bottom: 40px; }
/* 16px was a label set at body size, which is why it competed with the questions
under it. Same micro-label recipe as every other mono cap on the site. */
.faq-group > h3 {
font-size: var(--t-12);
line-height: var(--lh-12);
color: var(--text-lo);
text-transform: uppercase;
letter-spacing: var(--label-tracking);
margin: 0 0 12px;
font-family: var(--font-mono);
font-weight: 600;
}
.faq-item {
border-bottom: 1px solid var(--border);
padding: 18px 0;
}
.faq-item h4 {
margin: 0 0 8px;
font-size: var(--t-15); /* was 15.5 */
line-height: var(--lh-15);
font-weight: 600; /* see .step h4 — UA bold was being synthesised */
}
.faq-item p {
margin: 0;
font-size: var(--t-14);
line-height: var(--lh-14);
text-wrap: pretty;
}
.safety-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--accent);
font-size: var(--t-14); /* was 14.5 */
line-height: var(--lh-14);
font-weight: 500;
margin-top: 8px;
}
/* ==========================================================================
THE WALKTHROUGH (.wt)
Spec: docs/superpowers/specs/2026-07-25-scroll-walkthrough-design.md
A six-screen scroll narrative in which the visitor makes one real choice and
is quoted back to themselves four screens later. Sticky panels + CSS only for
everything load-bearing; the JS file adds entrance cascades and nothing else.
========================================================================== */
.wt {
/* ---- type: two bands with a hard dead zone between 17px and 40px --------
Band A never grows (0vw coefficient). Band B grows violently. The empty
middle IS the scale contrast; it is doing the work that deleted copy used
to do. Ratio runs 4.3:1 on a phone to 12.8:1 on a desktop by itself.
Band A's steps now come from :root — this block redefined the same five
tokens the site layer could not see, and its --t-10 was below the 11px
floor. Only the two display sizes are local, because only they are. */
--t-display: clamp(2.5rem, 1.15rem + 6.4vw, 6.5rem); /* 40 -> 104px */
--t-peak: clamp(3rem, 1.30rem + 8.0vw, 8.5rem); /* 48 -> 136px */
/* ---- the app's own font. Resolves to real SF Pro on iPhone/Mac, which is
what makes rebuilt iOS UI stop looking like web cards. Deliberately a
different family from the editorial layer -- same reasoning as the app
radii below not reusing --radius-*. */
--font-ios: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui,
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
/* ---- app radii: their own scale. Must NOT reuse --radius-*; the site's
1.333 geometric web series is a large part of why rebuilt app UI reads as
a web card. The asymmetric single-corner tightening is the iMessage tell. */
--ios-bubble: 18px;
--ios-tail: 5px;
--ios-card: 16px;
--ios-choice: 13px;
--ios-col-x: 30px;
--ios-col-y: 38px;
/* ---- motion: three easings for the whole page, plus linear for the two
diegetic playback fills. Duration ladder has a dead zone too: nothing
between 700ms and 1400ms, so responses are either crisp or cinematic. */
--ease-press: cubic-bezier(0.4, 0, 1, 1);
--ease-surface: cubic-bezier(0.16, 1, 0.30, 1);
--shadow-col: 0 0 0 1px rgba(245, 245, 247, 0.055),
0 2px 14px -4px rgba(0, 0, 0, 0.7),
0 24px 70px -18px rgba(0, 0, 0, 0.85),
inset 0 1px 0 rgba(245, 245, 247, 0.06);
/* Six layers, each offset LEFTWARD so one light source is implied across the
whole page. The final inset hairline catching light on the top edge is what
makes a flat div read as a physical card. */
--shadow-ios: 0 0 0 1px rgba(245, 245, 247, 0.05),
-1px 1px 2px rgba(0, 0, 0, 0.5),
-3px 3px 6px rgba(0, 0, 0, 0.45),
-6px 6px 14px -3px rgba(0, 0, 0, 0.5),
-12px 12px 28px -6px rgba(0, 0, 0, 0.55),
-24px 24px 56px -12px rgba(0, 0, 0, 0.6),
inset 0 1px 0 rgba(245, 245, 247, 0.06);
--gate: 40svh;
position: relative;
overflow: visible; /* no ancestor may clip, or sticky dies silently */
padding: 0; /* the global `section{padding:64px 0}` would otherwise
add 128px of dead space inside the walkthrough */
}
/* One implied light source, upper left. Never centred: a centred radial
darkening with a soft glow behind a column IS the banned generic-dark-AI look. */
.wt::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
background: radial-gradient(120% 90% at 32% 22%,
transparent 0, transparent 44%, rgba(10, 10, 13, 0.5) 100%);
}
/* ---- descent arc -------------------------------------------------------
Stepped, not swept: a continuous gradient across 13 viewports of a 5% luma
range bands on 8-bit panels. Each beat is flat; each seam bridges. 04 breaks
upward into warm paper -- being remembered is the surfacing moment, and the
dive metaphor is what earns it. 05 is the floor (1:12am). The close returns
to the hero's exact value so the loop closes in colour as well as in words. */
.wt-beat { position: relative; padding: 0; scroll-margin-top: 0; }
/* All sections are the app's own light ground now. Darkness is a property of the
depicted SCREEN, not of the page, so it lives on .wt-col via .on-ink. The old
13-viewport "descent arc" is gone with it: value is diegetic here, not
decorative, which is a stronger reason for it than the arc ever had. */
.wt-01 { height: 190svh; background: var(--paper); }
.wt-02 { height: 200svh; background: var(--paper); }
.wt-03 { height: 180svh; background: var(--paper); }
.wt-04 { height: 240svh; background: var(--paper); }
.wt-05 { height: 180svh; background: var(--paper); }
.wt-seam { position: relative; }
.wt-seam--a { height: 16svh; background: var(--paper); }
.wt-seam--b { height: 24svh; background: var(--paper); }
/* seam C is the longest emptiness on the page and it carries the slow surfacing
gradient. 80svh of rising light. The stamp is pinned to the top third, where
the ground is still dark -- centred, it would land mid-gradient with
unpredictable contrast. */
.wt-seam--c {
height: 80svh;
background: var(--paper);
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 9svh;
}
/* seam D is half seam C's height: slow surface, fast plunge. */
.wt-seam--d {
height: 40svh;
background: var(--paper);
display: grid;
place-items: center;
}
.wt-gate {
/* LOAD-BEARING GEOMETRY -- DO NOT EDIT WITHOUT READING THIS.
.wt-gate must be the IMMEDIATE next sibling of #wt-02, #wt-02 must be
exactly 200svh tall, its .wt-panel exactly 100svh, and there must be NO
margin between them. Then the gate's top edge sits at sectionTop+200svh
while the pin releases at sectionTop+100svh -- i.e. the gate is at least one
full viewport BELOW the fold for the entire pin, so collapsing it changes
only off-screen document. Break any of the three and Safari (which has zero
scroll-anchoring support, on the platform that matters most) will visibly
jerk on iPhone. */
height: var(--gate);
background: #0a090c;
}
@media (prefers-reduced-motion: no-preference) {
.wt-gate { transition: height 620ms var(--ease-dive); }
}
.wt-stamp {
font-family: var(--font-mono);
font-size: var(--t-11);
line-height: var(--lh-11);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.14em; /* the widest tracking on the page */
color: var(--text-faint);
}
/* ---- panel + desktop frame --------------------------------------------- */
.wt-panel {
position: sticky;
top: 0;
height: 100vh;
height: 100svh; /* svh, never dvh: dvh resizes as the iOS toolbar collapses
and would fight the pin. Never -webkit-fill-available
either: buggy inside flex/grid on iOS. */
overflow: clip;
background: transparent; /* the section behind carries the colour; this also
eliminates all overdraw */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 2;
--col: min(400px, calc(78svh * 0.4613));
}
.wt-01 .wt-panel, .wt-05 .wt-panel { --col: min(560px, calc(84svh * 0.4613)); }
.wt-flank { display: none; }
@media (min-width: 1100px) {
.wt-panel {
display: grid;
grid-template-columns: 1fr var(--col) 1fr;
align-items: center;
column-gap: clamp(24px, 4vw, 72px);
}
/* Flanks are never symmetrical and never both empty -- two matched empty
flanks around a centred column is exactly what reads as a broken
responsive layout. Beats 01 and 05 have no display line and no crop; they
solve it by going wide instead (560px vs 400px). */
.wt-flank { display: flex; align-items: center; }
.wt-flank--l { justify-content: flex-end; }
.wt-flank--r { justify-content: flex-start; }
}
/* ---- the app column ---------------------------------------------------- */
.wt-col {
position: relative;
width: var(--col);
max-width: 100%;
aspect-ratio: 393 / 852; /* iPhone logical points */
border-radius: var(--ios-col-x) / var(--ios-col-y);
background: var(--surface);
overflow: hidden;
box-shadow: var(--shadow-col);
font-family: var(--font-ios);
display: flex;
flex-direction: column;
justify-self: center;
}
/* ---- the story frame (beats 01, 02) ----------------------------------- */
.wt-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.wt-shot {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
filter: brightness(var(--fig-lum, 0.68)) contrast(var(--fig-con, 1.08));
}
.wt-shot--a { object-position: 50% 22%; }
.wt-shot--b { object-position: 54% 34%; opacity: 0; }
/* Two crops of one static render, cross-dissolving. This is the answer to "it
must read as video with no licensable footage" -- the two rejected clips were
YSL runway footage and a third-party-watermarked reel. Honest caveat: a slow
dissolve between two crops reads as a cinematic CUT, not as motion within a
shot. Combined with a burned-in subtitle and a filling bar it should land;
this is the first thing to eyeball on a real build. */
@keyframes wt-shot { 0%, 44% { opacity: 0; } 56%, 100% { opacity: 1; } }
.wt-01 .wt-shot--b { animation: wt-shot 9s var(--ease-dive) infinite alternate; }
.wt-stage::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(10, 10, 13, 0.55) 0%,
transparent 26%, transparent 52%, rgba(10, 10, 13, 0.92) 100%);
}
/* bonds row -- home-feed furniture. Moved here from beat 05: at beat 01 it says
"a roster exists" in two words. Never enters, never hover-lifts. */
.wt-bonds {
position: absolute;
top: 0; left: 0; right: 0;
z-index: 3;
padding: 14px 16px 0;
}
.wt-bonds-head {
display: flex;
align-items: baseline;
gap: 8px;
}
.wt-bonds .lbl {
font-family: var(--font-body);
font-size: var(--t-11);
line-height: var(--lh-11);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--label-tracking);
color: var(--text-faint);
}
.wt-bonds .hint {
font-family: var(--font-body);
font-size: var(--t-11); /* was --t-10, below the 11px floor */
line-height: var(--lh-11);
color: var(--text-faint);
opacity: 0.72;
}
.wt-bonds ul { display: flex; gap: 8px; list-style: none; margin: 8px 0 0; padding: 0; }
.wt-bonds li {
width: 44px; height: 44px;
}
.wt-bonds button {
appearance: none;
width: 44px; height: 44px;
padding: 2px;
border: 1px solid var(--border);
border-radius: 50%;
overflow: hidden;
background: var(--surface-2);
opacity: 0.34;
cursor: pointer;
transition:
opacity 180ms ease,
background 180ms ease,
scale 100ms ease-out;
}
.wt-bonds button[aria-pressed="true"] {
border-color: transparent;
background: var(--acc-grad);
opacity: 1;
box-shadow: 0 0 18px rgba(148, 110, 254, 0.28);
}
.wt-bonds button:active { scale: 0.97; }
.wt-bonds button:focus-visible {
outline: 2px solid var(--acc-violet);
outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
.wt-bonds button:hover { opacity: 0.72; }
.wt-bonds button[aria-pressed="true"]:hover { opacity: 1; }
}
.wt-bonds img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
object-position: 50% 12%;
}
.wt-slug {
position: absolute;
left: 16px; bottom: 96px;
z-index: 3;
}
.wt-slug .world {
font-family: var(--font-display);
font-size: var(--t-17);
font-variation-settings: "opsz" 24, "wght" 500; /* the opposite end of the
optical axis from the display lines. Fraunces appears inside the app column
in exactly this one role and nowhere else. */
color: var(--text-hi);
display: block;
}
.wt-slug .series {
display: block;
margin-bottom: 4px;
font-family: var(--font-mono);
font-size: var(--t-11);
line-height: var(--lh-11);
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
}
.wt-slug .ep {
font-family: var(--font-mono);
font-size: var(--t-11);
line-height: var(--lh-11);
letter-spacing: 0.1em;
color: var(--text-faint);
}
.wt-slug .cast-credit {
display: block;
margin-top: 4px;
font-family: var(--font-body);
font-size: var(--t-11);
line-height: var(--lh-11);
color: var(--text-lo);
}
/* burned-in subtitle: a centred caption inside a vertical frame is the single
most universally-read "this is video" signal that exists, and it costs one
line of dialogue we already own. */
.wt-sub {
position: absolute;
left: 22px; right: 22px; bottom: 62px;
z-index: 3;
text-align: center;
font-size: var(--t-15);
line-height: var(--lh-15);
color: #f5f5f7;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
/* progress bar: ACHROMATIC IN EVERY STATE. The accent means "your agency";
spending that meaning on system chrome to buy a 300ms flourish would forfeit
the beat-04 payoff. */
.wt-bar {
position: absolute;
left: 16px; right: 16px; bottom: 44px;
z-index: 3;
height: 2px;
background: rgba(245, 245, 247, 0.1);
border-radius: 2px;
}
.wt-bar i { display: block; height: 100%; background: var(--text-lo); border-radius: 2px; }
@keyframes wt-play { from { width: 0; } to { width: 62%; } }
.wt-01 .wt-bar i { animation: wt-play 9s linear infinite; }
.wt-dive {
position: absolute;
left: 16px; right: 16px; bottom: 14px;
z-index: 3;
display: flex; align-items: center; justify-content: center;
min-height: 44px;
max-width: 300px;
margin: 0 auto;
border-radius: 999px;
background: var(--accent);
color: var(--accent-ink);
font-weight: 600;
font-size: var(--t-15);
line-height: var(--lh-flush);
}
/* the next World, deliberately cropped so its title is cut off. Three signals in
one element: vertical feed / more than one World / more than one kind of
character. */
.wt-next {
height: 52px;
flex: none;
position: relative;
overflow: hidden;
border-top: 1px solid var(--border);
}
.wt-next img {
width: 100%;
object-fit: cover;
object-position: 50% 8%;
filter: brightness(0.5);
}
/* ---- beat 02: the halt ------------------------------------------------- */
.wt-02 .wt-col { justify-content: space-between; }
.wt-02 .wt-stage { flex: 1; }
.wt-dim {
position: absolute;
inset: 0;
z-index: 4;
background: radial-gradient(120% 80% at 50% 42%,
rgba(10, 9, 12, 0.62) 0%, rgba(10, 9, 12, 0.9) 100%);
backdrop-filter: blur(2px) saturate(1.4);
-webkit-backdrop-filter: blur(2px) saturate(1.4);
transition: opacity 620ms var(--ease-dive);
}
/* Apple's materials boost saturation behind blur; omitting saturate() is why web
recreations look like grey frosted glass. This is the ONLY backdrop-filter on
the entire page. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.wt-dim { background: rgba(10, 9, 12, 0.92); }
}
.wt-02 .wt-bar { bottom: auto; top: 12px; opacity: 0.5; }
.wt-02 .wt-bar i { width: 32%; }
.wt-clock {
position: absolute;
top: 22px; right: 16px;
z-index: 5;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-size: var(--t-11);
line-height: var(--lh-11);
letter-spacing: 0.08em;
color: var(--text-faint);
}
.wt-ask {
position: relative;
z-index: 5;
margin: auto 22px 0;
font-size: var(--t-15);
line-height: 1.4;
color: var(--text-hi);
text-align: center;
}
.wt-choices {
position: relative;
z-index: 5;
border: 0;
margin: 18px 0 0;
padding: 0 16px max(24px, env(safe-area-inset-bottom));
display: flex;
flex-direction: column;
gap: 12px;
}
/* sr-only, NOT display:none -- display:none removes the input from the a11y tree
and kills the label association. No