/* ==========================================================================
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");
}
/* ---------- 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(4, minmax(0, 1fr));
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-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: 100%; max-width: 100%; justify-content: center; display: flex; box-sizing: border-box; }
.hero-ctas { flex-direction: column; width: 100%; }
.cta-final .cta-group { flex-direction: column; align-items: stretch; }
.cta-final .cta-group .btn { 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 {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(700px circle at 90% -10%, color-mix(in srgb, var(--accent-page, var(--accent-blue)) 12%, transparent), transparent 60%),
radial-gradient(500px circle at 10% 120%, color-mix(in srgb, var(--accent-page, var(--accent-blue)) 8%, transparent), transparent 55%);
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 {
font-style: normal;
color: var(--accent-page, var(--accent-blue));
}
.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-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 (Tool, Members) ------------------ */
.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;
}
/* 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-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(5, minmax(0, 1fr));
gap: clamp(0.75rem, 1.4vw, 1rem);
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-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 ============================================== */