/* ==========================================================================
SIMPLE GENIUS — site.css
Art direction: "Editorial Instrument"
A warm greige editorial ground (paper, not app chrome) carrying serious
product material. Structure is made visible: a real 12-column grid, exposed
hairline rails and dividers, four distinct surface levels, and gold used
only as structure — a rule, a tick, a node. Display type is Playfair at
real scale with tight tracking; everything operational is Inter.
Architecture (read DESIGN-SYSTEM.md for the full contract):
01 tokens — the only place values are declared
02 base + a11y
03 layout: container / grid / rails / debug overlay
04 surfaces
05 type: eyebrow, display, prose, statement, rules, section heads
06 header + nav
07 buttons + links
08 hero + product shots
09 homepage components
10 shared page components (card, compare, accordion, form, …)
11 footer + reveal
12 responsive
13 page-specific appendix (pages A / pages B — inherited, token-remapped)
Rules: vanilla CSS, one stylesheet, :root tokens, BEM-ish naming,
max four nesting levels of selector depth, no build step, Webflow-portable.
Every spacing value comes from the scale. No arbitrary pixels.
========================================================================== */
/* ----------------------------------------------------------- 01 tokens ---- */
:root {
/* --- colour: ground ---------------------------------------------------- */
--c-ground: #EDEBE8; /* page ground (warm greige) */
--c-ground-2: #F4F2EF; /* raised container on ground */
--c-ground-3: #E3E0DB; /* inset / recessed well */
--c-white: #FFFFFF; /* subject surface (paper) */
/* --- colour: ink ------------------------------------------------------- */
--c-ink: #1B1B1A; /* dark band, primary text */
--c-ink-deep: #121211; /* deepest band (closing) */
--c-ink-soft: #262624; /* raised container on a dark band */
--c-ink-inset: #0D0D0C; /* inset well on a dark band */
--c-steel: #52504C; /* secondary text on light (raised contrast) */
--c-mute: #5A5852; /* tertiary text on light (raised contrast) */
--c-on-dark: #EDEBE8; /* primary text on dark */
--c-on-dark-2: rgba(237,235,232,.86); /* secondary text on dark (raised) */
--c-on-dark-3: rgba(237,235,232,.72); /* tertiary text on dark (raised) */
/* --- colour: gold (structure only) ------------------------------------- */
--c-gold: #D4AF37;
--c-gold-mid: #B08D2A;
--c-gold-deep: #8A6D1F;
--c-gold-text: #7A5F16; /* 4.9:1 on --c-ground */
--c-gold-wash: rgba(212,175,55,.10);
/* --- colour: hairlines ------------------------------------------------- */
--c-line: rgba(27,27,26,.12);
--c-line-strong: rgba(27,27,26,.26);
--c-line-faint: rgba(27,27,26,.07);
--c-line-dark: rgba(237,235,232,.16);
--c-line-dark-strong: rgba(237,235,232,.34);
--c-line-dark-faint: rgba(237,235,232,.09);
/* legacy aliases — retained so inherited page blocks keep resolving */
--c-bone: var(--c-ground);
--c-charcoal: var(--c-ink);
--c-charcoal-soft: var(--c-ink-soft);
/* --- type families ----------------------------------------------------- */
--ff-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
--ff-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--ff-declaration: "Raleway", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* legacy font-var aliases — some older blocks reference these names directly */
--font-display: var(--ff-display);
--font-sans: var(--ff-sans);
--font-eyebrow: var(--ff-sans);
/* --- type scale: display (Playfair) ------------------------------------ */
--fs-hero: clamp(3.1rem, 6.6vw, 6rem);
--fs-1: clamp(2.55rem, 4.6vw, 4.25rem);
--fs-2: clamp(2.05rem, 3.4vw, 3.1rem);
--fs-3: clamp(1.7rem, 2.4vw, 2.25rem);
--fs-4: clamp(1.35rem, 1.7vw, 1.6rem);
--fs-stat: clamp(5.5rem, 15vw, 13rem);
/* --- type scale: operational (Inter) ----------------------------------- */
/* readability pass: xs 14->16, eyebrow 13->15, sm 16->17, base 16->17 */
--fs-lead: 1.1875rem; /* 19px */
--fs-body: 1.125rem; /* 18px */
--fs-base: 1.0625rem; /* 17px */
--fs-sm: 1.0625rem; /* 17px */
--fs-xs: 1rem; /* 16px */
--fs-eyebrow: .9375rem; /* 15px */
/* legacy type aliases */
--fs-display: var(--fs-hero);
--fs-3xl: var(--fs-1);
--fs-2xl: var(--fs-2);
--fs-xl: var(--fs-3);
--fs-lg: var(--fs-4);
--fs-md: var(--fs-lead);
/* --- tracking / leading ------------------------------------------------ */
--ls-hero: -.032em;
--ls-display: -.022em;
--ls-tight: -.012em;
--ls-eyebrow: .16em;
--ls-label: .1em;
--lh-hero: .96;
--lh-display: 1.06;
--lh-title: 1.18;
--lh-body: 1.62;
/* --- spacing scale (the only source of space) -------------------------- */
--sp-1: .25rem;
--sp-2: .5rem;
--sp-3: .75rem;
--sp-4: 1rem;
--sp-5: 1.5rem;
--sp-6: 2rem;
--sp-7: 3rem;
--sp-8: 4rem;
--sp-9: clamp(2.5rem, 4vw, 4rem);
--sp-10: clamp(3rem, 5vw, 5rem);
--sp-11: clamp(3.5rem, 6vw, 6rem);
/* --- grid -------------------------------------------------------------- */
--maxw: 1240px;
--maxw-mid: 940px;
--maxw-narrow: 720px;
--page-margin: clamp(1.25rem, 4vw, 3.5rem);
--gutter: clamp(1rem, 1.7vw, 1.5rem);
--col: calc((min(100% - (2 * var(--page-margin)), var(--maxw)) - (11 * var(--gutter))) / 12);
/* --- radii ------------------------------------------------------------- */
--r-xs: 3px;
--r-sm: 6px;
--r-md: 10px;
--r-lg: 16px;
--r-pill: 999px;
/* --- borders / controls ------------------------------------------------ */
--bw: 1px;
--bw-2: 2px;
--ctl-h: 3rem; /* every interactive control shares this height */
--ctl-h-sm: 2.75rem; /* was 2.5rem — mobile tap targets ≥44px per §3.3 */
--header-h: 76px; /* trimmed from 92px per Sam — tighter nav zone */
--logo-h: 44px; /* was 34px — bigger logo per §3.3 */
/* --- component geometry (not space: shared artboards and fixed objects) - */
--glyph-lg: 48px; /* the shared glyph artboard */
--glyph-sm: 28px; /* small card icon artboard */
--fs-diagram: 9px; /* SVG label size inside a 500x300 viewBox */
--focus-ring: 3px;
--blur: 14px;
/* --- interaction physics (translate distances, never spacing) ----------- */
--lift-1: 1px;
--lift-2: 2px;
--shift: 3px;
--rise: 14px; /* scroll-reveal entrance distance */
--hair-offset: -1px; /* underline hairline offset (inset box-shadow) */
--pointer-radius: 240px; /* cursor-tracked highlight radius */
--pane-min: 240px; /* minimum comfortable pane width */
/* --- illustration system: THE C STANDARD (block 15) -------------------
Approved 6 Aug 2026, variant C of qa/r3/refine-variants.png (panel 4,
"C — B PLUS ONE FLAT TINT"). Values, not hues: every colour below is an
alpha step of --c-ink or --c-on-dark. No new hue anywhere in this group.
Two stroke weights. ONE flat tint. One radius. One rhythm. A 16px label
floor, and the gold emphasis label is the LARGEST text in the drawing. */
/* the 1:1 artboard contract — see block 15.0 -------------------------- */
--dg-a: 1; /* artboard ratio = viewBox width ÷ render width */
--dg-m: 1; /* small-screen label multiplier (block 15.6) */
--dg-k: 1; /* effective scale, recomputed on .dg as a × m */
--dg-art: none; /* artboard width clamp; keeps 1 unit == 1 px */
/* contours and the single flat tint ----------------------------------- */
--dg-edge: rgba(27,27,26,.82); /* structural contour */
--dg-hair: rgba(27,27,26,.26); /* connective / reference line */
--dg-tint: rgba(27,27,26,.035); /* THE flat tint — 3.5% ink */
--dg-tint-key: var(--c-gold-wash); /* the emphasis element's wash */
--dg-plate: var(--c-white); /* label plate = the ground */
/* two weights, and only two ------------------------------------------ */
--dg-sw-structure: 2.4; /* primary containers, the emphasis bar */
--dg-sw-hair: 1; /* connector legs, reference rules — true 1px */
--dg-dash: 4.5; /* dash rhythm: 4.5 on, 4.5 off */
/* geometry ------------------------------------------------------------ */
--dg-r: 2; /* the one corner radius, in artboard units */
--dg-rhythm: 12; /* the one vertical band rhythm, in artboard units */
/* type — 16px floor, gold key label largest --------------------------- */
--dg-fs-key: 18px; /* the gold emphasis label — largest in drawing */
--dg-fs-label: 16px; /* primary label — the floor, never below */
--dg-fs-caption: 12.5px; /* secondary annotation, reads as a footnote */
--dg-ls-label: .4px; /* tracking pulled in at the larger size */
--dg-ls-key: .9px;
--dg-ls-caption: 1.6px; /* wider, so a caption is never a label's peer */
--dg-wt-label: 600;
--dg-wt-key: 700;
--dg-wt-caption: 500;
--dg-fs-figure: 52px; /* a Playfair figure inside a drawing */
--dg-draw: 3000; /* draw-in dash: longer than any path in the system */
--dg-cap-shift: .375; /* baseline = band centre + shift × label size */
/* superseded aliases — kept so no old class can reintroduce a second
tint or a third stroke weight. Do not use these names in new work. */
--dg-edge-soft: var(--dg-edge);
--dg-tint-0: var(--dg-tint);
--dg-tint-1: var(--dg-tint);
--dg-tint-2: var(--dg-tint);
--dg-sw-line: var(--dg-sw-hair);
--dg-fs-note: var(--dg-fs-caption);
--glow-w: min(100vw, 1600px);
--glow-h: min(90vh, 900px);
/* --- elevation: warm-tinted, never neutral grey ----------------------- */
--shadow-1:
0 1px 1px rgba(58,48,32,.05),
0 2px 5px rgba(58,48,32,.05);
--shadow-2:
0 1px 1px rgba(58,48,32,.05),
0 4px 10px rgba(58,48,32,.06),
0 12px 26px rgba(58,48,32,.07);
--shadow-3:
0 2px 4px rgba(58,48,32,.05),
0 10px 22px rgba(58,48,32,.08),
0 30px 60px rgba(58,48,32,.10),
0 60px 110px rgba(58,48,32,.08);
--shadow-inset:
inset 0 1px 2px rgba(58,48,32,.10),
inset 0 0 0 1px rgba(27,27,26,.05);
--shadow-dark-1: 0 2px 8px rgba(0,0,0,.30);
--shadow-dark-2:
0 4px 12px rgba(0,0,0,.32),
0 18px 44px rgba(0,0,0,.40);
--shadow-dark-3:
0 6px 16px rgba(0,0,0,.34),
0 26px 60px rgba(0,0,0,.44),
0 60px 120px rgba(0,0,0,.34);
--shadow-inset-dark:
inset 0 1px 3px rgba(0,0,0,.45),
inset 0 0 0 1px rgba(237,235,232,.05);
/* legacy shadow aliases */
--shadow-card: var(--shadow-1);
--shadow-frame: var(--shadow-2);
--shadow-lift: var(--shadow-2);
--shadow-lift-dark: var(--shadow-dark-2);
/* --- motion ------------------------------------------------------------ */
--ease: cubic-bezier(.2,.7,.2,1);
--ease-out: cubic-bezier(.16,.84,.24,1);
--dur-1: 140ms;
--dur-2: 220ms;
--dur-3: 420ms;
--dur-4: 700ms;
--dur: var(--dur-2); /* legacy alias */
--dur-slow: var(--dur-3); /* legacy alias */
/* --- grain: one shared texture, used on large bands only -------------- */
--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
/* --- debug overlay ----------------------------------------------------- */
--dbg-col: rgba(212,60,60,.10);
--dbg-line: rgba(212,60,60,.45);
}
/* ------------------------------------------------------- 02 base + a11y --- */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--c-ground);
color: var(--c-ink);
font-family: var(--ff-sans);
font-size: var(--fs-body);
line-height: var(--lh-body);
font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
hanging-punctuation: first last;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
strong { font-weight: 600; }
em { font-style: italic; }
::selection { background: rgba(212,175,55,.28); color: var(--c-ink); }
:focus-visible {
outline: var(--bw-2) solid var(--c-gold-mid);
outline-offset: var(--focus-ring);
border-radius: var(--r-xs);
}
.skip-link {
position: absolute;
left: var(--sp-4);
top: calc(-1 * var(--sp-11));
z-index: 200;
padding: var(--sp-3) var(--sp-5);
background: var(--c-ink);
color: var(--c-on-dark);
font-size: var(--fs-sm);
border-radius: var(--r-sm);
transition: top var(--dur-1) var(--ease);
}
.skip-link:focus { top: var(--sp-4); }
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0);
white-space: nowrap; border: 0;
}
/* ---------------------------------------------------------- 03 layout ---- */
/* container — the measured field every section places content inside */
.container {
width: min(100% - (2 * var(--page-margin)), var(--maxw));
margin-inline: auto;
}
.container--mid { width: min(100% - (2 * var(--page-margin)), var(--maxw-mid)); }
.container--narrow { width: min(100% - (2 * var(--page-margin)), var(--maxw-narrow)); }
/* the grid — 12 columns, one gutter, no exceptions */
.grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--gutter);
row-gap: var(--sp-7);
align-items: start;
}
.grid--flush { row-gap: 0; }
/* SEAM — exposed hairline on the column 6/7 boundary. Used on the two-column
asymmetric archetype so the shorter column's white space reads as
structure rather than as a gap. Hidden once the grid stacks (900). */
.grid--seam-mid { position: relative; }
.grid--seam-mid::before {
content: "";
position: absolute;
top: 0; bottom: 0;
left: calc((6 * var(--col)) + (5.5 * var(--gutter)));
width: var(--bw);
background: var(--c-line);
pointer-events: none;
}
.section--ink .grid--seam-mid::before,
.section--ink-deep .grid--seam-mid::before { background: var(--c-line-dark); }
.grid--tight { row-gap: var(--sp-5); }
.grid--loose { row-gap: var(--sp-9); }
/* named column spans — "start-end", inclusive, 1-indexed */
.col--1-12 { grid-column: 1 / -1; }
.col--1-4 { grid-column: 1 / span 4; }
.col--1-5 { grid-column: 1 / span 5; }
.col--1-6 { grid-column: 1 / span 6; }
.col--1-7 { grid-column: 1 / span 7; }
.col--1-8 { grid-column: 1 / span 8; }
.col--1-9 { grid-column: 1 / span 9; }
.col--1-10 { grid-column: 1 / span 10; }
.col--1-11 { grid-column: 1 / span 11; }
.col--2-6 { grid-column: 2 / span 5; }
.col--2-11 { grid-column: 2 / span 10; }
.col--3-10 { grid-column: 3 / span 8; }
.col--4-12 { grid-column: 4 / span 9; }
.col--5-12 { grid-column: 5 / span 8; }
.col--6-12 { grid-column: 6 / span 7; }
.col--7-12 { grid-column: 7 / span 6; }
.col--8-12 { grid-column: 8 / span 5; }
.col--9-12 { grid-column: 9 / span 4; }
.col--1-2 { grid-column: 1 / span 2; }
.col--1-3 { grid-column: 1 / span 3; }
.col--4-6 { grid-column: 4 / span 3; }
.col--7-9 { grid-column: 7 / span 3; }
.col--10-12{ grid-column: 10 / span 3; }
/* section — vertical rhythm, all from the scale */
.section {
position: relative;
padding-block: var(--sp-10);
isolation: isolate;
}
.section--tight { padding-block: var(--sp-9); }
.section--tall { padding-block: var(--sp-11); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }
.section--clip { overflow: hidden; }
/* exposed rails — the grid field made visible at the container edges */
.section--rails::before {
content: "";
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
width: min(100% - (2 * var(--page-margin)), var(--maxw));
margin-inline: auto;
border-left: var(--bw) solid var(--c-line-faint);
border-right: var(--bw) solid var(--c-line-faint);
pointer-events: none;
z-index: -1;
}
.section--rails.section--ink::before,
.section--rails.section--ink-deep::before {
border-color: var(--c-line-dark-faint);
}
/* seam — a hairline where two light bands meet */
.section--seam { border-top: var(--bw) solid var(--c-line); }
/* --- column debug overlay -------------------------------------------------
Shipped disabled. Enable by adding `grid-debug` to (QA does this
from Playwright: document.body.classList.add('grid-debug')). Leave in place.
------------------------------------------------------------------------- */
body.grid-debug::after {
content: "";
position: fixed;
top: 0; bottom: 0; left: 0; right: 0;
width: min(100% - (2 * var(--page-margin)), var(--maxw));
margin-inline: auto;
z-index: 9998;
pointer-events: none;
background-image: repeating-linear-gradient(
to right,
var(--dbg-col) 0,
var(--dbg-col) var(--col),
transparent var(--col),
transparent calc(var(--col) + var(--gutter))
);
box-shadow: inset var(--bw) 0 0 var(--dbg-line), inset calc(-1 * var(--bw)) 0 0 var(--dbg-line);
}
body.grid-debug--rows::before {
content: "";
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
z-index: 9997;
pointer-events: none;
background-image: repeating-linear-gradient(
to bottom,
rgba(60,120,212,.18) 0,
rgba(60,120,212,.18) 1px,
transparent 1px,
transparent var(--sp-2)
);
}
/* --------------------------------------------------------- 04 surfaces --- */
/* Four light levels + three dark levels. Nothing else is a surface. */
/* L0 page ground */
.section--ground { background: var(--c-ground); }
/* L1 raised container — a shade lighter than ground, hairline, soft lift */
.section--raised { background: var(--c-ground-2); }
.surface-raised {
background: var(--c-ground-2);
border: var(--bw) solid var(--c-line);
border-radius: var(--r-md);
box-shadow: var(--shadow-1);
}
/* L2 subject surface — paper white, deep warm elevation, gold corner tick */
.section--white { background: var(--c-white); }
.surface-subject {
position: relative;
background: var(--c-white);
border: var(--bw) solid var(--c-line);
border-radius: var(--r-md);
box-shadow: var(--shadow-3);
}
.surface-subject::after {
content: "";
position: absolute;
top: 0; left: 0;
width: var(--sp-6);
height: var(--bw-2);
background: linear-gradient(to right, var(--c-gold), rgba(212,175,55,0));
border-top-left-radius: var(--r-md);
}
/* L3 inset well — recessed, for tabulated or secondary material */
.surface-inset {
background: var(--c-ground-3);
border-radius: var(--r-sm);
box-shadow: var(--shadow-inset);
}
/* dark bands */
.section--ink,
.section--ink-deep {
color: var(--c-on-dark);
}
.section--ink { background: var(--c-ink); }
.section--ink-deep { background: var(--c-ink-deep); }
.section--ink-soft { background: var(--c-ink-soft); }
.section--ink::after,
.section--ink-deep::after,
.section--ink-soft::after {
content: "";
position: absolute;
inset: 0;
background-image: var(--grain);
opacity: .035;
pointer-events: none;
z-index: -1;
mix-blend-mode: overlay;
}
.section--ink .prose,
.section--ink-deep .prose,
.section--ink-soft .prose { color: var(--c-on-dark-2); }
.surface-ink-raised {
background: var(--c-ink-soft);
border: var(--bw) solid var(--c-line-dark);
border-radius: var(--r-md);
box-shadow: var(--shadow-dark-2);
}
.surface-ink-inset {
background: var(--c-ink-inset);
border-radius: var(--r-sm);
box-shadow: var(--shadow-inset-dark);
}
/* legacy surface modifiers still referenced by inherited pages */
.section--bone { background: var(--c-ground); }
.section--charcoal { background: var(--c-ink); color: var(--c-on-dark); }
/* ------------------------------------------------------------- 05 type ---- */
/* eyebrow — a small, letterspaced label. Never a numeral. */
.eyebrow {
display: block;
font-family: var(--ff-sans);
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--c-gold-text);
/* §1.1 proximity: 24 above a heading, 16 below it (.section__lede and the
page-head subs). An eyebrow introduces the heading under it, so it is
never further from that heading than the heading is from its own copy. */
margin-bottom: var(--sp-5);
}
.eyebrow--mute { color: var(--c-mute); }
/* slight enlargement for hero-adjacent eyebrows that need to carry more weight,
per Trent's homepage-close request. Kept below the H2 so hierarchy holds. */
.eyebrow--lg { font-size: 1.125rem; letter-spacing: var(--ls-label); }
.eyebrow--ruled {
display: flex;
align-items: center;
gap: var(--sp-4);
}
.eyebrow--ruled::after {
content: "";
flex: 1 1 auto;
height: var(--bw);
background: linear-gradient(to right, var(--c-gold-mid), var(--c-line));
}
/* dark grounds take the light gold: the dark gold is 3.05:1 on ink */
.section--ink .eyebrow,
.section--ink-deep .eyebrow,
.section--ink-soft .eyebrow,
.stat-band .eyebrow,
.site-footer .eyebrow { color: var(--c-gold); }
.section--ink .eyebrow--ruled::after,
.section--ink-deep .eyebrow--ruled::after,
.section--ink-soft .eyebrow--ruled::after {
background: linear-gradient(to right, var(--c-gold-deep), var(--c-line-dark));
}
/* display type — Playfair, at scale, tight. Optical alignment: the display
sits flush to its column by pulling the left side bearing back. */
.display {
font-family: var(--ff-display);
font-weight: 500;
color: var(--c-ink);
letter-spacing: var(--ls-display);
line-height: var(--lh-display);
text-wrap: pretty;
margin-left: -.03em; /* optical flush-left correction */
}
.display--xl { font-size: var(--fs-1); }
.display--lg { font-size: var(--fs-2); }
.display--md { font-size: var(--fs-3); }
.display--sm {
font-size: var(--fs-4);
letter-spacing: var(--ls-tight);
line-height: var(--lh-title);
}
.display em { font-style: italic; color: var(--c-steel); }
.display__line { display: block; }
.display__line--nowrap { white-space: nowrap; }
.display__accent {
font-style: italic;
color: var(--c-gold);
/* underline, not an inset rule: skip-ink clears the italic descenders */
text-decoration: underline;
text-decoration-color: rgba(212, 175, 55, .45);
text-decoration-thickness: .04em;
text-underline-offset: .14em;
text-decoration-skip-ink: auto;
}
.section--ink .display,
.section--ink-deep .display,
.section--ink-soft .display { color: var(--c-on-dark); }
.section--ink .display em,
.section--ink-deep .display em,
.section--ink-soft .display em { color: var(--c-on-dark-2); }
/* prose */
.prose {
color: var(--c-steel);
font-size: var(--fs-body);
line-height: var(--lh-body);
max-width: 62ch;
text-wrap: pretty;
}
.prose > p + p { margin-top: var(--sp-5); }
.prose--lead { font-size: var(--fs-lead); color: var(--c-ink); }
.prose--center { margin-inline: auto; text-align: center; }
/* statement — a single sentence, set as display, doing structural work */
.statement {
font-family: var(--ff-display);
font-size: var(--fs-3);
font-weight: 500;
line-height: var(--lh-title);
letter-spacing: var(--ls-tight);
color: var(--c-ink);
max-width: 30ch;
text-wrap: balance;
}
.statement--center { margin-inline: auto; text-align: center; }
.section--ink .statement,
.section--ink-deep .statement { color: var(--c-on-dark); }
/* section head — the standard opening block of a band */
.section__head { margin-bottom: var(--sp-9); }
/* Center the eyebrow + display headline block. Used on the how-it-works
closing CTA so the italic "two minutes." sits middle-aligned under the
sentence break. Also centers the h2 itself so a manual
reads as a
deliberate two-line pull, not a ragged wrap. */
.section__head--center { text-align: center; }
.section__head--center .display { text-align: center; }
.section__head--center .eyebrow { display: inline-block; }
.section__head--left { text-align: left; }
.section__head--flush { margin-bottom: 0; }
.section__head--tight { margin-bottom: var(--sp-7); }
.section__lede {
margin-top: var(--sp-4); /* §1.1: tighter than the eyebrow above */
color: var(--c-steel);
font-size: var(--fs-lead);
max-width: 58ch;
text-wrap: pretty;
}
.section__lede--left { margin-left: 0; }
.section--ink .section__lede,
.section--ink-deep .section__lede,
.section--ink-soft .section__lede { color: var(--c-on-dark-2); }
.section__afterword { margin-top: var(--sp-9); }
/* rules and hairlines */
.rule-gold {
width: var(--sp-8);
height: var(--bw-2);
margin: var(--sp-7) auto;
background: linear-gradient(to right, var(--c-gold-deep), var(--c-gold), var(--c-gold-deep));
}
.rule-hair {
height: var(--bw);
background: var(--c-line);
border: 0;
}
.lead-line {
display: block;
width: var(--sp-7);
height: var(--bw-2);
background: var(--c-gold-mid);
margin-bottom: var(--sp-5);
}
.footnote {
font-size: var(--fs-xs);
color: var(--c-mute);
letter-spacing: .01em;
}
.section--ink .footnote,
.section--ink-deep .footnote { color: var(--c-on-dark-3); }
/* block spacing helpers — all three resolve to scale steps */
.block-before { margin-top: var(--sp-9); }
.block-after { margin-top: var(--sp-9); }
/* .block-after--sm was used on eight elements across five pages and defined
nowhere: a silent no-op that let three pages state the same gap inline
instead. One short step below a block, half of .block-after's own. */
.block-after--sm { margin-top: var(--sp-7); }
/* --tight: used where the block below has been trimmed (subtext removed) so
the section doesn’t leave a hanging dead-space above the closer. */
.block-after--tight { margin-top: var(--sp-6); margin-bottom: calc(-1 * var(--sp-4)); }
/* --align-h: pushes the aside’s top down by the eyebrow row + gap so its first
line lines up with the H2 across from it, not the eyebrow. Only apply when
the copy column has an eyebrow above the H2. */
.split__aside--align-h { padding-top: calc(var(--fs-eyebrow) * 1.4 + var(--sp-5)); }
/* Narrow split — matches .ctx--pair 820px so the vertical seam aligns with
the graphic gap directly below. Overrides the 12-col grid + seam calc. */
.split--narrow {
max-width: 820px;
margin-inline: auto;
grid-template-columns: 1fr 1fr;
column-gap: var(--gutter);
}
.split--narrow > * { grid-column: auto; }
.split--narrow > * + * { grid-column: auto; }
.split--narrow.grid--seam-mid::before {
left: 50%;
transform: translateX(-50%);
}
/* Compact section — fits an entire two-part section (head + graphic pair)
into a single viewport on standard laptop screens. Shrinks section padding,
pane padding, and caps the graphic artboard so the whole section is visible
without scrolling. */
.section--fit { padding-block: var(--sp-7); }
.section--fit .section__head { margin-bottom: var(--sp-6); }
.section--fit .ctx__pane { padding: var(--sp-4); gap: var(--sp-3); }
.section--fit .ctx__fig { max-height: 380px; width: auto; margin-inline: auto; }
.section--fit .ctx__caption { margin-top: 0; }
@media (max-width: 900px) {
.section--fit { padding-block: var(--sp-8); }
.section--fit .ctx__fig { max-height: none; }
}
/* Fit-top: shrinks a section's top padding when it follows a compact section,
collapsing dead space between the two. */
.section--fit-top { padding-top: var(--sp-8); }
/* Centered-content variant of .stage (used with .stages--even). */
.stage--center {
align-items: center;
text-align: center;
padding-block: var(--sp-6);
}
.stage--center .stage__glyph { margin-inline: auto; }
/* Numeral "graphic" for the three stages. */
.stage__num {
font-family: var(--ff-display);
font-size: 72px;
font-weight: 500;
line-height: 1;
color: var(--c-gold-text);
letter-spacing: var(--ls-tight);
margin-bottom: var(--sp-2);
}
/* Inline arrow separator inside an H2 title. */
.h2-arrow {
color: var(--c-gold-text);
font-weight: 400;
font-style: normal;
padding-inline: 0.15em;
}
/* Prevent the H2 from wrapping mid-phrase and slightly scale it down. */
.h2--noWrap {
font-size: clamp(1.6rem, 2.6vw, 2.4rem);
white-space: nowrap;
}
@media (max-width: 1100px) {
.h2--noWrap { white-space: normal; font-size: var(--fs-2); }
}
@media (max-width: 900px) {
.split__aside--align-h { padding-top: 0; }
}
/* generic column sets used by inherited pages */
.grid--2, .grid--3, .grid--4 {
display: grid;
gap: var(--sp-6);
}
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stack { display: grid; gap: var(--sp-5); }
/* split — a two-part band; kept for inherited pages, now grid-derived */
.split {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--gutter);
row-gap: var(--sp-7);
align-items: start;
}
.split > * { grid-column: 1 / span 6; }
.split > * + * { grid-column: 7 / span 6; }
.split--head > * { grid-column: 1 / span 5; }
.split--head > * + * { grid-column: 7 / span 6; }
/* REVISION-03 §1.1 hard rule: the two columns of a two-column section share a
top baseline. This block previously read
.split__aside { align-self: end; } .split__copy { align-self: center; }
which pushed the illustration 55-130px below the copy it belonged to.
Both columns now start on the same line. If a short illustration must be
optically centred against long copy, centre BOTH columns with
.split--centred so their mid-lines agree; never centre one and end the
other. Verify with: node qa/baseline.js . */
.split > * { align-self: start; }
.split--centred > * { align-self: center; }
/* the same contract for a band built on the 12-column .grid directly: both
columns are centred as a pair, never one centred and the other ended. Once
the band stacks there is nothing to centre against. */
.grid--centred > * { align-self: center; }
@media (max-width: 900px) {
/* two product surfaces side by side in a 768 column are 340px each and
rarely the same height — the pair left a 127px void on what-you-get. They
stack from the structural collapse down; the three- and four-up card grids
drop to two columns here and to one at 560. */
.grid--2 { grid-template-columns: minmax(0, 1fr); }
.grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--centred > * { align-self: start; }
}
/* ----------------------------------------------------------- 06 header ---- */
.site-header {
position: fixed;
inset: 0 0 auto 0;
z-index: 100;
height: var(--header-h);
display: flex;
align-items: center;
background: transparent;
transition: background var(--dur-2) var(--ease),
box-shadow var(--dur-2) var(--ease),
border-color var(--dur-2) var(--ease);
border-bottom: var(--bw) solid transparent;
}
.site-header__inner {
position: relative;
display: flex;
align-items: center;
gap: var(--sp-6);
width: min(100% - (2 * var(--page-margin)), var(--maxw));
}
.site-header__rights {
display: none;
position: absolute;
right: 0;
bottom: 4px;
font-family: 'Inter', sans-serif;
font-size: 10px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--c-steel);
opacity: .75;
pointer-events: none;
white-space: nowrap;
}
.is-dark-top .site-header:not(.is-stuck) .site-header__rights {
color: rgba(247,247,247,.65);
}
@media (max-width: 900px) {
.site-header__rights { display: none; }
}
.site-header.is-stuck {
background: rgba(237,235,232,.88);
-webkit-backdrop-filter: blur(var(--blur)) saturate(1.4);
backdrop-filter: blur(var(--blur)) saturate(1.4);
border-bottom-color: var(--c-line);
box-shadow: var(--shadow-1);
}
.logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.logo__img { height: var(--logo-h); width: auto; }
/* two real assets, never a filter — see the dark-top block below */
.logo__img--bone { display: none; }
.nav {
display: flex;
align-items: center;
gap: var(--sp-6);
margin-inline: auto;
}
.nav__link {
position: relative;
font-size: var(--fs-body); /* was var(--fs-sm) — bigger nav links per §3.3 */
font-weight: 500;
color: var(--c-steel);
padding-block: var(--sp-3); /* was --sp-2 — more vertical breathing room */
transition: color var(--dur-1) var(--ease);
}
.nav__link::after {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 0; height: var(--bw-2);
background: var(--c-gold-mid);
transition: width var(--dur-2) var(--ease);
}
.nav__link:hover { color: var(--c-ink); }
.nav__link:hover::after { width: 100%; }
.nav__link.is-current { color: var(--c-ink); font-weight: 600; }
.nav__link.is-current::after { width: 100%; background: var(--c-gold); }
.header__actions {
display: flex;
align-items: center;
gap: var(--sp-5);
flex: 0 0 auto;
}
.header__link {
font-size: var(--fs-sm);
font-weight: 500;
color: var(--c-steel);
transition: color var(--dur-1) var(--ease);
}
.header__link:hover { color: var(--c-ink); }
.nav-toggle {
display: none;
margin-left: auto;
width: 44px; /* §3.3: minimum 44px tap target on mobile */
height: 44px;
align-items: center;
justify-content: center;
background: transparent;
border: var(--bw) solid var(--c-line-strong);
border-radius: var(--r-sm);
color: var(--c-ink);
cursor: pointer;
transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.nav-toggle:hover { background: rgba(27,27,26,.05); border-color: var(--c-ink); }
/* header over a dark page top — light until it sticks */
body.is-dark-top .site-header:not(.is-stuck) .nav__link,
body.is-dark-top .site-header:not(.is-stuck) .header__link {
color: #F7F7F7;
font-weight: 600;
}
body.is-dark-top .site-header:not(.is-stuck) .nav__link:hover,
body.is-dark-top .site-header:not(.is-stuck) .header__link:hover {
color: #D4AF37;
}
body.is-dark-top .site-header:not(.is-stuck) .nav__link.is-current {
color: #D4AF37;
font-weight: 700;
}
body.is-dark-top .site-header:not(.is-stuck) .nav__link.is-current::after {
background: #D4AF37;
width: 100%;
}
/* LOGO COLOUR BUG (REVISION-03 §1.4), fixed.
Was: filter: invert(1) brightness(1.9) on .logo__img. The wordmark's
"Genius" is --c-gold #D4AF37; invert(1) maps that to #2B50C8 and the
brightness multiplier pushed it to a bright blue. It fired on every page
in DARK_TOP (about, results, talk) whenever the header was not yet stuck.
Now: swap to the light-ground asset, which keeps the gold. No filter
touches the logo anywhere in this stylesheet. */
body.is-dark-top .site-header:not(.is-stuck) .logo__img--ink { display: none; }
body.is-dark-top .site-header:not(.is-stuck) .logo__img--bone { display: block; }
body.is-dark-top .site-header:not(.is-stuck) .nav-toggle {
color: var(--c-on-dark);
border-color: var(--c-line-dark-strong);
}
body.is-dark-top .site-header:not(.is-stuck) .btn--primary {
background: var(--c-ground);
color: var(--c-ink);
}
/* ---------------------------------------------------------- 07 buttons ---- */
.btn {
--btn-lift: 0px;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-3);
min-height: var(--ctl-h);
padding-inline: var(--sp-6);
border: var(--bw) solid transparent;
border-radius: var(--r-pill);
font-family: var(--ff-sans);
font-size: var(--fs-sm);
font-weight: 600;
letter-spacing: .005em;
line-height: 1;
cursor: pointer;
white-space: nowrap;
transform: translateY(var(--btn-lift));
transition: transform var(--dur-1) var(--ease),
background-color var(--dur-1) var(--ease),
border-color var(--dur-1) var(--ease),
box-shadow var(--dur-1) var(--ease),
color var(--dur-1) var(--ease);
}
.btn__arrow {
flex: 0 0 auto;
transition: transform var(--dur-2) var(--ease);
}
.btn:hover .btn__arrow { transform: translateX(var(--shift)); }
.btn--primary {
background: var(--c-ink);
color: var(--c-on-dark);
box-shadow: var(--shadow-1);
}
.btn--primary:hover {
--btn-lift: calc(-1 * var(--lift-1));
background: #000;
box-shadow: var(--shadow-2);
}
.btn--primary:active {
--btn-lift: 0px;
box-shadow: inset 0 2px 4px rgba(0,0,0,.35);
}
.btn--secondary {
background: var(--c-white);
color: var(--c-ink);
border-color: var(--c-line-strong);
box-shadow: var(--shadow-1);
}
.btn--secondary:hover {
--btn-lift: calc(-1 * var(--lift-1));
border-color: var(--c-ink);
box-shadow: var(--shadow-2);
}
.btn--secondary:active {
--btn-lift: 0px;
background: var(--c-ground-2);
box-shadow: var(--shadow-inset);
}
.btn--gold {
background: linear-gradient(180deg, var(--c-gold) 0%, var(--c-gold-mid) 100%);
color: #1B1508;
box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, var(--shadow-dark-1);
}
.btn--gold:hover {
--btn-lift: calc(-1 * var(--lift-1));
background: linear-gradient(180deg, #E0BE49 0%, var(--c-gold-mid) 100%);
box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, var(--shadow-dark-2);
}
.btn--gold:active {
--btn-lift: 0px;
box-shadow: inset 0 2px 5px rgba(0,0,0,.35);
}
.btn--ghost {
background: transparent;
color: var(--c-on-dark);
border-color: var(--c-line-dark-strong);
}
.btn--ghost:hover {
--btn-lift: calc(-1 * var(--lift-1));
border-color: var(--c-on-dark);
background: rgba(237,235,232,.06);
}
.btn--ghost:active {
--btn-lift: 0px;
background: rgba(237,235,232,.03);
}
.btn--light {
background: var(--c-ground);
color: var(--c-ink);
box-shadow: var(--shadow-dark-1);
}
.btn--light:hover { --btn-lift: calc(-1 * var(--lift-1)); background: var(--c-white); }
.btn--light:active { --btn-lift: 0px; box-shadow: var(--shadow-inset); }
.btn--small {
min-height: var(--ctl-h-sm);
padding-inline: var(--sp-5);
font-size: var(--fs-xs);
}
.btn--block { width: 100%; }
/* button row — controls share one optical baseline and one control height */
.btn-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-4) var(--sp-5);
margin-top: var(--sp-7);
}
.btn-row--center { justify-content: center; }
/* Vertical stack: primary button on top, secondary link/button below. Used
for section-close CTAs so "Let's talk" leads and "Free Competitor Scan"
reads as the alternative for people not ready yet. */
.btn-row--stack {
flex-direction: column;
align-items: center;
gap: var(--sp-3);
}
/* Button + centered secondary link stacked underneath. Container shrinks to
the button's width, so the text-link centers under the button, not under
the whole column. */
.cta-stack {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: var(--sp-3);
margin-top: var(--sp-7);
width: fit-content;
}
.cta-stack__link { text-align: center; }
.btn-note {
margin-top: var(--sp-4);
font-size: var(--fs-xs);
color: var(--c-mute);
}
.btn-note--center { text-align: center; }
.section--ink .btn-note,
.section--ink-deep .btn-note { color: var(--c-on-dark-3); }
/* text link — matched to control height so it sits optically level with a
pill in the same row (REVISION-02 §3.8, defect 1) */
.text-link {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
min-height: var(--ctl-h);
font-size: var(--fs-sm);
font-weight: 600;
color: var(--c-ink);
box-shadow: inset 0 var(--hair-offset) 0 var(--c-line-strong);
transition: box-shadow var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.text-link .btn__arrow { transition: transform var(--dur-2) var(--ease); }
.text-link:hover {
color: var(--c-gold-text);
box-shadow: inset 0 var(--hair-offset) 0 var(--c-gold-mid);
}
.text-link:hover .btn__arrow { transform: translateX(var(--shift)); }
.section--ink .text-link,
.section--ink-deep .text-link {
color: var(--c-on-dark);
box-shadow: inset 0 var(--hair-offset) 0 var(--c-line-dark-strong);
}
.section--ink .text-link:hover,
.section--ink-deep .text-link:hover {
color: var(--c-gold);
box-shadow: inset 0 var(--hair-offset) 0 var(--c-gold);
}
/* ------------------------------------------------- 08 hero + shots -------- */
/* R3 §2.1 — the centred hero. The title runs the full page width and the whole
stack is centred on it: "That needs to go from left to the right of the page
… I like it aligned to the center of the page, not left aligned like that." */
.hero--center { text-align: center; }
.hero__inner--center { display: block; }
.hero--center .hero__title {
margin-left: 0;
font-size: clamp(2.6rem, 7.3vw, 6.5rem);
text-align: center;
}
.hero--center .hero__sub { margin-inline: auto; max-width: 44ch; }
.hero--center .btn-row { justify-content: center; }
.hero--center .hero__note { text-align: center; }
.hero {
position: relative;
padding-top: calc(var(--header-h) + var(--sp-11));
padding-bottom: var(--sp-11);
background: var(--c-ground);
overflow: hidden;
isolation: isolate;
}
.hero__glow {
position: absolute;
top: calc(-1 * var(--sp-11));
left: 50%;
width: var(--glow-w);
height: var(--glow-h);
transform: translateX(-50%);
background:
radial-gradient(60% 55% at 50% 40%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 70%),
radial-gradient(38% 40% at 22% 30%, var(--c-gold-wash) 0%, rgba(212,175,55,0) 70%);
pointer-events: none;
z-index: -1;
}
.hero__inner { row-gap: 0; }
.hero__title {
font-family: var(--ff-display);
font-weight: 500;
font-size: var(--fs-hero);
line-height: var(--lh-hero);
letter-spacing: var(--ls-hero);
color: var(--c-ink);
margin-left: -.035em; /* optical flush-left correction */
}
.hero__line { display: block; }
.hero__word { display: inline-block; }
.hero__italic { font-style: italic; color: var(--c-steel); }
.hero__ai {
font-style: normal;
background: linear-gradient(180deg, var(--c-gold) 0%, var(--c-gold-deep) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
.hero__ai { color: var(--c-gold-text); background: none; }
}
.hero__sub {
margin-top: var(--sp-6);
font-size: var(--fs-lead);
color: var(--c-steel);
max-width: 40ch;
}
.hero__actions { margin-top: var(--sp-8); }
.hero__note { margin-top: var(--sp-4); }
.hero__stage {
position: relative;
margin-top: var(--sp-9);
}
/* homepage hero film — trimmed a touch so it sits inside the page instead of
consuming it. Only scoped to .hero__stage so /how-it-works, /what-you-get
film usages (if any) remain untouched. */
.hero__stage .film {
max-width: 880px;
margin-left: auto;
margin-right: auto;
}
/* the gap between the hero film and the Recognition section was reading as
dead air. Trim the hero's bottom pad and the next section's top pad so the
two blocks feel like a single continuous read. Scoped to hero + its next
sibling only, so other sections keep their generous rhythm. */
.hero { padding-bottom: var(--sp-11); }
.hero + .section { padding-top: var(--sp-9); }
/* hero: word-rise reveal, per-word stagger held in the markup order */
.hero__word {
animation: word-rise var(--dur-4) var(--ease-out) both;
}
.hero__line:nth-child(1) .hero__word:nth-child(1) { animation-delay: 40ms; }
.hero__line:nth-child(1) .hero__word:nth-child(2) { animation-delay: 90ms; }
.hero__line:nth-child(1) .hero__word:nth-child(3) { animation-delay: 140ms; }
.hero__line:nth-child(1) .hero__word:nth-child(4) { animation-delay: 190ms; }
.hero__line:nth-child(1) .hero__word:nth-child(5) { animation-delay: 240ms; }
.hero__line:nth-child(2) .hero__word:nth-child(1) { animation-delay: 300ms; }
.hero__line:nth-child(2) .hero__word:nth-child(2) { animation-delay: 350ms; }
.hero__line:nth-child(2) .hero__word:nth-child(3) { animation-delay: 400ms; }
.hero__line:nth-child(2) .hero__word:nth-child(4) { animation-delay: 450ms; }
@keyframes word-rise {
from { opacity: 0; transform: translateY(.42em); }
to { opacity: 1; transform: none; }
}
.no-js .hero__word { animation: none; opacity: 1; transform: none; }
/* hero variants used by inherited pages */
.hero--compact { padding-top: calc(var(--header-h) + var(--sp-8)); padding-bottom: var(--sp-9); }
.hero--dark { background: var(--c-ink); color: var(--c-on-dark); }
.hero--dark .hero__title { color: var(--c-on-dark); }
.hero--dark .hero__sub { color: var(--c-on-dark-2); }
.hero--dark .hero__glow {
background: radial-gradient(55% 50% at 50% 35%, rgba(237,235,232,.10) 0%, rgba(237,235,232,0) 70%);
}
/* --- product screenshot: the subject surface ------------------------------ */
.shot {
position: relative;
border-radius: var(--r-lg);
background: var(--c-white);
border: var(--bw) solid var(--c-line);
box-shadow: var(--shadow-3);
overflow: hidden;
isolation: isolate;
}
.shot::before { /* gold structural tick, top-left */
content: "";
position: absolute;
top: 0; left: 0;
width: var(--sp-8);
height: var(--bw-2);
background: linear-gradient(to right, var(--c-gold), rgba(212,175,55,0));
z-index: 2;
}
.shot__img { width: 100%; display: block; }
.shot--clip .shot__img { object-fit: cover; object-position: top center; }
.shot--offset { transform: translateY(calc(-1 * var(--sp-6))); }
.shot-caption {
margin-top: var(--sp-4);
font-size: var(--fs-xs);
color: var(--c-mute);
letter-spacing: .01em;
}
/* a shot that runs off the right edge of the field — fills the dead half of
a two-part band (REVISION-02 §3.8, defect 3). Parent must clip. */
.shot--edge {
margin-right: calc(-1 * ((100vw - min(100vw - (2 * var(--page-margin)), var(--maxw))) / 2));
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: 0;
}
/* R3 §2.7 — the same device, but leaving the page by a decisive amount rather
than losing a sliver of itself. Parent must carry .section--clip. */
.shot--edge-firm {
margin-right: calc(-1 * ((100vw - min(100vw - (2 * var(--page-margin)), var(--maxw))) / 2) - var(--sp-10));
}
@media (max-width: 900px) {
.shot--edge-firm { margin-right: 0; }
}
/* OFFSET PULL — the emotional peak, used ONCE per page. A gold rule enters
from off the left page edge and stops at column 2; the line picks up at
column 3, so it shares no left edge with the stack above it. Deliberate
pair with SHOT--EDGE: one element leaves the page on the right, one
enters from the left. Both require .section--clip on the parent. */
.peak { margin-top: var(--sp-8); align-items: start; }
.peak__rule {
height: var(--bw-2);
margin-top: var(--sp-3);
margin-left: calc(-1 * var(--page-margin));
background: linear-gradient(to right, rgba(212,175,55,.15), var(--c-gold));
}
.peak__text {
font-family: var(--ff-display);
font-weight: 500;
font-size: var(--fs-1);
line-height: var(--lh-display);
letter-spacing: var(--ls-display);
color: var(--c-ink);
text-wrap: balance;
}
.section--ink .shot,
.section--ink-deep .shot {
background: var(--c-ink-soft);
border-color: var(--c-line-dark);
box-shadow: var(--shadow-dark-3);
}
.section--ink .shot-caption,
.section--ink-deep .shot-caption { color: var(--c-on-dark-3); }
/* placeholder frames retained for inherited pages */
.ph {
display: grid;
place-items: center;
min-height: var(--sp-11);
background: var(--c-ground-3);
border-radius: var(--r-md);
box-shadow: var(--shadow-inset);
color: var(--c-mute);
font-size: var(--fs-xs);
letter-spacing: var(--ls-label);
text-transform: uppercase;
}
.ph-frame { border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-2); }
/* --------------------------------------- 09 homepage components ----------- */
/* pointer-responsive surfaces: JS writes --mx / --my on move */
.beat, .commit, .plan, .ctx__pane, .station__copy, .card, .quiet__inner {
--mx: 50%;
--my: 50%;
}
.beat::before, .commit::before, .plan::before, .ctx__pane::before, .card::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(var(--pointer-radius) circle at var(--mx) var(--my),
rgba(212,175,55,.13), rgba(212,175,55,0) 62%);
opacity: 0;
transition: opacity var(--dur-2) var(--ease);
pointer-events: none;
z-index: 0;
}
.beat:hover::before, .commit:hover::before, .plan:hover::before,
.ctx__pane:hover::before, .card:hover::before { opacity: 1; }
/* --- P2 quiet band: a single question, left-set, on paper ---------------- */
.quiet {
position: relative;
padding-block: var(--sp-10);
background: var(--c-ground-2);
border-top: var(--bw) solid var(--c-line);
border-bottom: var(--bw) solid var(--c-line);
}
.quiet--white { background: var(--c-white); }
/* DIRECT ADDRESS — centred variant. Used twice on the page, never more. */
.quiet--center { text-align: center; }
.quiet__mark--center { justify-self: center; }
.quiet__title--center { text-align: center; }
.quiet__inner { position: relative; row-gap: 0; }
.quiet__mark {
grid-column: 1 / span 12;
width: var(--sp-7);
height: var(--bw-2);
background: linear-gradient(to right, var(--c-gold), rgba(212,175,55,.15));
margin-bottom: var(--sp-6);
}
.quiet__title {
font-family: var(--ff-display);
font-weight: 500;
font-size: var(--fs-2);
line-height: var(--lh-display);
letter-spacing: var(--ls-display);
color: var(--c-ink);
margin-left: -.03em;
text-wrap: pretty;
}
.quiet__title em { font-style: italic; color: var(--c-gold-text); }
/* --- P3 beats: four recognitions, one per three columns ------------------ */
.beats {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--gutter);
row-gap: var(--sp-6);
}
.beat {
position: relative;
grid-column: span 3;
display: flex;
flex-direction: column;
gap: var(--sp-5);
padding: var(--sp-6) var(--sp-5) var(--sp-7);
background: var(--c-ground-2);
border: var(--bw) solid var(--c-line);
border-radius: var(--r-md);
box-shadow: var(--shadow-1);
transition: box-shadow var(--dur-2) var(--ease),
border-color var(--dur-2) var(--ease),
transform var(--dur-2) var(--ease);
}
.beat:hover {
transform: translateY(calc(-1 * var(--lift-2)));
border-color: var(--c-line-strong);
box-shadow: var(--shadow-2);
}
.beat__glyph {
position: relative;
z-index: 1;
width: var(--glyph-lg);
height: var(--glyph-lg);
color: var(--c-ink);
stroke-width: 2;
stroke-linecap: square;
stroke-linejoin: miter;
fill: none;
}
.beat__text {
position: relative;
z-index: 1;
font-size: var(--fs-base);
line-height: 1.55;
color: var(--c-steel);
}
.beat__rule {
position: absolute;
left: 0; bottom: 0;
width: var(--sp-6);
height: var(--bw-2);
background: var(--c-gold-mid);
opacity: .5;
transition: width var(--dur-3) var(--ease), opacity var(--dur-2) var(--ease);
}
.beat:hover .beat__rule { width: 50%; opacity: 1; }
.beats--three .beat { grid-column: span 4; }
/* --- P4 context diagrams: two panes divided by one hairline -------------- */
.ctx {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--gutter);
row-gap: var(--sp-7);
}
.ctx__pane {
position: relative;
grid-column: span 6;
display: flex;
flex-direction: column;
gap: var(--sp-5);
padding: var(--sp-6);
background: var(--c-ink-soft);
border: var(--bw) solid var(--c-line-dark);
border-radius: var(--r-md);
box-shadow: var(--shadow-dark-2);
transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.ctx__pane:hover {
border-color: var(--c-line-dark-strong);
box-shadow: var(--shadow-dark-3);
}
/* the ground under an illustration is part of the illustration: a gradient here
is an implied light source by the back door and the illustration gate flags
it (§9A.0). Flat surface level + a stronger contour instead. */
.ctx__pane--full {
background: var(--c-ink-soft);
border-color: var(--c-line-dark-strong);
}
.ctx__pane--full::after {
content: "";
position: absolute;
top: 0; left: 0;
width: var(--sp-8);
height: var(--bw-2);
background: var(--c-gold);
}
.ctx__label {
position: relative;
z-index: 1;
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--c-on-dark-3);
}
.ctx__pane--full .ctx__label { color: var(--c-gold); }
.ctx__art {
position: relative;
z-index: 1;
width: 100%;
height: auto;
overflow: visible;
}
.ctx__caption {
position: relative;
z-index: 1;
margin-top: auto;
padding-top: var(--sp-4);
border-top: var(--bw) solid var(--c-line-dark);
font-size: var(--fs-sm);
color: var(--c-on-dark-2);
}
/* diagram primitives (shared with page-level diagrams) */
.d-line, .d-strata, .d-node {
fill: none;
stroke: var(--c-on-dark-2);
stroke-width: 1.25;
vector-effect: non-scaling-stroke;
}
.d-line--faint { stroke: var(--c-on-dark-3); stroke-dasharray: 4 4; }
.d-strata { stroke: var(--c-gold); stroke-opacity: .72; }
.d-node { stroke: var(--c-on-dark); }
.d-node-core { fill: var(--c-gold); }
.d-text {
font-family: var(--ff-sans);
font-size: var(--fs-diagram);
font-weight: 600;
letter-spacing: .12em;
fill: var(--c-on-dark-2);
}
.d-text--out { fill: var(--c-on-dark-3); }
.d-text--live { fill: var(--c-gold); }
.d-draw {
stroke-dasharray: 320;
stroke-dashoffset: 320;
animation: draw-in 1.1s var(--ease-out) forwards;
}
.reveal.is-visible .d-draw:nth-of-type(1) { animation-delay: 60ms; }
.reveal.is-visible .d-draw:nth-of-type(2) { animation-delay: 140ms; }
.reveal.is-visible .d-draw:nth-of-type(3) { animation-delay: 220ms; }
.reveal.is-visible .d-draw:nth-of-type(4) { animation-delay: 300ms; }
.reveal.is-visible .d-draw:nth-of-type(5) { animation-delay: 380ms; }
.reveal.is-visible .d-draw:nth-of-type(6) { animation-delay: 460ms; }
@keyframes draw-in { to { stroke-dashoffset: 0; } }
.no-js .d-draw { stroke-dashoffset: 0; animation: none; }
/* --- P5 stages: three in order, each four columns ------------------------ */
.stages {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--gutter);
row-gap: var(--sp-6);
}
.stage {
position: relative;
grid-column: span 4;
display: flex;
flex-direction: column;
gap: var(--sp-4);
padding: var(--sp-7) var(--sp-6) var(--sp-6);
border-radius: var(--r-md);
background: var(--c-ground-2);
border: var(--bw) solid var(--c-line);
box-shadow: var(--shadow-1);
}
.stage {
transition: transform var(--dur-2) var(--ease),
border-color var(--dur-2) var(--ease);
}
.stage:hover {
transform: translateY(calc(-1 * var(--lift-1)));
border-color: var(--c-line-strong);
}
.stage::before { /* depth ladder: each stage sits higher */
content: "";
position: absolute;
left: 0; top: 0;
width: 100%;
height: var(--bw-2);
background: var(--c-line-strong);
}
.stage--1 { box-shadow: var(--shadow-1); }
.stage--2 { box-shadow: var(--shadow-2); }
.stage--3 { background: var(--c-white); box-shadow: var(--shadow-3); }
.stage--1::before { background: linear-gradient(to right, var(--c-gold), rgba(212,175,55,.06) 40%); }
.stage--2::before { background: linear-gradient(to right, var(--c-gold-mid), rgba(212,175,55,.06) 60%); }
.stage--3::before { background: linear-gradient(to right, var(--c-gold-deep), rgba(212,175,55,.06) 80%); }
.stage__glyph {
width: var(--glyph-lg);
height: var(--glyph-lg);
color: var(--c-ink);
stroke-width: 2;
stroke-linecap: square;
stroke-linejoin: miter;
fill: none;
margin-bottom: var(--sp-2);
}
.stage__label {
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--c-gold-text);
}
.stage__title {
font-family: var(--ff-display);
font-size: var(--fs-4);
font-weight: 500;
letter-spacing: var(--ls-tight);
line-height: var(--lh-title);
color: var(--c-ink);
}
.stage__body {
font-size: var(--fs-base);
color: var(--c-steel);
line-height: 1.55;
}
.stage__dep {
margin-top: auto;
padding-top: var(--sp-5);
border-top: var(--bw) solid var(--c-line);
display: flex;
flex-direction: column;
gap: var(--sp-1);
}
.stage__dep-key {
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--c-mute);
}
.stage__dep-val { font-size: var(--fs-sm); color: var(--c-ink); }
/* --- P7 opposition register: label left, value right, one hairline each --- */
.oppose {
/* A register, not a card: hairlines only, so every cell starts exactly on
its column. Top and bottom rules close the block. */
border-top: var(--bw-2) solid var(--c-line-strong);
border-bottom: var(--bw-2) solid var(--c-line-strong);
}
.oppose__head,
.oppose__row {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--gutter);
align-items: stretch;
}
.oppose__head { border-bottom: var(--bw) solid var(--c-line-strong); }
.oppose__row + .oppose__row,
.oppose__head + .oppose__row { border-top: var(--bw) solid var(--c-line); }
.oppose__row { transition: background var(--dur-2) var(--ease); }
.oppose__row:hover { background: var(--c-gold-wash); }
.oppose__title,
.oppose__cell {
grid-column: 1 / span 5;
padding-block: var(--sp-5);
display: flex;
flex-direction: column;
gap: var(--sp-1);
justify-content: center;
}
.oppose__title--after,
.oppose__cell--after { grid-column: 7 / span 6; }
.oppose__divider {
grid-column: 6 / span 1;
justify-self: center;
width: var(--bw);
background: var(--c-line);
}
.oppose__title-main {
font-family: var(--ff-display);
font-size: var(--fs-4);
font-weight: 500;
letter-spacing: var(--ls-tight);
color: var(--c-ink);
}
.oppose__title-sub {
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--c-mute);
}
.oppose__title--after .oppose__title-sub { color: var(--c-gold-text); }
.oppose__cell {
font-size: var(--fs-base);
color: var(--c-mute);
line-height: 1.5;
}
.oppose__cell--after {
color: var(--c-ink);
font-weight: 500;
position: relative;
}
.oppose__cell--after::before {
content: "";
position: absolute;
left: calc(-1 * var(--sp-4)); top: 50%;
width: var(--bw-2);
height: var(--sp-5);
transform: translateY(-50%);
background: var(--c-gold);
opacity: 0;
transition: opacity var(--dur-2) var(--ease);
}
.oppose__row:hover .oppose__cell--after::before { opacity: 1; }
/* ============================================================
Fork illustration — .fork
Storybook illustration of a fork in the road. Image does the storytelling;
two floating labels anchor left/right meaning. No grid, no rows, no text
ladder — just the picture.
============================================================ */
/* Fork section — dark schematic with the winding gold + gray roads. */
.fork-section { padding-block: var(--sp-6) var(--sp-6); }
.fork-head { text-align: center; max-width: 900px; margin: 0 auto; }
.fork-head .eyebrow--gold { color: var(--c-gold); }
.fork-h2 em {
font-style: italic;
color: var(--c-gold, #E8B84E);
font-weight: 400;
}
.fork {
margin: var(--sp-4) auto 0;
padding: 0;
position: relative;
max-width: 1080px;
}
.fork__img {
display: block;
width: 100%;
height: auto;
border-radius: 0;
mix-blend-mode: lighten;
/* Image bg is near-black #0D0C0A on a slightly-lighter ink-deep section. */
/* `lighten` keeps pixels lighter than the page (the gold road, gray road, */
/* plaques, man's line-work) and lets the darker image bg fall away to the */
/* section color, dissolving the rectangle entirely. */
}
@media (max-width: 720px) {
.fork { max-width: 100%; margin-top: var(--sp-3); }
.fork-section { padding-block: var(--sp-5); }
}
.fork__cap {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: var(--sp-6);
margin-top: var(--sp-4);
padding-inline: var(--sp-4);
}
.fork__cap-left,
.fork__cap-right {
font-family: var(--ff-display);
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: var(--ls-label);
text-transform: uppercase;
text-align: center;
}
.fork__cap-left {
color: var(--c-mute);
opacity: 0.7;
}
.fork__cap-right {
color: var(--c-gold-text);
}
@media (max-width: 720px) {
.fork__cap { column-gap: var(--sp-3); padding-inline: var(--sp-2); }
.fork__cap-left, .fork__cap-right { font-size: 10px; }
}
/* ============================================================
Scale variant — .oppose--scale
Two columns of unequal visual weight. Cost side sinks: smaller type, muted
gray wash, tighter padding. Gain side rises: larger type, warm surface,
generous padding. Reader feels the imbalance before reading.
============================================================ */
.oppose--scale {
border-top: none;
border-bottom: none;
}
.oppose--scale .oppose__head,
.oppose--scale .oppose__row {
grid-template-columns: 5fr var(--sp-3) 7fr;
column-gap: 0;
align-items: stretch;
border-top: none;
border-bottom: none;
}
.oppose--scale .oppose__title,
.oppose--scale .oppose__cell { grid-column: 1 / span 1; }
.oppose--scale .oppose__divider {
grid-column: 2 / span 1;
width: var(--sp-6);
background: transparent;
align-self: stretch;
}
.oppose--scale .oppose__title--after,
.oppose--scale .oppose__cell--after { grid-column: 3 / span 1; }
/* Header: cost label small and muted, gain label larger and gold-tinted */
.oppose--scale .oppose__head {
padding-block: 0;
border-bottom: none;
}
.oppose--scale .oppose__title {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: var(--sp-3) var(--sp-4);
background: transparent;
border-radius: 0;
border-bottom: var(--bw) solid rgba(0,0,0,0.15);
min-height: var(--sp-7);
}
.oppose--scale .oppose__title--after {
padding: var(--sp-3) var(--sp-5);
background: transparent;
border-bottom: var(--bw) solid var(--c-gold-line, rgba(212,175,55,0.5));
min-height: var(--sp-7);
}
.oppose--scale .oppose__title-main {
font-family: var(--ff-display);
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--c-mute);
opacity: 0.8;
}
.oppose--scale .oppose__title--after .oppose__title-main {
font-size: var(--fs-eyebrow);
color: var(--c-gold-text);
opacity: 1;
}
/* Cells: cost side is small, gray, tight. Gain side is larger, ink, generous. */
.oppose--scale .oppose__cell {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--sp-3) var(--sp-4);
font-size: var(--fs-sm);
line-height: 1.35;
color: var(--c-mute);
background: var(--c-line-soft, rgba(0,0,0,0.04));
opacity: 0.7;
min-height: var(--sp-8);
}
.oppose--scale .oppose__cell--after {
padding: var(--sp-4) var(--sp-5);
font-size: var(--fs-lg);
font-family: var(--ff-display);
line-height: 1.25;
color: var(--c-ink);
font-weight: 500;
background: var(--c-gold-wash);
opacity: 1;
min-height: var(--sp-9);
}
.oppose--scale .oppose__cell--after::before { display: none; }
/* Row rhythm: no gaps between rows — continuous stacked columns */
.oppose--scale .oppose__head + .oppose__row .oppose__cell,
.oppose--scale .oppose__row + .oppose__row .oppose__cell {
border-top: var(--bw) solid rgba(0,0,0,0.08);
}
.oppose--scale .oppose__head + .oppose__row .oppose__cell--after,
.oppose--scale .oppose__row + .oppose__row .oppose__cell--after {
border-top: var(--bw) solid rgba(212,175,55,0.2);
}
/* No hover swap — the imbalance is the whole point */
.oppose--scale .oppose__row { transition: none; }
.oppose--scale .oppose__row:hover { background: transparent; }
/* Mobile: stack, keep the size delta so weight still reads */
@media (max-width: 720px) {
.oppose--scale .oppose__head,
.oppose--scale .oppose__row {
grid-template-columns: 1fr;
row-gap: 0;
}
.oppose--scale .oppose__title,
.oppose--scale .oppose__cell { grid-column: 1 / -1; }
.oppose--scale .oppose__title--after,
.oppose--scale .oppose__cell--after { grid-column: 1 / -1; }
.oppose--scale .oppose__divider { display: none; }
.oppose--scale .oppose__cell { padding: var(--sp-3) var(--sp-4); }
.oppose--scale .oppose__cell--after { padding: var(--sp-4) var(--sp-5); }
}
/* ============================================================
Ledger variant — .oppose--ledger
Reads like a financial statement: line-numbered rows, dimmed cost side,
inked gain side, gold vertical rule, closing statement across both cols.
============================================================ */
.oppose--ledger .oppose__head,
.oppose--ledger .oppose__row {
grid-template-columns: [num] var(--sp-8) [left] repeat(5, minmax(0, 1fr)) [div] var(--sp-3) [right] repeat(5, minmax(0, 1fr));
column-gap: var(--sp-5);
align-items: center;
}
.oppose--ledger .oppose__title,
.oppose--ledger .oppose__cell { grid-column: left / span 5; }
.oppose--ledger .oppose__title--after,
.oppose--ledger .oppose__cell--after { grid-column: right / span 5; }
.oppose--ledger .oppose__divider {
grid-column: div / span 1;
justify-self: center;
width: var(--bw);
background: var(--c-gold);
opacity: 0.5;
align-self: stretch;
}
/* Line numbers — ledger-style, tabular, small gold */
.oppose__num {
grid-column: num / span 1;
font-family: var(--ff-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
font-variant-numeric: tabular-nums;
font-size: var(--fs-xs);
font-weight: 500;
letter-spacing: 0.04em;
color: var(--c-gold-text);
text-align: right;
padding-right: var(--sp-2);
align-self: center;
}
/* Header row: sub-label now sits ABOVE main label, gold on both sides for symmetry */
.oppose--ledger .oppose__head {
padding-block: var(--sp-4);
}
.oppose--ledger .oppose__title { gap: var(--sp-2); display: flex; flex-direction: column; }
.oppose--ledger .oppose__title-sub {
color: var(--c-gold-text);
order: -1;
}
.oppose--ledger .oppose__title .oppose__title-sub { color: var(--c-mute); }
.oppose--ledger .oppose__title--after .oppose__title-sub { color: var(--c-gold-text); }
.oppose--ledger .oppose__title-main {
font-size: var(--fs-3);
font-weight: 500;
}
/* Cells: left dimmed, right inked with gold accent on .
Override base flex-column so inline stays inline within the paragraph. */
.oppose--ledger .oppose__cell {
display: block;
color: var(--c-mute);
opacity: 0.72;
padding-block: var(--sp-5);
}
.oppose--ledger .oppose__cell--after {
color: var(--c-ink);
opacity: 1;
font-weight: 500;
}
.oppose--ledger .oppose__cell--after em {
display: inline;
font-style: normal;
color: var(--c-gold-text);
font-weight: 600;
}
/* Hover: whole row lifts — cost side stays dim but gains a subtle strike;
gain side gets a gold marker on its left edge */
.oppose--ledger .oppose__row { transition: background var(--dur-2) var(--ease); }
.oppose--ledger .oppose__row:hover { background: var(--c-gold-wash); }
.oppose--ledger .oppose__row:hover .oppose__num { color: var(--c-gold); }
.oppose--ledger .oppose__cell--after::before { display: none; }
/* Closing statement — spans full width, centered, gold em */
.oppose__close {
grid-column: 1 / -1;
padding-block: var(--sp-7);
border-top: var(--bw-2) solid var(--c-line-strong);
margin-top: var(--sp-2);
text-align: center;
}
.oppose__close-text {
font-family: var(--ff-display);
font-size: var(--fs-4);
font-weight: 400;
letter-spacing: var(--ls-tight);
color: var(--c-ink);
margin: 0;
}
.oppose__close-text em {
font-style: italic;
color: var(--c-gold-text);
font-weight: 500;
}
/* Mobile: collapse to stacked pairs, keep the number as row anchor */
@media (max-width: 720px) {
.oppose--ledger .oppose__head,
.oppose--ledger .oppose__row {
grid-template-columns: var(--sp-8) 1fr;
row-gap: var(--sp-2);
padding-block: var(--sp-4);
}
.oppose--ledger .oppose__title,
.oppose--ledger .oppose__cell { grid-column: 2 / -1; padding-block: var(--sp-2); }
.oppose--ledger .oppose__title--after,
.oppose--ledger .oppose__cell--after { grid-column: 2 / -1; }
.oppose--ledger .oppose__divider {
grid-column: 2 / -1;
width: 40%;
height: var(--bw);
justify-self: start;
align-self: center;
margin-block: var(--sp-2);
}
.oppose__num { grid-column: 1 / span 1; grid-row: 1 / span 4; align-self: start; padding-top: var(--sp-2); }
}
/* --- P8 spine: four stations hung off one vertical rail ------------------- */
.spine {
position: relative;
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--gutter);
row-gap: var(--sp-10);
}
.spine__track {
position: absolute;
top: var(--sp-2);
bottom: var(--sp-2);
left: calc(var(--col) / 2);
width: var(--bw);
background: var(--c-line-dark);
}
.spine__fill {
display: block;
width: 100%;
height: 0;
background: linear-gradient(to bottom, var(--c-gold), var(--c-gold-deep));
transition: height var(--dur-3) linear;
}
.station {
display: grid;
grid-column: 1 / -1;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--gutter);
row-gap: var(--sp-6);
align-items: start;
}
.station__marker {
grid-column: 1 / span 1;
display: grid;
place-items: center;
width: var(--sp-7);
height: var(--sp-7);
margin-left: calc((var(--col) / 2) - (var(--sp-7) / 2));
border-radius: var(--r-pill);
background: var(--c-ink);
border: var(--bw) solid var(--c-gold-deep);
box-shadow: var(--shadow-dark-1);
font-family: var(--ff-display);
font-size: var(--fs-4);
color: var(--c-gold);
line-height: 1;
}
.station__copy {
position: relative;
grid-column: 2 / span 4;
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
.station__glyph {
width: var(--glyph-lg);
height: var(--glyph-lg);
color: var(--c-on-dark);
stroke-width: 2;
stroke-linecap: square;
stroke-linejoin: miter;
fill: none;
margin-bottom: var(--sp-2);
}
.station__title {
font-family: var(--ff-display);
font-size: var(--fs-3);
font-weight: 500;
line-height: var(--lh-title);
letter-spacing: var(--ls-tight);
color: var(--c-on-dark);
}
.station__body {
font-size: var(--fs-base);
color: var(--c-on-dark-2);
line-height: 1.55;
}
.station__art { grid-column: 7 / span 6; }
/* --- P10 the statistic: one number, optically flush to the rail ---------- */
.stat-band {
position: relative;
padding-block: var(--sp-10);
background: var(--c-ink-deep);
color: var(--c-on-dark);
isolation: isolate;
overflow: hidden;
}
.stat-band::after {
content: "";
position: absolute;
inset: 0;
background-image: var(--grain);
opacity: .04;
z-index: -1;
pointer-events: none;
}
.stat__figure {
display: block;
grid-column: 1 / span 7;
font-family: var(--ff-display);
font-weight: 500;
font-size: var(--fs-stat);
line-height: .82;
letter-spacing: -.045em;
color: var(--c-on-dark);
margin-left: -.055em; /* optical flush-left correction */
}
.stat__pct {
font-size: .38em;
letter-spacing: -.02em;
color: var(--c-gold);
vertical-align: super;
margin-left: .06em;
}
.stat__legend {
grid-column: 9 / span 4;
align-self: end;
font-family: var(--ff-display);
font-size: var(--fs-3);
line-height: var(--lh-title);
color: var(--c-on-dark);
}
.stat__counter {
grid-column: 9 / span 4;
margin-top: var(--sp-4);
font-size: var(--fs-body);
color: var(--c-on-dark-2);
}
.stat__counter strong { color: var(--c-gold); font-weight: 600; }
.stat__source {
grid-column: 1 / span 7;
align-self: end;
padding-top: var(--sp-5);
border-top: var(--bw) solid var(--c-line-dark);
font-size: var(--fs-xs);
color: var(--c-on-dark-3);
}
.stat__source a {
color: var(--c-on-dark-2);
box-shadow: inset 0 var(--hair-offset) 0 var(--c-line-dark-strong);
transition: color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.stat__source a:hover { color: var(--c-gold); box-shadow: inset 0 var(--hair-offset) 0 var(--c-gold); }
.stat__source--split { border-top: 0; padding-top: 0; }
.stat__split {
grid-column: 1 / -1;
margin-top: var(--sp-9);
padding: var(--sp-6);
background: var(--c-ink-inset);
border-radius: var(--r-sm);
box-shadow: var(--shadow-inset-dark);
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
.stat__split-lede { font-size: var(--fs-sm); color: var(--c-on-dark-2); }
.stat__split-bar {
display: flex;
height: var(--sp-3);
border-radius: var(--r-xs);
overflow: hidden;
background: rgba(237,235,232,.08);
}
.stat__split-tech { width: 20%; background: var(--c-on-dark-3); }
.stat__split-work { width: 80%; background: linear-gradient(to right, var(--c-gold), var(--c-gold-deep)); }
.stat__split-keys {
display: flex;
justify-content: space-between;
gap: var(--sp-5);
font-size: var(--fs-xs);
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--c-on-dark-3);
}
/* --- P11 commitments: two by two ----------------------------------------- */
.commits {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--gutter);
row-gap: var(--sp-5);
}
.commit {
position: relative;
grid-column: span 6;
display: grid;
grid-template-columns: auto 1fr;
gap: var(--sp-5);
/* Sam: nudge the icons down so they read as vertically centered next to
the whole title + supporting text block, not stuck at the top edge. */
align-items: center;
padding: var(--sp-6);
background: var(--c-ground-2);
border: var(--bw) solid var(--c-line);
border-radius: var(--r-md);
box-shadow: var(--shadow-1);
transition: box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.commit:hover { border-color: var(--c-line-strong); box-shadow: var(--shadow-2); }
/* LEDGER variant — the same commitments as hairline rows instead of cards,
for use beside a col 1-5 head. Rows start exactly on their column because
the card padding is gone on the inline axis. */
.commits--ledger { display: block; }
.commits--ledger .commit {
/* the glyph occupies one full column plus its gutter, so the text starts
exactly on the next column line */
grid-template-columns: calc(var(--col) + var(--gutter)) minmax(0, 1fr);
gap: 0;
grid-column: auto;
padding: var(--sp-6) 0;
background: none;
border: 0;
border-top: var(--bw) solid var(--c-line);
border-radius: 0;
box-shadow: none;
transition: background-color var(--dur-2) var(--ease);
}
.commits--ledger .commit:first-child { border-top: var(--bw-2) solid var(--c-line-strong); }
.commits--ledger .commit:last-child { border-bottom: var(--bw-2) solid var(--c-line-strong); }
.commits--ledger .commit:hover { background: var(--c-gold-wash); box-shadow: none; }
.commit__glyph {
position: relative;
z-index: 1;
width: var(--glyph-lg);
height: var(--glyph-lg);
color: var(--c-ink);
stroke-width: 2;
stroke-linecap: square;
stroke-linejoin: miter;
fill: none;
}
.commit__body { position: relative; z-index: 1; }
.commit__title {
font-family: var(--ff-display);
font-size: var(--fs-4);
font-weight: 500;
line-height: var(--lh-title);
letter-spacing: var(--ls-tight);
color: var(--c-ink);
margin-bottom: var(--sp-2);
}
.commit__text { font-size: var(--fs-base); color: var(--c-steel); line-height: 1.55; }
/* --- P12 plans: three sizes, the chosen one raised to subject level ------- */
.plans {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--gutter);
row-gap: var(--sp-6);
align-items: stretch;
}
.plan {
position: relative;
grid-column: span 4;
display: flex;
flex-direction: column;
gap: var(--sp-3);
padding: var(--sp-7) var(--sp-6) var(--sp-6);
background: var(--c-white);
border: var(--bw) solid var(--c-line);
border-radius: var(--r-md);
box-shadow: var(--shadow-1);
transition: box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.plan:hover { border-color: var(--c-line-strong); box-shadow: var(--shadow-2); }
.plan--featured {
border-color: var(--c-gold-mid);
box-shadow: var(--shadow-3);
}
.plan--featured::after {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: var(--bw-2);
background: linear-gradient(to right, var(--c-gold-deep), var(--c-gold), var(--c-gold-deep));
border-top-left-radius: var(--r-md);
border-top-right-radius: var(--r-md);
}
.plan__flag {
position: absolute;
top: 0; right: var(--sp-6);
transform: translateY(-50%);
padding: var(--sp-1) var(--sp-4);
background: var(--c-ink);
color: var(--c-gold);
border-radius: var(--r-pill);
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: var(--ls-label);
text-transform: uppercase;
z-index: 2;
}
.plan__name {
position: relative;
z-index: 1;
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--c-gold-text);
}
.plan__price {
position: relative;
z-index: 1;
display: flex;
align-items: baseline;
gap: var(--sp-1);
font-family: var(--ff-display);
font-size: var(--fs-2);
font-weight: 500;
letter-spacing: -.03em;
color: var(--c-ink);
line-height: 1;
}
.plan__cur { font-size: .5em; align-self: flex-start; margin-top: .35em; color: var(--c-steel); }
.plan__period {
font-family: var(--ff-sans);
font-size: var(--fs-sm);
font-weight: 500;
letter-spacing: 0;
color: var(--c-mute);
}
.plan__body {
position: relative;
z-index: 1;
font-size: var(--fs-sm);
color: var(--c-steel);
line-height: 1.55;
}
.plan__specs {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: var(--sp-2);
padding: var(--sp-5);
background: var(--c-ground-3);
border-radius: var(--r-sm);
box-shadow: var(--shadow-inset);
}
.plan__spec {
position: relative;
padding-left: var(--sp-5);
font-size: var(--fs-sm);
color: var(--c-ink);
}
.plan__spec::before {
content: "";
position: absolute;
left: 0; top: .62em;
width: var(--sp-3);
height: var(--bw);
background: var(--c-gold-mid);
}
.plan__action { position: relative; z-index: 1; margin-top: auto; padding-top: var(--sp-6); }
/* --- P12b the guided-setup toggle (R3 §2.14) -----------------------------
"a toggle labelled 'Add guided setup' on each card that changes the
displayed price." Two mechanisms were built in parallel during R3: a CSS
only checkbox on the homepage and a scripted role="switch" on pricing. The
CSS one is kept for both pages — it works with JavaScript off, cannot flash
the wrong state, needs no inline html flag and no second price line, and its
control is drawn from tokens rather than a 40x22px face. js/pricing.js,
the .pricing-js flag and .plan__alt are all deleted with it.
The input sits between .plan__name and .plan__price so the sibling
combinator can reach both the price and its own label. Card band order on
both pages: name, price, toggle, body, specs, action. */
.plan { gap: 0; }
.plan__name { margin-bottom: var(--sp-3); }
.plan__price { margin-bottom: var(--sp-4); }
.plan__body { margin-bottom: var(--sp-5); }
/* while the three cards sit side by side, two lines are reserved for the "who
it is for" line whether or not it takes them, so the metering boxes below
start on the same line in all three (§1: sibling boxes align) */
@media (min-width: 901px) {
.plan__body { min-height: calc(2 * var(--lh-body) * 1em); }
}
.plan__toggle {
position: absolute;
width: 1px;
height: 1px;
margin: 0;
opacity: 0;
pointer-events: none;
}
.plan__amt--guided { display: none; }
.plan__toggle:checked ~ .plan__price .plan__amt--base { display: none; }
.plan__toggle:checked ~ .plan__price .plan__amt--guided { display: inline; }
.plan__addon {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: var(--sp-3);
margin-bottom: var(--sp-5);
padding-top: var(--sp-4);
border-top: var(--bw) solid var(--c-line);
font-size: var(--fs-sm);
font-weight: 500;
color: var(--c-ink);
cursor: pointer;
}
.plan__addon-box {
flex: 0 0 auto;
display: block;
width: var(--sp-5);
height: var(--sp-5);
border: var(--bw) solid var(--c-line-strong);
border-radius: var(--r-xs);
background: var(--c-white);
}
.plan__addon-note { margin-left: auto; color: var(--c-mute); }
.plan__toggle:checked ~ .plan__addon .plan__addon-box {
background: var(--c-gold-mid);
border-color: var(--c-gold-deep);
}
.plan__toggle:focus-visible ~ .plan__addon .plan__addon-box {
outline: var(--focus-ring) solid var(--c-gold-mid);
outline-offset: var(--bw-2);
}
.plans--tight { row-gap: var(--sp-5); }
/* Homepage tight-plan cards: center the tier label + price inside each box. */
.plans--tight .plan { text-align: center; align-items: center; }
.plans--tight .plan__name { text-align: center; }
.plans--tight .plan__price { justify-content: center; }
/* Pricing page triple cards: center just the price line inside each box. */
.plans--triple .plan__price { justify-content: center; }
/* the shared note under the three cards, and the ledger footnote */
.plan-note { max-width: 62ch; margin-inline: auto; text-align: center; }
.table-scroll + .footnote { display: block; }
/* --- P13 R3 homepage components -----------------------------------------
Merged out of the scratch stylesheet css/page-index.css in the R3
consolidation pass. Every distance is a --sp step; no new tokens.
------------------------------------------------------------------------ */
/* §2.2 THE FILM UNIT — one framed unit: the player, the question inside the
frame, and the same question repeated directly beneath it. The plate is the
shipping poster, i.e. the film's own opening frame, not a grey box. Drop the
MP4 in (data-src on .film__stage) and the plate hides itself. */
.film {
position: relative;
padding: var(--sp-4);
background: var(--c-ground-2);
border: var(--bw) solid var(--c-line);
border-radius: var(--r-lg);
box-shadow: var(--shadow-3);
}
.film__stage {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: var(--r-md);
background: var(--c-ink-deep);
border: var(--bw) solid var(--c-line-dark);
}
.film__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
background: var(--c-ink-deep);
}
.film__plate {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--sp-4);
padding: var(--sp-7) var(--sp-6);
text-align: center;
}
.film.is-live .film__plate { display: none; }
.film__mark {
position: absolute;
top: var(--sp-5);
left: var(--sp-6);
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--c-on-dark-3);
}
.film__rule {
width: min(var(--sp-11), 40%);
height: var(--bw-2);
background: var(--c-gold);
}
.film__q {
font-family: var(--ff-display);
font-weight: 500;
font-size: var(--fs-3);
line-height: var(--lh-display);
letter-spacing: var(--ls-display);
color: var(--c-on-dark);
max-width: 30ch;
}
.film__sub {
font-size: var(--fs-sm);
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--c-on-dark-2);
}
/* the play control — bottom right, over the plate or over the film */
.film__play {
position: absolute;
right: var(--sp-5);
bottom: var(--sp-5);
z-index: 2;
display: inline-flex;
align-items: center;
gap: var(--sp-3);
min-height: var(--ctl-h);
padding: var(--sp-2) var(--sp-5) var(--sp-2) var(--sp-3);
background: rgba(13,13,12,.72);
color: var(--c-on-dark);
border: var(--bw) solid var(--c-line-dark-strong);
border-radius: var(--r-pill);
font-family: var(--ff-sans);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: var(--ls-label);
text-transform: uppercase;
cursor: pointer;
transition: border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.film__play:hover { border-color: var(--c-gold); color: var(--c-gold); }
.film__play svg { width: var(--sp-5); height: var(--sp-5); flex: 0 0 auto; }
/* with JS off nothing can play, so the control is not shown at all */
.no-js .film__play { display: none; }
.film__caption {
margin-top: var(--sp-4);
padding-top: var(--sp-4);
border-top: var(--bw) solid var(--c-line);
font-family: var(--ff-display);
font-weight: 500;
font-size: var(--fs-4);
line-height: var(--lh-title);
letter-spacing: var(--ls-tight);
color: var(--c-ink);
text-align: center;
}
.film__note {
margin-top: var(--sp-2);
font-size: var(--fs-xs);
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--c-mute);
text-align: center;
}
/* the phone tier: a 16:9 stage is only ~185px tall at 375, so the poster type
comes down with it, the mark moves to the composition's top edge, and the
plate reserves its bottom band for the control. (Two @560 blocks were
merged here; the later, measured values won.) */
@media (max-width: 560px) {
.film { padding: var(--sp-3); }
.film__plate {
gap: var(--sp-3);
padding: var(--sp-7) var(--sp-4) var(--sp-9);
justify-content: flex-start;
}
.film__mark { top: var(--sp-3); left: var(--sp-4); }
.film__rule { width: var(--sp-8); }
.film__q { font-size: var(--fs-6); max-width: 26ch; }
.film__sub { display: none; }
.film__play {
right: var(--sp-3);
bottom: var(--sp-3);
padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-3);
}
.film__play-label { display: none; }
}
/* §2.3 RECOGNITION — one hairline runs behind the row and through every beat,
so four beats read as one register instead of four separate cards. */
.beats--linked { position: relative; }
.beats--linked::before { content: none; }
.beats--linked .beat { background: var(--c-ground-2); gap: var(--sp-4); align-items: center; text-align: center; justify-content: center; padding-block: var(--sp-7); }
.beats--linked .beat__text { max-width: 22ch; }
.beat__frame {
display: grid;
place-items: center;
width: var(--sp-9);
height: var(--sp-9);
border: var(--bw) solid var(--c-line-strong);
border-radius: var(--r-sm);
color: var(--c-ink);
}
.beat__frame .beat__glyph { width: var(--sp-6); height: var(--sp-6); }
.beats--linked .beat__rule { left: 50%; transform: translateX(-50%); }
.beat__key {
position: relative;
z-index: 1;
font-size: .8125rem;
font-weight: 600;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--c-gold-text);
}
@media (max-width: 1080px) {
.beats--linked::before { display: none; }
}
/* §2.4 CONTEXT PANES — a matched pair of enrolled .dg drawings. The model box
and the answer box sit at identical coordinates in both, so the only thing
that changes between them is what is behind the model. Pane 1 carries no
gold at all: §9A.9's sanctioned exception for the failure half of a pair. */
.ctx__fig { position: relative; z-index: 1; align-self: center; }
.ctx--pair { row-gap: var(--sp-6); max-width: 820px; margin-inline: auto; }
@media (max-width: 420px) {
/* holds the 1:1 artboard contract down to a 320px viewport */
.ctx--pair .ctx__pane { padding-inline: var(--sp-3); }
}
/* §2.6 THE RIGHT ORDER — one surface level, one shadow, one flat gold rule
across all three cards: "the cards move from two tones to bright white by
the time you reach 'a worker.' Make the three consistent." */
.stages--even .stage {
background: var(--c-ground-2);
box-shadow: var(--shadow-1);
}
.stages--even .stage::before { background: var(--c-gold-mid); }
.order__close { margin-top: var(--sp-6); }
.order__close .rule-gold { margin-bottom: var(--sp-4); }
/* §2.7 SEE IT FIRST — the actions sit on the copy column's own left edge with
one gap from the text above them. */
.split__copy .btn-row { margin-top: var(--sp-6); }
.split__copy .btn-row .btn,
.split__copy .btn-row .text-link { margin-left: 0; }
/* §2.11 GROUNDS FOR BELIEVING US — the empty left half now carries the
conclusion, and the gold rule is attached to the line beneath it. */
.found__close { margin-top: var(--sp-8); }
.found__close .rule-gold { margin-bottom: var(--sp-4); }
/* Founders section — H2 bumped up, columns top-aligned, side lines removed
(rails class removed from section), founder photos on the bottom-right. */
.found-section { padding-top: var(--sp-7); padding-bottom: var(--sp-7); }
.found-grid { align-items: start; }
.found-left { align-self: start; }
.found-right { align-self: start; }
.found-h2 { margin-top: var(--sp-1); }
/* Align the right-column bio paragraph's first baseline with the H2 title
on the left. The left column has an eyebrow above the H2 (line-height +
sp-5 bottom margin ≈ ~2.75rem); the right column has no eyebrow, so we
push it down by the same amount. Desktop only — on mobile the columns
stack so no offset is needed. */
@media (min-width: 900px) {
.found-right { padding-top: calc(var(--fs-eyebrow, 0.8rem) * 1.35 + var(--sp-5)); }
}
.founders-photo {
/* Align photos to the left edge of the paragraph column above them, and
tighten the vertical gap so they read as tied to the copy. Centered
horizontally within the available width by default so the pair sits
under the reading measure, not floating on the right rail. */
margin: var(--sp-6) auto 0;
max-width: 520px;
text-align: center;
}
.founders-photo__pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-4);
margin-left: 0;
margin-right: 0;
max-width: 460px;
margin-inline: auto;
}
.founders-photo__pair img {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
display: block;
filter: grayscale(100%);
}
/* founder card — photo with a defined name label immediately beneath it,
so each name reads as belonging to the person above it, not to the pair. */
.founder-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.founder-card__name {
display: block;
margin-top: var(--sp-2);
font-family: var(--font-display, Georgia, serif);
font-size: 1.0625rem;
font-weight: 500;
letter-spacing: 0.005em;
color: var(--c-ink, #1c1a17);
line-height: 1.2;
}
/* Shared “Co-founders” role tag, centered under the whole pair, spaced clearly
away from the names so it reads as the collective descriptor. */
.founders-photo__role {
display: block;
margin-top: var(--sp-4);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--c-ink-mute, #6b665a);
}
@media (max-width: 720px) {
.founders-photo { max-width: 100%; margin: var(--sp-5) 0 0; text-align: center; }
.founders-photo__pair { margin-left: 0; }
}
/* §2.12 THE GAP — figure and legend are one block on one left edge, and the
PwC well is separated from the Deloitte figure by a rule and its own
source label. */
.stat__unit { display: block; }
/* the figure runs on a .82 line-height, so its box is shorter than its glyphs:
the legend needs the difference back as space or the descenders land on it */
.stat__unit .stat__figure {
display: block;
margin-bottom: var(--sp-5);
padding-bottom: .06em;
}
.stat__unit .stat__pct { margin-left: .1em; }
.stat__unit .stat__legend {
display: block;
align-self: start;
max-width: 26ch;
font-size: var(--fs-3);
}
.stat__counter--set { margin-top: var(--sp-5); }
.stat__split--apart {
margin-top: var(--sp-8);
border-top: var(--bw) solid var(--c-line-dark-strong);
}
.stat__split-eyebrow {
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--c-gold);
}
.stat__split-bar--flat { height: 1.25rem; }
.stat__split-bar--flat .stat__split-work { background: var(--c-gold-mid); }
.stat__split-keys--set {
display: grid;
grid-template-columns: 20% 80%;
gap: var(--sp-4);
}
/* the well's own source line sits under the well's left edge, not flush right
like the band-level source it sits inside */
.stat__source--split {
text-align: left;
margin-top: var(--sp-5);
padding-top: 0;
border-top: 0;
}
/* Two-sided resource layout — 74% on the left, 20/80 PwC well on the right,
with a vertical divider between them (Trent [06:25]: "there could be like
a divider maybe, and this sits on that side"). Kills the right-side void. */
.stat-band--split .stat-band__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
column-gap: var(--sp-7);
align-items: start;
margin-top: var(--sp-5);
}
.stat-band--split .stat-band__grid::before {
content: "";
grid-column: 2;
align-self: stretch;
width: 1px;
background: rgba(255,255,255,0.08);
}
.stat-band--split .stat__unit--left { grid-column: 1; }
.stat-band--split .stat__split--right { grid-column: 3; margin-top: 0; }
.stat-band--split .stat__unit--left .stat__source { margin-top: var(--sp-4); }
@media (max-width: 900px) {
.stat-band--split .stat-band__grid {
grid-template-columns: minmax(0, 1fr);
row-gap: var(--sp-7);
}
.stat-band--split .stat-band__grid::before { display: none; }
.stat-band--split .stat__unit--left,
.stat-band--split .stat__split--right { grid-column: 1; }
}
@media (max-width: 760px) {
.stat__split-keys--set { grid-template-columns: minmax(0, 1fr); }
}
/* §2.13 WHAT WE HOLD OURSELVES TO — four equal plates, each glyph in its own
square register, labels optically centred, nothing floating in open space. */
.pledges {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: var(--gutter);
row-gap: var(--sp-5);
margin-top: var(--sp-8);
}
.pledge {
display: flex;
flex-direction: column;
gap: var(--sp-4);
padding: var(--sp-6) var(--sp-5);
background: var(--c-ground-2);
border: var(--bw) solid var(--c-line);
border-radius: var(--r-md);
box-shadow: var(--shadow-1);
text-align: center;
align-items: center;
}
.pledge__frame {
display: grid;
place-items: center;
width: var(--sp-8);
height: var(--sp-8);
border: var(--bw) solid var(--c-gold);
border-radius: var(--r-sm);
color: var(--c-gold);
background: color-mix(in oklab, var(--c-gold) 6%, transparent);
}
.pledge__frame svg { width: var(--sp-6); height: var(--sp-6); }
.pledge__title {
font-family: var(--ff-display);
font-weight: 500;
font-size: var(--fs-4);
line-height: var(--lh-title);
letter-spacing: var(--ls-tight);
color: var(--c-ink);
text-wrap: balance;
}
.pledge__text {
font-size: var(--fs-sm);
line-height: 1.55;
color: var(--c-steel);
}
@media (max-width: 900px) {
.pledges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
/* one plate per row, and the glyph moves beside the title so the text keeps
the full measure — two columns of 90px would wrap every word */
.pledges { grid-template-columns: minmax(0, 1fr); }
.pledge {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: var(--sp-4);
row-gap: var(--sp-3);
justify-items: start;
text-align: left;
}
.pledge__frame { grid-column: 1; grid-row: 1; }
.pledge__title { grid-column: 2; grid-row: 1; align-self: center; }
.pledge__text { grid-column: 1 / -1; grid-row: 2; }
}
/* ------------------------------------- 10 shared page components ---------- */
/* Card — the generic raised container used across inherited pages. */
.card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--sp-4);
padding: var(--sp-6);
background: var(--c-white);
border: var(--bw) solid var(--c-line);
border-radius: var(--r-md);
box-shadow: var(--shadow-1);
transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease),
box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.card:hover,
.card:focus-within {
border-color: var(--c-line-strong);
transform: translateY(calc(-1 * var(--lift-2)));
box-shadow: var(--shadow-2);
}
.card > * { position: relative; z-index: 1; }
.card__icon {
width: var(--glyph-sm); height: var(--glyph-sm);
color: var(--c-ink);
stroke-width: 2;
fill: none;
transition: color var(--dur-2) var(--ease);
}
.card:hover .card__icon { color: var(--c-gold-deep); }
.card__title {
font-family: var(--ff-display);
font-weight: 500;
font-size: var(--fs-4);
line-height: var(--lh-title);
letter-spacing: var(--ls-tight);
}
.card__body { font-size: var(--fs-base); color: var(--c-steel); line-height: 1.55; }
.card__num {
font-family: var(--ff-display);
font-size: var(--fs-2);
font-weight: 500;
line-height: 1;
color: var(--c-line-strong);
transition: color var(--dur-2) var(--ease);
}
.card:hover .card__num { color: var(--c-gold-deep); }
.card__rule {
width: var(--sp-6); height: var(--bw-2);
background: var(--c-line-strong);
transition: width var(--dur-3) var(--ease), background var(--dur-2) var(--ease);
}
.card:hover .card__rule { width: var(--sp-8); background: var(--c-gold); }
.card__meta {
margin-top: auto;
padding-top: var(--sp-2);
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--c-mute);
}
.card__foot {
display: flex; align-items: center; gap: var(--sp-2);
margin-top: auto; padding-top: var(--sp-4);
font-size: var(--fs-sm); font-weight: 600;
}
.card__arrow { transition: transform var(--dur-2) var(--ease); }
.card:hover .card__arrow { transform: translateX(var(--shift)); }
.card--dark {
background: var(--c-ink-soft);
border-color: var(--c-line-dark);
color: var(--c-on-dark-2);
box-shadow: var(--shadow-dark-1);
}
.card--dark .card__title { color: var(--c-on-dark); }
.card--dark .card__body { color: var(--c-on-dark-2); }
.card--dark .card__num { color: var(--c-on-dark-3); }
.card--dark .card__icon { color: var(--c-on-dark); }
.card--dark .card__meta { color: var(--c-on-dark-3); }
.card--dark .card__rule { background: var(--c-line-dark-strong); }
.card--dark:hover { border-color: var(--c-gold-deep); box-shadow: var(--shadow-dark-2); }
.card--dark:hover .card__num, .card--dark:hover .card__icon { color: var(--c-gold); }
.card--dark:hover .card__rule { background: var(--c-gold); }
.card--flat { background: transparent; box-shadow: none; }
.card--flat:hover { background: var(--c-white); }
.card--wide { flex-direction: row; align-items: flex-start; gap: var(--sp-5); }
.card__col { display: flex; flex-direction: column; gap: var(--sp-2); }
/* compare table */
.compare { width: 100%; border-collapse: collapse; text-align: left; font-size: var(--fs-base); }
.compare caption {
text-align: left;
font-family: var(--ff-display);
font-size: var(--fs-3);
font-weight: 500;
padding-bottom: var(--sp-5);
}
.compare th, .compare td {
padding: var(--sp-4);
border-bottom: var(--bw) solid var(--c-line);
vertical-align: top;
}
.compare thead th {
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--c-mute);
border-bottom: var(--bw-2) solid var(--c-gold);
}
.compare tbody tr { transition: background var(--dur-2) var(--ease); }
.compare tbody tr:hover { background: var(--c-ground-2); }
.compare td:last-child { font-weight: 500; }
.compare th[scope="row"] { font-weight: 400; color: var(--c-steel); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-hint { display: none; }
/* accordion */
.accordion { border-top: var(--bw) solid var(--c-line); }
.accordion__item { border-bottom: var(--bw) solid var(--c-line); }
.accordion__trigger {
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
width: 100%;
min-height: var(--ctl-h);
padding: var(--sp-4) var(--sp-2);
background: transparent; border: 0;
font-family: var(--ff-sans); font-size: var(--fs-body); font-weight: 500;
color: var(--c-ink); text-align: left; cursor: pointer;
transition: color var(--dur-1) var(--ease), padding-left var(--dur-2) var(--ease);
}
.accordion__trigger:hover { color: var(--c-gold-text); padding-left: var(--sp-4); }
.accordion__chevron { flex: 0 0 auto; color: var(--c-gold); transition: transform var(--dur-2) var(--ease); }
.accordion__trigger[aria-expanded="true"] .accordion__chevron { transform: rotate(180deg); }
.accordion__panel {
padding: 0 var(--sp-7) var(--sp-5) var(--sp-2);
font-size: var(--fs-base);
color: var(--c-steel);
max-width: 72ch;
}
.accordion__panel[hidden] { display: none; }
/* form */
.form {
display: flex; flex-direction: column; gap: var(--sp-5);
padding: var(--sp-7);
background: var(--c-white);
border: var(--bw) solid var(--c-line);
border-radius: var(--r-lg);
box-shadow: var(--shadow-3);
}
.form__group { display: flex; flex-direction: column; gap: var(--sp-2); }
.form__label { font-size: var(--fs-sm); font-weight: 600; }
.form__hint { font-size: var(--fs-xs); color: var(--c-mute); }
.form__input {
width: 100%;
min-height: var(--ctl-h);
padding: var(--sp-3) var(--sp-4);
background: var(--c-ground-2);
border: var(--bw) solid var(--c-line-strong);
border-radius: var(--r-sm);
font-family: inherit; font-size: var(--fs-base); color: var(--c-ink);
transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease),
box-shadow var(--dur-1) var(--ease);
}
.form__input:hover { border-color: var(--c-gold-deep); }
.form__input:focus {
border-color: var(--c-gold);
background: var(--c-white);
outline: none;
box-shadow: 0 0 0 var(--focus-ring) rgba(212,175,55,.18);
}
.form__error { font-size: var(--fs-xs); font-weight: 500; color: #8A2A1F; }
.form__error[hidden] { display: none; }
.form__group.has-error .form__input { border-color: #8A2A1F; }
.form__fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.form__legend {
padding: 0; margin-bottom: var(--sp-1);
font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--ls-eyebrow);
text-transform: uppercase; color: var(--c-gold-text);
}
.form__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.form__actions { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-2); }
.form__submit:disabled { opacity: .7; cursor: default; }
.form-status {
padding: var(--sp-7);
background: var(--c-white);
border: var(--bw) solid var(--c-gold);
border-radius: var(--r-lg);
text-align: center;
box-shadow: var(--shadow-2);
}
.form-status[hidden] { display: none; }
.form-status__title {
font-family: var(--ff-display); font-weight: 500; font-size: var(--fs-2);
margin-bottom: var(--sp-4);
}
/* report */
.report {
padding: var(--sp-7);
background: var(--c-white);
border: var(--bw) solid var(--c-line);
border-radius: var(--r-lg);
box-shadow: var(--shadow-2);
transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.report:hover { border-color: var(--c-line-strong); box-shadow: var(--shadow-3); }
.report__meta {
font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--ls-eyebrow);
text-transform: uppercase; color: var(--c-mute);
}
.report__title {
font-family: var(--ff-display); font-weight: 500; font-size: var(--fs-2);
margin-top: var(--sp-2);
}
.report__block { margin-top: var(--sp-6); }
.report__heading {
padding-bottom: var(--sp-2);
border-bottom: var(--bw-2) solid var(--c-gold);
font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-label);
text-transform: uppercase;
}
.report__text { margin-top: var(--sp-4); color: var(--c-steel); }
.report__actions { margin-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); }
.report__action { display: flex; gap: var(--sp-4); align-items: baseline; }
.report__action-num {
flex: 0 0 auto; font-family: var(--ff-display); font-size: var(--fs-4); color: var(--c-gold-text);
}
/* founder */
.founder {
display: flex; flex-direction: column; gap: var(--sp-4);
padding: var(--sp-6);
background: var(--c-white);
border: var(--bw) solid var(--c-line);
border-radius: var(--r-md);
box-shadow: var(--shadow-1);
transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease),
box-shadow var(--dur-2) var(--ease);
}
.founder:hover { border-color: var(--c-line-strong); transform: translateY(calc(-1 * var(--lift-2))); box-shadow: var(--shadow-2); }
.founder__portrait {
aspect-ratio: 1 / 1;
display: flex; align-items: center; justify-content: center;
background: var(--c-ground-3);
border-radius: var(--r-sm);
box-shadow: var(--shadow-inset);
font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--c-mute); text-align: center; padding: var(--sp-4);
}
.founder__name { font-family: var(--ff-display); font-weight: 500; font-size: var(--fs-4); }
.founder__role {
font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--ls-eyebrow);
text-transform: uppercase; color: var(--c-gold-text);
}
.founder__body { font-size: var(--fs-base); color: var(--c-steel); }
/* row list — inherited only; the small-numeral pattern is banned in new work */
.row-list { border-top: var(--bw) solid var(--c-line); }
.row {
display: flex; align-items: baseline; gap: var(--sp-5);
padding: var(--sp-4) var(--sp-4);
border-bottom: var(--bw) solid var(--c-line);
transition: background var(--dur-2) var(--ease), padding-left var(--dur-2) var(--ease);
}
.row:hover { background: var(--c-white); padding-left: var(--sp-5); }
.row__marker { flex: 0 0 auto; width: var(--sp-6); font-size: var(--fs-sm); font-weight: 600; color: var(--c-line-strong); }
.row__text { font-size: var(--fs-body); }
.row-list--dark { border-top-color: var(--c-line-dark); }
.row-list--dark .row { border-bottom-color: var(--c-line-dark); }
.row-list--dark .row:hover { background: var(--c-ink-soft); }
.row-list--dark .row__marker { color: var(--c-on-dark-3); }
/* legacy diagram shell — superseded by .ctx */
.diagram { display: flex; gap: var(--sp-6); flex-wrap: wrap; }
.diagram__pane {
flex: 1 1 var(--pane-min); padding: var(--sp-6);
border: var(--bw) solid var(--c-line-dark); border-radius: var(--r-lg);
}
.diagram__art { width: 100%; height: auto; }
.diagram__caption { font-size: var(--fs-sm); color: var(--c-on-dark-2); }
/* ------------------------------------------------- 11 footer + reveal ----- */
/* REVISION-03 §1.3 — the footer was 442px at 1440 and 856px at 375. It is a
footer, not a band: every value below is one scale step tighter than it was,
and the commitment strip is centred. */
.site-footer {
position: relative;
padding: var(--sp-5) 0 var(--sp-4);
background: var(--c-ink-deep);
color: var(--c-on-dark-2);
isolation: isolate;
overflow: hidden;
}
.site-footer::after {
content: "";
position: absolute; inset: 0;
background-image: var(--grain);
opacity: .035;
z-index: -1;
pointer-events: none;
}
.site-footer__top {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--gutter);
row-gap: var(--sp-5);
align-items: start;
}
.site-footer__brand {
grid-column: 1 / span 4;
display: flex; flex-direction: column; gap: var(--sp-3);
align-self: center;
margin-top: var(--sp-2);
}
.site-footer__tagline {
font-family: var(--ff-display); font-weight: 500; font-size: var(--fs-4);
line-height: var(--lh-title); letter-spacing: var(--ls-tight);
color: var(--c-on-dark);
max-width: 26ch;
}
.footer-col {
display: flex; flex-direction: column; gap: var(--sp-2);
}
/* Three nav columns after the brand block. Brand occupies cols 1–4;
nav cols fill 5–12 in equal thirds so all three end at the same baseline
even when link counts differ (align via align-items: start on the row). */
.footer-col:nth-child(2) { grid-column: 5 / span 3; }
.footer-col:nth-child(3) { grid-column: 8 / span 3; }
.footer-col:nth-child(4) { grid-column: 11 / span 2; }
/* Social row — sits under the wordmark inside the brand column.
Icons are inline SVGs that inherit currentColor and pick up gold on hover. */
.footer-social {
list-style: none; padding: 0; margin: 0;
display: flex; gap: var(--sp-3);
align-items: center;
}
.footer-social__link {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border-radius: 999px;
color: var(--c-on-dark-2);
border: 1px solid var(--c-line-dark);
transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.footer-social__link:hover {
color: var(--c-gold);
border-color: var(--c-gold);
transform: translateY(-1px);
}
.footer-social__link svg { display: block; }
.footer-col__head {
font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--ls-eyebrow);
text-transform: uppercase; color: var(--c-gold);
padding-bottom: var(--sp-2);
border-bottom: var(--bw) solid var(--c-line-dark);
}
.footer-col__link {
font-size: var(--fs-sm); color: var(--c-on-dark-2);
transition: color var(--dur-1) var(--ease), padding-left var(--dur-2) var(--ease);
}
a.footer-col__link:hover { color: var(--c-gold); padding-left: var(--sp-1); }
/* commit-strip removed — the four commitments already live in the "What we
hold ourselves to" section on the homepage and were reading as duplicate
noise in the footer. Kept the base rule as a no-op in case any page still
inherits it. */
.commit-strip { display: none; }
.commit-strip > span { position: relative; padding-left: var(--sp-4); }
.commit-strip > span::before {
content: "";
position: absolute; left: 0; top: .5em;
width: var(--sp-2); height: var(--bw);
background: var(--c-gold-deep);
}
.site-footer__legal {
display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-5); justify-content: space-between;
margin-top: var(--sp-4); font-size: var(--fs-xs); color: var(--c-on-dark-3);
padding-top: var(--sp-3);
border-top: var(--bw) solid var(--c-line-dark-faint);
}
[hidden] { display: none !important; }
/* reveal — staged, per-child stagger written by JS as --i */
html:not(.no-js) .reveal {
opacity: 0;
translate: 0 var(--rise);
transition: opacity var(--dur-3) var(--ease-out), translate var(--dur-3) var(--ease-out);
transition-delay: calc(var(--i, 0) * 60ms);
}
html:not(.no-js) .reveal.is-visible { opacity: 1; translate: 0 0; }
/* --------------------------------------------------------- 12 responsive -- */
/* 1080 — the twelve-column field starts to crowd four-across sets */
@media (max-width: 1080px) {
.beat { grid-column: span 6; }
.ctx__pane { grid-column: span 12; }
.stat__figure { grid-column: 1 / span 12; }
.stat__legend { grid-column: 1 / span 8; margin-top: var(--sp-5); }
.stat__counter { grid-column: 1 / span 8; }
.stat__source { grid-column: 1 / span 10; margin-top: var(--sp-6); }
.station__copy { grid-column: 2 / span 5; }
.station__art { grid-column: 2 / span 11; }
.addon__main { grid-column: 1 / span 12; }
.addon__side { grid-column: 1 / span 12; }
}
/* 900 — nav collapses; every twelve-column set becomes a single column */
@media (max-width: 900px) {
:root {
--header-h: 68px; /* trimmed from 80px per Sam — tighter mobile nav */
--sp-9: clamp(3rem, 7vw, 4.5rem);
--sp-10: clamp(3.5rem, 9vw, 5.5rem);
--sp-11: clamp(4.5rem, 12vw, 7rem);
}
.nav-toggle { display: inline-flex; }
.nav {
position: fixed;
inset: var(--header-h) 0 auto 0;
flex-direction: column;
align-items: stretch;
gap: 0;
margin: 0;
padding: var(--sp-4) var(--page-margin) var(--sp-6);
background: var(--c-ground);
border-bottom: var(--bw) solid var(--c-line);
box-shadow: var(--shadow-2);
transform: translateY(calc(-1 * var(--sp-2)));
opacity: 0;
visibility: hidden;
transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease),
visibility var(--dur-2) var(--ease);
}
.nav.is-open { transform: none; opacity: 1; visibility: visible; }
.nav__link {
padding-block: var(--sp-5); /* was --sp-4 — ensures ≥44px tap targets per §3.3 */
min-height: 44px;
display: flex;
align-items: center;
border-bottom: var(--bw) solid var(--c-line);
font-size: var(--fs-4); /* was --fs-body — larger mobile nav labels */
}
.nav__link::after { display: none; }
.header__actions .header__link { display: none; }
.no-js .nav { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; }
/* the mobile drawer always opens on a light background (var(--c-ground)),
so the dark-top white nav-link override must not follow it in. Without
this, pages with a black hero (how-it-works, pricing, try, about) show
white text on the light drawer once it opens. */
body.is-dark-top .nav.is-open .nav__link,
body.is-dark-top .nav.is-open .header__link {
color: var(--c-steel);
font-weight: 500;
}
body.is-dark-top .nav.is-open .nav__link:hover,
body.is-dark-top .nav.is-open .header__link:hover {
color: var(--c-ink);
}
body.is-dark-top .nav.is-open .nav__link.is-current {
color: var(--c-ink);
font-weight: 600;
}
/* every named twelve-column span collapses to the full field */
[class*="col--"] { grid-column: 1 / -1; }
/* the ledger's glyph rail is no longer a grid column once stacked */
.commits--ledger .commit {
grid-template-columns: auto minmax(0, 1fr);
gap: var(--sp-5);
}
/* forced desktop line breaks stop being forced */
.display__line--nowrap { white-space: normal; }
.split > *,
.split > * + *,
.split--head > *,
.split--head > * + * { grid-column: 1 / -1; }
.stage, .commit, .plan, .station__copy, .station__art { grid-column: 1 / -1; }
.stages, .commits, .plans { row-gap: var(--sp-5); }
.station { row-gap: var(--sp-5); }
.station__marker { grid-column: 1 / -1; margin-left: 0; }
.station__copy, .station__art { grid-column: 1 / -1; }
.spine__track { display: none; }
.spine { row-gap: var(--sp-9); }
.shot--edge {
margin-right: 0;
border-radius: var(--r-lg);
border-right: var(--bw) solid var(--c-line);
}
.hero__title { font-size: clamp(2.6rem, 9vw, 3.6rem); }
.hero__sub { max-width: none; }
.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--seam-mid::before { display: none; }
}
/* 760 — registers stack: label above value, hairline between */
@media (max-width: 760px) {
.oppose__head { display: none; }
.oppose__row { row-gap: 0; }
.oppose__title,
.oppose__cell,
.oppose__title--after,
.oppose__cell--after { grid-column: 1 / -1; padding: var(--sp-4) var(--sp-5); }
.oppose__cell { padding-bottom: var(--sp-2); }
.oppose__cell--after { padding-top: var(--sp-2); border-top: var(--bw) solid var(--c-line-faint); }
.oppose__divider { display: none; }
.table-hint {
display: block; margin-bottom: var(--sp-4);
font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em;
color: var(--c-mute);
}
.section--ink .table-hint, .section--ink-deep .table-hint { color: var(--c-on-dark-2); }
.stat__legend, .stat__counter, .stat__source { grid-column: 1 / -1; }
.stat__split-keys { flex-direction: column; gap: var(--sp-1); }
.site-footer__brand { grid-column: 1 / -1; align-self: auto; margin-top: var(--sp-2); align-items: center; text-align: center; }
.site-footer__brand .footer-social { justify-content: center; }
.footer-col:nth-child(2) { grid-column: 1 / span 4; }
.footer-col:nth-child(3) { grid-column: 5 / span 4; }
.footer-col:nth-child(4) { grid-column: 9 / span 4; }
/* REVISION-04 — condensed footer. Brand stacks on its own row; the three
nav cols share the next row equally so they line up at the bottom. */
.site-footer { padding: var(--sp-5) 0 var(--sp-4); }
.site-footer__top { row-gap: var(--sp-4); }
.site-footer__brand { gap: var(--sp-3); }
.site-footer__legal { justify-content: center; text-align: center; }
.commit-strip { margin-top: var(--sp-5); }
}
/* 560 — one column everywhere */
@media (max-width: 560px) {
/* footer, continued (REVISION-04): tighter mobile — three-up nav becomes
a stacked list so each column reads without wrapping */
.footer-col__link { font-size: var(--fs-xs); }
.site-footer__tagline { font-size: var(--fs-lead); max-width: 30ch; }
.site-footer__top { row-gap: var(--sp-3); }
.footer-col:nth-child(2),
.footer-col:nth-child(3),
.footer-col:nth-child(4) { grid-column: 1 / -1; }
.footer-col { gap: var(--sp-1); }
.footer-col__head { padding-bottom: var(--sp-1); }
.commit-strip { gap: var(--sp-2) var(--sp-4); }
.beat { grid-column: 1 / -1; }
.commit { grid-template-columns: 1fr; }
.grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
.form__pair { grid-template-columns: minmax(0, 1fr); }
.btn {
width: 100%;
height: auto;
padding-block: var(--sp-3);
white-space: normal;
text-align: center;
line-height: var(--lh-title);
}
.btn-row { flex-direction: column; align-items: stretch; }
.text-link { justify-content: center; }
.quiet__title { font-size: var(--fs-3); }
}
/* 420 — smallest supported field */
@media (max-width: 420px) {
:root { --page-margin: 1.125rem; }
.beat, .stage, .plan, .commit, .ctx__pane { padding: var(--sp-5); }
.oppose__cell, .oppose__title { padding-inline: var(--sp-4); }
.header__actions .btn {
min-height: var(--ctl-h-sm);
padding-inline: var(--sp-4);
font-size: var(--fs-xs);
}
.header__actions .btn__arrow { display: none; }
}
/* ------------------------------------------------------- reduced motion --- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 1ms !important;
animation-delay: 0ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important;
transition-delay: 0ms !important;
}
.hero__word { animation: none; opacity: 1; transform: none; }
.d-draw { stroke-dashoffset: 0; animation: none; }
html:not(.no-js) .reveal { opacity: 1; translate: none; }
.btn:hover, .card:hover, .beat:hover, .stage:hover, .founder:hover { transform: none; }
}
/* --------------------------------------------------------------- print ---- */
@media print {
.site-header, .nav, .site-footer, .hero__glow { display: none; }
body { background: #fff; color: #000; }
.section { padding-block: var(--sp-6); }
}
/* ==========================================================================
13 PAGE-SPECIFIC APPENDIX (inherited)
These blocks style the eight pages outside this pass's scope. They have been
ported onto the new spacing scale and border tokens verbatim otherwise, so
those pages keep working until each is rebuilt against DESIGN-SYSTEM.md.
Anything here is provisional: prefer the components above when rebuilding.
========================================================================== */
/* ==========================================================================
PROCESS + OUTCOME COMPONENTS (how-it-works.html, what-you-get.html)
Merged in from the retired css/pages-a.css during Phase 3 consolidation.
Blocks: .ladder .frame .step .terms .pull .duo .index-grid
.outcome .facts .tiers .objection
========================================================================== */
/* -------------------------------------------------------------- ladder --- */
/* three lines, each stepping further in, the gold marker growing as it goes */
.ladder {
display: flex;
flex-direction: column;
gap: var(--sp-6);
max-width: 68ch;
margin: 0 auto;
}
.ladder__line {
display: flex;
align-items: baseline;
gap: var(--sp-5);
font-family: var(--ff-display);
font-weight: 400;
font-size: var(--fs-3);
line-height: 1.32;
color: var(--c-white);
}
.ladder__mark {
flex: 0 0 auto;
height: 2px;
margin-bottom: .38em;
background: var(--c-gold);
opacity: .55;
}
.ladder__line--1 .ladder__mark { width: 26px; opacity: .4; }
.ladder__line--2 .ladder__mark { width: 52px; opacity: .7; }
.ladder__line--3 .ladder__mark { width: 84px; opacity: 1; }
.ladder__line--3 { font-weight: 500; }
/* --------------------------------------------------------------- frame --- */
/* a real product capture in a restrained browser chrome */
.frame {
position: relative;
margin: 0;
display: flex;
flex-direction: column;
background: var(--c-white);
border: var(--bw) solid var(--c-line);
border-radius: var(--r-lg);
box-shadow: var(--shadow-frame);
overflow: hidden;
transition: transform var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease),
border-color var(--dur-2) var(--ease);
}
.frame:hover {
transform: translateY(-6px);
border-color: rgba(176, 141, 42, .55);
box-shadow: var(--shadow-3);
}
.frame__bar {
display: flex;
align-items: center;
gap: var(--sp-4);
padding: .62rem .8rem;
background: var(--c-ground-2);
border-bottom: var(--bw) solid var(--c-line);
}
.frame__dots { display: flex; gap: 5px; flex: 0 0 auto; }
.frame__dot {
width: 7px; height: 7px;
border: var(--bw) solid var(--c-line-strong);
border-radius: 50%;
transition: border-color var(--dur-2) var(--ease);
}
.frame:hover .frame__dot { border-color: var(--c-gold-deep); }
.frame__tab {
padding: .18rem .6rem;
border: var(--bw) solid var(--c-line);
border-radius: var(--r-pill);
background: var(--c-white);
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--c-steel);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.frame:hover .frame__tab { color: var(--c-ink); border-color: var(--c-line-strong); }
.frame__img { width: 100%; height: auto; display: block; }
/* Wrap the frame in a narrower envelope when the surrounding section wants
the UI shot to feel like a supporting artefact rather than the hero.
Kept as a scoping wrapper so hover/shadow/borders on .frame stay intact. */
.frame-wrap { display: block; }
.frame-wrap--sm { max-width: 900px; margin-inline: auto; }
.frame--dark { background: var(--c-ink-soft); border-color: var(--c-line-dark); box-shadow: var(--shadow-dark-2); }
.frame--dark .frame__bar { background: var(--c-ink); border-bottom-color: var(--c-line-dark); }
.frame--dark .frame__dot { border-color: var(--c-line-dark-strong); }
.frame--dark .frame__tab {
background: transparent;
border-color: var(--c-line-dark);
color: rgba(237, 235, 232, .62);
}
.frame--dark:hover { border-color: rgba(212, 175, 55, .5); }
.frame--dark:hover .frame__tab { color: var(--c-gold); border-color: var(--c-line-dark-strong); }
.frame--dark:hover .frame__dot { border-color: var(--c-gold); }
/* the one genuine placeholder — Workflows has no capture yet */
.frame__empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--sp-5);
aspect-ratio: 16 / 7.2;
padding: var(--sp-6);
background: linear-gradient(180deg, rgba(27, 27, 26, .04), rgba(27, 27, 26, .015));
text-align: center;
}
.frame__empty-glyph { width: 46px; height: 46px; color: var(--c-mute); transition: color var(--dur-2) var(--ease); }
.frame:hover .frame__empty-glyph { color: var(--c-gold-deep); }
.frame__empty-label {
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--c-steel);
}
.frame__empty-note { margin: 0; max-width: 34ch; font-size: var(--fs-sm); color: var(--c-steel); }
.frame-caption { margin: var(--sp-5) 0 0; font-size: var(--fs-sm); color: var(--c-steel); }
.section--ink .frame-caption, .section--ink-deep .frame-caption { color: rgba(237, 235, 232, .56); }
/* ----------------------------------------------------------- step block -- */
.step {
display: grid;
grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
gap: var(--sp-8);
align-items: center;
}
.step--reverse .step__copy { order: 2; }
.step--reverse .step__art { order: 1; }
/* Keep the 60fr art column consistent across normal + reversed steps so all
four software images render at the same size. */
.step .step__copy { grid-column: 1; }
.step .step__art { grid-column: 2; }
.step--reverse .step__copy { grid-column: 2; }
.step--reverse .step__art { grid-column: 1; }
.step { grid-template-columns: minmax(0, 60fr) minmax(0, 40fr); }
.step:not(.step--reverse) { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); }
.step__copy { max-width: 48ch; }
.step__mark {
display: flex;
align-items: center;
gap: var(--sp-5);
margin-bottom: var(--sp-5);
}
.step__mark--center {
justify-content: center;
gap: var(--sp-6);
margin-bottom: var(--sp-6);
}
.step__mark--center .step__rule { display: none; }
.step__num {
font-family: var(--ff-display);
font-weight: 500;
font-size: clamp(3.2rem, 6vw, 4.6rem);
line-height: .8;
letter-spacing: -.03em;
color: var(--c-ink);
}
.section--ink .step__num, .section--ink-deep .step__num { color: var(--c-white); }
.step__rule {
flex: 1 1 auto;
height: 1px;
background: linear-gradient(90deg, var(--c-gold-mid), rgba(176, 141, 42, 0));
}
.section--ink .step__rule { background: linear-gradient(90deg, var(--c-gold), rgba(212, 175, 55, 0)); }
.step__glyph {
flex: 0 0 auto;
width: 46px; height: 46px;
color: var(--c-gold-deep);
}
.section--ink .step__glyph, .section--ink-deep .step__glyph { color: var(--c-gold); }
.step__label {
display: block;
margin-bottom: var(--sp-4);
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--c-gold-text);
}
.section--ink .step__label, .section--ink-deep .step__label { color: var(--c-gold); }
.step__title {
font-family: var(--ff-display);
font-weight: 500;
font-size: var(--fs-2);
line-height: 1.1;
letter-spacing: -.015em;
}
/* §1.1: tighter than the 16px above the step's own heading */
.step__body { margin: var(--sp-3) 0 0; font-size: var(--fs-4); line-height: 1.6; color: var(--c-steel); }
.section--ink .step__body, .section--ink-deep .step__body { color: rgba(237, 235, 232, .76); }
.step__actions { margin-top: var(--sp-6); }
/* --------------------------------------------------------------- terms --- */
/* what we need / what you get, as a hairline-split pair */
.terms {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
margin-top: var(--sp-6);
background: var(--c-line);
border: var(--bw) solid var(--c-line);
border-radius: var(--r-md);
overflow: hidden;
box-shadow: var(--shadow-1);
}
.term {
position: relative;
display: flex;
flex-direction: column;
gap: .6rem;
padding: var(--sp-5);
background: var(--c-white);
transition: background var(--dur-2) var(--ease);
}
.term:hover { background: var(--c-ground-2); }
.term::before {
content: "";
position: absolute;
left: 0; top: var(--sp-5);
width: 2px; height: 18px;
background: var(--c-gold-mid);
transition: height var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.term:hover::before { height: 46px; background: var(--c-gold); }
.term__label {
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--c-steel);
}
.term__text { margin: 0; font-size: var(--fs-base); color: var(--c-ink); }
.terms--dark { background: var(--c-line-dark); border-color: var(--c-line-dark); box-shadow: none; }
.terms--dark .term { background: var(--c-ink-soft); }
.terms--dark .term:hover { background: #2E2E2B; }
.terms--dark .term::before { background: var(--c-line-dark-strong); }
.terms--dark .term__label { color: rgba(237, 235, 232, .56); }
.terms--dark .term__text { color: rgba(237, 235, 232, .88); }
/* ----------------------------------------------------------- pull quote -- */
.pull { max-width: 38ch; margin: 0 auto; text-align: center; }
.pull__mark {
display: block;
margin: 0 auto var(--sp-4);
font-family: var(--ff-display);
font-size: clamp(3rem, 6vw, 4.4rem);
line-height: .6;
color: var(--c-gold);
}
.pull__text {
margin: 0;
font-family: var(--ff-display);
font-weight: 400;
font-style: italic;
font-size: clamp(1.6rem, 3.2vw, 2.5rem);
line-height: 1.24;
letter-spacing: -.015em;
color: var(--c-white);
}
.pull__rule { width: 56px; height: 2px; margin: var(--sp-7) auto var(--sp-4); background: var(--c-gold); }
/* Compact variant — quote sits inside a tighter section (Sam: “kind of the
size of the MVP section”). Text is smaller, and the attribution sits
directly under the quote so the whole block collapses vertically. */
.pull--sm { max-width: 44ch; margin-block: 0; }
.pull--sm .pull__text {
font-size: clamp(1.15rem, 1.7vw, 1.5rem);
line-height: 1.35;
}
/* MVP-sized quote — wider container feel with a large display-italic pull,
sized to read at MVP scale (matches the .outcome__split copy column). */
.pull--mvp {
max-width: 60ch;
margin: var(--sp-6) auto 0;
}
.pull--mvp .pull__text {
font-size: clamp(1.9rem, 3.6vw, 2.9rem);
line-height: 1.22;
}
.pull__cite {
display: block;
margin-top: var(--sp-3);
font-family: var(--ff-body);
font-style: normal;
font-size: var(--fs-sm);
letter-spacing: .02em;
color: var(--c-on-dark-2);
}
/* ----------------------------------------------------------------- duo --- */
.duo {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sp-7);
max-width: var(--maxw-mid);
margin: 0 auto;
}
.duo__col { display: flex; flex-direction: column; gap: var(--sp-4); }
.duo__lead {
font-family: var(--ff-display);
font-weight: 500;
font-size: var(--fs-3);
line-height: 1.24;
color: var(--c-white);
}
.duo__text { margin: 0; font-size: var(--fs-base); line-height: 1.68; color: rgba(237, 235, 232, .74); }
.duo__text strong { color: var(--c-white); }
/* ------------------------------------------------------------ index-grid - */
/* the four anchor links on What You Get */
.index-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--sp-5);
}
.index-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--sp-5);
padding: var(--sp-6) var(--sp-5) var(--sp-5);
background: var(--c-ink-soft);
border: var(--bw) solid var(--c-line-dark);
border-radius: var(--r-md);
transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.index-card:hover, .index-card:focus-visible {
transform: translateY(-5px);
border-color: var(--c-gold);
background: #2C2C29;
box-shadow: var(--shadow-dark-2);
}
.index-card__glyph {
/* Center the icon horizontally above the title, matching the pricing
commits pattern. Title + foot stay left-aligned so the reading axis is
preserved; the glyph reads as a badge, not a paragraph starter. */
align-self: center;
width: 46px; height: 46px;
color: rgba(212, 175, 55, .92);
transition: color var(--dur-2) var(--ease);
}
.index-card:hover .index-card__glyph { color: var(--c-gold); }
.index-card__title {
font-family: var(--ff-display);
font-weight: 500;
font-size: var(--fs-4);
line-height: 1.2;
color: var(--c-white);
}
.index-card__foot {
display: flex;
align-items: center;
justify-content: center;
gap: .45rem;
margin-top: auto;
padding-top: var(--sp-4);
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(237, 235, 232, .56);
transition: color var(--dur-2) var(--ease);
}
.index-card:hover .index-card__foot { color: var(--c-gold); }
.index-card__arrow { transition: transform var(--dur-2) var(--ease); }
.index-card:hover .index-card__arrow { transform: translateX(5px); }
/* ------------------------------------------------------------- outcome --- */
/* Widened from 26ch → 40ch so the outcome title reads on two lines
("Know your" / "business.") instead of three; the previous clamp forced
an awkward stacked headline that never lined up with the graphic. */
.outcome__head { max-width: 40ch; }
.outcome__head--center { max-width: 30ch; margin: 0 auto; text-align: center; }
.outcome__title {
font-family: var(--ff-display);
font-weight: 500;
font-size: var(--fs-1);
line-height: 1.06;
letter-spacing: -.018em;
}
.outcome__title em { font-style: italic; }
.outcome__lede {
margin: var(--sp-4) 0 0; /* §1.1 */
max-width: 42ch;
font-family: var(--ff-display);
font-weight: 400;
font-size: var(--fs-3);
line-height: 1.34;
color: var(--c-steel);
}
.outcome__head--center .outcome__lede { margin-left: auto; margin-right: auto; }
.section--ink .outcome__lede, .section--ink-deep .outcome__lede { color: rgba(237, 235, 232, .74); }
.outcome__split {
display: grid;
grid-template-columns: minmax(0, 6fr) minmax(0, 7fr);
gap: var(--sp-7);
/* Top-align columns. `center` left the shorter copy column floating
mid-graphic with a large dead band above the eyebrow. Start-align
puts the eyebrow flush with the top of the graphic frame. */
align-items: start;
}
.outcome__split .outcome__lede { max-width: none; }
.outcome__split--reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); }
.outcome__split--reverse .outcome__copy { order: 2; }
.outcome__split--reverse .outcome__art { order: 1; }
/* Stacked art column: two frames vertically inside the right column,
used when an outcome needs to show two artifacts (e.g. Outcome Three's
Insights + Initiatives) without falling back to a wide horizontal grid
that leaves a dead band beneath. Tight gap keeps the pair reading as one
unit. */
.outcome__art--stack { display: flex; flex-direction: column; gap: var(--sp-5); }
.outcome__close {
max-width: 30ch;
margin: var(--sp-7) auto 0;
text-align: center;
font-family: var(--ff-display);
font-weight: 500;
font-size: var(--fs-2);
line-height: 1.2;
letter-spacing: -.015em;
color: var(--c-ink);
}
/* -------------------------------------------------- Two Versions comparison
Home-page "before / after the first step" — sits inside the .frame chrome
the MVP outcomes use, so it reads as the same visual language, but the
payload is a 2-col before/after ledger instead of a screenshot. Kept to
three rows and body-lg text so the picture registers fast, not slowly.
Grid template on each row (not the container) so mobile can collapse each
row independently and repeat the Before/After label above each half. */
.tv-frame { padding: var(--sp-6); }
.tv-heads {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
column-gap: var(--sp-5);
padding-bottom: var(--sp-3);
border-bottom: var(--bw) solid var(--c-line);
margin-bottom: var(--sp-4);
}
.tv-rows {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
.tv-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
column-gap: var(--sp-5);
align-items: center;
padding-bottom: var(--sp-4);
border-bottom: var(--bw) solid var(--c-line);
}
.tv-row:last-child { border-bottom: 0; padding-bottom: 0; }
.tv-col-head {
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--c-mute);
}
.tv-col-head--after { color: var(--c-gold-text); }
.tv-row-before,
.tv-row-after {
margin: 0;
font-size: var(--fs-lg);
line-height: 1.35;
letter-spacing: -.005em;
}
.tv-row-before { color: var(--c-mute); font-weight: 400; }
.tv-row-after { color: var(--c-ink); font-weight: 500; }
.tv-row-label { display: none; }
.tv-arrow {
width: 20px;
height: 20px;
color: var(--c-gold-deep);
flex: 0 0 auto;
justify-self: center;
}
@media (max-width: 720px) {
.tv-heads { display: none; }
.tv-row {
grid-template-columns: 1fr;
row-gap: var(--sp-2);
}
.tv-arrow {
transform: rotate(90deg);
justify-self: start;
margin: var(--sp-1) 0;
}
.tv-row-label {
display: block;
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--c-mute);
margin-bottom: var(--sp-1);
}
.tv-row-label--after { color: var(--c-gold-text); }
}
/* ---------------------------------------------------------- Two Versions ---
Dark treatment for the "With and without Simple Genius" section: black
ground, gold-forward accents, frame chrome inverted so the ledger reads
like a spotlight. Scoped to .tv-section so the same tv-frame styles used
elsewhere stay untouched. */
.tv-section {
background: var(--c-ink-deep, #0B0B0A);
color: var(--c-white);
}
.tv-section .eyebrow { color: var(--c-gold); }
.tv-section .outcome__title { color: var(--c-white); }
.tv-section .outcome__title em { color: var(--c-gold); font-style: italic; }
.tv-section .tv-subhead {
color: rgba(255,255,255,.72);
margin-top: var(--sp-3);
max-width: 42ch;
}
.tv-section .tv-subhead em { color: var(--c-gold); font-style: italic; }
.tv-section .frame {
background: #141312;
border: var(--bw) solid rgba(212,175,55,.28);
box-shadow: 0 30px 80px -30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.03);
}
.tv-section .frame__bar {
background: #0F0E0D;
border-bottom: var(--bw) solid rgba(212,175,55,.22);
}
.tv-section .frame__dot { background: rgba(255,255,255,.18); }
.tv-section .frame__tab {
background: rgba(212,175,55,.12);
color: var(--c-gold);
border: var(--bw) solid rgba(212,175,55,.3);
}
/* keep the tab label bright gold on hover (dark bg, would go invisible otherwise) */
.tv-section .frame:hover .frame__tab {
color: var(--c-gold);
border-color: rgba(212,175,55,.55);
background: rgba(212,175,55,.18);
}
.tv-section .tv-heads { border-bottom-color: rgba(212,175,55,.22); }
.tv-section .tv-row { border-bottom-color: rgba(255,255,255,.08); }
.tv-section .tv-col-head { color: rgba(255,255,255,.55); }
.tv-section .tv-col-head--after { color: var(--c-gold); }
.tv-section .tv-row-before { color: rgba(255,255,255,.45); }
.tv-section .tv-row-after { color: var(--c-white); font-weight: 600; }
.tv-section .tv-arrow { color: var(--c-gold); }
.tv-section .frame::after { display: none; }
@media (max-width: 720px) {
.tv-section .tv-row-label { color: rgba(255,255,255,.45); }
.tv-section .tv-row-label--after { color: var(--c-gold); }
}
/* ---------------------------------------------------------- What You Get ---
Sam: "sections have so much dead space...reorient how that is laid out".
The .section default padding-block is sp-10 (up to 128px each side), which
stacks to ~256px of empty band between two outcomes. On this page the
outcome content is short bullets + one graphic, so the tall padding is
unearned. Scope the reduction to .page-wyg so other pages keep their air.
Tokens used: sp-8 = 4rem = 64px. Halves the between-section gap from ~200px
to ~100px while still giving each outcome enough breathing room.
----------------------------------------------------------------------------*/
.page-wyg .section { padding-block: var(--sp-8); }
.page-wyg .page-head { padding-block: var(--sp-8); }
/* The outcome close ("Most of what makes your business run...") already has
generous line-height and centered layout. Trim its top margin further so
it lives closer to the bullets that gave it context. */
.page-wyg .outcome__close { margin-top: var(--sp-6); }
.section--ink .outcome__close, .section--ink-deep .outcome__close { color: var(--c-white); }
.outcome__close em { font-style: italic; }
/* Sits UNDER the graphic in the right column, replacing the old frame
caption. Kills the dead band that used to live under "Six areas, approved
by you, locked." and gives the section its punchline where the eye already
is (finished absorbing the frame). Left-aligned to the frame edge; sized
as an editorial pull, not a second headline. */
.outcome__close--under {
max-width: none;
margin: var(--sp-6) 0 0;
text-align: left;
font-size: var(--fs-3);
line-height: 1.22;
}
.page-wyg .outcome__close--under { margin-top: var(--sp-6); }
/* --------------------------------------------------------------- facts --- */
/* replaces the banned numbered lists: gold mark + one tight line */
.facts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sp-5) var(--sp-7);
margin-top: var(--sp-7);
}
.facts--single { grid-template-columns: minmax(0, 1fr); }
.fact {
display: flex;
gap: var(--sp-4);
align-items: flex-start;
padding: var(--sp-4) 0;
border-top: var(--bw) solid var(--c-line);
transition: border-color var(--dur-2) var(--ease);
}
.fact:hover { border-top-color: var(--c-gold-mid); }
.section--ink .fact { border-top-color: var(--c-line-dark); }
.section--ink .fact:hover { border-top-color: var(--c-gold); }
.fact__mark {
flex: 0 0 auto;
width: 9px; height: 9px;
margin-top: .58em;
background: var(--c-gold-mid);
transform: rotate(45deg);
transition: background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.fact:hover .fact__mark { background: var(--c-gold); transform: rotate(45deg) scale(1.25); }
.section--ink .fact__mark { background: var(--c-gold); }
.fact__text { margin: 0; font-size: var(--fs-base); line-height: 1.6; color: var(--c-steel); }
.section--ink .fact__text, .section--ink-deep .fact__text { color: rgba(237, 235, 232, .78); }
.fact__text strong { color: var(--c-ink); font-weight: 600; }
.section--ink .fact__text strong { color: var(--c-white); }
/* --------------------------------------------------------------- tiers --- */
/* Owner 3 / Team 6 / Firm 10, as designed numerals */
.tiers {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--sp-5);
margin-top: var(--sp-7);
}
.tier {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: .35rem;
padding: var(--sp-5);
background: rgba(237, 235, 232, .04);
border: var(--bw) solid var(--c-line-dark);
border-radius: var(--r-md);
transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease),
background var(--dur-2) var(--ease);
}
.tier:hover { border-color: var(--c-gold); transform: translateY(-4px); background: rgba(237, 235, 232, .06); }
.tier__name {
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(237, 235, 232, .58);
transition: color var(--dur-2) var(--ease);
}
.tier:hover .tier__name { color: var(--c-gold); }
.tier__num {
font-family: var(--ff-display);
font-weight: 500;
font-size: clamp(2.3rem, 4vw, 3.1rem);
line-height: 1;
letter-spacing: -.02em;
color: var(--c-white);
}
.tier__unit { font-size: var(--fs-sm); color: rgba(237, 235, 232, .62); }
/* ----------------------------------------------------------- objection --- */
/* a two-column pair either shares a top baseline or is centred as a pair:
centring the panel against the answer put the answer 47px below the quote
it answers (REVISION-03 §1.1). */
.objection {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--sp-7);
align-items: start;
}
.objection__panel {
margin: 0;
padding: var(--sp-7) var(--sp-6);
background: var(--c-ink);
border-radius: var(--r-lg);
box-shadow: var(--shadow-2);
}
.objection__mark {
display: block;
font-family: var(--ff-display);
font-size: clamp(2.6rem, 5vw, 3.6rem);
line-height: .6;
color: var(--c-gold);
}
.objection__quote {
margin: var(--sp-5) 0 0;
font-family: var(--ff-display);
font-weight: 400;
font-style: italic;
font-size: var(--fs-3);
line-height: 1.3;
color: var(--c-white);
}
/* the answer's first line lands on the quote's first line, and its own parts
stay tight to each other (§1.1) */
.objection__answer { display: flex; flex-direction: column; gap: var(--sp-3); }
.objection__word {
font-family: var(--ff-display);
font-weight: 500;
font-size: clamp(2.2rem, 4.4vw, 3.2rem);
line-height: 1;
letter-spacing: -.02em;
color: var(--c-gold-deep);
}
.objection__text { margin: 0; font-size: var(--fs-4); line-height: 1.6; color: var(--c-steel); }
.objection__text strong { color: var(--c-ink); font-weight: 600; }
/* --- objection v2 (What You Get → pushback section) ------------------
Redesign per Sam: kill the dark quote card, treat the objection as an
editorial "call & response" with typography doing the work. A hairline
vertical divider separates the two columns; both columns sit on the
same top baseline so the eye reads left → right as one exchange.
Left column: a large italic pulled quote, framed by open/close curly
glyphs and attributed. Right column: gold eyebrow, big "Correct."
answer, tight prose.
---------------------------------------------------------------------- */
.objection--v2 {
grid-template-columns: minmax(0, 7fr) 1px minmax(0, 6fr);
gap: var(--sp-8);
align-items: start;
position: relative;
}
.objection--v2::before {
content: "";
grid-column: 2;
grid-row: 1;
align-self: stretch;
width: 1px;
background: var(--c-line);
}
.objection__call {
grid-column: 1;
margin: 0;
padding: 0;
background: transparent;
box-shadow: none;
border-radius: 0;
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
.objection__reply {
grid-column: 3;
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
.objection__eyebrow {
font-family: var(--ff-body);
font-size: var(--fs-sm);
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--c-steel);
}
.objection__eyebrow--gold { color: var(--c-gold-deep); }
.objection--v2 .objection__quote {
margin: 0;
font-family: var(--ff-display);
font-weight: 400;
font-style: italic;
font-size: clamp(1.75rem, 2.6vw, 2.4rem);
line-height: 1.28;
letter-spacing: -.005em;
color: var(--c-ink);
text-wrap: balance;
}
/* Belief variant: same weight as the old italic quote, but upright and
without opening/closing glyphs. Reads as a declaration ("we believe X"),
not a straw-man customer quote. */
.objection--v2 .objection__statement {
margin: 0;
font-family: var(--ff-display);
font-weight: 500;
font-size: clamp(1.9rem, 2.8vw, 2.6rem);
line-height: 1.22;
letter-spacing: -.015em;
color: var(--c-ink);
text-wrap: balance;
}
.objection__glyph {
color: var(--c-gold);
font-style: normal;
font-weight: 500;
margin-right: .08em;
}
.objection__glyph--close { margin-left: .04em; margin-right: 0; }
.objection__cite {
font-style: normal;
font-family: var(--ff-body);
font-size: var(--fs-sm);
color: var(--c-steel);
}
.objection--v2 .objection__word {
margin: 0;
font-family: var(--ff-display);
font-weight: 500;
font-size: clamp(2.4rem, 4.8vw, 3.4rem);
line-height: 1;
letter-spacing: -.02em;
color: var(--c-gold-deep);
}
.objection--v2 .objection__text {
margin: 0;
font-size: var(--fs-4);
line-height: 1.6;
color: var(--c-steel);
}
@media (max-width: 1080px) {
.objection--v2 {
grid-template-columns: minmax(0, 1fr);
gap: var(--sp-6);
}
.objection--v2::before { display: none; }
.objection__call, .objection__reply { grid-column: 1; }
.objection__reply {
padding-top: var(--sp-6);
border-top: 1px solid var(--c-line);
}
}
/* --- R3 corrections to the two process pages ---------------------------
Merged out of css/page-hiw-wyg.css. */
/* the head/lede split on what-you-get B6 started 24px low, because
.outcome__lede carries a top margin meant for the stacked case */
.split--head > .outcome__lede { margin-top: 0; }
.dgfig-head { margin-bottom: var(--sp-7); }
@media (max-width: 560px) {
.term { padding: var(--sp-4); }
}
/* ---------------------------------------------------------- responsive --- */
@media (max-width: 1080px) {
.step, .outcome__split, .outcome__split--reverse {
grid-template-columns: minmax(0, 1fr);
gap: var(--sp-7);
}
.step--reverse .step__copy, .outcome__split--reverse .outcome__copy { order: 1; }
.step--reverse .step__art, .outcome__split--reverse .outcome__art { order: 2; }
.step__copy { max-width: none; }
.index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.objection { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
}
@media (max-width: 760px) {
.terms, .duo, .facts { grid-template-columns: minmax(0, 1fr); }
.duo { gap: var(--sp-6); }
.facts { gap: 0; }
.index-grid { grid-template-columns: minmax(0, 1fr); }
.tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.tier { padding: var(--sp-4); }
.page-head__sub--serif { max-width: 26ch; }
.ladder__line { font-size: var(--fs-4); }
.ladder__line--3 .ladder__mark { width: 56px; }
.frame__tab { letter-spacing: .1em; padding: .16rem .46rem; }
}
@media (max-width: 420px) {
.tiers { grid-template-columns: minmax(0, 1fr); }
.step__num { font-size: 3rem; }
}
@media (prefers-reduced-motion: reduce) {
.frame:hover, .index-card:hover, .tier:hover { transform: none; }
}
/* ---------------------------------------------- anchor offset for deep links */
.section[id] { scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }
/* ------------------------- frame: soften the bottom edge of a cropped capture */
.frame::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 56px;
pointer-events: none;
background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .92));
}
.frame--dark::after { background: linear-gradient(180deg, rgba(18, 18, 17, 0), rgba(18, 18, 17, .9)); }
.frame[data-placeholder]::after { display: none; }
/* ==========================================================================
PAGE COMPONENTS (pricing, scan, results, about, talk, 404)
Merged in from the retired css/pages-b.css during Phase 3 consolidation.
The browser-window frame here is .winframe (chrome with a URL pill) — it is
a different component from .frame above (chrome with a tab label), which is
used on how-it-works and what-you-get. Both were authored in parallel under
the name .frame; .winframe was renamed to keep them apart.
Blocks: .page-head .lede-block .winframe .incl .ledger .work .deliver
.figure-moment .panes .moves .diag-panel .pair .bios
.calendar-plate .lost .dg
========================================================================== */
/* ------------------------------------------------- 1. page heads --------- */
.page-head {
position: relative;
padding: calc(var(--header-h) + var(--sp-8)) 0 var(--sp-8);
background: var(--c-ground);
}
.page-head--ink { background: var(--c-ink); color: rgba(237, 235, 232, .84); }
.page-head--ink .page-head__title { color: var(--c-white); }
.page-head--tall { padding-bottom: var(--sp-9); }
.page-head__inner { position: relative; z-index: 1; text-align: center; }
.page-head__inner--left { text-align: left; }
.page-head__title {
margin-top: var(--sp-5);
font-family: var(--ff-display);
font-weight: 500;
font-size: var(--fs-1);
line-height: 1.08;
letter-spacing: -.02em;
text-wrap: balance;
}
.page-head__title em { font-style: italic; }
/* pricing headline: match other page titles for hierarchy consistency */
.page-head__title--single {
max-width: none;
letter-spacing: -.022em;
}
.page-head__sub {
max-width: 58ch;
margin: var(--sp-4) auto 0; /* §1.1: tighter than the eyebrow above */
font-size: var(--fs-body);
line-height: 1.62;
color: var(--c-steel);
}
.page-head--ink .page-head__sub { color: rgba(237, 235, 232, .74); }
/* the serif lede variant, used where the page opens with a single short line
instead of a paragraph (how-it-works, what-you-get) */
.page-head__sub--serif {
max-width: 34ch;
font-family: var(--ff-display);
font-weight: 400;
font-size: var(--fs-3);
line-height: 1.34;
}
.page-head__actions { margin-top: var(--sp-7); justify-content: center; }
.page-head__inner--left .page-head__sub { margin-left: 0; }
.page-head__note { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--c-mute); }
.page-head--ink .page-head__note { color: rgba(237, 235, 232, .56); }
.page-head__glow {
position: absolute;
top: -12%;
left: 50%;
width: min(1100px, 100vw);
height: 620px;
transform: translateX(-50%);
background: radial-gradient(ellipse at 50% 40%, rgba(212, 175, 55, .16), rgba(212, 175, 55, 0) 62%);
pointer-events: none;
}
.lede-block { max-width: 62ch; margin: 0 auto; text-align: center; }
.lede-block--left { margin-left: 0; text-align: left; }
.lede-block p { font-size: var(--fs-body); line-height: 1.68; color: var(--c-steel); }
.section--ink .lede-block p, .section--ink-deep .lede-block p { color: rgba(237, 235, 232, .78); }
/* ------------------------------------------- 2. browser-chrome frame ----- */
.winframe {
position: relative;
overflow: hidden;
background: var(--c-white);
border: var(--bw) solid var(--c-line);
border-radius: var(--r-md);
box-shadow: var(--shadow-frame);
transition: transform var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease),
border-color var(--dur-2) var(--ease);
}
.winframe:hover { transform: translateY(-6px); border-color: rgba(176, 141, 42, .55); }
.winframe__bar {
display: flex;
align-items: center;
gap: .45rem;
padding: .62rem .8rem;
background: var(--c-ground-2);
border-bottom: var(--bw) solid var(--c-line);
}
.winframe__dot {
width: 9px; height: 9px;
border: 1.5px solid var(--c-line-strong);
border-radius: 50%;
transition: border-color var(--dur-2) var(--ease);
}
.winframe:hover .winframe__dot { border-color: var(--c-gold-mid); }
.winframe__url {
margin-left: .5rem;
padding: .2rem .8rem;
background: var(--c-white);
border: var(--bw) solid var(--c-line);
border-radius: var(--r-pill);
font-size: var(--fs-xs);
letter-spacing: .04em;
color: var(--c-mute);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.winframe__img { width: 100%; height: auto; display: block; }
.winframe--dark { background: var(--c-ink-soft); border-color: var(--c-line-dark); box-shadow: var(--shadow-dark-2); }
.winframe--dark .winframe__bar { background: #202020; border-bottom-color: var(--c-line-dark); }
.winframe--dark .winframe__dot { border-color: var(--c-line-dark-strong); }
.winframe--dark .winframe__url { background: var(--c-ink); border-color: var(--c-line-dark); color: rgba(237, 235, 232, .58); }
.winframe--dark:hover { border-color: rgba(212, 175, 55, .5); }
.winframe-wrap { display: flex; flex-direction: column; gap: var(--sp-5); }
.winframe-wrap--mid { max-width: 980px; margin: 0 auto; }
.winframe-caption { margin: 0; font-size: var(--fs-sm); color: var(--c-mute); text-align: center; }
.section--ink .winframe-caption, .section--ink-deep .winframe-caption { color: rgba(237, 235, 232, .56); }
.winframe-caption--left { text-align: left; }
/* frame that lifts out of the band above it */
.winframe-wrap--raise { margin-top: calc(var(--sp-9) * -1); }
/* ------------------------------------------------------- 3. pricing ----- */
.incl {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
background: var(--c-line);
border: var(--bw) solid var(--c-line);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-1);
}
.incl__item {
position: relative;
display: flex;
flex-direction: column;
align-items: center; /* center the icon frame + text stack */
text-align: center;
gap: var(--sp-5);
padding: var(--sp-6) var(--sp-6) var(--sp-7);
background: var(--c-white);
transition: background var(--dur-2) var(--ease);
}
.incl__item:hover { background: #FCFBFA; transform: translateY(-3px); }
.incl__item { transition: background .25s ease, transform .25s ease; }
/* The icon frame follows the pledge-frame outline standard Sam locked in:
rounded square, thin gold border, cream fill, dark ink stroke inside. */
.incl__frame {
color: var(--c-ink); /* the svg inside inherits currentColor */
transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.incl__item:hover .incl__frame { transform: translateY(-2px); }
.incl__glyph {
width: var(--sp-6); height: var(--sp-6);
color: currentColor;
}
.incl__title {
font-family: var(--ff-display);
font-weight: 500;
font-size: var(--fs-4);
line-height: 1.24;
text-wrap: balance;
}
.incl__text { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--c-steel); max-width: 32ch; }
/* The animated gold rule sits centered under the text stack now. */
.incl__rule {
position: absolute;
left: 50%; bottom: var(--sp-6);
width: 0; height: 2px;
background: var(--c-gold);
transform: translateX(-50%);
transition: width 320ms var(--ease);
}
.incl__item:hover .incl__rule { width: 62px; }
/* metering ledger — dark band, three tier columns */
.ledger { width: 100%; border-collapse: collapse; text-align: left; font-size: var(--fs-base); }
.ledger caption {
margin-bottom: var(--sp-5);
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--c-gold);
text-align: left;
}
.ledger th, .ledger td {
padding: var(--sp-4) var(--sp-4);
border-bottom: var(--bw) solid var(--c-line-dark);
vertical-align: top;
}
.ledger thead th { border-bottom-color: var(--c-line-dark-strong); }
.ledger__tier { display: flex; flex-direction: column; gap: .2rem; }
.ledger__tier-name {
font-family: var(--ff-display);
font-weight: 500;
font-size: var(--fs-4);
color: var(--c-white);
}
.ledger__tier-price { font-size: var(--fs-sm); font-weight: 400; color: rgba(237, 235, 232, .6); }
.ledger tbody tr { transition: background var(--dur-2) var(--ease); }
.ledger tbody tr:hover { background: rgba(237, 235, 232, .05); }
.ledger th[scope="row"] { font-weight: 400; color: rgba(237, 235, 232, .66); }
.ledger td { color: var(--c-white); }
.ledger .is-flag { color: var(--c-gold); }
/* the featured size reads through the table too */
.ledger thead th:nth-child(3),
.ledger tbody td:nth-child(3) { background: rgba(212, 175, 55, .05); }
/* R3: the guided-setup note keeps the scale step .block-after--sm now
defines, so nothing on this page states a gap inline. */
/* ------------------------------------------------------------ 4. scan --- */
.work {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: var(--sp-8);
align-items: start;
}
.work--reverse { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.aside-stick { position: sticky; top: calc(var(--header-h) + var(--sp-6)); }
.deliver { border-top: var(--bw) solid var(--c-line); }
.deliver__item {
display: flex;
gap: var(--sp-5);
align-items: flex-start;
padding: var(--sp-5) 0;
border-bottom: var(--bw) solid var(--c-line);
transition: padding-left var(--dur-2) var(--ease);
}
.deliver__item:hover { padding-left: var(--sp-2); }
.deliver__glyph {
flex: 0 0 auto;
width: 40px; height: 40px;
color: var(--c-ink);
transition: color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.deliver__item:hover .deliver__glyph { color: var(--c-gold-deep); transform: translateY(-2px); }
.deliver__text { margin: 0; font-size: var(--fs-base); line-height: 1.56; color: var(--c-steel); }
.deliver__text strong { color: var(--c-ink); font-weight: 600; }
.deliver--dark { border-top-color: var(--c-line-dark); }
.deliver--dark .deliver__item { border-bottom-color: var(--c-line-dark); }
.deliver--dark .deliver__glyph { color: rgba(237, 235, 232, .8); }
.deliver--dark .deliver__item:hover .deliver__glyph { color: var(--c-gold); }
.deliver--dark .deliver__text { color: rgba(237, 235, 232, .74); }
.deliver--dark .deliver__text strong { color: var(--c-white); }
.form-head { margin-bottom: var(--sp-6); }
.form-head__title { font-family: var(--ff-display); font-weight: 500; font-size: var(--fs-2); }
.form-head__text { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--c-steel); }
/* --- R3 scan: the answer register and the chart pair -------------------
Merged out of css/page-pricing-scan.css. The register replaces five
decorative glyphs with the thing the reader wants: the five answers,
numbered, equal width, each rule exactly as long as its row. */
.ans {
margin: var(--sp-4) 0 0;
padding: 0;
list-style: none;
border-top: var(--bw) solid var(--c-line);
}
.ans__item {
display: flex;
align-items: baseline;
gap: var(--sp-4);
padding: var(--sp-4) 0;
border-bottom: var(--bw) solid var(--c-line);
}
.ans__num {
flex: 0 0 2.25rem;
font-family: var(--ff-sans);
font-size: var(--fs-xs);
font-weight: 600;
font-variant-numeric: tabular-nums;
letter-spacing: var(--ls-label);
color: var(--c-gold-text);
}
.ans__text {
font-size: var(--fs-base);
line-height: 1.5;
color: var(--c-steel);
}
.ans__text strong { color: var(--c-ink); font-weight: 600; }
.ans + .footnote { display: block; margin-top: var(--sp-5); }
/* two 248-unit boards side by side inside .report, each clamped to its own
artboard, so the column can be wider than the drawing without breaking the
1:1 contract. Below 720 the pair stacks. */
.rcharts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sp-6);
margin-top: var(--sp-5);
}
.rchart { margin: 0; }
.rchart__cap {
margin-top: var(--sp-3);
font-size: var(--fs-xs);
line-height: 1.5;
color: var(--c-mute);
text-align: center;
}
@media (max-width: 720px) {
.rcharts { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
}
/* the card gives its inline padding back on a phone so the 248-unit boards
land 1:1 at 320 as well (284 container - 32 = 252 available) */
@media (max-width: 560px) {
.report { padding: var(--sp-5) var(--sp-4); }
}
/* --------------------------------------------------------- 5. results --- */
.figure-moment { text-align: center; }
.figure__num {
display: block;
font-family: var(--ff-display);
font-weight: 500;
font-size: clamp(4rem, 11vw, 8.5rem);
line-height: .92;
letter-spacing: -.03em;
color: var(--c-gold);
}
.figure__num-of {
font-family: var(--ff-sans);
font-size: .17em;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
vertical-align: .9em;
margin-left: .5em;
color: rgba(237, 235, 232, .6);
}
.figure__legend {
max-width: 30ch;
margin: var(--sp-5) auto 0;
font-family: var(--ff-display);
font-weight: 500;
font-size: var(--fs-3);
line-height: 1.3;
color: var(--c-white);
}
.figure__note { max-width: 56ch; margin: var(--sp-5) auto 0; font-size: var(--fs-sm); color: rgba(237, 235, 232, .58); }
.panes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
.pane {
display: flex;
flex-direction: column;
gap: var(--sp-5);
padding: var(--sp-7) var(--sp-6);
background: var(--c-white);
border: var(--bw) solid var(--c-line);
border-radius: var(--r-lg);
box-shadow: var(--shadow-1);
transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.pane:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); border-color: rgba(176, 141, 42, .5); }
.pane--quiet { background: var(--c-ground-2); }
.pane__head { display: flex; align-items: center; gap: var(--sp-4); }
.pane__glyph { width: 40px; height: 40px; flex: 0 0 auto; color: var(--c-ink); }
.pane--quiet .pane__glyph { color: var(--c-steel); }
.pane__title { font-family: var(--ff-display); font-weight: 500; font-size: var(--fs-3); }
.pane__list { display: flex; flex-direction: column; }
.pane__item {
padding: var(--sp-4) 0 var(--sp-4) var(--sp-5);
border-top: var(--bw) solid var(--c-line);
font-size: var(--fs-base);
line-height: 1.6;
color: var(--c-steel);
position: relative;
}
.pane__item::before {
content: "";
position: absolute;
top: calc(var(--sp-4) + .55em);
left: 0;
width: 8px; height: 1px;
background: var(--c-gold-mid);
}
.pane--quiet .pane__item::before { background: var(--c-line-strong); }
/* ranked moves — deliberate large serif numerals, not small grey labels */
.moves { display: flex; flex-direction: column; gap: var(--sp-5); }
.move {
display: grid;
grid-template-columns: 96px minmax(0, 1fr);
gap: var(--sp-5);
align-items: start;
padding: var(--sp-6);
background: var(--c-white);
border: var(--bw) solid var(--c-line);
border-radius: var(--r-lg);
box-shadow: var(--shadow-1);
transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.move:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); border-color: rgba(176, 141, 42, .55); }
.move__num {
font-family: var(--ff-display);
font-weight: 500;
font-size: clamp(2.6rem, 5vw, 3.9rem);
line-height: .86;
letter-spacing: -.03em;
color: var(--c-gold-mid);
transition: color var(--dur-2) var(--ease);
}
.move:hover .move__num { color: var(--c-gold-deep); }
.move__body { display: flex; flex-direction: column; gap: .6rem; }
.move__title { font-family: var(--ff-display); font-weight: 500; font-size: var(--fs-3); line-height: 1.26; }
.move__text { margin: 0; font-size: var(--fs-base); color: var(--c-steel); }
.move__rule { width: 0; height: 2px; background: var(--c-gold); transition: width 320ms var(--ease); }
.move:hover .move__rule { width: 64px; }
/* --- R3 results + talk: the two illustration panels give back their inline
padding on a phone, so the portrait boards land 1:1 at 320 as well.
Merged out of css/page-results-talk.css. The results plate is also a
.diag-panel--wide, which sets its padding later in this block, so the phone
override has to carry both classes or it loses the cascade and the board
renders 186px inside a 48px inset. */
@media (max-width: 560px) {
.diag-panel--wide.rt-plate { padding: var(--sp-6) var(--sp-4) var(--sp-5); }
.rt-cal { padding: var(--sp-5) var(--sp-4); }
}
/* ----------------------------------------------------------- 6. about --- */
.diag-panel {
padding: var(--sp-7) var(--sp-6);
background: rgba(237, 235, 232, .03);
border: var(--bw) solid var(--c-line-dark);
border-radius: var(--r-lg);
transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.diag-panel:hover { border-color: var(--c-line-dark-strong); background: rgba(237, 235, 232, .05); }
.diag-panel--light { background: var(--c-white); border-color: var(--c-line); box-shadow: var(--shadow-1); }
.diag-panel--light:hover { border-color: rgba(176, 141, 42, .5); box-shadow: var(--shadow-3); }
.diag-panel__label {
display: block;
margin-bottom: var(--sp-5);
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--c-gold);
}
.diag-panel--light .diag-panel__label { color: var(--c-gold-text); }
.diag-panel__art { width: 100%; height: auto; }
.diag-panel__caption {
margin: var(--sp-5) 0 0;
font-family: var(--ff-display);
font-size: var(--fs-4);
line-height: 1.4;
color: rgba(237, 235, 232, .82);
}
.diag-panel--light .diag-panel__caption { color: var(--c-ink); }
.diag-panel--wide { padding: var(--sp-7) var(--sp-7) var(--sp-6); text-align: center; }
/* the artboard clamp wins: a .dg inside this panel is clamped to its own
--dg-art (R1), and the panel only supplies the fallback for a plain
non-enrolled figure. */
.diag-panel--wide .diag-panel__art { max-width: var(--dg-art, 880px); margin: 0 auto; }
.diag-panel--wide .diag-panel__caption { max-width: 62ch; margin-left: auto; margin-right: auto; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
.pair__card {
display: flex;
flex-direction: column;
gap: var(--sp-5);
padding: var(--sp-6);
background: var(--c-ground-2);
border: var(--bw) solid var(--c-line);
border-radius: var(--r-lg);
transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.pair__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
.pair__card--held { background: var(--c-white); border-color: rgba(176, 141, 42, .4); }
.pair__card--held:hover { border-color: var(--c-gold); }
.pair__label {
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--c-mute);
}
.pair__card--held .pair__label { color: var(--c-gold-text); }
.pair__art { width: 100%; height: auto; }
.pair__text { margin: 0; font-size: var(--fs-base); line-height: 1.6; color: var(--c-steel); }
.bios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
.bio {
display: grid;
grid-template-columns: 168px minmax(0, 1fr);
gap: var(--sp-6);
align-items: start;
padding: var(--sp-6);
background: var(--c-white);
border: var(--bw) solid var(--c-line);
border-radius: var(--r-lg);
box-shadow: var(--shadow-1);
transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.bio:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); border-color: rgba(176, 141, 42, .5); }
.bio__plate {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--sp-4);
aspect-ratio: 4 / 5;
background: var(--c-ink);
border-radius: var(--r-md);
overflow: hidden;
}
.bio__initials {
font-family: var(--ff-display);
font-weight: 500;
font-size: clamp(2.3rem, 4.4vw, 3rem);
letter-spacing: .06em;
color: var(--c-white);
}
.bio__plate-rule { width: 38px; height: 2px; background: var(--c-gold); }
.bio__plate-mark { width: 34px; height: 34px; color: rgba(237, 235, 232, .5); }
.bio__body { display: flex; flex-direction: column; gap: .7rem; }
.bio__role {
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--c-gold-text);
}
.bio__name { font-family: var(--ff-display); font-weight: 500; font-size: var(--fs-3); }
.bio__text { margin: 0; font-size: var(--fs-base); line-height: 1.62; color: var(--c-steel); }
/* --- R3 about: the reflective register --------------------------------
Merged out of css/page-about.css. About is the one page allowed to read
longer, so it gets two devices no other page has: an attributed line, and a
single pulled sentence that carries a section on its own. */
.about-h { margin-bottom: var(--sp-4); } /* §1.1, the site-wide pair */
.about-pull { margin-top: var(--sp-7); }
.about-attrib {
margin: var(--sp-4) 0 0;
font-family: var(--ff-sans);
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--c-mute);
}
.section--ink .about-attrib { color: var(--c-on-dark-2); }
/* §3.5, the drift / held pair: the verdict line under the two cards is one
sentence, so it sits on its own measure and keeps the gap on the scale. */
.about-verdict { margin-top: var(--sp-8); max-width: 46ch; margin-inline: auto; }
.about-actions { margin-top: var(--sp-6); }
.about-actions--center { margin-top: var(--sp-7); }
/* ------------------------------------------------------------ 7. talk --- */
.calendar-plate {
display: flex;
flex-direction: column;
gap: var(--sp-5);
padding: var(--sp-6);
background: var(--c-white);
border: var(--bw) solid var(--c-line);
border-radius: var(--r-lg);
box-shadow: var(--shadow-1);
transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.calendar-plate:hover { border-color: rgba(176, 141, 42, .5); box-shadow: var(--shadow-3); }
.calendar-plate__label {
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--c-gold-text);
}
.calendar-plate__art { width: 100%; height: auto; }
.calendar-plate__note { margin: 0; font-size: var(--fs-sm); color: var(--c-mute); }
/* three-up beats row (call agenda) — shares .beat styling from site.css */
/* NB no grid-template-columns here: .beats is a 12-track grid and
.beats--three .beat spans 4 of them (block 09). Re-declaring three tracks
made each beat span 4 of 3, so every card took a row of its own. */
.beats--three .beat { padding: var(--sp-6) var(--sp-5) var(--sp-7); }
.beats--three .beat__text { font-size: var(--fs-4); max-width: 24ch; }
/* --- R3 talk: the booking pair ----------------------------------------
The calendar column is the shorter of the two and carries the drawing, so
the pair is centred together — never one centred and the other ended
(§1.1). Below 1080 .aside-stick goes static and the pair stacks, so the
rule is scoped to the two-column case. */
@media (min-width: 1081px) {
.rt-book { align-items: center; }
}
/* ------------------------------------------------------------- 8. 404 --- */
/* larger card glyph than the 30px .card__icon default */
.card__glyph {
width: 44px; height: 44px;
color: var(--c-ink);
transition: color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.card:hover .card__glyph { color: var(--c-gold-deep); transform: translateY(-2px); }
.lost { text-align: center; }
.lost__mark { width: 120px; height: 120px; margin: 0 auto var(--sp-6); color: var(--c-ink); }
.lost__code {
display: block;
font-family: var(--ff-display);
font-weight: 500;
font-size: clamp(3.4rem, 10vw, 6.5rem);
line-height: 1;
letter-spacing: .02em;
color: var(--c-line-strong);
}
/* --------------------------------------- 9. shared diagram primitives --- */
/* SUPERSEDED by block 15 (the C standard). The pre-R3 primitives .d-node /
.d-line / .d-line--faint / .d-fill / .d-strata / .d-text are now defined
once, in block 15.9, against the C tokens — three weights, three tints and
a 15px type floor are no longer the system. Nothing may be re-declared
here: a value in this block would silently outrank nothing and confuse
everything. Only the scroll-reveal draw-in stays, below.
The blanket `.dg path, .dg rect, .dg circle { fill: none }` that used to sit
here is deleted on purpose: at (0,1,1) it outranked inheritance and stripped
the fill from every unclassed child of a classed , which is why talk.html's
gold `` calendar cells rendered as empty outlines. Fill is
now declared per class in block 15, and a group's children inherit it. */
/* strands draw in when the panel scrolls into view */
/* strokes are visible by default; they only draw in when the diagram is
wrapped in a .reveal block, so an un-observed diagram is never blank */
html:not(.no-js) .reveal .dg .d-draw { stroke-dasharray: var(--dg-draw); stroke-dashoffset: var(--dg-draw); }
html:not(.no-js) .reveal.is-visible .dg .d-draw { animation: dg-draw 1000ms var(--ease) forwards; }
@keyframes dg-draw { to { stroke-dashoffset: 0; } }
.no-anim .dg .d-draw { stroke-dasharray: none; stroke-dashoffset: 0; }
.no-js .dg .d-draw { stroke-dasharray: none; stroke-dashoffset: 0; }
/* ---------------------------------------------------------- responsive --- */
@media (max-width: 1080px) {
.work, .work--reverse { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
.aside-stick { position: static; }
.incl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bios { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1000px) {
.beats--three { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
.panes, .pair { grid-template-columns: minmax(0, 1fr); }
.winframe-wrap--raise { margin-top: calc(var(--sp-8) * -1); }
}
@media (max-width: 760px) {
.incl { grid-template-columns: minmax(0, 1fr); }
.move { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.bio { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
.bio__plate { aspect-ratio: 1 / 1; max-width: 168px; }
.ledger { font-size: var(--fs-sm); }
.ledger th, .ledger td { padding: .7rem .6rem; }
.table-scroll .ledger { min-width: 640px; }
.winframe-wrap--raise { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
.winframe:hover, .pane:hover, .move:hover, .bio:hover, .pair__card:hover,
.calendar-plate:hover, .diag-panel:hover { transform: none; }
html:not(.no-js) .dg .d-draw { stroke-dasharray: none; stroke-dashoffset: 0; }
}
/* card hover warms to gold on Phase-2B pages */
.card:hover { border-color: rgba(176, 141, 42, .5); }
/* --------------------------------------------------------------------------
14 — ELEVATION MODIFIERS added with the homepage rewrite
Left-set and centred variants needed by the grid archetypes.
-------------------------------------------------------------------------- */
.rule-gold--left { margin-inline: 0; }
.display--center { text-align: center; margin-left: 0; }
.eyebrow--center { text-align: center; }
.statement--left { max-width: 34ch; }
/* ==========================================================================
15 — ILLUSTRATION SYSTEM: THE C STANDARD ("dg" = drawn graphic)
---------------------------------------------------------------------------
APPROVED: variant C, panel 4 of qa/r3/refine-variants.png
("C — B PLUS ONE FLAT TINT"), founder review 6 Aug 2026.
Founder, verbatim: "C. Now propagate this throughout. And. Not. Exactly
like this, but what you learned about the styling, at least, for the other
graphics too." So: propagate the PRINCIPLES below. Never clone C's
composition — three boxes, three legs, a rule and a bar is C's argument,
not a template.
THE ORIGINAL'S CORE DEFECT was a unit/pixel mismatch: 10.5 type units in a
520-unit artboard rendered 542px wide, i.e. 10.94 real pixels. Everything
that read as "crude" or "Microsoft Paint" followed from that one mistake.
Fix the artboard and the drawing gets its craft back.
THE NINE HARD RULES (DESIGN-SYSTEM.md §9A, one token each)
1 1:1 artboard viewBox width == rendered CSS width --dg-art / --dg-a
2 16px label floor primary labels --dg-fs-label
12.5px captions annotation, wider tracking --dg-fs-caption
3 two weights only 2.4 structure / 1 hairline --dg-sw-structure
--dg-sw-hair
4 one flat tint ink at 3.5%, dead flat --dg-tint
5 one radius 2 units, everywhere --dg-r
6 one rhythm even vertical bands --dg-rhythm
7 connectors land exactly on the element they point to (geometry)
8 gold once, and its label is the LARGEST text --dg-fs-key
9 dark ground + mobile tier declared .dg--dark / 15.6
BANNED, permanently. Rebuilt once, rejected outright by the founder:
"the after layered planes are terrible, DO NOT go that direction."
- drop shadow, cast shadow, box-shadow, feDropShadow, feGaussianBlur
- gradients of any kind inside a .dg
- risers / extrusion / thickness faces / bevel / emboss / occlusion
- glow, "pop", implied light source
- staggered or z-stacked overlap used to imply dimension
- any new colour
-------------------------------------------------------------------------- */
/* --- 15.0 THE 1:1 ARTBOARD CONTRACT ---------------------------------------
1 artboard unit == 1 rendered CSS pixel. Set the viewBox width to the
illustration's desktop render width and declare it with a .dg--a* class;
the class clamps the rendered width to the artboard so a unit can never be
wider than a pixel, which is the failure mode that produced 10.94px labels.
If an artboard cannot yet be redrawn to its render width, declare the ratio
instead — --dg-a: viewBoxWidth ÷ renderWidth — and every size in the block
below compensates. A declared ratio is a debt, not a solution: fix the
artboard. Check both with: node qa/r3/c-standard.js all 1440
-------------------------------------------------------------------------- */
.dg {
display: block;
width: 100%;
max-width: var(--dg-art);
height: auto;
overflow: visible;
margin-inline: auto;
--dg-k: calc(var(--dg-a) * var(--dg-m));
}
/* the site's four container widths at the 1440 reference breakpoint */
.dg--a388 { --dg-art: 388px; --dg-a: 1; } /* half-column pair card */
.dg--a424 { --dg-art: 424px; --dg-a: 1; } /* inset plate */
.dg--a542 { --dg-art: 542px; --dg-a: 1; } /* full-column panel / aside */
.dg--a880 { --dg-art: 880px; --dg-a: 1; } /* wide two-pane band */
/* the R3 artboards: every drawing on the site is now declared 1:1, desktop
tier and phone tier alike. A phone board's unit count is never wider than
the slot it sits in at a 320 viewport, so one unit stays one pixel at 320,
375 and 414 alike. */
.dg--a216 { --dg-art: 216px; --dg-a: 1; } /* about, results + talk phone
tier: the widest portrait board
that is still 1:1 at a 320
viewport (R1) — the 240u/272u
drafts rendered 186-218px there
and dropped their labels below
the 18px phone floor */
.dg--a248 { --dg-art: 248px; --dg-a: 1; } /* scan charts, one tier */
.dg--a252 { --dg-art: 252px; --dg-a: 1; } /* homepage context panes */
.dg--a280 { --dg-art: 280px; --dg-a: 1; } /* how-it-works / what-you-get
/ pricing, phone tier */
.dg--a456 { --dg-art: 456px; --dg-a: 1; } /* pricing aside, desktop tier */
/* a board that shares the left edge of the heading above it instead of
centring inside its container (§1: alignment) */
.dg--flush { margin-inline: 0; }
/* the drawing figure: the artboard, then one line of caption. The caption is
the drawing's argument in words, so the page still reads with images or JS
off. No label above it — the section head already names it. */
.dgfig { margin: 0; }
/* figure's UA margin is dropped above, which also drops the margin
.block-after sets on it — put that one back rather than raise specificity */
.dgfig.block-after { margin-top: var(--sp-9); }
.dgfig--wide { max-width: 880px; margin-inline: auto; }
/* a drawing band: the heading, the drawing and the line that closes the
argument all share the artboard's measure, so the head starts exactly where
the drawing starts. Without it .container--mid is 940 at 1440 and an 880
board centres 30px inside its own heading. */
.dgband { max-width: 880px; }
.dgfig__cap {
max-width: 58ch;
margin: var(--sp-5) auto 0;
text-align: center;
font-size: var(--fs-sm);
line-height: 1.55;
color: var(--c-steel);
}
.section--ink .dgfig__cap,
.section--ink-deep .dgfig__cap { color: rgba(237, 235, 232, .62); }
/* declared-ratio escape hatch, in use only until an artboard is redrawn */
.dg--k12 { --dg-a: 1.2; }
.dg--k14 { --dg-a: 1.4; }
.dg--k16 { --dg-a: 1.6; }
.dg--k20 { --dg-a: 2; }
/* --- 15.1 containers: one flat tint, one structural weight ---------------
Rule 4. A primary container is a filled object, not an empty outline. The
tint is a single dead-flat value — an alpha step of --c-ink — so it adds
substance without adding a hue, a ramp or an edge treatment. */
.dg .d-box { /* primary container */
fill: var(--dg-tint);
stroke: var(--dg-edge);
stroke-width: calc(var(--dg-sw-structure) * var(--dg-k));
stroke-linejoin: miter;
rx: calc(var(--dg-r) * var(--dg-k)); /* rule 5: the one radius */
}
/* THE emphasis element — one per drawing, and the only gold shape in it.
§7 holds: gold is structure, so it is a contour and a flat wash, never a
glow. Its label takes .d-key, which is the largest text in the drawing. */
.dg .d-box--key,
.dg .d-emph {
fill: var(--dg-tint-key);
stroke: var(--c-gold-mid);
stroke-width: calc(var(--dg-sw-structure) * var(--dg-k));
rx: calc(var(--dg-r) * var(--dg-k));
}
.dg .d-box--ghost { /* absent / unverified */
fill: none;
stroke: var(--dg-hair);
stroke-width: calc(var(--dg-sw-hair) * var(--dg-k));
stroke-dasharray: calc(var(--dg-dash) * var(--dg-k)) calc(var(--dg-dash) * var(--dg-k));
}
.dg .d-band { /* a reference field / zone */
fill: var(--dg-tint);
stroke: var(--dg-hair);
stroke-width: calc(var(--dg-sw-hair) * var(--dg-k));
rx: 0;
}
/* superseded container variants. They now resolve to the one tint and the
two weights, so an un-migrated drawing cannot break the standard. */
.dg .d-box--sub,
.dg .d-box--deep { fill: var(--dg-tint); }
/* 45° hatch: a drafting convention for an area that is EMPTY or UNVERIFIED.
Flat line pattern, never a texture and never decoration. */
.dg .d-hatch { fill: url(#dgHatch); stroke: none; }
/* A label plate: the ground itself, interrupting a hatch so a note can sit on
clean paper. It must register exactly with a division of the drawing. */
.dg .d-plate { fill: var(--dg-plate); stroke: none; }
/* every rect in an illustration takes the one radius */
.dg rect { rx: calc(var(--dg-r) * var(--dg-k)); }
/* --- 15.2 line hierarchy: TWO weights, and only two ----------------------
Rule 3. Structure at 2.4 is an object. A true 1px hairline is a
relationship. There is no third weight — a third weight is what made the
old drawings read as noise rather than hierarchy. */
.dg .d-structure { /* an object's contour */
fill: none; stroke: var(--dg-edge);
stroke-width: calc(var(--dg-sw-structure) * var(--dg-k));
stroke-linecap: butt; stroke-linejoin: miter;
}
.dg .d-hair,
.dg .d-leg, /* a connector leg */
.dg .d-rule { /* a reference rule */
fill: none; stroke: var(--dg-hair);
stroke-width: calc(var(--dg-sw-hair) * var(--dg-k));
stroke-linecap: butt;
}
/* the fine dash rhythm, 4.5 on / 4.5 off. Rule 7: a leg terminates exactly
on the element it points to — a leg that stops short is a defect. */
.dg .d-leg,
.dg .d-rule,
.dg .d-dash {
stroke-dasharray: calc(var(--dg-dash) * var(--dg-k)) calc(var(--dg-dash) * var(--dg-k));
}
.dg .d-arrow { marker-end: url(#dgArrow); }
.dg .d-arrow--both { marker-start: url(#dgArrow); marker-end: url(#dgArrow); }
.dg .d-keyline { /* gold stays structural */
fill: none; stroke: var(--c-gold-mid);
stroke-width: calc(var(--dg-sw-structure) * var(--dg-k));
stroke-linecap: butt;
}
/* superseded middle weight: resolves to the hairline. */
.dg .d-line {
fill: none; stroke: var(--dg-hair);
stroke-width: calc(var(--dg-sw-hair) * var(--dg-k));
stroke-linecap: butt;
}
/* --- 15.3 drafting detail — sparing, precise, never decorative ----------- */
.dg .d-dim {
fill: none; stroke: var(--dg-hair);
stroke-width: calc(var(--dg-sw-hair) * var(--dg-k));
marker-start: url(#dgTick); marker-end: url(#dgTick);
}
.dg .d-tick,
.dg .d-reg {
fill: none; stroke: var(--dg-hair);
stroke-width: calc(var(--dg-sw-hair) * var(--dg-k)); stroke-linecap: butt;
}
.dg .d-point { marker-end: url(#dgNode); }
.dg .d-dot,
.dg .d-node-core, .ctx__art .d-node-core { fill: var(--dg-edge); stroke: none; }
.dg--dark .d-node-core, .ctx__art .d-node-core { fill: var(--c-on-dark); }
/* --- 15.4 type inside an illustration ------------------------------------
Rule 2 and rule 8. Three roles, one order that never inverts:
.d-key 18px the gold emphasis label — the LARGEST text in the drawing
.d-label 16px primary label — the floor; nothing primary goes below it
.d-caption 12.5px annotation, wider tracking, lighter weight
A gold label smaller than the labels above it is backwards and is a defect.
Rule: baseline = band centre + (--dg-cap-shift × label size), so the label
is optically centred on its cap height, not on the box's geometric centre.
Where the y attribute must stay on the geometric centre, add .d-optical. */
.dg .d-key, .dg .d-label, .dg .d-caption, .dg .d-note {
font-family: var(--ff-sans);
text-transform: uppercase;
fill: var(--c-ink);
stroke: none;
}
.dg .d-key {
font-size: calc(var(--dg-fs-key) * var(--dg-k));
letter-spacing: calc(var(--dg-ls-key) * var(--dg-k));
font-weight: var(--dg-wt-key);
fill: var(--c-gold-text); /* gold, once per drawing */
}
.dg .d-label {
font-size: calc(var(--dg-fs-label) * var(--dg-k));
letter-spacing: calc(var(--dg-ls-label) * var(--dg-k));
font-weight: var(--dg-wt-label);
}
.dg .d-caption, .dg .d-note {
font-size: calc(var(--dg-fs-caption) * var(--dg-k));
letter-spacing: calc(var(--dg-ls-caption) * var(--dg-k));
font-weight: var(--dg-wt-caption);
fill: var(--c-steel);
}
.dg .d-optical { dominant-baseline: middle; transform: translateY(.09em); }
.dg .d-label--long { letter-spacing: 0; } /* a long word in a fixed box */
.dg .d-label--live { fill: var(--c-gold-text); } /* gold label, key sized */
.dg .d-label--live,
.dg text.d-live { font-size: calc(var(--dg-fs-key) * var(--dg-k)); font-weight: var(--dg-wt-key); }
.dg .d-label--mute { fill: var(--c-steel); }
/* a Playfair figure inside an illustration — the one non-Inter case */
.dg .d-figure {
font-family: var(--ff-display); font-weight: 500; text-transform: none;
letter-spacing: var(--ls-tight);
font-size: calc(var(--dg-fs-figure) * var(--dg-k));
fill: var(--c-ink); stroke: none;
}
/* --- 15.5 dark ground ---------------------------------------------------
Rule 9, first half. Every tint and weight above has an equivalent here.
Same geometry, same classes, same coordinates: only the values re-point.
Never redraw for dark. Never lighten a stroke by hand. */
.dg--dark {
--dg-edge: rgba(237,235,232,.88);
--dg-hair: rgba(237,235,232,.30);
--dg-tint: rgba(237,235,232,.045);
--dg-tint-key: rgba(212,175,55,.09);
--dg-plate: var(--c-ink);
--dg-edge-soft: rgba(237,235,232,.88);
--dg-tint-0: rgba(237,235,232,.045);
--dg-tint-1: rgba(237,235,232,.045);
--dg-tint-2: rgba(237,235,232,.045);
}
.dg--dark .d-hatch { fill: url(#dgHatchD); }
.dg--dark .d-box--key,
.dg--dark .d-emph { stroke: var(--c-gold); }
.dg--dark .d-label { fill: var(--c-on-dark); }
/* .d-label--live is a d-label that has gone gold, so it has to be able to
outrank the plain label rule above whichever order the two are written in:
stated as a compound selector, not as a document-order accident. */
.dg--dark .d-key,
.dg--dark .d-label--live,
.dg--dark .d-label.d-label--live { fill: var(--c-gold); }
.dg--dark .d-caption, .dg--dark .d-note,
.dg--dark .d-label--mute { fill: var(--c-on-dark-2); }
.dg--dark .d-keyline { stroke: var(--c-gold); }
.dg--dark .d-figure { fill: var(--c-on-dark); }
.dg--dark .d-dot { fill: var(--c-on-dark); }
/* --- 15.6 mobile: simplify, do not shrink -------------------------------
Rule 9, second half. Two tiers, and declaring one is mandatory.
Tier 1 — eight shapes or fewer: keep one artboard, mark every drafting
detail .d-detail (it is richness, not information, so it goes first), and
let --dg-m raise the type so labels get LARGER on a phone, never smaller.
Tier 2 — wider than tall, or more than eight shapes: ship a second
portrait artboard. .dg--desk and .dg--mob swap at 560px, and the mobile
artboard is REDRAWN with fewer parts, not scaled down.
--dg-m is a separate factor from --dg-a so a declared artboard ratio and
the mobile bump compose instead of overwriting each other. */
.dg--mob { display: none; }
/* --dg-m compensates a board that renders NARROWER than its artboard. Since
R3 every board is declared 1:1 at the tier it is shown at, so there is
nothing left to compensate and the factor is 1 below the tablet break:
left at 1.3 an 18px label would render 23.4px and a caption would reach
label size, inverting the hierarchy. Five page agents each neutralised it
for their own selectors; this is the one rule that replaces all five. */
/* THE TIER SWAP HAPPENS WHERE THE DESKTOP BOARD STOPS FITTING, not at the
phone break. A desktop board is drawn 1:1 against its column at the 1440
reference; below 1080 every column is narrower than the board it carries, so
the board would render 20-45% under its artboard and its type would go with
it — an 880 board in a 768 viewport rendered 706px, putting labels at
14.4px and captions at 10px. Swapping to the portrait tier there keeps the
1:1 contract and the type floor at every width instead of shrinking a
desktop composition into a tablet column (§9A.6: simplify, do not shrink). */
@media (max-width: 1080px) {
.dg--desk { display: none; }
.dg--mob { display: block; }
}
/* THE SWAP POINT IS PER BOARD, because a board in a fractional column reaches
its drawn width later than one in a full-width panel. The 880u panel boards
are 1:1 from 1081 up; about's 542u aside and talk's 424u plate only reach
their drawn width at 1380 (at 1280 they render 512px and 398px, at 1081
422px and 322px, dragging their type down with them). Those boards carry
--desk-xl / --mob-xl and swap at the later point. Type is never re-scaled to
cover a shrinking board: a board renders 1:1 or it is not the board shown
(§9A.6). */
@media (max-width: 1380px) {
.dg--desk-xl { display: none; }
.dg--mob-xl { display: block; }
}
@media (max-width: 760px) {
.dg { --dg-m: 1; }
}
@media (max-width: 560px) {
/* the type floor STEPS UP on a phone — a label is never smaller there than
it is on a desktop. This is the founder's rule, stated as tokens: on a
1:1 artboard the labels literally grow 16 → 18 and the key 18 → 21. */
.dg {
--dg-m: 1;
--dg-fs-label: 18px;
--dg-fs-key: 21px;
--dg-fs-caption: 13.5px;
}
.dg .d-detail { display: none; }
/* hatch opens up so a small canvas does not turn to mud */
.dg .d-hatch { opacity: .7; }
}
/* --- 15.7 motion + defs carrier ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.dg .d-draw { stroke-dasharray: none; stroke-dashoffset: 0; }
}
.dg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* --- 15.8 the finished-state dash ---------------------------------------
R3 note: this block used to carry an interim artboard registry (ratios
declared by viewBox), a .ctx__art bridge and a legacy class bridge for the
pre-R3 primitives .d-node / .d-line / .d-fill / .d-strata / .d-text. Every
drawing on the site has since been redrawn 1:1 on a .dg--a* artboard with
the .d-box / .d-hair / .d-label family, so all three were deleted in the
consolidation pass — nothing in src/ or partials/ referenced them.
The pre-R3 draw-in hid a stroke behind a fixed 320-unit dash, which is
shorter than the perimeter of a full-width container, so the finished state
kept a gap in the outline. One visible default, longer than any path. */
.dg .d-draw { stroke-dasharray: none; }
/* ---- Closing-CTA + Same-system-different-size helpers ------------------
Small utility classes added to support the recent rebalances on
what-you-get (closing CTA centering) and pricing (Same system row). */
/* Center the lede paragraph that sits below a centered head. */
.section__lede--center { text-align: center; margin-inline: auto; max-width: 52ch; }
/* Lede tone tuned for dark ink backgrounds. */
.section__lede--onink { color: var(--c-on-dark); }
/* Vertically balance a split whose left column runs shorter than the aside. */
.split--head-center { align-items: center; }
/* Meters section (pricing.html "Same system. Different size."): kill the
dead black space at the top and align the graphic's "EVERY PLAN THINKS"
bar to the H2 baseline on the left. */
.meters-section { padding-top: var(--sp-7); }
.meters-split { align-items: start; }
/* Utility: force the brand gold on any em/span, overriding the dark-section
em rule that dims emphasis to on-dark-2. */
.gold-accent { color: var(--c-gold) !important; }
.section--ink .gold-accent,
.section--ink-deep .gold-accent { color: var(--c-gold) !important; }
/* Same/Different fact rail: two short rows that give the left column enough
substance to match the seat-count graphic on the right. */
.same-diff-facts {
list-style: none;
padding: 0;
margin: var(--sp-6) 0 0;
display: grid;
gap: var(--sp-3);
max-width: 44ch;
}
.same-diff-facts li {
display: grid;
grid-template-columns: 6.5rem 1fr;
gap: var(--sp-4);
align-items: baseline;
padding-top: var(--sp-3);
border-top: 1px solid var(--c-line-dark-faint);
}
.same-diff-facts__k {
font-family: var(--ff-body);
font-size: var(--fs-sm);
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--c-gold);
}
.same-diff-facts__v {
font-size: var(--fs-base);
color: var(--c-on-dark);
line-height: 1.5;
}
/* ---- Cost graph (Pricing → The arithmetic) -----------------------------
Horizontal bar chart of annual cost. Two market bars in muted line
("what the market charges") plus one gold bar for Simple Genius. The
dollar value sits at the end of each bar in a mono numeric so scale
reads instantly. The Simple Genius bar is only 1% wide because $2,388
really is that small next to $240,000 — the dollar value pops out on
its own line so it is still legible. */
.costgraph {
margin: var(--sp-8) 0 var(--sp-6);
max-width: 900px;
margin-inline: auto;
}
.costgraph__grid {
display: flex;
flex-direction: column;
gap: var(--sp-6);
}
.costgraph__row { display: grid; gap: var(--sp-3); }
.costgraph__head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--sp-4);
flex-wrap: wrap;
}
.costgraph__label {
font-family: var(--ff-display);
font-weight: 500;
font-size: var(--fs-4);
color: var(--c-on-dark);
letter-spacing: -.005em;
}
.costgraph__note {
font-family: var(--ff-body);
font-size: var(--fs-sm);
color: rgba(237,235,232,.6);
}
.costgraph__track {
position: relative;
height: 32px;
background: rgba(237,235,232,.05);
border-radius: 3px;
overflow: visible;
}
.costgraph__bar {
position: relative;
height: 100%;
min-width: 4px;
border-radius: 3px;
display: flex;
align-items: center;
transition: width 900ms cubic-bezier(.2,.7,.2,1);
}
.costgraph__bar--market {
background: rgba(237,235,232,.18);
border-right: 2px solid rgba(237,235,232,.55);
}
.costgraph__bar--us {
background: var(--c-gold);
border-right: 2px solid var(--c-gold);
box-shadow: 0 0 0 2px rgba(212,175,55,.25);
}
/* dollar amount lives to the right of the bar, on the track background */
.costgraph__value {
position: absolute;
left: calc(100% + 12px);
top: 50%;
transform: translateY(-50%);
font-family: var(--ff-body);
font-variant-numeric: tabular-nums lining-nums;
font-weight: 600;
font-size: var(--fs-base);
color: var(--c-on-dark);
white-space: nowrap;
}
.costgraph__row--us .costgraph__value { color: var(--c-gold); }
.costgraph__caption {
margin: var(--sp-6) auto 0;
max-width: 62ch;
text-align: center;
font-size: var(--fs-sm);
line-height: 1.55;
color: rgba(237,235,232,.55);
}
@media (max-width: 640px) {
.costgraph__head { flex-direction: column; gap: var(--sp-1); }
.costgraph__value {
position: static;
transform: none;
display: inline-block;
margin-top: var(--sp-2);
padding-left: var(--sp-2);
}
.costgraph__track { overflow: visible; }
}
/* ---- Scan page → closing card (quiet compact + center) -----------------
The default .quiet band has 80px vertical padding intended for a longer
story block. On the scan page the block is title + two buttons, which
left the CTAs floating in a mostly empty box. .quiet--compact tightens
the vertical padding and .quiet__inner--center stacks the contents on
the vertical + horizontal axis so nothing is stranded. */
.quiet--compact { padding-block: var(--sp-7); }
.quiet__inner--center {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--sp-5);
text-align: center;
}
.quiet__inner--center .quiet__title {
max-width: 22ch;
margin-left: 0;
}
.quiet__inner--center .quiet__foot { margin-top: var(--sp-2); }
/* ---- Founder photos on About ------------------------------------------
Photo fills the .bio__plate at the same 4:5 aspect ratio as the previous
monogram plate, so surrounding layout does not shift. We keep the dark
background as a fallback while the image loads and clip via border-radius
so corners match adjacent card chrome. */
.bio__plate--photo {
padding: 0;
gap: 0;
align-items: stretch;
justify-content: stretch;
}
.bio__photo {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 28%;
display: block;
}
/* ==========================================================================
MOBILE POLISH PASS (scoped, desktop LOCKED)
Applies only under 900px. Do not add rules here that reach desktop.
Purpose: quiet the chaos on 375px viewports. Fixes cataloged in the
Aug 8 mobile audit — pricing table clipping, hero-arrow wrap, founder
card alignment, sticky nav crowding, and a few section rhythm nudges.
========================================================================== */
@media (max-width: 899px) {
/* ---- Sticky header: give the logo/hamburger/CTA room to breathe ---- */
.site-header__inner {
padding-inline: var(--sp-4);
gap: var(--sp-3);
}
.site-header .btn,
.site-header .header__actions .btn {
padding-inline: var(--sp-4);
font-size: var(--fs-sm);
height: 40px;
line-height: 1;
}
.site-header .logo__img,
.site-header .site-logo,
.site-header .logo img { max-height: 30px; width: auto; }
/* ---- Homepage arrow heading: stack it, keep the arrow visible ------- */
.h2--noWrap {
font-size: clamp(1.55rem, 5.8vw, 2rem);
line-height: 1.15;
text-wrap: balance;
}
.h2--noWrap .h2-arrow {
display: inline-block;
padding-inline: .2em;
}
/* ---- Scan hero H2 line break fix ---------------------------------- */
.form-head__title {
font-size: clamp(1.55rem, 5.6vw, 1.9rem);
line-height: 1.18;
text-wrap: balance;
hyphens: none;
-webkit-hyphens: none;
}
/* ---- About founder cards: center the photo, calm the layout ------- */
.bio {
text-align: center;
align-items: center;
}
.bio__plate--photo {
max-width: 220px;
width: 100%;
margin-inline: auto;
border-radius: var(--r-md);
overflow: hidden;
}
.bio__body {
align-items: center;
text-align: center;
}
.bio__text { text-align: left; }
/* Attribution line under the pulled quote reads as a label, not a stray
comma. Keep it centred on mobile so it sits under the quote block. */
.about-attrib { text-align: left; }
.about-pull { text-wrap: balance; }
/* ---- Pricing plan-metering table: stack rows as cards ---------------
The desktop table has min-width 640px in .table-scroll, which forces a
horizontal scroll and clips columns on 375px. On mobile we hide the
table shell and repaint each row as a small three-column card. */
.table-hint { display: none; }
.table-scroll { overflow: visible; }
.table-scroll .ledger { min-width: 0; display: block; width: 100%; }
.ledger caption {
display: block;
padding: 0 0 var(--sp-4);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--c-on-dark-2);
text-align: left;
font-weight: 600;
}
.ledger thead { display: none; }
.ledger tbody { display: block; }
.ledger tbody tr {
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-2) var(--sp-4);
padding: var(--sp-4) var(--sp-4);
border: 1px solid rgba(237, 235, 232, .12);
border-radius: var(--r-md);
margin-bottom: var(--sp-3);
background: rgba(237, 235, 232, .03);
}
.ledger tbody tr:hover { background: rgba(237, 235, 232, .05); }
.ledger tbody th[scope="row"] {
display: block;
padding: 0 0 var(--sp-2);
border-bottom: 1px solid rgba(237, 235, 232, .1);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--c-gold);
font-weight: 600;
text-align: left;
}
.ledger tbody td {
display: grid;
grid-template-columns: minmax(0, 8rem) 1fr;
align-items: baseline;
gap: var(--sp-3);
padding: var(--sp-2) 0;
border: 0;
text-align: left;
color: var(--c-white);
}
.ledger tbody td + td { border-top: 1px dashed rgba(237, 235, 232, .08); }
.ledger tbody td::before {
content: attr(data-tier);
font-size: var(--fs-sm);
letter-spacing: .04em;
text-transform: uppercase;
color: rgba(237, 235, 232, .55);
font-weight: 500;
}
/* Fallback tier labels when data-tier isn't set (see JS below is optional):
use nth-child mapping so the same markup keeps working without JS. */
.ledger tbody td:nth-of-type(1)::before { content: "Owner"; }
.ledger tbody td:nth-of-type(2)::before { content: "Team"; }
.ledger tbody td:nth-of-type(3)::before { content: "Firm"; }
/* Firm column highlight background is nice at desktop, dropped on mobile */
.ledger tbody td:nth-of-type(3) { background: transparent; }
/* Seat-count ledger is 2 columns (Seats | Monthly), not the 3-tier comparison
ledger. Suppress the role labels there so "OWNER" doesn't repeat per row. */
.ledger--seats tbody td::before { content: none !important; }
.ledger--seats tbody td {
display: flex;
justify-content: flex-end;
align-items: baseline;
color: var(--c-white);
font-variant-numeric: tabular-nums;
}
/* ---- Section rhythm on very small screens ------------------------- */
.section { padding-block: var(--sp-8); }
.section--tight { padding-block: var(--sp-7); }
.section--tall { padding-block: var(--sp-9); }
.section__head { margin-bottom: var(--sp-6); }
/* Long-form eyebrow → title → prose stacks felt cramped in the audit.
Add a small extra breath between them on phones only. */
.eyebrow + .display,
.eyebrow + .display--lg,
.eyebrow + h2 { margin-top: var(--sp-3); }
.display + .prose,
.display--lg + .prose,
h2 + .prose { margin-top: var(--sp-5); }
/* Buttons: full-width primaries on mobile look tidier than 3 side-by-side */
.actions,
.hero__cta,
.form-cta { flex-wrap: wrap; }
.actions .btn,
.hero__cta .btn { flex: 1 1 100%; min-width: 0; }
.actions .btn + .btn { margin-top: var(--sp-2); }
}
/* ============================================================
Single-plan pricing card + seat-count ledger
============================================================ */
/* Center a single plan card on desktop so it doesn't stretch. */
.plans--single {
justify-content: center;
}
.plan--single {
grid-column: 4 / span 6; /* half width, centered in 12-col grid */
max-width: 480px;
justify-self: center;
}
@media (max-width: 899px) {
.plans--single {
display: block;
}
.plan--single {
max-width: 100%;
margin: 0 auto;
grid-column: auto;
}
}
/* Seat-count 2-column ledger */
.ledger--seats th,
.ledger--seats td {
text-align: left;
}
.ledger--seats th[scope="col"]:nth-child(2),
.ledger--seats td:nth-child(2) {
text-align: right;
font-variant-numeric: tabular-nums;
}
/* ============================================================
Pricing hero section — MVP-sized tightening
Sam wants this pricing card section to feel like the
"What the work told us" MVP section on About: tighter
vertical padding, less air between elements.
============================================================ */
.pricing-hero-section {
padding-top: var(--sp-8);
padding-bottom: var(--sp-8);
}
.pricing-hero-section .lede-block {
margin-bottom: var(--sp-6);
}
.pricing-hero-section .plans--single {
margin-top: 0;
}
.pricing-hero-section .plan--single {
max-width: 560px;
}
.pricing-hero-section .plan-note {
margin-top: var(--sp-5);
}
@media (max-width: 899px) {
.pricing-hero-section {
padding-top: var(--sp-6);
padding-bottom: var(--sp-6);
}
}
/* ============================================================
ASSESSMENT PAGE — scoring tiles + band cards
(Introduced with the Try Simple Genius for Free experience)
============================================================ */
/* Textarea variant — inherits form__input styling but auto-height rows */
.form__input--area {
min-height: 2.75rem;
padding-top: var(--sp-3);
padding-bottom: var(--sp-3);
line-height: 1.45;
resize: vertical;
font-family: inherit;
}
/* Scoring tiles (dimension grid, on --ink section) */
.grid--3-tight { row-gap: var(--sp-5); column-gap: var(--sp-5); }
.tile {
display: block;
padding: var(--sp-5) var(--sp-5) var(--sp-5);
border: 1px solid var(--c-line);
border-radius: 4px;
background: var(--c-white);
}
.tile--dark {
background: var(--c-ink-soft);
border-color: var(--c-line-dark);
color: var(--c-on-dark);
}
.tile__label {
display: block;
font-size: var(--fs-eyebrow);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--c-on-dark-2);
margin-bottom: var(--sp-2);
}
.tile--dark .tile__label { color: var(--c-on-dark-2); }
.tile:not(.tile--dark) .tile__label { color: var(--c-mute); }
.tile__num {
display: block;
font-family: var(--ff-display);
font-weight: 400;
font-size: var(--fs-2);
line-height: 1;
margin-bottom: var(--sp-3);
color: var(--c-gold);
}
.tile__body {
margin: 0;
font-size: var(--fs-sm);
line-height: 1.55;
color: var(--c-on-dark-2);
}
.tile:not(.tile--dark) .tile__body { color: var(--c-steel); }
/* Band row (Red/Yellow/Green scoring bands) */
.band-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-5);
margin-top: var(--sp-7);
}
@media (max-width: 899px) {
.band-row { grid-template-columns: 1fr; }
}
.band {
padding: var(--sp-5);
border-radius: 4px;
border: 1px solid var(--c-line-dark);
background: var(--c-ink-inset);
color: var(--c-on-dark);
}
.band__label {
display: inline-block;
padding: 2px 10px;
border-radius: 999px;
font-size: var(--fs-eyebrow);
letter-spacing: .12em;
text-transform: uppercase;
font-weight: 600;
margin-right: var(--sp-3);
vertical-align: middle;
}
.band__range {
font-family: var(--ff-display);
font-size: var(--fs-4);
color: var(--c-on-dark-2);
vertical-align: middle;
}
.band__body {
margin: var(--sp-4) 0 0;
font-size: var(--fs-sm);
line-height: 1.55;
color: var(--c-on-dark-2);
}
.band--red .band__label { background: #7A2E24; color: #F5D9D3; }
.band--yellow .band__label { background: #7A5F16; color: #F3E4B5; }
.band--green .band__label { background: #2E5A34; color: #D5EBD8; }
/* ==== P4B, LLM position, standalone bold block ==== */
.llm-pos { padding-block: var(--sp-8); }
.llm-pos__inner {
max-width: 60rem;
margin-inline: auto;
text-align: center;
}
.llm-pos__stmt {
text-align: center;
color: var(--c-on-dark);
margin: var(--sp-3) auto 0;
max-width: 30ch;
line-height: 1.15;
letter-spacing: -0.005em;
}
.llm-pos__stmt em,
.section--ink-soft .display.llm-pos__stmt em,
.section--ink-deep .display.llm-pos__stmt em,
.section--ink .display.llm-pos__stmt em {
font-style: italic;
color: var(--c-gold);
}
@media (min-width: 900px) {
.llm-pos { padding-block: var(--sp-9); }
.llm-pos__stmt { max-width: 32ch; }
}
/* --------------------------------------------------------- pull quote ---
Attributed quote used under an outcome figure. Sits where
.outcome__close--under used to, matches its size and left alignment, but
reads as a named quote instead of a summary line. */
.pull-quote {
margin: var(--sp-6) 0 0;
padding: 0;
}
.pull-quote__q {
margin: 0;
padding: 0;
font-family: var(--ff-display);
font-weight: 500;
font-size: var(--fs-3);
line-height: 1.22;
letter-spacing: -.015em;
color: var(--c-ink);
text-align: left;
}
.pull-quote__cite {
margin: var(--sp-3) 0 0;
font-family: var(--ff-display);
font-style: italic;
font-weight: 500;
font-size: 1.25rem;
letter-spacing: -.005em;
color: var(--c-ink);
text-align: left;
}
.pull-quote--under { max-width: none; }
.frame-caption + .pull-quote--under { margin-top: var(--sp-8); }
.section--ink .pull-quote__q,
.section--ink-deep .pull-quote__q { color: var(--c-white); }
.section--ink .pull-quote__cite,
.section--ink-deep .pull-quote__cite { color: var(--c-on-dark-2); }
/* About page "we built it for work like ours" quote — Sam 8/25: real
quotation marks in the copy (no decorative glyph), section sized tight
around the text instead of floating in a sea of white space. */
.about-quote-band { padding-block: var(--sp-7); }
.about-quote {
position: relative;
max-width: 46rem;
margin: 0 auto;
text-align: center;
}
.about-quote .pull-quote__q {
font-size: var(--fs-1);
line-height: 1.15;
text-align: center;
max-width: 27ch;
margin: 0 auto;
}
.about-quote .pull-quote__cite {
text-align: center;
margin-top: var(--sp-4);
}
.about-quote .pull-quote__cite::before {
content: "";
display: block;
width: 40px;
height: 2px;
background: var(--c-gold);
margin: 0 auto var(--sp-4);
}
@media (max-width: 900px) {
.about-quote-band { padding-block: var(--sp-5); }
.about-quote { max-width: 24rem; }
.about-quote .pull-quote__q { font-size: var(--fs-2); max-width: 24ch; }
}
/* ==============================================================
HOMEPAGE REORDER (handbook v4 §9), 2026-08-18
- .hero__problem: the missing-context statement now living
immediately under the hero CTAs. Uses hero__note rhythm but
larger, since it carries meaning (not utility copy).
- .film-section: the film unit was inside .hero. Extracted to
its own section so the step-one / LLM statements can sit
between the hero and the film. Reuses .hero__stage sizing.
============================================================== */
.hero__problem {
margin-top: var(--sp-8);
font-family: var(--ff-display);
font-weight: 500;
font-size: var(--fs-2);
line-height: 1.2;
color: var(--c-ink);
max-width: 34ch;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.hero__problem em {
font-style: italic;
color: var(--c-ink);
}
.film-section {
padding-top: var(--sp-7);
padding-bottom: var(--sp-7);
}
.film-section .film {
max-width: 880px;
margin-left: auto;
margin-right: auto;
}
/* ==========================================================================
POST-r6 SITE POLISH — 2026-08-19
1. Mobile eyebrow legibility (The Gap / Where We Sit / Recognition /
The Real Cause, etc.): bump the gold header size on small screens,
still smaller than body copy.
2. Outcome titles: slightly larger/heavier on desktop for stronger
section anchoring (per Sam's What You Get review).
3. Four Steps section: small assessment CTA rendered under the spine.
4. Outcome 3: split-view layout so it presents on one screen instead
of stacking a diagram + two frame images vertically.
========================================================================== */
@media (max-width: 720px) {
:root {
--fs-eyebrow: .8125rem; /* was .6875rem (~11px) → ~13px */
--ls-eyebrow: .14em; /* slightly tighter tracking at the larger size */
}
}
/* Outcome heading bump — desktop only, so mobile stays balanced */
@media (min-width: 901px) {
.outcome__title {
font-size: calc(var(--fs-1) * 1.08);
font-weight: 550;
letter-spacing: -.02em;
}
}
/* Small CTA row after the Four Steps spine */
.spine__cta {
display: flex;
justify-content: center;
margin-top: var(--sp-7);
}
.spine__cta .btn { min-width: min(320px, 90vw); }
/* --------------------------------------------------------------------------
Outcome 3 — Know what to do next.
Convert from head+wide-figure+2-column-images stack to an outcome__split
pattern (copy on one side, one visual on the other) so it fits on a
single desktop screen without vertical scrolling.
-------------------------------------------------------------------------- */
.outcome__split--stack-visual .outcome__art { display: block; }
.outcome__split--stack-visual .dgfig {
margin: 0;
}
.outcome__split--stack-visual .dgfig .dg--desk { width: 100%; height: auto; }
.outcome__split--stack-visual .frame { margin-top: var(--sp-5); }
.outcome__split--stack-visual .frame-caption { margin-top: var(--sp-2); }
/* --------------------------------------------------------------------------
Internal AI — chat mockup component
Sleek, one-column mockup used on Insurance + Benefits.
-------------------------------------------------------------------------- */
.chat-mock {
max-width: 720px;
margin: var(--sp-7) auto 0;
background: var(--c-white);
border: 1px solid var(--c-line);
border-radius: 14px;
box-shadow: 0 24px 60px rgba(27, 27, 26, 0.08), 0 2px 6px rgba(27, 27, 26, 0.04);
overflow: hidden;
}
.chat-mock__head {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 20px;
background: var(--c-ground-3);
border-bottom: 1px solid var(--c-line);
}
.chat-mock__dot {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
}
.chat-mock__dot--r { background: #E36A6A; }
.chat-mock__dot--y { background: #E3C46A; }
.chat-mock__dot--g { background: #7DBE7D; }
.chat-mock__title {
margin-left: 10px;
font-size: 12px;
letter-spacing: 0.02em;
color: var(--c-mute);
font-family: var(--font-body, inherit);
}
.chat-mock__body {
padding: 28px 28px 24px;
display: flex;
flex-direction: column;
gap: 20px;
}
.chat-mock__row {
display: flex;
gap: 14px;
align-items: flex-start;
}
.chat-mock__row--user { justify-content: flex-end; }
.chat-mock__row--user .chat-mock__bubble { order: 1; }
.chat-mock__row--user .chat-mock__avatar { order: 2; }
.chat-mock__avatar {
flex-shrink: 0;
width: 34px;
height: 34px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
}
.chat-mock__avatar--user {
background: var(--c-ground-3);
color: var(--c-ink);
}
.chat-mock__avatar--ai {
background: var(--c-ink);
color: var(--c-gold);
}
.chat-mock__bubble {
max-width: 82%;
padding: 14px 18px;
border-radius: 12px;
font-size: 15px;
line-height: 1.55;
}
.chat-mock__bubble p { margin: 0; }
.chat-mock__bubble--user {
background: var(--c-gold-wash);
border: 1px solid rgba(212, 175, 55, 0.35);
color: var(--c-ink);
}
.chat-mock__bubble--ai {
background: var(--c-ground-2);
border: 1px solid var(--c-line);
color: var(--c-ink);
}
.chat-mock__list {
margin: 12px 0 0;
padding-left: 20px;
font-size: 14.5px;
line-height: 1.55;
}
.chat-mock__list li { margin: 4px 0; }
.chat-mock__grounded {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding-top: 16px;
margin-top: 4px;
border-top: 1px solid var(--c-line-faint);
}
.chat-mock__grounded-label {
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--c-mute);
margin-right: 4px;
}
.chat-mock__chip {
display: inline-block;
padding: 5px 11px;
border-radius: 999px;
font-size: 12px;
letter-spacing: 0.01em;
background: var(--c-ground-3);
border: 1px solid var(--c-line);
color: var(--c-ink);
}
@media (max-width: 600px) {
.chat-mock__body { padding: 20px 16px 18px; }
.chat-mock__bubble { max-width: 88%; padding: 12px 14px; font-size: 14.5px; }
.chat-mock__avatar { width: 30px; height: 30px; font-size: 11px; }
.chat-mock__row--user .chat-mock__bubble { max-width: 92%; }
}
/* --------------------------------------------------------------------------
Vertical page override — top-align beat content so cards feel balanced
when copy length differs across the three cards. Scoped to Insurance +
Benefits via body.page-vertical so it doesn't affect other pages.
-------------------------------------------------------------------------- */
.page-vertical .beats--linked .beat {
justify-content: flex-start;
}
/* =========================================================================
Lightbox — clickable software screenshots (Change Order §2.3)
========================================================================= */
.shot--zoomable { cursor: zoom-in; }
.shot--zoomable .shot__img { transition: transform .18s ease; }
.shot--zoomable:hover .shot__img,
.shot--zoomable:focus-within .shot__img { transform: translateY(-2px); }
.shot--zoomable::after {
content: "";
position: absolute;
right: 12px;
bottom: 12px;
width: 32px;
height: 32px;
border-radius: 999px;
background: rgba(29,29,29,.82) url("data:image/svg+xml;utf8,") center/16px no-repeat;
pointer-events: none;
opacity: 0;
transition: opacity .18s ease;
}
.shot--zoomable { position: relative; }
.shot--zoomable:hover::after,
.shot--zoomable:focus-within::after { opacity: 1; }
.lightbox {
position: fixed;
inset: 0;
z-index: 1000;
background: rgba(15,15,15,.86);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
padding: clamp(1rem, 4vw, 3rem);
opacity: 0;
visibility: hidden;
transition: opacity .22s ease, visibility 0s .22s;
}
.lightbox[aria-hidden="false"] {
opacity: 1;
visibility: visible;
transition: opacity .22s ease;
}
.lightbox__inner {
position: relative;
max-width: min(1400px, 96vw);
max-height: 92vh;
display: flex;
flex-direction: column;
gap: 12px;
}
.lightbox__img {
display: block;
max-width: 100%;
max-height: 84vh;
width: auto;
height: auto;
object-fit: contain;
border-radius: 8px;
box-shadow: 0 30px 80px rgba(0,0,0,.5);
background: #F7F7F7;
}
.lightbox__caption {
color: #F7F7F7;
font-family: var(--ff-sans);
font-size: var(--fs-sm);
line-height: 1.45;
text-align: center;
max-width: 900px;
margin: 0 auto;
opacity: .92;
}
.lightbox__close {
position: absolute;
top: -14px;
right: -14px;
width: 44px;
height: 44px;
border-radius: 999px;
border: none;
background: #F7F7F7;
color: #1D1D1D;
font-size: 22px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 20px rgba(0,0,0,.35);
transition: transform .15s ease;
}
.lightbox__close:hover,
.lightbox__close:focus-visible { transform: scale(1.06); outline: none; }
.lightbox__close:focus-visible { box-shadow: 0 0 0 3px var(--c-gold, #D4AF37); }
body.lightbox-open { overflow: hidden; }
@media (max-width: 600px) {
.lightbox__close { top: 8px; right: 8px; }
.lightbox__inner { padding-top: 44px; }
}
/* =========================================================================
Pricing three-tier (Change Order §6A + §9)
========================================================================= */
.plans--triple { row-gap: var(--sp-6); }
.plans--triple .plan { grid-column: span 4; }
@media (max-width: 900px) {
.plans--triple .plan { grid-column: 1 / -1; }
}
.plan__tag {
position: absolute;
top: 0; left: 50%;
transform: translate(-50%, -50%);
padding: var(--sp-1) var(--sp-4);
background: var(--c-ink);
color: var(--c-gold);
border-radius: var(--r-pill);
font-family: var(--ff-sans);
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: var(--ls-label);
text-transform: uppercase;
white-space: nowrap;
z-index: 2;
}
/* Shape comparison (§9.3 arithmetic replacement) */
.shape-compare {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--gutter);
margin-top: var(--sp-8);
}
@media (max-width: 900px) {
.shape-compare { grid-template-columns: 1fr; gap: var(--sp-5); }
}
.shape-card {
display: flex;
flex-direction: column;
gap: var(--sp-3);
padding: var(--sp-7) var(--sp-6);
background: rgba(255,255,255,.03);
border: var(--bw) solid rgba(255,255,255,.14);
border-radius: var(--r-md);
color: var(--c-on-dark, #F7F7F7);
}
.shape-card--us {
background: rgba(212,175,55,.08);
border-color: rgba(212,175,55,.55);
}
.shape-card__label {
font-family: var(--ff-sans);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: rgba(247,247,247,.75);
}
.shape-card--us .shape-card__label { color: var(--c-gold); }
.shape-card__title {
font-family: var(--ff-display);
font-size: var(--fs-3);
line-height: var(--lh-title);
margin: 0;
color: var(--c-on-dark, #F7F7F7);
}
.shape-card__body {
font-family: var(--ff-sans);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: rgba(247,247,247,.86);
margin: 0;
}
.shape-card__price {
font-family: var(--ff-display);
font-size: var(--fs-2);
line-height: 1;
color: var(--c-gold);
margin-top: auto;
padding-top: var(--sp-4);
}
.shape-card__hint {
font-family: var(--ff-sans);
font-size: var(--fs-xs);
color: rgba(247,247,247,.6);
margin-top: var(--sp-1);
}
/* Pricing: tier tag inside module title */
.incl__tier {
display: inline-block;
margin-left: var(--sp-2);
padding: 2px 8px;
background: var(--c-gold-wash, rgba(212,175,55,.14));
color: var(--c-gold-deep, #8A6A15);
border-radius: var(--r-pill);
font-family: var(--ff-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
vertical-align: middle;
white-space: nowrap;
}
/* =========================================================================
Competitive AI Scan page (Change Order §4, §10)
========================================================================= */
.scan-card {
background: var(--c-white);
border: var(--bw) solid var(--c-line);
border-radius: var(--r-md);
padding: var(--sp-8) var(--sp-7);
box-shadow: var(--shadow-2);
}
@media (max-width: 640px) { .scan-card { padding: var(--sp-6) var(--sp-5); } }
.scan-card__steps {
display: flex;
flex-wrap: wrap;
gap: var(--sp-3);
margin-bottom: var(--sp-5);
}
.scan-step {
font-family: var(--ff-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--c-steel, #5A5A5A);
padding: 4px 10px;
border: 1px solid var(--c-line);
border-radius: var(--r-pill);
background: rgba(0,0,0,.02);
}
.scan-step.is-current {
color: var(--c-ink);
border-color: var(--c-gold-mid);
background: rgba(212,175,55,.10);
}
.scan-card__title {
font-family: var(--ff-display);
font-size: var(--fs-2);
line-height: var(--lh-title);
margin: 0 0 var(--sp-2);
color: var(--c-ink);
}
.scan-card__lede {
font-family: var(--ff-sans);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--c-steel, #4a4a4a);
margin: 0 0 var(--sp-6);
}
.scan-form__row {
display: flex;
flex-direction: column;
gap: var(--sp-1);
margin-bottom: var(--sp-4);
}
.scan-form__label {
font-family: var(--ff-sans);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--c-ink);
}
.scan-form__input {
font-family: var(--ff-sans);
font-size: var(--fs-body);
line-height: 1.4;
padding: 12px 14px;
border: var(--bw) solid var(--c-line-strong, #c8c4bd);
border-radius: var(--r-sm, 8px);
background: var(--c-white);
color: var(--c-ink);
transition: border-color var(--dur-2) var(--ease);
}
.scan-form__input:focus {
outline: none;
border-color: var(--c-gold);
box-shadow: 0 0 0 3px rgba(212,175,55,.22);
}
.scan-form__foot { margin-top: var(--sp-5); }
.scan-form__note {
font-family: var(--ff-sans);
font-size: var(--fs-xs);
color: var(--c-steel, #6a6a6a);
margin: var(--sp-3) 0 0;
text-align: center;
}
/* Scan steps (three-step process) */
.scan-steps {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--gutter);
}
@media (max-width: 900px) { .scan-steps { grid-template-columns: 1fr; } }
.scan-steps__item {
padding: var(--sp-6) var(--sp-5);
background: rgba(0,0,0,.02);
border: var(--bw) solid var(--c-line);
border-radius: var(--r-md);
}
.scan-steps__num {
display: inline-block;
font-family: var(--ff-display);
font-size: var(--fs-2);
color: var(--c-gold);
line-height: 1;
margin-bottom: var(--sp-3);
}
.scan-steps__title {
font-family: var(--ff-display);
font-size: var(--fs-3);
line-height: var(--lh-title);
margin: 0 0 var(--sp-2);
color: var(--c-ink);
}
.scan-steps__body {
font-family: var(--ff-sans);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--c-steel, #4a4a4a);
margin: 0;
}
/* What comes back (dark ground cards) */
.scan-get {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--gutter);
margin-top: var(--sp-8);
}
@media (max-width: 900px) { .scan-get { grid-template-columns: 1fr; } }
.scan-get__card {
padding: var(--sp-6) var(--sp-5);
background: rgba(255,255,255,.04);
border: var(--bw) solid rgba(255,255,255,.14);
border-radius: var(--r-md);
}
.scan-get__title {
font-family: var(--ff-display);
font-size: var(--fs-3);
line-height: var(--lh-title);
margin: 0 0 var(--sp-2);
color: var(--c-on-dark, #F7F7F7);
}
.scan-get__body {
font-family: var(--ff-sans);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: rgba(247,247,247,.82);
margin: 0;
}
/* =========================================================================
Batch 4: Homepage hero — "The first step for implementing AI in a business."
========================================================================= */
.hero--film .hero__title--first-step {
font-family: var(--ff-display);
font-weight: 400;
font-size: clamp(2.6rem, 5.6vw, 4.6rem);
line-height: 1.08;
letter-spacing: -0.01em;
color: var(--c-ink);
margin: 0 auto var(--sp-7);
max-width: 20ch;
text-align: center;
}
.hero--film .hero__gold {
font-style: italic;
color: var(--c-gold);
font-weight: 500;
}
.hero--film .hero__film {
margin: 0 auto var(--sp-7);
max-width: 1080px;
}
@media (max-width: 640px) {
.hero--film .hero__title--first-step { font-size: clamp(1.9rem, 8vw, 2.6rem); margin-bottom: var(--sp-5); }
.hero--film .hero__film { margin-bottom: var(--sp-5); }
}
/* ------- Guided Setup bar (pricing) — §6 item 24 ------------------- */
.guided-setup-bar{
margin-top: var(--sp-6);
padding: var(--sp-6) var(--sp-7);
background: color-mix(in oklab, var(--gold) 6%, var(--paper));
border: 1px solid color-mix(in oklab, var(--gold) 45%, transparent);
border-left: 4px solid var(--gold);
border-radius: 6px;
}
.guided-setup-bar__head{
display:flex; align-items:baseline; justify-content:flex-start; gap: var(--sp-5);
flex-wrap:wrap; margin-bottom: var(--sp-3);
}
.guided-setup-bar__eyebrow{
font-family: var(--font-eyebrow);
font-size: .72rem; letter-spacing:.12em; text-transform:uppercase;
color: color-mix(in oklab, var(--ink) 60%, transparent);
}
.guided-setup-bar__title{
font-family: var(--font-display);
font-size: clamp(1.6rem, 3.2vw, 2.1rem);
font-weight: 700;
color: var(--ink);
margin:0;
line-height:1.1;
}
.guided-setup-bar__price{
color: var(--gold);
font-weight: 800;
}
.guided-setup-bar__period{
font-size: .55em; font-weight: 500; color: color-mix(in oklab, var(--ink) 55%, transparent); margin-left:.15em;
}
.guided-setup-bar__body{
font-size: .95rem;
color: color-mix(in oklab, var(--ink) 80%, transparent);
margin: 0;
line-height: 1.55;
max-width: 68ch;
}
@media (max-width: 640px){
.guided-setup-bar{ padding: var(--sp-5); }
.guided-setup-bar__title{ font-size: 1.4rem; }
}
/* Zoomable cursor for module figures — pricing lightbox trigger */
.incl__item.shot--zoomable{ cursor: zoom-in; }
.incl__item.shot--zoomable:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }
/* ------- Scan two-step + progress readout — §7 item 33 ------------- */
.scan-progress{
background: color-mix(in oklab, var(--ink) 3%, var(--paper));
border: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
padding: var(--sp-5); margin-bottom: var(--sp-6); border-radius: 6px;
}
.scan-progress__eyebrow{
display:block; font-family: var(--font-eyebrow); font-size:.7rem; letter-spacing:.14em;
text-transform:uppercase; color: var(--gold); margin-bottom: var(--sp-3);
}
.scan-progress__list{ list-style:none; padding:0; margin:0; display:grid; gap: var(--sp-2); }
.scan-progress__row{
display:flex; align-items:center; gap: var(--sp-3);
color: color-mix(in oklab, var(--ink) 55%, transparent);
font-size: .95rem;
}
.scan-progress__row.is-active{ color: var(--ink); font-weight: 500; }
.scan-progress__row.is-done{ color: color-mix(in oklab, var(--ink) 70%, transparent); }
.scan-progress__row.is-done .scan-progress__dot{ background: var(--gold); }
.scan-progress__row.is-active .scan-progress__dot{
background: var(--gold);
box-shadow: 0 0 0 4px color-mix(in oklab, var(--gold) 22%, transparent);
animation: sgPulse 1.6s ease-in-out infinite;
}
.scan-progress__dot{
width:.7rem; height:.7rem; border-radius:50%;
background: color-mix(in oklab, var(--ink) 22%, transparent);
flex-shrink:0;
}
@keyframes sgPulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.18)} }
.scan-qlist{
counter-reset: q;
list-style:none; padding:0; margin: var(--sp-6) auto 0;
max-width: 66ch;
display:grid; gap: var(--sp-3);
}
.scan-qlist li{
counter-increment: q;
position:relative; padding-left: 3rem;
font-size: 1rem; line-height: 1.55;
color: color-mix(in oklab, var(--ink) 82%, transparent);
}
.scan-qlist li::before{
content: counter(q, decimal-leading-zero);
position:absolute; left:0; top:.1em;
font-family: var(--font-display);
font-size: 1.35rem; font-weight: 700;
color: var(--gold);
}
.scan-qlist li strong{ color: var(--ink); }
/* ------- Security section (P5.5) — flowing list, no siloed boxes -------- */
.security-section .display{ color: var(--paper); }
.security-list{
list-style:none; margin:0; padding:0;
border-top:1px solid color-mix(in oklab, var(--paper) 16%, transparent);
}
.security-list__row{
padding: var(--sp-5) 0;
border-bottom:1px solid color-mix(in oklab, var(--paper) 16%, transparent);
display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr);
gap: var(--sp-5); align-items:baseline;
}
.security-list__k{
font-family: var(--font-display);
font-weight: 600; font-size: 1.2rem; line-height:1.25;
color: var(--gold); margin:0;
}
.security-list__v{
color: color-mix(in oklab, var(--paper) 82%, transparent);
font-size: 1rem; line-height: 1.6; margin:0;
}
@media (max-width: 720px){
.security-list__row{ grid-template-columns: 1fr; gap: var(--sp-2); }
.security-list__k{ font-size:1.1rem; }
}
/* ------- Security section head (fills left col dead space) ------------ */
.security-section{
border-top: 1px solid color-mix(in oklab, var(--paper) 8%, transparent);
}
.security-head__h{ color: var(--paper); margin: var(--sp-2) 0 var(--sp-4); }
.security-head__lede{
color: color-mix(in oklab, var(--paper) 78%, transparent);
font-size: 1.05rem; line-height: 1.6;
margin: 0 0 var(--sp-4);
max-width: 34ch;
}
.security-head__meta{
color: var(--gold);
font-family: var(--font-eyebrow);
font-size: .72rem; letter-spacing:.14em;
text-transform: uppercase;
padding-top: var(--sp-3);
border-top: 1px solid color-mix(in oklab, var(--paper) 14%, transparent);
max-width: 34ch;
}
/* ------- Why Us (Grounds for believing us) — centered, single column ------ */
.found-section .found-inner{
text-align: center;
max-width: 68ch;
margin: 0 auto;
}
.found-section .found-h2{ margin: var(--sp-2) 0 var(--sp-6); }
.found-section .founders-photo{ margin: var(--sp-8) auto var(--sp-6); }
.found-section .founders-photo__pair{ justify-content: center; gap: var(--sp-5); }
/* Gold-outlined photo frames, with a subtle gold wash behind and a soft
gold glow on hover so the pair reads as a matched, framed set. */
.found-section .founder-card img{
border: 2px solid var(--c-gold);
border-radius: 10px;
padding: 6px;
background: color-mix(in oklab, var(--c-gold) 8%, transparent);
box-shadow: 0 1px 0 color-mix(in oklab, var(--c-gold) 24%, transparent),
0 10px 24px rgba(0,0,0,.06);
transition: box-shadow 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.found-section .founder-card:hover img{
transform: translateY(-2px);
box-shadow: 0 0 0 1px color-mix(in oklab, var(--c-gold) 60%, transparent),
0 14px 30px rgba(0,0,0,.10);
}
/* Names in gold. Co-founders label stays neutral (do not restyle .founders-photo__role). */
.found-section .founder-card__name{
color: var(--c-gold-text);
margin-top: var(--sp-3);
font-weight: 600;
}
.found-section .found-copy{ text-align: left; max-width: 60ch; margin: 0 auto; }
/* =========================================================================
SECURITY (rebuild) — centered head + 5 numbered cards
========================================================================= */
.security-head--centered{
text-align:center;
max-width: 60ch;
margin: 0 auto var(--sp-8);
}
.security-head--centered .eyebrow{ color: var(--gold); }
.security-head--centered .security-head__h{
color: var(--paper);
margin: var(--sp-2) 0 var(--sp-4);
}
.security-head--centered .security-head__lede{
color: color-mix(in oklab, var(--paper) 78%, transparent);
max-width: 46ch; margin: 0 auto;
font-size: 1.05rem; line-height: 1.55;
}
.security-grid{
list-style: none; padding: 0; margin: 0;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--sp-4);
}
@media (max-width: 1100px){ .security-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px){ .security-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px){ .security-grid{ grid-template-columns: 1fr; } }
.security-card{
position: relative;
padding: var(--sp-5) var(--sp-4) var(--sp-5);
border: 1px solid color-mix(in oklab, var(--c-gold) 22%, transparent);
border-radius: 10px;
background:
linear-gradient(180deg,
color-mix(in oklab, var(--c-gold) 8%, transparent) 0%,
color-mix(in oklab, var(--paper) 4%, transparent) 55%,
color-mix(in oklab, var(--paper) 3%, transparent) 100%);
display: flex; flex-direction: column; align-items: center;
text-align: center;
gap: var(--sp-2);
transition: transform 240ms var(--ease-out), border-color 240ms;
}
.security-card::before{
content: "";
position: absolute; top: 0; left: 12%; right: 12%; height: 2px;
background: linear-gradient(to right, transparent, var(--c-gold), transparent);
opacity: .7;
}
.security-card:hover{
transform: translateY(-3px);
border-color: color-mix(in oklab, var(--c-gold) 40%, transparent);
}
.security-card__num{
font-family: var(--font-display);
font-size: 1.4rem; letter-spacing: .04em;
color: var(--c-gold); font-weight: 600;
line-height: 1;
margin-bottom: var(--sp-1);
}
.security-card__icon-wrap{
display: inline-flex; align-items: center; justify-content: center;
width: 52px; height: 52px;
border-radius: 12px;
background: color-mix(in oklab, var(--c-gold) 14%, transparent);
border: 1px solid color-mix(in oklab, var(--c-gold) 36%, transparent);
margin: var(--sp-1) 0 var(--sp-3);
box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--paper) 6%, transparent);
}
.security-card__icon{
width: 24px; height: 24px;
color: var(--c-gold);
}
.security-card__k{
font-family: var(--font-display);
font-size: 1.05rem; line-height: 1.25;
color: var(--paper); font-weight: 600;
margin: 0;
}
.security-card__v{
color: color-mix(in oklab, var(--paper) 76%, transparent);
font-size: .92rem; line-height: 1.55;
margin: 0;
}
/* =========================================================================
WHY US (rebuild) — centered head + two founder cards side by side
========================================================================= */
.found-head{
text-align:center;
max-width: 60ch;
margin: 0 auto var(--sp-8);
}
.found-head .found-h2{ margin: var(--sp-2) 0 var(--sp-4); }
.found-head .found-h2 em{ color: var(--gold); font-style: normal; }
.found-head .found-lede{ margin: 0 auto; max-width: 52ch; }
.founders-cards{
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-6);
max-width: 820px;
margin: 0 auto;
}
@media (max-width: 680px){ .founders-cards{ grid-template-columns: 1fr; max-width: 380px; } }
.founder-block{
text-align: center;
display: flex; flex-direction: column; align-items: center;
gap: var(--sp-1);
}
.founder-block__img{
width: 200px; height: 200px;
object-fit: cover; border-radius: 50%;
filter: grayscale(1);
margin-bottom: var(--sp-3);
}
.founder-block__name{
font-family: var(--font-display);
font-size: 1.35rem;
color: var(--ink);
font-weight: 600;
}
.founder-block__role{
font-family: var(--font-eyebrow);
font-size: .72rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: var(--sp-2);
}
.founder-block__bio{
color: var(--muted);
font-size: .98rem; line-height: 1.55;
max-width: 32ch;
margin: 0;
}
.found-close{
text-align:center;
max-width: 62ch;
margin: var(--sp-8) auto 0;
font-family: var(--font-display);
font-size: 1.15rem; line-height: 1.5;
color: var(--ink);
}
/* =========================================================================
Section head — centered variant (Pricing on homepage)
========================================================================= */
.section__head--centered{
text-align: center;
max-width: 60ch;
margin-left: auto; margin-right: auto;
}
.section__head--centered .display em{ color: var(--gold); font-style: normal; }
.section__lede--center{
text-align: center;
max-width: 52ch;
margin-left: auto; margin-right: auto;
}
/* =========================================================================
Hero film card (framed, "Film coming" variant) — matches Sam's reference
========================================================================= */
.film.film--framed{
max-width: 960px;
margin: 0 auto;
padding: 12px;
background: var(--c-ground-2, #F4F2EF);
border-radius: 14px;
box-shadow: 0 8px 40px -18px rgba(0,0,0,.22);
}
.film--framed .film__stage{
position: relative;
background: var(--c-ink, #0F1113);
border-radius: 10px;
aspect-ratio: 16 / 9;
overflow: hidden;
padding: clamp(20px, 3.2vw, 40px);
display: block;
}
.film--framed .film__wordmark{
position: absolute;
top: clamp(18px, 2.6vw, 28px);
left: clamp(20px, 3vw, 32px);
font-family: var(--font-eyebrow, "Inter", sans-serif);
font-size: .72rem;
letter-spacing: .18em;
text-transform: uppercase;
color: color-mix(in oklab, var(--paper) 68%, transparent);
font-weight: 600;
}
.film--framed .film__plate--centered{
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 clamp(20px, 6vw, 80px);
text-align: center;
gap: var(--sp-3, 16px);
}
.film--framed .film__rule{
display: block;
width: 88px;
height: 2px;
background: var(--gold, #C9A24A);
margin-bottom: 4px;
}
.film--framed .film__q{
font-family: var(--font-display, "Playfair Display", serif);
font-size: clamp(1.3rem, 2.4vw, 2rem);
line-height: 1.28;
color: var(--paper, #F7F5EF);
margin: 0;
max-width: 32ch;
}
.film--framed .film__coming{
position: absolute;
bottom: clamp(18px, 2.6vw, 28px);
right: clamp(20px, 3vw, 32px);
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 16px 8px 10px;
border: 1px solid color-mix(in oklab, var(--paper) 44%, transparent);
border-radius: 999px;
color: var(--paper);
font-family: var(--font-eyebrow);
font-size: .74rem;
letter-spacing: .16em;
text-transform: uppercase;
font-weight: 600;
}
.film--framed .film__coming svg{ width: 18px; height: 18px; }
.film--framed .film__coming-label{ line-height: 1; }
@media (max-width: 640px){
.film--framed{ padding: 8px; }
.film--framed .film__stage{ aspect-ratio: 4 / 3; }
.film--framed .film__q{ font-size: 1.15rem; }
.film--framed .film__coming{
bottom: 14px; right: 14px;
padding: 6px 12px 6px 8px;
font-size: .68rem;
}
.film--framed .film__coming svg{ width: 16px; height: 16px; }
}
/* =========================================================================
Hero title — word reveal + gold AI (production parity)
========================================================================= */
.hero__line { display: block; }
.hero__word { display: inline-block; }
.hero__italic { font-style: italic; color: var(--c-steel, #5A5A5A); }
.hero__ai {
font-style: normal;
background: linear-gradient(180deg, var(--c-gold) 0%, var(--c-gold-deep) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
.hero__ai { color: var(--c-gold-text); background: none; }
}
/* per-word rise, staggered — line 1 has 3 words, line 2 has 5 words */
.hero__word {
animation: word-rise var(--dur-4) var(--ease-out) both;
}
.hero__line:nth-child(1) .hero__word:nth-child(1) { animation-delay: 40ms; }
.hero__line:nth-child(1) .hero__word:nth-child(2) { animation-delay: 100ms; }
.hero__line:nth-child(1) .hero__word:nth-child(3) { animation-delay: 160ms; }
.hero__line:nth-child(2) .hero__word:nth-child(1) { animation-delay: 260ms; }
.hero__line:nth-child(2) .hero__word:nth-child(2) { animation-delay: 320ms; }
.hero__line:nth-child(2) .hero__word:nth-child(3) { animation-delay: 380ms; }
.hero__line:nth-child(2) .hero__word:nth-child(4) { animation-delay: 440ms; }
.hero__line:nth-child(2) .hero__word:nth-child(5) { animation-delay: 500ms; }
@keyframes word-rise {
from { opacity: 0; transform: translateY(.42em); }
to { opacity: 1; transform: none; }
}
.no-js .hero__word { animation: none; opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.hero__word { animation: none; opacity: 1; transform: none; }
}
/* =========================================================================
HERO --fold — everything above the fold on a standard laptop viewport
Title \u2192 film \u2192 CTAs \u2192 note, tight vertical rhythm.
========================================================================= */
.hero--fold{
padding-top: calc(var(--header-h, 72px) + var(--sp-4));
padding-bottom: var(--sp-5);
min-height: 100dvh;
display: flex;
align-items: center;
}
.hero__inner--fold{
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(12px, 1.8vh, 24px);
width: 100%;
}
.hero__title--compact{
margin: 0;
font-size: clamp(2rem, 4.6vw, 3.4rem);
line-height: 1.06;
}
.film--fold{
width: 100%;
max-width: 880px;
margin: 0 auto;
}
.film--fold .film__stage{
aspect-ratio: 16 / 9;
max-height: min(52vh, 460px);
}
.hero__actions--compact{ margin-top: 0; }
.hero__note--compact{ margin-top: 0; }
/* short laptop screens (13" MacBook ~800px) — shrink film + title further */
@media (max-height: 820px){
.hero--fold{ padding-top: calc(var(--header-h, 72px) + var(--sp-2)); padding-bottom: var(--sp-3); }
.hero__title--compact{ font-size: clamp(1.75rem, 3.8vw, 2.6rem); }
.film--fold .film__stage{ max-height: 40vh; }
.hero__inner--fold{ gap: clamp(10px, 1.4vh, 18px); }
}
/* mobile: don't force single-fold, but keep compact rhythm */
@media (max-width: 720px){
.hero--fold{ min-height: 0; padding-bottom: var(--sp-6); }
.film--fold .film__stage{ aspect-ratio: 4 / 3; max-height: none; }
}
/* =========================================================================
FILM --fold refinements
- Cap the whole framed card so the light frame hugs the dark stage
- Bigger quote copy
- Subtle "expand" pop after page load to draw the eye
========================================================================= */
.film--fold{
/* Cap width based on height budget so 16:9 stage stays inside viewport
without leaving a huge L-shaped dead space around the dark card. */
width: min(880px, calc(52vh * (16/9) + 24px));
transform-origin: center;
animation: film-pop 900ms cubic-bezier(.16,.84,.24,1) 900ms both;
}
@media (max-height: 820px){
.film--fold{ width: min(760px, calc(40vh * (16/9) + 24px)); }
}
.film--fold .film__q{
font-size: clamp(1.5rem, 2.6vw, 2.15rem);
line-height: 1.25;
max-width: 26ch;
}
@media (max-height: 820px){
.film--fold .film__q{ font-size: clamp(1.25rem, 2.2vw, 1.75rem); }
}
/* pop animation: title finishes reveal (~500ms), then film expands ~4% and settles */
@keyframes film-pop {
0% { transform: scale(1); box-shadow: 0 8px 40px -18px rgba(0,0,0,.22); }
55% { transform: scale(1.035); box-shadow: 0 22px 60px -20px rgba(0,0,0,.32); }
100% { transform: scale(1.02); box-shadow: 0 16px 48px -20px rgba(0,0,0,.28); }
}
@media (prefers-reduced-motion: reduce){
.film--fold{ animation: none; }
}
@media (max-width: 720px){
.film--fold{ width: 100%; animation: none; }
}
/* =========================================================================
WYG OUTCOMES — match Outcome Two's stacked-title cadence
Sam wants Outcomes 1, 3, 4 to read at the same visual weight as Outcome 2
("Know your business."). Outcome 2 wraps because its two words happen to
overflow the copy column; short titles like "Know your market." sit on
one line and read visually smaller.
Fix: cap the title measure so any 3–4 word outcome title wraps its
emphasized last word onto its own line, giving all four outcomes the
same stacked, oversized read.
========================================================================= */
.outcome__split .outcome__copy .outcome__title{
max-width: 9ch;
}
.outcome__split .outcome__copy .outcome__lede{
max-width: 34ch;
}
/* Longer H2s (like Outcome 3's "Know what to do next.") need more room
than 9ch so they don't shrink to two words per line. */
#know-what-next .outcome__title{ max-width: 12ch; }
#keep-it-yours .outcome__title{ max-width: 10ch; }
@media (max-width: 900px){
.outcome__split .outcome__copy .outcome__title,
#know-what-next .outcome__title,
#keep-it-yours .outcome__title{ max-width: none; }
.outcome__split .outcome__copy .outcome__lede{ max-width: none; }
}
/* =========================================================================
FOUNDERS · LinkedIn CTA BOX
A formatted panel under the gold statement in the left column. Reads as
its own module: label on top, then a stacked list of founder LinkedIn
links with the LinkedIn logo next to each name.
========================================================================= */
.linkedin-box{
margin-top: var(--sp-6);
padding: var(--sp-4) var(--sp-4) var(--sp-4);
border: 1.5px solid color-mix(in oklab, var(--c-gold) 45%, transparent);
border-radius: 12px;
background:
linear-gradient(180deg,
color-mix(in oklab, var(--c-gold) 9%, transparent) 0%,
color-mix(in oklab, var(--paper) 4%, transparent) 100%);
box-shadow: 0 1px 0 color-mix(in oklab, var(--c-gold) 20%, transparent),
0 10px 24px rgba(0,0,0,.05);
max-width: 320px;
}
.linkedin-box__label{
margin: 0 0 var(--sp-3);
font-family: var(--font-display, Georgia, serif);
font-size: .95rem;
font-weight: 600;
line-height: 1.35;
color: var(--c-ink, #1c1a17);
}
.linkedin-box__list{
list-style: none;
padding: 0;
margin: 0;
display: flex; flex-direction: column;
gap: 6px;
}
.linkedin-row{
display: flex; align-items: center; gap: 10px;
padding: 8px 10px;
border-radius: 8px;
color: var(--c-ink, #1c1a17);
text-decoration: none;
transition: background 180ms, transform 180ms var(--ease-out);
}
.linkedin-row:hover,
.linkedin-row:focus-visible{
background: color-mix(in oklab, var(--c-gold) 14%, transparent);
transform: translateX(2px);
outline: none;
}
.linkedin-row__icon{
width: 20px; height: 20px;
color: #0a66c2; /* LinkedIn brand blue */
flex: 0 0 auto;
}
.linkedin-row__name{
font-family: var(--font-display, Georgia, serif);
font-size: 1rem;
font-weight: 500;
color: var(--c-gold-text);
letter-spacing: .005em;
}
@media (max-width: 720px){
.linkedin-box{ max-width: 100%; }
}
/* =========================================================================
HOMEPAGE · SPLIT-SECTION TOP ALIGNMENT
Sam wants section H2s to sit flush with the top edge of the software
image rather than vertically centered against it. grid--centred stays
for use elsewhere; these homepage IDs get their own align override.
========================================================================= */
#competition .grid--centred > *,
#insights .grid--centred > *,
#context .grid--centred > *,
#work-streams .grid--centred > *{
align-self: start;
}
/* Also tighten the eyebrow's optical position so the H2 baseline sits
nearer the image's top edge. */
#competition .split__copy .eyebrow,
#insights .split__copy .eyebrow,
#context .split__copy .eyebrow,
#work-streams .split__copy .eyebrow{
margin-top: 0;
}
/* =========================================================================
WYG · TIERS ON LIGHT SECTIONS
`.tier` was built for dark bands; on a white section its near-white
text becomes invisible. Give tiers on light sections dark text,
soft-gold framing, and a clear pop.
========================================================================= */
.section--white .tier,
.section--ground .tier,
.section--raised .tier{
background: linear-gradient(180deg,
color-mix(in oklab, var(--c-gold) 6%, #fff) 0%,
#fff 100%);
border: 1.5px solid color-mix(in oklab, var(--c-gold) 40%, transparent);
box-shadow: 0 1px 0 color-mix(in oklab, var(--c-gold) 22%, transparent),
0 8px 20px rgba(0,0,0,.05);
}
.section--white .tier__name,
.section--ground .tier__name,
.section--raised .tier__name{
color: var(--c-gold-text, #7A5F16);
}
.section--white .tier__num,
.section--ground .tier__num,
.section--raised .tier__num{
color: var(--c-ink, #1c1a17);
}
.section--white .tier__unit,
.section--ground .tier__unit,
.section--raised .tier__unit{
color: var(--c-steel, #5a5a5a);
}
.section--white .tier:hover,
.section--ground .tier:hover,
.section--raised .tier:hover{
border-color: var(--c-gold);
background: linear-gradient(180deg,
color-mix(in oklab, var(--c-gold) 14%, #fff) 0%,
#fff 100%);
box-shadow: 0 2px 0 color-mix(in oklab, var(--c-gold) 32%, transparent),
0 14px 28px rgba(0,0,0,.08);
}
.section--white .tier:hover .tier__name,
.section--ground .tier:hover .tier__name,
.section--raised .tier:hover .tier__name{
color: var(--c-gold-deep, #8A6D1F);
}
/* =========================================================================
WYG · OUTCOMES · KEEP ART BOTTOM-DOCKED
`outcome__split` is already top-aligned; when the left copy column is
shorter than the right art column we end up with a big gap under the
art. Push the trailing figure/quote block downward so the art visually
spans from the H2 top-line to the section's bottom edge.
========================================================================= */
.outcome__split .outcome__art{
display: flex;
flex-direction: column;
}
.outcome__split .outcome__art > .pull-quote--under,
.outcome__split .outcome__art > .dgfig{
margin-top: auto;
padding-top: var(--sp-6);
}
/* Nudge the software frame down a touch on the shorter outcomes so its
top rail lines up with the H2 baseline instead of the eyebrow. */
#know-your-market .outcome__art,
#know-your-business .outcome__art,
#know-what-next .outcome__art,
#keep-it-yours .outcome__art{
padding-top: 6px;
}
/* =========================================================================
WYG · OUTCOME 4 ON INK
Outcome 4 flipped to a dark band. Existing .section--ink inherits
white text for headings + facts; make sure the fact text stays legible
and the security lines pop in gold.
========================================================================= */
#keep-it-yours.section--ink .fact__text,
#keep-it-yours.section--ink .frame-caption,
#keep-it-yours.section--ink .dgfig__cap{
color: rgba(237, 235, 232, .82);
}
#keep-it-yours.section--ink .fact__text strong{ color: #fff; }
.gold-hl{
color: var(--c-gold, #D4AF37);
font-weight: 600;
}
/* =========================================================================
WYG · WHAT WE BELIEF PANEL
Two gold-outlined boxes with an arrow between them. Stacks on mobile.
========================================================================= */
.belief-section .section__head{ margin-bottom: var(--sp-6); }
.belief-flow{
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
gap: var(--sp-5);
align-items: stretch;
max-width: 1100px;
margin: 0 auto;
}
.belief-card{
padding: var(--sp-6) var(--sp-6) var(--sp-6);
border-radius: 14px;
background: #fff;
border: 1.75px solid color-mix(in oklab, var(--c-gold) 45%, transparent);
box-shadow: 0 1px 0 color-mix(in oklab, var(--c-gold) 22%, transparent),
0 14px 32px rgba(0,0,0,.06);
display: flex; flex-direction: column;
}
.belief-card--reply{
background: linear-gradient(180deg,
color-mix(in oklab, var(--c-gold) 10%, #fff) 0%,
#fff 60%);
border-color: var(--c-gold);
box-shadow: 0 2px 0 color-mix(in oklab, var(--c-gold) 35%, transparent),
0 18px 40px rgba(0,0,0,.08);
}
.belief-card__label{
font-size: var(--fs-eyebrow, .75rem);
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--c-steel, #6b665a);
margin-bottom: var(--sp-3);
}
.belief-card__label--gold{ color: var(--c-gold-deep, #8A6D1F); }
.belief-card__statement{
font-family: var(--ff-display, Georgia, serif);
font-size: clamp(1.4rem, 2.1vw, 1.85rem);
line-height: 1.28;
color: var(--c-ink, #1c1a17);
margin: 0;
font-weight: 500;
}
.belief-card__note{
margin-top: var(--sp-4);
color: var(--c-steel, #5a5a5a);
line-height: 1.55;
font-size: 1rem;
}
.belief-brand{
color: var(--c-gold-deep, #8A6D1F);
font-weight: 700;
background: color-mix(in oklab, var(--c-gold) 18%, transparent);
padding: 0 6px;
border-radius: 4px;
box-shadow: inset 0 -3px 0 color-mix(in oklab, var(--c-gold) 55%, transparent);
}
.belief-arrow{
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 6px;
color: var(--c-gold);
padding: 0 var(--sp-2);
}
.belief-arrow svg{ width: 64px; height: auto; }
.belief-arrow__label{
font-size: .7rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--c-gold-deep, #8A6D1F);
font-weight: 600;
}
@media (max-width: 820px){
.belief-flow{
grid-template-columns: minmax(0, 1fr);
gap: var(--sp-3);
}
.belief-arrow{ padding: var(--sp-2) 0; }
.belief-arrow svg{ transform: rotate(90deg); width: 40px; }
}
/* =========================================================================
WYG · WITH AND WITHOUT · nudge headline up, frame down
========================================================================= */
#two-versions .outcome__copy{ padding-top: 0; }
#two-versions .outcome__art{ margin-top: var(--sp-4); }
/* =========================================================================
WYG · B8 CLOSE ON GRAY
The closing "The first step" band flipped from ink-deep to ground; make
sure the display heading + lede render in dark ink and the eyebrow is
still readable on the gray backdrop.
========================================================================= */
.section--ground .display,
.section--ground .section__lede{ color: var(--c-ink, #1c1a17); }
/* =========================================================================
INDEX CARDS · center the glyph + title vertically now that "Read this"
footer is gone. Cards still stretch equally in the grid.
========================================================================= */
.index-card{ justify-content: center; }
/* =========================================================================
PASS 1 · HOMEPAGE SIMPLIFICATION
Hero sub, product-section split refinement, Guided Setup toggle.
========================================================================= */
/* Hero sub-headline (single explanation, sits between H1 and video) */
.hero__sub {
margin: var(--sp-4) auto var(--sp-6);
max-width: 60ch;
text-align: center;
font-family: var(--ff-serif, Georgia, serif);
font-style: italic;
font-size: clamp(1.15rem, 1.6vw, 1.5rem);
line-height: 1.45;
color: var(--c-ink, #1c1a17);
}
.hero__sub--compact { margin-top: var(--sp-3); margin-bottom: var(--sp-5); }
/* 40/60 for the four homepage product sections. col--1-5 → 5/12 = 41.6%; nudge
to a strict 40/60 to give the screenshot more real estate. */
#competition .grid--centred,
#context .grid--centred,
#insights .grid--centred,
#work-streams .grid--centred {
grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
gap: var(--sp-8, 3rem);
}
#competition .col--1-5,
#context .col--1-5,
#insights .col--1-5,
#work-streams .col--1-5 { grid-column: 1 / span 1; max-width: 44ch; }
#competition .col--6-12,
#context .col--6-12,
#insights .col--6-12,
#work-streams .col--6-12 { grid-column: 2 / span 1; }
@media (max-width: 900px) {
#competition .grid--centred,
#context .grid--centred,
#insights .grid--centred,
#work-streams .grid--centred { grid-template-columns: 1fr; }
#competition .col--1-5, #context .col--1-5, #insights .col--1-5, #work-streams .col--1-5,
#competition .col--6-12, #context .col--6-12, #insights .col--6-12, #work-streams .col--6-12 {
grid-column: 1 / -1; max-width: none;
}
}
/* ---------------------------------- Guided Setup toggle + price transitions */
.gs-toggle-row {
display: flex;
justify-content: center;
margin: 0 0 var(--sp-6);
}
.gs-toggle {
display: inline-flex;
align-items: center;
gap: var(--sp-5);
padding: 14px 22px;
border: 1px solid rgba(28, 26, 23, .12);
border-radius: 999px;
background: var(--c-white, #fff);
box-shadow: 0 1px 2px rgba(28, 26, 23, .04);
}
.gs-toggle__label { display: inline-flex; align-items: baseline; gap: 10px; }
.gs-toggle__name { font-weight: 600; font-size: 1rem; color: var(--c-ink, #1c1a17); }
.gs-toggle__price { font-size: .95rem; color: var(--c-steel, #63615c); }
.gs-switch {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
font: inherit;
}
.gs-switch__track {
position: relative;
display: inline-block;
width: 44px; height: 24px;
border-radius: 999px;
background: rgba(28, 26, 23, .18);
transition: background 180ms ease;
}
.gs-switch__thumb {
position: absolute;
top: 2px; left: 2px;
width: 20px; height: 20px;
border-radius: 50%;
background: var(--c-white, #fff);
box-shadow: 0 1px 2px rgba(0,0,0,.18);
transition: transform 180ms ease;
}
.gs-switch[aria-checked="true"] .gs-switch__track { background: var(--c-gold-mid, #b08d2a); }
.gs-switch[aria-checked="true"] .gs-switch__thumb { transform: translateX(20px); }
.gs-switch__state { font-size: .85rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-steel, #63615c); min-width: 2ch; text-align: left; }
.gs-switch__on { display: none; }
.gs-switch__off { display: inline; }
.gs-switch[aria-checked="true"] .gs-switch__on { display: inline; }
.gs-switch[aria-checked="true"] .gs-switch__off { display: none; }
.gs-switch:focus-visible { outline: 2px solid var(--c-gold-mid, #b08d2a); outline-offset: 3px; border-radius: 999px; }
/* Subtle price transition */
.plan__amt--base {
display: inline-block;
transition: opacity 180ms ease, transform 180ms ease;
}
.plan__amt--base.is-gs-changing { opacity: 0; transform: translateY(-4px); }
.plan__addon {
margin: 4px 0 0;
font-size: .85rem;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--c-gold-text, #7a5d17);
}
.plan__addon[hidden] { display: none; }
@media (max-width: 640px) {
.gs-toggle { flex-wrap: wrap; justify-content: center; gap: 12px; padding: 12px 18px; }
.gs-toggle__label { flex: 1 1 auto; justify-content: center; }
}
/* LinkedIn box moved under founder photos (right column) */
.linkedin-box--right {
margin: var(--sp-6, 2rem) auto 0;
max-width: 360px;
}
@media (max-width: 900px) {
.linkedin-box--right { margin-top: var(--sp-5, 1.5rem); }
}
/* ============================ PASS 2: Pricing compact comparison ============================ */
/* Toggle row above the plans on Pricing */
.gs-toggle-row{
display:flex; justify-content:center;
margin: 0 0 32px;
}
@media (min-width:800px){
.gs-toggle-row{ margin: 8px 0 40px; }
}
/* Compact comparison table */
.compare-wrap{
margin: 40px 0 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.compare-table{
width: 100%;
border-collapse: collapse;
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.4;
min-width: 520px;
}
.compare-table thead th{
font-weight: 600;
font-size: 15px;
padding: 14px 12px;
text-align: center;
border-bottom: 1px solid rgba(0,0,0,.15);
background: transparent;
color: var(--ink, #1D1D1D);
}
.compare-table thead th:first-child{ text-align:left; }
.compare-table thead .compare-table__col--feature{
color: var(--gold, #D4AF37);
}
.compare-table tbody th{
text-align: left;
font-weight: 500;
padding: 12px 12px;
border-bottom: 1px solid rgba(0,0,0,.08);
color: var(--ink, #1D1D1D);
white-space: nowrap;
}
.compare-table tbody td{
text-align: center;
padding: 12px 12px;
border-bottom: 1px solid rgba(0,0,0,.08);
font-size: 17px;
color: var(--ink, #1D1D1D);
}
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td{ border-bottom: none; }
.compare-table__seats th,
.compare-table__seats td{
font-weight: 600;
border-top: 1px solid rgba(0,0,0,.15);
padding-top: 16px;
}
.compare-table__seats td{ font-size: 18px; }
.compare-table__note{
margin: 14px 4px 0;
font-size: 14px;
color: var(--muted, #5A5A5A);
font-family: var(--font-sans);
}
/* Sticky first column on desktop only */
@media (min-width: 900px){
.compare-table tbody th,
.compare-table thead th:first-child{
position: sticky;
left: 0;
background: var(--paper, #F7F7F7);
z-index: 1;
}
}
/* Ink section background overrides for compare table if used elsewhere */
.section--ink .compare-table thead th,
.section--ink .compare-table tbody th,
.section--ink .compare-table tbody td{
color: var(--paper, #F7F7F7);
border-color: rgba(255,255,255,.15);
}
.section--ink .compare-table__note{ color: rgba(255,255,255,.7); }
/* Plan card: tighten body + reduce vertical stack now that per-card CTA is gone */
.plan__body--tight{
font-size: 15.5px;
line-height: 1.5;
margin: 8px 0 0;
}
.plan__addon{
margin: 4px 0 0;
font-size: 13px;
font-weight: 500;
color: var(--gold, #D4AF37);
letter-spacing: .02em;
text-transform: uppercase;
}
/* v2 guided setup bar spacing on Pricing */
.guided-setup-bar--v2{
margin-top: 40px;
}
/* ----------------------------------- Pass 3: About founder block, centered */
.linkedin-box--center {
margin: var(--sp-6) auto 0;
max-width: 24rem;
text-align: left;
}
.about-founders { margin-top: var(--sp-7); }
.about-founders .founders-photo__pair {
justify-content: center;
gap: var(--sp-6);
}
@media (max-width: 900px) {
.linkedin-box--center { margin-top: var(--sp-5); }
}
/* ---------------------------------- Pass 3 fixes: home founder prose block */
.found-right .found__close { max-width: 34rem; }
.found__prose {
font-size: var(--fs-5, 1rem);
line-height: 1.65;
color: var(--c-ink, #1c1a17);
max-width: 34rem;
}
.found__prose p {
margin: 0 0 var(--sp-4, 1rem);
}
.found__prose p:last-child { margin-bottom: 0; }
/* Center the LinkedIn box on About under the paired photos.
Note: parent is .container (block, max-width'd). Ties with base .linkedin-box
are resolved by adding an explicit wrapper margin using auto on both sides.
Higher specificity via double class ensures no other rule overrides. */
.linkedin-box.about-linkedin {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: var(--sp-6, 2rem);
max-width: 320px;
}
/* =========================================================
Pricing Decision Unit (pricing.html only)
Comparison + Guided Setup as one polished unit
========================================================= */
.pdu {
margin-top: 3.5rem;
padding: 2.75rem clamp(1.25rem, 3vw, 3rem) 2.5rem;
background: #fbfaf7;
border: 1px solid rgba(29, 29, 29, 0.08);
border-radius: 20px;
max-width: 1080px;
margin-left: auto;
margin-right: auto;
}
/* Desktop table */
.pdu__table-wrap { display: block; }
.pdu__mobile { display: none; }
.pdu-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.pdu-table thead th {
padding: 1.25rem 1rem 1.5rem;
border-bottom: 1px solid rgba(29, 29, 29, 0.14);
vertical-align: bottom;
}
.pdu-table__feature-head {
text-align: left;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.18em;
color: #5a5a5a;
text-transform: uppercase;
padding-left: 0.25rem;
width: 34%;
}
.pdu-table__plan-head {
text-align: center;
width: 22%;
position: relative;
}
.pdu-table__price {
display: inline-block;
font-family: var(--ff-sans);
font-size: clamp(1.9rem, 2.4vw, 2.25rem);
font-weight: 500;
color: #1c1a17;
line-height: 1.1;
letter-spacing: -0.01em;
}
/* Subtle mid-column accent */
.pdu-table__plan-head--mid {
border-left: 1px solid rgba(212, 175, 55, 0.35);
border-right: 1px solid rgba(212, 175, 55, 0.35);
border-top: 1px solid rgba(212, 175, 55, 0.35);
border-top-left-radius: 12px;
border-top-right-radius: 12px;
background: rgba(212, 175, 55, 0.05);
}
.pdu-table__cell--mid {
border-left: 1px solid rgba(212, 175, 55, 0.35);
border-right: 1px solid rgba(212, 175, 55, 0.35);
background: rgba(212, 175, 55, 0.05);
}
.pdu-table tbody tr {
border-bottom: 1px solid rgba(29, 29, 29, 0.08);
}
.pdu-table tbody tr:last-child {
border-bottom: none;
}
.pdu-table tbody tr:last-child .pdu-table__cell--mid {
border-bottom: 1px solid rgba(212, 175, 55, 0.35);
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
}
.pdu-table th[scope="row"] {
text-align: left;
padding: 1.35rem 0.25rem;
font-size: 1.125rem;
font-weight: 500;
color: #1c1a17;
line-height: 1.4;
}
.pdu-table td {
text-align: center;
padding: 1.35rem 0.5rem;
vertical-align: middle;
}
.pdu-check {
display: inline-block;
color: #d4af37;
font-size: 1.5rem;
line-height: 1;
font-weight: 500;
}
.pdu-dash {
display: inline-block;
color: #b8b3aa;
font-size: 1.5rem;
line-height: 1;
}
.pdu-seat {
font-family: var(--ff-sans);
font-size: 1.375rem;
font-weight: 500;
color: #1c1a17;
}
.pdu-table__seats-row th[scope="row"] {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.18em;
color: #5a5a5a;
text-transform: uppercase;
}
.pdu__seat-note {
margin: 1.5rem 0 0;
text-align: center;
font-size: 0.95rem;
color: #5a5a5a;
font-style: italic;
}
.pdu__divider {
height: 1px;
background: rgba(29, 29, 29, 0.1);
margin: 2.5rem 0 2rem;
}
/* Guided Setup add on */
.pdu-gs {
padding: 0.25rem 0.25rem 0;
}
.pdu-gs__eyebrow {
display: block;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.18em;
color: #5a5a5a;
text-transform: uppercase;
margin-bottom: 0.75rem;
}
.pdu-gs__row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid rgba(29, 29, 29, 0.1);
margin-bottom: 1rem;
flex-wrap: wrap;
}
.pdu-gs__title {
margin: 0;
font-family: var(--ff-sans);
font-size: clamp(1.5rem, 2.2vw, 1.875rem);
font-weight: 500;
color: #1c1a17;
letter-spacing: -0.01em;
line-height: 1.15;
}
.pdu-gs__price {
font-family: var(--ff-sans);
font-size: clamp(1.5rem, 2.2vw, 1.875rem);
font-weight: 500;
color: #d4af37;
line-height: 1.15;
letter-spacing: -0.01em;
}
.pdu-gs__period {
font-family: var(--ff-sans);
font-size: 0.95rem;
font-weight: 500;
color: #5a5a5a;
margin-left: 0.15rem;
}
.pdu-gs__body {
margin: 0 0 0.6rem;
font-size: 1.0625rem;
line-height: 1.55;
color: #1c1a17;
max-width: 46rem;
}
.pdu-gs__body--muted {
color: #5a5a5a;
font-size: 0.95rem;
}
.pdu-gs__body:last-child {
margin-bottom: 0;
}
/* Mobile */
@media (max-width: 720px) {
.pdu {
padding: 1.75rem 1.25rem 2rem;
border-radius: 16px;
margin-top: 2.5rem;
}
.pdu__table-wrap { display: none; }
.pdu__mobile {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.pdu-mplan {
border: 1px solid rgba(29, 29, 29, 0.12);
border-radius: 14px;
padding: 1.25rem 1.25rem 1rem;
background: #ffffff;
}
.pdu-mplan--mid {
border-color: rgba(212, 175, 55, 0.55);
background: rgba(212, 175, 55, 0.04);
}
.pdu-mplan__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid rgba(29, 29, 29, 0.08);
margin-bottom: 0.85rem;
}
.pdu-mplan__price {
font-family: var(--ff-sans);
font-size: 2rem;
font-weight: 500;
color: #1c1a17;
letter-spacing: -0.01em;
line-height: 1;
}
.pdu-mplan__seats {
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #5a5a5a;
}
.pdu-mplan__list {
list-style: none;
margin: 0;
padding: 0;
}
.pdu-mplan__list li {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.6rem 0;
font-size: 1rem;
color: #1c1a17;
border-bottom: 1px solid rgba(29, 29, 29, 0.06);
}
.pdu-mplan__list li:last-child { border-bottom: none; }
.pdu-gs__row {
flex-direction: column;
align-items: flex-start;
gap: 0.35rem;
}
}
/* =========================================================================
MOBILE-FIRST PRODUCT SECTION HIERARCHY + GLOBAL READABILITY LIFT
Per Trent's mobile spec: OUTCOME HEADLINE → SCREENSHOT → MODULE → EXPLANATION
Desktop preserves the current side-by-side split.
========================================================================= */
/* Desktop: hide mobile-only pieces */
.prod-section__headline { display: none; }
.prod-section__module-block { display: none; }
/* Mobile: swap. Hide desktop copy block. Show top headline + module block. */
@media (max-width: 900px) {
/* The section headline shows above the screenshot on mobile */
.prod-section__headline {
display: block;
text-align: center;
margin: 0 auto var(--sp-5, 1.25rem);
max-width: 22ch;
padding: 0 0.25rem;
}
.prod-section--ink .prod-section__headline { color: var(--c-white, #fff); }
/* Hide the split-column copy block on mobile (the desktop one) */
.prod-section .prod-section__copy { display: none; }
/* Grid becomes flow: headline is already outside .grid. Screenshot is
inside grid, and module block sits inside grid AFTER the screenshot. */
.prod-section .prod-section__grid {
display: block;
max-width: 640px;
margin: 0 auto;
}
/* Screenshot: 92% content width, no extra cards, no crops */
.prod-section .prod-section__shot {
width: 92%;
max-width: 640px;
margin: 0 auto var(--sp-5, 1.25rem);
display: block;
}
.prod-section .prod-section__shot .shot__img {
width: 100%;
height: auto;
display: block;
}
/* Module label + body — centered under screenshot */
.prod-section__module-block {
display: block;
text-align: center;
max-width: 34ch;
margin: 0 auto var(--sp-3, 0.75rem);
padding: 0 1rem;
}
.prod-section__module {
display: block;
font-family: var(--font-sans, "Inter", sans-serif);
font-weight: 700;
font-size: 1.375rem; /* ~22px */
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--c-gold, #d4af37);
margin-bottom: 0.65rem;
line-height: 1.15;
}
.prod-section--ink .prod-section__module { color: var(--c-gold, #d4af37); }
.prod-section__body-mobile {
font-family: var(--font-sans, "Inter", sans-serif);
font-size: 1.1875rem; /* ~19px */
line-height: 1.5;
color: var(--c-ink, #1c1a17);
margin: 0 auto;
max-width: 32ch;
}
.prod-section--ink .prod-section__body-mobile { color: var(--c-on-dark-2, rgba(255,255,255,0.85)); }
/* Section spacing: keep the four elements visually connected. Reduce any
legacy padding excess between the container header and the grid. */
.prod-section .container { padding-top: var(--sp-8, 3rem); padding-bottom: var(--sp-8, 3rem); }
}
/* =========================================================================
MOBILE READABILITY LIFT — GLOBAL
Raise all secondary/small text so nothing meaningful is below 16px on
mobile. Ensure body/subtext lands around 18-20px. Preserve headline
hierarchy: headlines remain larger than body.
========================================================================= */
@media (max-width: 900px) {
:root {
--fs-xs: 1rem; /* 16px floor for meaningful text */
--fs-sm: 1.0625rem; /* ~17px */
--fs-body: 1.1875rem; /* ~19px */
--fs-base: 1.0625rem; /* ~17px */
--fs-eyebrow: 1rem; /* 16px, up from 13px */
--fs-lead: 1.25rem; /* ~20px */
}
/* Section lede — comfortable reading */
.section__lede {
font-size: 1.1875rem;
line-height: 1.55;
}
/* Eyebrow — no longer a tiny label */
.eyebrow {
font-size: 1rem;
letter-spacing: 0.14em;
}
/* Body copy default */
body, p {
font-size: 1.1875rem;
line-height: 1.55;
}
/* Plan card copy on mobile (pricing preview) */
.plan__body {
font-size: 1.0625rem;
line-height: 1.5;
}
.plan__spec { font-size: 1rem; }
.plan__addon { font-size: 0.9375rem; }
/* FAQ / straight answers */
.faq__q, .faq-q, .straight__q { font-size: 1.1875rem; }
.faq__a, .faq-a, .straight__a { font-size: 1.0625rem; line-height: 1.55; }
/* Footer, captions, security numbers stay smaller but not tiny */
.site-footer, .site-footer p, .site-footer a { font-size: 1rem; }
/* Founder copy */
.founder__name, .founders__name { font-size: 1.1875rem; }
.founder__title, .founders__title { font-size: 1.0625rem; }
}
/* =========================================================================
DESKTOP READABILITY LIFT — TARGETED
Raise only clearly-too-small support text on desktop, without altering
the approved layouts. Keeps headline hierarchy intact.
========================================================================= */
@media (min-width: 901px) {
/* Eyebrows are the most common desktop offender at 13px */
.eyebrow {
font-size: 0.9375rem; /* 15px, was 13px */
letter-spacing: 0.14em;
}
/* .fs-xs used on captions and small annotations */
.prose small, .prose .small { font-size: 0.9375rem; }
/* Footer legal / meta */
.site-footer, .site-footer p, .site-footer a { font-size: 0.9375rem; }
}
/* =========================================================================
PDU MOBILE — inherit the readability lift for prices/rows
========================================================================= */
@media (max-width: 720px) {
.pdu-mplan__price { font-size: 1.75rem; }
.pdu-mplan__seats { font-size: 1.0625rem; }
.pdu-mplan__feature { font-size: 1.0625rem; }
.pdu__seat-note { font-size: 1rem; }
.pdu-gs__body { font-size: 1.0625rem; line-height: 1.5; }
}
/* ============================================================ */
/* Guided Setup: rebuilt toggle card (checkbox-based) */
/* ============================================================ */
.gs-toggle-row [data-gs-toggle-root],
.gs-toggle-row {
margin: 8px auto 36px;
max-width: 720px;
display: flex;
justify-content: center;
}
.gs-card {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 24px;
width: 100%;
padding: 20px 24px;
background: rgba(255,255,255,0.85);
border: 1px solid rgba(29,29,29,0.12);
border-radius: 16px;
box-shadow: 0 2px 12px rgba(29,29,29,0.05);
cursor: pointer;
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.gs-card:hover { border-color: rgba(212,175,55,0.55); box-shadow: 0 4px 18px rgba(29,29,29,0.09); }
.gs-card:focus-within { border-color: #b08d2a; box-shadow: 0 0 0 3px rgba(176,141,42,0.18); }
.gs-card__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gs-card__title { font-family: var(--ff-sans); font-weight: 600; font-size: 1.375rem; color: #1d1d1d; line-height: 1.15; }
.gs-card__desc { font-size: 0.9375rem; color: #5a5a5a; line-height: 1.4; }
.gs-card__side { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.gs-card__price { font-weight: 600; font-size: 1.0625rem; color: #1d1d1d; white-space: nowrap; }
.gs-card__control { position: relative; width: 52px; height: 30px; flex-shrink: 0; }
.gs-card__input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
z-index: 2;
}
.gs-card__track {
position: absolute;
inset: 0;
border-radius: 999px;
background: #cfcbc4;
transition: background 0.2s ease;
display: block;
}
.gs-card__thumb {
position: absolute;
top: 3px;
left: 3px;
width: 24px;
height: 24px;
border-radius: 50%;
background: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.25);
transition: transform 0.2s ease;
}
.gs-card__input:checked ~ .gs-card__track { background: #b08d2a; }
.gs-card__input:checked ~ .gs-card__track .gs-card__thumb,
.gs-card__input:checked + .gs-card__track .gs-card__thumb { transform: translateX(22px); }
.gs-card__input:focus-visible ~ .gs-card__track { box-shadow: 0 0 0 3px rgba(176,141,42,0.35); }
@media (max-width: 640px) {
.gs-card {
grid-template-columns: 1fr;
gap: 14px;
padding: 18px 20px;
text-align: left;
}
.gs-card__side { justify-content: space-between; width: 100%; }
.gs-card__title { font-size: 1.25rem; }
}
/* ============================================================ */
/* Compare plans: CSS Grid comparison (desktop) */
/* ============================================================ */
.pcmp-wrap { max-width: 1080px; margin: 72px auto 0; position: relative; }
.pcmp__title {
font-family: var(--font-serif, "Cormorant Garamond", serif);
font-weight: 500;
font-size: 2.5rem;
color: #1d1d1d;
text-align: center;
margin: 0 0 48px;
letter-spacing: -0.01em;
position: relative;
}
.pcmp__title::after {
content: "";
display: block;
width: 48px;
height: 2px;
background: linear-gradient(90deg, transparent, #b08d2a, transparent);
margin: 18px auto 0;
}
.pcmp {
display: block;
border-radius: 20px;
overflow: visible;
background: #ffffff;
border: 1px solid rgba(29,29,29,0.08);
box-shadow: 0 4px 24px rgba(29,29,29,0.06);
position: relative;
}
.pcmp__row {
display: grid;
grid-template-columns: 34% 22% 22% 22%;
align-items: center;
border-bottom: 1px solid rgba(29,29,29,0.06);
position: relative;
transition: background 0.2s ease;
}
.pcmp__row:hover:not(.pcmp__row--head):not(.pcmp__row--seats) {
background: rgba(212,175,55,0.025);
}
.pcmp__row:last-child { border-bottom: none; }
.pcmp__cell { padding: 22px 20px; }
.pcmp__cell--feat {
font-size: 1.125rem;
font-weight: 500;
color: #1d1d1d;
text-align: left;
position: relative;
padding-left: 40px;
}
.pcmp__cell--feat::before {
content: "";
position: absolute;
left: 20px;
top: 50%;
width: 8px;
height: 8px;
border: 1.5px solid #b08d2a;
border-radius: 50%;
transform: translateY(-50%);
background: transparent;
opacity: 0.65;
}
.pcmp__cell--v { text-align: center; }
.pcmp__row--head {
padding: 0;
background: linear-gradient(180deg, #faf8f2 0%, #fafaf9 100%);
border-bottom: 2px solid rgba(176,141,42,0.20);
border-radius: 20px 20px 0 0;
}
.pcmp__row--head .pcmp__cell { padding: 32px 20px 26px; }
.pcmp__row--head .pcmp__cell--feat::before { display: none; }
.pcmp__row--head .pcmp__cell--feat {
padding-left: 20px;
font-family: var(--font-serif, "Cormorant Garamond", serif);
font-style: italic;
font-size: 1.0625rem;
color: #5a5a5a;
letter-spacing: 0.02em;
text-transform: none;
font-weight: 500;
}
.pcmp__cell--plan { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; }
.pcmp__plan-name {
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.14em;
color: #5a5a5a;
text-transform: uppercase;
margin-bottom: 8px;
}
.pcmp__cell--mid .pcmp__plan-name { color: #b08d2a; }
.pcmp__price {
font-family: var(--font-serif, "Cormorant Garamond", serif);
font-size: 2.375rem;
font-weight: 600;
color: #1d1d1d;
line-height: 1;
margin-top: 2px;
letter-spacing: -0.01em;
}
.pcmp__cell--mid .pcmp__price { color: #8a6e1f; }
.pcmp__per { font-size: 0.9375rem; color: #5a5a5a; margin-top: 2px; font-style: italic; }
.pcmp__tag {
position: absolute;
top: -14px;
left: 50%;
transform: translate(-50%, -100%);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #ffffff;
background: linear-gradient(135deg, #b08d2a 0%, #d4af37 100%);
padding: 8px 14px;
border-radius: 999px;
white-space: nowrap;
box-shadow: 0 3px 10px rgba(176,141,42,0.35);
}
.pcmp__cell--mid {
background: linear-gradient(180deg, rgba(212,175,55,0.08) 0%, rgba(212,175,55,0.04) 100%);
position: relative;
}
.pcmp__cell--mid::before,
.pcmp__cell--mid::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background: rgba(176,141,42,0.25);
}
.pcmp__cell--mid::before { left: 0; }
.pcmp__cell--mid::after { right: 0; }
.pcmp__row--head .pcmp__cell--mid {
background: linear-gradient(180deg, rgba(212,175,55,0.15) 0%, rgba(212,175,55,0.08) 100%);
border-top: 2px solid #b08d2a;
border-radius: 20px 20px 0 0;
margin-top: -1px;
}
.pcmp__row--seats {
background: linear-gradient(180deg, #fafaf9 0%, #f5f2ea 100%);
border-top: 2px solid rgba(176,141,42,0.20);
border-radius: 0 0 20px 20px;
}
.pcmp__row--seats .pcmp__cell--feat {
font-family: var(--font-serif, "Cormorant Garamond", serif);
font-style: italic;
font-weight: 600;
font-size: 1.1875rem;
color: #1d1d1d;
}
.pcmp__row--seats .pcmp__cell--feat::before {
background: #b08d2a;
opacity: 1;
}
.pcmp__row--seats .pcmp__cell--mid { border-radius: 0; }
.pcmp-check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
font-size: 1.375rem;
color: #b08d2a;
line-height: 1;
background: rgba(212,175,55,0.10);
border-radius: 50%;
font-weight: 600;
}
.pcmp__cell--mid .pcmp-check {
background: rgba(212,175,55,0.20);
color: #8a6e1f;
box-shadow: 0 2px 8px rgba(176,141,42,0.20);
}
.pcmp-dash {
display: inline-block;
font-size: 1.375rem;
color: #c8c2b6;
line-height: 1;
font-weight: 300;
}
.pcmp-seat {
font-family: var(--font-serif, "Cormorant Garamond", serif);
font-size: 1.75rem;
font-weight: 600;
color: #1d1d1d;
letter-spacing: -0.01em;
}
.pcmp__cell--mid .pcmp-seat { color: #8a6e1f; }
/* ============================================================ */
/* Compare plans: stacked cards (mobile) */
/* ============================================================ */
.pcmp-mobile { display: none; }
@media (max-width: 900px) {
.pcmp { display: none; }
.pcmp-mobile {
display: flex;
flex-direction: column;
gap: 20px;
}
.pcmp-mcard {
background: #ffffff;
border: 1px solid rgba(29,29,29,0.10);
border-radius: 16px;
padding: 24px 20px 8px;
position: relative;
}
.pcmp-mcard--mid {
border-color: rgba(176,141,42,0.45);
background: rgba(212,175,55,0.05);
}
.pcmp-mcard__tag {
display: inline-block;
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
color: #b08d2a;
background: #fdf7e6;
padding: 5px 12px;
border-radius: 999px;
border: 1px solid rgba(176,141,42,0.35);
white-space: nowrap;
}
.pcmp-mcard__head {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(29,29,29,0.08);
}
.pcmp-mcard__name {
font-size: 0.9375rem;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
color: #1d1d1d;
}
.pcmp-mcard__price {
font-family: var(--font-serif, "Cormorant Garamond", serif);
font-size: 2rem;
font-weight: 600;
color: #1d1d1d;
line-height: 1.05;
margin-top: 4px;
}
.pcmp-mcard__per { font-size: 1rem; color: #5a5a5a; font-family: inherit; }
.pcmp-mcard__seats {
font-size: 0.9375rem;
color: #5a5a5a;
margin-top: 6px;
}
.pcmp-mcard__list {
list-style: none;
padding: 0;
margin: 0;
}
.pcmp-mcard__list li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
font-size: 1.125rem;
color: #1d1d1d;
border-bottom: 1px solid rgba(29,29,29,0.06);
}
.pcmp-mcard__list li:last-child { border-bottom: none; }
.pcmp-mcard__list li > span:first-child { text-align: left; }
}
.pcmp__seat-note {
text-align: center;
font-style: italic;
font-size: 1rem;
color: #5a5a5a;
margin: 24px 0 40px;
}
/* ============================================================ */
/* Guided Setup panel (below the comparison) */
/* ============================================================ */
.gspanel {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 32px;
padding: 32px;
background: #ffffff;
border: 1px solid rgba(29,29,29,0.10);
border-radius: 16px;
position: relative;
}
.gspanel__left { display: flex; flex-direction: column; gap: 8px; }
.gspanel__right { display: flex; flex-direction: column; gap: 10px; }
.gspanel__eyebrow {
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #b08d2a;
}
.gspanel__title {
font-family: var(--font-serif, "Cormorant Garamond", serif);
font-weight: 600;
font-size: 1.75rem;
color: #1d1d1d;
margin: 4px 0 6px;
line-height: 1.15;
}
.gspanel__price {
font-family: var(--font-serif, "Cormorant Garamond", serif);
font-weight: 600;
font-size: 2rem;
color: #b08d2a;
line-height: 1;
}
.gspanel__per { font-size: 1rem; color: #5a5a5a; font-family: inherit; font-weight: 500; }
.gspanel__body {
font-size: 1rem;
color: #1d1d1d;
line-height: 1.5;
margin: 0;
}
.gspanel__body--muted { color: #5a5a5a; }
.gspanel__foot {
grid-column: 1 / -1;
font-size: 0.9375rem;
color: #5a5a5a;
font-style: italic;
margin: 20px 0 0;
padding-top: 20px;
border-top: 1px solid rgba(29,29,29,0.08);
line-height: 1.45;
}
@media (max-width: 720px) {
.gspanel { grid-template-columns: 1fr; gap: 16px; padding: 24px 20px; }
.gspanel__title { font-size: 1.5rem; }
.gspanel__price { font-size: 1.75rem; }
}
/* Legacy pdu-gs standalone card is retired; keep it hidden if any old
cached HTML lingers. The comparison table itself is back. */
.pdu__seat-note, .pdu__divider, .pdu-gs { display: none !important; }
/* ---------------------------------------------------------
Pricing above-the-fold compression (Sam request 2026-08-20)
Shrinks page-head, plans section padding, and gspanel so
the toggle + 3 tiers + seat note + Guided Setup all fit
in one viewport on desktop.
Scoped classes only — desktop-only tightening.
--------------------------------------------------------- */
@media (min-width: 1080px) {
.page-head--compact { padding-top: var(--sp-9); padding-bottom: var(--sp-3); }
.page-head--compact .page-head__title--sm {
font-size: clamp(1.35rem, 1.7vw, 1.6rem);
line-height: 1.15;
margin-top: var(--sp-1);
margin-bottom: 0;
}
.pricing-hero-section--compact { padding-block: var(--sp-4); }
.pricing-hero-section--compact .gs-toggle-row { margin: 0 0 var(--sp-4); }
.pricing-hero-section--compact .plans--triple { row-gap: var(--sp-4); }
.pricing-hero-section--compact .plan { padding-block: var(--sp-5); }
.pricing-hero-section--compact .pcmp-wrap { margin-top: var(--sp-4); }
.pricing-hero-section--compact .pcmp__seat-note { margin: 0 0 var(--sp-3); font-size: 0.9rem; }
.gspanel--compact {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 24px;
padding: 16px 22px;
}
.gspanel--compact .gspanel__left { display: flex; flex-direction: column; gap: 4px; }
.gspanel--compact .gspanel__title { margin: 0; font-size: 1.05rem; line-height: 1.2; }
.gspanel--compact .gspanel__body { margin: 0; font-size: 0.92rem; line-height: 1.4; }
.gspanel--compact .gspanel__right { display: flex; align-items: center; }
.gspanel--compact .gspanel__price { font-size: 1.55rem; line-height: 1; white-space: nowrap; }
.gspanel--compact .gspanel__per { font-size: 0.85rem; margin-left: 2px; }
.gspanel--compact .gspanel__foot { display: none; }
}
/* ==========================================================
Investment comparison (pricing.html, B2.5)
Replaces "Three ways" cards with option row + horizontal
dark chart. Section keeps its ink-deep background.
========================================================= */
.invcmp {
margin: 1.5rem auto 0;
max-width: 1080px;
}
/* Option columns align to chart plot area (offset by y-axis width) */
.invcmp__cols {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
padding: 0 4% 1.25rem;
margin-left: calc(96px + 0.75rem);
border-bottom: 0;
}
.invcmp__col {
padding: 0 1.5rem;
border-left: 1px solid rgba(255, 255, 255, 0.12);
color: #f7f7f7;
min-height: 0;
}
.invcmp__col:first-child { border-left: none; }
.invcmp__label {
display: block;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.18em;
color: #b8b3aa;
text-transform: uppercase;
margin-bottom: 0.6rem;
}
.invcmp__label--us { color: #d4af37; }
.invcmp__title {
margin: 0 0 0.75rem;
font-family: var(--ff-display);
font-weight: 500;
font-size: clamp(1.5rem, 2vw, 1.9rem);
line-height: 1.05;
letter-spacing: -0.01em;
color: #f7f7f7;
}
.invcmp__note {
margin: 0;
display: flex;
gap: 0.55rem;
align-items: flex-start;
font-size: 0.9375rem;
line-height: 1.4;
color: #dedbd4;
}
.invcmp__star {
color: #d4af37;
font-size: 1rem;
line-height: 1.35;
flex-shrink: 0;
}
/* Chart */
.invcmp__chart {
display: grid;
grid-template-columns: 96px 1fr;
gap: 0.75rem;
margin-top: 0.75rem;
height: 200px;
position: relative;
}
.invcmp__yaxis {
position: relative;
height: 100%;
}
.invcmp__ylabel {
position: absolute;
right: 0;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #b8b3aa;
transform: translateY(-50%);
white-space: nowrap;
}
.invcmp__ylabel--head { top: 0; color: #f7f7f7; }
.invcmp__ylabel--high { top: 15%; }
.invcmp__ylabel--med { top: 45%; }
.invcmp__ylabel--low { top: 78%; }
.invcmp__plot {
position: relative;
height: 100%;
border-left: 1px solid rgba(255, 255, 255, 0.18);
}
.invcmp__grid {
position: absolute;
left: 0;
right: 0;
height: 0;
border-top: 1px dashed rgba(255, 255, 255, 0.12);
}
.invcmp__grid--high { top: 15%; }
.invcmp__grid--med { top: 45%; }
.invcmp__grid--low { top: 78%; }
.invcmp__baseline {
position: absolute;
left: 0;
right: 0;
bottom: 30px;
height: 1px;
background: rgba(255, 255, 255, 0.28);
}
.invcmp__bars {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 30px;
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: end;
padding: 0 4%;
}
.invcmp__bar-wrap {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
height: 100%;
position: relative;
}
.invcmp__bar {
width: 62%;
max-width: 130px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background: linear-gradient(180deg, #4a4a4a 0%, #2a2a2a 100%);
border: 1px solid rgba(255, 255, 255, 0.06);
border-bottom: none;
}
.invcmp__bar--high { height: 85%; }
.invcmp__bar--med { height: 55%; }
.invcmp__bar--low {
height: 22%;
background: linear-gradient(180deg, #e5c260 0%, #d4af37 100%);
border-color: rgba(212, 175, 55, 0.6);
}
.invcmp__xlabel {
position: absolute;
top: calc(100% + 8px);
font-size: 0.85rem;
color: #dedbd4;
white-space: nowrap;
text-align: center;
}
.invcmp__xlabel--us { color: #d4af37; font-weight: 600; }
/* Mobile */
@media (max-width: 720px) {
.invcmp__cols {
grid-template-columns: 1fr;
gap: 1.75rem;
padding-bottom: 2rem;
}
.invcmp__col {
padding: 0;
border-left: none;
min-height: 0;
}
.invcmp__cols {
padding: 0;
margin-left: 0;
}
.invcmp__chart {
grid-template-columns: 60px 1fr;
height: 220px;
margin-top: 0.5rem;
}
.invcmp__ylabel { font-size: 0.65rem; letter-spacing: 0.14em; }
.invcmp__xlabel {
font-size: 0.8125rem;
max-width: 100px;
white-space: normal;
line-height: 1.2;
}
.invcmp__bar { width: 70%; }
}
/* =========================================================
Homepage product-section BENEFITS (3 gold-star bullets)
Replaces the paragraph subtext under each product h2.
Works on both white and ink (dark) sections.
========================================================= */
.prod-section__benefits {
list-style: none;
padding: 0;
margin: 1.25rem 0 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.prod-section__benefits li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
font-family: inherit;
font-size: 1.0625rem;
line-height: 1.45;
color: #2a2a2a;
}
.prod-section--ink .prod-section__benefits li {
color: var(--c-on-dark-2, rgba(255,255,255,0.9));
}
.prod-section__benefit-star {
color: #d4af37;
font-size: 1rem;
line-height: 1.5;
flex-shrink: 0;
}
.prod-section__benefits--mobile {
margin-top: 0.75rem;
}
@media (max-width: 900px) {
.prod-section__benefits li {
font-size: 1rem;
}
}
/* =========================================================
How It Works step BENEFITS (4 gold-star bullets)
Replaces .step__body paragraph.
========================================================= */
.step__benefits {
list-style: none;
padding: 0;
margin: var(--sp-3) 0 0;
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.step__benefits li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
font-size: var(--fs-4);
line-height: 1.5;
color: var(--c-steel);
}
.section--ink .step__benefits li,
.section--ink-deep .step__benefits li {
color: rgba(237, 235, 232, .9);
}
.step__benefit-star {
color: var(--c-gold, #d4af37);
font-size: 1rem;
line-height: 1.55;
flex-shrink: 0;
}
@media (max-width: 900px) {
.step__benefits { gap: 0.6rem; }
}
/* =========================================================
HOW IT WORKS compact hero
Interior-page introduction. Tight vertical rhythm so the
Competition Hub section peeks into the first viewport.
========================================================= */
.page-head--hiw-compact {
padding-top: calc(var(--header-h) + var(--sp-5));
padding-bottom: var(--sp-5);
}
.page-head--hiw-compact .page-head__title {
margin-top: var(--sp-3);
font-size: clamp(2.4rem, 4.6vw, 3.6rem);
line-height: 1.05;
}
.page-head--hiw-compact .page-head__sub {
margin-top: var(--sp-3);
max-width: 38ch;
font-size: var(--fs-3);
line-height: 1.35;
}
.page-head--hiw-compact .page-head__actions {
margin-top: var(--sp-4);
}
.page-head--hiw-compact .page-head__glow { display: none; }
@media (max-width: 900px) {
.page-head--hiw-compact {
padding-top: calc(var(--header-h) + var(--sp-4));
padding-bottom: var(--sp-4);
}
.page-head--hiw-compact .page-head__title { margin-top: var(--sp-2); }
.page-head--hiw-compact .page-head__sub { margin-top: var(--sp-2); }
.page-head--hiw-compact .page-head__actions { margin-top: var(--sp-3); }
}
/* =========================================================
READABILITY PASS (site-wide)
Purpose: raise the floor on secondary text so 50-65 year old
near-vision buyers read the site without effort. No copy, no
layout, no palette changes. CSS-only.
========================================================= */
/* Gold-star product bullets (homepage + How It Works) --------- */
.prod-section__benefits li,
.step__benefits li {
font-size: 1.1875rem; /* 19px */
line-height: 1.5;
color: var(--c-steel);
}
.section--ink .prod-section__benefits li,
.section--ink-deep .prod-section__benefits li,
.section--ink .step__benefits li,
.section--ink-deep .step__benefits li {
color: rgba(237,235,232,.92);
}
.prod-section__benefit-star,
.step__benefit-star {
font-size: 1.0625rem;
line-height: 1.5;
}
/* Product module labels ------------------------------------- */
.prod-section__module {
font-size: 1rem; /* 16px min */
letter-spacing: var(--ls-eyebrow);
}
@media (max-width: 900px) {
.prod-section__module { font-size: 1.0625rem; } /* 17px on mobile */
.prod-section__benefits li,
.step__benefits li {
font-size: 1.125rem; /* 18px on mobile */
line-height: 1.5;
}
}
/* Footer readability --------------------------------------- */
.footer-col__link { font-size: 1rem !important; } /* 16px */
.footer-col__head { font-size: .9375rem; } /* 15px, label */
@media (max-width: 900px) {
.footer-col__link { font-size: 1.0625rem !important; } /* 17px */
}
/* Section ledes on dark bands - lift muted secondary text --- */
.section--ink .section__lede,
.section--ink-deep .section__lede,
.section--ink-soft .section__lede { color: var(--c-on-dark-2); }
/* Accordion (FAQ / Straight Answers) ------------------------ */
.accordion__panel {
font-size: 1.0625rem; /* 17px */
line-height: 1.6;
color: var(--c-steel);
}
@media (max-width: 900px) {
.accordion__panel { font-size: 1.125rem; } /* 18px */
.accordion__trigger { font-size: 1.125rem; } /* 18px */
}
/* Investment comparison chart labels / axis ----------------- */
.invcmp__label { font-size: 1rem; } /* 16px */
.invcmp__axis-label,
.invcmp__yaxis-label { font-size: .9375rem; }
/* Nav on desktop already fs-body (18); lift mobile nav ------ */
@media (max-width: 900px) {
.nav__link,
.nav-drawer .nav__link,
.nav-drawer__link { font-size: 1.125rem; } /* 18px */
}
/* Buttons: enforce readable label size across all variants -- */
.btn,
.btn--primary,
.btn--secondary,
.btn--ghost {
font-size: 1.0625rem; /* 17px */
}
@media (max-width: 900px) {
.btn,
.btn--primary,
.btn--secondary,
.btn--ghost { font-size: 1.125rem; } /* 18px */
}
/* Pricing: seat counts, feature rows, plan details ---------- */
.price-card__seat,
.price-card__feature,
.price-card__note,
.price-card__addon,
.price-card__meta,
.price-card__desc,
.price-card__included li {
font-size: 1.0625rem;
line-height: 1.5;
}
.price-card__plan { font-size: 1.0625rem; letter-spacing: var(--ls-eyebrow); }
@media (max-width: 900px) {
.price-card__seat,
.price-card__feature,
.price-card__note,
.price-card__addon,
.price-card__meta,
.price-card__desc,
.price-card__included li { font-size: 1.125rem; }
}
/* Founder cards (About) ------------------------------------ */
.founder-card__name,
.founder__name { font-size: 1.125rem; }
.founder-card__role,
.founder__role { font-size: 1rem; }
/* Global mobile floor: no meaningful body text below 16px --- */
@media (max-width: 900px) {
body { font-size: 1.125rem; } /* 18px base on mobile */
.eyebrow { font-size: 1rem; } /* 16px */
.section__lede { font-size: 1.125rem; line-height: 1.55; }
}
/* =========================================================
MOBILE HOMEPAGE POLISH (mobile-only)
- Shrink hero video placeholder, grow hero title
- Shorter buttons (tighter horizontal padding, same font-size)
- Bigger product section headline + software image
- Wrap module label + bullets in a card:
white sections -> dark card w/ gold label
ink sections -> light card w/ dark label
- Star alignment: fixed-width star column so every bullet's
first word aligns on a shared left edge.
========================================================= */
@media (max-width: 720px) {
/* Hero: bigger title, smaller video placeholder */
.hero__title--compact {
font-size: clamp(2.25rem, 8.4vw, 3rem);
line-height: 1.05;
}
.film--fold { width: 82%; max-width: 82%; }
.film--fold .film__stage { aspect-ratio: 4 / 3; }
/* Buttons: shorter (auto width, not full-bleed). Text size unchanged. */
.hero__actions,
.hero__actions--compact,
.hero .btn-row {
align-items: center;
}
.hero__actions .btn,
.hero__actions--compact .btn {
width: auto;
align-self: center;
flex: 0 0 auto;
padding-left: 1.35rem;
padding-right: 1.35rem;
}
}
@media (max-width: 900px) {
/* Bigger section headline */
.prod-section__headline {
font-size: clamp(2rem, 7.4vw, 2.6rem);
line-height: 1.08;
max-width: 20ch;
}
/* Bigger software image: full content width */
.prod-section .prod-section__shot {
width: 100%;
max-width: 680px;
}
/* MODULE + BULLETS CARD ---------------------------------- */
.prod-section__module-block {
max-width: 560px;
padding: 1.25rem 1.15rem 1.35rem;
border-radius: 14px;
text-align: left; /* left-align so bullets align, not centered */
margin: 0 auto var(--sp-3, 0.75rem);
}
.prod-section__module-block .prod-section__module {
display: block;
text-align: center;
margin-bottom: 0.85rem;
font-size: 1.125rem; /* 18px */
}
/* White page section -> dark card */
.section--white .prod-section__module-block,
.prod-section:not(.prod-section--ink) .prod-section__module-block {
background: #1c1a17;
color: rgba(237,235,232,.92);
box-shadow: 0 10px 28px -18px rgba(0,0,0,.35);
}
.section--white .prod-section__module-block .prod-section__module,
.prod-section:not(.prod-section--ink) .prod-section__module-block .prod-section__module {
color: var(--c-gold, #d4af37);
}
.section--white .prod-section__module-block .prod-section__benefits li,
.prod-section:not(.prod-section--ink) .prod-section__module-block .prod-section__benefits li {
color: rgba(237,235,232,.94);
}
/* Ink section -> light card */
.prod-section--ink .prod-section__module-block {
background: #f5f2ec;
color: #1c1a17;
box-shadow: 0 10px 28px -18px rgba(0,0,0,.45);
}
.prod-section--ink .prod-section__module-block .prod-section__module {
color: #7a5a12; /* darker gold for AA on light card */
}
.prod-section--ink .prod-section__module-block .prod-section__benefits li {
color: #1c1a17;
}
/* STAR + FIRST-WORD ALIGNMENT --------------------------- */
.prod-section__module-block .prod-section__benefits {
display: block;
max-width: none;
padding: 0;
margin: 0;
list-style: none;
}
.prod-section__module-block .prod-section__benefits li {
display: grid;
grid-template-columns: 1.4rem 1fr; /* fixed star column */
column-gap: 0.6rem;
align-items: start;
text-align: left;
padding: 0.35rem 0;
font-size: 1.125rem; /* 18px */
line-height: 1.45;
}
.prod-section__module-block .prod-section__benefit-star {
display: inline-block;
width: 1.4rem;
text-align: center;
font-size: 1rem;
line-height: 1.55;
color: var(--c-gold, #d4af37);
}
.prod-section--ink .prod-section__module-block .prod-section__benefit-star {
color: #a4791b;
}
}
/* =========================================================
HOW IT WORKS — mobile layout matches homepage product
pattern. Mobile-only. Desktop step layout untouched.
Order: step number + label -> headline -> image -> card
with fixed-width star column so bullets align.
========================================================= */
@media (max-width: 900px) {
/* Restack .step so image comes BEFORE benefits, even on reversed steps */
.step,
.step--reverse {
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
.step .step__copy,
.step--reverse .step__copy { display: contents; }
/* When .step__copy uses display:contents, its children become direct
children of .step so we can reorder each piece. */
.step .step__copy .step__mark,
.step--reverse .step__copy .step__mark { order: 1; }
.step .step__copy .step__label,
.step--reverse .step__copy .step__label { order: 2; }
.step .step__copy .step__title,
.step--reverse .step__copy .step__title { order: 3; }
.step .step__art,
.step--reverse .step__art { order: 4; }
.step .step__copy .step__benefits,
.step--reverse .step__copy .step__benefits { order: 5; }
/* Bigger headline + narrower measure */
.step__title {
font-size: clamp(2rem, 7.4vw, 2.6rem);
line-height: 1.08;
text-align: center;
max-width: 22ch;
margin: 0 auto;
}
/* Step number + label centered above headline */
.step__mark {
justify-content: center;
gap: var(--sp-3);
margin: 0 auto var(--sp-3);
}
.step__mark .step__rule { display: none; }
.step__label {
text-align: center;
margin: 0 auto var(--sp-3);
}
/* Software image: strip the browser-chrome frame on mobile so the image
reads clean edge-to-edge, matching the homepage product pattern. */
.step__art { width: 100%; margin: 0 auto; }
.step__art .frame {
background: transparent;
border: 0;
box-shadow: none;
padding: 0;
border-radius: 10px;
overflow: hidden;
max-width: 680px;
margin: 0 auto;
}
.step__art .frame__bar { display: none; }
.step__art .frame::after { display: none; }
.step__art .frame__img {
width: 100%;
height: auto;
display: block;
border-radius: 10px;
}
/* Wrap the benefits in the same dark card as homepage product sections.
All four HIW sections are on light backgrounds, so all get the DARK card. */
.step__benefits {
display: block;
list-style: none;
padding: 1.25rem 1.15rem 1.35rem;
margin: 0 auto;
max-width: 560px;
border-radius: 14px;
background: #1c1a17;
color: rgba(237,235,232,.94);
box-shadow: 0 10px 28px -18px rgba(0,0,0,.35);
text-align: left;
}
.step__benefits li {
display: grid;
grid-template-columns: 1.4rem 1fr;
column-gap: 0.6rem;
align-items: start;
text-align: left;
padding: 0.35rem 0;
font-size: 1.125rem;
line-height: 1.45;
color: rgba(237,235,232,.94);
}
.step__benefit-star {
display: inline-block;
width: 1.4rem;
text-align: center;
font-size: 1rem;
line-height: 1.55;
color: var(--c-gold, #d4af37);
}
/* Section spacing on mobile: tighter, matches homepage rhythm */
.section--ground.section--tall,
.section--white.section--seam.section--tall {
padding-top: var(--sp-8);
padding-bottom: var(--sp-8);
}
}
/* =========================================================
MOBILE PUSH 2026-08-21 (Sam)
1) HIW Before/After tab full-width
2) About Grounds section reflow: photos card + LinkedIn last
3) Pricing $899 bottom order swap
4) Pricing "Three ways" 3-col on mobile
========================================================= */
/* 1) HIW comparison frame: expand the title tab across the full bar */
@media (max-width: 720px) {
.tv-section .frame__bar {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.tv-section .frame__bar .frame__dots { display: none; }
.tv-section .frame__bar .frame__tab {
flex: 1 1 auto;
width: 100%;
text-align: center;
letter-spacing: .16em;
font-size: .78rem;
padding: .28rem .5rem;
white-space: normal;
}
}
/* 2) About page Grounds-for-believing section, mobile only */
@media (max-width: 900px) {
/* Turn the 2-col grid into a single stream */
.found-grid {
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
/* Let inner containers dissolve so children reorder freely */
.found-grid .found-left,
.found-grid .found-right,
.found-grid .found__close {
display: contents;
}
/* Order: eyebrow -> H2 -> rule -> sub -> photos card -> paragraphs -> LinkedIn */
.found-grid .found-left > .eyebrow { order: 1; }
.found-grid .found-left > .found-h2 { order: 2; text-align: center; }
.found-grid .found-left .rule-gold { order: 3; margin: var(--sp-3) auto; }
.found-grid .found-left .found__close > p.display--md {
order: 4;
margin: 0 auto var(--sp-4) !important;
text-align: center;
max-width: 32ch;
}
.found-grid .found-right > .founders-photo { order: 5; margin: 0 !important; }
.found-grid .found-right > div { order: 6; margin-left: auto !important; margin-right: auto !important; }
.found-grid .found-left .linkedin-box { order: 7; margin: var(--sp-3) auto 0 !important; }
/* Tighten the space Sam called out between H2 and sub */
.found-grid .found-h2 { margin-bottom: var(--sp-3); }
/* Wrap founder photos in a light card so they read as a subsection */
.found-grid .founders-photo {
background: #f5f2ec;
border-radius: 16px;
padding: 1.25rem 1rem 1.15rem;
margin: 0 auto !important;
max-width: 560px;
}
.found-grid .founders-photo .founders-photo__pair {
gap: 1rem;
}
.found-grid .founders-photo .founder-card__name {
color: #1c1a17;
}
.found-grid .founders-photo figcaption {
color: #5a5a5a !important;
}
/* Recentre eyebrow + rule on mobile since the section flows single-column */
.found-grid .found-left > .eyebrow { display: block; text-align: center; }
.found-grid .found-left .rule-gold--left { margin-left: auto; margin-right: auto; }
}
/* 2c) About page — Sam 8/25 mobile refinements */
@media (max-width: 900px) {
/* Shrink the gap between the hero and the Grounds-for-believing section */
.page-head--tall + .found-section { padding-top: var(--sp-4); }
/* Shrink margin between the eyebrow and the H2 (about page only) */
.about-band .found-grid .found-left > .eyebrow { margin-bottom: var(--sp-2); }
/* Drop the "We've been on your side of the table" line on mobile; keep the gold rule */
.about-band .found-grid .found-left .found__close > p.display--md { display: none; }
/* Condense the gap between the gold rule and the founder photo card */
.found-grid .found-left .rule-gold { margin-bottom: 0 !important; }
.found-grid .founders-photo { padding-top: .75rem; }
/* Founder name under each photo never wraps to two lines, and stays
small enough that it can't force the grid columns out of balance
(that unequal-photo-size bug came from nowrap text stretching a track) */
.about-band .founder-card__name { white-space: nowrap; font-size: .875rem; }
.found-grid .founders-photo .founders-photo__pair {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
}
/* 3) Pricing: on mobile, put "Add Guided Setup" BEFORE "Additional seats" note */
@media (max-width: 720px) {
.pcmp-wrap {
display: flex;
flex-direction: column;
gap: 0.6rem;
margin-top: var(--sp-4);
}
.pcmp-wrap .gs-toggle-row { order: 1; margin-top: 0; }
.pcmp-wrap .pcmp__seat-note {
order: 2;
margin: 0.25rem 0 0;
text-align: center;
font-size: 0.95rem;
}
/* Tighten the Boardroom card bottom margin so it sits close to the group */
.plans--triple {
gap: var(--sp-4);
margin-bottom: var(--sp-3);
}
}
/* 4) Pricing "Three ways to do this" — 3-col side by side on mobile */
@media (max-width: 720px) {
.invcmp {
margin-top: 0.5rem !important;
padding: 0 !important;
}
.invcmp__cols {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
justify-content: space-between !important;
gap: 0.4rem !important;
padding: 0 !important;
padding-bottom: 1rem !important;
margin-left: 0 !important;
grid-template-columns: none !important;
}
.invcmp__col {
flex: 1 1 0 !important;
min-width: 0 !important;
max-width: none !important;
padding: 1rem 0.75rem 1.1rem !important;
border: 1px solid rgba(255,255,255,.14) !important;
border-left: 1px solid rgba(255,255,255,.14) !important;
border-radius: 14px !important;
background: rgba(255,255,255,.03);
min-height: 0;
text-align: left;
}
.invcmp__col--us {
border-color: rgba(212,175,55,.35) !important;
background: rgba(212,175,55,.06);
}
.invcmp__label {
font-size: 0.66rem !important;
letter-spacing: 0.14em !important;
margin-bottom: 0.5rem !important;
white-space: nowrap;
}
.invcmp__title {
font-size: 1.12rem !important;
line-height: 1.15 !important;
margin: 0 0 0.6rem !important;
word-break: normal;
}
/* Kill the desktop
that was collapsing spaces at narrow widths */
.invcmp__title br { display: inline; content: " "; }
.invcmp__title br::after { content: " "; }
.invcmp__note {
font-size: 0.88rem !important;
line-height: 1.35 !important;
gap: 0.35rem !important;
align-items: flex-start;
display: flex;
}
.invcmp__star {
font-size: 0.86rem;
line-height: 1.35;
flex: 0 0 auto;
}
/* Chart: center under the cards, "Investment" sits just above HIGH like a title */
.invcmp__chart {
grid-template-columns: 60px 1fr !important;
height: 260px !important;
margin: 1.25rem auto 0 !important;
padding: 18px 0 0 0 !important;
max-width: 340px !important;
position: relative;
}
.invcmp__ylabel {
font-size: 0.66rem !important;
letter-spacing: 0.14em !important;
}
.invcmp__ylabel--high,
.invcmp__ylabel--med,
.invcmp__ylabel--low { transform: translateY(-50%) !important; }
/* Hide the in-yaxis "Investment" and render our own title above the plot */
.invcmp__ylabel--head { display: none !important; }
.invcmp__chart::before {
content: "INVESTMENT";
position: absolute;
top: 2px;
left: 60px; /* start of plot column */
font-family: inherit;
font-weight: 600;
font-size: 0.66rem;
letter-spacing: 0.16em;
color: #f7f7f7;
text-transform: uppercase;
white-space: nowrap;
}
.invcmp__xlabel {
font-size: 0.66rem !important;
max-width: none !important;
white-space: normal !important;
line-height: 1.15 !important;
letter-spacing: 0 !important;
}
.invcmp__bar { width: 60% !important; }
}
/* Zoom affordance for any lightbox-triggering figure */
.is-zoomable { cursor: zoom-in; }
.is-zoomable img { pointer-events: none; }
.is-zoomable:focus-visible { outline: 2px solid var(--c-gold, #D4AF37); outline-offset: 4px; border-radius: 4px; }