with an inline width:N% — a non-replaced inline element ignores
width/height entirely, so without this the fill computes 0x0 and the
progress bar renders permanently empty (the track is safe only because
being a flex item blockifies it). */
display: block;
height: 100%;
background: var(--accent);
border-radius: 999px;
transition: width 0.3s;
}
.section-checklist-mini-count {
font-variant-numeric: tabular-nums;
color: var(--text-dim);
flex-shrink: 0;
}
.section-card-arrow {
margin-left: auto;
color: var(--text-ghost);
font-size: 16px;
font-family: var(--font-sans);
font-weight: 400;
letter-spacing: normal;
text-transform: none;
transition: color 0.15s, transform 0.15s;
flex-shrink: 0;
line-height: 1;
}
/* ==========================================================================
Section page
========================================================================== */
.section-head {
padding: var(--s-9) 0 var(--s-6);
}
/* Mobile: 96px top padding feels like dead space below the topbar.
Tighten to 24px so content starts visible above the fold. */
@media (max-width: 768px) {
.section-head {
padding: var(--s-5) 0 var(--s-4);
}
}
.breadcrumb {
display: flex; align-items: center; gap: 10px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--text-dim);
margin-bottom: var(--s-5);
}
.breadcrumb a { color: var(--text-dim); transition: color 0.15s; }
.breadcrumb a:hover { color: var(--accent-text); }
.breadcrumb .sep { color: var(--text-ghost); }
.section-meta {
display: flex; align-items: center; gap: 12px;
margin-bottom: var(--s-4);
}
.section-badge {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
padding: 6px 12px;
border: 1px solid var(--border-hi);
border-radius: 6px;
background: var(--surface);
color: var(--accent-text);
text-transform: uppercase;
letter-spacing: 0.14em;
display: inline-flex; align-items: center; gap: 8px;
}
.section-badge .dot {
width: 5px; height: 5px; border-radius: 50%;
background: var(--badge-color, var(--accent));
box-shadow: 0 0 8px var(--badge-color, var(--accent));
}
/* Tint the section-badge dot + text to the group accent so the section
chrome reads as part of its category. Matches the index card chips. */
.section-badge[data-group="foundation"] { --badge-color: var(--g-foundation); color: var(--g-foundation); }
.section-badge[data-group="business"] { --badge-color: var(--g-business); color: var(--g-business); }
.section-badge[data-group="growth"] { --badge-color: var(--g-growth); color: var(--g-growth); }
.section-badge[data-group="brand"] { --badge-color: var(--g-brand); color: var(--g-brand); }
.section-badge[data-group="retention"] { --badge-color: var(--g-retention); color: var(--g-retention); }
.section-badge[data-group="scale"] { --badge-color: var(--g-scale); color: var(--g-scale); }
.section-badge[data-group="numbers"] { --badge-color: var(--g-numbers); color: var(--g-numbers); }
.section-badge[data-group="exit"] { --badge-color: var(--g-exit); color: var(--g-exit); }
/* Section icon — inline with the H1 (was a stacked 44px emblem).
Uses inline-block (NOT flex) so the icon flows with the title text —
when long titles wrap to multiple lines, the icon stays on the first
line next to the first word rather than being pushed to its own row
by flex-wrap. Sizing keys off 1em so the icon scales with the H1 at
any viewport (desktop 52px → icon ~50px; mobile 34px → icon ~34px). */
.section-head-icon-inline {
display: inline-block;
vertical-align: baseline;
width: 0.9em;
height: 0.9em;
margin-right: 0.3em;
/* Nudge the icon down a hair so it optically aligns with the text
baseline (the icon's visual weight sits above the text cap height). */
transform: translateY(0.1em);
/* Default to accent blue; per-group filters below override. */
filter: brightness(0) saturate(100%) invert(50%) sepia(90%) saturate(2400%) hue-rotate(190deg);
}
.section-head[data-group="foundation"] .section-head-icon-inline {
filter: brightness(0) saturate(100%) invert(63%) sepia(32%) saturate(1800%) hue-rotate(215deg);
}
.section-head[data-group="business"] .section-head-icon-inline {
filter: brightness(0) saturate(100%) invert(55%) sepia(88%) saturate(2400%) hue-rotate(190deg);
}
.section-head[data-group="growth"] .section-head-icon-inline {
filter: brightness(0) saturate(100%) invert(78%) sepia(46%) saturate(550%) hue-rotate(120deg);
}
.section-head[data-group="brand"] .section-head-icon-inline {
filter: brightness(0) saturate(100%) invert(68%) sepia(32%) saturate(1500%) hue-rotate(240deg);
}
.section-head[data-group="retention"] .section-head-icon-inline {
filter: brightness(0) saturate(100%) invert(72%) sepia(48%) saturate(1600%) hue-rotate(340deg);
}
.section-head[data-group="scale"] .section-head-icon-inline {
filter: brightness(0) saturate(100%) invert(64%) sepia(26%) saturate(2400%) hue-rotate(300deg);
}
.section-head[data-group="numbers"] .section-head-icon-inline {
filter: brightness(0) saturate(100%) invert(76%) sepia(32%) saturate(600%) hue-rotate(100deg);
}
.section-head[data-group="exit"] .section-head-icon-inline {
filter: brightness(0) saturate(100%) invert(78%) sepia(48%) saturate(900%) hue-rotate(360deg);
}
.section-head h1 {
font-size: clamp(34px, 4.5vw, 52px);
line-height: 1.05;
letter-spacing: -0.03em;
margin-bottom: var(--s-4);
max-width: 820px;
}
.section-head .subtitle {
font-size: 17px;
color: var(--text-muted);
max-width: 680px;
margin-bottom: var(--s-6);
line-height: 1.55;
}
.section-info {
display: flex; gap: var(--s-5);
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.14em;
padding-top: var(--s-4);
border-top: 1px solid var(--border);
}
.section-info span { display: flex; align-items: center; gap: 6px; }
.section-info .sep { color: var(--text-ghost); }
/* Layout: body + slim aside */
.section-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 220px;
gap: var(--s-8);
padding-bottom: var(--s-10);
}
@media (max-width: 960px) {
/* `1fr` = `minmax(auto, 1fr)` = expands to fit min-content of children.
The body column is full of blocks (.principle, .metric-grid, .pullquote,
.founders-note, ) whose intrinsic min-content widths can be 700px+.
`minmax(0, 1fr)` lets the column shrink below content min-content, so
blocks wrap/scroll inside the column instead of overflowing the page. */
.section-layout { grid-template-columns: minmax(0, 1fr); }
.section-aside { display: none; }
}
/* Body content */
.section-body-content { max-width: 720px; min-width: 0; }
/* Code blocks must clip + scroll inside the column, not push it wider. */
.section-body-content pre {
max-width: 100%;
overflow-x: auto;
white-space: pre;
}
/* Tables: same — wrap in horizontal scroll if too wide for the column. */
.section-body-content .table-wrapper {
max-width: 100%;
overflow-x: auto;
}
.section-body-content > p {
font-size: 16px;
line-height: 1.75;
color: var(--text-muted);
margin-bottom: var(--s-4);
}
.section-body-content h2 {
margin-top: var(--s-8);
margin-bottom: var(--s-4);
padding-top: var(--s-6);
border-top: 1px solid var(--border);
font-size: 26px;
position: relative;
}
.section-body-content h2::before {
content: attr(data-num);
display: block;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
color: var(--accent-text);
text-transform: uppercase;
letter-spacing: 0.14em;
margin-bottom: 10px;
}
.section-body-content h3 {
margin-top: var(--s-6);
margin-bottom: var(--s-3);
font-size: 19px;
}
.section-body-content strong { color: var(--text); font-weight: 600; }
.section-body-content ul, .section-body-content ol {
margin: 0 0 var(--s-4);
padding-left: 20px;
}
.section-body-content ul li, .section-body-content ol li {
font-size: 16px;
line-height: 1.7;
color: var(--text-muted);
margin-bottom: 8px;
}
/* =========================================================================
BLOCK TYPES — the full library
========================================================================= */
/* Principle — ONE per section. Signature moment with Rob's attribution.
Padding matches .callout (var(--s-5)) so it doesn't over-dominate as a
page-opener. Margin relaxed to var(--s-5)/var(--s-6) for the same reason. */
.principle {
margin: var(--s-5) 0 var(--s-6);
padding: var(--s-5);
background:
radial-gradient(ellipse 80% 60% at top right,
color-mix(in srgb, var(--principle-glow, var(--accent)) 22%, transparent) 0%,
transparent 60%),
radial-gradient(ellipse 60% 100% at bottom left,
color-mix(in srgb, var(--principle-glow, var(--accent)) 10%, transparent) 0%,
transparent 55%),
var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
position: relative;
overflow: hidden;
box-shadow:
0 1px 0 rgba(255,255,255,0.06) inset,
0 20px 48px -16px rgba(0,0,0,0.4),
0 0 0 1px color-mix(in srgb, var(--principle-glow, var(--accent)) 12%, transparent);
}
/* Principle glow colour per group — inherited from the .chapter data-group
attribute. Replaces the old blue left stripe; the coloured glow carries
the section's group identity across the whole card. */
.chapter[data-group="foundation"] .principle { --principle-glow: var(--g-foundation); }
.chapter[data-group="business"] .principle { --principle-glow: var(--g-business); }
.chapter[data-group="growth"] .principle { --principle-glow: var(--g-growth); }
.chapter[data-group="brand"] .principle { --principle-glow: var(--g-brand); }
.chapter[data-group="retention"] .principle { --principle-glow: var(--g-retention); }
.chapter[data-group="scale"] .principle { --principle-glow: var(--g-scale); }
.chapter[data-group="numbers"] .principle { --principle-glow: var(--g-numbers); }
.chapter[data-group="exit"] .principle { --principle-glow: var(--g-exit); }
/* Kicker picks up the same group tone so the PRINCIPLE label reads as
group-coloured too (was hardcoded to --accent-text blue). */
.chapter[data-group] .principle-kicker { color: var(--principle-glow, var(--accent-text)); }
/* Simplified kicker — replaces the old attribution row (avatar + "Rob Ward"
+ "FOUNDER'S PRINCIPLE" kicker). The block's blue gradient + left stripe
already marks it as a principle; we just need a tiny text kicker. */
.principle-kicker {
font-family: var(--font-mono);
font-size: 10px;
color: var(--accent-text);
text-transform: uppercase;
letter-spacing: 0.18em;
font-weight: 600;
margin-bottom: var(--s-3);
}
.principle-title {
font-size: 26px;
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.2;
margin-bottom: var(--s-4);
color: var(--text);
max-width: 640px;
}
.principle-body {
font-size: 16px;
line-height: 1.7;
color: var(--text-muted);
max-width: 680px;
}
/* Callouts — tip / warning / insight / info / ai / read.
Glow-tinted surface by variant, sharing the same surface language as
the founder's principle + founders-note. Drops the solid left-rule
accent bar; variant signal comes from icon + label + glow tone.
--cw-tone is the per-variant colour; the .callout base consumes it
in the dual radial-gradient background. */
.callout {
--cw-tone: var(--accent);
margin: var(--s-5) 0;
padding: var(--s-5);
background:
radial-gradient(ellipse 80% 70% at top right,
color-mix(in srgb, var(--cw-tone) 18%, transparent) 0%,
transparent 60%),
radial-gradient(ellipse 60% 100% at bottom left,
color-mix(in srgb, var(--cw-tone) 7%, transparent) 0%,
transparent 55%),
var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
position: relative;
overflow: hidden;
}
/* Variant tones — one distinct colour per variant. Same mapping as
pre-glow ("tip/ai split", warning amber, insight violet, etc.) so
nothing changes semantically for authors. */
.callout-tip { --cw-tone: var(--ok); }
.callout-warning { --cw-tone: var(--warn); }
.callout-insight { --cw-tone: var(--g-brand); }
.callout-info { --cw-tone: var(--accent); }
.callout-ai { --cw-tone: var(--g-numbers); }
.callout-read { --cw-tone: var(--g-exit); }
.callout-label {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
color: var(--accent-text);
text-transform: uppercase;
letter-spacing: 0.16em;
margin-bottom: 10px;
display: flex; align-items: center; gap: 10px;
}
/* Callout icons — naked, no chip. Status colour only. */
.callout-icon {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.callout-icon svg { width: 16px; height: 16px; stroke-width: 1.8; }
.callout-tip .callout-label,
.callout-tip .callout-icon { color: var(--ok); }
.callout-warning .callout-label,
.callout-warning .callout-icon { color: var(--warn); }
.callout-insight .callout-label,
.callout-insight .callout-icon { color: var(--g-brand); }
.callout-info .callout-label,
.callout-info .callout-icon { color: var(--accent-text); }
.callout-ai .callout-label,
.callout-ai .callout-icon { color: var(--g-numbers); }
.callout-read .callout-label,
.callout-read .callout-icon { color: var(--g-exit); }
/* Verdict modifier — colours a callout by the threshold band it lands in
(worked examples). Authored as `::::callout-info green|amber|red`.
Left border echoes .threshold-row so the verdict reads at a glance. */
.callout--verdict-green,
.callout--verdict-amber,
.callout--verdict-red { border-left: 3px solid var(--cw-tone); }
.callout--verdict-green { --cw-tone: var(--ok); }
.callout--verdict-amber { --cw-tone: var(--warn); }
.callout--verdict-red { --cw-tone: var(--err); }
.callout--verdict-green .callout-label,
.callout--verdict-green .callout-icon { color: var(--ok); }
.callout--verdict-amber .callout-label,
.callout--verdict-amber .callout-icon { color: var(--warn); }
.callout--verdict-red .callout-label,
.callout--verdict-red .callout-icon { color: var(--err); }
.callout-title {
font-size: 17px;
font-weight: 600;
margin-bottom: 8px;
color: var(--text);
letter-spacing: -0.01em;
}
.callout p { font-size: 14px; line-height: 1.65; margin-bottom: 10px; }
.callout p:last-child { margin-bottom: 0; }
/* Pullquote — flat on the page, Georgia italic, centred. Typography
spec borrowed from robyward.com .about__pullquote so the playbook's
pullquotes read in Rob's own voice. Curly talking marks wrap the
text, key phrase in accent blue via *em* or **strong**, 80% width
centred in the column. No surface, no border. */
.pullquote {
margin: var(--s-7) auto;
padding: 0;
max-width: 80%;
text-align: center;
}
.pullquote-text {
font-family: Georgia, 'Times New Roman', serif;
font-style: italic;
font-size: clamp(1.3rem, 3vw, 1.6rem);
line-height: 1.6;
color: var(--text);
font-weight: 400;
}
.pullquote-text::before { content: "\201C"; } /* opening curly double-quote */
.pullquote-text::after { content: "\201D"; } /* closing curly double-quote */
/* Emphasis — accent blue, weight 600. Both and map so
authors can use either *phrase* or **phrase** in markdown. */
.pullquote-text em,
.pullquote-text strong {
font-style: italic;
font-weight: 600;
color: var(--accent-text);
}
.pullquote-attribution {
margin-top: var(--s-3);
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.16em;
font-style: normal;
}
/* Founder's Note — same glow pattern as the callouts, accent-blue
tone so it reads as Rob's voice while sitting in the same surface
family. Drops the left accent bar. */
.founders-note {
--cw-tone: var(--accent);
margin: var(--s-6) 0;
padding: var(--s-5);
background:
radial-gradient(ellipse 80% 70% at top right,
color-mix(in srgb, var(--cw-tone) 16%, transparent) 0%,
transparent 60%),
radial-gradient(ellipse 60% 100% at bottom left,
color-mix(in srgb, var(--cw-tone) 6%, transparent) 0%,
transparent 55%),
var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
position: relative;
overflow: hidden;
}
.founders-note-label {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
color: var(--accent-text);
text-transform: uppercase;
letter-spacing: 0.16em;
margin-bottom: var(--s-3);
display: inline-flex; align-items: center; gap: 8px;
}
/* Cap silhouette sitting in the label row — sized relative to the label's
text so it scales with the mono type. */
.founders-note-cap {
width: 22px;
height: auto;
flex-shrink: 0;
color: var(--accent-text);
}
.founders-note p { font-size: 15px; line-height: 1.7; color: var(--text-muted); }
.founders-note p:last-child { margin-bottom: 0; }
/* Compare (good vs bad) */
.compare {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-3);
margin: var(--s-5) 0;
}
/* Three-up variant — activated by `::::compare three-col` in the markdown
(build.py parser emits .compare--3col on the wrapper). Was missing the
CSS rule, so 3-card compares (e.g. S21) rendered 2+1 with an orphaned
third card on row 2. */
.compare.compare--3col {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 720px) {
.compare,
.compare.compare--3col { grid-template-columns: 1fr; }
}
.compare-card {
--cw-tone: var(--accent);
padding: var(--s-5);
background:
radial-gradient(ellipse 80% 70% at top right,
color-mix(in srgb, var(--cw-tone) 18%, transparent) 0%,
transparent 60%),
radial-gradient(ellipse 60% 100% at bottom left,
color-mix(in srgb, var(--cw-tone) 7%, transparent) 0%,
transparent 55%),
var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
position: relative;
overflow: hidden;
box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}
.compare-card--bad { --cw-tone: var(--err); }
.compare-card--good { --cw-tone: var(--ok); }
.compare-card--warning { --cw-tone: var(--warn); }
.compare-card--neutral { --cw-tone: var(--text-dim); }
.compare-card-label {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.16em;
margin-bottom: var(--s-4);
display: flex;
align-items: center;
gap: 10px;
}
/* Compare icons — naked, no chip. Matches callout icon treatment. */
.compare-icon {
display: inline-flex; align-items: center;
flex-shrink: 0;
}
.compare-icon svg { width: 16px; height: 16px; stroke-width: 2.2; }
.compare-card--bad .compare-icon { color: var(--err); }
.compare-card--good .compare-icon { color: var(--ok); }
.compare-card--warning .compare-icon { color: var(--warn); }
.compare-card--neutral .compare-icon { color: var(--text-dim); }
.compare-card--bad .compare-card-label { color: var(--err); }
.compare-card--good .compare-card-label { color: var(--ok); }
.compare-card--warning .compare-card-label { color: var(--warn); }
.compare-card--neutral .compare-card-label { color: var(--text-dim); }
.compare-card ul { margin: 0 0 var(--s-3); padding: 0; list-style: none; }
.compare-card li {
font-size: 13px;
line-height: 1.55;
color: var(--text-muted);
padding-left: 16px;
position: relative;
margin-bottom: 6px;
}
.compare-card li::before {
content: "";
position: absolute;
left: 0; top: 9px;
width: 6px; height: 1px;
background: var(--text-ghost);
}
.compare-card li strong { color: var(--text); font-weight: 600; }
.compare-card-footer {
padding-top: var(--s-3);
border-top: 1px solid var(--border);
font-size: 12px;
color: var(--text);
font-weight: 500;
}
@media (max-width: 720px) { .compare { grid-template-columns: 1fr; } }
/* Metric (single key stat) — flat */
.metric {
margin: var(--s-5) 0;
padding: var(--s-5) var(--s-6);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
display: grid;
/* Cap the value column at ~38% so multi-word values like "25-40% of
total revenue" can't eat the description column and leave it as a
single-word-per-line ladder. Short values like "$200M" still look
fine — they just don't fill the whole column. */
grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
gap: var(--s-5);
align-items: center;
}
.metric-value {
font-family: var(--font-mono);
font-size: clamp(32px, 4.4vw, 48px);
font-weight: 600;
line-height: 1.1;
color: var(--accent-text);
letter-spacing: -0.03em;
font-variant-numeric: tabular-nums;
min-width: 0;
word-break: keep-all;
overflow-wrap: break-word;
}
/* Title-style metric (multi-word concept instead of a number) — uses bold
sans at a smaller size so the value column doesn't word-break mid-word.
Auto-detected at build time when the value starts with a letter and
contains spaces (e.g. "The Efficiency Equation" in S01). Numeric values
("$200M", "25-40% of total revenue") keep the big mono treatment. */
.metric--title .metric-value {
font-family: var(--font-sans);
font-size: clamp(22px, 2.6vw, 30px);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--text);
font-variant-numeric: normal;
word-break: normal;
}
@media (max-width: 720px) {
.metric { grid-template-columns: 1fr; gap: var(--s-3); }
}
.metric-label {
display: flex;
flex-direction: column;
gap: 4px;
line-height: 1.5;
}
.metric-label-title {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.16em;
font-weight: 500;
}
.metric-label-desc {
font-size: 14px;
color: var(--text-muted);
line-height: 1.55;
}
/* Metric Grid (2-4 related stats) */
.metric-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--s-3);
margin: var(--s-5) 0;
}
.metric-grid .metric-cell {
padding: var(--s-5);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
text-align: left;
}
.metric-cell-label {
font-family: var(--font-mono);
font-size: 10px;
color: var(--accent-text);
text-transform: uppercase;
letter-spacing: 0.14em;
margin-bottom: var(--s-3);
}
.metric-cell-value {
font-family: var(--font-mono);
font-size: 32px;
font-weight: 600;
line-height: 1;
color: var(--text);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
margin-bottom: 6px;
}
.metric-cell-hint { font-size: 12px; color: var(--text-dim); }
.metric-cell--ok .metric-cell-value { color: var(--ok); }
.metric-cell--warn .metric-cell-value { color: var(--warn); }
.metric-cell--err .metric-cell-value { color: var(--err); }
.metric-cell--accent .metric-cell-value { color: var(--accent-text); }
/* Metric stacked — used when a metric-grid line has the shape
`value | long-prose-description` (auto-detected at build time).
Group of related benchmarks in ONE unified surface (not three
duplicate cards). Fixed value column so mixed-length values
(`60-80%`, `3:1+`, `< 6 months`) share a gutter. Glow-tinted
background puts it in the same family as callouts / waterfall. */
.metric-stack {
margin: var(--s-5) 0;
padding: var(--s-3) var(--s-6);
background:
radial-gradient(ellipse 80% 70% at top right,
color-mix(in srgb, var(--accent) 12%, transparent) 0%,
transparent 60%),
radial-gradient(ellipse 60% 100% at bottom left,
color-mix(in srgb, var(--accent) 5%, transparent) 0%,
transparent 55%),
var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
position: relative;
overflow: hidden;
}
.metric-stacked {
display: grid;
grid-template-columns: 160px 1fr;
gap: var(--s-5);
align-items: center;
padding: var(--s-4) 0;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}
.metric-stacked + .metric-stacked {
border-top: 1px solid var(--border);
}
.metric-stacked-value {
font-family: var(--font-mono);
font-size: clamp(24px, 3vw, 32px);
font-weight: 600;
line-height: 1.1;
color: var(--accent-text);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.metric-stacked-desc {
font-family: var(--font-sans);
font-size: 14px;
color: var(--text-muted);
line-height: 1.6;
}
.metric-stacked--ok .metric-stacked-value { color: var(--ok); }
.metric-stacked--warn .metric-stacked-value { color: var(--warn); }
.metric-stacked--err .metric-stacked-value { color: var(--err); }
.metric-stacked--accent .metric-stacked-value { color: var(--accent-text); }
@media (max-width: 540px) {
.metric-stacked {
grid-template-columns: 1fr;
gap: var(--s-2);
padding: var(--s-3) 0;
}
.metric-stacked-value { font-size: 26px; }
}
/* Statement mode — single-field entries (no pipes, just a claim).
Renders as a compact card with readable sans text + a blue accent
stripe on the left, like a mini-callout. Replaces the old behaviour
where single-field lines went into the .metric-cell-value slot and
rendered as a 32px mono display — comically oversized for things
like "CCC under 60 days". */
.metric-statement-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--s-3);
margin: var(--s-5) 0;
}
.metric-statement {
padding: var(--s-4) var(--s-5);
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid var(--accent);
border-radius: var(--r-md);
font-family: var(--font-sans);
font-size: 14.5px;
color: var(--text);
line-height: 1.5;
box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}
.metric-statement strong { color: var(--text); font-weight: 700; }
/* Horizontal Steps (3-4 parallel items, circles + connecting track) */
.hsteps {
display: flex;
align-items: flex-start;
gap: 0;
margin: var(--s-6) 0;
padding: var(--s-5) 0;
position: relative;
}
/* Connecting gradient track behind the circles */
.hsteps::before {
content: "";
position: absolute;
top: calc(var(--s-5) + 28px);
left: 12%;
right: 12%;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
var(--accent-deep) 8%,
var(--accent) 50%,
var(--accent-deep) 92%,
transparent 100%);
border-radius: 2px;
opacity: 0.5;
}
.hstep {
flex: 1;
display: flex; flex-direction: column; align-items: center;
padding: 0 var(--s-3);
text-align: center;
position: relative;
z-index: 1;
}
.hstep-circle {
width: 56px; height: 56px;
border-radius: 50%;
background: var(--surface);
border: 1px solid var(--border-hi);
display: grid; place-items: center;
font: 600 18px/1 var(--font-mono);
color: var(--accent-text);
margin-bottom: var(--s-4);
position: relative;
box-shadow:
0 0 0 4px var(--bg),
0 1px 0 rgba(255,255,255,0.06) inset;
transition: transform 0.2s, border-color 0.2s;
}
.hstep:hover .hstep-circle {
transform: translateY(-2px);
border-color: var(--accent);
}
.hstep-circle::before {
content: "";
position: absolute;
inset: -1px;
border-radius: 50%;
padding: 1px;
background: linear-gradient(180deg, var(--accent-hi), transparent);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0.3;
pointer-events: none;
}
.hstep-title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 6px; letter-spacing: -0.01em; }
.hstep-desc { font-size: 12px; line-height: 1.55; color: var(--text-muted); max-width: 180px; }
.hstep-arrow { display: none; }
@media (max-width: 720px) {
.hsteps { flex-direction: column; gap: var(--s-4); }
.hsteps::before { display: none; }
}
/* Stages (horizontal cards, equal height, progressive) */
/* minmax(168px, 1fr) — lets 4-item stages (the dominant pattern, 9 of 12
blocks) fit across the body column (720px max) without orphaning the 4th
to a second row. Was minmax(220px, 1fr) which forced 3+1 wrap. */
.stages {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
gap: var(--s-3);
margin: var(--s-6) 0;
}
.stage {
padding: var(--s-5);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
display: flex; flex-direction: column;
position: relative;
min-height: 220px;
box-shadow:
0 1px 0 rgba(255,255,255,0.04) inset,
0 2px 6px rgba(0,0,0,0.15);
transition: border-color 0.2s, transform 0.2s, box-shadow 0.25s;
}
.stage:hover {
border-color: var(--border-hi);
transform: translateY(-2px);
box-shadow:
0 1px 0 rgba(255,255,255,0.06) inset,
0 10px 24px -8px rgba(0,0,0,0.35);
}
.stage-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: var(--s-4);
gap: var(--s-3);
}
.stage-icon {
display: inline-flex; align-items: center;
color: var(--accent-text);
flex-shrink: 0;
}
.stage-icon svg { width: 22px; height: 22px; stroke-width: 1.8; }
.stage-num {
font-family: var(--font-mono);
font-size: 24px;
font-weight: 500;
line-height: 1;
color: var(--text-ghost);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.stage-kicker {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
color: var(--accent-text);
text-transform: uppercase;
letter-spacing: 0.18em;
margin-bottom: var(--s-2);
}
.stage-title {
font-size: 20px;
font-weight: 700;
color: var(--text);
margin-bottom: var(--s-2);
letter-spacing: -0.02em;
}
.stage-desc {
font-size: 14px;
line-height: 1.6;
color: var(--text-muted);
margin-bottom: var(--s-4);
}
.stage-range {
display: inline-flex;
align-items: center;
padding: 6px 12px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 100px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
color: var(--accent-text);
margin-top: auto;
align-self: flex-start;
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
/* Vertical Steps (sequential funnel) — continuous connector track between circles */
.vsteps {
margin: var(--s-6) 0;
max-width: 720px;
padding-left: 12px;
position: relative;
}
/* Continuous vertical highlight track behind the number circles.
Matches the horizontal-steps ::before gradient pattern so both step
variants carry the same "these numbers are a connected sequence"
visual cue. Replaces the old per-pair .vstep::after connector. */
.vsteps::before {
content: "";
position: absolute;
/* Circle centre sits 12px + 48px margin - 48px absolute-left + 20px
half-width = 32px from .vsteps' outer box. 2px track centred → 31. */
left: 31px;
top: 16px; /* top of first circle */
bottom: 16px; /* top of last circle (doesn't need to reach the bottom) */
width: 2px;
background: linear-gradient(180deg,
transparent 0%,
var(--accent-deep) 6%,
var(--accent) 50%,
var(--accent-deep) 94%,
transparent 100%);
border-radius: 2px;
opacity: 0.5;
pointer-events: none;
}
.vstep {
padding: var(--s-5);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
position: relative;
margin-left: 48px;
box-shadow:
0 1px 0 rgba(255,255,255,0.04) inset,
0 2px 6px rgba(0,0,0,0.15);
}
.vstep + .vstep { margin-top: var(--s-4); }
.vstep-head {
display: flex; align-items: center; gap: 14px;
margin-bottom: 8px;
}
.vstep-num {
width: 40px; height: 40px;
border-radius: 50%;
background: var(--surface);
border: 1px solid var(--border-hi);
display: grid; place-items: center;
font: 600 14px/1 var(--font-mono);
color: var(--accent-text);
flex-shrink: 0;
position: absolute;
left: -48px; top: 16px;
box-shadow:
0 0 0 3px var(--bg),
0 1px 0 rgba(255,255,255,0.06) inset;
}
.vstep-title {
font-size: 16px;
font-weight: 600;
color: var(--text);
letter-spacing: -0.01em;
}
.vstep-body {
font-size: 14px;
line-height: 1.7;
color: var(--text-muted);
}
/* Waterfall — P&L statements, cost breakdowns, cash-flow templates.
Replaces the old "raw markdown code block" treatment with a proper
surface. Deductions indent + get a minus sign; subtotals pop in
accent blue with a top rule; values right-align in mono tabular.
Sits in the same surface family as callouts / founders-note. */
.waterfall {
margin: var(--s-6) 0;
padding: var(--s-5) var(--s-6);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
max-width: 640px;
}
.waterfall-row {
display: flex;
align-items: baseline;
gap: 12px;
padding: 4px 0;
font-size: 14px;
line-height: 1.5;
}
.waterfall-sign {
flex-shrink: 0;
width: 14px;
font-family: var(--font-mono);
font-size: 13px;
color: var(--text-dim);
text-align: center;
}
.waterfall-label {
flex: 1;
color: var(--text-muted);
}
.waterfall-value {
flex-shrink: 0;
font-family: var(--font-mono);
font-size: 13px;
color: var(--text);
font-variant-numeric: tabular-nums;
text-align: right;
}
.waterfall-row--topline {
font-weight: 600;
color: var(--text);
padding-top: var(--s-2);
}
.waterfall-row--topline .waterfall-label { color: var(--text); }
.waterfall-row--item {
padding-left: 0;
}
.waterfall-row--subtotal {
font-weight: 600;
margin-top: 6px;
padding-top: 8px;
border-top: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.waterfall-row--subtotal .waterfall-label { color: var(--accent-text); }
.waterfall-row--subtotal .waterfall-sign { color: var(--accent-text); }
.waterfall-row--subtotal .waterfall-value { color: var(--accent-text); }
.waterfall-gap { height: var(--s-3); }
/* Formula — flat, no outer card. The equation itself is the anchor. */
/* Formula — glow-surface family (Option A from kitchen-sink). Full-block
accent-blue glow matching callouts / waterfall / principle. Equation
sits on a blue-tinted bottom border inside the card, variables follow
as a legend with thin neutral dividers between rows. */
.formula {
margin: var(--s-6) 0;
padding: var(--s-5) var(--s-6);
background:
radial-gradient(ellipse 80% 70% at top right,
color-mix(in srgb, var(--accent) 14%, transparent) 0%,
transparent 60%),
radial-gradient(ellipse 60% 100% at bottom left,
color-mix(in srgb, var(--accent) 6%, transparent) 0%,
transparent 55%),
var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
position: relative;
overflow: hidden;
}
.formula-name {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
color: var(--accent-text);
text-transform: uppercase;
letter-spacing: 0.16em;
margin-bottom: var(--s-3);
}
.formula-eq {
font-family: var(--font-mono);
font-size: clamp(20px, 2.6vw, 26px);
color: var(--text);
font-weight: 500;
padding: var(--s-4) 0;
background: transparent;
border: 0;
border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
border-radius: 0;
margin-bottom: var(--s-4);
overflow-x: auto;
letter-spacing: -0.01em;
text-align: left;
}
.formula-eq .var { color: var(--accent-text); font-weight: 600; }
.formula-eq .op { color: var(--text-dim); }
.formula-vars {
display: grid;
gap: 0;
padding: 0;
}
.formula-var {
display: grid;
grid-template-columns: 160px 1fr;
gap: var(--s-4);
font-size: 14px;
line-height: 1.55;
padding: 8px 0;
border: 0;
}
.formula-var + .formula-var {
border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.formula-var-name {
font-family: var(--font-mono);
color: var(--accent-text);
font-weight: 600;
font-size: 12px;
}
.formula-var-desc { color: var(--text-muted); }
/* Threshold (colour-coded metric ranges) — flat, rows stand on their own */
.threshold { margin: var(--s-5) 0; }
.threshold-head {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.16em;
margin-bottom: var(--s-3);
padding-bottom: var(--s-3);
border-bottom: 1px solid var(--border);
font-weight: 500;
}
.threshold-rows { display: grid; gap: var(--s-2); }
.threshold-row {
display: grid;
grid-template-columns: 140px 1fr auto;
gap: var(--s-4);
padding: var(--s-3) var(--s-4) var(--s-3) var(--s-3);
border-radius: var(--r-sm);
align-items: center;
font-size: 14px;
border-left: 2px solid transparent;
background: var(--surface);
box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset;
}
.threshold-row--ok {
border-left-color: var(--ok);
background:
linear-gradient(90deg, rgba(34,197,94,0.10), rgba(34,197,94,0.02) 40%),
var(--surface);
}
.threshold-row--warn {
border-left-color: var(--warn);
background:
linear-gradient(90deg, rgba(245,158,11,0.10), rgba(245,158,11,0.02) 40%),
var(--surface);
}
.threshold-row--err {
border-left-color: var(--err);
background:
linear-gradient(90deg, rgba(239,68,68,0.10), rgba(239,68,68,0.02) 40%),
var(--surface);
}
.threshold-range {
font-family: var(--font-mono);
font-weight: 600;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.threshold-row--ok .threshold-range { color: var(--ok); }
.threshold-row--warn .threshold-range { color: var(--warn); }
.threshold-row--err .threshold-range { color: var(--err); }
.threshold-desc { color: var(--text-muted); line-height: 1.5; }
.threshold-label {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--text-dim);
font-weight: 500;
}
/* Tool Grid (tool/platform recommendations) */
.tool-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--s-3);
margin: var(--s-5) 0;
}
.tool-card {
padding: var(--s-5);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
transition: border-color 0.15s, transform 0.15s, background 0.15s;
display: flex; flex-direction: column;
cursor: pointer;
}
.tool-card:hover {
background: var(--surface-2);
transform: translateY(-2px);
border-color: var(--border-hi);
}
.tool-card-category {
font-family: var(--font-mono);
font-size: 10px;
color: var(--accent-text);
text-transform: uppercase;
letter-spacing: 0.14em;
margin-bottom: var(--s-3);
}
.tool-card-name {
font-size: 17px;
font-weight: 600;
color: var(--text);
margin-bottom: 6px;
letter-spacing: -0.01em;
}
.tool-card-desc {
font-size: 13px;
line-height: 1.55;
color: var(--text-muted);
margin-bottom: var(--s-3);
}
.tool-card-link {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.12em;
margin-top: auto;
padding-top: var(--s-3);
border-top: 1px solid var(--border);
transition: color 0.15s;
}
.tool-card:hover .tool-card-link { color: var(--accent-text); }
/* Tables (standard markdown) */
.md-table {
width: 100%;
margin: var(--s-5) 0;
border-collapse: collapse;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
overflow: hidden;
font-size: 14px;
}
/* Header row — Inter (not mono) so mid-length column labels scan well,
accent-blue for brand coherence, 5% accent wash + blue-tinted bottom
border for structural weight without a heavy grey fill. Mono stays
reserved for numbers / kickers / metric values elsewhere; tables are
scanning surfaces and benefit from sans-serif. */
.md-table thead {
background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}
.md-table th {
text-align: left;
padding: var(--s-3) var(--s-4);
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
color: var(--accent-text);
text-transform: uppercase;
letter-spacing: 0.08em;
border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.md-table td {
padding: var(--s-3) var(--s-4);
border-bottom: 1px solid var(--border);
color: var(--text-muted);
line-height: 1.55;
vertical-align: top;
}
.md-table tr:last-child td { border-bottom: none; }
.md-table td:first-child { color: var(--text); font-weight: 600; }
.md-table tr:hover td { background: var(--surface-2); }
/* Checklist */
.checklist {
margin: var(--s-6) 0;
padding: var(--s-5);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
}
.checklist-head {
display: flex; align-items: baseline; justify-content: space-between;
margin-bottom: var(--s-4);
padding-bottom: var(--s-3);
border-bottom: 1px solid var(--border);
}
.checklist-title {
font-size: 15px;
font-weight: 600;
color: var(--text);
display: flex; align-items: center; gap: 10px;
}
.checklist-count {
font-family: var(--font-mono);
font-size: 11px;
color: var(--accent-text);
text-transform: uppercase;
letter-spacing: 0.12em;
}
/* ── Accessibility utilities ──────────────────────────────────────────
.sr-only: visually hidden but exposed to screen readers (text alternatives,
labels). .skip-link: sr-only until keyboard-focused, then pinned top-left.
Both render nothing for sighted mouse users. */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.skip-link {
position: fixed;
top: 8px; left: 8px;
z-index: 100000;
transform: translateY(-150%);
padding: 10px 16px;
background: var(--accent);
color: #fff;
font-weight: 600;
border-radius: 8px;
text-decoration: none;
transition: transform 0.12s ease;
}
.skip-link:focus {
transform: translateY(0);
outline: 2px solid #fff;
outline-offset: 2px;
}
.checklist-items { list-style: none; margin: 0; padding: 0; }
/* Hide the real — it would otherwise render the
browser's native blue control next to our custom .checklist-check span.
Keeps it focusable + accessible (clip pattern) while invisible. */
.checklist-items input.section-checkbox {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.checklist-items label { display: contents; cursor: pointer; }
.checklist-items input.section-checkbox:focus-visible + .checklist-check {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.checklist-items input.section-checkbox:checked ~ .checklist-text {
color: var(--text-dim);
text-decoration: line-through;
text-decoration-color: var(--text-ghost);
}
.checklist-items li:has(input.section-checkbox:checked) .checklist-check {
background: var(--accent);
border-color: var(--accent);
}
.checklist-items li:has(input.section-checkbox:checked) .checklist-check::after {
content: "";
position: absolute;
left: 5px; top: 2px;
width: 4px; height: 9px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.checklist-items li {
display: flex; align-items: flex-start; gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--border);
font-size: 14px;
line-height: 1.5;
color: var(--text-muted);
cursor: pointer;
transition: color 0.15s;
}
.checklist-items li:hover { color: var(--text); }
.checklist-items li:last-child { border-bottom: none; }
.checklist-check {
width: 18px; height: 18px;
border: 1.5px solid var(--text-ghost);
border-radius: 4px;
flex-shrink: 0;
margin-top: 2px;
transition: border-color 0.15s, background 0.15s;
position: relative;
}
.checklist-items li:hover .checklist-check { border-color: var(--accent-text); }
.checklist-items li.done .checklist-check {
background: var(--accent);
border-color: var(--accent);
}
.checklist-items li.done .checklist-check::after {
content: "";
position: absolute;
left: 5px; top: 2px;
width: 4px; height: 9px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.checklist-items li.done {
color: var(--text-dim);
text-decoration: line-through;
text-decoration-color: var(--text-ghost);
}
/* Reset button, centred inside the section-complete card. One click
unticks every item in this section's checklist and returns the UI to
the in-progress state. Subtle secondary styling so it doesn't compete
with the "Section complete" celebration above it. */
.section-complete-actions {
margin-top: var(--s-5);
display: flex;
justify-content: center;
}
.checklist-reset-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-dim);
background: transparent;
border: 1px solid var(--border);
border-radius: var(--r-sm);
cursor: pointer;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.checklist-reset-btn:hover {
color: var(--text);
border-color: var(--border-hi);
background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.checklist-reset-btn:disabled {
opacity: 0.5;
cursor: wait;
}
.checklist-reset-btn svg {
color: var(--accent-text);
flex-shrink: 0;
}
/* ==========================================================================
Scroll-triggered animations for the long-form sections.
Elements with [data-animate] start invisible and fade+slide in
when scrolled into view (via IntersectionObserver in the page