/* =============================================================
* Fundamento — design system
* ============================================================= */
:root {
/* =============================================================
* Brand tokens — locked to Fundamento Logo Round 3 · Direction D
* (the Foundation Course). See standards PDF §6.
* ============================================================= */
/* =============================================================
* WEALTH-TECH RE-SKIN (2026): navy / alabaster / brass.
* Variable NAMES are preserved (used ~200x across the app);
* only VALUES change. --accent is now the deep-navy anchor;
* brass is the single accent (see --brass / remapped --sand).
* ============================================================= */
--ink: #14181F; /* primary text — charcoal */
--ink-soft: #3a434f;
--ink-mute: #5B6675; /* slate — secondary text/captions */
--line: #e4dfd3; /* hairline on light */
--line-strong: #d3ccbc;
--bg: #F6F3EC; /* Alabaster — primary light bg */
--paper: #FBFAF7; /* Off-white — elevated surfaces */
--stone: #ECE7DC; /* warm stone — secondary surface */
/* Brand anchor — Deep Navy (was Fundamento Green) */
--accent: #0E1B2C; /* Deep Navy — primary anchor */
--accent-soft: #e7eaef; /* pale navy tint — soft fills/selection */
--accent-mid: #20364b; /* navy mid — hovers */
--accent-deep: #0a1422; /* near-black navy */
/* Single accent — Muted Brass, used like punctuation */
--brass: #B08D4F;
--brass-bright: #C8A765; /* hover / chart glow */
--brass-deep: #8F7038;
--navy: #0E1B2C;
--navy-800: #122236; /* raised dark surface (nav dropdown, menus) */
--navy-line: #243749; /* hairline divider/border on dark chrome */
--teal: #1F5C5A; /* optional secondary data hue */
/* Tier accents — restrained chip/dot only */
--tier-pro: #5B6675; /* Pro — slate */
--tier-premier: #0E1B2C; /* Premier — navy */
--tier-family-office: #B08D4F; /* Family Office — brass */
--tier-enterprise: #14181F; /* Enterprise — ink */
/* Supporting tones (editorial, never the lockup) */
--sand: #B08D4F; /* now BRASS — the accent */
--sand-soft: #f0e7d5;
--terra: #A8504A; /* clay — alert/urgent */
--terra-soft: #f3e3e0;
--good: #4F7A5B; /* sage — gains (muted) */
--good-soft: #e7efe8;
--bad: #A8504A; /* clay — losses (muted) */
--bad-soft: #f3e3e0;
--warn: #9a6a33; /* brass-amber — caution */
--warn-soft: #f2e7d2;
/* — radii / shadows (restrained radii, single soft shadow) -- */
--radius: 8px;
--radius-sm: 5px;
--radius-lg: 12px;
--shadow-sm: 0 1px 1px rgba(14, 27, 44, 0.04);
--shadow: 0 1px 1px rgba(14, 27, 44, 0.04), 0 14px 34px -16px rgba(14, 27, 44, 0.16);
--shadow-lg: 0 2px 2px rgba(14, 27, 44, 0.05), 0 28px 60px -24px rgba(14, 27, 44, 0.26);
/* — typography -------------------------------------- */
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
--font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
/* — spacing scale ----------------------------------- */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
--s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
/* — motion ------------------------------------------ */
--t-fast: 120ms cubic-bezier(0.2, 0, 0, 1);
--t-mid: 200ms cubic-bezier(0.2, 0, 0, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--font-sans);
color: var(--ink);
background: var(--bg);
line-height: 1.55;
font-size: 16px;
font-feature-settings: "ss01", "cv01", "cv11";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Subtle paper texture via gradient — depth without imagery */
body::before {
content: "";
position: fixed;
inset: 0;
background:
radial-gradient(60% 40% at 20% 0%, rgba(176, 141, 79, 0.05), transparent 60%),
radial-gradient(50% 35% at 100% 100%, rgba(31, 92, 90, 0.045), transparent 60%);
pointer-events: none;
z-index: -1;
}
.wrap {
max-width: 1120px;
margin: 0 auto;
padding: 0 var(--s-5);
}
/* — typography ---------------------------------------- */
h1, h2, h3, h4 { color: var(--ink); }
.serif, h1, h2, h3, .module-head h1, .hero h1, .topic h1, .lib-cat-label, .scorecard th, .scorecard-takeaways h2, .card h2, .path-card h2, .lib-card h3, .lib-cat-title, .topic-related h3 {
font-family: var(--font-serif);
font-feature-settings: "ss01", "ss02";
}
a { color: var(--accent); }
a:hover { color: var(--accent-deep); }
::selection { background: var(--accent-soft); color: var(--accent-deep); }
/* — icons --------------------------------------------- */
.icon {
display: inline-block;
flex-shrink: 0;
vertical-align: middle;
}
.icon--card {
color: var(--accent);
}
.icon--cat {
color: var(--accent);
}
/* =============================================================
* HEADER
* ============================================================= */
.site-header {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: saturate(180%) blur(10px);
-webkit-backdrop-filter: saturate(180%) blur(10px);
border-bottom: 1px solid var(--line);
position: sticky;
top: 0;
z-index: 50;
}
.site-header .wrap {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-5);
padding-top: 14px;
padding-bottom: 14px;
flex-wrap: wrap;
}
/* Re-skin: live editorial wordmark (navy) replaces the green lockup image */
.brand-wordmark {
font-family: var(--font-serif);
font-weight: 500;
font-size: 22px;
letter-spacing: 0.005em;
color: var(--accent);
line-height: 1;
}
/* =============================================================
* Brand lockup — F-monogram + Fundamento wordmark, both Fraunces,
* resting on "the foundation course" (a single horizontal rule).
* Canonical per Logo Round 3 · D · §1 lockup specs.
* - Wordmark: Fraunces · opsz 144 · wght 500 · +0.5% tracking
* - Monogram: Fraunces · same axis settings
* - Rule: stroke ≈ wordmark stem / 8, sits on optical baseline
* - Color: Fundamento Green #0E1B2C on cream #fafaf7
* ============================================================= */
.brand {
display: inline-flex;
align-items: center;
color: var(--accent);
text-decoration: none;
position: relative;
line-height: 1;
}
/* The Round 6 lockup SVG already includes the foundation course (the rule
beneath the wordmark), so the brand anchor no longer draws its own. */
.brand-lockup {
display: block;
width: 180px;
height: auto;
transition: opacity 0.15s ease;
}
.brand:hover .brand-lockup { opacity: 0.82; }
.brand-mark {
display: inline-block;
font-family: var(--font-serif);
font-weight: 500;
font-size: 24px;
font-feature-settings: "ss01", "ss02";
font-variation-settings: "opsz" 144;
line-height: 1;
letter-spacing: 0;
color: inherit;
/* Reset legacy box styling */
background: none;
border-radius: 0;
width: auto;
height: auto;
box-shadow: none;
padding: 0;
}
.brand-name {
font-family: var(--font-serif);
font-weight: 500;
font-size: 22px;
font-feature-settings: "ss01", "ss02";
font-variation-settings: "opsz" 144;
letter-spacing: 0.011em; /* +0.5% tracking minus baseline ~0% = +1.1% optical */
color: inherit;
line-height: 1;
}
.site-nav {
display: flex;
align-items: center;
gap: 2px;
flex-wrap: wrap;
}
.site-nav a {
color: var(--ink-soft);
text-decoration: none;
padding: 7px 10px;
border-radius: var(--radius-sm);
font-size: 13.5px;
font-weight: 500;
white-space: nowrap;
transition: background var(--t-fast), color var(--t-fast);
}
.site-nav a:hover {
background: var(--accent-soft);
color: var(--accent-deep);
}
.site-nav a.active {
background: var(--accent);
color: white;
font-weight: 600;
}
/* =============================================================
* Header — utility cluster (Family Office CTA + icon controls).
* Push everything from .nav-fo onward to the right edge so the
* text nav fills the left side and the icons live as a deliberate
* group on the right. Works even though all items are siblings of
* the same .site-nav flex container.
* ============================================================= */
.site-nav .nav-fo { margin-left: auto; }
/* Subtle hairline divider between the text-nav and the utility cluster */
.site-nav .nav-fo + .nav-dash::before,
.site-nav .nav-fo + .nav-bell::before,
.site-nav .nav-fo + #lang-toggle::before { content: none; } /* placeholder for future */
/* =============================================================
* Header — compact icon-only tier + auth chips.
* Both collapse to 36x36 icon-buttons matching the bell + dashboard
* sizes, so the cluster reads as a deliberate icon row in any
* language. The visible text label is hidden; aria-label and title
* are kept up-to-date by refreshTierChip / refreshAuthChip in app.js
* so screen-reader users + hover tooltips still get the full label.
* ============================================================= */
/* Visually hide the inner text labels but keep them in the DOM
* (no accessibility loss — aria-label on the chip carries the meaning). */
.site-header #tier-chip-label,
.site-header #auth-chip-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Tier chip → circular icon-button with a centered colored dot */
.site-header .tier-chip {
width: 36px;
height: 36px;
padding: 0;
border-radius: 999px;
justify-content: center;
margin-left: 4px;
letter-spacing: 0;
/* Reset the special tier-bg gradients to the neutral chip background;
the dot itself carries the tier color. Keeps the icon row visually
uniform even for premium tiers. */
}
.site-header .tier-chip,
.site-header .tier-chip.tier-chip--free,
.site-header .tier-chip.tier-chip--pro,
.site-header .tier-chip.tier-chip--premier,
.site-header .tier-chip.tier-chip--family-office,
.site-header .tier-chip.tier-chip--enterprise {
background: var(--paper);
color: var(--ink-soft);
border-color: var(--line);
}
.site-header .tier-chip:hover {
background: var(--accent-soft);
border-color: var(--accent);
}
/* Make the dot a touch larger so it reads as the chip's content */
.site-header .tier-chip .tier-chip-dot {
width: 12px;
height: 12px;
}
/* Auth chip → circular icon-button with the existing person silhouette
pseudo-element centered. */
.site-header .auth-chip {
width: 36px;
height: 36px;
padding: 0;
border-radius: 999px;
justify-content: center;
letter-spacing: 0;
gap: 0;
}
.site-header .auth-chip::before {
margin: 0; /* center the silhouette in the round button */
}
/* When signed in, swap the silhouette for the small accent dot
already defined for .auth-chip--signedin::before */
.site-header .auth-chip--signedin::before {
width: 10px;
height: 10px;
}
/* =============================================================
* MAIN / PAGE
* ============================================================= */
main {
padding: var(--s-7) var(--s-5) var(--s-9);
}
/* =============================================================
* HERO (home)
* ============================================================= */
.hero {
padding: var(--s-5) 0 var(--s-6);
}
.hero--split {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: var(--s-7);
align-items: center;
padding-top: var(--s-6);
padding-bottom: var(--s-8);
}
.hero-text {
max-width: 580px;
}
.hero-kicker {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--ink-mute);
background: transparent;
padding: 0;
border-radius: 0;
margin-bottom: var(--s-4);
}
.hero-kicker::before {
content: "";
width: 26px;
height: 1.5px;
background: var(--brass);
display: inline-block;
}
.hero h1 {
font-family: var(--font-serif);
font-size: clamp(34px, 4.5vw, 52px);
line-height: 1.05;
margin: 0 0 var(--s-4);
letter-spacing: -1px;
font-weight: 500;
}
.lead {
font-size: clamp(16px, 1.4vw, 18px);
color: var(--ink-soft);
max-width: 640px;
margin: 0 0 var(--s-3);
line-height: 1.55;
}
.lead em { font-style: italic; color: var(--accent-deep); font-weight: 500; }
.lead-sub {
font-size: 15px;
color: var(--ink-mute);
max-width: 640px;
margin: 0;
}
.hero-ctas {
display: flex;
gap: var(--s-3);
margin-top: var(--s-5);
flex-wrap: wrap;
}
.hero-art {
display: block;
width: 100%;
}
.hero-art svg {
width: 100%;
height: auto;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
background: linear-gradient(180deg, #f3f8f6, #f7f6f1);
}
/* =============================================================
* Buttons
* ============================================================= */
.btn {
display: inline-flex;
align-items: center;
gap: var(--s-2);
padding: 11px 18px;
border-radius: var(--radius-sm);
font-size: 14px;
font-weight: 600;
text-decoration: none;
border: 1px solid transparent;
transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.btn:hover { transform: translateY(-1px); }
.btn--primary {
background: var(--brass);
color: #1a130a;
box-shadow: 0 1px 1px rgba(14, 27, 44, 0.10), 0 10px 24px -12px rgba(176, 141, 79, 0.50);
}
.btn--primary:hover {
background: var(--brass-bright);
color: #1a130a;
box-shadow: 0 1px 1px rgba(14, 27, 44, 0.10), 0 14px 30px -12px rgba(176, 141, 79, 0.60);
}
.btn--ghost {
background: var(--paper);
color: var(--ink);
border-color: var(--line-strong);
}
.btn--ghost:hover {
border-color: var(--accent);
color: var(--accent-deep);
}
/* =============================================================
* Calculator cards (home grid)
* ============================================================= */
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
gap: var(--s-4);
margin-top: var(--s-5);
}
.card {
display: flex;
flex-direction: column;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--s-5) var(--s-5) var(--s-4);
text-decoration: none;
color: inherit;
transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
position: relative;
overflow: hidden;
}
.card::after {
content: "";
position: absolute;
inset: 0;
border-radius: var(--radius);
pointer-events: none;
background: linear-gradient(140deg, transparent 70%, rgba(14, 27, 44, 0.04));
opacity: 0;
transition: opacity var(--t-mid);
}
.card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow);
border-color: var(--accent);
}
.card:hover::after { opacity: 1; }
.card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: var(--accent-soft);
color: var(--accent);
border-radius: 10px;
margin-bottom: var(--s-3);
}
.card .card-num,
.card-num {
/* Subtle editorial numeral at top-right corner.
Compound selector .card .card-num wins over the .card > * { position: relative } rule. */
position: absolute;
top: 16px;
right: 18px;
margin: 0;
font-family: var(--font-serif);
font-size: 11px;
letter-spacing: 1.6px;
color: var(--ink-mute);
opacity: 0.55;
text-transform: uppercase;
font-weight: 600;
pointer-events: none;
z-index: 2;
}
.card h2 {
font-family: var(--font-serif);
font-size: 22px;
line-height: 1.18;
margin: 0 0 var(--s-3);
letter-spacing: -0.3px;
font-weight: 500;
}
.card p {
color: var(--ink-soft);
font-size: 14.5px;
margin: 0 0 var(--s-4);
line-height: 1.5;
}
.card-cta {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--accent);
font-weight: 600;
font-size: 13.5px;
margin-top: auto;
}
.card:hover .card-cta { color: var(--accent-deep); }
/* =============================================================
* Library promo (home page banner)
* ============================================================= */
.library-promo {
position: relative;
background:
radial-gradient(140% 80% at 100% 0%, rgba(201, 168, 124, 0.18), transparent 50%),
linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
color: #fafaf7;
border-radius: var(--radius);
padding: var(--s-6) var(--s-7);
margin-top: var(--s-7);
box-shadow: var(--shadow);
overflow: hidden;
}
.library-promo::after {
content: "";
position: absolute;
right: -60px;
top: -60px;
width: 240px;
height: 240px;
border-radius: 50%;
background: radial-gradient(circle, rgba(201, 168, 124, 0.18), transparent 70%);
pointer-events: none;
}
.library-promo h2 {
font-family: var(--font-serif);
font-size: 24px;
margin: 0 0 var(--s-3);
color: #fff;
font-weight: 500;
letter-spacing: -0.3px;
}
.library-promo p {
color: rgba(250, 250, 247, 0.85);
margin: 0 0 var(--s-4);
font-size: 15px;
line-height: 1.65;
max-width: 720px;
}
.library-promo p strong { color: #fff; font-weight: 600; }
.library-promo-cta {
display: inline-flex;
align-items: center;
gap: 6px;
background: #fff;
color: var(--accent-deep);
text-decoration: none;
padding: 10px 18px;
border-radius: var(--radius-sm);
font-weight: 600;
font-size: 14px;
transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.library-promo-cta:hover {
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}
/* =============================================================
* Trust block
* ============================================================= */
.trust {
margin-top: var(--s-7);
padding: var(--s-6) var(--s-7);
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.trust h3 {
margin: 0 0 var(--s-3);
font-family: var(--font-serif);
font-size: 20px;
font-weight: 500;
}
.trust ul { padding-left: 20px; margin: 0; }
.trust li { margin-bottom: 10px; color: var(--ink-soft); }
.trust strong { color: var(--ink); font-weight: 600; }
/* =============================================================
* Module head (every internal page)
* The H1 sits over "the foundation course" — a short hairline rule
* beneath the heading, recurring across the platform as a quiet
* system gesture (per Logo Round 3 · D · §24).
* ============================================================= */
.module-head { margin-bottom: var(--s-6); }
.module-head h1 {
font-family: var(--font-serif);
font-weight: 500;
font-feature-settings: "ss01", "ss02";
font-variation-settings: "opsz" 144;
font-size: clamp(28px, 3vw, 36px);
line-height: 1.15;
letter-spacing: -0.5px;
margin: 0 0 10px;
/* The rule — short underline, ~30% of typical line width.
Matches the lockup's foundation-course system gesture. */
display: inline-block;
padding-bottom: 8px;
border-bottom: 2px solid var(--accent);
}
.module-head .lead,
.module-head .hero-kicker { display: block; }
.module-head .hero-kicker + h1 { margin-top: var(--s-3); }
.module-head h1 + .lead { margin-top: var(--s-4); }
/* =============================================================
* Forms
* ============================================================= */
.grid-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-4);
margin-bottom: var(--s-5);
}
.grid-form fieldset {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--s-5) var(--s-5);
margin: 0;
}
.grid-form fieldset.full { grid-column: 1 / -1; }
.grid-form legend {
font-family: var(--font-serif);
font-size: 15px;
font-weight: 600;
padding: 0 8px;
color: var(--accent-deep);
background: var(--paper);
}
.grid-form label {
display: block;
font-size: 13.5px;
color: var(--ink-soft);
margin-top: var(--s-3);
font-weight: 500;
}
.grid-form label:first-of-type { margin-top: var(--s-1); }
.grid-form input[type="number"],
.grid-form input[type="search"],
.grid-form select {
display: block;
width: 100%;
margin-top: 6px;
padding: 10px 12px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
font-size: 15px;
font-family: var(--font-sans);
background: var(--paper);
color: var(--ink);
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.grid-form input:focus,
.grid-form select:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.grid-form label input[type="checkbox"] {
margin-right: 6px;
vertical-align: -2px;
accent-color: var(--accent);
}
.hint {
display: block;
color: var(--ink-mute);
font-size: 12px;
font-style: italic;
}
/* =============================================================
* Result panels (calculators)
* ============================================================= */
.result {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--s-6) var(--s-7);
margin-bottom: var(--s-5);
box-shadow: var(--shadow);
}
.result h2 {
font-family: var(--font-serif);
font-size: 24px;
margin: 0 0 var(--s-2);
font-weight: 500;
}
.result h3 {
font-family: var(--font-serif);
font-size: 17px;
margin: var(--s-5) 0 var(--s-3);
font-weight: 600;
color: var(--accent-deep);
}
.result p { margin: 6px 0; color: var(--ink-soft); }
.result strong { color: var(--ink); font-weight: 600; }
.result ul { color: var(--ink-soft); padding-left: 20px; }
.result li { margin-bottom: 4px; }
.kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--s-3);
margin: var(--s-5) 0 var(--s-2);
}
.kpi {
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: var(--s-3) var(--s-4);
}
.kpi-label {
display: block;
font-size: 11px;
color: var(--ink-mute);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 4px;
font-weight: 600;
}
.kpi-value {
display: block;
font-family: var(--font-serif);
font-size: 24px;
color: var(--ink);
letter-spacing: -0.3px;
font-weight: 500;
}
.kpi-sub {
display: block;
font-size: 12px;
color: var(--ink-mute);
margin-top: 2px;
}
.kpi.good { background: var(--good-soft); border-color: #c5e2cc; }
.kpi.good .kpi-value { color: var(--good); }
.kpi.warn { background: var(--warn-soft); border-color: #f0d0bd; }
.kpi.warn .kpi-value { color: var(--warn); }
.kpi.bad { background: var(--bad-soft); border-color: #e7c4c5; }
.kpi.bad .kpi-value { color: var(--bad); }
.scenario-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: var(--s-3);
margin: var(--s-3) 0;
}
.scenario {
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--s-4) var(--s-4);
background: var(--paper);
}
.scenario.recommended {
border-color: var(--accent);
background: var(--accent-soft);
box-shadow: 0 0 0 1px var(--accent) inset;
}
.scenario h4 {
font-family: var(--font-serif);
font-size: 17px;
margin: 0 0 4px;
font-weight: 600;
}
.scenario .big {
font-family: var(--font-serif);
font-size: 26px;
color: var(--accent-deep);
margin: 6px 0;
font-weight: 500;
letter-spacing: -0.3px;
}
.scenario ul { padding-left: 18px; margin: 6px 0; }
.scenario li { font-size: 13px; color: var(--ink-soft); }
.takeaway {
border-left: 3px solid var(--accent);
background: var(--accent-soft);
padding: var(--s-3) var(--s-4);
margin-top: var(--s-4);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.takeaway strong { color: var(--accent-deep); font-weight: 600; }
.warn {
border-left: 3px solid var(--warn);
background: var(--warn-soft);
padding: var(--s-3) var(--s-4);
margin: var(--s-3) 0;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
/* =============================================================
* Explainer (details/summary)
* ============================================================= */
.explainer {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 4px var(--s-5);
margin-bottom: var(--s-5);
}
.explainer summary {
cursor: pointer;
font-family: var(--font-serif);
font-size: 16px;
font-weight: 600;
color: var(--accent-deep);
padding: 14px 0;
list-style: none;
}
.explainer summary::-webkit-details-marker { display: none; }
.explainer summary::before {
content: "+";
display: inline-block;
width: 18px;
font-weight: 400;
color: var(--accent);
font-family: var(--font-sans);
}
.explainer[open] summary::before { content: "−"; }
.explainer[open] summary { border-bottom: 1px solid var(--line); margin-bottom: var(--s-3); }
.explainer p { color: var(--ink-soft); }
.strategies p { margin: 10px 0; }
/* =============================================================
* Climate page
* ============================================================= */
.climate-framework,
.climate-redflags,
.climate-resources {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--s-6) var(--s-7);
margin-bottom: var(--s-4);
}
.climate-framework h2,
.climate-redflags h2,
.climate-resources h2 {
font-family: var(--font-serif);
font-size: 22px;
margin: 0 0 var(--s-3);
font-weight: 500;
display: flex;
align-items: center;
gap: 10px;
}
.climate-framework ol {
list-style: none;
padding: 0;
counter-reset: clim;
}
.climate-framework ol li {
counter-increment: clim;
padding-left: 48px;
position: relative;
margin: var(--s-4) 0;
}
.climate-framework ol li::before {
content: counter(clim);
position: absolute;
left: 0;
top: 2px;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--accent);
color: white;
font-family: var(--font-serif);
font-weight: 600;
font-size: 15px;
display: flex;
align-items: center;
justify-content: center;
}
.climate-framework h3 {
font-family: var(--font-serif);
font-size: 17px;
margin: 0 0 4px;
font-weight: 600;
}
.climate-framework p {
margin: 4px 0;
color: var(--ink-soft);
font-size: 14.5px;
line-height: 1.55;
}
.climate-redflags li,
.climate-resources li {
color: var(--ink-soft);
margin-bottom: 6px;
line-height: 1.55;
}
/* =============================================================
* Glossary
* ============================================================= */
.search-box {
display: block;
max-width: 520px;
margin-top: var(--s-4);
font-size: 13.5px;
color: var(--ink-soft);
font-weight: 500;
}
.search-box input {
width: 100%;
margin-top: 6px;
padding: 12px 14px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
font-size: 15px;
font-family: var(--font-sans);
background: var(--paper);
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.search-box input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.glossary-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: var(--s-3);
margin-top: var(--s-5);
}
.gloss-item {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--s-4) var(--s-5);
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.gloss-item:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.gloss-item h3 {
font-family: var(--font-serif);
font-size: 17px;
margin: 0 0 6px;
color: var(--accent-deep);
font-weight: 600;
}
.gloss-item p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.gloss-tag {
display: inline-block;
background: var(--bg);
color: var(--ink-mute);
font-size: 11px;
padding: 2px 10px;
border-radius: 999px;
margin-top: var(--s-2);
letter-spacing: 0.5px;
text-transform: uppercase;
font-weight: 600;
}
/* =============================================================
* LIBRARY view
* ============================================================= */
.lib-cat {
margin-bottom: var(--s-7);
}
.lib-cat-title {
font-family: var(--font-serif);
font-size: 22px;
margin: 0 0 var(--s-4);
display: flex;
align-items: center;
gap: 12px;
padding-bottom: 10px;
border-bottom: 1px solid var(--line);
font-weight: 500;
letter-spacing: -0.2px;
}
.lib-cat-ico {
display: inline-flex;
width: 36px;
height: 36px;
background: var(--accent-soft);
color: var(--accent);
border-radius: var(--radius-sm);
align-items: center;
justify-content: center;
}
.lib-cat-label { flex: 1; color: var(--ink); }
.lib-cat-count {
font-family: var(--font-sans);
font-size: 12px;
color: var(--ink-mute);
font-weight: 600;
background: var(--bg);
border: 1px solid var(--line);
padding: 2px 8px;
border-radius: 999px;
}
.lib-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--s-3);
}
.lib-grid--flat { margin-top: var(--s-4); }
.lib-card {
display: block;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--s-4) var(--s-5);
text-decoration: none;
color: inherit;
transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.lib-card:hover {
border-color: var(--accent);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.lib-card h3 {
font-family: var(--font-serif);
font-size: 17px;
margin: 0 0 6px;
line-height: 1.25;
color: var(--accent-deep);
font-weight: 600;
letter-spacing: -0.1px;
}
.lib-card p {
margin: 0;
font-size: 14px;
color: var(--ink-soft);
line-height: 1.5;
}
.lib-card-cat {
display: inline-block;
background: var(--accent-soft);
color: var(--accent-deep);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.6px;
padding: 2px 8px;
border-radius: 999px;
margin-bottom: var(--s-2);
font-weight: 600;
}
mark {
background: var(--sand-soft);
color: var(--ink);
padding: 0 2px;
border-radius: 2px;
}
.lib-results-meta {
color: var(--ink-mute);
font-size: 13px;
margin: 4px 0 var(--s-2);
}
.lib-empty {
color: var(--ink-mute);
background: var(--paper);
border: 1px dashed var(--line-strong);
border-radius: var(--radius);
padding: var(--s-6);
text-align: center;
}
/* =============================================================
* Topic detail
* ============================================================= */
.breadcrumbs {
font-size: 13px;
color: var(--ink-mute);
margin-bottom: var(--s-3);
}
.breadcrumbs a {
color: var(--accent);
text-decoration: none;
font-weight: 500;
}
.breadcrumbs a:hover { text-decoration: underline; }
.topic {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--s-6) var(--s-7);
margin-bottom: var(--s-5);
box-shadow: var(--shadow);
max-width: 780px;
}
.topic h1 {
font-family: var(--font-serif);
font-size: clamp(28px, 3.2vw, 36px);
line-height: 1.15;
margin: 0 0 var(--s-4);
letter-spacing: -0.5px;
font-weight: 500;
}
.topic-summary {
font-size: 17px;
line-height: 1.55;
color: var(--ink);
border-left: 3px solid var(--accent);
background: var(--accent-soft);
padding: var(--s-3) var(--s-4);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
margin: 0 0 var(--s-5);
font-weight: 450;
}
.topic-body p {
font-size: 16px;
line-height: 1.7;
color: var(--ink-soft);
margin: 0 0 var(--s-3);
}
.topic-facts {
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: var(--s-3) var(--s-5);
margin-top: var(--s-5);
}
.topic-facts h3 {
font-family: var(--font-serif);
font-size: 15px;
margin: 0 0 var(--s-2);
color: var(--accent-deep);
font-weight: 600;
}
.topic-facts ul {
margin: 0;
padding-left: 20px;
}
.topic-facts li {
font-size: 14px;
color: var(--ink-soft);
margin-bottom: 4px;
}
.topic-tags {
margin-top: var(--s-4);
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.topic-tag {
font-size: 12px;
color: var(--ink-mute);
background: var(--bg);
padding: 3px 10px;
border-radius: 999px;
}
.topic-related {
max-width: 780px;
}
.topic-related h3 {
font-family: var(--font-serif);
font-size: 20px;
margin: 0 0 var(--s-3);
font-weight: 500;
}
/* =============================================================
* Guided paths
* ============================================================= */
.paths-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: var(--s-4);
margin-top: var(--s-3);
}
.path-card {
display: block;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--s-5);
text-decoration: none;
color: inherit;
transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
position: relative;
overflow: hidden;
}
.path-card::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 4px;
height: 100%;
background: var(--accent);
opacity: 0;
transition: opacity var(--t-fast);
}
.path-card:hover {
border-color: var(--accent);
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.path-card:hover::before { opacity: 1; }
.path-card h2 {
font-family: var(--font-serif);
font-size: 21px;
margin: 0 0 6px;
color: var(--accent-deep);
line-height: 1.2;
font-weight: 500;
letter-spacing: -0.2px;
}
.path-subtitle {
font-size: 13px;
color: var(--ink-mute);
margin: 0 0 var(--s-3);
font-style: italic;
}
.path-intro {
font-size: 14px;
color: var(--ink-soft);
margin: 0 0 var(--s-4);
line-height: 1.55;
}
.path-meta {
font-size: 13px;
font-weight: 600;
color: var(--accent);
display: inline-flex;
align-items: center;
gap: 4px;
}
.path-steps {
list-style: none;
padding: 0;
margin: var(--s-5) 0;
max-width: 780px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.path-step {
display: flex;
align-items: flex-start;
gap: var(--s-4);
padding: var(--s-4) var(--s-5);
border-bottom: 1px solid var(--line);
transition: background var(--t-fast);
}
.path-step:hover { background: #fcfbf8; }
.path-step:last-child { border-bottom: none; }
.path-step-num {
flex-shrink: 0;
width: 36px;
height: 36px;
background: var(--accent);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-serif);
font-weight: 600;
font-size: 15px;
margin-top: 2px;
box-shadow: 0 1px 2px rgba(9, 64, 52, 0.3);
}
.path-step-body {
flex: 1;
min-width: 0;
}
.path-step-kind {
display: inline-block;
background: var(--accent-soft);
color: var(--accent-deep);
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.8px;
font-weight: 700;
padding: 2px 8px;
border-radius: 999px;
margin-bottom: 6px;
}
.path-step-body h3 {
font-family: var(--font-serif);
font-size: 18px;
margin: 0 0 6px;
line-height: 1.25;
font-weight: 500;
}
.path-step-body h3 a {
color: var(--ink);
text-decoration: none;
}
.path-step-body h3 a:hover {
color: var(--accent-deep);
text-decoration: underline;
}
.path-step-why {
font-size: 14px;
color: var(--ink-soft);
margin: 0;
line-height: 1.55;
}
.path-finish {
background: var(--accent-soft);
border-left: 3px solid var(--accent);
padding: var(--s-4) var(--s-5);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
max-width: 780px;
}
.path-finish p { margin: 0; color: var(--ink); }
.path-finish a { color: var(--accent-deep); font-weight: 600; }
/* =============================================================
* Scorecard
* ============================================================= */
.scorecard-wrap {
overflow-x: auto;
margin: var(--s-2) 0 var(--s-4);
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
}
.scorecard {
width: 100%;
border-collapse: collapse;
font-size: 14px;
min-width: 880px;
}
.scorecard thead {
background: linear-gradient(180deg, #fafaf7, var(--bg));
border-bottom: 1px solid var(--line-strong);
}
.scorecard th {
text-align: left;
padding: var(--s-3) var(--s-4);
font-family: var(--font-serif);
font-weight: 600;
color: var(--accent-deep);
font-size: 13px;
letter-spacing: 0.1px;
}
.scorecard th.sc-rank { width: 44px; text-align: center; }
.scorecard th.sc-class-h { width: 240px; }
.scorecard th.sc-score-h { width: 280px; }
.scorecard tbody tr {
border-bottom: 1px solid var(--line);
transition: background var(--t-fast);
}
.scorecard tbody tr:hover { background: #fcfbf8; }
.scorecard tbody tr:last-child { border-bottom: none; }
.scorecard td {
padding: var(--s-3) var(--s-4);
vertical-align: middle;
}
.scorecard .sc-rank {
text-align: center;
color: var(--ink-mute);
font-family: var(--font-serif);
font-size: 15px;
font-weight: 500;
}
.scorecard .sc-class {
font-weight: 600;
color: var(--ink);
font-size: 14.5px;
}
.scorecard .sc-class a {
color: var(--accent-deep);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color var(--t-fast);
}
.scorecard .sc-class a:hover { border-color: var(--accent); }
.sc-score-cell { padding: var(--s-3) var(--s-4); }
.sc-score-row {
display: flex;
align-items: center;
gap: 10px;
}
.sc-chip {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 46px;
padding: 4px 8px;
border-radius: 999px;
font-family: var(--font-serif);
font-weight: 600;
font-size: 13px;
letter-spacing: -0.1px;
}
.sc-chip--best { background: var(--accent); color: #fff; }
.sc-chip--good { background: var(--good-soft); color: var(--good); }
.sc-chip--mid { background: var(--bg); color: var(--ink-soft); border: 1px solid var(--line); }
.sc-chip--bad { background: var(--bad); color: #fff; }
.sc-bar-track {
position: relative;
flex: 1;
height: 8px;
background: var(--bg);
border-radius: 999px;
overflow: hidden;
}
.sc-bar-center {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 1px;
background: var(--line-strong);
transform: translateX(-50%);
}
.sc-bar {
position: absolute;
top: 0;
bottom: 0;
border-radius: 999px;
transition: width var(--t-mid);
}
.sc-bar--best { background: linear-gradient(90deg, var(--accent-mid), var(--accent)); }
.sc-bar--good { background: var(--good); }
.sc-bar--mid { background: var(--ink-mute); opacity: 0.5; }
.sc-bar--bad { background: linear-gradient(90deg, var(--bad), #c33438); }
.sc-conviction {
display: inline-block;
text-transform: uppercase;
font-size: 10.5px;
letter-spacing: 0.8px;
font-weight: 700;
padding: 2px 8px;
border-radius: 999px;
}
.sc-high { color: var(--good); background: var(--good-soft); }
.sc-medium { color: var(--ink-mute); background: var(--bg); border: 1px solid var(--line); }
.sc-drivers {
color: var(--ink-soft);
font-size: 13.5px;
line-height: 1.5;
max-width: 380px;
}
.sc-footnote {
font-size: 12px;
color: var(--ink-mute);
line-height: 1.6;
margin: 4px 0 var(--s-6);
max-width: 880px;
}
.scorecard-takeaways {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--s-6) var(--s-7);
margin-bottom: var(--s-5);
}
.scorecard-takeaways h2 {
font-family: var(--font-serif);
font-size: 22px;
margin: 0 0 var(--s-4);
font-weight: 500;
}
.scorecard-takeaways ol { padding-left: 22px; }
.scorecard-takeaways li { color: var(--ink-soft); margin-bottom: var(--s-3); line-height: 1.6; }
.scorecard-takeaways strong { color: var(--ink); font-weight: 600; }
/* =============================================================
* V2 — Monetization layer
* ============================================================= */
/* Founding-member banner (above hero) */
.founder-banner {
background: linear-gradient(90deg, var(--sand-soft), #fdf6e3);
border: 1px solid #ead9b5;
color: #6b4f1d;
padding: 10px 16px;
border-radius: var(--radius-sm);
font-size: 13.5px;
margin: var(--s-3) 0 var(--s-5);
text-align: center;
}
.founder-banner strong { color: var(--accent-deep); }
.founder-banner a {
margin-left: 8px;
color: var(--accent-deep);
font-weight: 600;
white-space: nowrap;
}
/* Btn — link variant (used on hero) */
.btn--link {
background: transparent;
color: var(--accent-deep);
border: none;
padding-left: 4px;
padding-right: 4px;
}
.btn--link:hover { color: var(--accent); text-decoration: underline; }
/* nav-fo highlight */
.site-nav a.nav-fo {
background: var(--accent-deep);
color: #fff;
}
.site-nav a.nav-fo:hover { background: var(--accent); }
.site-nav a.nav-fo.active { background: var(--accent); color: #fff; }
/* Tier badges (on calc cards). Normal-flow inline-flex chip at top-left.
`.card .tier-badge` specificity overrides the .card > * { position: relative } rule
and the flex-column stretch default. */
.card .tier-badge,
.tier-badge {
position: static;
display: inline-flex;
align-self: flex-start;
align-items: center;
width: auto;
max-width: calc(100% - 40px); /* leave room for .card-num at top-right */
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
padding: 4px 11px;
border-radius: 999px;
margin-bottom: var(--s-3);
z-index: 2;
}
.tier-badge--free { background: var(--good-soft); color: var(--good); }
.tier-badge--pro { background: var(--sand-soft); color: #7a5a1a; border: 1px solid #ead9b5; }
.tier-badge--premier { background: var(--accent-deep); color: #fff; }
.tier-badge--fo { background: #2a1a47; color: #fff; }
/* Card content-type badges (e.g., "Framework" on the climate card to
distinguish it from calculator/quiz cards). Sized as a sibling chip
next to .tier-badge — same scale, softer visual weight. */
.card-badges {
display: flex;
gap: 6px;
align-items: center;
flex-wrap: wrap;
margin-bottom: var(--s-3);
align-self: flex-start;
max-width: calc(100% - 40px); /* leave room for .card-num at top-right */
z-index: 2;
}
.card-badges .tier-badge { margin-bottom: 0; }
.card-kind {
display: inline-flex;
align-items: center;
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
padding: 4px 11px;
border-radius: 999px;
}
.card-kind--framework {
background: var(--paper);
color: var(--ink-soft);
border: 1px solid var(--line);
}
/* Referral strip (home page) */
.referral-strip {
margin-top: var(--s-7);
padding: var(--s-6) var(--s-7);
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.referral-strip h3 {
font-family: var(--font-serif);
font-size: 22px;
margin: 0 0 var(--s-4);
font-weight: 500;
color: var(--ink);
}
.referral-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--s-3);
}
.referral-item {
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: var(--s-3) var(--s-4);
}
.referral-item h4 {
font-family: var(--font-serif);
font-size: 16px;
margin: 0 0 4px;
color: var(--accent-deep);
font-weight: 600;
}
.referral-item p {
font-size: 13.5px;
color: var(--ink-soft);
margin: 0;
line-height: 1.5;
}
/* Email capture */
.email-capture {
margin-top: var(--s-6);
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
color: #fafaf7;
border-radius: var(--radius);
padding: var(--s-6) var(--s-7);
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: var(--s-5);
align-items: center;
box-shadow: var(--shadow);
}
.email-capture h3 {
font-family: var(--font-serif);
color: #fff;
font-size: 22px;
margin: 0 0 var(--s-2);
font-weight: 500;
}
.email-capture p { color: rgba(250, 250, 247, 0.85); margin: 0; font-size: 14.5px; line-height: 1.55; }
.email-form {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: stretch;
}
.email-form input[type="email"] {
flex: 1;
min-width: 200px;
padding: 11px 14px;
border-radius: var(--radius-sm);
border: 1px solid transparent;
font-size: 14.5px;
font-family: var(--font-sans);
background: rgba(255, 255, 255, 0.95);
color: var(--ink);
}
.email-form input:focus { outline: none; box-shadow: 0 0 0 3px rgba(201, 168, 124, 0.35); }
.email-form .btn { white-space: nowrap; }
.email-form-msg {
width: 100%;
margin: 4px 0 0;
font-size: 13px;
min-height: 18px;
}
.email-form-msg--ok { color: var(--sand); }
.email-form-msg--err { color: #ffb89f; }
/* Upgrade strip (inside calculator results) */
.upgrade-strip {
margin-top: var(--s-5);
background: linear-gradient(135deg, #fdf6e3 0%, #f4ecd5 100%);
border: 1px solid #ead9b5;
border-radius: var(--radius);
padding: var(--s-4) var(--s-5);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-4);
flex-wrap: wrap;
}
.upgrade-strip strong {
display: block;
font-family: var(--font-serif);
font-size: 17px;
color: var(--accent-deep);
margin-bottom: 4px;
font-weight: 600;
}
.upgrade-strip p { margin: 0; color: #5e4818; font-size: 14px; line-height: 1.5; max-width: 580px; }
.upgrade-strip .btn { flex-shrink: 0; }
.upgrade-strip--investor { background: linear-gradient(135deg, #f4e8ff 0%, #ecdbf7 100%); border-color: #d8c0eb; }
.upgrade-strip--investor strong { color: #3b2467; }
.upgrade-strip--investor p { color: #4b3174; }
.upgrade-strip--tax { background: linear-gradient(135deg, #e7f1ee 0%, #d2e6df 100%); border-color: #b3d0c5; }
.upgrade-strip--tax strong { color: var(--accent-deep); }
.upgrade-strip--tax p { color: #2c4a3f; }
/* Paywall blur for investor module */
.paywall-row {
list-style: none;
margin-top: 6px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
.paywall-blur {
color: var(--ink-mute);
filter: blur(3px);
user-select: none;
font-style: italic;
}
.paywall-tag {
margin-left: 8px;
font-size: 11px;
padding: 3px 10px;
background: var(--sand-soft);
color: #7a5a1a;
border: 1px solid #ead9b5;
border-radius: 999px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* =============================================================
* PRICING page
* ============================================================= */
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--s-4);
margin-bottom: var(--s-7);
}
.pricing-tier {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--s-5);
display: flex;
flex-direction: column;
transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
position: relative;
}
.pricing-tier:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.pricing-tier header { margin-bottom: var(--s-3); }
.pricing-tier-tag {
display: inline-block;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.8px;
font-weight: 700;
padding: 3px 10px;
border-radius: 999px;
background: var(--bg);
color: var(--ink-mute);
margin-bottom: var(--s-3);
}
.pricing-tier h2 {
font-family: var(--font-serif);
font-size: 26px;
margin: 0 0 var(--s-2);
font-weight: 500;
letter-spacing: -0.3px;
color: var(--ink);
}
.pricing-tier-price {
margin: 0;
font-family: var(--font-serif);
display: flex;
align-items: baseline;
gap: 4px;
}
.price-num {
font-size: 32px;
font-weight: 500;
color: var(--accent-deep);
}
.price-period { font-size: 13px; color: var(--ink-mute); font-family: var(--font-sans); }
.pricing-tier-sub {
font-size: 12.5px;
color: var(--ink-mute);
margin: 4px 0 var(--s-3);
}
.pricing-tier-sub strong { color: #7a5a1a; }
.pricing-tier ul {
list-style: none;
padding: 0;
margin: 0 0 var(--s-4);
flex: 1;
}
.pricing-tier li {
font-size: 13.5px;
color: var(--ink-soft);
padding: 6px 0 6px 22px;
position: relative;
border-bottom: 1px solid var(--line);
line-height: 1.45;
}
.pricing-tier li:last-child { border-bottom: none; }
.pricing-tier li::before {
content: "";
position: absolute;
left: 0;
top: 11px;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--accent-soft);
background-image: url("data:image/svg+xml;utf8,");
background-size: 11px;
background-position: center;
background-repeat: no-repeat;
}
.pricing-tier li strong { color: var(--ink); font-weight: 600; }
.pricing-tier .btn { width: 100%; justify-content: center; }
/* Featured (Premier) tier */
.pricing-tier--featured {
border-color: var(--accent);
box-shadow: 0 18px 40px -18px rgba(14, 27, 44, 0.22);
}
.pricing-tier--featured::before {
content: "Most popular";
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
background: var(--accent);
color: #fff;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
padding: 3px 12px;
border-radius: 999px;
}
.pricing-tier--featured .pricing-tier-tag { background: var(--accent-soft); color: var(--accent-deep); }
/* Family-office tier — dark variant */
.pricing-tier--fo {
background: linear-gradient(165deg, #0b3d33 0%, #061d18 100%);
color: #e6efec;
border-color: var(--accent-deep);
}
.pricing-tier--fo .pricing-tier-tag {
background: rgba(201, 168, 124, 0.18);
color: var(--sand);
}
.pricing-tier--fo h2 { color: #fff; }
.pricing-tier--fo .price-num { color: var(--sand); }
.pricing-tier--fo .price-period { color: rgba(230, 239, 236, 0.75); }
.pricing-tier--fo .pricing-tier-sub { color: rgba(230, 239, 236, 0.7); }
.pricing-tier--fo .pricing-tier-sub strong { color: var(--sand); }
.pricing-tier--fo li { color: rgba(230, 239, 236, 0.86); border-color: rgba(230, 239, 236, 0.1); }
.pricing-tier--fo li strong { color: #fff; }
.pricing-tier--fo li::before {
background: rgba(201, 168, 124, 0.2);
background-image: url("data:image/svg+xml;utf8,");
}
.pricing-tier--fo .btn--primary {
background: var(--sand);
color: var(--accent-deep);
box-shadow: none;
}
.pricing-tier--fo .btn--primary:hover { background: #d8bd96; color: var(--accent-deep); }
/* Enterprise tier */
.pricing-tier--enterprise .pricing-tier-tag {
background: #f3e8ff;
color: #4b1c80;
}
/* Pricing FAQ */
.pricing-faq {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--s-6) var(--s-7);
margin-bottom: var(--s-5);
}
.pricing-faq h2 {
font-family: var(--font-serif);
font-size: 22px;
margin: 0 0 var(--s-4);
font-weight: 500;
}
.pricing-faq details {
border-bottom: 1px solid var(--line);
padding: var(--s-3) 0;
}
.pricing-faq details:last-child { border-bottom: none; }
.pricing-faq summary {
cursor: pointer;
font-family: var(--font-serif);
font-weight: 600;
font-size: 16px;
color: var(--ink);
padding: 4px 0;
list-style: none;
}
.pricing-faq summary::-webkit-details-marker { display: none; }
.pricing-faq summary::before {
content: "+";
display: inline-block;
width: 18px;
color: var(--accent);
font-weight: 400;
font-family: var(--font-sans);
}
.pricing-faq details[open] summary::before { content: "−"; }
.pricing-faq p {
margin: 8px 0 0 18px;
color: var(--ink-soft);
font-size: 14.5px;
line-height: 1.6;
}
/* =============================================================
* FAMILY OFFICE landing
* ============================================================= */
.fo-head { max-width: 760px; }
.hero-kicker--gold {
background: var(--sand-soft);
color: #7a5a1a;
}
.fo-pillars {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--s-4);
margin: var(--s-5) 0;
}
.fo-pillars article {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--s-5);
}
.fo-pillars h3 {
font-family: var(--font-serif);
font-size: 18px;
margin: 0 0 var(--s-2);
font-weight: 600;
color: var(--accent-deep);
}
.fo-pillars p {
margin: 0;
color: var(--ink-soft);
font-size: 14.5px;
line-height: 1.55;
}
.fo-pricing-summary {
margin: var(--s-6) 0;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--s-6) var(--s-7);
}
.fo-pricing-summary h2 {
font-family: var(--font-serif);
font-size: 22px;
margin: 0 0 var(--s-4);
font-weight: 500;
}
.fo-pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--s-4);
}
.fo-pricing-grid h4 {
font-family: var(--font-serif);
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--ink-mute);
margin: 0 0 4px;
font-weight: 600;
}
.fo-pricing-num {
font-family: var(--font-serif);
font-size: 26px;
margin: 4px 0 8px;
color: var(--accent-deep);
font-weight: 500;
letter-spacing: -0.3px;
}
.fo-pricing-num span {
font-size: 14px;
color: var(--ink-mute);
margin-left: 4px;
font-weight: 400;
}
.fo-pricing-grid > div > p:last-child {
font-size: 13px;
color: var(--ink-soft);
margin: 0;
line-height: 1.45;
}
.fo-cta-block {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
color: #fafaf7;
border-radius: var(--radius);
padding: var(--s-6) var(--s-7);
margin-bottom: var(--s-6);
text-align: center;
box-shadow: var(--shadow);
}
.fo-cta-block h2 {
font-family: var(--font-serif);
font-size: 24px;
margin: 0 0 var(--s-3);
color: #fff;
font-weight: 500;
}
.fo-cta-block p {
color: rgba(250, 250, 247, 0.85);
font-size: 15.5px;
line-height: 1.65;
margin: 0 auto var(--s-4);
max-width: 620px;
}
.fo-cta-actions {
display: flex;
gap: var(--s-3);
justify-content: center;
margin-bottom: var(--s-3);
flex-wrap: wrap;
}
.fo-cta-block .btn--ghost {
background: transparent;
border-color: rgba(255, 255, 255, 0.4);
color: #fafaf7;
}
.fo-cta-block .btn--ghost:hover {
border-color: #fff;
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
.fo-cta-finepr {
font-size: 13px;
color: rgba(250, 250, 247, 0.65);
margin: 0;
}
.fo-cta-finepr strong { color: var(--sand); }
/* Responsive for the v2 sections */
@media (max-width: 700px) {
.email-capture { grid-template-columns: 1fr; padding: var(--s-5); }
.pricing-grid { grid-template-columns: 1fr; }
.pricing-tier--featured::before { left: 16px; transform: none; }
.upgrade-strip { flex-direction: column; align-items: flex-start; }
.upgrade-strip .btn { width: 100%; justify-content: center; }
.fo-cta-actions { flex-direction: column; }
.fo-cta-block .btn { width: 100%; justify-content: center; }
.referral-strip, .fo-pricing-summary, .fo-cta-block { padding: var(--s-4); }
}
/* =============================================================
* V3 — Blog, News, Alerts
* ============================================================= */
/* Notification bell in header */
.site-nav a.nav-bell {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
color: var(--ink-soft);
border-radius: var(--radius-sm);
}
.site-nav a.nav-bell:hover { background: var(--accent-soft); color: var(--accent-deep); }
.site-nav a.nav-bell.active { background: var(--accent); color: #fff; }
.bell-icon { display: inline-flex; align-items: center; justify-content: center; }
.bell-count {
position: absolute;
top: -2px;
right: -2px;
background: var(--terra);
color: #fff;
font-size: 10px;
font-weight: 700;
line-height: 1;
min-width: 18px;
height: 18px;
border-radius: 999px;
padding: 0 5px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid #fff;
box-shadow: 0 0 0 1px var(--terra);
}
/* Blog controls (search + manage alerts btn) */
.blog-controls {
display: flex;
gap: var(--s-4);
align-items: flex-end;
flex-wrap: wrap;
margin-top: var(--s-4);
}
.blog-search { flex: 1; min-width: 280px; max-width: 520px; margin-top: 0; }
/* Blog post-card list */
.blog-list {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-3);
margin-top: var(--s-3);
}
@media (min-width: 720px) {
.blog-list { grid-template-columns: repeat(2, 1fr); }
}
.post-card {
display: block;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--s-5);
text-decoration: none;
color: inherit;
position: relative; /* anchor for .en-badge absolute positioning */
transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.post-card:hover {
border-color: var(--accent);
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.post-card-meta {
font-size: 12.5px;
color: var(--ink-mute);
text-transform: uppercase;
letter-spacing: 0.8px;
font-weight: 600;
margin-bottom: var(--s-2);
}
.post-card h2 {
font-family: var(--font-serif);
font-size: 22px;
line-height: 1.2;
color: var(--ink);
margin: 0 0 var(--s-2);
font-weight: 500;
letter-spacing: -0.3px;
}
.post-card:hover h2 { color: var(--accent-deep); }
.post-card p {
margin: 0 0 var(--s-3);
color: var(--ink-soft);
font-size: 14.5px;
line-height: 1.55;
}
.post-card-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.post-tag {
font-size: 11px;
background: var(--bg);
color: var(--ink-mute);
padding: 3px 9px;
border-radius: 999px;
font-weight: 500;
}
/* Post detail */
.post {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--s-7) var(--s-8);
margin-bottom: var(--s-5);
box-shadow: var(--shadow);
max-width: 760px;
}
.post-header { margin-bottom: var(--s-5); padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); }
.post-meta {
font-size: 12.5px;
color: var(--ink-mute);
text-transform: uppercase;
letter-spacing: 0.8px;
font-weight: 600;
margin-bottom: var(--s-3);
}
.post-header h1 {
font-family: var(--font-serif);
font-size: clamp(30px, 3.6vw, 42px);
line-height: 1.1;
margin: 0 0 var(--s-4);
letter-spacing: -0.6px;
font-weight: 500;
color: var(--ink);
}
.post-excerpt {
font-size: 18px;
line-height: 1.55;
color: var(--ink-soft);
margin: 0;
font-style: italic;
}
.post-body p {
font-size: 17px;
line-height: 1.75;
color: var(--ink);
margin: 0 0 var(--s-4);
}
.post-body p:first-child::first-letter {
font-family: var(--font-serif);
float: left;
font-size: 64px;
line-height: 0.85;
padding: 4px 10px 0 0;
font-weight: 500;
color: var(--accent-deep);
}
.post-footer {
margin-top: var(--s-6);
padding-top: var(--s-4);
border-top: 1px solid var(--line);
}
.post-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin-bottom: var(--s-2);
}
.post-tags-label { font-size: 13px; color: var(--ink-mute); margin-right: 4px; }
.tag-toggle {
font-family: var(--font-sans);
font-size: 12px;
background: var(--bg);
color: var(--ink-soft);
padding: 5px 12px;
border-radius: 999px;
border: 1px solid var(--line);
cursor: pointer;
transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
font-weight: 500;
}
.tag-toggle:hover {
background: var(--accent-soft);
color: var(--accent-deep);
border-color: var(--accent);
}
.tag-toggle.is-on {
background: var(--accent);
color: white;
border-color: var(--accent);
}
.post-tags-help { font-size: 12.5px; color: var(--ink-mute); margin: var(--s-2) 0 0; font-style: italic; }
.post-related { max-width: 760px; }
.post-related h3 {
font-family: var(--font-serif);
font-size: 20px;
margin: 0 0 var(--s-3);
font-weight: 500;
}
.post-related-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--s-3);
}
.post-card--mini { padding: var(--s-4); }
.post-card--mini time { font-size: 11px; color: var(--ink-mute); display: block; text-transform: uppercase; letter-spacing: 0.6px; font-weight: 600; margin-bottom: 6px; }
.post-card--mini h3 {
font-family: var(--font-serif);
font-size: 16px;
margin: 0 0 6px;
color: var(--ink);
font-weight: 500;
line-height: 1.25;
}
.post-card--mini:hover h3 { color: var(--accent-deep); }
.post-card--mini p { font-size: 13px; margin: 0; color: var(--ink-soft); line-height: 1.5; }
/* News */
.news-controls {
display: flex;
gap: var(--s-4);
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
margin-top: var(--s-4);
}
.news-tag-filters {
display: flex;
flex-wrap: wrap;
gap: 6px;
flex: 1;
}
.filter-chip {
font-family: var(--font-sans);
font-size: 12.5px;
background: var(--paper);
color: var(--ink-soft);
padding: 6px 12px;
border-radius: 999px;
border: 1px solid var(--line);
cursor: pointer;
font-weight: 500;
transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.filter-chip:hover { border-color: var(--accent); color: var(--accent-deep); }
.filter-chip.is-active {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.news-list {
display: flex;
flex-direction: column;
gap: var(--s-3);
margin-top: var(--s-4);
}
.news-item {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--s-4) var(--s-5);
display: grid;
grid-template-columns: 120px 1fr;
gap: var(--s-4);
transition: border-color var(--t-fast);
}
.news-item:hover { border-color: var(--accent); }
.news-item--high { border-left: 4px solid var(--terra); }
.news-item--low { opacity: 0.92; }
.news-item-date {
display: flex;
flex-direction: column;
gap: 6px;
align-items: flex-start;
}
.news-item-date time {
font-family: var(--font-serif);
font-size: 15px;
color: var(--accent-deep);
font-weight: 500;
}
.news-priority {
background: var(--terra);
color: #fff;
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
padding: 2px 8px;
border-radius: 999px;
}
.news-item-body h3 {
font-family: var(--font-serif);
font-size: 18px;
margin: 0 0 6px;
color: var(--ink);
font-weight: 500;
line-height: 1.25;
letter-spacing: -0.2px;
}
.news-item-body p {
margin: 0 0 var(--s-3);
color: var(--ink-soft);
font-size: 14.5px;
line-height: 1.55;
}
.news-item-meta {
display: flex;
flex-wrap: wrap;
gap: var(--s-3);
align-items: center;
font-size: 12px;
}
.news-source {
color: var(--ink-mute);
font-weight: 500;
font-style: italic;
}
.news-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.news-tag-btn {
background: var(--bg);
border: 1px solid var(--line);
font-family: var(--font-sans);
font-size: 11.5px;
color: var(--ink-mute);
padding: 2px 8px;
border-radius: 999px;
cursor: pointer;
font-weight: 500;
}
.news-tag-btn:hover { color: var(--accent-deep); border-color: var(--accent); background: var(--accent-soft); }
@media (max-width: 700px) {
.news-item { grid-template-columns: 1fr; gap: var(--s-2); padding: var(--s-4); }
}
/* Alerts hub */
.alerts-actions {
display: flex;
gap: var(--s-3);
margin-bottom: var(--s-4);
flex-wrap: wrap;
}
.alerts-unread-h {
font-family: var(--font-serif);
font-size: 18px;
margin: 0 0 var(--s-3);
color: var(--accent-deep);
font-weight: 500;
}
.alerts-unread-list {
list-style: none;
padding: 0;
margin: 0 0 var(--s-6);
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.alerts-unread-item {
border-bottom: 1px solid var(--line);
}
.alerts-unread-item:last-child { border-bottom: none; }
.alerts-unread-item a {
display: block;
padding: var(--s-4) var(--s-5);
text-decoration: none;
color: inherit;
transition: background var(--t-fast);
}
.alerts-unread-item a:hover { background: #fcfbf8; }
.alerts-kind {
display: inline-block;
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.8px;
font-weight: 700;
padding: 2px 8px;
border-radius: 999px;
background: var(--accent-soft);
color: var(--accent-deep);
margin-right: 8px;
}
.alerts-unread-item time {
font-size: 12px;
color: var(--ink-mute);
}
.alerts-unread-item h3 {
font-family: var(--font-serif);
font-size: 17px;
margin: 4px 0 4px;
color: var(--ink);
font-weight: 500;
letter-spacing: -0.2px;
}
.alerts-unread-item p { margin: 0 0 6px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }
.alerts-item-tags { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.alerts-item-tags span { font-size: 11px; color: var(--ink-mute); }
.alerts-empty {
background: var(--paper);
border: 1px dashed var(--line-strong);
border-radius: var(--radius);
padding: var(--s-6);
text-align: center;
margin-bottom: var(--s-6);
}
.alerts-empty strong {
display: block;
font-family: var(--font-serif);
font-size: 18px;
color: var(--accent-deep);
margin-bottom: 4px;
font-weight: 600;
}
.alerts-empty p { margin: 0; color: var(--ink-mute); font-size: 14px; }
.alerts-prefs {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--s-6) var(--s-7);
margin-bottom: var(--s-5);
}
.alerts-prefs h2 {
font-family: var(--font-serif);
font-size: 22px;
margin: 0 0 var(--s-2);
font-weight: 500;
}
.alerts-prefs-help {
margin: 0 0 var(--s-4);
color: var(--ink-mute);
font-size: 14px;
}
.alerts-tag-toggles {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tag-toggle-pill {
display: inline-flex;
align-items: center;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 999px;
padding: 6px 14px;
cursor: pointer;
font-size: 13px;
color: var(--ink-soft);
transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
user-select: none;
font-weight: 500;
}
.tag-toggle-pill input { display: none; }
.tag-toggle-pill:hover { border-color: var(--accent); color: var(--accent-deep); }
.tag-toggle-pill.is-on {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.tag-toggle-pill.is-on::before {
content: "✓";
margin-right: 6px;
font-weight: 700;
}
.alerts-email {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
color: #fafaf7;
border-radius: var(--radius);
padding: var(--s-6) var(--s-7);
margin-bottom: var(--s-5);
box-shadow: var(--shadow);
}
.alerts-email h2 {
font-family: var(--font-serif);
font-size: 22px;
margin: 0 0 var(--s-2);
color: #fff;
font-weight: 500;
}
.alerts-email p {
color: rgba(250, 250, 247, 0.85);
margin: 0 0 var(--s-3);
font-size: 14.5px;
line-height: 1.55;
}
.alerts-email .email-form { margin-top: var(--s-3); }
.alerts-email select {
padding: 11px 14px;
border-radius: var(--radius-sm);
border: 1px solid transparent;
font-size: 14px;
font-family: var(--font-sans);
background: rgba(255,255,255,0.95);
color: var(--ink);
}
.alerts-email select:focus { outline: none; box-shadow: 0 0 0 3px rgba(201,168,124,0.35); }
.alerts-fineprint {
font-size: 12.5px;
color: rgba(250, 250, 247, 0.7);
margin-top: var(--s-4);
margin-bottom: 0;
font-style: italic;
}
.alerts-fineprint strong { color: var(--sand); font-style: normal; }
/* =============================================================
* V4 — Saved scenarios · Dashboard · Print
* ============================================================= */
/* Small button variant */
.btn--sm {
padding: 7px 12px;
font-size: 13px;
gap: 6px;
}
/* Header — dashboard icon */
.site-nav a.nav-dash {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
color: var(--ink-soft);
border-radius: var(--radius-sm);
}
.site-nav a.nav-dash:hover { background: var(--accent-soft); color: var(--accent-deep); }
.site-nav a.nav-dash.active { background: var(--accent); color: #fff; }
/* Toolbar above each calculator result */
.calc-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin: -8px 0 var(--s-4);
padding-bottom: var(--s-3);
border-bottom: 1px solid var(--line);
}
.calc-toolbar .btn {
display: inline-flex;
align-items: center;
}
.calc-toolbar .btn svg { display: inline-block; }
.calc-toolbar-hint {
font-size: 12.5px;
color: var(--ink-mute);
margin-left: auto;
}
.calc-toolbar-hint a { color: var(--accent); font-weight: 500; }
.calc-toolbar-msg {
font-size: 13px;
color: var(--ink-mute);
width: 100%;
}
.calc-toolbar-msg--ok { color: var(--good); }
.calc-toolbar-msg a { color: var(--accent); font-weight: 600; margin-left: 4px; }
/* Save modal */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(14, 19, 32, 0.55);
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: var(--s-4);
animation: modal-fade 0.18s ease-out;
}
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
.modal {
background: var(--paper);
border-radius: var(--radius);
padding: var(--s-6) var(--s-7);
width: 100%;
max-width: 460px;
box-shadow: var(--shadow-lg);
}
.modal h3 {
font-family: var(--font-serif);
font-size: 22px;
margin: 0 0 var(--s-2);
font-weight: 500;
color: var(--ink);
}
.modal p { margin: 0 0 var(--s-4); color: var(--ink-soft); font-size: 14px; line-height: 1.55; }
.modal-label {
display: block;
font-size: 13px;
color: var(--ink-soft);
font-weight: 500;
margin-bottom: var(--s-4);
}
.modal-label input {
display: block;
width: 100%;
margin-top: 6px;
padding: 10px 12px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
font-size: 15px;
font-family: var(--font-sans);
color: var(--ink);
}
.modal-label input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.modal-actions {
display: flex;
justify-content: flex-end;
gap: var(--s-3);
}
/* =============================================================
* DASHBOARD
* ============================================================= */
.dash-head h1 {
font-family: var(--font-serif);
font-size: clamp(32px, 3.5vw, 42px);
font-weight: 500;
margin: 0 0 var(--s-3);
letter-spacing: -0.5px;
}
.dash-head .lead { font-size: 17px; }
.dash-head .lead strong { color: var(--accent-deep); font-weight: 600; }
.dash-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: var(--s-3);
margin-bottom: var(--s-7);
}
.dash-stat {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--s-4) var(--s-5);
text-decoration: none;
color: inherit;
transition: border-color var(--t-fast), transform var(--t-fast);
}
a.dash-stat:hover {
border-color: var(--accent);
transform: translateY(-1px);
}
.dash-stat-num {
display: block;
font-family: var(--font-serif);
font-size: 36px;
font-weight: 500;
color: var(--accent-deep);
letter-spacing: -0.5px;
line-height: 1;
}
.dash-stat-label {
display: block;
margin-top: 6px;
font-size: 12.5px;
color: var(--ink-mute);
text-transform: uppercase;
letter-spacing: 0.8px;
font-weight: 600;
}
.dash-section { margin-bottom: var(--s-7); }
.dash-section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s-3);
margin-bottom: var(--s-4);
border-bottom: 1px solid var(--line);
padding-bottom: var(--s-2);
}
.dash-section-head h2 {
font-family: var(--font-serif);
font-size: 24px;
margin: 0;
font-weight: 500;
letter-spacing: -0.2px;
}
.dash-section-sub {
font-size: 13px;
color: var(--ink-mute);
}
.dash-section-link {
font-size: 13.5px;
color: var(--accent);
font-weight: 600;
text-decoration: none;
}
/* Scenario cards */
.dash-scenarios-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--s-3);
}
.scenario-card {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--s-4) var(--s-5);
display: flex;
flex-direction: column;
transition: border-color var(--t-fast);
}
.scenario-card:hover { border-color: var(--accent); }
.scenario-card header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.scenario-card-type {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--accent-deep);
background: var(--accent-soft);
padding: 2px 8px;
border-radius: 999px;
}
.scenario-card time {
font-size: 12px;
color: var(--ink-mute);
}
.scenario-card h3 {
font-family: var(--font-serif);
font-size: 17px;
margin: 0 0 6px;
font-weight: 500;
color: var(--ink);
line-height: 1.3;
}
.scenario-card-preview {
margin: 0 0 var(--s-3);
font-size: 14px;
color: var(--ink-soft);
}
.scenario-card-preview strong {
font-family: var(--font-serif);
color: var(--accent-deep);
font-size: 18px;
font-weight: 500;
}
.scenario-card-actions {
display: flex;
gap: var(--s-2);
margin-top: auto;
align-items: center;
}
/* Dashboard alerts list */
.dash-alerts-list {
list-style: none;
padding: 0;
margin: 0;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
}
.dash-alerts-list li { border-bottom: 1px solid var(--line); }
.dash-alerts-list li:last-child { border-bottom: none; }
.dash-alerts-list a {
display: flex;
align-items: center;
gap: var(--s-3);
padding: var(--s-3) var(--s-4);
text-decoration: none;
color: inherit;
transition: background var(--t-fast);
flex-wrap: wrap;
}
.dash-alerts-list a:hover { background: #fcfbf8; }
.dash-alerts-list time {
font-size: 12px;
color: var(--ink-mute);
white-space: nowrap;
}
.dash-alert-title {
flex: 1;
font-family: var(--font-serif);
font-size: 15.5px;
color: var(--ink);
font-weight: 500;
min-width: 200px;
}
.dash-alerts-more { margin: var(--s-3) 0 0; font-size: 13px; }
.dash-alerts-more a { color: var(--accent); font-weight: 600; text-decoration: none; }
/* Dashboard empty states */
.dash-empty {
background: var(--paper);
border: 1px dashed var(--line-strong);
border-radius: var(--radius);
padding: var(--s-5) var(--s-6);
}
.dash-empty strong {
display: block;
font-family: var(--font-serif);
font-size: 17px;
color: var(--accent-deep);
margin-bottom: 4px;
}
.dash-empty p { color: var(--ink-soft); font-size: 14px; line-height: 1.55; margin: 0 0 var(--s-3); }
.dash-empty em { color: var(--accent-deep); font-style: italic; }
.dash-empty-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* Suggested grid */
.dash-suggested {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--s-3);
}
/* =============================================================
* V5 — i18n (Spanish layer)
* ============================================================= */
/* Language toggle in header */
.lang-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 1px solid var(--line);
background: var(--paper);
color: var(--ink-soft);
font-family: var(--font-sans);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.4px;
border-radius: var(--radius-sm);
cursor: pointer;
margin-left: 4px;
transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.lang-toggle:hover {
background: var(--accent-soft);
color: var(--accent-deep);
border-color: var(--accent);
}
/* ES badge on Library cards */
.lib-card {
position: relative;
}
.es-badge {
position: absolute;
top: 12px;
right: 12px;
background: var(--sand);
color: #fff;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.6px;
padding: 2px 7px;
border-radius: 999px;
text-transform: uppercase;
box-shadow: 0 0 0 2px var(--paper);
}
/* "EN" honest-fallback chip — unified component across Library list,
Library search results, Blog index, and Glossary. Renders when the
surface is in ES mode but the specific item lacks an ES translation.
Visually echoes .orig-en-badge (the detail-page banner) at chip scale
so the journey from list → detail reads as one consistent marker. */
.en-badge {
display: inline-block;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.6px;
background: var(--sand-soft);
color: #6b4f1d;
border: 1px solid #ead9b5;
padding: 1px 6px;
border-radius: 999px;
text-transform: uppercase;
font-family: var(--font-sans);
}
/* Card-positioned variant: top-right corner, same slot as .es-badge */
.lib-card .en-badge,
.post-card .en-badge {
position: absolute;
top: 12px;
right: 12px;
box-shadow: 0 0 0 2px var(--paper);
}
/* Inline variant for Glossary headings */
.gloss-item .en-badge {
margin-left: 6px;
vertical-align: 2px;
}
/* "Originally in English" notice on un-translated topic detail pages */
.orig-en-badge {
background: var(--sand-soft);
border: 1px solid #ead9b5;
border-radius: var(--radius-sm);
padding: 8px 14px;
margin-bottom: var(--s-3);
font-size: 13px;
color: #6b4f1d;
max-width: 760px;
}
/* Spanish overrides — pricing "Most popular" floating label.
Hides the default English ::before and uses data-popular-label */
.pricing-tier--featured[data-popular-label]::before {
content: attr(data-popular-label);
}
@media (max-width: 700px) {
.lang-toggle { margin-left: 0; width: 34px; height: 34px; }
}
/* =============================================================
* V7 — Acronym auto-expansion (abbr.acronym)
* ============================================================= */
abbr.acronym {
text-decoration: none;
border-bottom: 1px dotted var(--accent);
cursor: help;
font-variant-numeric: tabular-nums;
position: relative;
/* Subtle color shift to signal "explainable" */
color: inherit;
transition: background var(--t-fast), border-color var(--t-fast);
/* Improve focusability for keyboard users */
outline: none;
}
abbr.acronym:hover,
abbr.acronym:focus,
abbr.acronym.is-tipped {
background: var(--accent-soft);
border-bottom-color: var(--accent-deep);
}
/* Custom CSS tooltip on hover / focus / tap.
Uses the title attribute via a CSS variable trick so we
render a fully styled tooltip instead of relying on the
browser-native one (which has poor mobile UX). */
abbr.acronym::after {
content: attr(title);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(4px);
background: var(--accent-deep);
color: #fafaf7;
padding: 10px 14px;
border-radius: var(--radius-sm);
font-size: 13px;
font-family: var(--font-sans);
font-weight: 400;
line-height: 1.45;
letter-spacing: 0;
white-space: normal;
width: max-content;
max-width: 320px;
text-align: left;
box-shadow: 0 4px 18px rgba(14, 19, 32, 0.18);
opacity: 0;
pointer-events: none;
transition: opacity var(--t-fast), transform var(--t-fast);
z-index: 100;
}
abbr.acronym::before {
/* Tooltip arrow */
content: "";
position: absolute;
bottom: calc(100% + 2px);
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: var(--accent-deep);
opacity: 0;
pointer-events: none;
transition: opacity var(--t-fast);
z-index: 100;
}
abbr.acronym:hover::after,
abbr.acronym:focus::after,
abbr.acronym.is-tipped::after,
abbr.acronym:hover::before,
abbr.acronym:focus::before,
abbr.acronym.is-tipped::before {
opacity: 1;
transform: translateX(-50%) translateY(0);
pointer-events: auto;
}
abbr.acronym:hover::before,
abbr.acronym:focus::before,
abbr.acronym.is-tipped::before {
transform: translateX(-50%);
}
/* Hide the browser's native title-tooltip — we use our own */
abbr.acronym {
/* (no native suppression possible — the title attr still triggers
OS tooltip after a delay. Acceptable trade-off for keyboard
and assistive-tech support. Our CSS tooltip appears instantly
on hover/focus.) */
}
/* When the tooltip would overflow the right edge, flip the anchor.
We use a class added by JS for tooltips that would clip. */
abbr.acronym.tip-right::after {
left: auto;
right: 0;
transform: translateX(0) translateY(4px);
}
abbr.acronym.tip-right::before {
left: auto;
right: 18px;
transform: translateX(0);
}
abbr.acronym.tip-right:hover::after,
abbr.acronym.tip-right:focus::after,
abbr.acronym.tip-right.is-tipped::after {
transform: translateX(0) translateY(0);
}
/* In dense layouts (KPI labels, table cells) compress the underline */
.kpi-label abbr.acronym,
.scorecard td abbr.acronym,
.news-source abbr.acronym {
border-bottom-color: var(--ink-mute);
}
/* When printing, expand inline */
@media print {
abbr.acronym::after,
abbr.acronym::before { display: none; }
abbr.acronym::after {
content: " (" attr(title) ")";
display: inline;
position: static;
background: none;
color: inherit;
padding: 0;
box-shadow: none;
font-size: inherit;
font-style: italic;
opacity: 1;
pointer-events: auto;
}
abbr.acronym { border-bottom: none; }
}
@media (max-width: 700px) {
abbr.acronym::after {
max-width: 240px;
font-size: 12px;
padding: 8px 10px;
}
}
/* =============================================================
* V8 — Tier / Membership system
* ============================================================= */
/* Tier chip in the header */
.tier-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: 999px;
text-decoration: none;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.3px;
border: 1px solid var(--line);
background: var(--paper);
color: var(--ink-soft);
transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
margin-left: 4px;
}
.tier-chip:hover {
background: var(--accent-soft);
color: var(--accent-deep);
border-color: var(--accent);
}
.tier-chip-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--ink-mute);
display: inline-block;
}
/* Tier dots — locked to brand standards §6.
Accent shows ONLY as the dot; the chip itself stays neutral
so the icon row reads as a uniform set in the header. */
.tier-chip--free .tier-chip-dot { background: var(--ink-mute); }
.tier-chip--pro .tier-chip-dot { background: var(--tier-pro); }
.tier-chip--premier .tier-chip-dot { background: var(--tier-premier); }
.tier-chip--family-office .tier-chip-dot { background: var(--tier-family-office); box-shadow: 0 0 0 2px rgba(201, 168, 124, 0.25); }
.tier-chip--enterprise .tier-chip-dot { background: var(--tier-enterprise); }
.tier-chip--pro { border-color: #ead9b5; color: #7a5a1a; background: var(--sand-soft); }
.tier-chip--premier { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-soft); }
.tier-chip--family-office {
background: linear-gradient(135deg, var(--accent-deep), #061d18);
color: var(--sand);
border-color: var(--accent-deep);
}
.tier-chip--family-office:hover { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: var(--sand); }
.tier-chip--enterprise { background: #f3e8ff; color: #4b1c80; border-color: #d8c0eb; }
/* Locked nav links (visible but visually muted) */
.site-nav a.nav-locked {
color: var(--ink-mute);
position: relative;
}
.site-nav a.nav-locked::after {
content: "🔒";
font-size: 9px;
margin-left: 4px;
opacity: 0.6;
}
/* Signed-out hide for icon-only nav controls (dashboard, alerts bell).
Toggled by refreshAuthChip() in app.js based on auth state. */
.site-nav a.nav-auth-only.is-hidden { display: none; }
.site-nav a.nav-member.active {
background: var(--accent);
color: white;
}
/* Demo banner on pricing page */
.demo-banner {
background: linear-gradient(90deg, var(--sand-soft), #fdf6e3);
border: 1px solid #ead9b5;
color: #6b4f1d;
padding: 12px 18px;
border-radius: var(--radius-sm);
font-size: 14px;
line-height: 1.5;
margin-bottom: var(--s-5);
}
.demo-banner strong { color: var(--accent-deep); }
.demo-banner code {
background: rgba(0,0,0,0.06);
padding: 1px 5px;
border-radius: 3px;
font-size: 12.5px;
}
.demo-banner--live {
background: linear-gradient(90deg, rgba(14, 27, 44, 0.08), rgba(201, 168, 124, 0.10));
border-color: rgba(14, 27, 44, 0.22);
color: var(--forest-700, #0E1B2C);
}
.demo-banner--live strong { color: var(--forest-700, #0E1B2C); }
/* T1.6 founding-member live counter on pricing-tier cards */
.founding-counter {
margin: 4px 0 10px;
padding: 6px 10px;
background: rgba(201, 168, 124, 0.14);
border: 1px solid rgba(201, 168, 124, 0.36);
border-radius: 6px;
font-size: 12.5px;
line-height: 1.4;
font-weight: 600;
color: #6b4f1d;
letter-spacing: 0.1px;
}
.founding-counter--soldout {
background: rgba(177, 74, 31, 0.10);
border-color: rgba(177, 74, 31, 0.36);
color: #7a2d12;
}
.founding-counter--error {
background: rgba(177, 74, 31, 0.10);
border-color: rgba(177, 74, 31, 0.36);
color: #7a2d12;
font-weight: 500;
}
/* Current-plan button on pricing page */
.btn.btn--current {
background: var(--good-soft);
color: var(--good);
border: 1px solid #c5e2cc;
cursor: default;
transform: none !important;
box-shadow: none;
}
.btn.btn--current:hover { background: var(--good-soft); color: var(--good); }
/* Gate overlay (used for Premier/FO-locked routes and inline gates) */
.gate-overlay {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--s-7) var(--s-7);
margin: var(--s-4) 0 var(--s-6);
text-align: center;
box-shadow: var(--shadow);
max-width: 640px;
margin-left: auto;
margin-right: auto;
position: relative;
}
.gate-overlay::before {
content: "";
position: absolute;
inset: 0;
border-radius: var(--radius);
background:
radial-gradient(60% 50% at 50% 0%, rgba(14, 27, 44, 0.04), transparent 70%);
pointer-events: none;
}
.gate-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
background: var(--accent-soft);
color: var(--accent);
border-radius: 50%;
margin-bottom: var(--s-3);
}
.gate-overlay h3 {
font-family: var(--font-serif);
font-size: 22px;
margin: 0 0 var(--s-2);
color: var(--accent-deep);
font-weight: 500;
letter-spacing: -0.2px;
}
.gate-overlay p {
color: var(--ink-soft);
font-size: 15px;
line-height: 1.55;
max-width: 480px;
margin: 0 auto var(--s-4);
}
.gate-actions {
display: inline-flex;
flex-wrap: wrap;
gap: var(--s-3);
justify-content: center;
}
/* Locked scenario card (inside Tax module) */
.scenario.scenario--locked {
background: var(--bg);
border: 1px dashed var(--line-strong);
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
padding: var(--s-4) var(--s-4);
}
.scenario--locked h4 {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.scenario--locked .lock-tag {
background: var(--sand-soft);
color: #7a5a1a;
border: 1px solid #ead9b5;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
padding: 2px 8px;
border-radius: 999px;
}
.locked-blurb {
font-size: 13.5px;
color: var(--ink-soft);
margin: 8px 0 14px;
}
/* Paywall row inside investor strategy */
.paywall-cta {
margin-left: 12px;
padding: 4px 10px !important;
font-size: 11.5px !important;
}
/* Member-only views (Portfolio, Crisis, Co-invest) */
.member-banner {
background: var(--good-soft);
border: 1px solid #c5e2cc;
color: var(--good);
padding: 10px 14px;
border-radius: var(--radius-sm);
font-size: 14px;
font-weight: 500;
margin-bottom: var(--s-5);
}
.member-finepr {
font-size: 12.5px;
color: var(--ink-mute);
font-style: italic;
margin-top: var(--s-5);
padding: var(--s-3) 0;
border-top: 1px solid var(--line);
}
/* Portfolio Analysis */
.portfolio-summary {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--s-5) var(--s-6);
margin-bottom: var(--s-4);
}
.portfolio-summary h2 {
font-family: var(--font-serif);
font-size: 20px;
margin: 0 0 var(--s-3);
font-weight: 500;
}
.portfolio-concentration, .portfolio-recommendations {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--s-5) var(--s-6);
margin-bottom: var(--s-4);
}
.portfolio-concentration h3, .portfolio-recommendations h3 {
font-family: var(--font-serif);
font-size: 18px;
margin: 0 0 var(--s-3);
font-weight: 500;
}
.portfolio-concentration ul {
padding-left: 20px;
margin: 0;
color: var(--ink-soft);
}
.portfolio-concentration li { margin-bottom: 10px; line-height: 1.55; }
.portfolio-table {
width: 100%;
border-collapse: collapse;
margin-top: 8px;
}
.portfolio-table th {
text-align: left;
font-family: var(--font-serif);
font-weight: 600;
font-size: 13px;
color: var(--accent-deep);
padding: 10px 12px;
border-bottom: 1px solid var(--line);
}
.portfolio-table td {
padding: 10px 12px;
border-bottom: 1px solid var(--line);
color: var(--ink-soft);
font-size: 14px;
line-height: 1.5;
}
.portfolio-table tr:last-child td { border-bottom: none; }
.action {
display: inline-block;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
padding: 3px 9px;
border-radius: 999px;
}
.action--sell { background: var(--bad-soft); color: var(--bad); }
.action--hold { background: var(--good-soft); color: var(--good); }
.action--refi { background: var(--accent-soft); color: var(--accent-deep); }
.action--review { background: var(--sand-soft); color: #7a5a1a; }
/* Crisis Playbook (Premier+) */
.crisis-intro {
background: var(--paper);
border-left: 3px solid var(--accent);
padding: var(--s-3) var(--s-5);
margin: 0 0 var(--s-5);
color: var(--ink);
font-size: 15.5px;
line-height: 1.55;
}
.crisis-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--s-3);
margin-bottom: var(--s-5);
}
.crisis-card {
position: relative;
}
.crisis-step {
display: inline-block;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.7px;
color: var(--accent);
background: var(--accent-soft);
padding: 2px 8px;
border-radius: 999px;
margin-bottom: 8px;
}
.crisis-tools {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--s-5) var(--s-6);
}
.crisis-tools h3 {
font-family: var(--font-serif);
font-size: 18px;
margin: 0 0 var(--s-3);
font-weight: 500;
}
.crisis-tools ul { padding-left: 20px; margin: 0; color: var(--ink-soft); }
.crisis-tools li { margin-bottom: 8px; line-height: 1.55; }
/* Co-investments (Family Office+) */
.deal-pipeline {
margin-bottom: var(--s-5);
}
.deal-pipeline h2 {
font-family: var(--font-serif);
font-size: 22px;
margin: 0 0 var(--s-4);
font-weight: 500;
}
.deal-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: var(--s-3);
}
.deal-card {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--s-5);
display: flex;
flex-direction: column;
transition: border-color var(--t-fast), transform var(--t-fast);
}
.deal-card:hover {
border-color: var(--accent);
transform: translateY(-1px);
}
.deal-card header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--s-3);
}
.deal-stage {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
padding: 3px 9px;
border-radius: 999px;
background: var(--sand-soft);
color: #7a5a1a;
border: 1px solid #ead9b5;
}
.deal-stage--open { background: var(--good-soft); color: var(--good); border-color: #c5e2cc; }
.deal-stage--closed { background: var(--bg); color: var(--ink-mute); border-color: var(--line); }
.deal-min {
font-size: 12px;
color: var(--ink-mute);
font-weight: 600;
}
.deal-card h4 {
font-family: var(--font-serif);
font-size: 17px;
margin: 0 0 6px;
font-weight: 500;
color: var(--ink);
line-height: 1.25;
}
.deal-desc {
font-size: 14px;
color: var(--ink-soft);
margin: 0 0 var(--s-3);
line-height: 1.55;
}
.deal-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 18px;
margin: 0;
padding-top: var(--s-3);
border-top: 1px solid var(--line);
}
.deal-stats dt {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--ink-mute);
grid-column: 1;
}
.deal-stats dd {
font-family: var(--font-serif);
font-size: 15px;
margin: 0;
color: var(--accent-deep);
font-weight: 500;
grid-column: 2;
text-align: right;
}
/* Responsive */
@media (max-width: 700px) {
.tier-chip { margin-left: 0; padding: 5px 8px; font-size: 11px; }
.gate-overlay { padding: var(--s-5) var(--s-4); }
.deal-grid, .crisis-grid { grid-template-columns: 1fr; }
}
/* =============================================================
* V9 — Professional design upgrade
* =============================================================
* Extended palette (gold range, neutral steps, dark mode primer),
* refined shadow scale, motion system with proper easing,
* premium component treatments, scroll-triggered reveals,
* animated counters, and editorial-grade compositions.
* ============================================================= */
:root {
/* — Extended palette ----------------------------------- */
/* gold ramp -> brass ramp (centered on --brass #B08D4F) */
--gold-50: #faf6ec;
--gold-100: #f1e7cf;
--gold-200: #e4d2a6;
--gold-300: #d0b57a;
--gold-400: #c8a765;
--gold-500: #b08d4f;
--gold-600: #8f7038;
--gold-700: #6e5629;
/* forest ramp -> navy ramp (footer + dark surfaces) */
--forest-50: #e8ecf1;
--forest-100: #cfd8e2;
--forest-200: #a6b3c4;
--forest-300: #6e8095;
--forest-400: #34465a;
--forest-500: #1b2c40;
--forest-600: #142336;
--forest-700: #0e1b2c;
--forest-800: #0a1422;
--forest-900: #060e18;
--ink-50: #f8f9fb;
--ink-100: #eef1f5;
--ink-200: #d4d9e2;
--ink-300: #aab2c0;
--ink-400: #7a8295;
--ink-500: #4a5160;
--ink-600: #2e3346;
--ink-700: #1a1f2c;
--ink-800: #14181f;
--ink-900: #0a0f17;
/* — Refined shadow scale ------------------------------ */
--shadow-xs: 0 1px 2px rgba(14, 19, 32, 0.04);
--shadow-s: 0 1px 3px rgba(14, 19, 32, 0.05), 0 1px 2px rgba(14, 19, 32, 0.06);
--shadow-m: 0 4px 12px rgba(14, 19, 32, 0.06), 0 2px 4px rgba(14, 19, 32, 0.04);
--shadow-l: 0 12px 32px rgba(14, 19, 32, 0.08), 0 4px 8px rgba(14, 19, 32, 0.04);
--shadow-xl: 0 24px 48px rgba(14, 19, 32, 0.10), 0 8px 16px rgba(14, 19, 32, 0.04);
--shadow-glow-accent: 0 0 0 1px rgba(14, 27, 44, 0.10), 0 12px 32px -12px rgba(14, 27, 44, 0.18);
--shadow-glow-gold: 0 0 0 1px rgba(176, 141, 79, 0.22), 0 12px 32px -12px rgba(176, 141, 79, 0.20);
/* — Refined motion ------------------------------------ */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--dur-fast: 160ms;
--dur-mid: 280ms;
--dur-slow: 480ms;
}
/* Fluid type with optical sizing via Fraunces */
:root {
--type-display: clamp(40px, 5.5vw, 64px);
--type-h1: clamp(32px, 3.8vw, 44px);
--type-h2: clamp(24px, 2.4vw, 30px);
--type-h3: clamp(18px, 1.8vw, 21px);
--type-lead: clamp(17px, 1.4vw, 19px);
--type-body: 16px;
--type-small: 14px;
--type-micro: 12px;
}
/* Apply optical-size and ligatures globally to Fraunces */
.serif, h1, h2, h3, .module-head h1, .hero h1, .topic h1, .card h2,
.path-card h2, .lib-card h3, .lib-cat-title, .post-header h1 {
font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 0;
font-feature-settings: "ss01", "ss02", "ss05";
letter-spacing: -0.02em;
}
/* Subtle paper grain on the body for editorial depth */
body::after {
content: "";
position: fixed;
inset: 0;
background-image:
radial-gradient(circle at 1px 1px, rgba(14, 19, 32, 0.018) 1px, transparent 0);
background-size: 3px 3px;
pointer-events: none;
z-index: -1;
mix-blend-mode: multiply;
}
/* =============================================================
* HERO V2 — Editorial composition
* ============================================================= */
.hero--split { position: relative; }
.hero--split::before {
content: "";
position: absolute;
top: -40px;
right: -40px;
width: 360px;
height: 360px;
background: radial-gradient(circle, rgba(201, 168, 124, 0.18) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
z-index: 0;
filter: blur(8px);
}
.hero--split::after {
content: "";
position: absolute;
bottom: -60px;
left: -80px;
width: 280px;
height: 280px;
background: radial-gradient(circle, rgba(14, 27, 44, 0.10) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
z-index: 0;
filter: blur(12px);
}
.hero-text, .hero-art { position: relative; z-index: 1; }
/* Hero text fade-in on load */
.hero-text > * { animation: hero-rise var(--dur-slow) var(--ease-out) backwards; }
.hero-text > *:nth-child(1) { animation-delay: 0.05s; }
.hero-text > *:nth-child(2) { animation-delay: 0.15s; }
.hero-text > *:nth-child(3) { animation-delay: 0.25s; }
.hero-text > *:nth-child(4) { animation-delay: 0.35s; }
.hero-text > *:nth-child(5) { animation-delay: 0.45s; }
@keyframes hero-rise {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
/* Floating stat chips around the hero illustration */
.hero-art {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.hero-stat {
position: absolute;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--ink-100);
border-radius: 12px;
padding: 12px 16px;
box-shadow: var(--shadow-m);
font-size: 12px;
z-index: 2;
animation: hero-rise var(--dur-slow) var(--ease-out) backwards;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 140px;
}
.hero-stat-num {
font-family: var(--font-serif);
font-size: 22px;
font-weight: 500;
color: var(--forest-600);
letter-spacing: -0.5px;
line-height: 1;
}
.hero-stat-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--ink-mute);
}
.hero-stat--tl { top: 8%; left: -2%; animation-delay: 0.55s; }
.hero-stat--br { bottom: 12%; right: -4%; animation-delay: 0.70s; }
@media (max-width: 1000px) { .hero-stat { display: none; } }
/* Hero art — refined SVG presentation */
.hero-art svg {
filter: drop-shadow(0 24px 48px rgba(14, 19, 32, 0.10));
border-radius: var(--radius-lg);
}
/* =============================================================
* Calculator cards V2 — premium hover treatment
* ============================================================= */
.card {
isolation: isolate;
transition: transform var(--dur-mid) var(--ease-out),
box-shadow var(--dur-mid) var(--ease-out),
border-color var(--dur-fast);
}
.card::before {
content: "";
position: absolute;
inset: 0;
border-radius: var(--radius);
background: linear-gradient(135deg, rgba(14, 27, 44, 0) 0%, rgba(14, 27, 44, 0.06) 100%);
opacity: 0;
transition: opacity var(--dur-mid) var(--ease-out);
z-index: 0;
pointer-events: none;
}
.card > * { position: relative; z-index: 1; }
.card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-l);
border-color: var(--forest-500);
}
.card:hover::before { opacity: 1; }
/* Gold accent bar on top of each card */
.card::after {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--forest-500), var(--gold-400));
opacity: 0;
border-radius: var(--radius) var(--radius) 0 0;
transition: opacity var(--dur-mid) var(--ease-out);
z-index: 2;
}
.card:hover::after { opacity: 1; }
.card-icon {
transition: transform var(--dur-mid) var(--ease-spring),
background var(--dur-mid) var(--ease-out);
}
.card:hover .card-icon {
transform: scale(1.08) rotate(-3deg);
background: var(--forest-500);
color: white;
}
.card:hover .card-icon .icon {
color: white;
}
.card-cta {
transition: gap var(--dur-fast) var(--ease-out), color var(--dur-fast);
}
.card:hover .card-cta {
gap: 10px;
color: var(--forest-600);
}
/* =============================================================
* Pricing page V2 — premium tier presentation
* ============================================================= */
.pricing-tier {
position: relative;
transition: transform var(--dur-mid) var(--ease-out),
box-shadow var(--dur-mid) var(--ease-out),
border-color var(--dur-fast);
}
.pricing-tier:hover { transform: translateY(-4px); box-shadow: var(--shadow-l); }
/* Featured tier with subtle pulse glow */
.pricing-tier--featured {
border-width: 2px;
border-color: var(--forest-500);
box-shadow: var(--shadow-glow-accent);
animation: featured-pulse 4s var(--ease-in-out) infinite;
}
@keyframes featured-pulse {
0%, 100% { box-shadow: var(--shadow-glow-accent); }
50% { box-shadow: 0 0 0 2px rgba(176, 141, 79, 0.30), 0 16px 40px rgba(176, 141, 79, 0.18); }
}
/* Family Office tier — luxury dark with embedded gold pattern */
.pricing-tier--fo {
background:
radial-gradient(120% 60% at 100% 0%, rgba(201, 168, 124, 0.12), transparent 50%),
radial-gradient(80% 40% at 0% 100%, rgba(201, 168, 124, 0.08), transparent 60%),
linear-gradient(165deg, var(--forest-600) 0%, var(--forest-700) 100%);
border: 1px solid var(--forest-600);
box-shadow: var(--shadow-l);
position: relative;
overflow: hidden;
}
.pricing-tier--fo::before {
content: "";
position: absolute;
top: 0; right: 0;
width: 140px; height: 140px;
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cpattern id='p' x='0' y='0' width='10' height='10' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='1' cy='1' r='0.5' fill='%23c9a87c' opacity='0.3'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100' height='100' fill='url(%23p)'/%3E%3C/svg%3E");
opacity: 0.6;
pointer-events: none;
}
/* Animated checkmarks on pricing tier features */
.pricing-tier li {
transition: padding-left var(--dur-fast) var(--ease-out);
}
.pricing-tier li:hover {
padding-left: 26px;
}
.pricing-tier li:hover::before {
transform: scale(1.15);
}
.pricing-tier li::before {
transition: transform var(--dur-fast) var(--ease-spring);
}
/* =============================================================
* Scroll-triggered reveal
* ============================================================= */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity var(--dur-slow) var(--ease-out),
transform var(--dur-slow) var(--ease-out);
will-change: opacity, transform;
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
.reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal:nth-child(4) { transition-delay: 0.24s; }
.reveal:nth-child(5) { transition-delay: 0.32s; }
.reveal:nth-child(6) { transition-delay: 0.40s; }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
.hero-text > * { animation: none; }
.hero-stat { animation: none; }
.pricing-tier--featured { animation: none; }
}
/* =============================================================
* Library cards V2 — color-coded category strips
* ============================================================= */
.lib-card {
position: relative;
overflow: hidden;
transition: transform var(--dur-mid) var(--ease-out),
border-color var(--dur-fast),
box-shadow var(--dur-mid) var(--ease-out);
}
.lib-card::before {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0;
width: 3px;
background: var(--forest-500);
opacity: 0;
transition: opacity var(--dur-fast);
}
.lib-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-m);
}
.lib-card:hover::before { opacity: 1; }
/* =============================================================
* Decorative section dividers
* ============================================================= */
.section-divider {
display: flex;
align-items: center;
justify-content: center;
margin: var(--s-7) 0 var(--s-6);
gap: 12px;
color: var(--ink-300);
}
.section-divider::before,
.section-divider::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, var(--ink-200), transparent);
}
.section-divider-mark {
display: inline-flex;
width: 32px;
height: 32px;
border: 1px solid var(--ink-200);
border-radius: 50%;
align-items: center;
justify-content: center;
background: var(--paper);
}
.section-divider-mark svg { color: var(--gold-400); width: 14px; height: 14px; }
/* =============================================================
* Footer V2 — multi-column with brand treatment
* ============================================================= */
.site-footer {
background:
linear-gradient(180deg, transparent 0%, var(--forest-700) 30%, var(--forest-800) 100%);
color: rgba(255, 255, 255, 0.7);
border-top: 1px solid transparent;
padding: var(--s-8) var(--s-5) var(--s-7);
margin-top: var(--s-9);
position: relative;
overflow: hidden;
}
.site-footer::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold-400), transparent);
opacity: 0.5;
}
.site-footer .wrap {
max-width: 1120px;
}
.footer-grid {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr;
gap: var(--s-5);
margin-bottom: var(--s-6);
padding-bottom: var(--s-5);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-brand-block { max-width: 360px; }
.footer-brand-line {
font-family: var(--font-serif);
font-size: 20px;
font-weight: 500;
color: #fff;
margin: 0 0 var(--s-3);
letter-spacing: -0.3px;
}
.footer-tagline {
font-size: 14px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.65);
margin: 0 0 var(--s-4);
}
.footer-col h4 {
font-family: var(--font-sans);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
color: var(--gold-300);
margin: 0 0 var(--s-3);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 8px; }
.footer-col a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
font-size: 14px;
transition: color var(--dur-fast);
}
.footer-col a:hover { color: #fff; }
.site-footer .footer-disclaimer {
font-size: 12.5px;
color: rgba(255, 255, 255, 0.5);
max-width: 760px;
margin: 0 0 var(--s-2);
line-height: 1.6;
}
.site-footer .ver {
font-size: 11.5px;
color: rgba(255, 255, 255, 0.4);
margin-top: var(--s-4);
padding-top: var(--s-4);
border-top: 1px solid rgba(255, 255, 255, 0.06);
letter-spacing: 0.2px;
}
@media (max-width: 1100px) {
/* Two-row layout: brand spans full width on row 1; 4 link cols on row 2 */
.footer-grid { grid-template-columns: 1fr 1fr 1fr 1fr; }
.footer-brand-block { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 800px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.footer-brand-block { grid-column: 1 / -1; }
}
/* =============================================================
* Animated KPI counter (for stats elsewhere)
* ============================================================= */
.counter-num {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* =============================================================
* Premium scorecard enhancement
* ============================================================= */
.scorecard tbody tr {
transition: background var(--dur-fast), transform var(--dur-fast);
}
.scorecard tbody tr:hover {
background: var(--forest-50);
transform: translateX(4px);
}
.scorecard .sc-class a {
position: relative;
}
.scorecard .sc-class a::after {
content: "→";
margin-left: 6px;
opacity: 0;
transition: opacity var(--dur-fast), margin-left var(--dur-fast);
color: var(--forest-500);
}
.scorecard tbody tr:hover .sc-class a::after {
opacity: 1;
margin-left: 10px;
}
/* Gold accent on best scores */
.sc-chip--best {
background: linear-gradient(135deg, var(--forest-500), var(--forest-600));
position: relative;
}
.sc-chip--best::before {
content: "★";
position: absolute;
top: -6px;
right: -4px;
color: var(--gold-400);
font-size: 10px;
}
/* =============================================================
* Premium typography touches
* ============================================================= */
.lead em {
font-style: italic;
color: var(--forest-600);
font-weight: 500;
position: relative;
}
.lead em::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 2px;
background: var(--gold-300);
opacity: 0.5;
border-radius: 2px;
}
/* Larger drop-cap on blog posts */
.post-body p:first-child::first-letter {
font-size: 80px;
padding: 6px 12px 0 0;
color: var(--forest-600);
font-weight: 500;
}
/* =============================================================
* Responsive
* ============================================================= */
@media (max-width: 900px) {
.hero--split {
grid-template-columns: 1fr;
gap: var(--s-5);
padding-top: var(--s-4);
padding-bottom: var(--s-6);
}
/* Text column first on mobile (headline + CTAs before the allocation card). */
.hero--split .hero-text { order: 0; }
.hero--split .hero-art { order: 1; }
.hero-art svg { max-width: 480px; margin: 0 auto; display: block; }
}
@media (max-width: 700px) {
.module-head h1 { font-size: 26px; }
.grid-form { grid-template-columns: 1fr; }
.site-nav { width: 100%; gap: 0; }
.site-nav a { font-size: 13px; padding: 6px 8px; }
.result, .topic, .climate-framework, .climate-redflags, .climate-resources, .scorecard-takeaways, .trust, .library-promo {
padding: var(--s-4) var(--s-4);
}
.lib-cat-title { font-size: 19px; }
main { padding: var(--s-5) var(--s-4) var(--s-7); }
}
/* =============================================================
* Cookie consent banner + preferences modal (T1.2)
* ============================================================= */
.cookie-banner {
position: fixed;
left: 20px;
right: 20px;
bottom: 20px;
z-index: 9000;
/* Solid opaque dark navy — never transparent, never reads through */
background-color: #0a1422;
background-image: linear-gradient(180deg, #0e1b2c 0%, #0a1422 100%);
color: #ffffff;
border: 1px solid rgba(201, 168, 124, 0.35);
border-radius: 14px;
box-shadow:
0 24px 60px rgba(0, 0, 0, 0.45),
0 4px 12px rgba(0, 0, 0, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
padding: 22px 26px;
transform: translateY(20px);
opacity: 0;
transition: transform 240ms cubic-bezier(.16,.84,.44,1), opacity 240ms;
pointer-events: auto;
}
.cookie-banner.is-visible {
transform: translateY(0);
opacity: 1;
}
.cookie-banner-inner {
display: grid;
grid-template-columns: 1fr auto;
gap: 28px;
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
.cookie-banner-text h3 {
font-family: var(--font-serif);
font-size: 20px;
font-weight: 600;
margin: 0 0 6px;
color: #ffffff;
letter-spacing: -0.2px;
}
.cookie-banner-text p {
font-size: 14.5px;
line-height: 1.55;
margin: 0 0 8px;
color: rgba(255, 255, 255, 0.88);
max-width: 760px;
}
.cookie-banner-link {
display: inline-block;
font-size: 13.5px;
font-weight: 500;
color: #e8c98a;
text-decoration: none;
border-bottom: 1px solid rgba(232, 201, 138, 0.45);
padding-bottom: 1px;
}
.cookie-banner-link:hover { color: #ffffff; border-bottom-color: #ffffff; }
.cookie-banner-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: flex-end;
flex-shrink: 0;
}
.cookie-banner-actions .btn {
padding: 11px 18px;
font-size: 14.5px;
font-weight: 600;
border-radius: 8px;
white-space: nowrap;
}
.cookie-banner-actions .btn--ghost {
background-color: rgba(255, 255, 255, 0.06);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.32);
}
.cookie-banner-actions .btn--ghost:hover {
background-color: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.6);
}
.cookie-banner-actions .btn--primary {
background-color: #e8c98a;
background-image: linear-gradient(180deg, #e8c98a 0%, #d4b87a 100%);
color: #2a1d05;
border: 1px solid #c9a87c;
box-shadow: 0 2px 6px rgba(201, 168, 124, 0.35);
}
.cookie-banner-actions .btn--primary:hover {
background-image: linear-gradient(180deg, #f0d49a 0%, #dcc285 100%);
border-color: #b89968;
}
@media (max-width: 900px) {
.cookie-banner-inner { grid-template-columns: 1fr; gap: 16px; }
.cookie-banner-actions { justify-content: flex-start; }
}
@media (max-width: 720px) {
.cookie-banner { left: 12px; right: 12px; bottom: 12px; padding: 18px 18px; }
.cookie-banner-actions .btn { flex: 1 1 auto; text-align: center; }
}
/* Customize modal */
.cookie-modal {
position: fixed;
inset: 0;
z-index: 9100;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
opacity: 0;
transition: opacity 180ms;
pointer-events: none;
}
.cookie-modal.is-visible { opacity: 1; pointer-events: auto; }
.cookie-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(15, 30, 25, 0.55);
backdrop-filter: blur(2px);
}
.cookie-modal-card {
position: relative;
background: var(--paper, #fafaf5);
border-radius: 14px;
max-width: 540px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
padding: 26px 28px 22px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}
.cookie-modal-close {
position: absolute;
top: 10px;
right: 14px;
background: transparent;
border: 0;
font-size: 26px;
line-height: 1;
color: var(--ink-mute);
cursor: pointer;
}
.cookie-modal-close:hover { color: var(--ink); }
.cookie-modal-card h2 {
font-family: var(--font-serif);
font-size: 22px;
font-weight: 500;
margin: 0 0 10px;
letter-spacing: -0.2px;
}
.cookie-modal-card > p {
font-size: 14px;
line-height: 1.55;
color: var(--ink-mute);
margin: 0 0 16px;
}
.cookie-cat {
border-top: 1px solid var(--line, #e6e3d8);
padding: 12px 0 4px;
}
.cookie-cat:first-of-type { border-top: 0; padding-top: 0; }
.cookie-cat-row { display: flex; align-items: center; }
.cookie-cat-label {
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
font-size: 14.5px;
color: var(--ink);
cursor: pointer;
}
.cookie-cat-label input[disabled] { cursor: not-allowed; opacity: 0.7; }
.cookie-cat-help {
font-size: 13px;
line-height: 1.5;
color: var(--ink-mute);
margin: 6px 0 8px 28px;
}
.cookie-modal-actions {
margin-top: 12px;
display: flex;
justify-content: flex-end;
}
/* =============================================================
* Auth pages (Signup / Login / Magic-link / Reset / Account) — T1.4
* ============================================================= */
.auth-page {
display: flex;
justify-content: center;
padding: var(--s-6) var(--s-4) var(--s-8);
}
.auth-page--wide { padding-top: var(--s-5); }
.auth-card {
width: 100%;
max-width: 420px;
background: var(--paper, #fff);
border: 1px solid var(--line, #e6e3d8);
border-radius: 14px;
padding: var(--s-6) var(--s-5);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.04);
}
.auth-card--wide { max-width: 640px; }
.auth-card--success { text-align: center; }
.auth-card .hero-kicker {
display: inline-block;
margin-bottom: var(--s-2);
}
.auth-card h1 {
font-family: var(--font-serif);
font-size: clamp(24px, 3.2vw, 30px);
line-height: 1.18;
margin: 0 0 var(--s-2);
font-weight: 500;
letter-spacing: -0.3px;
}
.auth-lead {
color: var(--ink-mute);
font-size: 14.5px;
line-height: 1.55;
margin: 0 0 var(--s-4);
}
.auth-notconfigured {
background: #fff7e6;
border: 1px solid #f3d27a;
color: #5e4400;
padding: 12px 14px;
border-radius: 8px;
font-size: 13.5px;
line-height: 1.55;
margin-bottom: var(--s-4);
}
.auth-notconfigured code {
background: rgba(0, 0, 0, 0.06);
padding: 1px 5px;
border-radius: 3px;
font-size: 12.5px;
}
.auth-form { display: flex; flex-direction: column; gap: 14px; margin-bottom: var(--s-4); }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field > span {
font-size: 13.5px;
font-weight: 600;
color: var(--ink);
letter-spacing: 0.1px;
}
.auth-field input {
padding: 11px 13px;
font-size: 15px;
font-family: var(--font-sans);
border: 1px solid var(--line, #d9d6c8);
border-radius: 8px;
background: #fff;
color: var(--ink);
transition: border-color var(--dur-fast, 120ms), box-shadow var(--dur-fast, 120ms);
}
.auth-field input:focus {
outline: none;
border-color: var(--accent, var(--forest-500, #0E1B2C));
box-shadow: 0 0 0 3px rgba(176, 141, 79, 0.35);
}
.auth-hint {
font-size: 12px;
color: var(--ink-mute);
}
.auth-submit { width: 100%; padding: 12px; font-size: 15px; font-weight: 600; }
.auth-submit[disabled],
.auth-oauth[disabled] { opacity: 0.55; cursor: not-allowed; }
.auth-error {
margin: 4px 0 0;
min-height: 0;
font-size: 13.5px;
color: #b14a1f;
transition: min-height var(--dur-fast, 120ms);
}
.auth-error.is-visible { min-height: 1.4em; }
.auth-divider {
display: flex;
align-items: center;
gap: 10px;
margin: var(--s-3) 0;
color: var(--ink-mute);
font-size: 12.5px;
letter-spacing: 0.4px;
text-transform: uppercase;
}
.auth-divider::before,
.auth-divider::after {
content: "";
flex: 1;
height: 1px;
background: var(--line, #e6e3d8);
}
.auth-oauth {
width: 100%;
padding: 11px;
font-size: 14.5px;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-bottom: 10px;
}
.auth-alt {
text-align: center;
font-size: 13.5px;
color: var(--ink-mute);
margin: 10px 0 0;
}
.auth-alt a {
color: var(--accent-deep, var(--forest-700));
text-decoration: underline;
text-underline-offset: 2px;
}
.auth-fine {
margin-top: var(--s-4);
padding-top: var(--s-3);
border-top: 1px solid var(--line, #e6e3d8);
font-size: 12px;
line-height: 1.55;
color: var(--ink-mute);
text-align: center;
}
.auth-fine a {
color: var(--ink-mute);
text-decoration: underline;
}
/* Account page */
.account-grid {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: var(--s-4);
}
.account-row {
display: grid;
grid-template-columns: 160px 1fr;
align-items: center;
gap: 16px;
padding: 12px 0;
border-bottom: 1px solid var(--line, #e6e3d8);
}
.account-row:last-of-type { border-bottom: 0; }
.account-row-label {
font-size: 13px;
font-weight: 600;
color: var(--ink-mute);
letter-spacing: 0.2px;
text-transform: uppercase;
}
.account-row-value {
font-size: 15px;
color: var(--ink);
}
.account-actions {
display: flex;
gap: 10px;
margin-top: var(--s-4);
flex-wrap: wrap;
}
.auth-notsignedin {
text-align: center;
padding: var(--s-5) 0;
}
.auth-notsignedin p { margin: 0 0 var(--s-3); color: var(--ink-mute); }
@media (max-width: 520px) {
.account-row { grid-template-columns: 1fr; gap: 4px; padding: 10px 0; }
}
/* Header auth chip — sits inline next to the tier chip. Compact outlined
pill in both signed-in and signed-out states to keep the nav row fitting
on one line on standard desktop widths. */
.auth-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.3px;
text-decoration: none;
border: 1px solid var(--line, #d9d6c8);
background: var(--paper, #fff);
color: var(--ink-soft, var(--ink, #1a1a1a));
transition: background var(--t-fast, 120ms), color var(--t-fast, 120ms), border-color var(--t-fast, 120ms);
}
.auth-chip:hover {
background: var(--accent-soft, rgba(14, 27, 44, 0.06));
color: var(--accent-deep, var(--forest-700, #0E1B2C));
border-color: var(--accent, var(--forest-500, #0E1B2C));
}
/* Signed-out: subtle "person" dot prefix to balance with tier-chip's dot */
.auth-chip--signedout::before {
content: "";
display: inline-block;
width: 14px;
height: 14px;
border-radius: 999px;
background: var(--ink-soft, #595959);
/* simple silhouette via mask — falls back to plain dot in unsupported browsers */
mask: radial-gradient(circle at 50% 38%, #000 25%, transparent 26%) center/100% 100% no-repeat,
radial-gradient(ellipse at 50% 100%, #000 50%, transparent 51%) center/100% 100% no-repeat;
-webkit-mask: radial-gradient(circle at 50% 38%, #000 25%, transparent 26%) center/100% 100% no-repeat,
radial-gradient(ellipse at 50% 100%, #000 50%, transparent 51%) center/100% 100% no-repeat;
flex-shrink: 0;
}
.auth-chip--signedout:hover::before { background: var(--accent-deep, var(--forest-700)); }
/* Signed-in: small accent dot so the chip reads "active session" at a glance */
.auth-chip--signedin::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--accent, var(--forest-500, #0E1B2C));
flex-shrink: 0;
}
/* =============================================================
* Crisis Playbook tools (T4.2)
* ============================================================= */
.crisis-tool {
margin: var(--s-5) 0;
padding: 24px 26px;
background: var(--paper, #fafaf5);
border: 1px solid var(--line, #e6e3d8);
border-radius: 12px;
}
.crisis-tool-head {
margin-bottom: var(--s-4);
}
.crisis-tool-head .hero-kicker {
display: inline-block;
margin-bottom: 8px;
}
.crisis-tool-head h2 {
font-family: var(--font-serif);
font-size: 22px;
font-weight: 500;
margin: 0 0 10px;
letter-spacing: -0.2px;
}
.crisis-tool-head p {
color: var(--ink-mute);
font-size: 14.5px;
line-height: 1.55;
max-width: 720px;
margin: 0;
}
.crisis-dx-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 18px;
}
.crisis-dx-q {
border: 1px solid var(--line, #e6e3d8);
border-radius: 8px;
padding: 12px 14px;
background: #fff;
}
.crisis-dx-q legend {
font-size: 13.5px;
font-weight: 600;
color: var(--ink);
padding: 0 6px;
letter-spacing: 0.1px;
}
.crisis-dx-opt {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 0;
font-size: 13.5px;
color: var(--ink);
cursor: pointer;
}
.crisis-dx-opt input[type="radio"] { margin: 0; }
.crisis-dx-actions {
grid-column: 1 / -1;
display: flex;
gap: 10px;
margin-top: 8px;
}
.crisis-dx-result {
margin-top: var(--s-5);
padding: 20px 22px;
background: #fff;
border: 1px solid var(--line);
border-radius: 10px;
}
.crisis-dx-result h4 {
font-family: var(--font-serif);
font-size: 16px;
font-weight: 600;
margin: var(--s-4) 0 8px;
}
.crisis-zone {
display: flex;
align-items: baseline;
gap: 16px;
padding: 16px 20px;
border-radius: 10px;
margin-bottom: var(--s-3);
}
.crisis-zone-score {
font-family: var(--font-serif);
font-size: 42px;
font-weight: 600;
line-height: 1;
}
.crisis-zone-score small { font-size: 18px; opacity: 0.6; margin-left: 2px; }
.crisis-zone-label {
font-size: 14px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
}
.crisis-zone--green { background: rgba(79, 122, 91, 0.10); color: #2f5238; border: 1px solid rgba(79, 122, 91, 0.35); }
.crisis-zone--amber { background: rgba(201, 168, 124, 0.18); color: #6b4f1d; border: 1px solid rgba(201, 168, 124, 0.50); }
.crisis-zone--red { background: rgba(177, 74, 31, 0.12); color: #7a2d12; border: 1px solid rgba(177, 74, 31, 0.45); }
.crisis-rx { padding-left: 22px; margin: 0 0 var(--s-3); }
.crisis-rx li { font-size: 14.5px; line-height: 1.55; margin-bottom: 8px; color: var(--ink); }
.crisis-finepr {
font-size: 12.5px;
color: var(--ink-mute);
line-height: 1.5;
border-top: 1px solid var(--line);
padding-top: 12px;
margin: 12px 0 0;
}
.crisis-warn {
padding: 10px 14px;
background: rgba(177, 74, 31, 0.10);
border: 1px solid rgba(177, 74, 31, 0.30);
border-radius: 6px;
color: #7a2d12;
font-size: 13.5px;
margin: 0;
}
.crisis-val-form .crisis-val-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 12px;
}
.crisis-val-form label { display: flex; flex-direction: column; gap: 5px; }
.crisis-val-form label > span { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.crisis-val-form input {
padding: 8px 10px;
font-size: 14px;
border: 1px solid var(--line);
border-radius: 6px;
background: #fff;
}
.crisis-val-result { margin-top: var(--s-4); }
.crisis-val-table {
width: 100%;
border-collapse: collapse;
background: #fff;
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
}
.crisis-val-table th,
.crisis-val-table td { padding: 10px 12px; text-align: left; font-size: 13.5px; }
.crisis-val-table th {
background: var(--paper);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.4px;
text-transform: uppercase;
border-bottom: 1px solid var(--line);
}
.crisis-val-table tbody tr + tr td { border-top: 1px solid var(--line); }
.crisis-val-row--severe td { background: rgba(177, 74, 31, 0.05); }
.crisis-val-row--downside td { background: rgba(201, 168, 124, 0.05); }
.crisis-val-table .is-negative { color: #7a2d12; font-weight: 600; }
.crisis-val-table .is-elevated { color: #6b4f1d; font-weight: 600; }
.crisis-chapters { margin-top: var(--s-6); }
.crisis-chapters h3 {
font-family: var(--font-serif);
font-size: 18px;
font-weight: 500;
margin: 0 0 var(--s-3);
}
@media (max-width: 720px) {
.crisis-dx-form { grid-template-columns: 1fr; }
.crisis-val-form .crisis-val-grid { grid-template-columns: 1fr; }
.crisis-val-table { font-size: 12px; }
}
/* =============================================================
* Marketing polish (T6.2)
* ============================================================= */
/* T6.2a — Family Office callout band on home (above the fold) */
.fo-callout-strip {
margin: 14px 0 20px;
padding: 14px 22px;
background: linear-gradient(135deg, var(--forest-800, #0a1422) 0%, var(--forest-700, #0E1B2C) 100%);
color: #fff;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.fo-callout-strip::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold-400, #c9a87c), transparent);
opacity: 0.5;
}
.fo-callout-content {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 16px;
align-items: center;
max-width: 1180px;
margin: 0 auto;
}
.fo-callout-tag {
font-size: 11px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--gold-300, #d4b87a);
padding: 4px 10px;
border: 1px solid rgba(212, 184, 122, 0.4);
border-radius: 999px;
white-space: nowrap;
}
.fo-callout-content p {
margin: 0;
font-size: 14px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.88);
}
.fo-callout-link {
color: var(--gold-300, #d4b87a);
text-decoration: none;
font-size: 14px;
font-weight: 600;
white-space: nowrap;
padding: 6px 12px;
border-radius: 6px;
border: 1px solid rgba(212, 184, 122, 0.45);
transition: background var(--t-fast, 120ms), color var(--t-fast, 120ms);
}
.fo-callout-link:hover { background: rgba(212, 184, 122, 0.12); color: #fff; }
@media (max-width: 800px) {
.fo-callout-content { grid-template-columns: 1fr; gap: 10px; text-align: left; }
.fo-callout-tag, .fo-callout-link { justify-self: start; }
}
/* T6.2b — Value anchor on each pricing tier */
.pricing-tier-anchor {
margin: 12px 0 14px;
padding: 11px 14px;
background: linear-gradient(135deg, rgba(14, 27, 44, 0.05), rgba(201, 168, 124, 0.04));
border-left: 3px solid var(--accent, var(--forest-500, #0E1B2C));
border-radius: 0 8px 8px 0;
font-size: 13.5px;
line-height: 1.55;
color: var(--ink-soft, var(--ink));
}
.pricing-tier-anchor strong { color: var(--forest-700, #0E1B2C); font-weight: 600; }
.pricing-tier--featured .pricing-tier-anchor {
background: linear-gradient(135deg, rgba(14, 27, 44, 0.08), rgba(201, 168, 124, 0.08));
border-left-color: var(--gold-400, #c9a87c);
}
.pricing-tier--featured .pricing-tier-anchor strong { color: #6b4f1d; }
.pricing-tier--fo .pricing-tier-anchor,
.pricing-tier--enterprise .pricing-tier-anchor {
background: rgba(42, 26, 71, 0.05);
border-left-color: #2a1a47;
}
.pricing-tier--fo .pricing-tier-anchor strong,
.pricing-tier--enterprise .pricing-tier-anchor strong { color: #2a1a47; }
/* T6.2c — Trust section enhancement */
.trust { padding: var(--s-7) 0; }
.trust-head { text-align: center; max-width: 720px; margin: 0 auto var(--s-5); }
.trust-head h3 {
font-family: var(--font-serif);
font-size: clamp(26px, 3.4vw, 32px);
font-weight: 500;
margin: 8px 0 12px;
letter-spacing: -0.3px;
}
.trust-lead {
font-size: 15.5px;
line-height: 1.55;
color: var(--ink-mute);
margin: 0;
}
.trust-stats {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 14px;
margin: 0 0 var(--s-6);
}
.trust-stat {
text-align: center;
padding: 18px 14px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 12px;
}
.trust-stat-num {
font-family: var(--font-serif);
font-size: 32px;
font-weight: 600;
color: var(--forest-700, #0E1B2C);
line-height: 1.05;
margin-bottom: 6px;
letter-spacing: -0.5px;
}
.trust-stat-label {
font-size: 12.5px;
line-height: 1.4;
color: var(--ink-mute);
}
.trust-partners h4,
.trust-difference h4 {
font-family: var(--font-serif);
font-size: 20px;
font-weight: 500;
margin: var(--s-5) 0 14px;
letter-spacing: -0.2px;
}
.trust-partners-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
margin-bottom: 14px;
}
.trust-partner-card {
padding: 16px 18px;
background: #fff;
border: 1px solid var(--line);
border-radius: 10px;
}
.trust-partner-card strong {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--forest-700, #0E1B2C);
display: block;
margin-bottom: 6px;
}
.trust-partner-card p {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: var(--ink-soft, var(--ink));
}
.trust-partners-fineprint {
font-size: 12.5px;
color: var(--ink-mute);
margin: 12px 0 0;
line-height: 1.5;
}
.trust-difference ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.trust-difference li {
padding: 14px 16px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 10px;
font-size: 14px;
line-height: 1.55;
color: var(--ink);
}
@media (max-width: 800px) {
.trust-stats { grid-template-columns: 1fr 1fr; }
.trust-partners-grid { grid-template-columns: 1fr; }
.trust-difference ul { grid-template-columns: 1fr; }
}
/* =============================================================
* Marketplace (T5.5) + Co-investment detail (T5.6)
* ============================================================= */
.marketplace-filters {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin: var(--s-4) 0;
}
.marketplace-filters select,
.marketplace-filters input {
padding: 8px 10px;
font-size: 14px;
border: 1px solid var(--line, #d9d6c8);
border-radius: 6px;
background: #fff;
}
.marketplace-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 14px;
}
.marketplace-empty {
padding: var(--s-5);
text-align: center;
color: var(--ink-mute);
background: var(--paper);
border: 1px dashed var(--line);
border-radius: 10px;
grid-column: 1 / -1;
}
.marketplace-card {
display: block;
padding: 18px 20px;
background: #fff;
border: 1px solid var(--line, #d9d6c8);
border-radius: 12px;
text-decoration: none;
color: var(--ink);
transition: border-color var(--t-fast, 120ms), transform var(--t-fast, 120ms), box-shadow var(--t-fast, 120ms);
}
.marketplace-card:hover {
border-color: var(--accent, var(--forest-500, #0E1B2C));
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(14, 27, 44, 0.08);
}
.marketplace-card.is-featured {
border-color: rgba(201, 168, 124, 0.6);
background: linear-gradient(135deg, rgba(201, 168, 124, 0.04), rgba(14, 27, 44, 0.02));
}
.mp-card-tier {
display: inline-block;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
color: #6b4f1d;
background: rgba(201, 168, 124, 0.20);
padding: 2px 8px;
border-radius: 999px;
margin-bottom: 8px;
min-height: 0;
}
.mp-card-tier:empty { display: none; }
.mp-card-type {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.6px;
color: var(--accent-deep, var(--forest-700, #0E1B2C));
text-transform: uppercase;
margin-bottom: 4px;
}
.marketplace-card h3 {
font-family: var(--font-serif);
font-size: 18px;
font-weight: 600;
margin: 0 0 4px;
color: var(--ink);
}
.mp-card-firm {
font-size: 13px;
color: var(--ink-mute);
margin-bottom: 10px;
}
.mp-card-bio {
font-size: 13.5px;
line-height: 1.5;
color: var(--ink-soft, var(--ink));
margin: 0 0 12px;
}
.mp-card-tags {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-bottom: 10px;
}
.mp-tag {
font-size: 11px;
padding: 2px 8px;
border-radius: 999px;
background: var(--paper, #fafaf5);
border: 1px solid var(--line, #e6e3d8);
color: var(--ink-mute);
}
.mp-card-meta {
display: flex;
gap: 14px;
font-size: 12px;
color: var(--ink-mute);
}
.pro-detail-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--s-5);
margin-top: var(--s-4);
}
.pro-detail-bio h3 {
font-family: var(--font-serif);
font-size: 17px;
font-weight: 600;
margin: var(--s-4) 0 8px;
}
.pro-detail-bio h3:first-child { margin-top: 0; }
.pro-detail-bio p, .pro-detail-bio ul { font-size: 14.5px; line-height: 1.6; color: var(--ink); }
.pro-detail-bio ul { padding-left: 22px; }
.pro-detail-cta {
padding: 20px 22px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 12px;
position: sticky;
top: 100px;
align-self: start;
}
.pro-inquiry-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.pro-inquiry-form label { display: flex; flex-direction: column; gap: 4px; }
.pro-inquiry-form label > span { font-size: 12.5px; font-weight: 600; }
.pro-inquiry-form input,
.pro-inquiry-form textarea {
padding: 8px 10px;
font-size: 14px;
border: 1px solid var(--line);
border-radius: 6px;
background: #fff;
}
.pro-inquiry-status { margin: 6px 0 0; font-size: 13px; min-height: 0; }
.pro-inquiry-status--ok { color: var(--good, var(--forest-700)); font-weight: 600; }
.pro-inquiry-status--err { color: #b14a1f; font-weight: 600; }
.pro-inquiry-status--info { color: #6b4f1d; }
.back-link { color: var(--ink-mute); text-decoration: none; font-size: 13px; }
.back-link:hover { color: var(--accent); }
/* Deal detail (T5.6) */
.deal-card--linked { display: block; text-decoration: none; color: var(--ink); }
.deal-card--linked:hover { border-color: var(--accent); transform: translateY(-2px); }
.deal-sponsor { font-size: 12.5px; color: var(--ink-mute); margin: 4px 0 8px; }
.deal-detail-stats { margin: var(--s-4) 0; }
.deal-detail-close { font-size: 14px; color: var(--ink-mute); margin: var(--s-3) 0 0; }
.deal-detail-body h2 {
font-family: var(--font-serif);
font-size: 20px;
font-weight: 500;
margin: var(--s-4) 0 8px;
}
.deal-detail-body p { font-size: 15px; line-height: 1.6; max-width: 760px; }
.deal-detail-interest {
margin-top: var(--s-5);
padding: 22px 24px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 12px;
}
.deal-interest-form { display: flex; flex-direction: column; gap: 12px; }
.deal-interest-form label { display: flex; flex-direction: column; gap: 4px; }
.deal-interest-form label > span { font-size: 12.5px; font-weight: 600; }
.deal-interest-form input,
.deal-interest-form textarea {
padding: 8px 10px;
font-size: 14px;
border: 1px solid var(--line);
border-radius: 6px;
background: #fff;
}
.deal-interest-status { margin: 6px 0 0; font-size: 13px; min-height: 0; }
@media (max-width: 800px) {
.marketplace-filters { grid-template-columns: 1fr 1fr; }
.pro-detail-grid { grid-template-columns: 1fr; }
.pro-detail-cta { position: static; }
}
/* =============================================================
* Referral CTAs (T5.1 – T5.4)
* ============================================================= */
.referral-strip--inline {
margin: var(--s-5) 0 var(--s-4);
padding: 18px 20px;
background: linear-gradient(135deg, rgba(14, 27, 44, 0.05), rgba(201, 168, 124, 0.05));
border: 1px solid var(--line, #e6e3d8);
border-radius: 12px;
}
.referral-strip--inline h3 {
font-family: var(--font-serif);
font-size: 16px;
font-weight: 600;
margin: 0 0 12px;
color: var(--forest-700, #0E1B2C);
letter-spacing: -0.1px;
}
.referral-cta {
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
padding: 12px 16px;
margin-bottom: 8px;
background: #fff;
border: 1px solid var(--line, #d9d6c8);
border-radius: 10px;
text-decoration: none;
color: var(--ink);
transition: border-color var(--t-fast, 120ms), transform var(--t-fast, 120ms), box-shadow var(--t-fast, 120ms);
}
.referral-cta:hover {
border-color: var(--accent, var(--forest-500, #0E1B2C));
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(14, 27, 44, 0.08);
}
.referral-cta:last-child { margin-bottom: 0; }
.referral-cta-text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.referral-cta-text strong { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.referral-cta-text small { font-size: 12.5px; color: var(--ink-mute); }
.referral-cta-arrow {
font-size: 18px;
color: var(--accent, var(--forest-500, #0E1B2C));
font-weight: 600;
flex-shrink: 0;
}
/* =============================================================
* Advanced tax tools (T4.5c + T4.5d)
* ============================================================= */
.tax-tool {
margin: var(--s-5) 0;
padding: 24px 26px;
background: var(--paper, #fafaf5);
border: 1px solid var(--line);
border-radius: 12px;
}
.tax-tool-head { margin-bottom: var(--s-4); }
.tax-tool-head h2 {
font-family: var(--font-serif);
font-size: 22px;
font-weight: 500;
margin: 8px 0 10px;
letter-spacing: -0.2px;
}
.tax-tool-head p {
color: var(--ink-mute);
font-size: 14.5px;
line-height: 1.55;
max-width: 760px;
margin: 0;
}
.tax-tool-form {
background: #fff;
border: 1px solid var(--line);
border-radius: 10px;
padding: 18px 20px;
}
.tax-tool-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px 14px;
}
.tax-tool-form label { display: flex; flex-direction: column; gap: 4px; }
.tax-tool-form label > span { font-size: 12px; font-weight: 600; color: var(--ink); }
.tax-tool-form input,
.tax-tool-form select {
padding: 8px 10px;
font-size: 14px;
border: 1px solid var(--line);
border-radius: 6px;
background: #fff;
}
.tax-tool-actions { display: flex; gap: 10px; margin-top: 14px; }
.tax-tool-result {
margin-top: var(--s-4);
padding: 18px 20px;
background: #fff;
border: 1px solid var(--line);
border-radius: 10px;
}
.tax-tool-result .kpi-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: var(--s-3);
}
.tax-tool-breakdown {
width: 100%;
border-collapse: collapse;
font-size: 13.5px;
margin: var(--s-3) 0;
}
.tax-tool-breakdown th {
text-align: left;
padding: 8px 10px;
background: var(--paper);
font-weight: 600;
font-size: 11.5px;
letter-spacing: 0.4px;
text-transform: uppercase;
border-bottom: 1px solid var(--line);
}
.tax-tool-breakdown td { padding: 8px 10px; border-top: 1px solid var(--line); }
.tax-tool-breakdown small { color: var(--ink-mute); font-weight: 600; letter-spacing: 0.3px; }
.tax-tool-totals td { background: var(--paper); font-weight: 600; }
.reps-tests {
display: grid;
gap: 8px;
margin-bottom: var(--s-3);
}
.reps-test {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 12px;
align-items: center;
padding: 10px 14px;
border-radius: 8px;
font-size: 13.5px;
}
.reps-test.pass { background: rgba(79, 122, 91, 0.10); border: 1px solid rgba(79, 122, 91, 0.30); }
.reps-test.fail { background: rgba(201, 168, 124, 0.14); border: 1px solid rgba(201, 168, 124, 0.40); }
.reps-test strong { font-weight: 600; }
.reps-result-pill {
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.6px;
padding: 3px 9px;
border-radius: 999px;
background: #fff;
}
.reps-test.pass .reps-result-pill { color: #2f5238; border: 1px solid rgba(79, 122, 91, 0.35); }
.reps-test.fail .reps-result-pill { color: #7a2d12; border: 1px solid rgba(177, 74, 31, 0.35); }
.reps-verdict {
padding: 14px 16px;
border-radius: 8px;
margin: var(--s-3) 0;
}
.reps-verdict--pass { background: rgba(79, 122, 91, 0.08); border: 1px solid rgba(79, 122, 91, 0.25); }
.reps-verdict--fail { background: rgba(201, 168, 124, 0.10); border: 1px solid rgba(201, 168, 124, 0.30); }
.reps-verdict p { margin: 8px 0 0; font-size: 14px; line-height: 1.55; }
@media (max-width: 720px) {
.tax-tool-grid { grid-template-columns: 1fr; }
.tax-tool-result .kpi-grid { grid-template-columns: 1fr 1fr; }
.reps-test { grid-template-columns: 1fr; gap: 6px; }
}
/* =============================================================
* Deal evaluation (T4.3) + Sponsor DD (T4.4)
* ============================================================= */
.deal-eval-form {
background: var(--paper, #fafaf5);
border: 1px solid var(--line);
border-radius: 12px;
padding: 20px 22px;
margin: var(--s-4) 0;
}
.deal-eval-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px 14px;
}
.deal-eval-form label { display: flex; flex-direction: column; gap: 4px; }
.deal-eval-form label > span { font-size: 12px; font-weight: 600; color: var(--ink); letter-spacing: 0.1px; }
.deal-eval-form input,
.deal-eval-form select {
padding: 8px 10px; font-size: 14px; border: 1px solid var(--line); border-radius: 6px; background: #fff;
}
.deal-eval-actions { display: flex; gap: 10px; margin-top: 14px; }
.deal-eval-result { margin-top: var(--s-4); }
.deal-eval-kpis {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-bottom: var(--s-4);
}
.deal-eval-benchmark,
.deal-eval-verdicts,
.deal-eval-cashflow {
background: #fff;
border: 1px solid var(--line);
border-radius: 10px;
padding: 16px 18px;
margin-bottom: var(--s-3);
}
.deal-eval-benchmark h4,
.deal-eval-verdicts h4,
.deal-eval-cashflow h4 {
font-family: var(--font-serif);
font-size: 16px; font-weight: 600;
margin: 0 0 8px;
}
.deal-eval-verdicts ul { padding-left: 20px; margin: 0; }
.deal-eval-verdicts li { margin-bottom: 6px; font-size: 14px; line-height: 1.5; }
.deal-eval-cashflow table { width: 100%; border-collapse: collapse; font-size: 13px; }
.deal-eval-cashflow th { text-align: left; padding: 8px 10px; background: var(--paper); font-weight: 600; font-size: 11.5px; letter-spacing: 0.4px; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.deal-eval-cashflow td { padding: 7px 10px; border-top: 1px solid var(--line); }
.deal-eval-cashflow .is-negative { color: #7a2d12; font-weight: 600; }
.deal-eval-exit { font-size: 13px; color: var(--ink-mute); margin: 10px 0 0; line-height: 1.5; }
@media (max-width: 720px) {
.deal-eval-grid { grid-template-columns: 1fr 1fr; }
.deal-eval-kpis { grid-template-columns: 1fr 1fr; }
}
/* Sponsor DD */
.sponsor-dd-bar {
display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
}
.sponsor-dd-actions {
display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.sponsor-dd-actions select,
.sponsor-dd-actions input {
padding: 6px 10px; font-size: 13.5px; border: 1px solid var(--line); border-radius: 6px; background: #fff;
}
.sponsor-dd-actions input { min-width: 180px; }
.sponsor-dd-summary {
display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
margin: var(--s-4) 0;
padding: 16px 18px;
background: #fff;
border: 1px solid var(--line);
border-radius: 10px;
}
.sponsor-dd-score {
display: flex; align-items: baseline; gap: 14px;
padding: 12px 16px; border-radius: 8px;
}
.sponsor-dd-score-pct { font-family: var(--font-serif); font-size: 38px; font-weight: 600; line-height: 1; }
.sponsor-dd-score-pct small { font-size: 16px; opacity: 0.6; margin-left: 2px; }
.sponsor-dd-score-detail { font-size: 13.5px; line-height: 1.5; }
.sponsor-dd-score--good { background: rgba(79, 122, 91, 0.12); color: #2f5238; border: 1px solid rgba(79, 122, 91, 0.35); }
.sponsor-dd-score--fair { background: rgba(201, 168, 124, 0.18); color: #6b4f1d; border: 1px solid rgba(201, 168, 124, 0.50); }
.sponsor-dd-score--weak { background: rgba(201, 168, 124, 0.10); color: #6b4f1d; border: 1px solid rgba(201, 168, 124, 0.40); }
.sponsor-dd-score--poor { background: rgba(177, 74, 31, 0.12); color: #7a2d12; border: 1px solid rgba(177, 74, 31, 0.45); }
.sponsor-dd-bycat {
display: flex; flex-wrap: wrap; gap: 6px;
flex: 1;
}
.sponsor-dd-catpill {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11.5px; padding: 4px 8px; border-radius: 999px;
background: var(--paper); border: 1px solid var(--line);
letter-spacing: 0.2px;
}
.sponsor-dd-catpill.is-full { background: rgba(79, 122, 91, 0.10); color: #2f5238; border-color: rgba(79, 122, 91, 0.35); }
.sponsor-dd-catpill.is-partial { background: rgba(201, 168, 124, 0.14); color: #6b4f1d; border-color: rgba(201, 168, 124, 0.40); }
.sponsor-dd-catpill.is-empty { background: rgba(177, 74, 31, 0.08); color: #7a2d12; border-color: rgba(177, 74, 31, 0.25); }
.sponsor-dd-catpill-name { font-weight: 600; }
.sponsor-dd-catpill-score { font-variant-numeric: tabular-nums; opacity: 0.85; }
.sponsor-dd-form { display: grid; gap: 14px; }
.sponsor-dd-cat {
border: 1px solid var(--line); border-radius: 10px;
padding: 14px 16px; background: #fff;
}
.sponsor-dd-cat legend {
font-family: var(--font-serif);
font-size: 15px; font-weight: 600; padding: 0 6px;
color: var(--forest-700, #0E1B2C);
}
.sponsor-dd-row {
display: grid;
grid-template-columns: 1fr 220px;
gap: 10px;
padding: 8px 0;
border-top: 1px solid var(--line);
}
.sponsor-dd-cat .sponsor-dd-row:first-of-type { border-top: 0; padding-top: 0; }
.sponsor-dd-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; cursor: pointer; }
.sponsor-dd-check input { margin-top: 4px; flex-shrink: 0; }
.sponsor-dd-row textarea {
padding: 6px 10px; font-size: 13px; border: 1px solid var(--line); border-radius: 6px;
background: var(--paper); resize: vertical; min-height: 32px; max-height: 120px;
}
@media (max-width: 720px) {
.sponsor-dd-row { grid-template-columns: 1fr; }
}
/* =============================================================
* Portfolio analysis tool (T4.1)
* ============================================================= */
.portfolio-empty {
padding: var(--s-6);
background: var(--paper, #fafaf5);
border: 1px dashed var(--line, #d9d6c8);
border-radius: 12px;
text-align: center;
}
.portfolio-empty h2 {
font-family: var(--font-serif);
font-size: 22px;
margin: 0 0 8px;
font-weight: 500;
}
.portfolio-empty p {
color: var(--ink-mute);
font-size: 14.5px;
margin: 0 auto var(--s-4);
max-width: 580px;
line-height: 1.55;
}
.portfolio-actions-bar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.btn.btn--sm { padding: 6px 12px; font-size: 13px; }
.portfolio-form {
margin: var(--s-4) 0;
padding: 18px 20px;
background: var(--paper, #fafaf5);
border: 1px solid var(--line, #e6e3d8);
border-radius: 12px;
}
.portfolio-form h3 {
font-family: var(--font-serif);
font-size: 18px;
font-weight: 500;
margin: 0 0 14px;
}
.portfolio-form-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px 14px;
}
.portfolio-form label {
display: flex;
flex-direction: column;
gap: 5px;
}
.portfolio-form label > span {
font-size: 12.5px;
font-weight: 600;
color: var(--ink);
letter-spacing: 0.1px;
}
.portfolio-form input,
.portfolio-form select,
.portfolio-form textarea {
padding: 8px 10px;
font-size: 14px;
font-family: var(--font-sans);
border: 1px solid var(--line, #d9d6c8);
border-radius: 6px;
background: #fff;
}
.portfolio-form-field--full { grid-column: 1 / -1; }
.portfolio-form-actions {
display: flex;
gap: 10px;
margin-top: 14px;
}
.portfolio-table .row-title { font-weight: 600; }
.portfolio-table .row-flags { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; }
.portfolio-table .row-flags .flag {
display: inline-block;
font-size: 10.5px;
font-weight: 600;
padding: 2px 7px;
border-radius: 999px;
background: rgba(177, 74, 31, 0.10);
color: #7a2d12;
border: 1px solid rgba(177, 74, 31, 0.30);
letter-spacing: 0.2px;
}
.portfolio-table .row-why { font-size: 13px; color: var(--ink-mute); max-width: 280px; }
.portfolio-table .row-actions { white-space: nowrap; }
.portfolio-table .row-actions .btn--sm + .btn--sm { margin-left: 4px; }
@media (max-width: 900px) {
.portfolio-form-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.portfolio-form-grid { grid-template-columns: 1fr; }
}
/* =============================================================
* Family Office inquiry form (T2.5)
* ============================================================= */
.fo-form {
margin: var(--s-4) 0 var(--s-3);
padding: 22px 24px;
background: var(--paper, #fafaf5);
border: 1px solid var(--line, #e6e3d8);
border-radius: 12px;
}
.fo-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 16px;
}
.fo-form-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.fo-form-field--full { grid-column: 1 / -1; }
.fo-form-field > span {
font-size: 13px;
font-weight: 600;
color: var(--ink);
letter-spacing: 0.1px;
}
.fo-form-field input,
.fo-form-field select,
.fo-form-field textarea {
padding: 10px 12px;
font-size: 14.5px;
font-family: var(--font-sans);
border: 1px solid var(--line, #d9d6c8);
border-radius: 8px;
background: #fff;
color: var(--ink);
}
.fo-form-field textarea { resize: vertical; min-height: 80px; }
.fo-form-field input:focus,
.fo-form-field select:focus,
.fo-form-field textarea:focus {
outline: none;
border-color: var(--accent, var(--forest-500, #0E1B2C));
box-shadow: 0 0 0 3px rgba(176, 141, 79, 0.35);
}
.fo-form-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: var(--s-4);
}
.fo-form-status {
margin: 12px 0 0;
min-height: 0;
font-size: 13.5px;
color: var(--ink-mute);
transition: min-height var(--t-fast, 120ms);
}
.fo-form-status--ok { color: var(--good, var(--forest-700, #0E1B2C)); font-weight: 600; min-height: 1.4em; }
.fo-form-status--err { color: #b14a1f; font-weight: 600; min-height: 1.4em; }
.fo-form-status--info { color: #7a5a1a; min-height: 1.4em; }
.fo-form-status a { color: inherit; text-decoration: underline; }
.fo-form-fine {
margin: 10px 0 0;
font-size: 12.5px;
line-height: 1.5;
color: var(--ink-mute);
}
@media (max-width: 640px) {
.fo-form-grid { grid-template-columns: 1fr; }
}
/* =============================================================
* T6.3 — Cal.com booking embed on family-office page
* ============================================================= */
.fo-booking {
margin: var(--s-5) 0 var(--s-4);
padding: var(--s-4) var(--s-4) var(--s-3);
background: linear-gradient(180deg, #ffffff 0%, #f8f5ee 100%);
border: 1px solid var(--line);
border-radius: 14px;
box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.fo-booking-head { margin-bottom: var(--s-3); }
.fo-booking-head h2 {
margin: 0 0 6px;
font-size: 22px;
letter-spacing: -0.01em;
color: var(--ink);
}
.fo-booking-head p {
margin: 0;
color: var(--ink-mute);
font-size: 15px;
line-height: 1.55;
max-width: 60ch;
}
.fo-cal-embed {
min-height: 600px;
width: 100%;
border-radius: 10px;
overflow: hidden;
background: #ffffff;
border: 1px solid var(--line-mute, #e8e4da);
}
.fo-cal-embed:empty::before {
content: "";
display: block;
height: 600px;
background:
linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.03) 50%, transparent 100%)
no-repeat;
background-size: 200% 100%;
animation: foCalShimmer 1.6s ease-in-out infinite;
}
@keyframes foCalShimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.fo-booking-fallback {
margin: 10px 0 0;
font-size: 13px;
color: var(--ink-mute);
text-align: right;
}
.fo-booking-fallback a {
color: var(--ink);
text-decoration: underline;
font-weight: 600;
}
.fo-cal-fallback {
padding: 60px var(--s-4);
text-align: center;
}
.fo-cal-fallback p {
margin: 0 0 16px;
color: var(--ink-mute);
}
/* "or" divider between booking and inquiry form */
.fo-booking-divider {
display: flex;
align-items: center;
gap: var(--s-3);
margin: var(--s-4) 0 var(--s-4);
color: var(--ink-mute);
font-size: 13px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.fo-booking-divider::before,
.fo-booking-divider::after {
content: "";
flex: 1;
height: 1px;
background: var(--line);
}
@media (max-width: 640px) {
.fo-cal-embed { min-height: 520px; }
.fo-cal-embed:empty::before { height: 520px; }
.fo-booking { padding: var(--s-3); }
.fo-booking-head h2 { font-size: 19px; }
}
/* =============================================================
* Accredited verification (T2.4)
* ============================================================= */
.vi-paths {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin: var(--s-4) 0 var(--s-5);
}
.vi-path-card {
padding: 14px 16px;
background: var(--paper, #fafaf5);
border: 1px solid var(--line, #e6e3d8);
border-radius: 10px;
}
.vi-path-card h3 {
font-family: var(--font-serif);
font-size: 16px;
font-weight: 600;
margin: 0 0 6px;
color: var(--forest-700, #0E1B2C);
}
.vi-path-card p {
font-size: 13.5px;
line-height: 1.5;
margin: 0;
color: var(--ink-mute);
}
.vi-flow h2 {
font-family: var(--font-serif);
font-size: 20px;
font-weight: 500;
margin: var(--s-5) 0 var(--s-3);
}
.vi-steps {
padding-left: 22px;
margin: 0 0 var(--s-4);
}
.vi-steps li {
font-size: 14.5px;
line-height: 1.55;
margin-bottom: 8px;
color: var(--ink);
}
.vi-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin: var(--s-4) 0 var(--s-3);
}
.vi-fine {
font-size: 12.5px;
line-height: 1.5;
color: var(--ink-mute);
margin: var(--s-3) 0 0;
}
.vi-status {
margin-top: var(--s-5);
padding: 16px 18px;
background: var(--good-soft, rgba(14, 27, 44, 0.08));
border: 1px solid var(--accent, var(--forest-500, #0E1B2C));
border-radius: 10px;
}
.vi-status h2 {
margin: 0 0 6px;
font-size: 16px;
font-weight: 600;
color: var(--forest-700, #0E1B2C);
}
.vi-status p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink); }
@media (max-width: 720px) {
.vi-paths { grid-template-columns: 1fr; }
}
/* =============================================================
* Legal pages (Terms / Privacy / Disclaimer / Accredited)
* ============================================================= */
.legal-page {
max-width: 760px;
margin: 0 auto;
padding-top: var(--s-5);
padding-bottom: var(--s-8);
}
.legal-draft-banner {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: baseline;
padding: 12px 16px;
margin-bottom: var(--s-5);
border-radius: 8px;
background: #fff7e6;
border: 1px solid #f3d27a;
color: #6b4a00;
font-size: 13.5px;
line-height: 1.5;
}
.legal-draft-banner strong {
letter-spacing: 1px;
font-size: 11.5px;
font-weight: 700;
background: #f3d27a;
color: #4a3300;
padding: 2px 8px;
border-radius: 4px;
flex-shrink: 0;
}
.legal-page .hero-kicker {
display: inline-block;
margin-bottom: var(--s-3);
}
.legal-page h1 {
font-family: var(--font-serif);
font-size: clamp(28px, 4vw, 38px);
line-height: 1.15;
margin: 0 0 var(--s-2);
letter-spacing: -0.5px;
}
.legal-updated {
color: var(--ink-mute);
font-size: 14px;
margin: 0 0 var(--s-5);
}
.legal-body {
font-size: 15.5px;
line-height: 1.68;
color: var(--ink);
}
.legal-body h2 {
font-family: var(--font-serif);
font-size: 22px;
font-weight: 500;
margin: var(--s-6) 0 var(--s-2);
color: var(--forest-700, var(--ink));
letter-spacing: -0.2px;
}
.legal-body h2:first-of-type { margin-top: var(--s-4); }
.legal-body p { margin: 0 0 var(--s-3); }
.legal-body ul,
.legal-body ol {
margin: 0 0 var(--s-3);
padding-left: 22px;
}
.legal-body li { margin-bottom: 6px; }
.legal-body strong { color: var(--ink); font-weight: 600; }
.legal-body a {
color: var(--accent-deep, var(--forest-700));
text-decoration: underline;
text-underline-offset: 2px;
}
.legal-body a:hover { text-decoration-thickness: 2px; }
.legal-contact {
margin-top: var(--s-6);
padding: var(--s-3) var(--s-4);
background: var(--ink-50, #f4f4f1);
border-left: 3px solid var(--accent, var(--forest-500));
font-size: 14px;
color: var(--ink-mute);
border-radius: 4px;
}
/* =============================================================
* A11y — skip-to-content + global focus-visible polish
* ============================================================= */
.skip-to-content {
position: absolute;
top: 0;
left: 0;
padding: 10px 16px;
background: var(--ink, #0e1a2b);
color: #ffffff;
text-decoration: none;
font-weight: 600;
border-radius: 0 0 8px 0;
/* Pull off-screen until focused */
transform: translateY(-110%);
transition: transform 120ms ease-out;
z-index: 1000;
}
.skip-to-content:focus,
.skip-to-content:focus-visible {
transform: translateY(0);
outline: 3px solid var(--sand, #c6a85a);
outline-offset: 0;
}
/* High-visibility focus rings for keyboard users. Buttons / links inside
* forms and toolbars need a consistent, non-removable indicator. */
:focus-visible {
outline: 2px solid var(--sand, #c6a85a);
outline-offset: 2px;
border-radius: 4px;
}
/* Don't override the skip-link's bespoke focus style */
.skip-to-content:focus-visible { outline-offset: 0; border-radius: 0 0 8px 0; }
/* Suppress the focus ring on the page content container. app.js calls
* view.focus() after every route render so screen readers announce the
* new page (the tabindex="-1" makes it programmatically focusable), but
* we don't want the visible 2px sand outline to draw a "ribbon" around
* the entire page on every navigation. The a11y benefit is preserved;
* only the visual is hidden. */
#view:focus,
#view:focus-visible {
outline: none;
}
/* Honor reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* =============================================================
* T6.5 — Admin metrics dashboard
* ============================================================= */
.admin .module-head { margin-bottom: var(--s-4); }
.admin-gate { margin: var(--s-4) 0; }
.admin-403 {
padding: var(--s-5);
background: #fff4e6;
border: 1px solid #f3d4a0;
border-radius: 12px;
text-align: center;
}
.admin-403 h2 { margin: 0 0 8px; color: #7a4a00; }
.admin-demo-note {
margin: 0 0 var(--s-4);
padding: 10px var(--s-3);
background: #f3f0e6;
border-left: 3px solid var(--sand, #c6a85a);
font-size: 13px;
color: var(--ink);
border-radius: 4px;
}
.admin-section {
margin: 0 0 var(--s-5);
}
.admin-section h2 {
margin: 0 0 var(--s-3);
font-size: 14px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-mute);
border-bottom: 1px solid var(--line);
padding-bottom: 6px;
}
.admin-kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
}
.admin-kpi {
padding: 14px 16px;
background: #ffffff;
border: 1px solid var(--line);
border-radius: 10px;
box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.admin-kpi-label {
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-mute);
margin-bottom: 4px;
}
.admin-kpi-value {
font-size: 24px;
font-weight: 600;
color: var(--ink);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.admin-kpi-delta {
margin-top: 4px;
font-size: 12px;
font-weight: 600;
}
.admin-kpi-delta--up { color: #4F7A5B; }
.admin-kpi-delta--down { color: #b14a1f; }
/* FO pipeline */
.admin-pipeline {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
overflow-x: auto;
}
.admin-pipeline-col {
background: #faf8f3;
border: 1px solid var(--line);
border-radius: 8px;
padding: 10px;
min-width: 160px;
}
.admin-pipeline-col h4 {
margin: 0 0 8px;
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-mute);
display: flex;
justify-content: space-between;
align-items: center;
}
.admin-pipeline-count {
background: #ffffff;
border: 1px solid var(--line);
border-radius: 999px;
padding: 1px 8px;
font-size: 11px;
font-weight: 600;
}
.admin-pipeline-card {
background: #ffffff;
border: 1px solid var(--line);
border-radius: 6px;
padding: 8px 10px;
margin-bottom: 6px;
font-size: 12.5px;
display: flex;
flex-direction: column;
gap: 2px;
}
.admin-pipeline-card strong { font-size: 13px; }
.admin-pipeline-aum { color: var(--ink); font-weight: 600; }
.admin-pipeline-juris { color: var(--ink-mute); font-size: 11.5px; }
.admin-pipeline-when { color: var(--ink-mute); font-size: 11px; }
.admin-pipeline-empty { color: var(--ink-mute); font-size: 12px; text-align: center; }
/* Referrals table */
.admin-table-wrap { overflow-x: auto; }
.admin-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.admin-table th, .admin-table td {
padding: 8px 10px;
text-align: left;
border-bottom: 1px solid var(--line);
}
.admin-table th {
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-mute);
background: #faf8f3;
}
.admin-table code {
background: #f3f0e6;
padding: 1px 6px;
border-radius: 4px;
font-size: 12px;
}
.admin-empty {
color: var(--ink-mute);
text-align: center;
padding: var(--s-3);
background: #faf8f3;
border: 1px dashed var(--line);
border-radius: 8px;
}
.admin-fine {
margin-top: var(--s-4);
font-size: 12px;
color: var(--ink-mute);
border-top: 1px solid var(--line);
padding-top: var(--s-3);
}
.admin-fine code {
background: #f3f0e6;
padding: 1px 6px;
border-radius: 4px;
}
@media (max-width: 860px) {
.admin-pipeline { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
.admin-pipeline { grid-template-columns: 1fr; }
.admin-kpi-value { font-size: 20px; }
}
/* =============================================================
* Print — produces a clean single-decision PDF report
* ============================================================= */
@page {
size: letter;
margin: 0.55in 0.6in 0.65in 0.6in;
}
@media print {
/* Hide app chrome */
.site-header, .site-footer, .hero-ctas, .hero-art,
.library-promo, .topic-related, .path-finish, .upgrade-strip,
.referral-strip, .email-capture, .pricing-faq, .calc-toolbar,
.alerts-actions, .alerts-prefs, .alerts-email, .news-controls,
.blog-controls, .breadcrumbs, .founder-banner, .modal-overlay,
.filter-chip, .news-tag-btn, .tag-toggle, .tag-toggle-pill,
.dash-stats, .dash-section-head .dash-section-link {
display: none !important;
}
body {
background: white !important;
color: #1a1a1a !important;
font-size: 11pt;
}
body::before { display: none; }
main { padding: 0 !important; }
.wrap { max-width: none; padding: 0; }
/* Forms collapse into a compact "Inputs used" block before the result */
.grid-form {
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 12px;
page-break-inside: avoid;
}
.grid-form fieldset {
border: 1px solid #d4d4d4 !important;
padding: 8px 10px !important;
background: #fafafa !important;
box-shadow: none !important;
border-radius: 4px;
}
.grid-form legend {
font-size: 9pt;
color: #555 !important;
background: transparent !important;
padding: 0 4px;
}
.grid-form label {
font-size: 9pt;
margin-top: 4px;
}
.grid-form input,
.grid-form select {
font-size: 10pt;
padding: 3px 6px !important;
border: none !important;
background: transparent !important;
color: #1a1a1a !important;
font-weight: 600;
box-shadow: none !important;
}
/* Module head — title */
.module-head { margin-bottom: 12px; padding-bottom: 6px; border-bottom: 2px solid #0E1B2C; page-break-after: avoid; }
.module-head h1 { font-size: 22pt !important; margin: 0 0 4px !important; color: #0E1B2C !important; }
.module-head .lead, .module-head .hero-kicker { display: none; }
.module-head::after {
content: "Fundamento · Report generated " attr(data-printed);
display: block;
font-size: 9pt;
color: #666;
margin-top: 4px;
}
/* Result panel */
.result {
box-shadow: none !important;
border: 1px solid #d4d4d4 !important;
padding: 14px 18px !important;
page-break-inside: avoid;
}
.result h2, .result h3 {
color: #0E1B2C !important;
margin-top: 12px !important;
}
.result h2 { font-size: 14pt; }
.result h3 { font-size: 11pt; margin-bottom: 6px !important; }
/* KPI grid — print as a compact horizontal bar */
.kpi-grid {
grid-template-columns: repeat(4, 1fr);
gap: 6px;
margin: 8px 0;
}
.kpi {
background: #fafafa !important;
border: 1px solid #d4d4d4 !important;
padding: 6px 8px !important;
}
.kpi.good { background: #f0f7f1 !important; border-color: #c5e2cc !important; }
.kpi.good .kpi-value { color: #136e3c !important; }
.kpi.warn { background: #fdf1e9 !important; border-color: #f0d0bd !important; }
.kpi.warn .kpi-value { color: #b14a1f !important; }
.kpi.bad { background: #fae8e8 !important; border-color: #e7c4c5 !important; }
.kpi.bad .kpi-value { color: #9b2326 !important; }
.kpi-label { font-size: 7.5pt; }
.kpi-value { font-size: 12.5pt; }
.kpi-sub { font-size: 7.5pt; }
/* Scenario cards */
.scenario-grid {
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.scenario {
border: 1px solid #d4d4d4 !important;
padding: 8px 10px !important;
background: #fafafa !important;
page-break-inside: avoid;
}
.scenario.recommended {
background: #ebf3f0 !important;
box-shadow: none !important;
}
.scenario h4 { font-size: 11pt; }
.scenario .big { font-size: 14pt; }
.scenario ul { padding-left: 14px; }
.scenario li { font-size: 9pt; }
/* Takeaway */
.takeaway {
background: #ebf3f0 !important;
border-left: 3px solid #0E1B2C !important;
padding: 8px 12px !important;
page-break-inside: avoid;
}
.warn {
background: #fdf1e9 !important;
border-left: 3px solid #b14a1f !important;
padding: 8px 12px !important;
page-break-inside: avoid;
}
/* Hide related-Library cards, explainer, full-rank, paywall in print */
.lib-grid, .lib-card, .paywall-row, .explainer { display: none !important; }
/* Links — strip the underline + restore black for print */
a { color: inherit !important; text-decoration: none !important; }
/* Footer line for every printed page */
.result::after {
content: "Educational tool. Not a substitute for advice from a CPA, attorney, or financial advisor familiar with your situation. Verify before acting. realestatefortherestofus.local";
display: block;
margin-top: 14px;
padding-top: 8px;
border-top: 1px solid #d4d4d4;
font-size: 8pt;
color: #666;
font-style: italic;
}
}
/* =============================================================
* SITE CONCEPT — Phase 2 (feat/site-concept)
* Additive only. Every rule is scoped under .concept-* so it
* cannot collide with existing component CSS. Token aliases map
* the concept's names onto the live :root values (Brand Book).
* The 3 that differ from live are defined to the concept values.
* ============================================================= */
:root {
--c-green: #0E1B2C; /* = --accent */
--c-green-deep: #0A4438; /* concept value (live --accent-deep is #0a1422) */
--c-cream: #FAFAF7; /* = --bg */
--c-ink: #0B1D24; /* concept value (live --ink is #0e1320) */
--c-grey: #595959; /* concept value (live --ink-mute is #6c7388) */
--c-hair: #E8E8E3; /* concept value (live --line is #e6e9ef) */
--c-stone: #ECE9DF; /* = --stone */
--c-gold: #C9A87C; /* = --sand */
--c-orange: #B14A1F; /* = --terra */
--c-mono: 'JetBrains Mono', ui-monospace, monospace;
--c-serif: 'Fraunces', Georgia, serif;
--c-sans: 'Inter', system-ui, sans-serif;
--c-radius: 14px;
--c-shadow: 0 1px 2px rgba(11,29,36,.04), 0 8px 24px rgba(11,29,36,.06);
}
/* band shell */
.concept-band { padding: 84px 0; background: var(--c-cream); color: var(--c-ink); }
.concept-band--alt { background: var(--c-stone); }
.concept-wrap { max-width: 1160px; margin: 0 auto; padding: 0 32px; }
.concept-head { max-width: 62ch; margin-bottom: 44px; }
.concept-eyebrow { font-family: var(--c-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-grey); display: inline-flex; align-items: center; gap: 12px; }
.concept-eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--c-gold); display: inline-block; }
.concept-eyebrow--on-green { color: var(--c-gold); }
.concept-eyebrow--on-green::before { display: none; }
.concept-h2 { font-family: var(--c-serif); font-weight: 500; line-height: 1.08; letter-spacing: -.01em; font-size: 38px; margin-top: 14px; color: var(--c-ink); }
.concept-lead { font-size: 17px; color: var(--c-grey); margin-top: 14px; line-height: 1.5; }
/* six-surfaces card grid */
.concept-grid { display: grid; gap: 22px; }
.concept-g3 { grid-template-columns: repeat(3, 1fr); }
.concept-card { background: var(--c-cream); border: 1px solid var(--c-hair); border-radius: var(--c-radius); padding: 28px; box-shadow: var(--c-shadow); }
.concept-band--alt .concept-card { background: #fff; }
.concept-card .concept-k { font-family: var(--c-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-green); display: flex; align-items: center; gap: 9px; }
.concept-card .concept-k::before { content: ""; width: 18px; height: 2px; background: var(--c-gold); }
.concept-card h3 { font-family: var(--c-serif); font-weight: 500; font-size: 21px; margin: 14px 0 9px; color: var(--c-ink); line-height: 1.15; }
.concept-card p { font-family: var(--c-sans); font-size: 14.5px; color: var(--c-grey); line-height: 1.55; }
/* positioning / showcase */
.concept-show-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 22px; }
.concept-show-lead { background: var(--c-green); color: var(--c-cream); border-radius: var(--c-radius); padding: 38px; display: flex; flex-direction: column; justify-content: space-between; }
.concept-show-h { font-family: var(--c-serif); font-weight: 500; font-size: 28px; color: var(--c-cream); max-width: 16ch; margin-top: 14px; line-height: 1.12; }
.concept-show-q { font-size: 15px; color: rgba(250,250,247,.8); margin-top: 18px; line-height: 1.55; }
.concept-show-side { display: grid; gap: 22px; }
.concept-num-card { background: #fff; border: 1px solid var(--c-hair); border-radius: var(--c-radius); padding: 24px; box-shadow: var(--c-shadow); }
.concept-num-lbl { font-family: var(--c-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-grey); margin-bottom: 6px; }
.concept-num-big { font-family: var(--c-serif); font-weight: 500; font-size: 34px; color: var(--c-green); }
.concept-num-big--gold { color: var(--c-gold); }
.concept-num-foot { font-size: 13px; color: var(--c-grey); margin-top: 6px; }
/* multi-jurisdiction city strip */
.concept-capstrip { margin-top: 38px; border-top: 1px solid var(--c-hair); padding-top: 26px; }
.concept-capline { font-size: 14px; color: var(--c-grey); max-width: 72ch; margin: 10px 0 18px; }
.concept-city-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.concept-city { margin: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--c-hair); background: #fff; }
.concept-city img { width: 100%; height: 118px; object-fit: cover; display: block; }
.concept-city figcaption { font-family: var(--c-mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--c-grey); padding: 9px 10px; }
@media (max-width: 900px) {
.concept-g3 { grid-template-columns: 1fr 1fr; }
.concept-show-grid { grid-template-columns: 1fr; }
.concept-city-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
.concept-g3 { grid-template-columns: 1fr; }
.concept-city-strip { grid-template-columns: repeat(2, 1fr); }
}
/* =============================================================
* SITE CONCEPT — Phase 2 overflow hardening (preview fix)
* CSS-only, additive. No copy edits, no selector renames.
* Long tokens (currency codes, USD·MXN·COP, long uppercase
* eyebrows) and oversized display numbers/headlines must wrap
* or shrink rather than break out of their box. Flex/grid
* children get min-width:0 so they can actually shrink.
* ============================================================= */
/* New concept sections — let long content wrap inside cards/cells */
.concept-card,
.concept-num-card,
.concept-show-lead,
.concept-city { min-width: 0; overflow-wrap: anywhere; }
.concept-card h3,
.concept-card p,
.concept-card .concept-k,
.concept-num-lbl,
.concept-num-foot,
.concept-capline,
.concept-show-h,
.concept-show-q,
.concept-eyebrow,
.concept-lead { overflow-wrap: anywhere; }
/* grid/flex children must be allowed to shrink below content size */
.concept-grid > *,
.concept-show-grid > *,
.concept-show-side > *,
.concept-city-strip > * { min-width: 0; }
/* oversized display numbers: clamp so $742,000 / $1.94M fit narrow cards */
.concept-num-big { font-size: clamp(24px, 5.2vw, 34px); overflow-wrap: anywhere; }
.concept-h2 { font-size: clamp(26px, 4.6vw, 38px); overflow-wrap: anywhere; }
.concept-show-h { font-size: clamp(22px, 3.8vw, 28px); }
/* city captions: long uppercase like "CIUDAD DE MÉXICO · MXN" must wrap, not clip */
.concept-city figcaption { overflow-wrap: anywhere; white-space: normal; }
/* Existing landing surfaces touched in Phase 2 — harden against the
* longer ES strings (long uppercase eyebrow, stat numbers, partner copy).
* Additive only; these selectors are NOT renamed (translateHome/test hooks). */
/* PROSE on existing surfaces — wrap at word boundaries only (fixes the
* mid-word breaks in the partner cards + differentiator list). */
.hero h1,
.hero h1 em,
.trust-stat-label,
.trust-partner-card,
.trust-partner-card strong,
.trust-partner-card p,
.trust-difference li { overflow-wrap: break-word; word-break: normal; }
/* Unbreakable-ish: long uppercase eyebrow + stat display numbers. */
.hero-kicker { overflow-wrap: anywhere; }
.trust-stat-num { overflow-wrap: anywhere; }
/* allow cells to shrink in their grids (no mid-word break needed for this) */
.trust-stat { min-width: 0; }
.trust-partner-card { min-width: 0; }
/* =============================================================
* Trust section container fix (preview p4)
* The T6.2c rule (.trust { padding: var(--s-7) 0 }) zeroed the
* card's horizontal padding, so .trust-stats / .trust-partners /
* .trust-difference and the fineprint caption ran flush to the
* card edge with no inner gutter — reading as a wider, off-center
* block whose caption reached the page edge. Restore symmetric
* horizontal padding and let inner blocks fill the padded width
* evenly. CSS-only, additive; no selector renames. .trust still
* sits inside #view.wrap (max-width:1120px; margin:0 auto), so the
* section is centered with the nav/hero/concept sections. */
.trust { padding-left: var(--s-7); padding-right: var(--s-7); }
.trust-stats,
.trust-partners,
.trust-difference,
.trust-partners-fineprint { width: auto; max-width: 100%; margin-left: 0; margin-right: 0; }
@media (max-width: 560px) {
.trust { padding-left: var(--s-5); padding-right: var(--s-5); }
}
/* =============================================================
* SITE CONCEPT — Phase 3 app shell (sidebar + topbar)
* Additive. Hidden by default; shown on body.app-mode (toggled in
* render() by route category — Split B, members-only routes).
* #view is NOT reparented: the shell is fixed-position chrome and
* #view only gains margins in app-mode. Reuses Phase-2 --c-* tokens.
* ============================================================= */
.app-shell { display: none; }
.app-shell[hidden] { display: none; }
body.app-mode .app-shell { display: block; }
/* In app-mode: hide the marketing top nav, inset #view for the chrome */
body.app-mode .site-header { display: none; }
body.app-mode #view {
margin-left: 248px;
padding-top: 62px; /* clears the fixed topbar */
max-width: none;
}
/* Sidebar (green, fixed left) */
.app-side {
position: fixed; top: 0; left: 0; bottom: 0; width: 248px; z-index: 60;
background: var(--c-green); color: var(--c-cream);
display: flex; flex-direction: column; gap: 18px;
padding: 22px 18px; overflow-y: auto;
}
.app-side-brand { display: flex; align-items: center; gap: 11px; color: var(--c-cream); text-decoration: none; }
.app-side-logo {
width: 32px; height: 32px; border-radius: 8px; background: var(--c-cream);
color: var(--c-green); font-family: var(--c-serif); font-weight: 600; font-size: 19px;
display: flex; align-items: center; justify-content: center;
}
.app-side-name { font-family: var(--c-serif); font-weight: 600; font-size: 17px; }
.app-side-ident { border-top: 1px solid rgba(250,250,247,.14); border-bottom: 1px solid rgba(250,250,247,.14); padding: 14px 0; }
.app-side-ident-l { font-family: var(--c-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(250,250,247,.55); }
.app-side-ident-name { font-family: var(--c-serif); font-size: 16px; margin-top: 4px; overflow-wrap: anywhere; }
.app-side-ident-sub { font-size: 12.5px; color: rgba(250,250,247,.62); margin-top: 3px; overflow-wrap: break-word; word-break: normal; }
.app-side-nav { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.app-side-link {
font-size: 14px; color: rgba(250,250,247,.8); text-decoration: none;
padding: 9px 12px; border-radius: 8px;
display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.app-side-link:hover { background: rgba(250,250,247,.08); color: var(--c-cream); }
.app-side-link.active { background: rgba(250,250,247,.13); color: var(--c-cream); }
.app-side-chip {
font-family: var(--c-mono); font-size: 9px; letter-spacing: .04em;
background: var(--c-gold); color: var(--c-ink); padding: 2px 6px; border-radius: 5px; white-space: nowrap;
}
.app-side-foot { display: flex; flex-direction: column; gap: 8px; }
.app-side-foot-link { font-size: 13px; color: rgba(250,250,247,.6); text-decoration: none; }
.app-side-foot-link:hover { color: var(--c-cream); }
/* Topbar (cream, fixed, right of sidebar) */
.app-top {
position: fixed; top: 0; left: 248px; right: 0; height: 62px; z-index: 55;
background: var(--c-cream); border-bottom: 1px solid var(--c-hair);
display: flex; align-items: center; gap: 16px; padding: 0 28px;
}
.app-top-menu { display: none; background: none; border: 0; font-size: 20px; cursor: pointer; color: var(--c-ink); }
.app-top-crumb { font-family: var(--c-mono); font-size: 12px; letter-spacing: .06em; color: var(--c-grey); overflow-wrap: anywhere; }
.app-top-spacer { flex: 1; }
.app-top-lang {
font-family: var(--c-mono); font-size: 11px; letter-spacing: .1em;
border: 1px solid var(--c-hair); border-radius: 8px; background: #fff;
color: var(--c-grey); padding: 7px 11px; cursor: pointer;
}
.app-top-tier { display: inline-flex; align-items: center; gap: 7px; font-family: var(--c-mono); font-size: 11px; letter-spacing: .06em; color: var(--c-grey); }
.app-top-tier-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c-grey); }
.app-top-avatar {
width: 34px; height: 34px; border-radius: 50%; background: var(--c-green); color: var(--c-cream);
font-family: var(--c-mono); font-size: 12px; display: flex; align-items: center; justify-content: center;
}
/* mobile: sidebar collapses to an off-canvas drawer */
@media (max-width: 900px) {
body.app-mode #view { margin-left: 0; }
.app-top { left: 0; }
.app-top-menu { display: block; }
.app-side { transform: translateX(-100%); transition: transform .2s ease; }
body.app-mode.app-menu-open .app-side { transform: translateX(0); }
}
/* =============================================================
* Home hero — concept dark band + glass allocation card (2026 reskin)
* ============================================================= */
.hero--split {
position: relative; isolation: isolate;
margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
margin-top: calc(-1 * var(--s-7));
padding: clamp(56px,7vw,104px) max(var(--s-5), calc(50vw - 560px)) clamp(56px,8vw,112px);
background: var(--navy); color: #ECE7DC; overflow: hidden;
gap: clamp(36px,5vw,72px); align-items: center;
}
.hero--split::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background:
radial-gradient(820px 460px at 82% 6%, rgba(176,141,79,.16), transparent 60%),
radial-gradient(900px 600px at 4% 106%, rgba(31,92,90,.18), transparent 62%);
}
.hero--split .hero-kicker { color: #AEB6C0; background: transparent; }
.hero--split h1 { color: #F3EFE4; }
.hero--split h1 em { color: #F3EFE4; font-style: normal; }
.hero--split .lead, .hero--split .lead-sub { color: #AEB6C0; }
.hero--split .lead-sub strong { color: #F3EFE4; }
.hero--split .btn--ghost { background: transparent; color: #ECE7DC; border-color: rgba(236,231,220,.28); }
.hero--split .btn--ghost:hover { border-color: #ECE7DC; color: #fff; background: rgba(236,231,220,.06); }
.hero--split .btn--link { color: var(--brass-bright); }
.hero-glass {
background: linear-gradient(180deg, rgba(36,55,79,.55), rgba(14,27,44,.62));
border: 1px solid rgba(236,231,220,.14); border-radius: var(--radius-lg);
box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 30px 80px -30px rgba(0,0,0,.55);
-webkit-backdrop-filter: blur(10px) saturate(130%); backdrop-filter: blur(10px) saturate(130%);
padding: 26px; max-width: 520px; margin-left: auto;
}
.hero-glass .hg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.hero-glass .hg-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #AEB6C0; }
.hero-glass .hg-tag { font-family: var(--font-mono); font-size: 11px; color: var(--brass-bright); }
.hero-glass .hg-body { display: flex; align-items: center; gap: 22px; margin-top: 10px; }
.hero-glass .hg-legend { font-size: 13px; line-height: 2; color: #AEB6C0; }
.hero-glass .hg-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 9px; vertical-align: middle; }
.hero-glass .hg-cap { margin-top: 18px; font-size: 12.5px; color: #AEB6C0; line-height: 1.5; border-top: 1px solid rgba(236,231,220,.12); padding-top: 14px; }
/* dual-language inside the glass card (app sets html[lang]) */
html[lang="es"] .hero-glass [lang="en"] { display: none; }
html:not([lang="es"]) .hero-glass [lang="es"] { display: none; }
@media (max-width: 820px) {
.hero-glass { margin-left: 0; max-width: none; }
.hero--split .hero-glass .hg-body { gap: 16px; }
}
@media (max-width: 460px) {
.hero-glass .hg-body { flex-direction: column; align-items: flex-start; }
}
/* =============================================================
* Pricing + Family Office headers — concept dark band (2026 reskin)
* ============================================================= */
.concept-head-band {
position: relative; isolation: isolate;
margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
margin-top: calc(-1 * var(--s-7));
margin-bottom: clamp(32px,4vw,56px);
padding: clamp(54px,7vw,96px) max(var(--s-5), calc(50vw - 560px)) clamp(48px,6vw,80px);
background: var(--navy); color: #ECE7DC; overflow: hidden;
}
.concept-head-band::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background:
radial-gradient(760px 420px at 84% 6%, rgba(176,141,79,.15), transparent 60%),
radial-gradient(820px 540px at 4% 108%, rgba(31,92,90,.16), transparent 62%);
}
.concept-head-band .hero-kicker { color: #AEB6C0; background: transparent; }
.concept-head-band .hero-kicker--gold { color: var(--brass-bright); }
.concept-head-band h1 { color: #F3EFE4; }
.concept-head-band h1 em { color: #F3EFE4; font-style: normal; }
.concept-head-band .lead { color: #AEB6C0; }
/* =============================================================
* Home — geographic corridor band (2026 reskin, concept parity)
* ============================================================= */
.home-corridor {
position: relative; isolation: isolate;
margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
padding: clamp(56px,8vw,120px) max(var(--s-5), calc(50vw - 560px));
background: var(--navy); color: #ECE7DC; overflow: hidden;
}
.home-corridor::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background:
radial-gradient(760px 440px at 88% 8%, rgba(176,141,79,.14), transparent 60%),
radial-gradient(820px 560px at 4% 104%, rgba(31,92,90,.16), transparent 62%);
}
.home-corridor .hc-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(32px,5vw,68px); align-items: center; }
.home-corridor .hc-eyebrow { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: #AEB6C0; display: inline-flex; align-items: center; gap: 12px; }
.home-corridor .hc-eyebrow::before { content: ""; width: 26px; height: 1.5px; background: var(--brass); }
.home-corridor h2 { color: #F3EFE4; font-size: clamp(1.9rem,1.2rem + 2vw,2.8rem); font-weight: 300; letter-spacing: -.016em; line-height: 1.08; margin: 16px 0 0; }
.home-corridor .hc-lead { color: #AEB6C0; margin-top: 18px; font-size: 1.06rem; line-height: 1.55; max-width: 46ch; }
.home-corridor .hc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 30px; margin-top: 34px; }
.home-corridor .hc-stat { padding-left: 18px; border-left: 1.5px solid rgba(176,141,79,.55); }
.home-corridor .hc-stat .n { font-family: var(--font-serif); font-weight: 300; font-size: clamp(1.8rem,1.3rem + 1.4vw,2.4rem); letter-spacing: -.02em; line-height: 1; color: #F3EFE4; }
.home-corridor .hc-stat .n .u { color: var(--brass); }
.home-corridor .hc-stat .l { margin-top: 10px; font-size: 12.5px; line-height: 1.4; color: #AEB6C0; max-width: 26ch; }
.home-corridor-map { width: 100%; height: auto; display: block; }
html[lang="es"] .home-corridor [lang="en"] { display: none; }
html:not([lang="es"]) .home-corridor [lang="es"] { display: none; }
@media (max-width: 860px) { .home-corridor .hc-grid { grid-template-columns: 1fr; } }
/* =============================================================
* HOME 2026 — concept layout ported into the live app (scoped .fh)
* ============================================================= */
.home2026 { --nv:#0E1B2C; --nv2:#122236; --ink2:#14181F; --alab:#F6F3EC; --ow:#FBFAF7;
--slate:#5B6675; --mist:#C9CDD3; --brass:#B08D4F; --brassb:#C8A765; --teal:#357A77;
--pl:#E4DFD3; --tod:#ECE7DC; --tods:#AEB6C0;
--serif:"Source Serif 4","Iowan Old Style",Georgia,serif; --sans:"Inter",system-ui,sans-serif; --mono:"IBM Plex Mono",monospace; }
/* dual language */
html[lang="es"] .home2026 [lang="en"] { display: none !important; }
html:not([lang="es"]) .home2026 [lang="es"] { display: none !important; }
.fh .band { position: relative; isolation: isolate; padding-block: clamp(64px,9vw,132px);
margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); overflow: hidden; }
.fh .band.dark { background: var(--nv); color: var(--tod); }
.fh .band.dark2 { background: var(--nv2); color: var(--tod); }
.fh .band.light { background: var(--alab); color: var(--ink2); }
.fh .band.glow::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
background: radial-gradient(760px 440px at 86% 6%, rgba(176,141,79,.14), transparent 60%),
radial-gradient(820px 560px at 4% 106%, rgba(31,92,90,.16), transparent 62%); }
.fh .wrap { max-width: 1180px; margin-inline: auto; padding-inline: max(24px, calc(50vw - 590px)); }
.fh .center { text-align: center; }
.fh .measure { max-width: 60ch; } .fh .center .measure { margin-inline: auto; }
.fh .eyebrow { font-family: var(--mono); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase;
color: var(--slate); display: inline-flex; align-items: center; gap: 13px; font-weight: 500; }
.fh .band.dark .eyebrow, .fh .band.dark2 .eyebrow { color: var(--tods); }
.fh .eyebrow::before { content:""; width: 26px; height: 1.5px; background: var(--brass); }
.fh .center .eyebrow { justify-content: center; }
.fh h2.h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(2rem,1.2rem + 2.4vw,3rem);
line-height: 1.08; letter-spacing: -.016em; margin-top: 16px; color: var(--ink2); }
.fh .band.dark h2.h2, .fh .band.dark2 h2.h2 { color: #F3EFE4; }
.fh .lead { font-size: clamp(1.08rem,1rem + .5vw,1.3rem); line-height: 1.55; margin-top: 18px; color: var(--slate); }
.fh .band.dark .lead, .fh .band.dark2 .lead { color: var(--tods); }
.fh .sec-head { margin-bottom: clamp(38px,5vw,60px); }
.fh .stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--nv-line,#243749);
border: 1px solid #243749; border-radius: 6px; overflow: hidden; }
.fh .stats .s { background: var(--nv); padding: 26px 22px; }
.fh .stats .n { font-family: var(--serif); font-weight: 300; font-size: clamp(1.9rem,1.3rem + 1.6vw,2.7rem);
letter-spacing: -.02em; line-height: 1; color: #F3EFE4; }
.fh .stats .n .u { color: var(--brass); }
.fh .stats .l { margin-top: 11px; font-size: 12.5px; line-height: 1.4; color: var(--tods); }
.fh .grid { display: grid; gap: clamp(16px,1.6vw,22px); }
.fh .g-3 { grid-template-columns: repeat(3,1fr); }
.fh .g-2 { grid-template-columns: repeat(2,1fr); }
.fh .card { background: var(--ow); border: 1px solid var(--pl); border-radius: 6px; padding: 30px 28px;
transition: transform .35s, box-shadow .35s, border-color .35s; }
.fh .card:hover { transform: translateY(-4px); box-shadow: 0 2px 2px rgba(14,27,44,.05), 0 28px 60px -24px rgba(14,27,44,.26); border-color: #d8d1c1; }
.fh .card .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
.fh .card h3 { font-family: var(--serif); font-weight: 400; font-size: 1.28rem; letter-spacing: -.01em; margin-top: 14px; color: var(--ink2); }
.fh .card p { margin-top: 11px; font-size: 14.5px; line-height: 1.6; color: var(--slate); }
.fh .chart-card { background: var(--ow); border: 1px solid var(--pl); border-radius: 6px; padding: 24px 24px 20px;
box-shadow: 0 1px 1px rgba(14,27,44,.04), 0 18px 40px -18px rgba(14,27,44,.16); }
.fh .chart-card .k { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--slate); }
.fh .chart-card h3 { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; margin-top: 8px; color: var(--ink2); }
.fh .chart-card .note { margin-top: 13px; font-size: 13.5px; color: var(--slate); line-height: 1.55; }
.fh .axis { stroke: var(--pl); } .fh .grid-l { stroke: var(--pl); stroke-dasharray: 2 4; } .fh .tick { font-family: var(--mono); font-size: 10px; fill: var(--slate); }
.fh .explain { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(20px,2.4vw,40px); }
.fh .x-item { padding-top: 24px; border-top: 1px solid var(--pl); }
.fh .x-item .xe { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
.fh .x-item h3 { font-family: var(--serif); font-weight: 400; font-size: 1.28rem; margin-top: 13px; color: var(--ink2); }
.fh .x-item p { margin-top: 11px; font-size: 14.5px; color: var(--slate); line-height: 1.62; }
.fh .x-item a { display: inline-flex; gap: 7px; margin-top: 14px; font-weight: 600; font-size: 14px; color: var(--brass); }
.fh .tag-xl { font-family: var(--serif); font-weight: 300; font-size: clamp(1.8rem,1.1rem + 2.4vw,3rem); letter-spacing: -.018em; line-height: 1.1; color: var(--ink2); }
.fh .tag-xl .alt { color: var(--brass); display: block; }
.fh .btnrow { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }
.fh .center .btnrow { justify-content: center; }
@media (max-width: 920px){ .fh .g-3,.fh .explain { grid-template-columns: 1fr 1fr; } .fh .g-2 { grid-template-columns: 1fr; } .fh .stats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .fh .g-3,.fh .explain,.fh .stats { grid-template-columns: 1fr; } }
/* =============================================================
* HOME 2026 — motion (reveals + chart draw-on), scoped to .home2026
* ============================================================= */
html.js .home2026 .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); }
html.js .home2026 .reveal.in { opacity: 1; transform: none; }
.home2026 .draw { }
html.js .home2026 .draw { stroke-dasharray: var(--len,1200); stroke-dashoffset: var(--len,1200); }
html.js .home2026 .draw.in { transition: stroke-dashoffset 1.6s cubic-bezier(.22,.61,.36,1); stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
html.js .home2026 .reveal { opacity: 1 !important; transform: none !important; }
html.js .home2026 .draw { stroke-dashoffset: 0 !important; }
}
/* FIX: neutralize the legacy .hero-art svg rule for the glass allocation ring */
.hero-art .hero-glass svg, .hero-glass .hg-body svg {
width: 168px !important; height: 168px !important; flex: none;
background: none !important; box-shadow: none !important; filter: none !important; border-radius: 0 !important;
}
.hero-glass { width: 100%; }
.hero-glass .hg-body { flex-wrap: nowrap; }
.hero-glass .hg-legend { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
@media (max-width: 460px){
.hero-art .hero-glass svg, .hero-glass .hg-body svg { width: 140px !important; height: 140px !important; }
}
/* =============================================================
* Header 2026 — slim concept nav (banner, More dropdown, EN|ES pill, Start free)
* ============================================================= */
.topbar { background: var(--ink); color: #AEB6C0; border-bottom: 1px solid var(--navy-line); font-size: 13px; position: relative; z-index: 60; }
.topbar .wrap { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 40px; padding-block: 7px; text-align: center; }
.topbar .topbar-msg { margin: 0; }
.topbar strong { color: #ECE7DC; font-weight: 600; }
.topbar a { color: var(--brass-bright); white-space: nowrap; }
.topbar .topbar-x { position: absolute; right: var(--s-5); top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--slate-soft); font-size: 18px; line-height: 1; cursor: pointer; padding: 6px; }
.topbar .topbar-x:hover { color: #ECE7DC; }
html[lang="es"] .topbar [lang="en"], html[lang="es"] .site-header [lang="en"] { display: none; }
html:not([lang="es"]) .topbar [lang="es"], html:not([lang="es"]) .site-header [lang="es"] { display: none; }
.site-nav--slim { display: flex; align-items: center; gap: 30px; flex-wrap: nowrap; }
.site-nav--slim .nav-primary { font-size: 14.5px; }
.site-nav--slim #lang-toggle { margin-left: auto; }
.nav-more { position: relative; }
.nav-more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; color: #AEB6C0; }
.nav-more > summary::-webkit-details-marker { display: none; }
.nav-more > summary:hover { color: #ECE7DC; }
.nav-more .nav-more-caret { font-size: 10px; transition: transform .2s; }
.nav-more[open] .nav-more-caret { transform: rotate(180deg); }
.nav-more-menu { position: absolute; top: calc(100% + 14px); right: 0; left: auto; min-width: 220px; background: var(--navy-800); border: 1px solid var(--navy-line); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 24px 56px -22px rgba(0,0,0,.6); z-index: 200; }
/* The panel is position:absolute, so don't rely on the UA's details hiding —
key open/close explicitly off the [open] attribute. */
.nav-more:not([open]) .nav-more-menu { display: none; }
.nav-more-menu a { padding: 9px 12px; border-radius: 5px; font-size: 14px; color: #AEB6C0; display: flex; align-items: center; gap: 8px; }
.nav-more-menu a:hover { background: rgba(236,231,220,.06); color: #ECE7DC; }
.nav-more-menu .tier-chip, .nav-more-menu .auth-chip { margin: 4px 0 0; }
.lang-pill { display: inline-flex; align-items: center; border: 1px solid rgba(236,231,220,.24); border-radius: 6px; overflow: hidden; padding: 0; cursor: pointer; background: transparent; }
.lang-pill .lp { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; padding: 6px 10px; color: #AEB6C0; transition: background .2s, color .2s; }
html[lang="en"] .lang-pill .lp-en, html[lang="es"] .lang-pill .lp-es { background: var(--brass); color: var(--navy); }
.btn-startfree { display: inline-flex; align-items: center; gap: 8px; background: var(--brass); color: #1a130a; font-weight: 600; font-size: 14px; padding: 9px 16px; border-radius: 6px; white-space: nowrap; transition: background .2s; }
.btn-startfree:hover { background: var(--brass-bright); color: #1a130a; }
/* Hamburger toggle — hidden on desktop, shown at the mobile breakpoint. */
.m-nav-burger { display: none; background: none; border: 0; padding: 0; cursor: pointer; color: #ECE7DC; }
@media (max-width: 900px) {
/* Show the hamburger; the inline nav becomes a slide-down panel. */
.m-nav-burger {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; margin-left: auto;
}
.m-nav-burger-bars, .m-nav-burger-bars::before, .m-nav-burger-bars::after {
content: ""; display: block; width: 22px; height: 2px; background: currentColor;
border-radius: 2px; transition: transform .25s ease, opacity .2s ease;
}
.m-nav-burger-bars { position: relative; }
.m-nav-burger-bars::before { position: absolute; left: 0; top: -7px; }
.m-nav-burger-bars::after { position: absolute; left: 0; top: 7px; }
/* open → X */
.site-header.m-nav-open .m-nav-burger-bars { background: transparent; }
.site-header.m-nav-open .m-nav-burger-bars::before { transform: translateY(7px) rotate(45deg); }
.site-header.m-nav-open .m-nav-burger-bars::after { transform: translateY(-7px) rotate(-45deg); }
/* The panel: full-width, on-brand navy, dropped under the header. */
.site-nav--slim {
position: absolute; top: 100%; left: 0; right: 0;
display: none; flex-direction: column; align-items: stretch; gap: 0;
background: var(--navy); border-top: 1px solid var(--navy-line);
box-shadow: 0 28px 60px -24px rgba(0,0,0,.7);
padding: 6px max(16px, calc(50vw - 590px)) 18px;
max-height: calc(100vh - 100%); overflow-y: auto; z-index: 200;
}
.site-header.m-nav-open .site-nav--slim { display: flex; }
/* All primary links visible in the panel, ~44px tap targets. */
.site-nav--slim .nav-primary { display: flex; }
.site-nav--slim .nav-primary,
.nav-more-menu a {
align-items: center; min-height: 44px; padding: 11px 6px; font-size: 16px;
color: #ECE7DC; border-radius: 0; border-bottom: 1px solid rgba(236,231,220,.08);
}
.nav-more-menu a:hover { background: rgba(236,231,220,.06); }
/* Unwrap the More dropdown into a flat inline list (no desktop popover). */
.nav-more { position: static; width: 100%; }
.nav-more > summary { display: none; }
.nav-more-menu {
position: static; display: flex !important; width: 100%; min-width: 0;
background: transparent; border: 0; border-radius: 0; box-shadow: none;
padding: 0; gap: 0; z-index: auto;
}
.nav-more-menu .tier-chip, .nav-more-menu .auth-chip { margin: 0; }
/* EN|ES pill + Start free sit at the foot of the panel. */
.site-nav--slim #lang-toggle { margin-left: 0; align-self: flex-start; margin-top: 14px; }
.site-nav--slim .lang-pill .lp { padding: 9px 14px; }
.site-nav--slim .btn-startfree { margin-top: 12px; min-height: 44px; padding: 12px 16px; justify-content: center; }
.topbar .wrap { padding-inline: 44px; }
}
/* =============================================================
* Family Office 2026 — 2-col header w/ glass J-curve, pillar cards
* ============================================================= */
.fo-head-grid { display: grid; grid-template-columns: 1.04fr .96fr; gap: clamp(32px,5vw,64px); align-items: center; text-align: left; }
.fo-head-grid .fo-head-text { text-align: left; }
.fo-head-art .hero-glass { max-width: none; margin-left: 0; width: 100%; }
.fo-head-art .hero-glass svg { width: 100% !important; height: auto !important; background: none !important; box-shadow: none !important; filter: none !important; border-radius: 0 !important; }
html[lang="es"] .fo-head [lang="en"] { display: none; }
html:not([lang="es"]) .fo-head [lang="es"] { display: none; }
@media (max-width: 900px) { .fo-head-grid { grid-template-columns: 1fr; } }
.fo-pillars { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.fo-pillars article { background: var(--paper); border: 1px solid var(--paper-line); border-radius: 8px; padding: 28px 26px; transition: transform .35s var(--ease,ease), box-shadow .35s, border-color .35s; }
.fo-pillars article:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: #d8d1c1; }
.fo-pillars article h3 { font-family: var(--font-serif); font-weight: 400; font-size: 1.22rem; color: var(--ink); }
.fo-pillars article p { margin-top: 10px; font-size: 14.5px; color: var(--ink-mute); line-height: 1.6; }
@media (max-width: 900px) { .fo-pillars { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .fo-pillars { grid-template-columns: 1fr; } }
/* FIX: remove the legacy 760px cap so the FO header goes full-bleed (2-col + J-curve) */
.fo-head.concept-head-band { max-width: none; }
/* =============================================================
* All-pages polish 2026 — auth treatment + header entrance
* ============================================================= */
.auth-page { min-height: 60vh; align-items: flex-start; padding-block: clamp(44px,7vw,92px); position: relative; isolation: isolate; }
.auth-page::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: radial-gradient(720px 380px at 50% -8%, rgba(176,141,79,.08), transparent 60%),
radial-gradient(620px 420px at 100% 110%, rgba(31,92,90,.07), transparent 62%); }
.auth-card { border-radius: 10px; border-top: 3px solid var(--brass); box-shadow: var(--shadow-lg); }
/* Gentle entrance for the dark editorial header (every page), motion-safe */
@media (prefers-reduced-motion: no-preference) {
.concept-head-band { animation: chbIn .7s cubic-bezier(.22,.61,.36,1) both; }
@keyframes chbIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.module-head:not(.concept-head-band) h1 { animation: chbIn .6s cubic-bezier(.22,.61,.36,1) both; }
}
/* =============================================================
* Dark header to match the /redesign concept (overrides light header)
* ============================================================= */
.site-header {
background: rgba(14, 27, 44, 0.90);
-webkit-backdrop-filter: saturate(150%) blur(12px);
backdrop-filter: saturate(150%) blur(12px);
border-bottom: 1px solid var(--navy-line);
}
.brand-wordmark { color: #F3EFE4; }
.site-nav a { color: #AEB6C0; }
.site-nav a:hover { color: #ECE7DC; background: rgba(236,231,220,.06); }
.site-nav a.active { color: #ECE7DC; }
.site-header a.btn-startfree, .site-header a.btn-startfree:hover { color: #1a130a; }
.site-nav .nav-primary.active { background: transparent; box-shadow: inset 0 -2px 0 var(--brass); border-radius: 0; }
.nav-more > summary { color: #AEB6C0; }
.nav-more > summary:hover { color: #ECE7DC; }
/* EN|ES pill — robust on dark */
.lang-pill { border-color: rgba(236,231,220,.26); background: transparent; }
.lang-pill .lp { color: #AEB6C0; }
.lang-pill #lang-toggle-label { display: none !important; }
html[lang="en"] .lang-pill .lp-en, html[lang="es"] .lang-pill .lp-es { background: var(--brass); color: #0E1B2C; }
/* dropdown chips legible on dark */
.nav-more-menu #auth-chip, .nav-more-menu #tier-chip { color: #AEB6C0 !important; background: transparent !important; border: 0 !important; }
.nav-more-menu #auth-chip:hover, .nav-more-menu #tier-chip:hover { color: #ECE7DC !important; background: rgba(236,231,220,.06) !important; }
/* Six-surfaces cards — concept parity (icon + serif title + tag) */
.fh .card .ico { color: var(--brass); margin-bottom: 18px; display: block; }
.fh .card .ico svg { width: 30px; height: 30px; stroke: currentColor; stroke-width: 1.5; fill: none; }
.fh .card .card-k { font-family: var(--serif); font-size: 1.3rem; font-weight: 400; letter-spacing: -.01em; color: var(--ink2); }
.fh .card p { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--slate); }
.fh .card .tag { margin-top: 18px; display: inline-block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--slate); border: 1px solid var(--pl); border-radius: 4px; padding: 4px 9px; }
/* FIX: the legacy .lang-toggle 36px square was clipping the EN|ES pill */
.lang-pill { width: auto !important; height: auto !important; justify-content: flex-start !important; }
/* Footer: solid dark with a crisp edge (remove the diffused gradient fade) */
.site-footer { background: var(--ink); margin-top: 0; border-top: 1px solid var(--navy-line); }
.site-footer::before { display: none; }
/* =============================================================
* Align home to concept: headline size + content width/margins
* ============================================================= */
/* hero headline -> concept .display size (was 52px) */
.home2026 .hero--split h1 { font-size: clamp(2.6rem, 1.4rem + 4.2vw, 4.5rem); font-weight: 300; line-height: 1.04; letter-spacing: -0.018em; }
.home2026 .hero--split h1 em { font-weight: 300; }
/* .fh sections: single inset, max-width 1240 + 5vw gutter (matches concept 1096@1440) */
.fh .wrap { max-width: 1240px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 120px); }
/* full-bleed dark bands: content edge at ~172px @1440 to align with .fh + concept */
.hero--split, .concept-head-band, .home-corridor {
padding-left: max(clamp(20px, 5vw, 120px), calc(50vw - 548px));
padding-right: max(clamp(20px, 5vw, 120px), calc(50vw - 548px));
}
.fh .measure { max-width: 62ch; }
/* Corridor city-photo strip (concept parity) */
.home-corridor .citystrip { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; margin-top: 26px; }
.home-corridor .citystrip figure { position: relative; border-radius: 5px; overflow: hidden; aspect-ratio: 3/4; border: 1px solid var(--navy-line); margin: 0; }
.home-corridor .citystrip img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35) brightness(.72) contrast(1.04); display: block; transition: filter .5s, transform .8s; }
.home-corridor .citystrip figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,27,44,.1), rgba(14,27,44,.72)); }
.home-corridor .citystrip figure:hover img { filter: grayscale(0) brightness(.85); transform: scale(1.04); }
.home-corridor .citystrip figcaption { position: absolute; left: 8px; bottom: 6px; z-index: 2; font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: #ECE7DC; }
/* =============================================================
* Mobile overflow containment (iPhone 13 / 390px audit)
* Content (not element boxes) overflowed on 7 content routes:
* long prose/tokens not wrapping + non-shrinking flex children.
* Fixes are width-agnostic — overflow-wrap only breaks when a token
* would otherwise overflow — with a final overflow-x:clip safety net.
* clip (not hidden) is deliberate: it keeps the sticky header working.
* ============================================================= */
/* 1. Prose + headings wrap instead of pushing the page wider. */
.wrap p, .wrap h1, .wrap h2, .wrap h3, .wrap h4, .wrap li, .wrap dt, .wrap dd,
.legal-body, .legal-body h2, .legal-body h3, .legal-body p, .legal-body li,
.gloss-item, .gloss-item h3, .gloss-item p,
.news-item, .news-item-body h3, .news-item-body p, .news-source,
.pricing-tier, .pricing-tier h2, .pricing-tier li,
.post-card, .post-card h3, .post-card p {
overflow-wrap: anywhere;
word-break: break-word;
}
/* 2. Non-shrinking flex children: let them shrink + wrap. */
.news-item-meta { flex-wrap: wrap; }
.news-item-meta > * { min-width: 0; }
.blog-controls { flex-wrap: wrap; }
.cookie-cat-row { flex-wrap: wrap; }
.cookie-cat-row > * { min-width: 0; }
@media (max-width: 700px) {
/* .blog-search carries min-width:280px — go full-width and shrink. */
.blog-search { min-width: 0; flex-basis: 100%; max-width: none; }
}
/* 4. Cookie consent modal: cap card (and its padding) to the viewport
* so a 540px card can't force horizontal scroll on a 390px screen. */
.cookie-modal { padding: 12px; }
.cookie-modal-card { width: min(420px, calc(100vw - 24px)); max-width: 100%; }
.cookie-modal-card h2, .cookie-modal-card p,
.cookie-cat-label, .cookie-cat-help { overflow-wrap: anywhere; }
/* 3. Safety net after the root fixes. overflow-x:clip preserves
* position:sticky (header) and doesn't capture fixed overlays. */
html, body { overflow-x: clip; }