/* ============================================================
STANDING OAK ADVISORS — site layout + execution layer
Tokens (colors, type scale, spacing, fonts) come from tokens.css,
which ports the canonical design system. This file is the
minimalist EXECUTION layer (restraint, whitespace, rhythm) that
sits on top — it extends the brand, it does not redefine it.
============================================================ */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html { scroll-behavior: smooth; }
/* ---------- Legibility override (execution layer) ----------
The canonical brand tokens ship body copy at weight 300 (Open Sans Light),
which reads thin and delicate on the light background - hard to read at body
size. We bump the body/small tokens to 400 (Regular) HERE (not in tokens.css,
which stays a faithful port of the brandbook) so every consumer of --t-body /
--t-small gets the more legible weight in one place. Display type (KoHo
headings) is untouched.
Eyebrow: the brandbook ships it at 0.8rem/600, which read too small for a label
meant to mark the section. Bumped to 0.9375rem (matches --t-small) at 700 (KoHo
Bold, already loaded). Same one-place override pattern; tokens.css stays a
faithful port. The eyebrow's colour change is at the .eyebrow rule below. */
:root {
--t-body: 400 1.0625rem/1.6 var(--font-body);
--t-small: 400 0.9375rem/1.55 var(--font-body);
--t-eyebrow: 700 0.9375rem/1.2 var(--font-display);
}
body {
font: var(--t-body);
color: var(--so-ink);
background: var(--so-bg);
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--so-pink); text-decoration: none; }
a:hover { color: var(--so-purple); }
h1, h2, h3 { font-family: var(--font-display); color: var(--so-navy); text-wrap: balance; }
/* ---------- Layout primitives ---------- */
.max-width-container {
width: min(1170px, 100% - var(--sp-8));
margin-inline: auto;
}
/* Minimalist vertical rhythm: sections breathe. */
section { padding-block: var(--sp-9); }
section + section { padding-top: 0; }
.section-head { max-width: 760px; margin-bottom: var(--sp-7); }
/* ---------- Buttons ---------- */
button,
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
cursor: pointer;
border-radius: var(--r-pill);
padding: 14px 26px;
font: 600 15px var(--font-display);
transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s, color .2s, border-color .2s;
}
.btn-grad {
background: var(--so-gradient);
color: #fff;
box-shadow: var(--shadow-pink);
}
.btn-grad:hover { transform: translateY(-2px); }
.btn-out {
background: #fff;
color: var(--so-navy);
border: 1.5px solid var(--so-line);
}
.btn-out:hover { border-color: var(--so-pink); color: var(--so-pink); }
/* Blue GRADIENT, white text — high-emphasis CTA (e.g. the Decision Tree).
Mirrors the calculator's gradient treatment (same 135deg angle, glow, lift)
but in the brand blue family so the two CTAs read as a matched pair. */
.btn-blue {
background: linear-gradient(135deg, var(--so-navy), var(--so-steel));
color: #fff;
box-shadow: 0 10px 30px rgba(24,49,79,.28);
}
.btn-blue:hover { transform: translateY(-2px); color: #fff; }
/* ---------- Eyebrow + section titles ---------- */
/* Eyebrow + H2 carry the OPPOSITE colors from the brandbook default (Scott, 2026-07-16).
The eyebrow is a small, uppercase, letter-spaced label; the pink gradient was the
lowest-contrast element in the section head (~4.6:1) which is why it read as washed
out and refused to feel prominent no matter the size. Navy on the page background is
~13:1, so the label now has real presence. The pink moves DOWN to the H2, where 30px
glyphs can actually carry it (~4.6:1 passes AA comfortably at large-text size).
Solid pink, not the gradient: a gradient clipped to a centered, variable-width,
sometimes-two-line headline samples an arbitrary slice of the ramp, which is the same
wash-out trap the eyebrow just came out of. */
.eyebrow {
font: var(--t-eyebrow);
letter-spacing: .16em;
text-transform: uppercase;
color: var(--so-navy);
}
.section-h2 {
font: var(--t-h2);
color: var(--so-pink);
margin-top: var(--sp-3);
max-width: 16ch;
text-wrap: balance;
}
.section-sub,
.hero-sub,
.footer-tag,
.hero-trust,
.tier-body {
font: var(--t-body);
color: var(--so-ink-soft);
}
/* ---------- Nav ---------- */
.nav {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255,255,255,.95);
backdrop-filter: blur(12px);
box-shadow: 0 1px 0 var(--so-line);
}
.nav-inner {
width: min(1170px, 100% - var(--sp-8));
margin-inline: auto;
display: flex;
align-items: center;
gap: var(--sp-6);
padding-block: 18px;
}
.nav-brand { display: flex; align-items: center; flex-shrink: 0; }
.nav-logo { height: 60px; width: auto; object-fit: contain; object-position: left center; }
.nav-links { display: flex; gap: 26px; margin-left: auto; }
.nav-links a { font: 600 14px var(--font-display); color: var(--so-navy); opacity: .82; }
.nav-links a:hover { opacity: 1; }
.nav-cta { display: flex; align-items: center; gap: var(--sp-4); }
/* "Powered by Savvy" co-brand lockup (real Savvy wordmark). Now an outbound link
to savvywealth.com. Hover is a tone-agnostic fade: it has to read on both the
light nav and the navy footer, and the per-tone .savvy-pre colours below would
otherwise win over any `a` colour rule. */
.savvy-lockup { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
a.savvy-lockup { transition: opacity .2s; }
a.savvy-lockup:hover { opacity: .72; }
.savvy-pre { font: var(--t-caption); letter-spacing: .02em; }
.savvy-mark { height: 17px; width: auto; display: block; }
.savvy-dark .savvy-mark { filter: brightness(0); } /* white asset → black on light bg */
.savvy-dark .savvy-pre { color: var(--so-muted); }
.savvy-light .savvy-pre { color: #9fb0c4; } /* on the navy footer */
/* Header branding scaled +20% vs the footer lockup. */
.nav .savvy-mark { height: 20px; }
.nav .savvy-pre { font-size: 0.95rem; }
@media (max-width: 960px) {
.nav .savvy-lockup { display: none; } /* keep the wrapped mobile nav clean */
}
/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: var(--sp-9) var(--sp-8); }
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
/* Undulating-lines motif — full-bleed behind the hero copy, thin + subtle. */
.undulations { display: block; width: 100%; height: auto; }
/* The line motion (a traveling proximity wave) lives in the SVG geometry itself
— see Undulations.astro / SMIL. Reduced-motion is honored by pausing SVG
animations via a tiny inline script in DefaultLayout. */
.hero-undulations {
position: absolute;
left: 0;
top: 4%;
width: 100%; /* hero is full-bleed → lines stretch side to side */
}
@media (max-width: 960px) {
.hero-undulations { top: 0; opacity: .8; }
}
.hero-inner { position: relative; z-index: 1; max-width: 760px; }
/* Homepage hero: two columns — hook + CTAs on the left, the branch graphic on
the right. Fills the formerly-empty right side and keeps the top of the fold
from reading as a wall of text. */
.hero-grid {
position: relative; z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.9fr);
align-items: center;
gap: var(--sp-7);
}
.hero-copy { max-width: 620px; }
/* Right column: the branch graphic with the geography line beneath it (Kunwar v2). */
.hero-visual-col { width: 100%; display: flex; flex-direction: column; }
.hero-visual { width: 100%; }
.hero-geo-label { margin-top: var(--sp-4); text-align: center; }
.hero-visual-col .hero-geo { text-align: center; }
/* The hero branch + §3 slider are clickable shortcuts into their tools. */
.tool-visual-link {
display: block; text-decoration: none; color: inherit; cursor: pointer;
border-radius: var(--r-md);
transition: transform .22s cubic-bezier(.2,.7,.2,1);
}
.tool-visual-link:hover { transform: translateY(-4px); }
.tool-visual-link:focus-visible { outline: 2px solid var(--so-pink); outline-offset: 6px; }
@media (prefers-reduced-motion: reduce) { .tool-visual-link { transition: none; } }
/* Homepage hook sized to fit its column (the global 4.75rem overwhelmed here). */
.hero-copy .hero-h1 { font-size: clamp(2.2rem, 3.4vw, 3.5rem); }
/* CTAs ride directly under the subtitle so they're above the fold; the longer
narrative is demoted below them. */
.hero-copy .hero-actions { margin-top: var(--sp-5); }
.hero-copy .hero-sub { margin-top: var(--sp-5); max-width: 58ch; }
@media (max-width: 900px) {
.hero-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
.hero-visual-col { order: 2; max-width: 440px; margin-inline: auto; }
}
@media (max-width: 560px) {
/* Hide only the graphic on small phones; the geography line beneath it stays,
so the geo text survives on mobile. */
.hero-visual { display: none; }
}
/* Base stays navy for the HOMEPAGE hero only, which is a bespoke composition:
it carries no eyebrow above it, and its payoff line ("We're your sling.") is
.gradient-text. Pink here would fight that gradient and flatten the contrast
the hero is built on. Every OTHER hero follows the house rule below. */
.hero-h1 {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(2.75rem, 5vw, 4.75rem);
line-height: 1.02;
color: var(--so-navy);
letter-spacing: -.02em;
}
/* House rule (Scott, 2026-07-16): smaller copy on top navy, larger headline pink.
.hero-inner is the sub-page hero (about / contact / disclosures / fees / insights
/ privacy / terms) — the one that actually carries an eyebrow above its H1, so the
rule applies here exactly as it does to the homepage section heads. The homepage
hero is excluded above (no eyebrow, gradient payoff line). Pink at this size is
well past the WCAG large-text threshold, so the ~4.25:1 ratio passes AA. */
.hero-inner .hero-h1 { color: var(--so-pink); }
.hero-sub { margin-top: var(--sp-5); max-width: 64ch; }
/* Subtitle under the tagline (KoHo, navy): "How do we break down your Goliath?" */
.hero-tagline-sub {
margin-top: var(--sp-3);
font: 500 clamp(1.15rem, 2.1vw, 1.6rem)/1.25 var(--font-display);
color: var(--so-navy);
letter-spacing: -.01em;
}
/* Hero lead paragraph sits ON TOP of the animated undulation lines. At the brand
body weight it gets lost against the moving strokes, so the lead specifically
runs semibold in full-strength ink (not the softer body ink) for contrast.
The inner lift still steps up to 700. */
.hero-sub-lead {
font-weight: 600;
color: var(--so-ink);
}
.hero-sub-lead strong { font-weight: 700; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: var(--sp-6); }
.hero-trust { margin-top: var(--sp-6); }
.gradient-text {
background: var(--so-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ---------- Tool / tier cards ---------- */
/* The undulation motif recurs here as you scroll — flipped + re-phased so it
reads as a variation of the hero lines, not a repeat. */
.tiers { position: relative; overflow: hidden; }
.tiers-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.tiers > .max-width-container { position: relative; z-index: 1; }
.tiers-undulations {
position: absolute;
left: 0;
bottom: -8%;
width: 100%;
transform: scaleY(-1); /* mirror the hero: this set rises to the left */
opacity: .7;
}
/* Click-to-open accordion (the homepage tools reveal). */
.tool-accordion { display: flex; flex-direction: column; gap: 14px; }
.tool-panel {
background: var(--so-surface);
border: 1px solid var(--so-line);
border-radius: var(--r-md);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: box-shadow .2s, border-color .2s;
}
.tool-panel[open] { box-shadow: var(--shadow-md); border-color: var(--so-line); }
.tool-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 22px 26px;
cursor: pointer;
list-style: none; /* hide the native disclosure triangle */
}
.tool-summary::-webkit-details-marker { display: none; }
.tool-summary-text { display: flex; flex-direction: column; gap: 4px; }
.tool-title { font: var(--t-h3); color: var(--so-navy); }
.tool-desc { font: var(--t-small); color: var(--so-ink-soft); }
.tool-toggle {
flex-shrink: 0;
width: 34px; height: 34px;
border-radius: 50%;
border: 1.5px solid var(--so-line);
display: inline-flex; align-items: center; justify-content: center;
transition: border-color .2s, background .2s, transform .2s;
}
.tool-toggle::before {
content: "+";
font: 600 22px/1 var(--font-display);
color: var(--so-pink);
}
.tool-summary:hover .tool-toggle { border-color: var(--so-pink); }
.tool-panel[open] .tool-toggle { background: var(--so-bg-tint); }
.tool-panel[open] .tool-toggle::before { content: "−"; color: var(--so-purple); }
.tool-body { padding: 0 26px 26px; }
.tool-launch { margin-top: var(--sp-5); }
.tool-placeholder { font: var(--t-body); color: var(--so-ink-soft); margin-bottom: var(--sp-4); }
.tool-iframe {
display: block;
width: 100%;
height: 780px;
border: 0;
border-radius: var(--r-sm);
background: #fff;
}
@media (max-width: 700px) { .tool-iframe { height: 88vh; } }
/* ---------- Dedicated tool pages (calculator / decision tree) ---------- */
/* The tool fills the screen: no hero, no animation (those live on the homepage
to pull people IN). The sandboxed standalone gets the whole viewport below the
sticky nav, so there's ONE natural scroll inside the tool instead of a hero
pushing the tool into a hard-to-reach sliver. */
.tool-embed { display: block; width: 100%; }
.tool-embed-frame {
display: block;
width: 100%;
height: calc(100dvh - var(--nav-h, 96px));
border: 0;
background: #fff;
}
/* Nav wraps taller on narrow screens; give the frame a touch more headroom. */
@media (max-width: 960px) {
.tool-embed-frame { height: calc(100dvh - 128px); }
}
/* Gentle reveal when a panel opens. */
.tool-panel[open] .tool-body { animation: tool-reveal .28s ease; }
@keyframes tool-reveal {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.tool-panel[open] .tool-body { animation: none; }
}
/* ---------- Footer ---------- */
.footer { position: relative; overflow: hidden; background: var(--so-navy); color: #cdd7e3; padding: var(--sp-8) 0 30px; }
/* Wind scene behind the footer content. */
.footer-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.footer-top, .footer-legal { position: relative; z-index: 1; }
.footer-undulations {
position: absolute;
left: -4%;
bottom: -8%;
width: 78%;
opacity: .16; /* faint teal "wind currents" on the navy */
}
/* Global drifting leaf — occasionally tumbles across the whole viewport on the
"wind", then rests off-screen before the next pass. Fixed so it crosses the
screen wherever you've scrolled. Non-interactive; sits behind the sticky nav. */
/* TWO independent motions for a paper-like leaf:
(1) leaf-travel on the wrapper — carries it mostly HORIZONTALLY across the
screen with only a gentle vertical wander (caught by the wind), plus the
opacity fade in/out and the rest period between passes.
(2) leaf-flutter on the ![]()
— real 3D rotation (perspective on the wrapper)
so the leaf rolls, pitches and turns edge-on like a tumbling sheet of
paper, NOT a stiff flat shape. */
.drift-leaf {
position: fixed;
top: 0;
left: 0;
width: 62px;
z-index: 40;
pointer-events: none;
opacity: 0;
perspective: 520px; /* gives the child's 3D rotation real depth */
will-change: transform, opacity;
animation: leaf-travel 20s ease-in-out infinite;
}
.drift-leaf .leaf-svg {
display: block;
width: 100%;
height: auto;
transform-origin: 50% 50%;
transform-style: preserve-3d;
animation: leaf-flutter 3.6s linear infinite;
}
@keyframes leaf-travel {
0% { opacity: 0; transform: translate(-12vw, 24vh); }
5% { opacity: .7; }
18% { transform: translate(22vw, 17vh); }
30% { transform: translate(52vw, 29vh); }
42% { transform: translate(84vw, 21vh); }
45% { opacity: .7; }
50% { opacity: 0; transform: translate(116vw, 26vh); }
100% { opacity: 0; transform: translate(116vw, 26vh); }
}
@keyframes leaf-flutter {
0% { transform: rotateY(0deg) rotateX(0deg) rotateZ(-8deg); }
25% { transform: rotateY(175deg) rotateX(24deg) rotateZ(16deg); }
50% { transform: rotateY(360deg) rotateX(-16deg) rotateZ(-12deg); }
75% { transform: rotateY(535deg) rotateX(22deg) rotateZ(15deg); }
100% { transform: rotateY(720deg) rotateX(0deg) rotateZ(-8deg); }
}
/* Respect users who prefer less motion: no drifting leaf at all. */
@media (prefers-reduced-motion: reduce) {
.drift-leaf { display: none; }
}
.footer-top {
width: min(1170px, 100% - var(--sp-8));
margin-inline: auto;
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 40px;
padding-bottom: 36px;
border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-brand { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.footer-logo-wide { width: 220px; height: auto; display: block; }
.footer-logo-compact { display: none; align-items: center; gap: 12px; }
.footer-mark { width: 40px; height: auto; }
.footer-brand-name { font: 600 16px var(--font-display); color: #fff; }
.footer-tag { margin-top: var(--sp-4); color: #9fb0c4; max-width: 320px; }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.footer-cols h4 { font: 600 13px var(--font-display); color: #fff; margin-bottom: 12px; letter-spacing: .04em; }
.footer-cols a { display: block; color: #9fb0c4; font-size: 14px; padding: 4px 0; }
.footer-cols a:hover { color: var(--so-cyan); }
.footer-legal {
width: min(1170px, 100% - var(--sp-8));
margin-inline: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 30px;
margin-top: var(--sp-5);
}
.footer-legal p,
.footer-legal span { font: 300 12px var(--font-body); color: #7d8da3; }
.footer-legal-right { display: flex; align-items: center; gap: 20px; }
/* ---------- Responsive ---------- */
@media (max-width: 960px) {
.nav-inner { flex-wrap: wrap; }
.nav-links { order: 3; width: 100%; justify-content: space-between; }
.hero { padding-block: var(--sp-8) var(--sp-7); }
.hero-bg { display: none; }
.footer-top { grid-template-columns: 1fr; }
.footer-logo-wide { display: none; }
.footer-logo-compact { display: flex; }
.tiers-grid,
.footer-cols { grid-template-columns: 1fr; }
}
/* ============================================================
Homepage narrative sections (hero doors, options ladder, trust
beat, proof, action) + fee-transparency page. Compliance-stage
DRAFT copy assembled into the gated preview.
============================================================ */
/* Hero: geography line + secondary "doors" routing band */
.hero-geo { margin-top: var(--sp-2); font: var(--t-caption); letter-spacing: .04em; color: var(--so-muted); }
.hero-doors {
display: flex; flex-wrap: wrap; gap: 10px 22px;
margin-top: var(--sp-6); padding-top: var(--sp-5);
border-top: 1px solid var(--so-line);
}
.hero-doors a { font: 600 14px var(--font-display); color: var(--so-navy); opacity: .8; }
.hero-doors a:hover { opacity: 1; color: var(--so-pink); }
/* §2 - options ladder */
.ladder { list-style: none; display: grid; gap: 14px; counter-reset: ladder; }
.ladder-item {
position: relative;
background: var(--so-surface);
border: 1px solid var(--so-line);
border-radius: var(--r-md);
box-shadow: var(--shadow-sm);
padding: 24px 28px 24px 76px;
transition: box-shadow .2s, border-color .2s, transform .2s;
}
.ladder-item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.ladder-item::before {
counter-increment: ladder;
content: counter(ladder);
position: absolute; left: 22px; top: 24px;
width: 34px; height: 34px; border-radius: 50%;
background: var(--so-gradient); color: #fff;
font: 700 16px/34px var(--font-display); text-align: center;
box-shadow: var(--shadow-pink);
}
.ladder-title { font: var(--t-h3); color: var(--so-navy); }
.ladder-kind {
margin-top: 2px; font: 600 0.78rem var(--font-display);
letter-spacing: .08em; text-transform: uppercase; color: var(--so-pink);
}
.ladder-body { margin-top: 10px; font: var(--t-body); color: var(--so-ink-soft); }
/* §3 - trust beat */
/* A section needs its top padding back if it either (a) carries its own background
band, or (b) sits directly against one - a tint boundary reads as a hard edge, so
content landing on it has no breathing room either way. The global
`section + section { padding-top: 0 }` collapse is correct for plain sections on a
continuous background; it is wrong wherever a band edge is involved.
Kunwar v2 flagged this on §3 and §4; one root cause. §3b is case (b): it carries no
band of its own but butts straight against .trustbeat's tint. */
.trustbeat, .tiers, .disclosures-band { padding-top: var(--sp-9); }
/* §2 - center the options head. It was the only section head still left-aligned,
which left a dead gutter immediately after the hero (Kunwar v2). Mirrors .trustbeat-head. */
.options .section-head { text-align: center; max-width: 720px; margin-inline: auto; }
.options .section-head .section-h2 { max-width: 30ch; margin-inline: auto; }
.options .section-head .section-sub { margin-inline: auto; }
.trustbeat { position: relative; overflow: hidden; background: var(--so-bg-tint); }
.trustbeat-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.trustbeat > .max-width-container { position: relative; z-index: 1; }
/* Center the heading (was jammed left) and balance the body into two columns —
prose on the left, the decision-tree motif filling the formerly-empty right. */
.trustbeat-head { text-align: center; max-width: 720px; margin-inline: auto; }
.trustbeat-head .section-h2 { max-width: 26ch; margin-inline: auto; }
.trustbeat-body {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
gap: var(--sp-8);
align-items: center;
margin-top: var(--sp-6);
}
.trustbeat-body .prose { max-width: none; }
.trustbeat-visual { width: 100%; }
@media (max-width: 860px) {
.trustbeat-body { grid-template-columns: 1fr; gap: var(--sp-6); }
.trustbeat-visual { max-width: 300px; margin-inline: auto; }
}
@media (max-width: 560px) { .trustbeat-visual { display: none; } }
.prose { max-width: 68ch; }
.prose p { font: var(--t-body); color: var(--so-ink-soft); margin-bottom: var(--sp-4); }
.armor { list-style: none; display: grid; gap: 12px; margin: 0 0 var(--sp-4); }
.armor li { font: var(--t-body); color: var(--so-ink-soft); padding-left: 18px; border-left: 2px solid var(--so-line); }
.armor strong { color: var(--so-navy); }
.transparency {
max-width: 68ch; margin-top: var(--sp-6); margin-inline: auto; padding: 22px 26px;
background: var(--so-surface); border: 1px solid var(--so-line);
border-left: 3px solid var(--so-pink); border-radius: var(--r-sm);
box-shadow: var(--shadow-sm);
}
.transparency p { font: var(--t-body); color: var(--so-ink-soft); }
.transparency-link { display: inline-block; margin-top: 10px; font: 600 15px var(--font-display); color: var(--so-pink); }
.transparency-link:hover { color: var(--so-purple); }
/* §3b - disclosures blurb band (drives to /disclosures) */
/* Zero the bottom padding. §3b restores its TOP padding (it sits against .trustbeat's
tint edge), but it has no band of its own, and neither does §4 (.tiers). So band-bottom
96 + tiers-top 96 stacked to 192px of empty page between the CTA and the tools - double
the site's 96px flat rhythm, and unlike the tint transition above, none of it is filled.
Dropping band-bottom to 0 leaves .tiers' restored top padding as the single 96px gap,
which matches both the base rhythm and the ~100px the tint edge gives §3b's own top. */
.disclosures-band { padding-bottom: 0; }
.disclosures-band-head { text-align: center; max-width: 720px; margin-inline: auto; }
.disclosures-band-head .section-h2 { max-width: 30ch; margin-inline: auto; }
.disclosures-band-actions { justify-content: center; }
/* §5 - proof */
.proof-disclaimer { font: var(--t-small); color: var(--so-muted); font-style: italic; max-width: 80ch; }
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.proof-card {
background: var(--so-surface); border: 1px solid var(--so-line);
border-radius: var(--r-md); box-shadow: var(--shadow-sm);
padding: 26px; display: flex; flex-direction: column;
}
.proof-title { font: var(--t-h3); color: var(--so-navy); margin-bottom: 10px; }
.proof-body { font: var(--t-small); color: var(--so-ink-soft); }
.proof-trade { margin-top: 14px; font: italic 300 0.9rem/1.5 var(--font-body); color: var(--so-muted); }
.proof-trust { margin-top: var(--sp-7); font: var(--t-body); color: var(--so-ink-soft); text-align: center; max-width: 70ch; margin-inline: auto; }
/* §6 - action */
.action-inner { background: var(--so-navy); border-radius: var(--r-lg); padding: var(--sp-8) var(--sp-7); text-align: center; color: #fff; }
.action-inner .section-h2 { color: #fff; max-width: none; }
.action-inner .section-sub { color: #cdd7e3; max-width: 56ch; margin: var(--sp-4) auto 0; }
.action-inner .hero-actions { justify-content: center; margin-top: var(--sp-6); }
/* Fee-transparency page */
.fees-prose { max-width: 72ch; }
.fees-prose h2 { font: var(--t-h2); color: var(--so-navy); margin: var(--sp-7) 0 var(--sp-3); }
.fees-prose p { font: var(--t-body); color: var(--so-ink-soft); margin-bottom: var(--sp-4); }
.fees-prose ul { margin: 0 0 var(--sp-4) var(--sp-5); }
.fees-prose li { font: var(--t-body); color: var(--so-ink-soft); margin-bottom: 10px; }
.fees-prose strong { color: var(--so-navy); }
.fees-finefine { font: var(--t-caption); color: var(--so-muted); margin-top: var(--sp-6); }
/* Insights blog - long-form article body (mirrors .fees-prose: navy in-body
headings, pink links, boxed blockquotes for the topical disclosure blocks). */
.article-prose { max-width: 72ch; }
.article-prose h2 { font: var(--t-h2); color: var(--so-navy); margin: var(--sp-7) 0 var(--sp-3); }
.article-prose h3 { font: var(--t-h3); color: var(--so-navy); margin: var(--sp-5) 0 var(--sp-2); }
.article-prose p { font: var(--t-body); color: var(--so-ink-soft); margin-bottom: var(--sp-4); }
.article-prose ul, .article-prose ol { margin: 0 0 var(--sp-4) var(--sp-5); }
.article-prose li { font: var(--t-body); color: var(--so-ink-soft); margin-bottom: 10px; }
.article-prose strong { color: var(--so-navy); }
.article-prose a { color: var(--so-pink); text-decoration: underline; text-underline-offset: 2px; }
.article-prose a:hover { color: var(--so-purple); }
.article-prose hr { border: 0; border-top: 1px solid var(--so-line); margin: var(--sp-6) 0; }
.article-prose blockquote {
margin: var(--sp-5) 0; padding: 18px 24px;
background: var(--so-surface); border: 1px solid var(--so-line);
border-left: 3px solid var(--so-pink); border-radius: var(--r-sm);
box-shadow: var(--shadow-sm);
}
.article-prose blockquote p { margin-bottom: 12px; }
.article-prose blockquote p:last-child { margin-bottom: 0; }
.article-cta { display: flex; margin-top: var(--sp-7); }
/* Pull quotes - big, right-justified "... key line ..." emphasis that surfaces
an article's key takeaways. Verbatim excerpts of the body copy. The two-class
selector outranks `.article-prose p` so the body-paragraph rule doesn't win. */
.article-prose .pullquote {
max-width: none;
margin: var(--sp-6) 0;
text-align: right;
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.5rem, 3.2vw, 2.15rem);
line-height: 1.28;
color: var(--so-pink);
text-wrap: balance;
}
/* Center the insights reading column (chosen 2026-07-18) so the article reads
balanced instead of hugging the left with a dead right margin. Scoped to the
insights pages; the rest of the site keeps its left-aligned layout. Hero and
body share one width so their left/right edges line up. */
.article-page .hero-inner,
.article-page .article-prose,
.insights-index .hero-inner,
.insights-index .prose {
max-width: 72ch;
margin-inline: auto;
}
/* Insights index - reverse-chron list */
.insights-list { max-width: 72ch; list-style: none; margin: 0; padding: 0; }
.insights-item { padding: var(--sp-5) 0; border-bottom: 1px solid var(--so-line); }
.insights-item:first-child { padding-top: var(--sp-3); }
.insights-eyebrow { font: var(--t-eyebrow); letter-spacing: .16em; text-transform: uppercase; color: var(--so-navy); margin: 0; }
.insights-item h2 { font: var(--t-h3); color: var(--so-pink); margin: 8px 0; }
.insights-item h2 a { color: inherit; text-decoration: none; }
.insights-item h2 a:hover { text-decoration: underline; }
.insights-desc { font: var(--t-body); color: var(--so-ink-soft); margin: 0; }
.insights-date { display: block; margin-top: 10px; font: var(--t-caption); color: var(--so-muted); }
/* Responsive for the narrative sections */
@media (max-width: 860px) { .proof-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
.ladder-item { padding: 20px 20px 20px 64px; }
.action-inner { padding: var(--sp-7) var(--sp-5); }
}