tags too,
but nested inside .mobile-menu__item/.mobile-menu__children wrappers
now, not direct children of .mobile-menu__nav, so they get their own
dedicated rules below instead of double-applying this one. */
.mobile-menu__nav > a {
display: flex;
align-items: center;
min-height: 52px;
padding: 12px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.18);
font-family: var(--font-ui);
font-size: 16px;
line-height: 1.4;
color: var(--text-on-dark);
text-decoration: none;
}
/* ---- The Vault's nested child (Mortgage Readiness Report) -------------
A parent row (link + a separate chevron toggle button, not the link
itself) and a collapsible list underneath, closed by default. Chevron
points right rather than rotating open/closed like the FAQ accordion's
does - reads as "drill in" rather than "expand in place", which suits
a single child better than a full accordion treatment would. */
.mobile-menu__item {
display: flex;
align-items: center;
min-height: 52px;
border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.mobile-menu__item .mobile-menu__link {
flex: 1;
display: flex;
align-items: center;
min-height: 52px;
padding: 12px 0;
font-family: var(--font-ui);
font-size: 16px;
line-height: 1.4;
color: var(--text-on-dark);
text-decoration: none;
}
.mobile-menu__expand {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 44px;
height: 44px;
padding: 0;
border: 0;
background: transparent;
color: var(--text-on-dark-muted);
cursor: pointer;
transition: color var(--duration-base) var(--ease-standard);
}
.mobile-menu__expand:hover,
.mobile-menu__expand:focus-visible,
.mobile-menu__expand[aria-expanded="true"] {
color: var(--text-on-dark);
}
.mobile-menu__expand .icon { width: 20px; height: 20px; }
/* Same grid-template-rows 0fr->1fr trick as .field-reveal in
components.css (so height:auto can transition) - a hardcoded
duration rather than --duration-base since this is functional
navigation, not a decorative flourish, so it stays animated even
below the 768px width where --duration-base is otherwise zeroed
(see page.css's own mobile animation-off block). */
.mobile-menu__children {
display: grid;
grid-template-rows: 0fr;
overflow: hidden;
transition: grid-template-rows 320ms var(--ease-standard);
}
.mobile-menu__children.is-open { grid-template-rows: 1fr; }
.mobile-menu__children > div { min-height: 0; overflow: hidden; }
.mobile-menu__child {
display: flex;
align-items: center;
min-height: 48px;
padding: 10px 0 10px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
font-family: var(--font-ui);
font-size: 15px;
line-height: 1.4;
/* Not --text-on-dark-muted (60% white): against this panel's own
background (--surface-page, rgb(107,119,132)) that composites to
~2.7:1, well under WCAG AA's 4.5:1 for normal text. Full white
clears it at ~4.57:1. The smaller font size and left indent already
carry the "nested sub-item" hierarchy this muted colour was for, so
nothing is lost by making it solid. */
color: var(--text-on-dark);
text-decoration: none;
}
/* Same dark-on-dark problem as the .bv-btn exclusion in tokens/base.css
(see the note there): the generic a:not(.bv-btn):hover rule darkens
link text to --color-pickled-bluewood on hover, which on this panel's
own dark background is nearly invisible. These rows shouldn't change
colour on hover at all, so each is restated at its own resting colour.
.mobile-menu__child needs the extra .mobile-menu__children ancestor
class to outrank the generic rule's specificity (a:not(.bv-btn):hover
beats a bare .mobile-menu__child:hover on type-selector count) - the
other two already win on source order alone since their specificity
ties with the generic rule and this block loads after base.css. */
.mobile-menu__nav > a:hover,
.mobile-menu__item .mobile-menu__link:hover,
.mobile-menu__children .mobile-menu__child:hover { color: var(--text-on-dark); }
/* ---- Mobile menu: current-page marking -------------------------------
Which row is "current" wasn't distinguishable at all - every row read
identically regardless of which page you were actually on. Bold text
plus the row's own divider brightened to a full-opacity 2px line (via
box-shadow, which paints without affecting box size/alignment, same
reasoning as the desktop nav's own absolutely-positioned keyline)
marks it out without disturbing the row layout. is-current is applied
server-side by build.js from each page's nav="..."/child="..." include
directive - see build.js and partials/header.html. */
.mobile-menu__nav > a.is-current,
.mobile-menu__item.is-current .mobile-menu__link,
.mobile-menu__child.is-current { font-weight: 600; color: var(--text-on-dark); }
.mobile-menu__nav > a.is-current,
.mobile-menu__item.is-current,
.mobile-menu__child.is-current { box-shadow: inset 0 -2px 0 0 var(--text-on-dark); }
.mobile-menu__actions { flex-shrink: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 20px; }
/* One-off padding/height for just these two - taller and centred rather
than the standard .bv-btn sizing, to read as full-width tap targets. */
.mobile-menu__actions .bv-btn { width: 100%; justify-content: center; padding: 13px 16px; }
/* Locks background scroll while the panel is open (toggled in JS). */
html.menu-open { overflow: hidden; }
/* ---- Generic section shell -------------------------------------- */
.section {
padding: var(--section-padding-lg) var(--page-padding);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-20);
}
/* .section's own display:flex would otherwise beat the browser's
default [hidden] { display: none } (an author rule always outranks a
user-agent one) - same gotcha already handled per-component for
.bio-modal/.uts-modal/.vault-card/.form-error, needed here too for
temporarily hiding a whole section (e.g. a testimonials section with
no real testimonial yet) without deleting it. */
.section[hidden] { display: none; }
/* Every card/panel on the site takes its fill from --card-bg rather
than naming a colour itself - nothing is outlined any more, so a card is
only legible if its tone differs from the ground it happens to land
on, and the same component appears on several different grounds
(.vault-card on mist here and on white over on /vault, .plan-panel
on mist on Home and on white on /pricing). Letting the section
declare the pair means each tone flips them once, in one place,
instead of every component carrying a per-section exception.
Default (canvas / mint / slate - a toned ground): white cards. On
white the ladder has nowhere up to go, so the card drops to the
F9F9F9 block tone instead. Either way the card and the ground it
lands on always differ, which is the whole trick - see the surfaces
note in tokens/semantic.css.
A new card component needs no rule here: use var(--card-bg). */
.section,
.cta {
--card-bg: var(--surface-card);
}
.section--slate { background: var(--color-scheme-1-background); }
/* The canvas replaces the old --mist (the .fig's rgb(233,235,237)),
retuned to the app's own #F2F2F2 so the two products read as one
surface. Every section that carries cards uses it: white cards on a
toned ground is the whole model, and a white card on a white
section has nothing left to distinguish it but the outline we just
removed. Sections of plain copy still go white, which is what keeps
the page banded. */
.section--canvas { background: var(--surface-canvas); }
/* Kept as a backstop rather than a layout the site uses: no card sits
on a white section today (they're all --canvas), but if one ever
does, it drops to the block tone instead of vanishing. */
.section--white {
background: var(--color-scheme-3-background);
--card-bg: var(--surface-block);
}
.section--mint { background: var(--color-scheme-4-background); }
/* Solid navy. Deeper than --slate, used where a section should read as
a block of its own rather than another tonal band. */
.section--navy { background: var(--color-pickled-bluewood); }
/* Type on the two dark grounds. Scoped to the section modifier rather
than set per element, so anything dropped into one inherits it:
and higher specificity than the .vault-h2 / .tick-list rules in the
later-loading page stylesheets, which would otherwise win on source
order (see the cascade gotcha below). Per the design system's
standing note, an eyebrow on a dark ground is white at 72%. */
.section--slate .vault-h2,
.section--navy .vault-h2 { color: #fff; }
.section--slate .split__copy p,
.section--navy .split__copy p { color: #fff; }
.section--slate .tick-list li,
.section--navy .tick-list li { color: #fff; }
/* Full white, not a softened opacity - .section--slate's own background
(#6B7784, --color-scheme-1-background) is a mid-tone slate, not a true
dark navy, so even ~99% white barely clears 4.5:1 against it. Any
softer opacity fails WCAG AA contrast outright. */
.section--slate .tagline,
.section--navy .tagline { color: #fff; }
.section-header {
max-width: var(--max-width-lg);
display: flex;
flex-direction: column;
gap: 16px;
align-items: center;
text-align: center;
}
/* Left-aligned variant of .section-header - that class has no explicit
width, so a centered flex parent (.section) centers the shrink-to-fit
text box instead of pinning it to the same left edge as a full-width
sibling like .process-grid/.addon-grid/.shot-notes. width:100% fixes
that; align/text-align flip it from centered to left. Lived in
how-it-works.css until Features needed it too - three pages deep is
shared layout, not one page's own. */
.section-header--left {
width: 100%;
max-width: var(--container-lg);
align-items: flex-start;
text-align: left;
}
.tagline {
font-family: var(--font-body);
font-size: 16px;
font-weight: 600;
line-height: 1.5;
color: var(--text-secondary);
margin-bottom: -8px;
}
/* A couple of taglines were knocked back further than --text-secondary
(60%) during design review, down to the lowest opacity that still
clears WCAG AA for normal text (~58%, ~4.6:1 on white/mist). */
.tagline--muted { color: rgba(12, 8, 1, 0.58); }
.section-header h2,
.split__heading {
margin: 0;
font-family: var(--font-heading);
font-weight: 400;
font-size: var(--text-h2);
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--text-primary);
text-wrap: pretty;
}
.section-header p {
margin: 0;
font-family: var(--font-body);
font-size: 16px;
line-height: 1.5;
color: var(--text-primary);
text-wrap: pretty;
}
/* ---- Hero -------------------------------------------------------- */
.hero {
position: relative;
overflow: hidden;
min-height: 80vh;
padding: var(--space-20) var(--page-padding);
/* Adds .navbar's -84px margin-bottom back, on top only (not the
shorthand above, which also sets left/right/bottom) - see that
rule's comment. Keeps hero content clearing the now-overlapping
transparent header by the usual --space-20 gap instead of sitting
flush beneath it. */
padding-top: calc(var(--space-20) + 84px);
display: flex;
align-items: center;
justify-content: center;
}
/* Soft mint light texture from the Home hero redesign (Claude Design's
texGlow option) - a shared .hero rule rather than something scoped to
Home, so it paints every page's top banner the same way: Home's own
hero and every sub-page's .hero--sub (Vault, How It Works, Pricing,
About, FAQ, Contact, the Mortgage Readiness Report tool page) all
share this base class already, so this needed no HTML changes at all
beyond Home's own hero rebuild below. Sits behind .hero__inner (see
its z-index just below) and above the section's own slate background. */
.hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(62% 62% at 84% 30%, rgba(94, 208, 185, 0.30) 0%, transparent 64%),
radial-gradient(85% 95% at 2% 60%, rgba(35, 49, 64, 0.62) 0%, transparent 68%);
pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; width: 100%; max-width: var(--container-lg); display: flex; gap: var(--space-20); align-items: center; }
.hero__content { flex: 1; display: flex; flex-direction: column; gap: 32px; }
.hero__copy { display: flex; flex-direction: column; gap: 24px; }
/* .hero__title styles the big marketing headline by class rather than
by tag, since it's not always the same element: on pages with a
.hero__eyebrow above it, .hero__title is the and the eyebrow is
a plain
(a short page-name label isn't itself a heading - it was
briefly marked up as the real
instead, with this line demoted to
, so every page had exactly one heading-level element before the
real, unique, descriptive headline in its outline; reverted 1 Oct
2026 once that was flagged as weak/duplicate H1 content for SEO -
"Legal" was literally the H1 on all three legal pages - rather than a
real accessibility or heading-count problem to fix). Pages with no
eyebrow (Home, Features, Under the Surface, Mortgage Readiness
Report) just use .hero__title as their only hero heading, already
the either way. */
.hero__copy .hero__title {
margin: 0;
font-family: var(--font-heading);
font-weight: 400;
font-size: 60px;
line-height: 1.2;
letter-spacing: -0.01em;
color: #fff;
text-wrap: pretty;
}
/* The short page-name eyebrow, styled to match the Mortgage Readiness
Report's own pre-heading (.tool-hero__sector in
mortgage-readiness-report.css) - same page, not reused directly,
since that page keeps its existing markup untouched and this is a
shared class every other hero now pulls in. A plain
, not a
heading (see .hero__title above) - margin-bottom pulls .hero__title
up close beneath it rather than leaving .hero__copy's full 24px flex
gap between them. */
.hero__eyebrow {
margin: 0 0 -16px;
font-family: var(--font-ui);
font-size: 14px;
font-weight: 600;
line-height: 1.5;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #fff;
}
.hero__copy p {
margin: 0;
max-width: 560px;
font-family: var(--font-body);
font-size: 16px;
line-height: 1.5;
color: #fff;
text-wrap: pretty;
}
.hero__actions { display: flex; gap: 16px; }
.hero__media { flex: 1; }
.hero__media-frame {
display: block;
width: 100%;
height: min(56vh, 520px);
min-height: 380px;
border-radius: var(--radius-lg);
object-fit: cover;
}
/* ---- Hero: card collage (Home) ------------------------------------
Home's own hero layout - the vault photo is replaced with a stat row
under the copy plus a mock "your visitor's screen" card stack, ported
from the Card collage / texGlow variant in Claude Design's BowerVault
Home.dc.html. Sub-pages keep the plain photo hero (.hero__media
above) untouched - only the .hero::before gradient above is shared. */
.hero__stats {
display: flex;
flex-wrap: wrap;
gap: 48px;
padding-top: 22px;
border-top: 1px solid var(--color-scheme-1-border);
}
.hero__stat { display: flex; flex-direction: column; gap: 4px; }
.hero__stat-value { font-family: var(--font-heading); font-weight: 400; font-size: 28px; line-height: 1; color: #fff; }
.hero__stat-label { font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: #fff; }
/* Hidden until .hero--collage's own ≤760px breakpoint swaps it in for
.hero__stats above - see that rule for why. */
.hero__stats-line {
display: none;
padding-top: 16px;
border-top: 1px solid var(--color-scheme-1-border);
font-family: var(--font-body);
font-size: 14px;
line-height: 1.6;
color: #fff;
}
.hero--collage .hero__content { flex: 0 1 520px; }
.hero--collage .hero__copy p { max-width: 46ch; }
/* The mock UI stack sits in .hero__media's place as the inner's second
flex child, so it inherits the same responsive stacking behaviour
(column below 640px, etc.) with no extra rules needed here. */
.hero-demo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.hero-demo__chips { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 2px; }
.hero-demo__chip {
appearance: none;
/* Native