/* ==========================================================================
Fractal — Design System
Inspired by vasco.app. Applied to a financial advisory firm for tech.
========================================================================== */
/* ---------- Self-hosted fonts (Inter + Inter Tight) ----------------------- */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/Inter-Regular.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/fonts/Inter-Medium.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/assets/fonts/Inter-SemiBold.woff2") format("woff2");
}
@font-face {
font-family: "Inter Tight";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/fonts/InterTight-Medium.woff2") format("woff2");
}
@font-face {
font-family: "Inter Tight";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/assets/fonts/InterTight-SemiBold.woff2") format("woff2");
}
/* Serif italique de la charte v18 (ligne dominante des titres).
Self-hostee, pas de Google Fonts (Loi 25). Meme fichier que landing.css. */
@font-face {
font-family: "Instrument Serif";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/InstrumentSerif-Italic.woff2") format("woff2");
}
/* ---------- Design tokens ------------------------------------------------- */
:root {
/* Palette */
--color-navy: #0A1628;
--color-navy-soft: #0F172A;
--color-white: #FFFFFF;
--color-cream: #F9F6F0;
--color-cream-deep: #F3EEE4;
--color-text: #1F2937;
--color-text-muted: #6B7280;
--color-text-faint: #9CA3AF;
--color-border: #E5E7EB;
--color-border-soft: #EEEAE1;
--accent-blue: #2F6FEB;
--accent-violet: #8B5CF6;
--accent-green: #10B981;
--accent-amber: #F59E0B;
--accent-red: #DC2626;
/* Parcours accents (per brief) */
--founders: var(--accent-violet);
--funds: var(--accent-green);
/* Typography */
--font-sans: "Inter", "Söhne", "GT America", "Neue Haas Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--font-tight: "Inter Tight", "Inter", "Söhne", sans-serif;
/* Radii */
--radius-sm: 8px;
--radius: 12px;
--radius-lg: 16px;
--radius-full: 999px;
/* Shadows */
--shadow-card: 0 1px 2px rgba(10, 22, 40, 0.04), 0 8px 24px rgba(10, 22, 40, 0.05);
--shadow-hover: 0 2px 4px rgba(10, 22, 40, 0.05), 0 20px 40px rgba(10, 22, 40, 0.08);
--shadow-lift: 0 20px 60px rgba(10, 22, 40, 0.12);
/* Layout */
--container: 1400px;
--gutter: clamp(1.25rem, 4vw, 5rem);
--section-y: clamp(3.25rem, 6vw, 5.75rem);
/* Motion */
--ease: cubic-bezier(0.2, 0.6, 0.2, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-soft: cubic-bezier(0.25, 0.8, 0.35, 1);
}
/* ---------- Reset --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scroll-behavior: smooth;
scroll-padding-top: 110px; /* offset for sticky nav on anchor jumps */
overflow-x: clip;
}
/* Anchor targets clear the sticky nav + give visual breathing room. */
:target,
.resource-card[id],
.price-card[id],
[id].anchor-offset {
scroll-margin-top: 110px;
}
body { overflow-x: clip; }
body {
margin: 0;
font-family: var(--font-sans);
font-size: 17px;
line-height: 1.55;
color: var(--color-text);
background: var(--color-white);
font-feature-settings: "ss01", "cv11";
}
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
/* ---------- Base typography ---------------------------------------------- */
.h1, .h2, .h3 {
font-family: var(--font-tight);
color: var(--color-navy);
letter-spacing: -0.025em;
font-weight: 560;
line-height: 1.02;
}
.h1 {
font-size: clamp(2rem, 6.8vw, 6.25rem);
}
.h2 {
font-size: clamp(2rem, 5vw, 4.25rem);
line-height: 1.05;
letter-spacing: -0.02em;
}
.h3 {
font-size: clamp(1.375rem, 2.2vw, 1.875rem);
line-height: 1.15;
letter-spacing: -0.015em;
font-weight: 580;
}
.sub-copy {
font-size: clamp(1.0625rem, 1.3vw, 1.3125rem);
line-height: 1.5;
color: var(--color-text-muted);
max-width: 60ch;
}
.sub-copy strong { color: var(--color-navy); font-weight: 500; }
.eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.eyebrow-bracket { color: var(--color-text-faint); font-variant-numeric: tabular-nums; }
.label-mono {
font-family: var(--font-sans);
font-size: 0.75rem;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 500;
color: var(--color-text-muted);
}
/* ---------- Layout helpers ----------------------------------------------- */
.container {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding-inline: var(--gutter);
}
.section {
padding-block: var(--section-y);
position: relative;
overflow: hidden;
}
.bg-white { background: var(--color-white); }
.bg-cream { background: var(--color-cream); }
.bg-navy { background: var(--color-navy); color: var(--color-white); }
.bg-dot {
background-image: radial-gradient(circle, rgba(10, 22, 40, 0.08) 1px, transparent 1px);
background-size: 24px 24px;
}
.bg-cream.bg-dot {
background-image: radial-gradient(circle, rgba(10, 22, 40, 0.07) 1px, transparent 1px);
background-size: 28px 28px;
}
/* ---------- Buttons ------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.875rem 1.25rem;
border-radius: var(--radius-sm);
font-size: 0.9375rem;
font-weight: 500;
letter-spacing: -0.005em;
transition: transform 160ms var(--ease), background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
background: var(--color-navy);
color: var(--color-white);
}
.btn-primary:hover { background: #152236; }
.btn-secondary {
border: 1px solid var(--color-navy);
color: var(--color-navy);
}
.btn-secondary:hover { background: var(--color-navy); color: var(--color-white); }
.btn-ghost {
color: var(--color-navy);
padding: 0.5rem 0;
border-radius: 0;
}
.btn-ghost:hover { color: var(--accent-blue); transform: none; }
.btn-ghost::after {
content: " →";
transition: transform 160ms var(--ease);
display: inline-block;
}
.btn-ghost:hover::after { transform: translateX(2px); }
.btn .arrow { transition: transform 160ms var(--ease); }
.btn:hover .arrow { transform: translateX(2px); }
/* ---------- Navigation ---------------------------------------------------- */
.nav {
position: sticky;
top: 0;
z-index: 40;
background: rgba(255, 255, 255, 0.82);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid transparent;
transition: border-color 200ms var(--ease);
}
.nav.is-scrolled { border-bottom-color: var(--color-border); }
.nav-inner {
max-width: var(--container);
margin: 0 auto;
padding: 0.875rem var(--gutter);
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 2rem;
}
.nav-logo {
display: flex;
align-items: center;
gap: 0.625rem;
font-weight: 580;
letter-spacing: -0.02em;
color: var(--color-navy);
font-size: 1.0625rem;
}
.nav-logo img { height: 26px; width: auto; }
.nav-logo-img {
height: 30px !important;
width: auto;
display: block;
object-fit: contain;
}
@media (max-width: 640px) {
.nav-logo-img { height: 26px !important; }
}
.nav-menu {
display: flex;
gap: 2rem;
justify-self: center;
}
.nav-menu > a {
font-size: 0.9375rem;
color: var(--color-text);
transition: color 160ms var(--ease);
position: relative;
}
.nav-menu > a:hover { color: var(--color-navy); }
.nav-menu > a.is-active { color: var(--color-navy); font-weight: 500; }
.nav-menu > a.is-active::after { transform: scaleX(1); }
.nav-menu > a::after {
content: "";
position: absolute;
inset: auto 0 -6px 0;
height: 2px;
background: var(--color-navy);
transform: scaleX(0);
transform-origin: left;
transition: transform 200ms var(--ease);
}
.nav-menu > a:hover::after { transform: scaleX(1); }
.nav-drawer-actions { display: none; }
.nav-backdrop { display: none; }
.nav-actions {
display: flex;
align-items: center;
gap: 0.75rem;
}
.lang-toggle {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--color-text-muted);
padding: 0.25rem 0.5rem;
}
.lang-toggle button {
padding: 0.25rem 0.4rem;
border-radius: var(--radius-sm);
color: var(--color-text-muted);
transition: color 160ms var(--ease), background 160ms var(--ease);
}
.lang-toggle .lang-link {
display: inline-block;
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.08em;
color: var(--color-text-muted);
border-radius: 4px;
transition: color 180ms var(--ease);
}
.lang-toggle .lang-link:hover { color: var(--color-navy); }
.lang-toggle button.active {
color: var(--color-navy);
background: rgba(10, 22, 40, 0.06);
}
.lang-divider { opacity: 0.4; }
.nav-burger {
display: none;
width: 38px;
height: 38px;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
color: var(--color-navy);
}
.nav-burger span {
position: relative;
width: 20px;
height: 1.5px;
background: transparent;
display: block;
}
.nav-burger span::before,
.nav-burger span::after {
content: "";
position: absolute;
inset: 0;
width: 20px;
height: 1.5px;
background: currentColor;
transform: translateY(-5px);
}
.nav-burger span::after { transform: translateY(5px); }
/* ---------- Vasco dividers ----------------------------------------------- */
.v-divider {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
width: 100%;
color: var(--color-text-faint);
font-size: 0.6875rem;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 500;
margin-bottom: clamp(2rem, 4vw, 3rem);
font-variant-numeric: tabular-nums;
}
.v-divider::before, .v-divider::after {
content: "";
flex: 1;
height: 1px;
background: var(--color-border);
}
.v-divider-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--color-text-faint);
flex: 0 0 auto;
}
.v-divider .v-label {
display: inline-flex;
align-items: center;
gap: 0.4rem;
white-space: nowrap;
}
.v-divider .v-num {
color: var(--color-navy);
font-weight: 600;
font-family: var(--font-tight);
letter-spacing: 0.02em;
font-size: 0.75rem;
text-transform: none;
}
.v-divider .v-num::before { content: "["; color: var(--color-text-faint); font-weight: 400; }
.v-divider .v-num::after { content: "]"; color: var(--color-text-faint); font-weight: 400; }
/* Accent italic — gradient violet→green to literalize "both sides of the table" */
.accent-italic {
font-style: italic;
font-weight: 500;
/* Reserve space for the italic slant so the last glyph (e.g. the 's' in
"sides") is not clipped when the phrase wraps to a new line. */
padding-inline-end: 0.12em;
background: linear-gradient(92deg, var(--accent-violet) 0%, var(--accent-violet) 22%, #6B6BE8 50%, var(--accent-green) 78%, var(--accent-green) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
letter-spacing: -0.018em;
}
/* ---------- Hero ---------------------------------------------------------- */
.hero {
padding-block: clamp(3.5rem, 8vw, 7rem) clamp(5rem, 10vw, 9rem);
position: relative;
background: var(--color-white);
overflow: hidden;
}
.hero::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(10, 22, 40, 0.05) 1px, transparent 1px);
background-size: 26px 26px;
mask-image: radial-gradient(ellipse at 72% 50%, black 0%, black 32%, transparent 70%);
-webkit-mask-image: radial-gradient(ellipse at 72% 50%, black 0%, black 32%, transparent 70%);
pointer-events: none;
}
.hero-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(2.5rem, 6.5vw, 7.5rem);
align-items: center;
position: relative;
z-index: 1;
}
.hero-copy .h1 { max-width: 15ch; padding-inline-end: 0.15em; }
.hero-copy .sub-copy { max-width: 34ch; }
.hero-eyebrow {
margin-bottom: 1.5rem;
}
.hero h1 {
margin-bottom: 1.75rem;
}
.hero .sub-copy {
margin-bottom: 2.5rem;
font-size: clamp(1.0625rem, 1.35vw, 1.375rem);
color: var(--color-text);
}
.hero .sub-copy br { display: block; content: ""; margin-bottom: 0.15em; }
.hero-ctas {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.hero-ctas .btn-primary {
padding: 1rem 1.25rem;
}
/* Hero signature — small circular GB face + name line, under CTAs */
.hero-signature {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 2.25rem;
padding-top: 1.5rem;
border-top: 1px solid var(--color-border);
max-width: 420px;
}
.hero-signature .sig-avatar {
width: 42px;
height: 42px;
border-radius: 50%;
background: linear-gradient(140deg, #E8E1D4, #C9BFA8);
display: grid;
place-items: center;
color: var(--color-navy);
font-family: var(--font-tight);
font-weight: 580;
font-size: 0.8125rem;
letter-spacing: -0.01em;
flex: 0 0 auto;
position: relative;
overflow: hidden;
}
.hero-signature .sig-avatar::after {
content: "";
position: absolute; inset: 0;
background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.4), transparent 55%);
}
.hero-signature .sig-copy {
font-size: 0.8125rem;
line-height: 1.35;
color: var(--color-text-muted);
}
.hero-signature .sig-copy strong {
display: block;
color: var(--color-navy);
font-weight: 500;
font-size: 0.875rem;
letter-spacing: -0.005em;
}
/* Hero stacked mockups */
.hero-visual {
position: relative;
aspect-ratio: 1 / 1.05;
min-height: 480px;
}
.mock {
position: absolute;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
font-size: 0.8125rem;
color: var(--color-text);
overflow: hidden;
}
/* Persona accent: a 3px colored strip at the top of each mock, grouping
the four cards into two sides of the table — funds (green) and
founders (violet). Reads as a subtle "tab" on the card. */
.mock::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--mock-accent, transparent);
z-index: 2;
pointer-events: none;
}
.mock-report,
.mock-qa { --mock-accent: var(--accent-green); } /* Funds side */
.mock-cockpit,
.mock-captable { --mock-accent: var(--accent-violet); } /* Founders side */
/* Mock 1: FDD report — first step of the cascade (top-left) */
.mock-report {
top: 0;
left: 0;
width: 62%;
padding: 1.25rem 1.25rem 1.5rem;
transform: rotate(-1.4deg);
background: #FCFBF8;
z-index: 1;
}
.mock-report .page-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--color-border);
padding-bottom: 0.75rem;
margin-bottom: 0.75rem;
font-size: 0.6875rem;
color: var(--color-text-muted);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.mock-report h4 {
font-size: 0.9375rem;
font-weight: 580;
color: var(--color-navy);
margin-bottom: 0.5rem;
letter-spacing: -0.01em;
}
.mock-report p {
font-size: 0.6875rem;
line-height: 1.6;
color: var(--color-text-muted);
margin-bottom: 0.625rem;
}
.mock-report .line {
height: 6px;
background: var(--color-border);
border-radius: 2px;
margin-bottom: 4px;
}
.mock-report .line.short { width: 70%; }
.mock-report .line.xshort { width: 45%; }
.mock-table {
margin-top: 0.75rem;
border-top: 1px solid var(--color-border);
padding-top: 0.625rem;
}
.mock-table .row {
display: grid;
grid-template-columns: 1.3fr 0.8fr 0.8fr;
padding: 0.35rem 0;
font-size: 0.7rem;
color: var(--color-text);
border-bottom: 1px solid var(--color-border-soft);
}
.mock-table .row.header {
color: var(--color-text-muted);
font-size: 0.625rem;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 500;
border-bottom: 1px solid var(--color-border);
}
.mock-table .row .num { text-align: right; font-variant-numeric: tabular-nums; }
.mock-table .row.total {
border-bottom: 0;
border-top: 1px solid var(--color-navy);
margin-top: 0.15rem;
padding-top: 0.45rem;
font-weight: 600;
color: var(--color-navy);
}
.mock-finding {
margin-top: 0.75rem;
padding: 0.5rem 0.625rem;
background: rgba(47, 111, 235, 0.06);
border-left: 2px solid var(--accent-blue);
border-radius: 4px;
font-size: 0.6875rem;
color: var(--color-navy);
line-height: 1.4;
}
.mock-finding strong { color: var(--accent-blue); font-weight: 600; }
/* Mock 2: Cockpit (KPI card) — second step of the cascade */
.mock-cockpit {
top: 18%;
left: 22%;
right: auto;
width: 60%;
padding: 1rem 1.125rem 1.125rem;
transform: rotate(-0.6deg);
background: var(--color-white);
z-index: 2;
}
.mock-cockpit .cockpit-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.625rem;
}
.mock-cockpit .cockpit-header h5 {
font-size: 0.8125rem;
font-weight: 580;
color: var(--color-navy);
letter-spacing: -0.01em;
}
.mock-cockpit .dot-live {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent-green);
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}
.kpi-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
}
.kpi {
padding: 0.5rem 0.625rem;
border: 1px solid var(--color-border);
border-radius: 8px;
background: #FCFBF8;
}
.kpi .k-label {
font-size: 0.625rem;
color: var(--color-text-muted);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 0.15rem;
}
.kpi .k-value {
font-size: 0.9375rem;
font-weight: 600;
color: var(--color-navy);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.kpi .k-delta {
font-size: 0.625rem;
font-weight: 500;
font-variant-numeric: tabular-nums;
}
.kpi .k-delta.up { color: var(--accent-green); }
.kpi .k-delta.down { color: #DC2626; }
.kpi svg.sparkline { width: 100%; height: 18px; margin-top: 0.25rem; }
/* Mock 3: Cap table fragment — third step of the cascade */
.mock-captable {
top: 40%;
left: 8%;
width: 54%;
padding: 0.875rem 1rem;
transform: rotate(0.6deg);
background: #FCFBF8;
z-index: 3;
}
.mock-captable h5 {
font-size: 0.75rem;
font-weight: 580;
color: var(--color-navy);
margin-bottom: 0.5rem;
letter-spacing: -0.01em;
}
.mock-captable .cap-row {
display: grid;
grid-template-columns: 1.2fr 0.7fr 0.7fr;
padding: 0.3rem 0;
font-size: 0.6875rem;
border-bottom: 1px solid var(--color-border-soft);
font-variant-numeric: tabular-nums;
}
.mock-captable .cap-row.header {
color: var(--color-text-muted);
font-size: 0.5625rem;
letter-spacing: 0.1em;
text-transform: uppercase;
border-bottom: 1px solid var(--color-border);
}
.mock-captable .cap-row .num { text-align: right; }
.mock-captable .cap-row.highlight {
background: rgba(139, 92, 246, 0.08);
margin-inline: -0.4rem;
padding-inline: 0.4rem;
border-bottom: 0;
border-radius: 4px;
color: var(--color-navy);
font-weight: 600;
}
/* Mock 4: Q&A card — final step of the cascade (bottom-right) */
.mock-qa {
top: 58%;
left: 38%;
right: auto;
bottom: auto;
width: 58%;
padding: 0.875rem 1rem 1rem;
transform: rotate(1.4deg);
background: var(--color-white);
z-index: 4;
}
.mock-qa .qa-question {
font-size: 0.75rem;
font-weight: 500;
color: var(--color-navy);
line-height: 1.4;
margin-bottom: 0.4rem;
letter-spacing: -0.005em;
}
.mock-qa .qa-arrow {
font-size: 0.8125rem;
color: var(--color-text-faint);
margin-bottom: 0.35rem;
}
.mock-qa .qa-answer {
font-size: 0.8125rem;
font-weight: 600;
color: var(--accent-violet);
line-height: 1.35;
letter-spacing: -0.01em;
}
.mock-qa .qa-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 0.6rem;
padding-top: 0.4rem;
border-top: 1px solid var(--color-border);
font-size: 0.5625rem;
color: var(--color-text-muted);
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* ---------- Persona split (big 2-second clarity block) ------------------- */
.persona-split {
position: relative;
}
.persona-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(1rem, 2.4vw, 1.75rem);
margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.persona-card {
position: relative;
display: flex;
flex-direction: column;
min-height: clamp(340px, 38vw, 460px);
padding: clamp(1.75rem, 3vw, 2.5rem);
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: clamp(14px, 1.6vw, 20px);
transition: transform 400ms var(--ease-out), box-shadow 400ms var(--ease-out), border-color 400ms var(--ease-out);
overflow: hidden;
isolation: isolate;
}
.persona-card::before {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 4px;
background: currentColor;
opacity: 0.85;
transition: height 400ms var(--ease-out);
}
.persona-card::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 100% 0%, currentColor, transparent 55%);
opacity: 0.05;
z-index: -1;
transition: opacity 400ms var(--ease-out);
pointer-events: none;
}
.persona-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-hover);
border-color: currentColor;
}
.persona-card:hover::before { height: 6px; }
.persona-card:hover::after { opacity: 0.09; }
.persona-card.for-founders { color: var(--founders); }
.persona-card.for-funds { color: var(--funds); }
.persona-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.5rem;
}
.persona-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.6875rem;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 600;
color: currentColor;
font-family: var(--font-tight);
}
.persona-badge .badge-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}
.persona-num {
font-family: var(--font-tight);
font-size: 0.75rem;
color: var(--color-text-faint);
font-weight: 500;
letter-spacing: 0.02em;
}
.persona-num::before { content: "["; color: var(--color-text-faint); }
.persona-num::after { content: "]"; color: var(--color-text-faint); }
/* Persona icon chip — replaces the 01/02 corner marker */
.persona-icon {
display: inline-grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
color: currentColor;
background: color-mix(in srgb, currentColor 8%, var(--color-white));
border: 1px solid color-mix(in srgb, currentColor 18%, var(--color-border));
transition:
transform 420ms var(--ease-out),
background 220ms var(--ease),
border-color 220ms var(--ease),
box-shadow 280ms var(--ease);
flex: 0 0 auto;
}
.persona-icon svg {
width: 20px;
height: 20px;
display: block;
transition: transform 380ms var(--ease-out);
}
.persona-card:hover .persona-icon {
background: color-mix(in srgb, currentColor 14%, var(--color-white));
border-color: color-mix(in srgb, currentColor 40%, var(--color-border));
box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 10%, transparent);
}
.persona-card.for-founders:hover .persona-icon svg {
transform: translate(1px, -1px);
}
.persona-card.for-funds:hover .persona-icon svg {
transform: rotate(6deg);
}
@media (max-width: 640px) {
.persona-icon { width: 34px; height: 34px; }
.persona-icon svg { width: 17px; height: 17px; }
}
.persona-hook {
font-family: var(--font-tight);
font-size: clamp(1.75rem, 3.6vw, 3.125rem);
font-weight: 560;
line-height: 1.02;
letter-spacing: -0.025em;
color: var(--color-navy);
margin-bottom: 1rem;
}
.persona-hook em {
font-style: normal;
color: currentColor;
}
.persona-sub {
font-size: 1rem;
line-height: 1.55;
color: var(--color-text-muted);
max-width: 34ch;
margin-bottom: 1.5rem;
}
/* Mini UI mockup inside persona cards */
.persona-visual {
margin-top: auto;
margin-bottom: 1.25rem;
padding: 0.875rem 1rem;
background: var(--color-cream);
border: 1px solid var(--color-border);
border-radius: 10px;
font-size: 0.7rem;
line-height: 1.4;
color: var(--color-text);
position: relative;
overflow: hidden;
}
.persona-visual::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 2px;
background: currentColor;
opacity: 0.6;
}
.persona-visual .pv-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
font-size: 0.625rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--color-text-muted);
font-weight: 500;
}
.persona-visual .pv-header .pv-dot {
width: 6px; height: 6px; border-radius: 50%;
background: currentColor;
box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}
/* Founders visual — tiny cockpit */
.persona-visual.pv-cockpit .pv-kpis {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.4rem;
}
.persona-visual.pv-cockpit .pv-kpi {
padding: 0.375rem 0.45rem;
background: var(--color-white);
border-radius: 6px;
border: 1px solid var(--color-border);
}
.persona-visual.pv-cockpit .pv-kpi .k {
font-size: 0.5625rem;
color: var(--color-text-muted);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 0.1rem;
}
.persona-visual.pv-cockpit .pv-kpi .v {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-navy);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.persona-visual.pv-cockpit .pv-kpi .d {
font-size: 0.5625rem;
color: currentColor;
font-variant-numeric: tabular-nums;
font-weight: 500;
}
/* Funds visual — tiny FDD checklist */
.persona-visual.pv-checklist .pv-list {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.persona-visual.pv-checklist .pv-item {
display: grid;
grid-template-columns: 14px 1fr auto;
gap: 0.5rem;
align-items: center;
font-size: 0.6875rem;
color: var(--color-navy);
}
.persona-visual.pv-checklist .pv-check {
width: 14px;
height: 14px;
border-radius: 50%;
background: currentColor;
color: currentColor;
display: grid;
place-items: center;
font-size: 0.5rem;
color: var(--color-white);
}
.persona-visual.pv-checklist .pv-check svg { width: 8px; height: 8px; stroke: var(--color-white); }
.persona-visual.pv-checklist .pv-item.pending .pv-check {
background: transparent;
border: 1px dashed currentColor;
}
.persona-visual.pv-checklist .pv-item.pending {
color: var(--color-text-muted);
}
.persona-visual.pv-checklist .pv-item .pv-status {
font-size: 0.5625rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: currentColor;
font-weight: 500;
}
.persona-visual.pv-checklist .pv-item.pending .pv-status { color: var(--color-text-faint); }
.persona-bullets {
display: flex;
flex-direction: column;
gap: 0.55rem;
margin-bottom: 1.25rem;
}
.persona-bullets li {
display: flex;
gap: 0.6rem;
align-items: baseline;
font-size: 0.9375rem;
color: var(--color-text);
}
.persona-bullets li::before {
content: "";
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
flex: 0 0 auto;
transform: translateY(-2px);
}
.persona-cta {
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-tight);
font-size: 1rem;
font-weight: 500;
color: var(--color-navy);
padding-top: 1.25rem;
border-top: 1px solid var(--color-border);
align-self: stretch;
justify-content: space-between;
transition: color 200ms var(--ease-out);
}
.persona-card:hover .persona-cta { color: currentColor; }
.persona-cta .persona-arrow {
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid currentColor;
display: grid;
place-items: center;
color: currentColor;
transition: transform 300ms var(--ease-out), background 300ms var(--ease-out), color 300ms var(--ease-out);
}
.persona-card:hover .persona-cta .persona-arrow {
transform: translateX(3px);
background: currentColor;
color: var(--color-white);
}
/* ---------- Dual entry (legacy, not used on home) ------------------------ */
.dual-entry .dual-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 5vw, 5rem);
position: relative;
}
.dual-entry .dual-grid::before {
content: "";
position: absolute;
left: 50%;
top: 1rem;
bottom: 1rem;
width: 1px;
background: var(--color-border);
transform: translateX(-50%);
}
.dual-col .eyebrow { margin-bottom: 1.5rem; }
.dual-col .h2 { margin-bottom: 1rem; }
.dual-col .intro {
color: var(--color-text-muted);
margin-bottom: 2rem;
font-size: 1.0625rem;
line-height: 1.55;
max-width: 34ch;
}
.dual-col ul {
display: flex;
flex-direction: column;
gap: 0.9rem;
margin-bottom: 2.25rem;
}
.dual-col li {
display: flex;
gap: 0.75rem;
align-items: flex-start;
font-size: 1rem;
color: var(--color-text);
line-height: 1.5;
}
.dot {
width: 6px;
height: 6px;
border-radius: 50%;
margin-top: 0.52rem;
flex: 0 0 auto;
background: var(--color-text-faint);
}
.dual-col.for-founders .dot { background: var(--founders); }
.dual-col.for-funds .dot { background: var(--funds); }
.dual-col.for-founders .accent-line { color: var(--founders); }
.dual-col.for-funds .accent-line { color: var(--funds); }
.dual-col .accent-line {
font-size: 0.9375rem;
color: var(--color-text-muted);
margin-bottom: 1.25rem;
}
.dual-col .btn {
align-self: flex-start;
}
/* ---------- Trusted by logos --------------------------------------------- */
.trusted {
padding-block: clamp(3rem, 6vw, 5rem);
text-align: center;
}
.trusted .eyebrow {
display: block;
margin-bottom: 2rem;
}
.logo-strip {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 1rem;
align-items: center;
max-width: 1100px;
margin: 0 auto;
}
.logo-slot {
height: 64px;
display: grid;
place-items: center;
color: var(--color-text-faint);
font-size: 0.9375rem;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
transition: opacity 220ms var(--ease), filter 220ms var(--ease);
padding: 0 0.5rem;
}
.logo-slot img {
max-height: 44px;
max-width: 100%;
width: auto;
height: auto;
object-fit: contain;
display: block;
opacity: 0.72;
filter: grayscale(1) contrast(0.95);
transition: opacity 220ms var(--ease), filter 220ms var(--ease);
}
.logo-strip:hover .logo-slot img { opacity: 0.55; }
.logo-slot:hover img {
opacity: 1;
filter: grayscale(0) contrast(1);
}
/* Placeholder fallback — kept for pages that still show text slots */
.logo-slot:not(:has(img)) {
opacity: 0.55;
filter: grayscale(1);
border: 1px dashed var(--color-border);
border-radius: var(--radius-sm);
height: 48px;
}
/* ---------- Method (3 principles grid) ----------------------------------- */
.method .method-head {
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: 2rem;
margin-bottom: 3.5rem;
}
.method-head .h2 { max-width: 16ch; }
.method-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(1.5rem, 3vw, 3rem);
position: relative;
}
.principle {
position: relative;
padding-top: 1.75rem;
border-top: 1px solid var(--color-border);
}
.principle-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.5rem;
}
.principle-num {
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.14em;
color: var(--color-text-faint);
font-variant-numeric: tabular-nums;
}
.principle-icon {
width: 36px;
height: 36px;
border-radius: 8px;
display: grid;
place-items: center;
background: var(--color-cream);
border: 1px solid var(--color-border);
color: var(--color-navy);
transition: transform 300ms var(--ease-out), background 300ms var(--ease-out);
}
.principle:hover .principle-icon {
transform: rotate(-6deg);
background: var(--color-white);
}
/* Principle mini-mockup — bottom chip that illustrates the principle */
.principle-chip {
margin-top: 1.25rem;
padding: 0.625rem 0.75rem;
border: 1px solid var(--color-border);
border-radius: 8px;
background: var(--color-cream);
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.6875rem;
color: var(--color-text);
font-variant-numeric: tabular-nums;
line-height: 1.3;
}
.principle-chip .ch-dot {
width: 6px; height: 6px; border-radius: 50%;
flex: 0 0 auto;
}
.principle-chip.ch-ok .ch-dot { background: var(--accent-green); box-shadow: 0 0 0 3px rgba(16,185,129,0.15); }
.principle-chip.ch-no .ch-dot { background: #DC2626; box-shadow: 0 0 0 3px rgba(220,38,38,0.12); }
.principle-chip strong { color: var(--color-navy); font-weight: 500; }
.principle-chip .ch-strike { text-decoration: line-through; color: var(--color-text-faint); }
.principle-chip .ch-row {
display: flex;
gap: 0.35rem;
align-items: center;
}
.principle-chip.ch-stack {
flex-direction: column;
align-items: stretch;
gap: 0.3rem;
}
/* Metric badges for tech-native chip */
.metric-pills {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
margin-top: 0.75rem;
}
.metric-pill {
display: inline-flex;
padding: 0.2rem 0.45rem;
border-radius: var(--radius-full);
font-size: 0.625rem;
font-weight: 500;
letter-spacing: 0.06em;
font-variant-numeric: tabular-nums;
background: var(--color-cream);
border: 1px solid var(--color-border);
color: var(--color-navy);
}
.metric-pill.mp-green { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.25); color: #047857; }
.metric-pill.mp-violet { background: rgba(139, 92, 246, 0.08); border-color: rgba(139, 92, 246, 0.25); color: #6D28D9; }
.metric-pill.mp-blue { background: rgba(47, 111, 235, 0.08); border-color: rgba(47, 111, 235, 0.25); color: var(--accent-blue); }
.metric-pill.mp-amber { background: rgba(217, 119, 6, 0.08); border-color: rgba(217, 119, 6, 0.25); color: #B45309; }
.metric-pill.mp-slate { background: rgba(71, 85, 105, 0.08); border-color: rgba(71, 85, 105, 0.25); color: #475569; }
/* Grouped pills: a tiny caption precedes each chip group so SaaS and deep
tech metrics read as two distinct vocabularies rather than one salad. */
.metric-pills--grouped {
display: grid;
gap: 0.625rem;
margin-top: 0.875rem;
}
.metric-group {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem 0.35rem;
}
.metric-group-label {
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-right: 0.4rem;
white-space: nowrap;
position: relative;
padding-right: 0.6rem;
}
.metric-group-label::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 4px;
height: 1px;
background: var(--color-border);
}
.principle h3 {
font-family: var(--font-tight);
font-size: 1.6rem;
font-weight: 580;
color: var(--color-navy);
letter-spacing: -0.02em;
margin-bottom: 1rem;
}
.principle p {
font-size: 0.9375rem;
line-height: 1.6;
color: var(--color-text-muted);
max-width: 38ch;
}
.method-foot {
margin-top: 3rem;
display: flex;
justify-content: flex-end;
}
/* ---------- Statement tentpole ------------------------------------------- */
.tentpole {
text-align: center;
position: relative;
}
.tentpole .h1 {
max-width: 22ch;
margin: 0 auto 1.5rem;
line-height: 1.04;
}
.tentpole .h1 em {
font-style: normal;
background: linear-gradient(92deg, var(--accent-violet) 0%, #6B6BE8 50%, var(--accent-green) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.tentpole .tentpole-sub {
font-size: clamp(1.0625rem, 1.35vw, 1.375rem);
line-height: 1.45;
color: var(--color-text-muted);
max-width: 44ch;
margin: 0 auto 2.5rem;
}
.tentpole .tentpole-sub strong {
color: var(--color-navy);
font-weight: 500;
}
.tentpole .tri {
color: var(--color-text-muted);
font-size: clamp(1.0625rem, 1.3vw, 1.3125rem);
margin-bottom: 2.5rem;
}
.tentpole .tri span { display: inline-block; }
.tentpole .tri span + span::before {
content: " · ";
color: var(--color-text-faint);
margin: 0 0.25rem;
}
/* ---------- Resources preview -------------------------------------------- */
.resources-head {
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: 2rem;
margin-bottom: 3rem;
}
.cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.25rem;
}
.card {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 1.75rem 1.625rem 1.625rem;
display: flex;
flex-direction: column;
gap: 0.875rem;
transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), border-color 260ms var(--ease);
position: relative;
overflow: hidden;
isolation: isolate;
}
/* Subtle accent wash that slides in from the bottom on hover */
.card::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 3px;
background: var(--card-accent, var(--color-navy));
transform: scaleX(0);
transform-origin: left center;
transition: transform 380ms var(--ease-out);
z-index: 1;
}
.card.c-green { --card-accent: var(--accent-green); }
.card.c-violet { --card-accent: var(--accent-violet); }
.card.c-red { --card-accent: #DC2626; }
.card.c-blue { --card-accent: var(--accent-blue); }
.card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
border-color: #D6D3CA;
}
.card:hover::after { transform: scaleX(1); }
.card .card-icon {
width: 44px;
height: 44px;
display: grid;
place-items: center;
border-radius: 11px;
border: 1px solid var(--color-border);
color: var(--color-navy);
background: var(--color-cream);
transition: transform 320ms var(--ease-out), background 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}
.card .card-icon svg { width: 20px; height: 20px; }
.card:hover .card-icon { transform: translateY(-2px) rotate(-5deg) scale(1.04); }
.card.c-green .card-icon { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.22); color: #047857; }
.card.c-violet .card-icon { background: rgba(139, 92, 246, 0.08); border-color: rgba(139, 92, 246, 0.22); color: #6D28D9; }
.card.c-red .card-icon { background: rgba(220, 38, 38, 0.07); border-color: rgba(220, 38, 38, 0.20); color: #B91C1C; }
.card.c-blue .card-icon { background: rgba(47, 111, 235, 0.08); border-color: rgba(47, 111, 235, 0.22); color: var(--accent-blue); }
.card.c-green:hover .card-icon { box-shadow: 0 6px 16px -8px rgba(16, 185, 129, 0.45); }
.card.c-violet:hover .card-icon { box-shadow: 0 6px 16px -8px rgba(139, 92, 246, 0.45); }
.card.c-red:hover .card-icon { box-shadow: 0 6px 16px -8px rgba(220, 38, 38, 0.40); }
.card.c-blue:hover .card-icon { box-shadow: 0 6px 16px -8px rgba(47, 111, 235, 0.45); }
.card h4 {
font-family: var(--font-tight);
font-size: 1.1875rem;
font-weight: 580;
color: var(--color-navy);
letter-spacing: -0.018em;
line-height: 1.22;
}
.card p {
font-size: 0.9375rem;
line-height: 1.55;
color: var(--color-text-muted);
}
.card .tag {
display: inline-flex;
align-self: flex-start;
padding: 0.25rem 0.625rem;
border-radius: var(--radius-full);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-top: auto;
}
.tag.excel { background: rgba(16, 185, 129, 0.1); color: #047857; }
.tag.pdf { background: rgba(220, 38, 38, 0.08); color: #B91C1C; }
.tag.web { background: rgba(47, 111, 235, 0.1); color: var(--accent-blue); }
.card .card-arrow {
position: absolute;
top: 1.5rem;
right: 1.5rem;
opacity: 0;
transform: translate(-4px, 0);
transition: opacity 180ms var(--ease), transform 180ms var(--ease);
color: var(--color-navy);
}
.card:hover .card-arrow {
opacity: 1;
transform: translate(0, 0);
}
.resources-foot {
margin-top: 2.5rem;
}
/* ---------- About teaser ------------------------------------------------- */
.about-teaser {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
gap: clamp(2rem, 6vw, 6rem);
align-items: center;
}
.about-teaser .eyebrow { margin-bottom: 1.25rem; }
.about-teaser .h2 { margin-bottom: 1.25rem; max-width: 16ch; }
.about-teaser p {
color: var(--color-text-muted);
font-size: 1.0625rem;
line-height: 1.6;
margin-bottom: 1.75rem;
max-width: 52ch;
}
.portrait {
justify-self: center;
text-align: center;
}
.portrait .avatar {
width: clamp(180px, 20vw, 240px);
height: clamp(180px, 20vw, 240px);
border-radius: 50%;
background: linear-gradient(140deg, #E8E1D4, #D8CFBE);
display: grid;
place-items: center;
color: var(--color-navy);
font-size: 3.5rem;
font-family: var(--font-tight);
font-weight: 580;
letter-spacing: -0.02em;
margin: 0 auto 1rem;
position: relative;
overflow: hidden;
}
.portrait .avatar::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.35), transparent 55%);
}
.portrait .p-name {
font-family: var(--font-tight);
font-size: 1.0625rem;
font-weight: 580;
color: var(--color-navy);
letter-spacing: -0.01em;
}
.portrait .p-title {
font-size: 0.8125rem;
color: var(--color-text-muted);
letter-spacing: 0.04em;
margin-top: 0.1rem;
}
/* ---------- Provocation finale ------------------------------------------- */
.provocation {
position: relative;
text-align: center;
}
.provocation::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image:
radial-gradient(circle at 15% 30%, rgba(10, 22, 40, 0.035), transparent 28%),
radial-gradient(circle at 80% 70%, rgba(47, 111, 235, 0.04), transparent 32%),
radial-gradient(circle, rgba(10, 22, 40, 0.04) 1px, transparent 1px);
background-size: auto, auto, 34px 34px;
}
.provocation blockquote {
position: relative;
font-family: var(--font-tight);
font-size: clamp(1.75rem, 3.4vw, 3.25rem);
line-height: 1.12;
letter-spacing: -0.02em;
color: var(--color-navy);
max-width: 22ch;
margin: 0 auto;
font-weight: 560;
}
.provocation blockquote em {
font-style: normal;
color: var(--accent-violet);
}
/* ---------- CTA final ---------------------------------------------------- */
.cta-final {
text-align: center;
}
.cta-final .h2 { margin-bottom: 2rem; }
.cta-final .cta-group {
display: flex;
gap: 0.75rem;
justify-content: center;
flex-wrap: wrap;
}
/* ---------- Footer -------------------------------------------------------- */
.footer {
background: var(--color-white);
padding-block: clamp(3rem, 6vw, 5rem) 2rem;
border-top: 1px solid var(--color-border);
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr repeat(2, 1fr);
gap: 2.5rem;
margin-bottom: 3rem;
}
.footer-col h5 {
font-size: 0.75rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-text-muted);
font-weight: 500;
margin-bottom: 1rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col a {
font-size: 0.9375rem;
color: var(--color-text);
transition: color 160ms var(--ease);
}
.footer-col a:hover { color: var(--color-navy); }
.footer-brand .logo-row {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-tight);
font-size: 1.125rem;
font-weight: 580;
color: var(--color-navy);
margin-bottom: 0.75rem;
letter-spacing: -0.015em;
}
.footer-brand .logo-row img { height: 26px; }
.footer-brand p {
font-size: 0.9375rem;
color: var(--color-text-muted);
line-height: 1.55;
max-width: 32ch;
}
.footer-meta {
padding-top: 1.75rem;
border-top: 1px solid var(--color-border-soft);
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
font-size: 0.8125rem;
color: var(--color-text-muted);
}
.footer-meta .meta-right {
display: flex;
align-items: center;
gap: 1.25rem;
}
.footer-meta a:hover { color: var(--color-navy); }
/* ---------- Hero live-dashboard loop ------------------------------------- */
/* Fade transitions for content that swaps on timers */
.mock-report .mock-finding,
.mock-qa .qa-question,
.mock-qa .qa-answer {
transition: opacity 480ms ease;
will-change: opacity;
}
.mock-cockpit .kpi .k-value {
transition: opacity 200ms ease, transform 200ms ease;
display: inline-block;
will-change: transform;
}
.mock-cockpit .kpi .k-value.is-updating {
opacity: 0;
transform: translateY(-4px);
}
.mock-captable .cap-row {
transition: background 450ms var(--ease-out), color 450ms var(--ease-out);
}
/* Sparkline self-redraw, staggered. Lines are visible by default and then
periodically wipe + redraw to suggest a live feed. */
.mock-cockpit .sparkline polyline {
stroke-dasharray: 160;
stroke-dashoffset: 0;
animation: drawSpark 10s ease-in-out infinite;
}
.mock-cockpit .kpi:nth-child(1) .sparkline polyline { animation-delay: 0s; }
.mock-cockpit .kpi:nth-child(2) .sparkline polyline { animation-delay: 0.6s; }
.mock-cockpit .kpi:nth-child(3) .sparkline polyline { animation-delay: 1.2s; }
.mock-cockpit .kpi:nth-child(4) .sparkline polyline { animation-delay: 1.8s; }
@keyframes drawSpark {
0%, 5% { stroke-dashoffset: 0; } /* hold drawn */
18% { stroke-dashoffset: -160; } /* sweep off right */
18.01%, 28% { stroke-dashoffset: 160; } /* snap blank to left */
42% { stroke-dashoffset: 0; } /* redraw in */
100% { stroke-dashoffset: 0; } /* hold drawn */
}
/* Tiny scanning sheen across the cockpit */
.mock-cockpit {
position: relative;
isolation: isolate;
}
.mock-cockpit::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(90deg, transparent 0%, rgba(16, 185, 129, 0.18) 50%, transparent 100%);
opacity: 0;
animation: scanLine 8s ease-in-out infinite;
animation-delay: 1.2s;
border-radius: inherit;
z-index: 0;
}
.mock-cockpit > * { position: relative; z-index: 1; }
@keyframes scanLine {
0%, 10% { opacity: 0; transform: translateX(-60%); }
25% { opacity: 0.55; }
45%, 55% { opacity: 0; transform: translateX(60%); }
100% { opacity: 0; transform: translateX(60%); }
}
/* ---------- Scroll progress bar on nav ----------------------------------- */
.nav-progress {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 2px;
background: transparent;
pointer-events: none;
z-index: 50;
}
.nav-progress::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: var(--scroll-progress, 0%);
background: linear-gradient(90deg, var(--accent-violet) 0%, var(--accent-blue) 50%, var(--accent-green) 100%);
transition: width 80ms linear;
}
/* ---------- Stats row (light theme, blends with white neighbours) -------- */
.stats {
background: var(--color-white);
color: var(--color-navy);
padding-block: clamp(3.5rem, 6.5vw, 5.5rem);
position: relative;
overflow: hidden;
}
.stats::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(circle, color-mix(in srgb, var(--color-navy) 7%, transparent) 1px, transparent 1px);
background-size: 28px 28px;
mask-image: radial-gradient(ellipse at center, black 0%, transparent 82%);
pointer-events: none;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 stats depuis retrait du "7 yrs" non source, 2026-06-10 */
position: relative;
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
background: var(--color-white);
}
.stat {
padding: clamp(1.5rem, 2.5vw, 2.25rem) clamp(1.25rem, 2vw, 2rem) clamp(1.5rem, 2.5vw, 2.25rem) clamp(1.5rem, 2.25vw, 2rem);
position: relative;
}
.stat:not(:first-child) {
border-left: 1px solid var(--color-border);
}
.stat .stat-num {
font-family: var(--font-tight);
font-size: clamp(2.5rem, 5.25vw, 4.5rem);
font-weight: 560;
line-height: 0.95;
letter-spacing: -0.035em;
color: var(--color-navy);
display: flex;
align-items: baseline;
gap: 0.1rem;
font-variant-numeric: tabular-nums;
}
.stat .stat-num .stat-suffix {
font-size: 0.58em;
font-weight: 500;
color: var(--color-text-muted);
letter-spacing: -0.02em;
}
.stat .stat-prefix {
font-size: 0.58em;
font-weight: 500;
color: var(--color-text-muted);
margin-right: 0.05em;
}
.stat .stat-label {
margin-top: 0.75rem;
font-size: 0.875rem;
line-height: 1.45;
color: var(--color-text-muted);
max-width: 22ch;
}
.stat .stat-tick {
position: absolute;
left: clamp(1.5rem, 2.25vw, 2rem);
top: clamp(1rem, 1.75vw, 1.5rem);
width: 28px;
height: 2px;
background: var(--accent-green);
transform-origin: left center;
transform: scaleX(0);
transition: transform 800ms var(--ease-out);
border-radius: 1px;
}
.stat.is-in .stat-tick { transform: scaleX(1); }
.stat:nth-child(2) .stat-tick { background: var(--accent-blue); }
.stat:nth-child(3) .stat-tick { background: var(--accent-violet); }
.stat:nth-child(4) .stat-tick { background: #F59E0B; }
@media (max-width: 820px) {
.stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat:nth-child(3) { border-left: 1px solid var(--color-border); }
.stat:nth-child(3), .stat:nth-child(4) { border-top: 1px solid var(--color-border); }
.stat:nth-child(1), .stat:nth-child(3) { border-left: none; }
}
@media (max-width: 480px) {
.stats-grid { grid-template-columns: 1fr; }
.stat { border-left: none !important; }
.stat:not(:first-child) { border-top: 1px solid var(--color-border); }
}
/* ---------- Week-one timeline -------------------------------------------- */
.timeline-section .timeline {
position: relative;
margin-top: clamp(1.75rem, 3.5vw, 3rem);
}
.timeline-track {
position: relative;
height: 1px;
background: var(--color-border);
margin: 1rem 0 3rem;
display: none;
}
.timeline-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(1rem, 2vw, 2rem);
position: relative;
}
.timeline-grid::before {
content: "";
position: absolute;
left: 12%;
right: 12%;
top: 12px;
height: 1px;
background: repeating-linear-gradient(90deg, var(--color-border) 0, var(--color-border) 4px, transparent 4px, transparent 10px);
}
.t-step {
position: relative;
padding-top: 3rem;
}
.t-step::before {
content: "";
position: absolute;
left: 50%;
top: 6px;
transform: translateX(-50%);
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--color-white);
border: 2px solid var(--color-navy);
z-index: 1;
box-shadow: 0 0 0 4px var(--color-white);
transition: background 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.t-step.is-in::before {
background: var(--color-navy);
animation: pulseRing 1.8s ease-out 0.2s;
}
@keyframes pulseRing {
0% { box-shadow: 0 0 0 4px var(--color-white), 0 0 0 4px rgba(10, 22, 40, 0.2); }
70% { box-shadow: 0 0 0 4px var(--color-white), 0 0 0 16px rgba(10, 22, 40, 0); }
100% { box-shadow: 0 0 0 4px var(--color-white), 0 0 0 16px rgba(10, 22, 40, 0); }
}
.t-step .t-icon {
width: 36px;
height: 36px;
border-radius: 8px;
background: var(--color-cream);
border: 1px solid var(--color-border);
display: grid;
place-items: center;
color: var(--color-navy);
margin-bottom: 1rem;
transition: transform 400ms var(--ease-out);
}
.t-step:hover .t-icon { transform: translateY(-2px) rotate(-4deg); }
.t-step .t-label {
font-size: 0.6875rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-text-faint);
font-weight: 500;
margin-bottom: 0.5rem;
font-variant-numeric: tabular-nums;
}
.t-step h4 {
font-family: var(--font-tight);
font-size: 1.125rem;
font-weight: 580;
color: var(--color-navy);
letter-spacing: -0.015em;
margin-bottom: 0.5rem;
}
.t-step p {
font-size: 0.875rem;
line-height: 1.5;
color: var(--color-text-muted);
max-width: 26ch;
}
/* ---------- Dual-lane timeline ------------------------------------------ */
.dual-timeline .lane {
position: relative;
padding: clamp(1rem, 1.8vw, 1.5rem) 0 0;
}
.dual-timeline .lane-label {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0.75rem 1.5rem;
margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
padding-left: 1rem;
border-left: 2px solid currentColor;
}
.dual-timeline .lane-founders .lane-label { color: var(--accent-violet); }
.dual-timeline .lane-funds .lane-label { color: var(--accent-green); }
.dual-timeline .lane-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-tight);
font-size: 0.9375rem;
font-weight: 580;
color: var(--color-navy);
letter-spacing: -0.01em;
}
.dual-timeline .lane-badge .lane-dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
background: currentColor;
box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent);
animation: pulse-dot 2.4s ease-in-out infinite;
}
.dual-timeline .lane-meta {
font-size: 0.6875rem;
color: var(--color-text-muted);
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 500;
}
.dual-timeline .lane-question {
margin-left: auto;
font-style: italic;
font-size: 0.9375rem;
color: var(--color-text-muted);
letter-spacing: -0.01em;
font-family: var(--font-tight);
font-weight: 500;
}
/* Per-lane track colour on the dashed connector */
.dual-timeline .lane-founders .timeline-grid::before {
background: repeating-linear-gradient(90deg,
color-mix(in srgb, var(--accent-violet) 35%, var(--color-border)) 0,
color-mix(in srgb, var(--accent-violet) 35%, var(--color-border)) 4px,
transparent 4px, transparent 10px);
}
.dual-timeline .lane-funds .timeline-grid::before {
background: repeating-linear-gradient(90deg,
color-mix(in srgb, var(--accent-green) 35%, var(--color-border)) 0,
color-mix(in srgb, var(--accent-green) 35%, var(--color-border)) 4px,
transparent 4px, transparent 10px);
}
/* Per-lane icon tint */
.dual-timeline .lane-founders .t-icon {
color: var(--accent-violet);
border-color: color-mix(in srgb, var(--accent-violet) 28%, var(--color-border));
background: color-mix(in srgb, var(--accent-violet) 5%, var(--color-cream));
}
.dual-timeline .lane-funds .t-icon {
color: var(--accent-green);
border-color: color-mix(in srgb, var(--accent-green) 28%, var(--color-border));
background: color-mix(in srgb, var(--accent-green) 5%, var(--color-cream));
}
/* Per-lane pulse ring */
.dual-timeline .lane-founders .t-step::before {
border-color: var(--accent-violet);
}
.dual-timeline .lane-founders .t-step.is-in::before {
background: var(--accent-violet);
animation: pulseRingViolet 1.8s ease-out 0.2s;
}
.dual-timeline .lane-funds .t-step::before {
border-color: var(--accent-green);
}
.dual-timeline .lane-funds .t-step.is-in::before {
background: var(--accent-green);
animation: pulseRingGreen 1.8s ease-out 0.2s;
}
@keyframes pulseRingViolet {
0% { box-shadow: 0 0 0 4px var(--color-white), 0 0 0 4px rgba(139, 92, 246, 0.28); }
70% { box-shadow: 0 0 0 4px var(--color-white), 0 0 0 16px rgba(139, 92, 246, 0); }
100% { box-shadow: 0 0 0 4px var(--color-white), 0 0 0 16px rgba(139, 92, 246, 0); }
}
@keyframes pulseRingGreen {
0% { box-shadow: 0 0 0 4px var(--color-white), 0 0 0 4px rgba(16, 185, 129, 0.28); }
70% { box-shadow: 0 0 0 4px var(--color-white), 0 0 0 16px rgba(16, 185, 129, 0); }
100% { box-shadow: 0 0 0 4px var(--color-white), 0 0 0 16px rgba(16, 185, 129, 0); }
}
.dual-timeline .lane-divider {
height: 1px;
background: linear-gradient(to right, transparent 0%, var(--color-border) 15%, var(--color-border) 85%, transparent 100%);
margin: clamp(1.5rem, 3vw, 2.5rem) 0;
opacity: 0.7;
display: none; /* hidden in tabbed mode */
}
/* ---- Side switcher (segmented control above the lanes) ---------------- */
.side-switch {
display: inline-flex;
position: relative;
margin: clamp(1.25rem, 2.5vw, 2rem) 0 clamp(1.75rem, 3.5vw, 2.75rem);
padding: 4px;
background: var(--color-cream);
border: 1px solid var(--color-border);
border-radius: 999px;
gap: 2px;
isolation: isolate;
}
.side-switch__indicator {
position: absolute;
top: 4px;
left: 4px;
width: calc(50% - 4px);
height: calc(100% - 8px);
background: var(--color-white);
border-radius: 999px;
box-shadow:
0 1px 2px rgba(10, 22, 40, 0.04),
0 4px 12px rgba(10, 22, 40, 0.06);
transform: translateX(0);
transition: transform 420ms var(--ease-out), background 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
z-index: 0;
}
.side-switch[data-active="funds"] .side-switch__indicator {
transform: translateX(100%);
}
.side-switch[data-active="founders"] .side-switch__indicator {
background: color-mix(in srgb, var(--accent-violet) 7%, var(--color-white));
box-shadow:
0 1px 2px rgba(139, 92, 246, 0.08),
0 6px 16px rgba(139, 92, 246, 0.14);
}
.side-switch[data-active="funds"] .side-switch__indicator {
background: color-mix(in srgb, var(--accent-green) 7%, var(--color-white));
box-shadow:
0 1px 2px rgba(16, 185, 129, 0.08),
0 6px 16px rgba(16, 185, 129, 0.14);
}
.side-switch__btn {
position: relative;
z-index: 1;
background: transparent;
border: 0;
cursor: pointer;
padding: 0.6rem 1.35rem;
font-family: var(--font-tight);
font-weight: 560;
font-size: 0.9375rem;
letter-spacing: -0.01em;
color: var(--color-text-muted);
display: inline-flex;
align-items: center;
gap: 0.5rem;
border-radius: 999px;
transition: color 220ms var(--ease-out);
min-width: 9.5rem;
justify-content: center;
white-space: nowrap;
}
.side-switch__btn:focus-visible {
outline: 2px solid color-mix(in srgb, var(--color-navy) 60%, transparent);
outline-offset: 2px;
}
.side-switch__btn .ss-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
opacity: 0.4;
transition: opacity 220ms var(--ease-out), box-shadow 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.side-switch__btn[data-side="founders"]:hover { color: var(--accent-violet); }
.side-switch__btn[data-side="funds"]:hover { color: var(--accent-green); }
.side-switch[data-active="founders"] .side-switch__btn[data-side="founders"] {
color: var(--accent-violet);
}
.side-switch[data-active="founders"] .side-switch__btn[data-side="founders"] .ss-dot {
opacity: 1;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-violet) 20%, transparent);
transform: scale(1.15);
}
.side-switch[data-active="funds"] .side-switch__btn[data-side="funds"] {
color: var(--accent-green);
}
.side-switch[data-active="funds"] .side-switch__btn[data-side="funds"] .ss-dot {
opacity: 1;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-green) 20%, transparent);
transform: scale(1.15);
}
/* Panels swap — CSS grid-stack so height animates to tallest, but only active lane visible */
.dual-timeline .lane-panels {
position: relative;
display: grid;
grid-template-columns: 1fr;
margin-top: 0;
}
.dual-timeline .lane-panels > .lane {
grid-column: 1;
grid-row: 1;
opacity: 0;
transform: translateY(6px);
transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out), visibility 0s linear 380ms;
visibility: hidden;
pointer-events: none;
}
.dual-timeline .lane-panels > .lane.is-active {
opacity: 1;
transform: translateY(0);
visibility: visible;
pointer-events: auto;
transition: opacity 380ms var(--ease-out) 40ms, transform 380ms var(--ease-out) 40ms, visibility 0s;
}
/* Method-head subtitle (used on dual-timeline sections) */
.dual-timeline .method-head {
display: block;
margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.dual-timeline .method-head .h2 {
max-width: 22ch;
}
.dual-timeline .method-head .m-sub {
margin-top: 0.9rem;
max-width: 52ch;
color: var(--color-text-muted);
font-size: 1rem;
line-height: 1.55;
}
/* Side-switch header row: align nicely under the section head */
.dual-timeline .switch-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 1rem 1.25rem;
margin-top: clamp(1rem, 2vw, 1.5rem);
}
.dual-timeline .switch-hint {
font-size: 0.8125rem;
color: var(--color-text-faint);
font-style: italic;
letter-spacing: -0.005em;
}
/* Single-lane variant — used on dedicated /founders and /funds pages.
Same visual treatment as the dual-timeline lane, but without the tab
switcher and without the alternate lane underneath. */
.dual-timeline.single-lane .lane-panels {
/* one panel, no cross-fade juggling needed */
display: block;
}
.dual-timeline.single-lane .lane-panels > .lane {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: none;
}
.dual-timeline.single-lane .switch-row--solo {
display: flex;
align-items: center;
gap: 0.9rem 1.25rem;
flex-wrap: wrap;
}
.dual-timeline.single-lane .lane-badge--solo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.85rem;
border-radius: 999px;
border: 1px solid var(--color-border);
background: var(--color-white);
font-family: var(--font-tight);
font-size: 0.8125rem;
font-weight: 580;
letter-spacing: -0.005em;
color: var(--color-navy);
}
.dual-timeline.single-lane .lane-badge--solo .lane-dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
animation: pulse-dot 2.4s ease-in-out infinite;
}
/* Per-side tint on the solo badge */
section.dual-timeline.single-lane .lane-founders + * .lane-badge--solo,
section.dual-timeline.single-lane .lane-badge--solo {
/* default keeps the token and lets the cascade below specialize */
}
section.dual-timeline.single-lane:has(.lane-founders) .lane-badge--solo {
border-color: color-mix(in srgb, var(--accent-violet) 30%, var(--color-border));
color: var(--accent-violet);
}
section.dual-timeline.single-lane:has(.lane-founders) .lane-badge--solo .lane-dot {
background: var(--accent-violet);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-violet) 20%, transparent);
}
section.dual-timeline.single-lane:has(.lane-funds) .lane-badge--solo {
border-color: color-mix(in srgb, var(--accent-green) 30%, var(--color-border));
color: var(--accent-green);
}
section.dual-timeline.single-lane:has(.lane-funds) .lane-badge--solo .lane-dot {
background: var(--accent-green);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-green) 20%, transparent);
}
@media (max-width: 820px) {
.dual-timeline .timeline-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.25rem; }
.dual-timeline .timeline-grid::before { display: none; }
.dual-timeline .lane-question { margin-left: 0; width: 100%; }
.side-switch__btn { min-width: 0; padding: 0.55rem 1.05rem; font-size: 0.875rem; }
.dual-timeline .switch-hint { width: 100%; }
}
@media (max-width: 480px) {
.dual-timeline .timeline-grid { grid-template-columns: 1fr; }
.side-switch { width: 100%; }
.side-switch__btn { flex: 1; }
.side-switch__indicator { width: calc(50% - 4px); }
}
/* ---------- Persona card live visuals ------------------------------------ */
/* Cockpit KPI ticker — value flick transition */
.persona-visual.pv-cockpit .pv-kpi .v {
transition: opacity 220ms ease, transform 220ms ease;
display: inline-block;
}
.persona-visual.pv-cockpit .pv-kpi .v.is-updating {
opacity: 0;
transform: translateY(-3px);
}
/* Checklist item — animated check draw when item clears */
.persona-visual.pv-checklist .pv-check {
transition: background 360ms var(--ease-out), border-color 360ms var(--ease-out);
}
.persona-visual.pv-checklist .pv-check svg polyline {
stroke-dasharray: 14;
stroke-dashoffset: 0;
transition: stroke-dashoffset 400ms var(--ease-out);
}
.persona-visual.pv-checklist .pv-item.pending .pv-check svg polyline {
stroke-dashoffset: 14;
}
.persona-visual.pv-checklist .pv-item {
transition: color 360ms var(--ease-out);
}
.persona-visual.pv-checklist .pv-item .pv-status {
transition: color 360ms var(--ease-out), opacity 360ms var(--ease-out);
}
/* ---------- Tools we speak (marquee grid) -------------------------------- */
.tools-section {
overflow: hidden;
padding-block: clamp(4rem, 8vw, 7rem);
}
.tools-intro {
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: 2rem;
margin-bottom: clamp(2rem, 4vw, 3rem);
}
.tools-intro h2 { max-width: 16ch; }
.tools-marquee {
position: relative;
overflow: hidden;
mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
}
.tools-track {
display: flex;
gap: 1rem;
animation: marquee 55s linear infinite;
width: max-content;
}
.tools-marquee:hover .tools-track { animation-play-state: paused; }
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.tool-tile {
min-width: 180px;
padding: 1.125rem 1.25rem;
border: 1px solid var(--color-border);
border-radius: 12px;
background: var(--color-white);
display: flex;
align-items: center;
gap: 0.75rem;
transition: transform 260ms var(--ease-out), border-color 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
}
.tool-tile:hover {
transform: translateY(-3px);
border-color: #D6D3CA;
box-shadow: var(--shadow-card);
}
.tool-tile .tool-mark {
width: 30px;
height: 30px;
border-radius: 8px;
display: grid;
place-items: center;
font-family: var(--font-tight);
font-size: 0.8125rem;
font-weight: 580;
color: var(--color-white);
flex: 0 0 auto;
letter-spacing: -0.01em;
}
.tool-tile .tool-mark .tool-logo {
display: block;
width: 18px;
height: 18px;
object-fit: contain;
/* monochrome SVG inverted to white over the colored mark */
filter: brightness(0) invert(1);
}
.tool-tile .tool-name {
font-size: 0.9375rem;
font-weight: 500;
color: var(--color-navy);
letter-spacing: -0.01em;
}
.tool-tile .tool-cat {
font-size: 0.6875rem;
color: var(--color-text-faint);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-top: 0.15rem;
}
.tool-tile .tool-text { display: flex; flex-direction: column; }
.tools-row-2 { animation-direction: reverse; animation-duration: 70s; }
.tools-footnote {
margin-top: clamp(2rem, 4vw, 3rem);
display: flex;
gap: 0.5rem;
align-items: center;
justify-content: center;
font-size: 0.8125rem;
color: var(--color-text-muted);
letter-spacing: 0.02em;
}
.tools-footnote .tf-dot {
width: 4px; height: 4px; border-radius: 50%;
background: var(--color-text-faint);
}
/* ---------- Smart dividers (modern variations) --------------------------- */
.tick-rule {
display: flex;
width: 100%;
height: 8px;
background-image: linear-gradient(to right, var(--color-border) 1px, transparent 1px);
background-size: 12px 100%;
mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
margin: clamp(2rem, 5vw, 4rem) 0;
}
.slash-rule {
height: 28px;
margin: clamp(2rem, 5vw, 4rem) 0;
background: repeating-linear-gradient(135deg, var(--color-border) 0 1px, transparent 1px 10px);
mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
opacity: 0.7;
}
/* Pulse animation for live indicators */
@keyframes pulse-dot {
0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 15%, transparent); }
50% { box-shadow: 0 0 0 7px color-mix(in srgb, currentColor 4%, transparent); }
}
.pulse-dot, .dot-live, .pv-dot, .badge-dot {
animation: pulse-dot 2.4s ease-in-out infinite;
}
/* Magnetic cursor glow on persona cards */
.persona-card {
--mx: 50%;
--my: 50%;
}
.persona-card::after {
background:
radial-gradient(350px circle at var(--mx) var(--my), color-mix(in srgb, currentColor 12%, transparent), transparent 55%),
radial-gradient(circle at 100% 0%, currentColor, transparent 55%);
}
/* Number count-up hook (JS will update data-value via CSS var) */
.stat-num[data-count] { counter-reset: num var(--count, 0); }
/* ---------- Reveal on scroll --------------------------------------------- */
.reveal {
opacity: 0;
transform: translateY(20px) scale(0.985);
transition:
opacity 900ms var(--ease-out),
transform 900ms var(--ease-out);
will-change: opacity, transform;
}
.reveal.is-in {
opacity: 1;
transform: none;
}
/* Stagger delays — applied to children of [data-stagger] */
[data-stagger] > .reveal { transition-delay: 0ms; }
[data-stagger] > .reveal:nth-child(2) { transition-delay: 90ms; }
[data-stagger] > .reveal:nth-child(3) { transition-delay: 180ms; }
[data-stagger] > .reveal:nth-child(4) { transition-delay: 270ms; }
[data-stagger] > .reveal:nth-child(5) { transition-delay: 360ms; }
[data-stagger] > .reveal:nth-child(6) { transition-delay: 450ms; }
/* Soft stagger for hero copy children */
.hero-copy .reveal-child {
opacity: 0;
transform: translateY(14px);
transition: opacity 850ms var(--ease-out), transform 850ms var(--ease-out);
}
.hero-copy.is-in .reveal-child { opacity: 1; transform: none; }
.hero-copy.is-in .reveal-child:nth-child(1) { transition-delay: 0ms; }
.hero-copy.is-in .reveal-child:nth-child(2) { transition-delay: 90ms; }
.hero-copy.is-in .reveal-child:nth-child(3) { transition-delay: 180ms; }
.hero-copy.is-in .reveal-child:nth-child(4) { transition-delay: 270ms; }
.hero-copy.is-in .reveal-child:nth-child(5) { transition-delay: 380ms; }
/* ---------- Responsive --------------------------------------------------- */
/* Large tablet / small desktop — keep columns, ease paddings */
@media (max-width: 1200px) {
:root { --section-y: clamp(3rem, 5.5vw, 5.25rem); }
.nav-menu { gap: 1.5rem; }
.logo-strip { grid-template-columns: repeat(6, 1fr); gap: 0.75rem; }
}
/* Tablet — collapse nav, restack hero, persona stays 2-up */
@media (max-width: 1024px) {
/* === Mobile drawer (right side) === */
.nav-burger { display: inline-flex; position: relative; z-index: 10003; margin-left: auto; }
/* Burger sits at the far right of the nav bar */
.nav-actions { justify-content: flex-end; gap: 0; }
/* Hide bar lang-toggle + CTA, they get cloned inside the drawer */
.nav-actions > .lang-toggle,
.nav-actions > .btn-primary { display: none; }
/* The menu becomes a fixed drawer sliding from the right.
JS moves it out of .nav (which has backdrop-filter, creating a containing
block on Safari) and re-parents it to so it can fill the viewport. */
.nav-menu {
display: flex;
flex-direction: column;
align-items: stretch;
justify-self: stretch;
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: min(86vw, 380px);
max-width: 100%;
height: 100vh;
height: 100dvh;
background: var(--color-white);
border-left: 1px solid var(--color-border);
padding: clamp(5rem, 12vh, 6.5rem) clamp(1.5rem, 5vw, 2rem) 2rem;
gap: 0;
transform: translateX(100%);
transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
z-index: 10001;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
box-shadow: -16px 0 48px -12px rgba(10, 22, 40, 0.18);
backdrop-filter: none;
border-bottom: none;
}
.nav-menu.is-open { transform: translateX(0); }
/* Nav links inside drawer (direct children only, so cloned CTAs in
.nav-drawer-actions don't inherit these styles) */
.nav-menu > a {
padding: 1.05rem 0;
font-size: clamp(1.375rem, 5.2vw, 1.625rem);
font-family: var(--font-tight);
font-weight: 500;
letter-spacing: -0.018em;
color: var(--color-navy);
border-bottom: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
opacity: 0;
transform: translateX(18px);
transition: opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
color 180ms var(--ease);
}
.nav-menu > a::after { display: none; }
.nav-menu > a::before {
content: "→";
color: var(--color-text-faint);
font-family: var(--font-tight);
font-size: 1.125rem;
font-weight: 500;
transition: color 180ms var(--ease), transform 220ms var(--ease);
order: 2;
margin-left: auto;
}
.nav-menu > a:hover::before,
.nav-menu > a.is-active::before {
color: var(--color-navy);
transform: translateX(3px);
}
.nav-menu > a.is-active { color: var(--color-navy); }
/* Stagger fade-in when drawer opens */
.nav-menu.is-open > a {
opacity: 1;
transform: translateX(0);
}
.nav-menu.is-open > a:nth-of-type(1) { transition-delay: 0.12s, 0.12s, 0s; }
.nav-menu.is-open > a:nth-of-type(2) { transition-delay: 0.18s, 0.18s, 0s; }
.nav-menu.is-open > a:nth-of-type(3) { transition-delay: 0.24s, 0.24s, 0s; }
.nav-menu.is-open > a:nth-of-type(4) { transition-delay: 0.30s, 0.30s, 0s; }
.nav-menu.is-open > a:nth-of-type(5) { transition-delay: 0.36s, 0.36s, 0s; }
.nav-menu.is-open > a:nth-of-type(6) { transition-delay: 0.42s, 0.42s, 0s; }
/* Drawer actions footer (lang toggle + CTA, cloned by JS) */
.nav-drawer-actions {
margin-top: auto;
padding-top: 1.75rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) 0.5s,
transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) 0.5s;
}
.nav-menu.is-open .nav-drawer-actions {
opacity: 1;
transform: translateY(0);
}
.nav-drawer-actions .btn-primary {
width: 100%;
justify-content: center;
padding: 0.95rem 1.25rem;
font-size: 0.9375rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.nav-drawer-actions .lang-toggle {
display: inline-flex;
align-self: flex-start;
padding: 0;
}
/* Burger morph to X when drawer is open */
.nav-burger.is-active span {
background: transparent;
}
.nav-burger.is-active span::before {
transform: translateY(0) rotate(45deg);
}
.nav-burger.is-active span::after {
transform: translateY(0) rotate(-45deg);
}
.nav-burger span,
.nav-burger span::before,
.nav-burger span::after {
transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
background 0.2s var(--ease);
}
/* Backdrop. z-index above cookie banner (9999) so the drawer takes over the screen */
.nav-backdrop {
display: block;
position: fixed;
inset: 0;
background: rgba(10, 22, 40, 0.36);
backdrop-filter: saturate(140%) blur(4px);
-webkit-backdrop-filter: saturate(140%) blur(4px);
opacity: 0;
pointer-events: none;
transition: opacity 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
z-index: 10000;
}
.nav-backdrop.is-visible {
opacity: 1;
pointer-events: auto;
}
/* Lock body scroll while drawer open + lift nav bar above drawer
so the morphed burger (X) stays visible and clickable, and stays
above the cookie consent banner (z 9999) too.
Also strip backdrop-filter from .nav while locked, otherwise Safari
creates a containing block that clips the fixed drawer to the bar height. */
body.nav-locked { overflow: hidden; }
body.nav-locked .nav {
z-index: 10002;
background: var(--color-white);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/* Hide the cookie consent banner while the drawer is open so it doesn't peek through */
body.nav-locked .fr-consent { display: none !important; }
@media (prefers-reduced-motion: reduce) {
.nav-menu,
.nav-menu a,
.nav-drawer-actions,
.nav-backdrop,
.nav-burger span,
.nav-burger span::before,
.nav-burger span::after { transition: none !important; }
}
.hero-grid { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
.hero-visual { min-height: 440px; margin-top: 1rem; }
.hero-signature { max-width: 100%; }
.dual-entry .dual-grid { grid-template-columns: 1fr; }
.dual-entry .dual-grid::before { display: none; }
.method-grid { grid-template-columns: 1fr 1fr; gap: 2rem 2.5rem; }
.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.about-teaser { grid-template-columns: 1fr; text-align: left; gap: 2.5rem; }
.about-teaser .portrait { justify-self: start; text-align: left; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
.resources-head, .method-head { grid-template-columns: 1fr; }
.persona-grid { gap: 1rem; }
.persona-card { min-height: 360px; }
}
/* Narrow tablet — persona stacks, hero mockups smaller */
@media (max-width: 820px) {
.persona-grid { grid-template-columns: 1fr; }
.persona-card { min-height: auto; }
.persona-hook { font-size: clamp(1.75rem, 6vw, 2.5rem); }
}
/* Mobile — tighten everything */
@media (max-width: 640px) {
:root { --section-y: clamp(2.5rem, 8vw, 3.75rem); --gutter: 1.25rem; }
.h1 { font-size: clamp(2rem, 8.2vw, 2.75rem); }
.h2 { font-size: clamp(1.625rem, 6.8vw, 2.125rem); }
.hero h1 { overflow-wrap: balance; word-break: keep-all; }
.btn { white-space: normal; text-align: center; line-height: 1.25; padding: 0.875rem 1rem; font-size: 0.875rem; flex-wrap: wrap; }
.hero-ctas .btn { width: auto; max-width: 100%; justify-content: center; display: inline-flex; box-sizing: border-box; }
.hero-ctas { flex-direction: column; align-items: center; width: 100%; }
.cta-final .cta-group { flex-direction: column; align-items: center; }
.cta-final .cta-group .btn { width: auto; max-width: 100%; }
.method-grid { grid-template-columns: 1fr; }
.cards { grid-template-columns: 1fr; }
.logo-strip { grid-template-columns: repeat(3, 1fr); }
.footer-grid { grid-template-columns: 1fr; gap: 2rem; }
.footer-meta { justify-content: flex-start; }
.hero-visual { min-height: 380px; aspect-ratio: 1 / 1; }
/* Mobile cascade — slightly wider cards, same stair progression */
.mock-report { top: 0; left: 0; right: auto; bottom: auto; width: 80%; }
.mock-cockpit { top: 20%; left: 15%; right: auto; bottom: auto; width: 78%; }
.mock-captable { top: 44%; left: 4%; right: auto; bottom: auto; width: 72%; }
.mock-qa { top: 62%; left: 18%; right: auto; bottom: auto; width: 76%; }
.nav-inner { grid-template-columns: auto 1fr auto; gap: 1rem; }
.nav-actions .btn-primary { display: none; }
.nav-actions .lang-toggle { display: none; }
.hero-signature { margin-top: 1.75rem; padding-top: 1.25rem; }
.hero-signature .sig-avatar { width: 38px; height: 38px; font-size: 0.75rem; }
.persona-card { padding: 1.5rem; border-radius: 14px; }
.persona-hook { font-size: clamp(1.625rem, 7.8vw, 2rem); }
.v-divider { font-size: 0.625rem; margin-bottom: 1.75rem; }
.method-head, .resources-head { margin-bottom: 2rem; }
.method-head .h2 { max-width: none; }
.principle { padding-top: 1.5rem; }
.principle-num { margin-bottom: 1.25rem; }
.tentpole .tentpole-sub { margin-bottom: 1.75rem; }
.provocation blockquote { max-width: 18ch; font-size: clamp(1.5rem, 7vw, 2rem); }
}
/* Small mobile — 390px and below */
@media (max-width: 410px) {
:root { --gutter: 1.125rem; }
.h1 { font-size: clamp(1.875rem, 8.8vw, 2.375rem); }
.h2 { font-size: clamp(1.5rem, 7vw, 1.875rem); }
.persona-card { padding: 1.25rem; }
.persona-cta { font-size: 0.9375rem; }
.card { padding: 1.25rem; }
.nav-logo span { display: none; }
.hero-visual { min-height: 340px; }
}
/* ==========================================================================
Inner pages — shared patterns
========================================================================== */
/* ---------- Page hero (compact, no mockup) ------------------------------- */
.page-hero {
position: relative;
padding-block: clamp(6rem, 11vw, 9rem) clamp(3.5rem, 6vw, 5rem);
background: var(--color-white);
overflow: hidden;
border-bottom: 1px solid var(--color-border-soft);
}
.page-hero::before {
/* Charte v18 : grille d'ingenierie en hairlines pures, jamais de lueurs radiales. */
content: "";
position: absolute; inset: 0;
background-image:
linear-gradient(to right, rgba(10, 22, 40, 0.045) 1px, transparent 1px),
linear-gradient(to bottom, rgba(10, 22, 40, 0.045) 1px, transparent 1px);
background-size: 96px 96px, 96px 96px;
mask-image: radial-gradient(ellipse at 50% 42%, black 32%, transparent 92%);
-webkit-mask-image: radial-gradient(ellipse at 50% 42%, black 32%, transparent 92%);
pointer-events: none;
}
.page-hero .container { position: relative; }
.page-hero .breadcrumb {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-bottom: 1.5rem;
font-weight: 500;
}
.page-hero .breadcrumb a { color: var(--color-text-muted); transition: color 180ms var(--ease); }
.page-hero .breadcrumb a:hover { color: var(--color-navy); }
.page-hero .breadcrumb .sep { color: var(--color-text-faint); }
.page-hero .breadcrumb .bc-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--accent-page, var(--accent-blue));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-page, var(--accent-blue)) 20%, transparent);
}
.page-hero h1 {
font-family: var(--font-tight);
color: var(--color-navy);
font-size: clamp(2.25rem, 6vw, 5rem);
letter-spacing: -0.025em;
line-height: 1.02;
font-weight: 560;
max-width: 18ch;
}
.page-hero h1 em {
/* Charte v18 : la ligne dominante en serif italique navy, plus de couleur accent plate. */
font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
font-style: italic;
font-weight: 400;
color: var(--color-navy);
font-size: 1.08em;
letter-spacing: -0.01em;
}
.page-hero .lead {
max-width: 60ch;
margin-top: clamp(1.25rem, 2vw, 1.75rem);
font-size: clamp(1.0625rem, 1.2vw, 1.25rem);
color: var(--color-text-muted);
line-height: 1.55;
}
.page-hero .ph-meta {
margin-top: clamp(1.5rem, 3vw, 2rem);
display: flex; flex-wrap: wrap; gap: 1rem 2rem;
font-family: var(--font-tight);
font-size: 0.875rem;
color: var(--color-text-muted);
padding-top: clamp(1.25rem, 2vw, 1.5rem);
border-top: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
max-width: 60ch;
}
.page-hero .ph-meta strong {
color: var(--color-navy);
font-weight: 580;
letter-spacing: -0.01em;
}
.page-hero .ph-cta {
margin-top: clamp(1.5rem, 3vw, 2.25rem);
display: flex; flex-wrap: wrap; gap: 0.75rem 1rem;
align-items: center;
}
.page-hero .ph-cta-note {
color: var(--color-text-muted);
font-size: 0.875rem;
}
.page-hero.ph-founders { --accent-page: var(--accent-violet); }
.page-hero.ph-funds { --accent-page: var(--accent-green); }
.page-hero.ph-neutral { --accent-page: var(--accent-blue); }
/* ---------- Section-head (eyebrow + big heading + short lead) ----------- */
.sec-head {
display: grid;
grid-template-columns: 1.15fr 1fr;
align-items: end;
gap: clamp(2rem, 5vw, 4rem);
margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.sec-head h2 { max-width: 18ch; }
.sec-head p {
max-width: 42ch;
color: var(--color-text-muted);
font-size: 1rem;
line-height: 1.55;
}
@media (max-width: 820px) {
.sec-head { grid-template-columns: 1fr; gap: 1.25rem; align-items: start; }
}
/* ---------- Offer grid (Finance function / Fundraising, etc.) ------------ */
.offer-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(1rem, 2vw, 2rem);
}
.offer-card {
position: relative;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: 18px;
padding: clamp(1.75rem, 3vw, 2.5rem);
transition: border-color 260ms var(--ease-out), transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
}
.offer-card:hover { border-color: #D6D3CA; transform: translateY(-2px); box-shadow: var(--shadow-card); }
.offer-card .offer-num {
font-family: var(--font-tight);
font-size: 0.8125rem;
color: var(--color-text-faint);
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
font-weight: 500;
}
.offer-card .offer-num::before { content: "["; }
.offer-card .offer-num::after { content: "]"; }
.offer-card h3 {
font-family: var(--font-tight);
font-size: clamp(1.375rem, 2vw, 1.75rem);
color: var(--color-navy);
margin-top: 0.5rem;
font-weight: 580;
letter-spacing: -0.015em;
line-height: 1.15;
}
.offer-card .offer-intro {
color: var(--color-text-muted);
margin-top: 0.75rem;
max-width: 44ch;
line-height: 1.55;
font-size: 0.9375rem;
}
.offer-card ul {
margin-top: clamp(1.25rem, 2vw, 1.75rem);
display: flex; flex-direction: column; gap: 0.75rem;
}
.offer-card li {
position: relative;
padding-left: 1.25rem;
font-size: 0.9375rem;
color: var(--color-text);
line-height: 1.5;
}
.offer-card li::before {
content: "";
position: absolute; left: 0; top: 0.65em;
width: 7px; height: 7px; border-radius: 50%;
background: var(--accent-page, var(--accent-blue));
}
.offer-card.oc-founders { --accent-page: var(--accent-violet); }
.offer-card.oc-funds { --accent-page: var(--accent-green); }
/* Offer icon chip — replaces the [01]/[02] corner marker on .offer-card.
Shares the aesthetic DNA of .persona-icon: currentColor-tinted chip with
a subtle hover halo and a small motion cue per icon variant. */
.offer-card .offer-icon {
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 12px;
color: var(--accent-page, var(--accent-violet));
background: color-mix(in srgb, currentColor 8%, var(--color-white));
border: 1px solid color-mix(in srgb, currentColor 18%, var(--color-border));
margin-bottom: 0.25rem;
transition:
transform 420ms var(--ease-out),
background 220ms var(--ease),
border-color 220ms var(--ease),
box-shadow 280ms var(--ease);
flex: 0 0 auto;
}
.offer-card .offer-icon svg {
display: block;
transition: transform 380ms var(--ease-out);
}
.offer-card:hover .offer-icon {
background: color-mix(in srgb, currentColor 14%, var(--color-white));
border-color: color-mix(in srgb, currentColor 40%, var(--color-border));
box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 10%, transparent);
}
.offer-card:hover .offer-icon.oi-finance svg {
transform: translateY(-1px);
}
.offer-card:hover .offer-icon.oi-raise svg {
transform: translate(1.5px, -1.5px);
}
@media (max-width: 820px) {
.offer-grid { grid-template-columns: 1fr; }
.offer-card .offer-icon { width: 40px; height: 40px; }
.offer-card .offer-icon svg { width: 20px; height: 20px; }
}
/* ---------- Pricing grid (How we work / Mandates) ----------------------- */
.price-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: clamp(1rem, 1.6vw, 1.5rem);
align-items: stretch;
}
.price-card {
position: relative;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: 16px;
padding: clamp(1.5rem, 2.4vw, 2rem);
display: flex; flex-direction: column; gap: 1rem;
transition: border-color 260ms var(--ease-out), transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
}
.price-card:hover { border-color: #D6D3CA; transform: translateY(-2px); box-shadow: var(--shadow-card); }
.price-card.is-featured {
border-color: color-mix(in srgb, var(--accent-page, var(--accent-blue)) 40%, var(--color-border));
background: color-mix(in srgb, var(--accent-page, var(--accent-blue)) 5%, var(--color-white));
}
.price-card .pc-head {
display: flex; justify-content: space-between; align-items: center; gap: 0.75rem;
}
.price-card .pc-label {
font-size: 0.6875rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-text-muted);
font-weight: 500;
}
.price-card.is-featured .pc-label { color: var(--accent-page, var(--accent-blue)); }
.price-card .pc-pill {
display: inline-flex; align-items: center; gap: 0.4rem;
font-size: 0.6875rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent-page, var(--accent-blue));
border: 1px solid color-mix(in srgb, var(--accent-page, var(--accent-blue)) 30%, transparent);
background: color-mix(in srgb, var(--accent-page, var(--accent-blue)) 8%, var(--color-white));
padding: 0.2rem 0.55rem;
border-radius: 999px;
font-weight: 500;
}
.price-card h3 {
font-family: var(--font-tight);
font-size: 1.25rem;
color: var(--color-navy);
font-weight: 580;
letter-spacing: -0.01em;
line-height: 1.2;
}
.price-card .pc-desc {
color: var(--color-text-muted);
font-size: 0.9375rem;
line-height: 1.55;
flex-grow: 1;
}
.price-card .pc-amount {
font-family: var(--font-tight);
font-weight: 580;
color: var(--color-navy);
font-size: clamp(1.5rem, 2.4vw, 1.875rem);
letter-spacing: -0.02em;
line-height: 1;
font-variant-numeric: tabular-nums;
padding-top: 0.25rem;
}
.price-card .pc-amount small {
display: inline-block;
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-text-muted);
margin-left: 0.25rem;
letter-spacing: 0;
}
.price-card .pc-from {
font-size: 0.6875rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-text-faint);
display: block;
margin-bottom: 0.35rem;
font-weight: 500;
}
.price-card .pc-bullets {
display: flex; flex-direction: column; gap: 0.45rem;
font-size: 0.875rem;
color: var(--color-text-muted);
line-height: 1.45;
border-top: 1px solid var(--color-border);
padding-top: 1rem;
margin-top: 0.25rem;
}
.price-card .pc-bullets li {
position: relative;
padding-left: 1.1rem;
}
.price-card .pc-bullets li::before {
content: "";
position: absolute; left: 0; top: 0.55rem;
width: 5px; height: 5px; border-radius: 50%;
background: var(--color-text-faint);
}
.price-card .pc-foot {
font-size: 0.75rem;
letter-spacing: 0.02em;
color: var(--color-text-faint);
font-style: italic;
}
.price-card.pc-manifesto {
background: linear-gradient(135deg, #1A2A44 0%, #15243C 55%, #111E34 100%);
color: rgba(255,255,255,0.88);
border-color: color-mix(in srgb, var(--accent-violet) 26%, #1A2A44);
grid-column: span 2;
gap: 0.75rem;
overflow: hidden;
}
.price-card.pc-manifesto .pc-label { color: rgba(255,255,255,0.6); }
.price-card.pc-manifesto h3 {
color: var(--color-white);
font-size: clamp(1.375rem, 2.2vw, 1.875rem);
letter-spacing: -0.015em;
font-weight: 560;
}
.price-card.pc-manifesto .pc-desc {
color: rgba(255,255,255,0.76);
font-size: 1rem;
max-width: 55ch;
line-height: 1.55;
}
.price-card.pc-manifesto strong { color: var(--color-white); font-weight: 500; }
.price-card.pc-manifesto::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(520px circle at 100% 0%, color-mix(in srgb, var(--accent-violet) 14%, transparent), transparent 60%),
radial-gradient(480px circle at 0% 100%, rgba(255,255,255,0.05), transparent 55%);
pointer-events: none;
border-radius: inherit;
}
@media (max-width: 820px) {
.price-card.pc-manifesto { grid-column: span 1; }
}
.price-notice {
margin-top: 1.5rem;
font-size: 0.8125rem;
color: var(--color-text-faint);
font-style: italic;
letter-spacing: 0.01em;
}
/* ---------- No-do block (what we don't do) ------------------------------ */
.no-do {
display: grid;
grid-template-columns: auto 1fr;
gap: clamp(2rem, 4vw, 4rem);
align-items: start;
background: var(--color-white);
border-left: 3px solid var(--color-border);
padding: clamp(1.5rem, 2.5vw, 2rem) clamp(1.5rem, 3vw, 2.5rem);
border-radius: 0 14px 14px 0;
}
.no-do .nd-title {
font-family: var(--font-tight);
font-size: 0.8125rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-text-faint);
font-weight: 500;
min-width: 12ch;
padding-top: 0.25rem;
}
.no-do ul { display: flex; flex-direction: column; gap: 0.9rem; }
.no-do li {
position: relative;
padding-left: 1.5rem;
font-size: 1.0625rem;
color: var(--color-navy);
line-height: 1.5;
font-weight: 500;
letter-spacing: -0.005em;
font-family: var(--font-tight);
}
.no-do li::before {
content: "×";
position: absolute; left: 0; top: -0.05rem;
color: #DC2626;
font-size: 1.125rem;
font-weight: 600;
}
@media (max-width: 720px) {
.no-do { grid-template-columns: 1fr; gap: 1rem; }
}
/* ---------- Process (3 numbered steps) ---------------------------------- */
.process-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(1.25rem, 2vw, 2rem);
position: relative;
}
.process-grid::before {
content: "";
position: absolute;
top: 20px;
left: 8%;
right: 8%;
height: 1px;
background: repeating-linear-gradient(90deg,
color-mix(in srgb, var(--accent-page, var(--color-border)) 35%, var(--color-border)) 0,
color-mix(in srgb, var(--accent-page, var(--color-border)) 35%, var(--color-border)) 4px,
transparent 4px, transparent 10px);
z-index: 0;
}
.process-step {
position: relative;
z-index: 1;
padding-top: 3.25rem;
}
.process-step::before {
content: "";
position: absolute;
top: 12px;
left: 0;
width: 16px; height: 16px;
background: var(--color-white);
border: 2px solid var(--accent-page, var(--accent-blue));
border-radius: 50%;
z-index: 1;
box-shadow: 0 0 0 4px var(--color-white);
}
.process-step .ps-num {
display: inline-block;
font-family: var(--font-tight);
font-size: 0.75rem;
color: var(--accent-page, var(--accent-blue));
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 580;
margin-bottom: 0.75rem;
}
.process-step h4 {
font-family: var(--font-tight);
font-size: 1.25rem;
color: var(--color-navy);
letter-spacing: -0.01em;
font-weight: 580;
line-height: 1.2;
}
.process-step p {
margin-top: 0.6rem;
color: var(--color-text-muted);
font-size: 0.9375rem;
line-height: 1.55;
max-width: 32ch;
}
.process-grid.pg-founders { --accent-page: var(--accent-violet); }
.process-grid.pg-funds { --accent-page: var(--accent-green); }
@media (max-width: 820px) {
.process-grid { grid-template-columns: 1fr; }
.process-grid::before { display: none; }
.process-step {
padding-top: 0;
padding-left: 2rem;
padding-bottom: 1.5rem;
border-left: 1px dashed color-mix(in srgb, var(--accent-page, var(--color-border)) 35%, var(--color-border));
}
.process-step::before { top: 0.2rem; left: -9px; }
}
/* ---------- CTA strip (inner page foot) --------------------------------- */
.cta-strip {
position: relative;
background: var(--color-navy);
color: var(--color-white);
border-radius: 20px;
padding: clamp(2.25rem, 4vw, 3.25rem);
overflow: hidden;
}
.cta-strip::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(500px circle at 100% 0%, color-mix(in srgb, var(--accent-page, var(--accent-blue)) 30%, transparent), transparent 55%),
radial-gradient(400px circle at 0% 100%, color-mix(in srgb, var(--accent-page, var(--accent-blue)) 18%, transparent), transparent 55%);
pointer-events: none;
}
.cta-strip .cs-inner {
position: relative;
display: grid; grid-template-columns: 1fr auto;
align-items: center; gap: 2rem;
}
.cta-strip h2 {
font-family: var(--font-tight);
color: var(--color-white);
font-size: clamp(1.5rem, 3vw, 2.5rem);
letter-spacing: -0.02em;
font-weight: 560;
line-height: 1.1;
max-width: 22ch;
}
.cta-strip p {
color: rgba(255,255,255,0.7);
margin-top: 0.75rem;
font-size: 1rem;
max-width: 46ch;
}
.cta-strip p.cs-lead {
display: flex;
flex-direction: column;
gap: 0.4rem;
margin-top: 0.85rem;
max-width: 52ch;
}
.cta-strip p.cs-lead strong {
font-family: var(--font-tight);
font-weight: 560;
font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
letter-spacing: -0.01em;
color: #FFFFFF;
line-height: 1.3;
}
.cta-strip p.cs-lead .cs-meta {
display: inline-flex;
align-items: center;
gap: 0.55rem;
font-size: 0.8125rem;
letter-spacing: 0.04em;
color: rgba(255, 255, 255, 0.62);
text-transform: uppercase;
font-weight: 500;
font-family: var(--font-tight);
}
.cta-strip p.cs-lead .cs-meta .cs-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--accent-page, #FFFFFF);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-page, #FFFFFF) 22%, transparent);
flex: 0 0 auto;
}
.cta-strip p.cs-lead .cs-meta .cs-sep {
margin: 0 0.25rem;
color: rgba(255, 255, 255, 0.35);
}
.cta-strip .btn {
background: var(--color-white);
color: var(--color-navy);
}
.cta-strip .btn:hover { background: var(--color-cream); }
.cta-strip.cs-founders { --accent-page: var(--accent-violet); }
.cta-strip.cs-funds { --accent-page: var(--accent-green); }
@media (max-width: 820px) {
.cta-strip .cs-inner { grid-template-columns: 1fr; gap: 1.25rem; }
}
.cta-dual {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(1rem, 2vw, 1.5rem);
}
.cta-dual .cta-strip h2 { font-size: clamp(1.25rem, 2vw, 1.75rem); }
@media (max-width: 820px) {
.cta-dual { grid-template-columns: 1fr; }
}
/* ---------- Principles long-form --------------------------------------- */
.principles-long { display: flex; flex-direction: column; gap: 0; }
.principle-long {
display: grid;
grid-template-columns: 4rem 1fr;
gap: clamp(1.5rem, 3vw, 2.5rem);
padding: clamp(2.5rem, 5vw, 4.5rem) 0;
border-top: 1px solid var(--color-border);
}
.principle-long:first-child { border-top: 0; padding-top: 0; }
.principle-long .pl-num {
font-family: var(--font-tight);
font-size: clamp(1.125rem, 1.4vw, 1.375rem);
color: var(--color-text-faint);
font-variant-numeric: tabular-nums;
font-weight: 500;
padding-top: 0.5rem;
letter-spacing: 0.02em;
}
.principle-long h2 {
font-family: var(--font-tight);
font-size: clamp(2rem, 4vw, 3.25rem);
color: var(--color-navy);
letter-spacing: -0.02em;
line-height: 1.05;
font-weight: 560;
max-width: 22ch;
}
.principle-long .pl-body {
margin-top: clamp(1.25rem, 2vw, 1.75rem);
display: flex; flex-direction: column; gap: 1.25rem;
max-width: 60ch;
color: var(--color-text);
line-height: 1.65;
font-size: 1.0625rem;
}
.principle-long .pl-body strong { color: var(--color-navy); font-weight: 500; }
.principle-long .pl-body em { color: var(--color-navy); font-style: italic; }
@media (max-width: 720px) {
.principle-long { grid-template-columns: 1fr; gap: 1rem; }
.principle-long .pl-num { font-size: 1rem; padding-top: 0; }
}
/* ---------- Principles · refined layout (v2) --------------------------- */
/* Sticky only works if no ancestor clips overflow. The global .section rule
applies overflow:hidden for decorative overflow control — we unset it on
the principles section so the TOC can stick as the user scrolls. */
.section:has(.principles-grid) { overflow: visible; overflow-x: clip; }
.principles-grid {
display: grid;
grid-template-columns: 240px 1fr;
gap: clamp(2rem, 5vw, 5rem);
align-items: start;
}
@media (max-width: 960px) { .principles-grid { grid-template-columns: 1fr; } }
/* Left TOC · sticky on desktop */
.principles-toc {
position: sticky;
top: calc(72px + 2rem);
align-self: start;
padding: 0;
border-left: 1px solid var(--color-border);
}
.principles-toc-label {
font-size: 0.6875rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-text-muted);
font-weight: 600;
padding: 0 1.25rem 0.75rem;
display: block;
}
.principles-toc ol { list-style: none; padding: 0; margin: 0; }
.principles-toc li { margin: 0; }
.principles-toc a {
display: grid;
grid-template-columns: 2rem 1fr;
align-items: baseline;
gap: 0.5rem;
padding: 0.625rem 1.25rem;
color: var(--color-text-muted);
font-family: var(--font-tight);
font-size: 0.9375rem;
font-weight: 500;
letter-spacing: -0.005em;
text-decoration: none;
border-left: 2px solid transparent;
margin-left: -1px;
transition: color 260ms var(--ease-out),
border-color 260ms var(--ease-out),
padding-left 260ms var(--ease-out);
}
.principles-toc a .toc-num {
font-size: 0.6875rem;
font-variant-numeric: tabular-nums;
letter-spacing: 0.08em;
color: var(--color-text-faint);
transition: color 200ms var(--ease-out);
}
.principles-toc a:hover { color: var(--color-navy); }
.principles-toc a.is-active {
color: var(--color-navy);
border-left-color: var(--color-navy);
padding-left: 1.5rem;
}
.principles-toc a.is-active .toc-num { color: var(--color-navy); }
@media (max-width: 960px) {
.principles-toc {
position: sticky;
top: 56px; /* sits just under the sticky nav */
z-index: 30; /* below nav (z-index: 40), above content */
background: var(--color-white);
box-shadow: 0 6px 14px -10px rgba(10, 22, 40, 0.18);
border-left: 0;
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
padding: 0.25rem 0;
margin-bottom: 2rem;
overflow-x: auto;
/* Promote to its own GPU layer to kill the iOS sticky-jitter. */
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
will-change: transform;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
contain: layout style;
}
.principles-toc-label { display: none; }
.principles-toc ol { display: flex; }
.principles-toc a {
grid-template-columns: auto auto;
padding: 0.75rem 1rem;
white-space: nowrap;
border-left: 0;
border-bottom: 2px solid transparent;
margin-left: 0;
/* Kill the color/border transitions on mobile.
The IntersectionObserver re-fires the .is-active class many times per
second during scroll. With a 260ms color/border transition, animations
pile up and items appear to vibrate. Snap state changes instead. */
transition: none;
}
.principles-toc a .toc-num { transition: none; }
.principles-toc a.is-active {
padding-left: 1rem;
border-bottom-color: var(--color-navy);
}
/* Anchors must clear nav + sticky TOC */
.principle-card { scroll-margin-top: calc(56px + 56px + 0.5rem); }
}
/* Stream of principles */
.principles-stream {
display: flex;
flex-direction: column;
gap: clamp(3rem, 5vw, 5rem);
}
.principle-card {
position: relative;
scroll-margin-top: calc(72px + 2rem);
padding-bottom: clamp(2rem, 3.5vw, 3rem);
border-bottom: 1px solid var(--color-border);
}
.principle-card:last-child { border-bottom: 0; padding-bottom: 0; }
.principle-card .pc-head {
display: flex;
align-items: center;
gap: 1.25rem;
margin-bottom: 1.5rem;
}
.principle-card .pc-num {
font-family: var(--font-tight);
font-size: clamp(2.5rem, 5.2vw, 4.25rem);
font-weight: 580;
line-height: 1;
color: var(--color-navy);
letter-spacing: -0.035em;
font-variant-numeric: tabular-nums;
position: relative;
padding-bottom: 0.45rem;
}
.principle-card .pc-num::after {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 28px; height: 2px;
background: var(--color-navy);
transform-origin: left;
transform: scaleX(0);
transition: transform 700ms var(--ease-out) 200ms;
}
.principle-card.is-in .pc-num::after { transform: scaleX(1); }
.principle-card .pc-icon {
width: 46px; height: 46px;
border: 1px solid var(--color-border);
border-radius: 11px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--color-white);
color: var(--color-navy);
transition: border-color 320ms var(--ease-out),
transform 320ms var(--ease-out),
box-shadow 320ms var(--ease-out);
}
.principle-card:hover .pc-icon {
border-color: var(--color-navy);
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(10, 22, 40, 0.08);
}
.principle-card .pc-icon svg {
width: 22px; height: 22px;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
.principle-card .pc-icon svg [data-draw] {
stroke-dasharray: 120;
stroke-dashoffset: 120;
transition: stroke-dashoffset 1100ms var(--ease-out) 150ms;
}
.principle-card.is-in .pc-icon svg [data-draw] {
stroke-dashoffset: 0;
}
.principle-card h2 {
font-family: var(--font-tight);
font-size: clamp(1.875rem, 3.2vw, 2.625rem);
color: var(--color-navy);
letter-spacing: -0.025em;
line-height: 1.05;
font-weight: 560;
margin: 0 0 1.25rem 0;
max-width: 22ch;
}
.principle-card .pc-body {
max-width: 64ch;
color: var(--color-text);
line-height: 1.65;
font-size: 1.0625rem;
}
.principle-card .pc-body p { margin: 0 0 1.25rem 0; }
.principle-card .pc-body p:last-child { margin-bottom: 0; }
.principle-card .pc-body em {
color: var(--color-navy);
font-style: italic;
font-weight: 500;
}
/* Pull quote · draws the strong statement out */
.principle-card .pc-pull {
position: relative;
margin: 1.75rem 0 0 0;
padding: 1.25rem 1.5rem 1.25rem 1.75rem;
background: color-mix(in srgb, var(--color-navy) 3%, var(--color-white));
border-radius: 10px;
font-family: var(--font-tight);
font-size: 1.125rem;
font-weight: 500;
color: var(--color-navy);
letter-spacing: -0.01em;
line-height: 1.4;
max-width: 54ch;
overflow: hidden;
}
.principle-card .pc-pull::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--color-navy);
transform-origin: top;
transform: scaleY(0);
transition: transform 900ms var(--ease-out) 350ms;
}
.principle-card.is-in .pc-pull::before { transform: scaleY(1); }
/* Grouped pills on principles page */
.principle-card .metric-pills--grouped { margin-top: 1.5rem; }
/* ---------- About page · sticky TOC + refined blocks ------------------- */
/* Allow sticky to work inside .section */
.section:has(.about-grid) { overflow: visible; overflow-x: clip; }
.about-grid {
display: grid;
grid-template-columns: 240px 1fr;
gap: clamp(2rem, 5vw, 5rem);
align-items: start;
}
@media (max-width: 960px) { .about-grid { grid-template-columns: 1fr; } }
/* Sticky TOC · mirrors the principles-toc visuals */
.about-toc {
position: sticky;
top: calc(72px + 2rem);
align-self: start;
padding: 0;
border-left: 1px solid var(--color-border);
}
.about-toc .principles-toc-label {
font-size: 0.6875rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-text-muted);
font-weight: 600;
padding: 0 1.25rem 0.75rem;
display: block;
}
.about-toc ol { list-style: none; padding: 0; margin: 0; }
.about-toc li { margin: 0; }
.about-toc a {
display: grid;
grid-template-columns: 2rem 1fr;
align-items: baseline;
gap: 0.5rem;
padding: 0.625rem 1.25rem;
color: var(--color-text-muted);
font-family: var(--font-tight);
font-size: 0.9375rem;
font-weight: 500;
letter-spacing: -0.005em;
text-decoration: none;
border-left: 2px solid transparent;
margin-left: -1px;
transition: color 260ms var(--ease-out),
border-color 260ms var(--ease-out),
padding-left 260ms var(--ease-out);
}
.about-toc a .toc-num {
font-size: 0.6875rem;
font-variant-numeric: tabular-nums;
letter-spacing: 0.08em;
color: var(--color-text-faint);
transition: color 200ms var(--ease-out);
}
.about-toc a:hover { color: var(--color-navy); }
.about-toc a.is-active {
color: var(--color-navy);
border-left-color: var(--color-navy);
padding-left: 1.5rem;
}
.about-toc a.is-active .toc-num { color: var(--color-navy); }
@media (max-width: 960px) {
.about-toc {
position: sticky;
top: 56px;
z-index: 30;
background: var(--color-white);
box-shadow: 0 6px 14px -10px rgba(10, 22, 40, 0.18);
border-left: 0;
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
padding: 0.25rem 0;
margin-bottom: 2rem;
overflow-x: auto;
/* Promote to its own GPU layer to kill the iOS sticky-jitter. */
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
will-change: transform;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
contain: layout style;
}
.about-toc .principles-toc-label { display: none; }
.about-toc ol { display: flex; }
.about-toc a {
grid-template-columns: auto auto;
padding: 0.75rem 1rem;
white-space: nowrap;
border-left: 0;
border-bottom: 2px solid transparent;
margin-left: 0;
/* See .principles-toc a above for rationale. */
transition: none;
}
.about-toc a .toc-num { transition: none; }
.about-toc a.is-active {
padding-left: 1rem;
border-bottom-color: var(--color-navy);
}
.about-block { scroll-margin-top: calc(56px + 56px + 0.5rem); }
}
.about-stream {
display: flex;
flex-direction: column;
gap: clamp(3rem, 5vw, 5rem);
}
.about-block {
position: relative;
scroll-margin-top: calc(72px + 2rem);
padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
border-bottom: 1px solid var(--color-border);
}
.about-block:last-child { border-bottom: 0; padding-bottom: 0; }
.about-block .ab-head {
display: flex;
align-items: center;
gap: 1.25rem;
margin-bottom: 1.5rem;
}
.about-block .ab-num {
font-family: var(--font-tight);
font-size: clamp(2.5rem, 5.2vw, 4.25rem);
font-weight: 580;
line-height: 1;
color: var(--color-navy);
letter-spacing: -0.035em;
font-variant-numeric: tabular-nums;
position: relative;
padding-bottom: 0.45rem;
}
.about-block .ab-num::after {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 28px; height: 2px;
background: var(--color-navy);
transform-origin: left;
transform: scaleX(0);
transition: transform 700ms var(--ease-out) 200ms;
}
.about-block.is-in .ab-num::after { transform: scaleX(1); }
.about-block .ab-icon {
width: 46px; height: 46px;
border: 1px solid var(--color-border);
border-radius: 11px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--color-white);
color: var(--color-navy);
transition: border-color 320ms var(--ease-out),
transform 320ms var(--ease-out),
box-shadow 320ms var(--ease-out);
}
.about-block:hover .ab-icon {
border-color: var(--color-navy);
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(10, 22, 40, 0.08);
}
.about-block .ab-icon svg {
width: 22px; height: 22px;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
.about-block .ab-icon svg [data-draw] {
stroke-dasharray: 120;
stroke-dashoffset: 120;
transition: stroke-dashoffset 1100ms var(--ease-out) 150ms;
}
.about-block.is-in .ab-icon svg [data-draw] { stroke-dashoffset: 0; }
.about-block h2 {
font-family: var(--font-tight);
font-size: clamp(1.875rem, 3.2vw, 2.625rem);
color: var(--color-navy);
letter-spacing: -0.025em;
line-height: 1.05;
font-weight: 560;
margin: 0 0 1.25rem 0;
max-width: 28ch;
}
.about-block .ab-body {
max-width: 64ch;
color: var(--color-text);
line-height: 1.65;
font-size: 1.0625rem;
}
.about-block .ab-body p { margin: 0 0 1.25rem 0; }
.about-block .ab-body p:last-child { margin-bottom: 0; }
.about-block .ab-body strong { color: var(--color-navy); font-weight: 500; }
.about-block .ab-body em { color: var(--color-navy); font-style: italic; }
/* Pull quote on about */
.about-block .ab-pull {
position: relative;
margin: 1.75rem 0 0 0;
padding: 1.25rem 1.5rem 1.25rem 1.75rem;
background: color-mix(in srgb, var(--color-navy) 3%, var(--color-white));
border-radius: 10px;
font-family: var(--font-tight);
font-size: 1.125rem;
font-weight: 500;
color: var(--color-navy);
letter-spacing: -0.01em;
line-height: 1.4;
max-width: 54ch;
overflow: hidden;
}
.about-block .ab-pull::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--color-navy);
transform-origin: top;
transform: scaleY(0);
transition: transform 900ms var(--ease-out) 350ms;
}
.about-block.is-in .ab-pull::before { transform: scaleY(1); }
/* Re-home legacy inner blocks to fit the stream flow */
.about-block .founder-card,
.about-block .footprint-block,
.about-block .logo-strip { margin-top: 0.5rem; }
/* ---------- Resources list --------------------------------------------- */
.resource-section { margin-bottom: clamp(3rem, 5vw, 4rem); }
.resource-section .rs-label {
display: inline-flex; align-items: center; gap: 0.65rem;
font-size: 0.75rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-text-muted);
font-weight: 500;
margin-bottom: 1.5rem;
}
.resource-section .rs-label .rs-bar {
display: inline-block; width: 18px; height: 2px;
background: var(--color-navy);
}
.resource-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(1rem, 2vw, 1.5rem);
}
@media (max-width: 760px) {
.resource-grid { grid-template-columns: 1fr; }
}
.resource-card {
position: relative;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: 14px;
padding: clamp(1.5rem, 2.4vw, 2rem);
display: grid;
grid-template-columns: auto 1fr auto;
gap: 0.25rem 1.25rem;
align-items: start;
box-shadow: 0 1px 2px rgba(10, 22, 40, 0.04);
transition: border-color 260ms var(--ease-out), transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
}
.resource-card:hover { border-color: #D6D3CA; transform: translateY(-2px); box-shadow: var(--shadow-card); }
.resource-card .rc-icon {
grid-row: 1 / 3;
width: 44px; height: 44px;
border-radius: 12px;
border: 1px solid var(--color-border);
display: grid; place-items: center;
background: var(--color-cream);
}
.resource-card.rc-excel .rc-icon { border-color: rgba(16,185,129,0.25); background: rgba(16,185,129,0.06); color: #047857; }
.resource-card.rc-pdf .rc-icon { border-color: rgba(220,38,38,0.22); background: rgba(220,38,38,0.05); color: #B91C1C; }
.resource-card.rc-web .rc-icon { border-color: rgba(47,111,235,0.25); background: rgba(47,111,235,0.05); color: var(--accent-blue); }
.resource-card.rc-contact .rc-icon { border-color: rgba(10,22,40,0.18); background: rgba(10,22,40,0.04); color: var(--color-navy); }
.resource-card h4 {
font-family: var(--font-tight);
font-size: 1.125rem;
color: var(--color-navy);
font-weight: 580;
letter-spacing: -0.01em;
line-height: 1.25;
}
.resource-card .rc-meta {
font-size: 0.6875rem;
color: var(--color-text-faint);
letter-spacing: 0.12em;
text-transform: uppercase;
align-self: start;
font-weight: 500;
padding-top: 0.45rem;
white-space: nowrap;
}
.resource-card p {
grid-column: 2 / 4;
color: var(--color-text-muted);
font-size: 0.9375rem;
line-height: 1.55;
margin-top: 0.5rem;
}
.resource-card .rc-cta {
grid-column: 2 / 4;
margin-top: 1.25rem;
display: inline-flex; align-items: center; gap: 0.45rem;
font-family: var(--font-tight);
font-size: 0.9375rem;
color: var(--color-navy);
font-weight: 580;
letter-spacing: -0.01em;
}
.resource-card .rc-cta .arrow { transition: transform 200ms var(--ease); }
.resource-card:hover .rc-cta .arrow { transform: translateX(3px); }
@media (max-width: 480px) {
.resource-card { grid-template-columns: auto 1fr; }
.resource-card .rc-meta { grid-column: 2; justify-self: end; }
.resource-card p, .resource-card .rc-cta { grid-column: 1 / 3; }
}
/* ---------- About: founder card + footprint ---------------------------- */
.founder-card {
display: grid;
grid-template-columns: auto 1fr;
gap: clamp(1.5rem, 3vw, 3rem);
align-items: start;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: 20px;
padding: clamp(2rem, 3.5vw, 3rem);
}
.founder-card .fc-photo {
width: clamp(120px, 14vw, 180px);
aspect-ratio: 1 / 1;
border-radius: 50%;
background: var(--color-navy);
color: var(--color-white);
display: grid; place-items: center;
font-family: var(--font-tight);
font-weight: 580;
font-size: clamp(2.25rem, 3.5vw, 3rem);
letter-spacing: -0.01em;
position: relative;
overflow: hidden;
isolation: isolate;
}
.founder-card .fc-photo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
display: block;
}
.founder-card .fc-photo.has-photo { background: transparent; }
.founder-card .fc-photo::after {
content: "";
position: absolute; inset: -5px;
border: 1px solid var(--color-border);
border-radius: 50%;
}
.founder-card h3 {
font-family: var(--font-tight);
font-size: clamp(1.75rem, 3vw, 2.5rem);
color: var(--color-navy);
letter-spacing: -0.02em;
font-weight: 560;
line-height: 1.05;
}
.founder-card .fc-role {
font-family: var(--font-tight);
font-size: 0.9375rem;
color: var(--color-text-muted);
margin-top: 0.35rem;
letter-spacing: -0.01em;
font-weight: 500;
}
.founder-card .fc-rows {
margin-top: clamp(1.25rem, 2vw, 1.75rem);
display: flex; flex-direction: column; gap: 0.9rem;
font-size: 0.9375rem;
color: var(--color-text);
line-height: 1.55;
max-width: 55ch;
}
.founder-card .fc-rows strong {
color: var(--color-navy);
font-weight: 500;
font-family: var(--font-tight);
letter-spacing: -0.005em;
}
.founder-card .fc-linkedin {
display: inline-flex; align-items: center; gap: 0.4rem;
margin-top: 1.25rem;
font-family: var(--font-tight);
color: var(--color-navy);
font-weight: 580;
font-size: 0.9375rem;
letter-spacing: -0.01em;
}
.founder-card .fc-linkedin::after { content: "→"; transition: transform 200ms var(--ease); }
.founder-card .fc-linkedin:hover::after { transform: translateX(3px); }
@media (max-width: 720px) {
.founder-card { grid-template-columns: 1fr; text-align: left; }
}
.footprint-block {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
.footprint-card {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: 14px;
padding: clamp(1.25rem, 2vw, 1.75rem);
position: relative;
}
.footprint-card .fp-label {
font-size: 0.6875rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-text-muted);
font-weight: 500;
}
.footprint-card h4 {
font-family: var(--font-tight);
font-size: 1.25rem;
color: var(--color-navy);
margin-top: 0.5rem;
font-weight: 580;
letter-spacing: -0.01em;
}
.footprint-card p {
color: var(--color-text-muted);
font-size: 0.9375rem;
margin-top: 0.35rem;
line-height: 1.5;
}
@media (max-width: 720px) {
.footprint-block { grid-template-columns: 1fr; }
}
/* ---------- Contact form ------------------------------------------------ */
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(1.5rem, 2.5vw, 2.5rem);
}
.form-card {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: 18px;
padding: clamp(1.75rem, 3vw, 2.5rem);
position: relative;
overflow: hidden;
}
.form-card::before {
content: "";
position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: var(--accent-page, var(--accent-blue));
}
.form-card.fc-founders { --accent-page: var(--accent-violet); }
.form-card.fc-funds { --accent-page: var(--accent-green); }
.form-card .fc-label {
display: inline-flex; align-items: center; gap: 0.5rem;
font-family: var(--font-tight);
font-size: 0.75rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent-page, var(--accent-blue));
font-weight: 580;
}
.form-card .fc-label .fc-dot {
width: 7px; height: 7px; border-radius: 50%;
background: currentColor;
box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent);
animation: pulse-dot 2.4s ease-in-out infinite;
}
.form-card h3 {
font-family: var(--font-tight);
font-size: clamp(1.375rem, 2.2vw, 1.75rem);
color: var(--color-navy);
font-weight: 580;
margin-top: 0.75rem;
letter-spacing: -0.015em;
line-height: 1.15;
}
.form-card .fc-intro {
color: var(--color-text-muted);
margin-top: 0.5rem;
font-size: 0.9375rem;
line-height: 1.55;
max-width: 42ch;
}
.form-card form {
margin-top: clamp(1.5rem, 2.5vw, 2rem);
display: flex; flex-direction: column; gap: 0.9rem;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.9rem;
}
.form-field { display: flex; flex-direction: column; gap: 0.35rem; }
.form-field label {
font-family: var(--font-tight);
font-size: 0.6875rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-text-muted);
font-weight: 580;
}
.form-field input,
.form-field select,
.form-field textarea {
border: 1px solid var(--color-border);
border-radius: 10px;
padding: 0.75rem 0.9rem;
font-family: var(--font-sans);
font-size: 0.9375rem;
color: var(--color-navy);
background: var(--color-cream);
transition: border-color 180ms var(--ease), background 180ms var(--ease), box-shadow 180ms var(--ease);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
outline: none;
border-color: var(--accent-page, var(--accent-blue));
background: var(--color-white);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-page, var(--accent-blue)) 15%, transparent);
}
.form-field textarea { resize: vertical; min-height: 96px; }
.form-card .btn {
margin-top: 0.5rem;
background: var(--color-navy);
color: var(--color-white);
align-self: flex-start;
}
.form-card .btn:hover { background: #152236; }
.form-card .fc-note {
margin-top: 0.75rem;
font-size: 0.75rem;
color: var(--color-text-faint);
letter-spacing: 0.01em;
}
@media (max-width: 820px) {
.form-grid { grid-template-columns: 1fr; }
.form-row { grid-template-columns: 1fr; }
}
/* ---------- Direct contact / response ---------------------------------- */
.direct-block {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(1.5rem, 3vw, 3rem);
padding: clamp(1.75rem, 3vw, 2.5rem);
background: var(--color-white);
border-radius: 18px;
border: 1px solid var(--color-border);
}
.direct-block h4 {
font-family: var(--font-tight);
font-size: 1.25rem;
color: var(--color-navy);
font-weight: 580;
letter-spacing: -0.01em;
margin-bottom: 0.5rem;
}
.direct-block p {
color: var(--color-text-muted);
font-size: 0.9375rem;
line-height: 1.55;
}
.direct-block a {
color: var(--color-navy);
font-weight: 500;
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--color-navy) 30%, transparent);
text-underline-offset: 3px;
transition: text-decoration-color 200ms var(--ease);
}
.direct-block a:hover { text-decoration-color: var(--color-navy); }
@media (max-width: 720px) {
.direct-block { grid-template-columns: 1fr; }
}
/* ---------- Prose container (Principles intro, About story) ------------ */
.prose-narrow {
max-width: 58ch;
font-size: 1.0625rem;
line-height: 1.65;
color: var(--color-text);
}
.prose-narrow p { margin-bottom: 1rem; }
.prose-narrow p:last-child { margin-bottom: 0; }
.prose-narrow strong { color: var(--color-navy); font-weight: 500; }
.prose-narrow em { color: var(--color-navy); }
/* ---------- Legal pages (dense prose, long documents) ---------------- */
.legal-prose {
max-width: 68ch;
font-size: 1rem;
line-height: 1.7;
color: var(--color-text);
}
.legal-prose p { margin: 0 0 1rem; }
.legal-prose p:last-child { margin-bottom: 0; }
.legal-prose strong { color: var(--color-navy); font-weight: 500; }
.legal-prose em { color: var(--color-navy); }
.legal-prose a {
color: var(--color-navy);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
text-decoration-color: color-mix(in srgb, var(--color-navy) 40%, transparent);
transition: text-decoration-color 180ms var(--ease);
}
.legal-prose a:hover { text-decoration-color: var(--color-navy); }
.legal-prose ul {
list-style: none;
padding: 0;
margin: 0 0 1rem;
}
.legal-prose ul li {
position: relative;
padding-left: 1.125rem;
margin-bottom: 0.375rem;
color: var(--color-text);
}
.legal-prose ul li::before {
content: "";
position: absolute;
left: 0;
top: 0.6875rem;
width: 6px;
height: 1px;
background: var(--color-text-muted);
}
.legal-prose ol {
padding-left: 1.25rem;
margin: 0 0 1rem;
}
.legal-prose ol li { margin-bottom: 0.375rem; padding-left: 0.25rem; }
.legal-block {
margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.legal-block:last-child { margin-bottom: 0; }
.legal-block h2 {
font-family: "Inter Tight", "Inter", sans-serif;
font-weight: 580;
font-size: clamp(1.625rem, 3vw, 2rem);
letter-spacing: -0.015em;
color: var(--color-navy);
margin: 0 0 1.25rem;
line-height: 1.2;
}
.legal-block h3 {
font-family: "Inter Tight", "Inter", sans-serif;
font-weight: 560;
font-size: 1.0625rem;
letter-spacing: -0.005em;
color: var(--color-navy);
margin: 1.75rem 0 0.5rem;
line-height: 1.35;
}
.legal-block h3:first-child { margin-top: 0; }
.legal-placeholder {
display: inline-block;
padding: 0.125rem 0.5rem;
border-radius: 4px;
background: color-mix(in srgb, var(--accent-blue) 10%, transparent);
border: 1px dashed color-mix(in srgb, var(--accent-blue) 35%, transparent);
color: var(--color-navy);
font-family: "Inter", sans-serif;
font-size: 0.875rem;
font-weight: 500;
letter-spacing: -0.005em;
}
.legal-note {
border-left: 2px solid var(--accent-blue);
background: color-mix(in srgb, var(--accent-blue) 5%, transparent);
padding: 1rem 1.25rem;
border-radius: 0 8px 8px 0;
font-size: 0.9375rem;
color: var(--color-text-muted);
margin-bottom: clamp(2rem, 4vw, 3rem);
}
.legal-note strong { color: var(--color-navy); font-weight: 500; }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
* { animation: none !important; transition-duration: 0.01ms !important; }
}
/* =======================================================================
April 2026 patch · hero hierarchy + persona visuals + provocation line
======================================================================= */
/* ---------- Hero side link (discreet funds entry) ----------------------- */
.hero-side-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
align-self: center;
padding: 0.875rem 0.25rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text-muted);
text-decoration: none;
letter-spacing: -0.005em;
position: relative;
transition: color 0.18s ease;
}
.hero-side-link span {
color: var(--color-navy);
border-bottom: 1px solid rgba(10, 22, 40, 0.22);
padding-bottom: 1px;
transition: border-color 0.18s ease;
}
.hero-side-link:hover { color: var(--color-navy); }
.hero-side-link:hover span { border-bottom-color: var(--color-navy); }
.cta-final .cta-group .hero-side-link {
margin-left: 0.25rem;
}
/* ---------- Hero signature avatar · photo support ----------------------- */
.hero-signature .sig-avatar img,
.portrait .avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
position: relative;
z-index: 1;
}
.hero-signature .sig-avatar:has(img)::after,
.portrait .avatar:has(img)::after { opacity: 0.25; mix-blend-mode: overlay; }
.hero-signature .sig-avatar:has(img),
.portrait .avatar:has(img) {
background: var(--color-navy);
}
/* ---------- Persona visuals · upgraded (no cream, bigger type) ---------- */
.persona-visual {
background: linear-gradient(180deg, #0B1A30 0%, #0A1628 100%);
border: 1px solid rgba(255, 255, 255, 0.06);
padding: 1rem 1.1rem 1.05rem;
font-size: 0.8125rem;
color: rgba(255, 255, 255, 0.82);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.04),
0 14px 32px -20px rgba(10, 22, 40, 0.55);
border-radius: 12px;
}
.persona-visual::before {
height: 1px;
opacity: 0.55;
background: linear-gradient(90deg, transparent, currentColor 20%, currentColor 80%, transparent);
}
.persona-visual::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06) 50%, transparent);
}
.persona-visual .pv-header {
font-size: 0.6875rem;
letter-spacing: 0.14em;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 0.75rem;
}
.persona-visual .pv-header .pv-dot {
width: 6px; height: 6px;
background: currentColor;
box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent);
animation: pvPulse 2.4s ease-in-out infinite;
}
@keyframes pvPulse {
0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); }
50% { box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 10%, transparent); }
}
/* Cockpit (founders) — bigger numbers, subtle gradient under the value */
.persona-visual.pv-cockpit .pv-kpis { gap: 0.5rem; }
.persona-visual.pv-cockpit .pv-kpi {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.07);
padding: 0.55rem 0.65rem 0.6rem;
border-radius: 8px;
position: relative;
overflow: hidden;
}
.persona-visual.pv-cockpit .pv-kpi::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 30%;
background: linear-gradient(180deg, transparent, color-mix(in srgb, currentColor 14%, transparent));
pointer-events: none;
}
.persona-visual.pv-cockpit .pv-kpi .k {
font-size: 0.625rem;
color: rgba(255, 255, 255, 0.45);
letter-spacing: 0.1em;
margin-bottom: 0.25rem;
}
.persona-visual.pv-cockpit .pv-kpi .v {
font-size: 1.0625rem;
color: #FFFFFF;
font-family: var(--font-tight);
font-weight: 580;
}
.persona-visual.pv-cockpit .pv-kpi .d {
font-size: 0.625rem;
margin-top: 0.15rem;
color: currentColor;
opacity: 0.85;
}
/* Checklist (funds) — bigger rows, clearer status */
.persona-visual.pv-checklist .pv-list { gap: 0.45rem; }
.persona-visual.pv-checklist .pv-item {
font-size: 0.8125rem;
grid-template-columns: 16px 1fr auto;
gap: 0.6rem;
color: rgba(255, 255, 255, 0.9);
padding: 0.35rem 0.15rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.persona-visual.pv-checklist .pv-item:last-child { border-bottom: none; }
.persona-visual.pv-checklist .pv-check {
width: 16px; height: 16px;
background: currentColor;
}
.persona-visual.pv-checklist .pv-check svg { width: 10px; height: 10px; stroke: #0A1628; }
.persona-visual.pv-checklist .pv-item.pending {
color: rgba(255, 255, 255, 0.45);
}
.persona-visual.pv-checklist .pv-item.pending .pv-check {
background: transparent;
border: 1px dashed currentColor;
}
.persona-visual.pv-checklist .pv-item .pv-status {
font-size: 0.625rem;
letter-spacing: 0.1em;
color: currentColor;
opacity: 0.7;
}
/* Override any prior mobile overrides */
@media (max-width: 720px) {
.persona-visual.pv-cockpit .pv-kpi .v { font-size: 0.9375rem; }
.persona-visual.pv-checklist .pv-item { font-size: 0.75rem; }
}
/* ---------- Provocation · word-by-word reveal --------------------------- */
.provocation blockquote {
padding-bottom: 0;
}
.provocation blockquote em {
position: relative;
display: inline;
padding-bottom: 0;
}
.provocation blockquote em::after { content: none; }
.provocation blockquote .pq-first {
display: block;
color: var(--color-navy);
margin-bottom: 0.35em;
}
.provocation blockquote .pq-reveal {
display: inline;
font-style: normal;
color: var(--accent-violet);
}
.provocation blockquote .pq-word {
display: inline-block;
opacity: 0;
transform: translateY(0.35em);
filter: blur(6px);
transition:
opacity 1.1s cubic-bezier(0.22, 0.9, 0.22, 1) calc(var(--i, 0) * 220ms),
transform 1.1s cubic-bezier(0.22, 0.9, 0.22, 1) calc(var(--i, 0) * 220ms),
filter 1.1s cubic-bezier(0.22, 0.9, 0.22, 1) calc(var(--i, 0) * 220ms);
will-change: opacity, transform, filter;
}
.provocation blockquote .pq-word + .pq-word { margin-left: 0.22em; }
.provocation.is-inview blockquote .pq-word {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
.provocation blockquote .pq-word {
opacity: 1;
transform: none;
filter: none;
transition: none;
}
}
/* ---------- Hero signature photo fallback (older browsers sans :has) ---- */
.hero-signature .sig-avatar.has-photo,
.portrait .avatar.has-photo { background: var(--color-navy); }
.hero-signature .sig-avatar.has-photo::after,
.portrait .avatar.has-photo::after { opacity: 0; }
/* ---------- Resources page · sticky TOC + stream (alias of about) ------- */
.section:has(.resources-grid) { overflow: visible; overflow-x: clip; }
.resources-grid {
display: grid;
grid-template-columns: 240px 1fr;
gap: clamp(2rem, 5vw, 5rem);
align-items: start;
}
@media (max-width: 960px) { .resources-grid { grid-template-columns: 1fr; } }
.resources-toc {
position: sticky;
top: calc(72px + 2rem);
align-self: start;
padding: 0;
border-left: 1px solid var(--color-border);
}
.resources-toc .principles-toc-label {
font-size: 0.6875rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-text-muted);
font-weight: 600;
padding: 0 1.25rem 0.75rem;
display: block;
}
.resources-toc ol { list-style: none; padding: 0; margin: 0; }
.resources-toc li { margin: 0; }
.resources-toc a {
display: grid;
grid-template-columns: 2rem 1fr;
align-items: baseline;
gap: 0.5rem;
padding: 0.625rem 1.25rem;
color: var(--color-text-muted);
font-family: var(--font-tight);
font-size: 0.9375rem;
font-weight: 500;
letter-spacing: -0.005em;
text-decoration: none;
border-left: 2px solid transparent;
margin-left: -1px;
transition: color 260ms var(--ease-out),
border-color 260ms var(--ease-out),
padding-left 260ms var(--ease-out);
}
.resources-toc a .toc-num {
font-size: 0.6875rem;
font-variant-numeric: tabular-nums;
letter-spacing: 0.08em;
color: var(--color-text-faint);
transition: color 200ms var(--ease-out);
}
.resources-toc a:hover { color: var(--color-navy); }
.resources-toc a.is-active {
color: var(--color-navy);
border-left-color: var(--color-navy);
padding-left: 1.5rem;
}
.resources-toc a.is-active .toc-num { color: var(--color-navy); }
@media (max-width: 960px) {
.resources-toc {
position: sticky;
top: 56px;
z-index: 30;
background: var(--color-white);
box-shadow: 0 6px 14px -10px rgba(10, 22, 40, 0.18);
border-left: 0;
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
padding: 0.25rem 0;
margin-bottom: 2rem;
overflow-x: auto;
/* Promote to its own GPU layer to kill the iOS sticky-jitter. */
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
will-change: transform;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
contain: layout style;
}
.resources-toc .principles-toc-label { display: none; }
.resources-toc ol { display: flex; }
.resources-toc a {
grid-template-columns: auto auto;
padding: 0.75rem 1rem;
white-space: nowrap;
border-left: 0;
border-bottom: 2px solid transparent;
margin-left: 0;
/* See .principles-toc a above for rationale. */
transition: none;
}
.resources-toc a .toc-num { transition: none; }
.resources-toc a.is-active {
padding-left: 1rem;
border-bottom-color: var(--color-navy);
}
.resources-block { scroll-margin-top: calc(56px + 56px + 0.5rem); }
}
.resources-stream {
display: flex;
flex-direction: column;
gap: clamp(3rem, 5vw, 5rem);
}
.resources-block {
position: relative;
scroll-margin-top: calc(72px + 2rem);
padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
border-bottom: 1px solid var(--color-border);
}
.resources-block:last-child { border-bottom: 0; padding-bottom: 0; }
.resources-block .rb-head {
display: flex;
align-items: center;
gap: 1.25rem;
margin-bottom: 0.5rem;
}
.resources-block .rb-num {
font-family: var(--font-tight);
font-size: 0.75rem;
font-weight: 580;
letter-spacing: 0.16em;
color: var(--color-text-faint);
font-variant-numeric: tabular-nums;
}
.resources-block .rb-icon {
width: 34px;
height: 34px;
border-radius: 10px;
display: grid;
place-items: center;
border: 1px solid var(--color-border);
background: var(--color-cream);
flex-shrink: 0;
color: var(--color-text-muted);
}
.resources-block .rb-icon-excel { border-color: rgba(16,185,129,0.25); background: rgba(16,185,129,0.06); color: #047857; }
.resources-block .rb-icon-pdf { border-color: rgba(220,38,38,0.22); background: rgba(220,38,38,0.05); color: #B91C1C; }
.resources-block .rb-icon-web { border-color: rgba(47,111,235,0.25); background: rgba(47,111,235,0.05); color: var(--accent-blue); }
.resources-block .rb-icon-dir { border-color: rgba(139,92,246,0.25); background: rgba(139,92,246,0.05); color: var(--accent-violet); }
.resources-block .rb-kicker {
font-size: 0.75rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-text-muted);
font-weight: 600;
}
.resources-block > h2 {
font-family: var(--font-tight);
font-size: clamp(1.75rem, 3.5vw, 2.25rem);
font-weight: 580;
letter-spacing: -0.02em;
color: var(--color-navy);
margin: 0 0 1.5rem;
line-height: 1.1;
}
/* ---------- Founders-only timeline (solo lane on index) ----------------- */
.founders-timeline .lane {
position: relative;
padding: clamp(1rem, 1.8vw, 1.5rem) 0 0;
}
.founders-timeline .lane-label {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0.75rem 1.5rem;
margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
padding-left: 1rem;
border-left: 2px solid currentColor;
color: var(--accent-violet);
}
.founders-timeline .lane-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-tight);
font-size: 0.9375rem;
font-weight: 580;
color: var(--color-navy);
letter-spacing: -0.01em;
}
.founders-timeline .lane-badge .lane-dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
background: var(--accent-violet);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-violet) 20%, transparent);
animation: pulse-dot 2.4s ease-in-out infinite;
}
.founders-timeline .lane-meta {
font-size: 0.6875rem;
color: var(--color-text-muted);
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 500;
}
.founders-timeline .lane-question {
margin-left: auto;
font-style: italic;
font-size: 0.9375rem;
color: var(--color-text-muted);
letter-spacing: -0.01em;
font-family: var(--font-tight);
font-weight: 500;
}
.founders-timeline .timeline-grid::before {
background: repeating-linear-gradient(90deg,
color-mix(in srgb, var(--accent-violet) 35%, var(--color-border)) 0,
color-mix(in srgb, var(--accent-violet) 35%, var(--color-border)) 4px,
transparent 4px, transparent 10px);
}
.founders-timeline .t-icon {
color: var(--accent-violet);
border-color: color-mix(in srgb, var(--accent-violet) 28%, var(--color-border));
background: color-mix(in srgb, var(--accent-violet) 5%, var(--color-cream));
}
.founders-timeline .t-step::before { border-color: var(--accent-violet); }
.founders-timeline .t-step.is-in::before {
background: var(--accent-violet);
animation: pulseRingViolet 1.8s ease-out 0.2s;
}
@media (max-width: 960px) {
.founders-timeline .timeline-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.25rem; }
.founders-timeline .timeline-grid::before { display: none; }
.founders-timeline .lane-question { margin-left: 0; width: 100%; }
}
@media (max-width: 640px) {
.founders-timeline .timeline-grid { grid-template-columns: 1fr; }
}
/* ---------- Hero · gradient accent (no italic) -------------------------- */
.accent-gradient {
font-style: normal;
font-weight: 560;
padding-inline-end: 0.06em;
background: linear-gradient(92deg,
var(--accent-violet) 0%,
var(--accent-violet) 22%,
#6B6BE8 50%,
var(--accent-green) 78%,
var(--accent-green) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
letter-spacing: -0.018em;
}
/* ---------- Hero · sub-duo (two-sided subtitle) -------------------------
Goal: unified type and color within each row. Only a small colored dot
distinguishes sides — the label and the descriptive text share the same
font, size, weight, and color. The vertical gradient rail ties the two
rows together as one statement. */
.sub-duo {
display: flex;
flex-direction: column;
gap: 0.55rem;
margin: 1.5rem 0 2.25rem;
max-width: 480px;
position: relative;
}
.sub-duo::before {
content: "";
position: absolute;
left: 0;
top: 10px;
bottom: 10px;
width: 2px;
border-radius: 2px;
background: linear-gradient(180deg, var(--accent-violet) 0%, #6B6BE8 50%, var(--accent-green) 100%);
opacity: 0.85;
}
.sub-duo__row {
display: flex;
align-items: baseline;
column-gap: 0.55rem;
row-gap: 0.05rem;
padding-left: 1rem;
flex-wrap: wrap;
--dot: var(--accent-violet);
font-family: var(--font-tight);
font-size: clamp(1rem, 1.28vw, 1.1875rem);
line-height: 1.5;
color: var(--color-navy);
letter-spacing: -0.005em;
font-weight: 400;
}
.sub-duo__row:nth-child(2) { --dot: var(--accent-green); }
.sub-duo__tag {
display: inline-flex;
align-items: baseline;
gap: 0.45rem;
font: inherit;
color: inherit;
font-weight: 580;
letter-spacing: -0.005em;
text-transform: none;
white-space: nowrap;
position: relative;
}
.sub-duo__tag::before {
content: "";
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--dot);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot) 16%, transparent);
transform: translateY(-1px);
flex: 0 0 auto;
}
.sub-duo__tag::after {
content: "·";
margin-left: 0.35rem;
color: color-mix(in srgb, var(--color-navy) 30%, transparent);
font-weight: 400;
}
.sub-duo__tag--funds { color: inherit; }
.sub-duo__text {
font: inherit;
color: inherit;
font-weight: 400;
}
@media (max-width: 640px) {
.sub-duo { max-width: 100%; }
.sub-duo__row { font-size: 1rem; padding-left: 0.85rem; }
}
/* ---------- Hero Picker · two-column CTA block ------------------------- */
/* A deliberate fork: one column per audience, each with a colored eyebrow
tag and a single black button. Replaces the older sub-duo + hero-ctas. */
.hero-picker {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
gap: clamp(1.25rem, 3vw, 2.5rem);
align-items: start;
margin-top: 1.25rem;
max-width: 560px;
}
.hero-picker .hp-col {
display: flex;
flex-direction: column;
gap: 0.875rem;
min-width: 0;
}
.hero-picker .hp-tag {
display: inline-flex;
align-items: center;
gap: 0.55rem;
font-family: var(--font-tight);
font-weight: 580;
font-size: 0.75rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent-violet);
line-height: 1;
padding-left: 0;
}
.hero-picker .hp-tag::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
flex: 0 0 auto;
box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 14%, transparent);
}
.hero-picker .hp-tag--funds { color: var(--accent-green); }
.hero-picker .hp-btn {
align-self: flex-start;
padding: 0.95rem 1.2rem;
font-size: 0.9375rem;
white-space: normal;
width: auto;
max-width: 100%;
box-sizing: border-box;
line-height: 1.25;
}
.hero-picker .hp-divider {
width: 1px;
min-height: 3.2rem;
background: var(--color-border);
margin-top: 0.15rem;
align-self: stretch;
opacity: 0.75;
}
.hero-picker .hp-link {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 0.45rem;
color: var(--color-navy);
font-family: 'Inter Tight', 'Inter', sans-serif;
font-weight: 580;
font-size: 1.0625rem;
letter-spacing: -0.01em;
padding: 0.55rem 0;
border-bottom: 1px solid var(--color-navy);
text-decoration: none;
transition: color 0.2s ease, border-color 0.2s ease;
line-height: 1.25;
}
.hero-picker .hp-link .arrow {
transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hero-picker .hp-link:hover {
color: var(--accent-green);
border-bottom-color: var(--accent-green);
}
.hero-picker .hp-link:hover .arrow { transform: translateX(4px); }
@media (max-width: 720px) {
.hero-picker {
grid-template-columns: minmax(0, 1fr);
gap: 1.5rem;
max-width: 100%;
}
.hero-picker .hp-divider {
width: 100%;
min-height: 1px;
height: 1px;
margin: 0.25rem 0;
}
.hero-picker .hp-btn { width: 100%; justify-content: center; display: flex; }
.hero-picker .hp-link { align-self: flex-start; }
}
/* Tighten the hero's bottom padding now that the picker is denser than the
old sub-duo + CTAs + signature stack. */
.hero { padding-block: clamp(3rem, 6vw, 5.5rem) clamp(2.5rem, 5vw, 4.5rem); }
/* ---------- How It Works · solo switch-hint ----------------------------- */
.switch-hint--solo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 1rem;
padding: 0.35rem 0.7rem 0.4rem;
border: 1px solid color-mix(in srgb, var(--accent-violet) 22%, var(--color-border));
border-radius: var(--radius-full);
font-size: 0.75rem;
letter-spacing: 0.01em;
color: var(--color-text-muted);
background: color-mix(in srgb, var(--accent-violet) 5%, var(--color-white));
}
.switch-hint--solo::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: var(--accent-violet);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-violet) 18%, transparent);
}
/* ---------- Method · dark persona-visual variants ----------------------- */
.persona-visual.pv-fees,
.persona-visual.pv-vocab,
.persona-visual.pv-closed {
margin-top: 1rem;
position: relative;
overflow: hidden;
}
.persona-visual.pv-fees .pv-list,
.persona-visual.pv-closed .pv-closed-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.persona-visual.pv-fees .pv-item,
.persona-visual.pv-closed .pv-closed-row {
display: grid;
grid-template-columns: 16px 1fr auto;
gap: 0.65rem;
align-items: center;
font-size: 0.8125rem;
color: rgba(255, 255, 255, 0.9);
padding: 0.4rem 0.15rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.persona-visual.pv-fees .pv-item:last-child,
.persona-visual.pv-closed .pv-closed-row:last-child { border-bottom: none; }
.persona-visual.pv-fees .pv-check,
.persona-visual.pv-closed .pv-check {
display: inline-grid;
place-items: center;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--accent-violet);
}
.persona-visual.pv-fees .pv-check svg,
.persona-visual.pv-closed .pv-check svg {
width: 10px; height: 10px;
stroke: #0A1628;
}
.persona-visual.pv-fees .pv-item.pending {
color: rgba(255, 255, 255, 0.45);
}
.persona-visual.pv-fees .pv-item.pending .pv-check {
background: transparent;
border: 1px dashed rgba(255, 255, 255, 0.28);
color: rgba(255, 255, 255, 0.5);
}
.persona-visual.pv-fees .pv-item.pending .pv-check svg {
stroke: rgba(255, 255, 255, 0.55);
}
.persona-visual.pv-fees .pv-item .pv-status {
font-size: 0.625rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
font-weight: 500;
}
.persona-visual.pv-fees .pv-item:not(.pending) .pv-status {
color: var(--accent-green);
}
.persona-visual.pv-closed .pv-closed-row strong {
color: #FFFFFF;
font-weight: 500;
font-family: var(--font-tight);
letter-spacing: -0.005em;
}
.persona-visual.pv-closed .pv-check { background: var(--accent-green); }
/* Vocab · dual stack */
.persona-visual.pv-vocab .pv-stack {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.persona-visual.pv-vocab .pv-row {
display: grid;
grid-template-columns: 78px 1fr;
gap: 0.75rem;
align-items: flex-start;
padding: 0.5rem 0.15rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.persona-visual.pv-vocab .pv-row:last-child { border-bottom: none; padding-bottom: 0; }
.persona-visual.pv-vocab .pv-row-label {
font-size: 0.625rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
font-weight: 500;
padding-top: 0.18rem;
}
.persona-visual.pv-vocab .pv-tags {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
}
.persona-visual.pv-vocab .pv-tag {
display: inline-flex;
align-items: center;
padding: 0.22rem 0.55rem;
border-radius: var(--radius-full);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.01em;
line-height: 1.3;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.8);
}
.persona-visual.pv-vocab .pv-tag--green {
color: #34D399;
border-color: color-mix(in srgb, #10B981 32%, transparent);
background: color-mix(in srgb, #10B981 10%, transparent);
}
.persona-visual.pv-vocab .pv-tag--blue {
color: #60A5FA;
border-color: color-mix(in srgb, #2F6FEB 32%, transparent);
background: color-mix(in srgb, #2F6FEB 10%, transparent);
}
.persona-visual.pv-vocab .pv-tag--violet {
color: #C4B5FD;
border-color: color-mix(in srgb, #8B5CF6 32%, transparent);
background: color-mix(in srgb, #8B5CF6 10%, transparent);
}
.persona-visual.pv-vocab .pv-tag--amber {
color: #FCD34D;
border-color: color-mix(in srgb, #F59E0B 32%, transparent);
background: color-mix(in srgb, #F59E0B 10%, transparent);
}
.persona-visual.pv-vocab .pv-tag--slate {
color: #CBD5E1;
border-color: rgba(148, 163, 184, 0.32);
background: rgba(148, 163, 184, 0.1);
}
@media (max-width: 640px) {
.persona-visual.pv-vocab .pv-row { grid-template-columns: 1fr; gap: 0.4rem; }
.persona-visual.pv-vocab .pv-row-label { padding-top: 0; }
}
/* ============================================================
CONTACT WIZARD
3-step flow: path, context, details
============================================================ */
.wizard {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: 24px;
padding: clamp(1.75rem, 3.5vw, 3rem);
max-width: 780px;
margin: 0 auto;
position: relative;
overflow: hidden;
box-shadow: 0 4px 24px rgba(10, 22, 40, 0.06), 0 1px 3px rgba(10, 22, 40, 0.04);
}
.wizard::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--wz-accent, var(--color-navy));
opacity: 0;
transition: opacity 0.3s var(--ease);
}
.wizard[data-track] { background: var(--color-white); }
.wizard[data-track]::before { opacity: 1; }
.wizard[data-track="founders"] { --wz-accent: var(--accent-violet); }
.wizard[data-track="funds"] { --wz-accent: var(--accent-green); }
/* Track-conditional text spans */
.wizard .t-founders, .wizard .t-funds { display: none; }
.wizard[data-track="founders"] .t-founders { display: inline; }
.wizard[data-track="funds"] .t-funds { display: inline; }
/* Track-conditional fields */
.wizard .track-fields { display: none; }
.wizard[data-track="founders"] .track-fields[data-track="founders"] { display: block; }
.wizard[data-track="funds"] .track-fields[data-track="funds"] { display: block; }
/* Progress */
.wizard-progress {
position: relative;
padding: 0 14px;
margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
}
.wp-track {
position: absolute;
top: 14px; left: 28px; right: 28px;
height: 1px;
background: var(--color-border);
z-index: 0;
}
.wp-fill {
height: 100%;
width: 0%;
background: var(--wz-accent, var(--color-navy));
transition: width 0.5s var(--ease);
}
.wp-steps {
display: flex;
justify-content: space-between;
position: relative;
z-index: 1;
}
.wp-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.45rem;
flex: 0 0 auto;
}
.wp-step .wp-num {
width: 28px; height: 28px;
border-radius: 50%;
background: var(--color-white);
border: 1px solid var(--color-border);
color: var(--color-text-muted);
font-family: var(--font-tight);
font-size: 0.8125rem;
font-weight: 580;
display: grid; place-items: center;
transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.wizard[data-track] .wp-step .wp-num { background: var(--color-white); }
.wp-step.done .wp-num {
background: var(--wz-accent, var(--color-navy));
color: var(--color-white);
border-color: var(--wz-accent, var(--color-navy));
}
.wp-step.active .wp-num {
background: var(--color-navy);
color: var(--color-white);
border-color: var(--color-navy);
transform: scale(1.08);
}
.wp-step .wp-label {
font-family: var(--font-tight);
font-size: 0.6875rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-text-muted);
font-weight: 580;
}
.wp-step.active .wp-label,
.wp-step.done .wp-label { color: var(--color-navy); }
/* Steps */
.wizard-step {
display: none;
}
.wizard-step.active {
display: block;
animation: wzFade 0.45s var(--ease);
}
@keyframes wzFade {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.wizard-step.active { animation: none; }
}
.ws-head { margin-bottom: clamp(1.5rem, 2.5vw, 2rem); }
.ws-eyebrow {
display: inline-flex;
align-items: center;
font-family: var(--font-tight);
font-size: 0.6875rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--wz-accent, var(--accent-blue));
font-weight: 580;
margin-bottom: 0.6rem;
}
.ws-head h2 {
font-family: var(--font-tight);
font-size: clamp(1.625rem, 3vw, 2.25rem);
color: var(--color-navy);
font-weight: 580;
letter-spacing: -0.02em;
line-height: 1.12;
margin: 0;
}
.ws-sub {
color: var(--color-text-muted);
margin-top: 0.6rem;
font-size: 0.95rem;
line-height: 1.55;
max-width: 52ch;
}
/* Path cards */
.path-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
margin-top: 0.25rem;
}
.path-card {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: 18px;
padding: clamp(1.5rem, 2.5vw, 2rem);
cursor: pointer;
transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), border-color 0.28s var(--ease);
position: relative;
overflow: hidden;
font-family: var(--font-sans);
color: var(--color-text);
}
.path-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--pc-accent, var(--color-navy));
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.35s var(--ease);
}
.path-card.is-founders { --pc-accent: var(--accent-violet); }
.path-card.is-funds { --pc-accent: var(--accent-green); }
.path-card:hover {
transform: translateY(-3px);
border-color: var(--pc-accent);
box-shadow: 0 14px 32px -10px color-mix(in srgb, var(--pc-accent) 22%, transparent);
}
.path-card:hover::before { transform: scaleX(1); }
.path-card:focus-visible {
outline: 2px solid var(--pc-accent);
outline-offset: 3px;
}
.pc-icon {
width: 44px; height: 44px;
border-radius: 12px;
background: color-mix(in srgb, var(--pc-accent) 12%, transparent);
color: var(--pc-accent);
display: grid; place-items: center;
margin-bottom: 1rem;
}
.pc-icon svg { width: 22px; height: 22px; }
.pc-tag {
display: inline-block;
font-family: var(--font-tight);
font-size: 0.6875rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--pc-accent);
font-weight: 580;
margin-bottom: 0.5rem;
}
.pc-title {
font-family: var(--font-tight);
font-size: clamp(1.125rem, 1.8vw, 1.375rem);
color: var(--color-navy);
font-weight: 580;
letter-spacing: -0.015em;
line-height: 1.2;
margin: 0 0 0.5rem;
}
.pc-copy {
color: var(--color-text-muted);
font-size: 0.9rem;
line-height: 1.5;
margin: 0 0 1.25rem;
}
.pc-cta {
font-family: var(--font-tight);
font-size: 0.875rem;
font-weight: 580;
color: var(--color-navy);
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: auto;
}
.pc-cta .arrow { transition: transform 0.25s var(--ease); display: inline-block; }
.path-card:hover .pc-cta .arrow { transform: translateX(4px); }
/* Wizard form fields use existing .form-field rules */
.wizard-step form,
.wizard-step .track-fields {
display: block;
}
.wizard-step .form-field { margin-bottom: 0.85rem; }
.wizard-step .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.9rem;
margin-bottom: 0.85rem;
}
.wizard-step .form-field { display: flex; flex-direction: column; gap: 0.35rem; }
.wizard-step .form-field label {
font-family: var(--font-tight);
font-size: 0.6875rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-text-muted);
font-weight: 580;
}
.wizard-step input,
.wizard-step select,
.wizard-step textarea {
border: 1px solid var(--color-border);
border-radius: 10px;
padding: 0.78rem 0.95rem;
font-family: var(--font-sans);
font-size: 0.9375rem;
color: var(--color-navy);
background: var(--color-white);
transition: border-color 180ms var(--ease), background 180ms var(--ease), box-shadow 180ms var(--ease);
}
.wizard[data-track] .wizard-step input,
.wizard[data-track] .wizard-step select,
.wizard[data-track] .wizard-step textarea { background: var(--color-white); }
.wizard-step input:focus,
.wizard-step select:focus,
.wizard-step textarea:focus {
outline: none;
border-color: var(--wz-accent, var(--color-navy));
background: var(--color-white);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wz-accent, var(--color-navy)) 15%, transparent);
}
.wizard-step textarea { resize: vertical; min-height: 96px; }
.wizard-step input.has-error,
.wizard-step select.has-error,
.wizard-step textarea.has-error {
border-color: #c44343;
background: color-mix(in srgb, #c44343 4%, var(--color-white));
}
.wizard-step input.has-error:focus,
.wizard-step select.has-error:focus,
.wizard-step textarea.has-error:focus {
box-shadow: 0 0 0 3px color-mix(in srgb, #c44343 18%, transparent);
}
/* Wizard actions */
.wizard-actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 1.5rem;
padding-top: 1.4rem;
border-top: 1px solid var(--color-border);
gap: 1rem;
}
.wizard-actions .btn-primary {
background: var(--color-navy);
color: var(--color-white);
}
.wizard-actions .btn-primary:hover { background: #152236; }
.btn-ghost {
background: transparent;
color: var(--color-navy);
border: 1px solid var(--color-border);
padding: 0.7rem 1.05rem;
border-radius: 10px;
font-family: var(--font-tight);
font-size: 0.875rem;
font-weight: 580;
letter-spacing: -0.005em;
cursor: pointer;
transition: border-color 180ms var(--ease), background 180ms var(--ease), color 180ms var(--ease);
}
.btn-ghost:hover {
border-color: var(--color-navy);
background: var(--color-white);
}
.wizard .fc-note {
margin-top: 0.85rem;
font-size: 0.75rem;
color: var(--color-text-faint);
letter-spacing: 0.01em;
text-align: right;
}
/* Mobile */
@media (max-width: 720px) {
.path-cards { grid-template-columns: 1fr; }
.wizard-step .form-row { grid-template-columns: 1fr; }
.wp-step .wp-label { display: none; }
.wp-track { left: 14px; right: 14px; top: 14px; }
.wizard { padding: 1.5rem; border-radius: 18px; }
.wizard-actions { flex-direction: row-reverse; justify-content: space-between; }
}
/* ==========================================================================
Resources page · v2 architecture (4 rails + ladder + badges + Pro upsell)
Added Apr 2026 to support Read / Use / Diagnose / Members structure.
========================================================================== */
/* ---------- Card status badge (top-right corner) ------------------------- */
.resource-card .rc-tag {
position: absolute;
top: 1rem;
right: 1rem;
display: inline-flex;
align-items: center;
padding: 0.22rem 0.5rem;
border-radius: var(--radius-full);
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
background: var(--color-cream);
border: 1px solid var(--color-border);
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
white-space: nowrap;
z-index: 1;
}
.resource-card .rc-tag-free { background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.25); color: #047857; }
.resource-card .rc-tag-tool { background: rgba(47,111,235,0.08); border-color: rgba(47,111,235,0.25); color: var(--accent-blue); }
.resource-card .rc-tag-pro { background: rgba(139,92,246,0.08); border-color: rgba(139,92,246,0.25); color: #6D28D9; }
.resource-card .rc-tag-members { background: rgba(217,119,6,0.08); border-color: rgba(217,119,6,0.25); color: #B45309; }
/* On small screens, hide the meta line (it duplicates the badge intent) and
keep the badge top-aligned. */
@media (max-width: 480px) {
.resource-card .rc-tag { top: 0.85rem; right: 0.85rem; }
}
/* Resources page cards (all those carrying a tag) use a vertical layout:
icon top-left in row 1, tag top-right via absolute, title below the icon
on row 2, then meta, description, optional features, and CTA stack down. */
.resource-card:has(.rc-tag) {
grid-template-columns: 1fr;
gap: 0;
}
.resource-card:has(.rc-tag) .rc-icon {
grid-row: 1;
grid-column: 1;
margin-bottom: 1rem;
}
.resource-card:has(.rc-tag) > h4 {
grid-row: 2;
grid-column: 1;
margin: 0;
max-width: 28ch;
}
.resource-card:has(.rc-tag) .rc-meta {
grid-row: 3;
grid-column: 1;
margin-top: 0.4rem;
padding: 0;
justify-self: start;
align-self: start;
}
.resource-card:has(.rc-tag) > p {
grid-row: 4;
grid-column: 1;
margin-top: 0.85rem;
}
.resource-card:has(.rc-tag) .rc-cta,
.resource-card:has(.rc-tag) .rc-soon-meta {
grid-row: 5;
grid-column: 1;
margin-top: 1.25rem;
}
.resource-card:has(.rc-tag) .rc-notify {
grid-row: 5;
grid-column: 1;
margin-top: 1.1rem;
}
.resource-card:has(.rc-tag) .rc-tag { z-index: 2; }
/* ---------- Rail-specific card variants (Directory, Tool, Members) ------- */
.resource-card.rc-dir .rc-icon {
border-color: rgba(139,92,246,0.25);
background: rgba(139,92,246,0.06);
color: var(--accent-violet);
}
.resource-card.rc-tool .rc-icon {
border-color: rgba(47,111,235,0.25);
background: rgba(47,111,235,0.06);
color: var(--accent-blue);
}
.resource-card.rc-members .rc-icon {
border-color: rgba(217,119,6,0.22);
background: rgba(217,119,6,0.05);
color: #B45309;
}
/* Directory wide card CTA, button-like for readability */
.resource-card.rc-dir .rc-cta.rc-cta-button {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 1.1rem;
padding: 0.7rem 1.15rem;
background: var(--color-navy);
color: var(--color-white);
border-radius: 8px;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.005em;
width: fit-content;
transition: transform 0.15s ease, background 0.15s ease;
}
.resource-card.rc-dir:hover .rc-cta.rc-cta-button {
background: var(--accent-violet);
transform: translateY(-1px);
}
.resource-card.rc-dir .rc-cta.rc-cta-button .arrow {
color: inherit;
transition: transform 0.15s ease;
}
.resource-card.rc-dir:hover .rc-cta.rc-cta-button .arrow { transform: translateX(2px); }
/* Directory wide card stats row */
.resource-card.rc-dir .rc-stats {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0.75rem;
margin: 1rem 0 0.5rem;
padding: 0.85rem 0;
border-top: 1px solid var(--color-border-soft);
border-bottom: 1px solid var(--color-border-soft);
}
.resource-card.rc-dir .rc-stat {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.resource-card.rc-dir .rc-stat b {
font-family: var(--font-tight);
font-size: 22px;
font-weight: 600;
color: var(--accent-violet);
letter-spacing: -0.02em;
line-height: 1;
}
.resource-card.rc-dir .rc-stat span {
font-size: 11px;
color: var(--color-text-muted);
letter-spacing: 0.04em;
text-transform: uppercase;
}
@media (max-width: 640px) {
.resource-card.rc-dir .rc-stats { grid-template-columns: repeat(3, 1fr); }
.resource-card.rc-dir .rc-stat:nth-child(n+4) { display: none; }
}
/* Wide membership card spans the full grid row. */
.resource-card.is-wide { grid-column: 1 / -1; }
/* ---------- Coming Soon cards (visually identical to live cards) -------- */
/* The "soon" signal comes from the meta line and the Notify-me CTA, not
from a different background or border. Cards stay white, hover stays. */
.resource-card.is-soon { /* no visual change vs live card */ }
/* ---------- Notify me state machine (world-class waitlist) ------------- */
.rc-notify {
grid-column: 2 / 4;
margin-top: 1.1rem;
padding-top: 0.95rem;
border-top: 1px solid var(--color-border);
position: relative;
}
@media (max-width: 480px) {
.rc-notify { grid-column: 1 / 3; }
}
/* States are driven by data-notify-state on the wrapper */
.rc-notify-trigger,
.rc-notify-form,
.rc-notify-success { display: none; }
[data-notify-state="idle"] .rc-notify-trigger { display: inline-flex; }
[data-notify-state="open"] .rc-notify-form,
[data-notify-state="loading"] .rc-notify-form { display: flex; }
[data-notify-state="success"] .rc-notify-success { display: inline-flex; }
/* Trigger button (revealed in idle state) */
.rc-notify-trigger {
align-items: center;
gap: 0.55rem;
font-family: var(--font-tight);
font-size: 0.9375rem;
font-weight: 580;
letter-spacing: -0.005em;
color: var(--color-navy);
background: none;
border: 0;
padding: 0;
cursor: pointer;
transition: color 200ms var(--ease);
}
.rc-notify-trigger:hover { color: var(--accent-blue); }
.rc-notify-trigger .rc-notify-pulse {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--accent-blue);
box-shadow: 0 0 0 4px rgba(47,111,235,0.14);
animation: rc-pulse 2.6s var(--ease) infinite;
flex-shrink: 0;
}
.rc-notify-trigger .arrow {
transition: transform 200ms var(--ease);
font-size: 0.875rem;
}
.rc-notify-trigger:hover .arrow { transform: translateX(2px); }
@keyframes rc-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.55; transform: scale(0.85); }
}
@media (prefers-reduced-motion: reduce) {
.rc-notify-pulse { animation: none; }
}
/* Form (revealed in open + loading states) */
.rc-notify-form {
flex-direction: row;
align-items: stretch;
gap: 0.5rem;
width: 100%;
animation: rc-notify-fade 240ms var(--ease-out);
}
@keyframes rc-notify-fade {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.rc-notify-form { animation: none; }
}
.rc-notify-form input[type="email"] {
flex: 1 1 auto;
min-width: 0;
padding: 0.6rem 0.95rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
background: var(--color-white);
font-size: 0.9375rem;
color: var(--color-navy);
transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.rc-notify-form input[type="email"]::placeholder { color: var(--color-text-faint); }
.rc-notify-form input[type="email"]:focus {
outline: none;
border-color: var(--accent-blue);
box-shadow: 0 0 0 3px rgba(47,111,235,0.12);
}
.rc-notify-form button[type="submit"] {
padding: 0.6rem 1.1rem;
background: var(--color-navy);
color: var(--color-white);
border-radius: var(--radius-full);
font-family: var(--font-tight);
font-size: 0.9375rem;
font-weight: 580;
letter-spacing: -0.005em;
white-space: nowrap;
cursor: pointer;
transition: background 200ms var(--ease), transform 200ms var(--ease), opacity 200ms var(--ease);
}
.rc-notify-form button[type="submit"]:hover { background: var(--accent-blue); }
.rc-notify-form button[type="submit"]:disabled { opacity: 0.55; cursor: wait; }
[data-notify-state="loading"] .rc-notify-form input[type="email"],
[data-notify-state="loading"] .rc-notify-form button[type="submit"] { pointer-events: none; }
@media (max-width: 480px) {
.rc-notify-form { flex-direction: column; }
.rc-notify-form button[type="submit"] { align-self: flex-start; }
}
/* Success state */
.rc-notify-success {
align-items: center;
gap: 0.5rem;
font-family: var(--font-tight);
font-size: 0.9375rem;
font-weight: 580;
letter-spacing: -0.005em;
color: #047857;
margin: 0;
animation: rc-notify-fade 240ms var(--ease-out);
}
.rc-notify-success svg { width: 18px; height: 18px; flex-shrink: 0; }
/* Error message */
.rc-notify-error {
margin: 0.55rem 0 0;
font-size: 0.8125rem;
color: #B91C1C;
}
.rc-notify-error[hidden] { display: none; }
/* ---------- Pro twin card (twin layout: Free + Pro side by side) -------- */
.resource-card.rc-pro {
border-color: rgba(139, 92, 246, 0.3);
box-shadow: 0 1px 2px rgba(139, 92, 246, 0.06);
}
.resource-card.rc-pro:hover {
border-color: rgba(139, 92, 246, 0.55);
box-shadow: 0 2px 4px rgba(139, 92, 246, 0.08), 0 14px 32px rgba(139, 92, 246, 0.07);
}
.resource-card.rc-pro .rc-icon {
border-color: rgba(139, 92, 246, 0.25);
background: rgba(139, 92, 246, 0.06);
color: #6D28D9;
}
/* Generic features checklist, replaces the description paragraph on every card.
Sits in row 4 (where p was). Per-rail color overrides set the check tint. */
.rc-features {
grid-column: 1;
grid-row: 4;
display: flex;
flex-direction: column;
gap: 0.5rem;
margin: 0.85rem 0 0;
list-style: none;
padding: 0;
}
.rc-features li {
position: relative;
padding-left: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-muted);
line-height: 1.5;
}
.rc-features li::before {
content: "";
position: absolute;
left: 0;
top: 0.45rem;
width: 14px;
height: 14px;
background-color: var(--color-navy);
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
/* Per-rail checkmark color, echoes the card icon tint */
.resource-card.rc-web .rc-features li::before { background-color: var(--accent-blue); }
.resource-card.rc-excel .rc-features li::before { background-color: #047857; }
.resource-card.rc-pdf .rc-features li::before { background-color: #B91C1C; }
.resource-card.rc-tool .rc-features li::before { background-color: var(--accent-blue); }
.resource-card.rc-members .rc-features li::before { background-color: #B45309; }
.resource-card.rc-dir .rc-features li::before { background-color: var(--accent-violet); }
.resource-card.rc-pro .rc-features li::before { background-color: #6D28D9; }
/* Pro notify block sits at row 5 (after the features list at row 4) */
/* Pro CTA: filled navy pill button (instead of the text-style trigger of tools) */
.resource-card.rc-pro .rc-notify-trigger {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.65rem 1.15rem;
background: var(--color-navy);
color: var(--color-white);
border-radius: var(--radius-full);
font-family: var(--font-tight);
font-size: 0.9375rem;
font-weight: 580;
letter-spacing: -0.005em;
border: 0;
transition: background 200ms var(--ease), transform 200ms var(--ease);
}
.resource-card.rc-pro .rc-notify-trigger:hover {
background: #6D28D9;
color: var(--color-white);
transform: translateY(-1px);
}
.resource-card.rc-pro .rc-notify-trigger:active { transform: translateY(0); }
.resource-card.rc-pro .rc-notify-trigger .rc-notify-pulse { display: none; }
.resource-card.rc-pro .rc-notify-trigger .arrow {
font-size: 0.9375rem;
transition: transform 200ms var(--ease);
}
.resource-card.rc-pro .rc-notify-trigger:hover .arrow { transform: translateX(3px); }
/* ---------- Rail header icon variants (Use, Tool, Members) -------------- */
.resources-block .rb-icon-use {
border-color: rgba(10,22,40,0.18);
background: rgba(10,22,40,0.04);
color: var(--color-navy);
}
.resources-block .rb-icon-tool {
border-color: rgba(47,111,235,0.25);
background: rgba(47,111,235,0.06);
color: var(--accent-blue);
}
.resources-block .rb-icon-members {
border-color: rgba(217,119,6,0.22);
background: rgba(217,119,6,0.06);
color: #B45309;
}
/* ---------- Rail intro paragraph ---------------------------------------- */
.resources-block .rail-intro {
color: var(--color-text-muted);
font-size: 0.9375rem;
line-height: 1.6;
max-width: 60ch;
margin: -0.75rem 0 1.75rem;
}
/* ---------- Ladder section (How this fits together) -------------------- */
.ladder-section { padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.ladder-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: clamp(0.65rem, 1.2vw, 0.9rem);
align-items: stretch;
margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
position: relative;
}
/* Connecting line that visualizes the ladder progression on desktop. */
.ladder-grid::before {
content: "";
position: absolute;
left: 6%;
right: 6%;
top: 56px;
height: 1px;
background: linear-gradient(90deg,
var(--color-border) 0%,
var(--color-border) 70%,
rgba(10,22,40,0.35) 100%);
z-index: 0;
pointer-events: none;
}
@media (max-width: 960px) {
.ladder-grid { grid-template-columns: repeat(2, 1fr); }
.ladder-grid::before { display: none; }
}
@media (max-width: 540px) {
.ladder-grid { grid-template-columns: 1fr; }
}
.ladder-step {
position: relative;
z-index: 1;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: 14px;
padding: 1.4rem 1.25rem 1.5rem;
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
cursor: pointer;
transition: border-color 260ms var(--ease-out),
box-shadow 260ms var(--ease-out),
transform 260ms var(--ease-out),
background 260ms var(--ease-out);
}
.ladder-step:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-card);
border-color: rgba(10,22,40,0.35);
}
.ladder-step:focus-visible {
outline: 2px solid var(--accent-blue);
outline-offset: 3px;
}
.ladder-step:active { transform: translateY(-1px); }
/* Header row: number + icon */
.ladder-step .step-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.7rem;
}
.ladder-step .step-num {
font-family: var(--font-tight);
font-size: 0.6875rem;
letter-spacing: 0.16em;
color: var(--color-text-faint);
font-weight: 580;
font-variant-numeric: tabular-nums;
}
.ladder-step .step-icon {
width: 36px;
height: 36px;
border-radius: 10px;
display: grid;
place-items: center;
border: 1px solid var(--color-border);
background: var(--color-white);
color: var(--color-text-muted);
transition: border-color 260ms var(--ease-out),
background 260ms var(--ease-out),
color 260ms var(--ease-out);
}
.ladder-step:hover .step-icon {
border-color: rgba(10,22,40,0.3);
color: var(--color-navy);
}
/* Per-step icon tinting */
.ladder-step.step-dir .step-icon { color: var(--accent-violet); border-color: rgba(139,92,246,0.25); background: rgba(139,92,246,0.05); }
.ladder-step.step-read .step-icon { color: var(--accent-blue); border-color: rgba(47,111,235,0.25); background: rgba(47,111,235,0.05); }
.ladder-step.step-use .step-icon { color: #047857; border-color: rgba(16,185,129,0.25); background: rgba(16,185,129,0.05); }
.ladder-step.step-diag .step-icon { color: var(--accent-blue); border-color: rgba(47,111,235,0.3); background: rgba(47,111,235,0.07); }
.ladder-step.step-mem .step-icon { color: #B45309; border-color: rgba(217,119,6,0.25); background: rgba(217,119,6,0.05); }
.ladder-step.step-ret .step-icon { color: var(--color-white); border-color: var(--color-navy); background: var(--color-navy); }
.ladder-step h4 {
font-family: var(--font-tight);
font-size: 1.0625rem;
color: var(--color-navy);
font-weight: 580;
letter-spacing: -0.01em;
margin: 0 0 0.4rem;
line-height: 1.2;
}
.ladder-step p {
font-size: 0.8125rem;
color: var(--color-text-muted);
line-height: 1.5;
margin: 0 0 1rem;
flex: 1 1 auto;
}
/* Status tag at the bottom of each step */
.ladder-step .step-tag {
display: inline-flex;
align-items: center;
align-self: flex-start;
padding: 0.22rem 0.55rem;
border-radius: var(--radius-full);
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
background: var(--color-white);
border: 1px solid var(--color-border);
color: var(--color-text-muted);
white-space: nowrap;
}
.ladder-step.is-live .step-tag { background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.25); color: #047857; }
.ladder-step.is-soon .step-tag { background: rgba(47,111,235,0.08); border-color: rgba(47,111,235,0.25); color: var(--accent-blue); }
.ladder-step.is-now { border-color: rgba(10,22,40,0.55); box-shadow: var(--shadow-card); }
.ladder-step.is-now:hover { border-color: var(--color-navy); transform: translateY(-3px); }
.ladder-step.is-now .step-tag { background: var(--color-navy); border-color: var(--color-navy); color: var(--color-white); }
/* Bottom-right click affordance arrow */
.ladder-step .step-go {
position: absolute;
bottom: 1rem;
right: 1rem;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--color-text-faint);
opacity: 0;
transform: translateX(-4px);
transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), color 220ms var(--ease-out);
pointer-events: none;
}
.ladder-step:hover .step-go,
.ladder-step:focus-visible .step-go {
opacity: 1;
transform: translateX(0);
color: var(--color-navy);
}
/* End of v2 resources additions ----------------------------------------- */
/* ============================================================
STICKY CTA (long pages)
Appears once the visitor has read past ~40% of the page,
stays in the bottom-right, dismissable.
============================================================ */
.sticky-cta {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 60;
display: none;
align-items: center;
gap: 10px;
padding: 12px 18px 12px 22px;
background: var(--color-navy);
color: var(--color-white);
border-radius: 999px;
font-family: var(--font-tight);
font-size: 14.5px;
font-weight: 500;
letter-spacing: 0.005em;
box-shadow: 0 12px 32px rgba(10, 22, 40, 0.18), 0 2px 6px rgba(10, 22, 40, 0.12);
text-decoration: none;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.28s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
transform 0.28s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
background 0.18s ease;
}
.sticky-cta.is-visible {
display: inline-flex;
opacity: 1;
transform: translateY(0);
}
.sticky-cta:hover {
background: var(--color-navy-soft);
}
.sticky-cta .arrow {
display: inline-block;
transition: transform 0.18s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.sticky-cta:hover .arrow {
transform: translateX(2px);
}
.sticky-cta-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
margin-left: 4px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.7);
font-size: 13px;
line-height: 1;
border: 0;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.sticky-cta-close:hover {
background: rgba(255, 255, 255, 0.22);
color: var(--color-white);
}
@media (max-width: 540px) {
.sticky-cta {
bottom: 16px;
right: 16px;
left: 16px;
justify-content: center;
padding: 12px 16px;
font-size: 14px;
}
}
@media (prefers-reduced-motion: reduce) {
.sticky-cta { transition: none; }
}
/* ============================================================
ARR QUALITY SCORER (/fr/arr-quality-scorer)
Tool : 5 questions, score sur 100, breakdown, red flags,
benchmark cohorte. Tout est namespacé aq-*.
============================================================ */
/* Tokens spécifiques au tool (les --accent-amber et --accent-red sont dans :root global) */
.aq-tool,
.aq-results,
.aq-pedagogy {
--aq-amber-soft: #FEF3C7;
--aq-red-soft: #FEE2E2;
--aq-green-soft: #D1FAE5;
}
/* TOOL container */
.aq-tool {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
gap: clamp(1.5rem, 3vw, 2.5rem);
align-items: start;
margin-top: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 1023px) {
.aq-tool { grid-template-columns: 1fr; }
}
/* QUESTIONS column */
.aq-questions { display: flex; flex-direction: column; gap: 1rem; }
.aq-tool-head {
display: flex; align-items: baseline; justify-content: space-between;
margin-bottom: 0.25rem;
}
.aq-tool-head h3 {
font-family: var(--font-tight);
font-weight: 580;
font-size: clamp(1.125rem, 1.6vw, 1.375rem);
letter-spacing: -0.015em;
color: var(--color-navy);
margin: 0;
}
.aq-tool-meta {
font-size: 0.78rem;
color: var(--color-text-faint);
letter-spacing: 0.04em;
text-transform: uppercase;
font-weight: 500;
}
/* Bracket selector */
.aq-bracket {
display: flex; flex-direction: column; gap: 0.6rem;
padding: 1rem 1.25rem;
background: var(--color-white);
border: 1px solid var(--color-border-soft);
border-radius: var(--radius);
box-shadow: 0 1px 2px rgba(10, 22, 40, 0.04), 0 4px 12px rgba(10, 22, 40, 0.04);
transition: box-shadow 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.aq-bracket:hover {
border-color: var(--color-border);
box-shadow: 0 1px 2px rgba(10, 22, 40, 0.05), 0 12px 28px rgba(10, 22, 40, 0.08);
transform: translateY(-1px);
}
.aq-bracket-label {
font-size: 0.7rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--color-text-muted);
font-weight: 500;
}
.aq-bracket-pills {
display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.aq-bracket-pill {
padding: 0.4rem 0.8rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
background: var(--color-white);
font-size: 0.82rem;
color: var(--color-text);
font-variant-numeric: tabular-nums;
cursor: pointer;
transition: all 0.15s var(--ease);
}
.aq-bracket-pill:hover { border-color: var(--color-navy); }
.aq-bracket-pill.is-selected {
background: var(--color-navy);
color: var(--color-white);
border-color: var(--color-navy);
}
/* Question card */
.aq-question {
background: var(--color-white);
border: 1px solid var(--color-border-soft);
border-radius: var(--radius);
padding: 1.1rem 1.25rem 1.25rem;
box-shadow: 0 1px 2px rgba(10, 22, 40, 0.04), 0 4px 12px rgba(10, 22, 40, 0.04);
transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.aq-question:hover {
border-color: var(--color-border);
box-shadow: 0 1px 2px rgba(10, 22, 40, 0.05), 0 12px 28px rgba(10, 22, 40, 0.08);
transform: translateY(-1px);
}
.aq-question.is-answered {
border-color: var(--color-border-soft);
background: var(--color-white);
}
.aq-q-head {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem;
margin-bottom: 0.5rem;
}
.aq-q-num {
font-family: var(--font-tight);
font-weight: 580;
font-size: 0.78rem;
letter-spacing: 0.06em;
color: var(--accent-violet);
text-transform: uppercase;
}
/* Icon chip pour chaque carte question. Petit, sobre, à droite. */
.aq-q-icon {
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 8px;
background: rgba(139, 92, 246, 0.08);
color: var(--accent-violet);
flex-shrink: 0;
transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.aq-q-icon svg { width: 15px; height: 15px; stroke-width: 1.7; }
.aq-question:hover .aq-q-icon {
background: rgba(139, 92, 246, 0.15);
transform: scale(1.05);
}
.aq-q-title {
font-family: var(--font-tight);
font-weight: 580;
font-size: 1.05rem;
color: var(--color-navy);
letter-spacing: -0.012em;
line-height: 1.3;
margin-bottom: 0.4rem;
}
.aq-q-help {
font-size: 0.82rem;
color: var(--color-text-muted);
line-height: 1.5;
margin-bottom: 0.85rem;
max-width: 60ch;
}
/* Pills (radio group) */
.aq-pills {
display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.aq-pill {
padding: 0.55rem 0.95rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
background: var(--color-white);
font-size: 0.86rem;
color: var(--color-text);
font-variant-numeric: tabular-nums;
cursor: pointer;
transition: all 0.15s var(--ease);
display: inline-flex; align-items: center; gap: 0.35rem;
}
.aq-pill:hover { border-color: var(--color-navy); }
.aq-pill:focus-visible {
outline: 2px solid var(--accent-blue);
outline-offset: 2px;
}
.aq-pill.is-selected {
background: var(--color-navy);
color: var(--color-white);
border-color: var(--color-navy);
}
.aq-pill .check {
width: 14px; height: 14px;
opacity: 0;
transition: opacity 0.15s var(--ease);
}
.aq-pill.is-selected .check { opacity: 1; }
/* Lien "Je ne sais pas" : sous les pills, discret */
.aq-q-unsure-link {
display: inline-block;
margin-top: 0.7rem;
font-size: 0.82rem;
color: var(--color-text-muted);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
text-decoration-color: var(--color-border);
transition: color 0.15s var(--ease), text-decoration-color 0.15s var(--ease);
}
.aq-q-unsure-link:hover {
color: var(--color-navy);
text-decoration-color: var(--color-navy);
}
/* Mode avancé */
.aq-advanced {
background: var(--color-white);
border: 1px solid var(--color-border-soft);
border-radius: var(--radius);
padding: 0.95rem 1.1rem;
box-shadow: 0 1px 2px rgba(10, 22, 40, 0.04), 0 4px 12px rgba(10, 22, 40, 0.04);
transition: box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.aq-advanced:hover {
border-color: var(--color-border);
box-shadow: 0 1px 2px rgba(10, 22, 40, 0.05), 0 12px 28px rgba(10, 22, 40, 0.08);
}
.aq-advanced[open] {
border-color: var(--color-border);
box-shadow: 0 1px 2px rgba(10, 22, 40, 0.05), 0 12px 28px rgba(10, 22, 40, 0.08);
}
.aq-advanced summary {
cursor: pointer;
font-size: 0.88rem;
color: var(--color-text-muted);
font-weight: 500;
letter-spacing: 0.01em;
list-style: none;
display: flex; align-items: center; justify-content: space-between;
}
.aq-advanced summary::after {
content: "+";
color: var(--color-text-faint);
font-weight: 400;
}
.aq-advanced[open] summary::after { content: "−"; }
.aq-advanced-body {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--color-border-soft);
display: flex; flex-direction: column; gap: 1rem;
}
.aq-mini-q { display: flex; flex-direction: column; gap: 0.45rem; }
.aq-mini-q-label {
font-size: 0.82rem;
color: var(--color-navy);
font-weight: 500;
}
/* RESULTS column (sticky desktop) */
.aq-results {
display: flex; flex-direction: column; gap: 1rem;
position: sticky;
top: 96px;
}
@media (max-width: 1023px) { .aq-results { position: static; } }
/* Score card (light theme avec hairline gradient en top) */
.aq-score-card {
background: var(--color-white);
color: var(--color-navy);
border: 1px solid var(--color-border-soft);
border-radius: var(--radius-lg);
padding: clamp(1.5rem, 2.5vw, 2rem);
box-shadow: 0 1px 2px rgba(10, 22, 40, 0.04), 0 18px 40px rgba(10, 22, 40, 0.08);
position: relative;
overflow: hidden;
transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.aq-score-card::before {
content: "";
position: absolute; top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent-violet), var(--accent-blue), var(--accent-green));
opacity: 0.85;
}
.aq-score-card:hover {
box-shadow: 0 1px 2px rgba(10, 22, 40, 0.05), 0 24px 56px rgba(10, 22, 40, 0.12);
}
.aq-score-head {
display: flex; align-items: baseline; justify-content: space-between;
margin-bottom: 1rem;
}
.aq-score-eyebrow {
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-text-muted);
font-weight: 500;
}
.aq-score-progress {
font-size: 0.78rem;
color: var(--color-text-faint);
font-variant-numeric: tabular-nums;
}
.aq-score-value {
display: flex; align-items: baseline; gap: 0.4rem;
font-family: var(--font-tight);
font-weight: 560;
letter-spacing: -0.04em;
color: var(--color-navy);
font-variant-numeric: tabular-nums;
line-height: 1;
}
.aq-score-value .num { font-size: clamp(3.75rem, 8.5vw, 5.5rem); }
.aq-score-value .denom {
font-size: 1.5rem;
color: var(--color-text-faint);
letter-spacing: -0.02em;
}
.aq-score-value.is-empty { color: var(--color-text-faint); }
.aq-score-value.is-empty .denom { opacity: 0.5; }
/* Verdict badge */
.aq-verdict-badge {
display: inline-flex; align-items: center; gap: 0.5rem;
margin-top: 0.95rem;
padding: 0.5rem 1rem 0.5rem 0.85rem;
border-radius: var(--radius-full);
font-family: var(--font-tight);
font-weight: 580;
font-size: 1rem;
letter-spacing: -0.005em;
line-height: 1;
}
.aq-verdict-badge svg { width: 16px; height: 16px; flex-shrink: 0; }
.aq-verdict-badge.is-excellent { background: rgba(16, 185, 129, 0.14); color: #047857; }
.aq-verdict-badge.is-strong { background: rgba(16, 185, 129, 0.12); color: #059669; }
.aq-verdict-badge.is-moderate { background: rgba(47, 111, 235, 0.10); color: var(--accent-blue); }
.aq-verdict-badge.is-suspect { background: rgba(245, 158, 11, 0.14); color: #B45309; }
.aq-verdict-badge.is-major { background: rgba(220, 38, 38, 0.10); color: var(--accent-red); }
.aq-verdict-badge.is-pending { background: rgba(107, 114, 128, 0.10); color: var(--color-text-muted); }
.aq-percentile {
margin-top: 0.85rem;
font-size: 0.92rem;
color: var(--color-text-muted);
line-height: 1.5;
}
.aq-percentile strong { color: var(--color-navy); font-weight: 500; }
.aq-percentile a {
color: var(--accent-blue);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
.aq-percentile.is-pending { color: var(--color-text-faint); font-style: italic; }
/* Returning user ribbon (toggle via .aq-score-card.has-history) */
.aq-returning-strip {
display: none;
align-items: center; justify-content: space-between;
gap: 0.5rem;
margin: -0.5rem -1rem 1rem;
padding: 0.55rem 1rem;
background: var(--color-cream);
border-radius: var(--radius-sm);
font-size: 0.78rem;
color: var(--color-text-muted);
}
.aq-returning-strip strong { color: var(--color-navy); font-weight: 500; }
.aq-score-card.has-history .aq-returning-strip { display: flex; }
/* Trust strip */
.aq-trust-strip {
display: flex; flex-wrap: wrap; align-items: center;
gap: 0.5rem 1rem;
padding: 0.95rem 0;
margin-bottom: clamp(1rem, 2vw, 1.5rem);
border-top: 1px solid var(--color-border-soft);
border-bottom: 1px solid var(--color-border-soft);
font-size: 0.82rem;
color: var(--color-text-muted);
}
.aq-trust-strip strong { color: var(--color-navy); font-weight: 500; }
.aq-trust-strip .sep { color: var(--color-border); }
/* Mobile sticky bottom bar (< 1024px) */
.aq-mobile-sticky {
display: none;
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 30;
padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom));
background: var(--color-white);
border-top: 1px solid var(--color-border);
box-shadow: 0 -8px 24px rgba(10,22,40,0.08);
align-items: center; justify-content: space-between;
gap: 1rem;
}
.aq-mobile-sticky-left {
display: flex; align-items: baseline; gap: 0.45rem;
font-family: var(--font-tight);
font-weight: 580;
color: var(--color-navy);
letter-spacing: -0.01em;
}
.aq-mobile-sticky-left .num { font-size: 1.4rem; line-height: 1; font-variant-numeric: tabular-nums; }
.aq-mobile-sticky-left .denom { font-size: 0.85rem; color: var(--color-text-faint); }
.aq-mobile-sticky-left .verdict {
margin-left: 0.55rem;
font-size: 0.85rem;
padding: 0.2rem 0.55rem;
border-radius: var(--radius-full);
background: rgba(16, 185, 129, 0.12);
color: #059669;
}
.aq-mobile-sticky-cta {
padding: 0.55rem 0.95rem;
border-radius: var(--radius-sm);
background: var(--color-navy);
color: var(--color-white);
font-size: 0.85rem;
font-weight: 500;
}
@media (max-width: 1023px) {
body.aq-page .aq-mobile-sticky { display: flex; }
body.aq-page main { padding-bottom: 80px; }
}
/* Breakdown */
.aq-breakdown {
margin-top: 1.25rem;
padding-top: 1.25rem;
border-top: 1px solid var(--color-border-soft);
display: flex; flex-direction: column; gap: 0.95rem;
}
.aq-breakdown-head {
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-text-muted);
font-weight: 500;
margin-bottom: 0.3rem;
}
.aq-dim-row {
display: grid;
grid-template-columns: 1fr;
gap: 0.3rem;
}
.aq-dim-meta {
display: flex; align-items: baseline; justify-content: space-between;
font-size: 0.85rem;
color: var(--color-navy);
}
.aq-dim-name { font-weight: 500; color: var(--color-navy); }
.aq-dim-name .flag {
display: inline-block;
margin-left: 0.3rem;
font-size: 0.65rem;
color: var(--accent-red);
letter-spacing: 0.04em;
font-weight: 600;
}
.aq-dim-score {
font-family: var(--font-tight);
font-weight: 580;
font-variant-numeric: tabular-nums;
color: var(--color-text);
}
.aq-dim-bar {
position: relative;
height: 6px;
background: var(--color-cream-deep);
border-radius: 3px;
overflow: hidden;
}
.aq-dim-bar-fill {
position: absolute;
top: 0; left: 0; bottom: 0;
border-radius: 3px;
transition: width 0.7s var(--ease-out), background 0.3s var(--ease);
}
.aq-dim-bar-fill.is-strong { background: var(--accent-green); }
.aq-dim-bar-fill.is-good { background: var(--accent-blue); }
.aq-dim-bar-fill.is-mid { background: var(--accent-amber); }
.aq-dim-bar-fill.is-weak { background: var(--accent-red); }
.aq-dim-sub {
font-size: 0.74rem;
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
}
/* Flags + Bench cards */
.aq-flags-card,
.aq-bench-card {
background: var(--color-white);
border: 1px solid var(--color-border-soft);
border-radius: var(--radius);
padding: 1.25rem 1.4rem;
box-shadow: 0 1px 2px rgba(10, 22, 40, 0.04), 0 8px 22px rgba(10, 22, 40, 0.05);
transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.aq-flags-card:hover,
.aq-bench-card:hover {
box-shadow: 0 1px 2px rgba(10, 22, 40, 0.05), 0 16px 36px rgba(10, 22, 40, 0.08);
}
.aq-card-eyebrow {
display: flex; align-items: center; justify-content: space-between;
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-text-muted);
font-weight: 500;
margin-bottom: 0.5rem;
}
.aq-card-title {
font-family: var(--font-tight);
font-weight: 580;
font-size: 1.05rem;
letter-spacing: -0.012em;
color: var(--color-navy);
margin-bottom: 1rem;
}
.aq-flags { display: flex; flex-direction: column; gap: 0.85rem; }
.aq-flags-empty {
font-size: 0.85rem;
color: var(--color-text-muted);
font-style: italic;
padding: 0.5rem 0;
}
.aq-flag {
display: grid;
grid-template-columns: 24px 1fr;
gap: 0.7rem;
padding: 0.95rem 1.1rem;
background: var(--color-white);
border: 1px solid var(--color-border-soft);
border-radius: var(--radius-sm);
border-left: 3px solid var(--color-text-muted);
box-shadow: 0 1px 2px rgba(10, 22, 40, 0.04), 0 4px 12px rgba(10, 22, 40, 0.04);
transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.aq-flag:hover { transform: translateX(3px); }
.aq-flag.is-major { border-left-color: var(--accent-red); }
.aq-flag.is-moderate { border-left-color: var(--accent-amber); }
.aq-flag-icon {
width: 22px; height: 22px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
color: var(--color-white);
flex-shrink: 0;
margin-top: 1px;
}
.aq-flag.is-major .aq-flag-icon { background: var(--accent-red); }
.aq-flag.is-moderate .aq-flag-icon { background: var(--accent-amber); }
.aq-flag.is-minor .aq-flag-icon { background: var(--color-text-muted); }
.aq-flag-body h5 {
font-family: var(--font-tight);
font-weight: 580;
font-size: 0.95rem;
color: var(--color-navy);
letter-spacing: -0.01em;
margin: 0 0 0.25rem;
}
.aq-flag-body p {
font-size: 0.85rem;
color: var(--color-text);
line-height: 1.5;
margin: 0 0 0.4rem;
}
.aq-flag-lever {
font-size: 0.82rem;
color: var(--color-text-muted);
line-height: 1.5;
margin: 0 0 0.4rem;
}
.aq-flag-lever strong { color: var(--color-navy); font-weight: 500; }
.aq-flag-link {
font-size: 0.78rem;
color: var(--accent-blue);
font-weight: 500;
}
.aq-flag-link:hover { text-decoration: underline; }
/* Benchmark */
.aq-bench-bar {
position: relative;
height: 32px;
background: linear-gradient(90deg,
var(--aq-red-soft) 0%, var(--aq-red-soft) 25%,
#FEF3C7 25%, #FEF3C7 50%,
rgba(47, 111, 235, 0.15) 50%, rgba(47, 111, 235, 0.15) 75%,
var(--aq-green-soft) 75%, var(--aq-green-soft) 100%);
border-radius: var(--radius-sm);
margin: 1rem 0 0.5rem;
}
.aq-bench-marker {
position: absolute;
top: -6px; bottom: -6px;
width: 3px;
background: var(--color-navy);
border-radius: 2px;
transition: left 0.6s var(--ease-out);
}
.aq-bench-marker::after {
content: attr(data-label);
position: absolute;
top: -22px;
left: 50%;
transform: translateX(-50%);
background: var(--color-navy);
color: var(--color-white);
padding: 2px 7px;
border-radius: var(--radius-sm);
font-size: 0.7rem;
font-weight: 500;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.aq-bench-axis {
display: flex; justify-content: space-between;
font-size: 0.72rem;
color: var(--color-text-faint);
font-variant-numeric: tabular-nums;
margin-top: 0.2rem;
}
.aq-bench-meta {
margin-top: 0.85rem;
font-size: 0.85rem;
color: var(--color-text-muted);
line-height: 1.5;
}
.aq-bench-meta strong { color: var(--color-navy); font-weight: 500; }
.aq-bench-source {
margin-top: 0.5rem;
font-size: 0.72rem;
color: var(--color-text-faint);
}
.aq-bench-source a {
color: var(--accent-blue);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
/* Export bar */
.aq-export-bar {
margin-top: clamp(1.5rem, 3vw, 2rem);
display: flex; flex-wrap: wrap; gap: 0.75rem;
padding: 1.1rem 1.4rem;
background: var(--color-white);
border: 1px solid var(--color-border-soft);
border-radius: var(--radius);
box-shadow: 0 1px 2px rgba(10, 22, 40, 0.04), 0 4px 12px rgba(10, 22, 40, 0.04);
align-items: center;
justify-content: space-between;
transition: box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.aq-export-bar:hover {
border-color: var(--color-border);
box-shadow: 0 1px 2px rgba(10, 22, 40, 0.05), 0 12px 28px rgba(10, 22, 40, 0.08);
}
.aq-export-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.aq-btn {
display: inline-flex; align-items: center; gap: 0.45rem;
padding: 0.6rem 1rem;
border-radius: var(--radius-sm);
border: 1px solid var(--color-navy);
background: var(--color-navy);
color: var(--color-white);
font-size: 0.88rem;
font-weight: 500;
letter-spacing: 0.005em;
cursor: pointer;
transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.aq-btn:hover { background: transparent; color: var(--color-navy); }
.aq-btn.aq-btn-ghost {
background: transparent;
color: var(--color-text-muted);
border-color: var(--color-border);
}
.aq-btn.aq-btn-ghost:hover { color: var(--color-navy); border-color: var(--color-navy); }
.aq-btn.is-success {
background: var(--accent-green);
border-color: var(--accent-green);
color: var(--color-white);
}
.aq-export-note {
font-size: 0.78rem;
color: var(--color-text-muted);
max-width: 26ch;
}
/* PEDAGOGY */
.aq-pedagogy {
padding-top: clamp(3rem, 5vw, 5rem);
padding-bottom: clamp(3rem, 5vw, 5rem);
}
.aq-ped-head {
max-width: 60ch;
margin-bottom: clamp(2rem, 4vw, 3rem);
}
.aq-ped-head .eyebrow {
display: inline-block;
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.75rem;
font-weight: 580;
color: var(--color-text-muted);
margin-bottom: 0.65rem;
}
/* 5 dimensions explainer */
.aq-dim-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
margin-top: 1.5rem;
}
@media (max-width: 900px) { .aq-dim-grid { grid-template-columns: 1fr; } }
.aq-dim-card {
background: var(--color-white);
border: 1px solid var(--color-border-soft);
border-radius: var(--radius);
padding: 1.4rem 1.55rem;
box-shadow: 0 1px 2px rgba(10, 22, 40, 0.04), 0 4px 12px rgba(10, 22, 40, 0.04);
transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.aq-dim-card:hover {
border-color: var(--color-border);
box-shadow: 0 1px 2px rgba(10, 22, 40, 0.05), 0 12px 28px rgba(10, 22, 40, 0.08);
transform: translateY(-2px);
}
.aq-dim-card-head {
display: flex; align-items: center; justify-content: space-between;
gap: 0.5rem; margin-bottom: 0.5rem;
}
.aq-dim-card-title-row {
display: flex; align-items: center; gap: 0.65rem;
flex: 1 1 auto;
min-width: 0;
}
.aq-dim-card h4 {
font-family: var(--font-tight);
font-weight: 580;
font-size: 1rem;
color: var(--color-navy);
letter-spacing: -0.01em;
margin: 0;
}
/* Icon chip pour chaque carte de dimension (section pédagogique).
Plus présent que les question icons : 36x36, violet plus saturé. */
.aq-dim-card-icon {
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 10px;
background: rgba(139, 92, 246, 0.10);
color: var(--accent-violet);
flex-shrink: 0;
transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
.aq-dim-card-icon svg { width: 18px; height: 18px; stroke-width: 1.7; }
.aq-dim-card:hover .aq-dim-card-icon {
background: var(--accent-violet);
color: var(--color-white);
transform: rotate(-4deg) scale(1.05);
}
.aq-dim-card-weight {
font-size: 0.7rem;
color: var(--accent-violet);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
font-variant-numeric: tabular-nums;
}
.aq-dim-card .formula {
font-family: var(--font-tight);
font-weight: 500;
font-size: 0.85rem;
color: var(--color-text);
background: transparent;
border-left: 2px solid var(--accent-violet);
padding: 0.4rem 0 0.4rem 0.75rem;
margin: 0.6rem 0 0.85rem;
font-variant-numeric: tabular-nums;
}
.aq-dim-card p {
font-size: 0.86rem;
color: var(--color-text-muted);
line-height: 1.55;
margin: 0 0 0.4rem;
}
.aq-dim-card p strong { color: var(--color-navy); font-weight: 500; }
/* Examples */
.aq-examples-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-top: 1.5rem;
}
@media (max-width: 900px) { .aq-examples-grid { grid-template-columns: 1fr; } }
.aq-example-card {
background: var(--color-white);
border: 1px solid var(--color-border-soft);
border-radius: var(--radius);
padding: 1.4rem 1.55rem;
box-shadow: 0 1px 2px rgba(10, 22, 40, 0.04), 0 4px 12px rgba(10, 22, 40, 0.04);
transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.aq-example-card:hover {
border-color: var(--color-border);
box-shadow: 0 1px 2px rgba(10, 22, 40, 0.05), 0 12px 28px rgba(10, 22, 40, 0.08);
transform: translateY(-2px);
}
.aq-example-card-head {
display: flex; align-items: center; gap: 0.65rem;
margin-bottom: 0.4rem;
}
.aq-example-card h4 {
font-family: var(--font-tight);
font-weight: 580;
font-size: 1rem;
color: var(--color-navy);
margin: 0;
}
/* Icon chip pour chaque carte d'exemple. Couleur sémantique : verte pour
excellent, rouge pour problème, bleue pour modéré. */
.aq-example-icon {
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 10px;
flex-shrink: 0;
transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
.aq-example-icon svg { width: 18px; height: 18px; stroke-width: 1.7; }
.aq-example-icon.is-good { background: rgba(16, 185, 129, 0.12); color: #047857; }
.aq-example-icon.is-bad { background: rgba(220, 38, 38, 0.10); color: var(--accent-red); }
.aq-example-icon.is-mid { background: rgba(47, 111, 235, 0.10); color: var(--accent-blue); }
.aq-example-card:hover .aq-example-icon {
transform: rotate(-4deg) scale(1.05);
}
.aq-example-numbers {
font-size: 0.8rem;
color: var(--color-text-muted);
margin-bottom: 0.75rem;
font-variant-numeric: tabular-nums;
line-height: 1.5;
}
.aq-example-numbers strong { color: var(--color-navy); font-weight: 500; }
.aq-example-score {
font-family: var(--font-tight);
font-weight: 580;
font-size: 1.6rem;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.aq-example-score .lbl {
font-family: var(--font-sans);
font-weight: 500;
font-size: 0.78rem;
margin-left: 0.4rem;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.aq-example-card p {
font-size: 0.85rem;
color: var(--color-text-muted);
line-height: 1.55;
margin-top: 0.6rem;
}
/* FAQ */
.aq-faq {
margin-top: 1.5rem;
border-top: 1px solid var(--color-border-soft);
}
.aq-faq details {
border-bottom: 1px solid var(--color-border-soft);
padding: 1rem 0;
}
.aq-faq summary {
cursor: pointer;
list-style: none;
font-family: var(--font-tight);
font-weight: 580;
font-size: 1rem;
color: var(--color-navy);
letter-spacing: -0.01em;
display: flex; align-items: center; justify-content: space-between;
gap: 1rem;
}
.aq-faq summary::after {
content: "+";
color: var(--color-text-faint);
font-size: 1.25rem;
font-weight: 300;
}
.aq-faq details[open] summary::after { content: "−"; }
.aq-faq details p {
margin-top: 0.75rem;
font-size: 0.92rem;
color: var(--color-text-muted);
line-height: 1.6;
max-width: 70ch;
}
/* Glossaire */
.aq-glossary {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid var(--color-border-soft);
}
.aq-glossary-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem 2rem;
margin-top: 1rem;
}
@media (max-width: 700px) { .aq-glossary-grid { grid-template-columns: 1fr; } }
.aq-glossary dt {
font-family: var(--font-tight);
font-weight: 580;
font-size: 0.92rem;
color: var(--color-navy);
margin-bottom: 0.15rem;
}
.aq-glossary dd {
font-size: 0.85rem;
color: var(--color-text-muted);
line-height: 1.55;
margin: 0 0 0.75rem;
}
/* ── Motion system : 1s d'entrée, replay au refresh via body.is-loaded ── */
@keyframes aq-fade-up {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes aq-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes aq-pill-pop {
0% { transform: scale(1); }
40% { transform: scale(1.08); }
100% { transform: scale(1); }
}
@keyframes aq-score-reveal {
0% { opacity: 0; transform: translateY(16px) scale(0.96); filter: blur(6px); }
60% { filter: blur(0); }
100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes aq-flag-in {
from { opacity: 0; transform: translateX(14px); }
to { opacity: 1; transform: translateX(0); }
}
/* Initial state, scopé à .aq-page pour ne pas affecter d'autres pages */
body.aq-page .aq-trust-strip,
body.aq-page .aq-bracket,
body.aq-page .aq-question,
body.aq-page .aq-advanced,
body.aq-page .aq-export-bar { opacity: 0; transform: translateY(20px); }
body.aq-page .aq-score-value { opacity: 0; transform: translateY(16px) scale(0.96); filter: blur(6px); }
body.aq-page .aq-verdict-badge { opacity: 0; transform: translateY(12px); }
body.aq-page .aq-percentile { opacity: 0; }
body.aq-page .aq-bench-marker { opacity: 0; }
body.aq-page .aq-bench-marker::after { opacity: 0; }
body.aq-page .aq-flag { opacity: 0; transform: translateX(14px); }
body.aq-page .aq-dim-bar-fill { width: 0 !important; }
body.aq-page.is-loaded .aq-trust-strip {
animation: aq-fade-up 0.45s var(--ease-out) both;
animation-delay: 0.05s;
}
body.aq-page.is-loaded .aq-bracket,
body.aq-page.is-loaded .aq-question,
body.aq-page.is-loaded .aq-advanced,
body.aq-page.is-loaded .aq-export-bar {
animation: aq-fade-up 0.5s var(--ease-out) both;
animation-delay: calc(var(--i, 0) * 0.05s + 0.08s);
}
body.aq-page.is-loaded .aq-score-value {
animation: aq-score-reveal 0.65s var(--ease-out) both;
animation-delay: 0.18s;
}
body.aq-page.is-loaded .aq-verdict-badge {
animation: aq-fade-up 0.45s var(--ease-out) both;
animation-delay: 0.42s;
}
body.aq-page.is-loaded .aq-percentile {
animation: aq-fade-in 0.4s var(--ease-out) both;
animation-delay: 0.55s;
}
body.aq-page.is-loaded .aq-dim-bar-fill {
width: var(--bar-w, 0%) !important;
transition: width 0.6s var(--ease-out);
transition-delay: calc(var(--i, 0) * 0.06s + 0.65s);
}
body.aq-page.is-loaded .aq-flag {
animation: aq-flag-in 0.45s var(--ease-out) both;
animation-delay: calc(var(--i, 0) * 0.07s + 0.85s);
}
body.aq-page.is-loaded .aq-bench-marker {
animation: aq-fade-in 0.4s var(--ease-out) both;
animation-delay: 0.95s;
}
body.aq-page.is-loaded .aq-bench-marker::after {
animation: aq-fade-up 0.4s var(--ease-out) both;
animation-delay: 1.05s;
}
/* Pills hover/select feedback */
.aq-pill,
.aq-bracket-pill { will-change: transform; }
.aq-pill:hover,
.aq-bracket-pill:hover { transform: translateY(-1px); }
.aq-pill.is-selected,
.aq-bracket-pill.is-selected {
animation: aq-pill-pop 0.4s var(--ease-out);
}
/* Reduced motion safety net */
@media (prefers-reduced-motion: reduce) {
body.aq-page .aq-trust-strip,
body.aq-page .aq-bracket,
body.aq-page .aq-question,
body.aq-page .aq-advanced,
body.aq-page .aq-export-bar,
body.aq-page .aq-score-value,
body.aq-page .aq-verdict-badge,
body.aq-page .aq-percentile,
body.aq-page .aq-bench-marker,
body.aq-page .aq-bench-marker::after,
body.aq-page .aq-flag {
opacity: 1 !important;
transform: none !important;
filter: none !important;
animation: none !important;
}
body.aq-page .aq-dim-bar-fill {
width: var(--bar-w, 0%) !important;
transition: none !important;
}
}
/* End of ARR Quality Scorer ============================================== */
/* ============================================================================
PERSONA-SPLIT PIVOT
A small "or" badge centered between the founders and funds cards.
Lives inside .persona-grid so it auto-resolves to the right visual center
on both layouts: between left/right cards on desktop, between top/bottom
cards on mobile. Driven by js/main.js with an eased bell curve and a
small vertical drift so it rises into position as it fades in.
============================================================================ */
.persona-grid {
position: relative;
}
.ps-pivot {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(0.7);
width: 56px;
height: 56px;
border-radius: 999px;
background: var(--color-white);
border: 1px solid var(--color-border);
box-shadow: 0 4px 16px rgba(10, 22, 40, 0.06), 0 1px 2px rgba(10, 22, 40, 0.04);
display: grid;
place-items: center;
z-index: 4;
opacity: 0;
pointer-events: none;
font-family: var(--font-tight);
font-weight: 500;
font-size: 0.8125rem;
letter-spacing: 0.06em;
color: var(--color-navy);
text-transform: uppercase;
will-change: opacity, transform;
}
.ps-pivot span { line-height: 1; }
/* Tighter on small viewports where the cards stack and the pivot floats at
the seam between them. 48px reads like a deliberate connector, not a UI chip. */
@media (max-width: 820px) {
.ps-pivot {
width: 48px;
height: 48px;
font-size: 0.75rem;
}
}
/* ============================================================================
HERO PICKER PROXIMITY HALO
A soft radial gradient follows the cursor over the .hero-picker, tinted
violet on the founders side and green on the funds side. Driven by
js/main.js (vanilla mousemove + rAF). The pseudo-element is opacity-0 by
default and only fades in on mouse enter, so the halo never intrudes on
readability and there is zero cost when the user is not interacting.
Disabled below 720px (picker stacks vertically) and for reduced-motion.
============================================================================ */
.hero-picker {
position: relative;
}
.hero-picker::before {
content: "";
position: absolute;
inset: -10px;
border-radius: 14px;
background: radial-gradient(
circle 220px at var(--hp-mx, 50%) var(--hp-my, 50%),
var(--hp-halo, transparent) 0%,
transparent 62%
);
opacity: var(--hp-halo-op, 0);
transition: opacity 260ms var(--ease, ease);
pointer-events: none;
z-index: 0;
}
.hero-picker > * {
position: relative;
z-index: 1;
}
@media (max-width: 720px) {
.hero-picker::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.hero-picker::before { display: none; }
}
/* ============================================================
NAV GLOBALE (2026-06-12) : logo + burger seul, tiroir droit.
Deplacee de css/landing.css quand la nav landing est devenue
celle de TOUT le site. Canon : specs/PREFERENCES_ESTHETIQUES.md s.7.
============================================================ */
/* ===== nav transparente + burger 2 lignes ===== */
.nav { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: none; }
.nav .nav-inner { display: flex; justify-content: space-between; align-items: center; }
.nav .nav-menu, .nav .nav-burger, .nav .lang-toggle { display: none; }
.nav-cta {
padding: .5rem .95rem; font-size: .875rem;
opacity: 0; transform: translateY(-4px); pointer-events: none;
transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out);
}
.nav.show-cta .nav-cta { opacity: 1; transform: none; pointer-events: auto; }
.nav .nav-actions { display: flex; align-items: center; gap: .9rem; }
@media (max-width: 560px) { .nav-cta { display: none; } }
.pv-burger {
position: relative; z-index: 40;
display: inline-flex; flex-direction: column; justify-content: center; gap: 6px;
width: 40px; height: 40px; padding: 10px;
background: transparent; border: none; cursor: pointer; border-radius: 8px;
}
.pv-burger span {
display: block; height: 2px; border-radius: 2px; background: var(--color-navy);
transition: transform 320ms var(--ease-out), width 200ms var(--ease);
}
.pv-burger span:nth-child(1) { width: 20px; }
.pv-burger span:nth-child(2) { width: 14px; }
.pv-burger:hover span:nth-child(2) { width: 20px; }
body.menu-open .pv-burger span:nth-child(1) { width: 20px; transform: translateY(4px) rotate(45deg); }
body.menu-open .pv-burger span:nth-child(2) { width: 20px; transform: translateY(-4px) rotate(-45deg); }
.pv-menu {
position: fixed; inset: 0; z-index: 35;
background: rgba(10, 22, 40, 0.30);
visibility: hidden; opacity: 0;
transition: opacity 300ms var(--ease-out), visibility 0s linear 300ms;
}
body.menu-open .pv-menu { visibility: visible; opacity: 1; transition: opacity 300ms var(--ease-out); }
.pv-menu-inner {
position: absolute; top: 0; right: 0; bottom: 0;
width: min(420px, 92vw);
background: var(--color-white);
box-shadow: -24px 0 60px rgba(10, 22, 40, 0.14);
display: flex; flex-direction: column;
padding: 6.5rem 2rem 2rem;
transform: translateX(100%);
transition: transform 380ms var(--ease-out);
}
body.menu-open .pv-menu-inner { transform: translateX(0); }
.pv-menu nav { display: flex; flex-direction: column; }
.pv-menu nav a {
display: flex; align-items: center; justify-content: space-between;
font-family: var(--font-tight); font-weight: 600; color: var(--color-navy);
font-size: 1.55rem; line-height: 1.2; text-decoration: none;
padding-block: 1.25rem;
border-bottom: 1px solid var(--color-border);
opacity: 0; transform: translateX(18px);
transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out), color 160ms var(--ease);
}
.pv-menu nav a::after {
content: "→"; font-weight: 400; color: var(--color-text-faint);
transition: transform 200ms var(--ease), color 200ms var(--ease);
}
.pv-menu nav a:hover { color: var(--accent-violet); }
.pv-menu nav a:hover::after { transform: translateX(4px); color: var(--accent-violet); }
body.menu-open .pv-menu nav a { opacity: 1; transform: none; }
body.menu-open .pv-menu nav a:nth-child(1) { transition-delay: 90ms; }
body.menu-open .pv-menu nav a:nth-child(2) { transition-delay: 140ms; }
body.menu-open .pv-menu nav a:nth-child(3) { transition-delay: 190ms; }
body.menu-open .pv-menu nav a:nth-child(4) { transition-delay: 240ms; }
body.menu-open .pv-menu nav a:nth-child(5) { transition-delay: 290ms; }
body.menu-open .pv-menu nav a:nth-child(6) { transition-delay: 340ms; }
/* Sous-menu du tiroir (2026-07-09) : groupe For founders -> Workspace, Scope.
Le filet passe du lien parent au GROUPE pour que les sous-liens vivent
au-dessus du separateur. Desktop (hover) : replie, revele au survol du
groupe ou au focus clavier. Tactile : toujours deplie (pas de hover). */
.pv-menu-group { border-bottom: 1px solid var(--color-border); }
.pv-menu-group > a { border-bottom: 0; }
.pv-menu nav .pv-menu-sub { display: flex; flex-direction: column; }
.pv-menu nav .pv-menu-sub a {
font-size: 1.02rem; font-weight: 500; color: var(--color-text-muted);
padding-block: 0.5rem; padding-left: 16px; border-bottom: 0;
}
.pv-menu nav .pv-menu-sub a::after { font-size: 0.9rem; }
.pv-menu nav .pv-menu-sub a:hover { color: var(--accent-violet); }
.pv-menu nav .pv-menu-sub a:last-child { padding-bottom: 1.1rem; }
@media (hover: hover) {
.pv-menu nav .pv-menu-sub {
max-height: 0; opacity: 0; overflow: hidden;
transition: max-height 300ms var(--ease-out), opacity 220ms var(--ease);
}
.pv-menu-group:hover .pv-menu-sub,
.pv-menu-group:focus-within .pv-menu-sub { max-height: 160px; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.pv-menu nav .pv-menu-sub { transition: none; }
}
.pv-menu-cta {
display: flex; justify-content: center; width: 100%;
margin-top: auto;
opacity: 0; transition: opacity 380ms var(--ease-out) 340ms;
}
body.menu-open .pv-menu-cta { opacity: 1; }
.pv-menu-alt {
display: block; text-align: center; margin-top: 1rem;
font-size: .9rem; color: var(--color-text-muted); text-decoration: none;
opacity: 0; transition: opacity 380ms var(--ease-out) 360ms, color 160ms var(--ease);
}
.pv-menu-alt:hover { color: var(--color-navy); }
body.menu-open .pv-menu-alt { opacity: 1; }
.pv-menu-meta {
margin-top: 1.1rem;
display: flex; justify-content: center;
font-size: .9rem; color: var(--color-text-muted);
opacity: 0; transition: opacity 380ms var(--ease-out) 380ms;
}
body.menu-open .pv-menu-meta { opacity: 1; }
.pv-menu-meta a { color: inherit; text-decoration: none; }
.pv-menu-meta a:hover { color: var(--color-navy); }
.pv-menu-meta .on { color: var(--color-navy); font-weight: 600; }
body.menu-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
.pv-menu, .pv-menu nav a, .pv-menu-meta, .pv-burger span { transition: none; }
}
.nav { transition: background-color 250ms var(--ease), border-color 250ms var(--ease), backdrop-filter 250ms var(--ease); }
.nav.is-glass {
background: rgba(255, 255, 255, 0.86);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid var(--color-border);
}