/* ────────────────────────────────────────────────────────────────────
Kai Nurture — Visual Explainer
Editorial two-column spread: caption left, figure right.
Single source of palette truth: the :root block below.
Restraint over flash — opacity, draw-on, subtle translate.
Palette: Kai house (Neutrals canvas + Corals for Measure / K-curve,
Primary-blue Build, Support-teal Learn).
──────────────────────────────────────────────────────────────────── */
:root {
/* Surface — Kai Neutrals */
--bg: #1D262E; /* Neutrals 900 */
--bg-elevated: #28323B; /* Neutrals 800 */
--rule: rgba(255, 255, 255, 0.06);
/* Text — Kai Neutrals scale */
--ink-primary: #F7F9FA; /* Neutrals 100 */
--ink-secondary: #C7CDD4; /* Neutrals 400 */
--ink-tertiary: #707880; /* Neutrals 600 */
--ink-quaternary:#4C555E; /* Neutrals 700 */
/* Signals — Kai Support 2 (Corals). Warm dots on cool canvas. */
--signal-fill: #FCE4DE; /* Corals 200 */
--signal-stroke: #C97E6B; /* Corals 600 */
--signal-label: #F7C6BA; /* Corals 400 */
--signal-meta: #A1A7AD; /* Neutrals 500 */
/* Actions — Kai Primary (Blues). Kai-prompted action. */
--action-fill: #82B3D9; /* Primary 500 */
--action-stroke: #18486E; /* Primary 800 */
--action-label: #9AC3E3; /* Primary 400 */
--action-sub: #B9D6ED; /* Primary 300 */
/* Support teals — Learn stage cue (timeline signals, flywheel Learn). */
--score: #5098A3; /* Support 600 */
--score-glow: #95C7CF; /* Support 400 */
--score-label: #95C7CF; /* Support 400 */
/* K-scores — five dial colors (dark = stroke/fill, light = solid rim) */
--kbi-dark: #10B981;
--kbi-light: #ECFDF5;
--kes-dark: #F59E0B;
--kes-light: #FFFBEB;
--kai-dark: #3B82F6;
--kai-light: #EFF6FF;
--kms-dark: #8B5CF6;
--kms-light: #FAF5FF;
--kcs-dark: #EC4899;
--kcs-light: #FDF2F8;
/* Motion */
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
--reveal: 0.55s var(--ease);
/* Spacing scale */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
}
/* ─── Reset / base ─────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { height: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--ink-primary);
font-family: 'Raleway', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
opacity: 0;
transition: opacity 0.5s var(--ease-soft);
}
body.is-ready { opacity: 1; }
/* ─── Ambient backdrop ─────────────────────────────────────────────── */
/* Pillar-aware atmospheric color. CSS variables on .page drive a fixed
gradient layer; switching pillar cross-fades the entire canvas. */
.page {
/* Walkthrough defaults — restrained, matches prior look */
--ambient-warm: rgba(85, 139, 181, 0.10);
--ambient-warm-pos: 18% 18%;
--ambient-cool: rgba(80, 152, 163, 0.07);
--ambient-cool-pos: 88% 92%;
}
.page[data-mode="deepDive"][data-pillar="learn"] {
--ambient-warm: rgba(149, 199, 207, 0.20);
--ambient-warm-pos: 14% 22%;
--ambient-cool: rgba(247, 249, 250, 0.05);
--ambient-cool-pos: 92% 88%;
}
.page[data-mode="deepDive"][data-pillar="build"] {
--ambient-warm: rgba(154, 195, 227, 0.20);
--ambient-warm-pos: 14% 22%;
--ambient-cool: rgba(247, 249, 250, 0.05);
--ambient-cool-pos: 92% 88%;
}
.page[data-mode="deepDive"][data-pillar="measure"] {
--ambient-warm: rgba(247, 198, 186, 0.18);
--ambient-warm-pos: 14% 22%;
--ambient-cool: rgba(247, 249, 250, 0.05);
--ambient-cool-pos: 92% 88%;
}
/* Deep dive shot pairing: one motion clock for stage, caption, and focus shot. */
.page[data-mode="deepDive"] {
--dd-focus-duration: 580ms;
/* Layout (flex-basis) — long ease-out tail so velocity eases into rest. */
--dd-layout-ease: cubic-bezier(0.17, 0.88, 0.35, 1);
/* Transform slide — near velocity-match with layout curve for one perceived arc. */
--dd-slide-ease: cubic-bezier(0.14, 0.9, 0.3, 1);
--dd-focus-ease: var(--ease-soft);
/* Fade caption copy out before the column finishes collapsing — less mid-shrink text reflow. */
--dd-caption-opacity-out: 230ms;
/* Caption fades in after the column widens so text doesn’t race the layout. */
--dd-caption-delay-in: 85ms;
}
.page::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: -2;
background:
radial-gradient(1100px 620px at var(--ambient-warm-pos), var(--ambient-warm), transparent 62%),
radial-gradient(900px 520px at var(--ambient-cool-pos), var(--ambient-cool), transparent 60%);
transition: background 0.65s var(--ease-soft);
}
/* ─── Film grain ───────────────────────────────────────────────────── */
/* Sits between ambient and content; mix-blend-overlay against page bg.
Negative z-index keeps it from interfering with text legibility. */
body::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
opacity: 0.04;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
button { font: inherit; }
:focus { outline: none; }
:focus-visible {
outline: 2px solid var(--action-label);
outline-offset: 3px;
border-radius: 3px;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.nav-arrow:focus-visible,
.skip-link:focus-visible,
.restart-link:focus-visible,
.back-button:focus-visible {
outline-offset: 4px;
}
.progress-dot:focus-visible {
outline-offset: 4px;
border-radius: 999px;
}
/* ─── Page grid ────────────────────────────────────────────────────── */
.page {
min-height: 100vh;
max-height: 100vh;
max-width: 1440px;
margin: 0 auto;
padding: clamp(var(--space-4), 2.6vh, var(--space-6)) var(--space-6);
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
gap: clamp(var(--space-4), 3vh, var(--space-6));
overflow: hidden;
}
/* ─── Masthead ─────────────────────────────────────────────────────── */
.masthead {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-5);
}
.masthead-left {
display: inline-flex;
align-items: center;
gap: var(--space-5);
}
.wordmark {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 15px;
font-weight: 500;
letter-spacing: 0.5px;
color: var(--ink-primary);
}
.wordmark-mark {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--signal-fill);
border: 1.2px solid var(--signal-stroke);
}
.wordmark-sep {
width: 1px;
height: 14px;
background: rgba(247, 249, 250, 0.20);
margin: 0 2px;
}
.wordmark-product {
font-size: 13px;
font-weight: 400;
letter-spacing: 0.6px;
color: var(--ink-tertiary);
}
.skip-link {
appearance: none;
background: transparent;
border: 0;
cursor: pointer;
font-size: 12px;
letter-spacing: 0.2px;
color: var(--ink-tertiary);
padding: 6px 0;
transition: color 0.2s var(--ease-soft);
}
.skip-link:hover {
color: var(--ink-secondary);
}
/* Back button (visible only when in deep-dive mode). Sits next to wordmark.
Mirrors the skip-link tone but with a leading chevron. */
.back-button {
appearance: none;
background: transparent;
border: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
letter-spacing: 0.4px;
color: var(--ink-tertiary);
padding: 6px 8px 6px 4px;
border-radius: 4px;
transition:
color 0.2s var(--ease-soft),
background 0.2s var(--ease-soft),
transform 0.2s var(--ease-soft);
}
.back-button[hidden] { display: none; }
.back-button:hover {
color: var(--ink-primary);
background: rgba(247, 249, 250, 0.04);
}
.back-button:hover svg { transform: translateX(-1px); }
.back-button svg { transition: transform 0.2s var(--ease-soft); }
/* ─── Partnership Opener ───────────────────────────────────────────────
Top-of-page section that explains the three motions of the partnership
(Diagnose · Amplify · Measure) before the reader meets the product
flywheel. Sized to fill the viewport on load; user scrolls down to
enter the existing .page surface. Lives outside .page on purpose so
the fixed-height interactive area below stays untouched.
──────────────────────────────────────────────────────────────────── */
.opener {
/* ── Opener theme tokens — light cream surface, dark text. Scoped to
this section only; the rest of the page stays on the dark canvas.
Cream-on-top → dark-below = the architectural hand-off between
brand/partnership story and product. ── */
--opener-surface: #F4ECDF;
--opener-surface-warm: #ECE0CD;
--opener-card: #FFFFFF;
--opener-card-border: rgba(60, 50, 35, 0.10);
--opener-card-border-hover: rgba(60, 50, 35, 0.18);
--opener-text-primary: #2A2F36;
--opener-text-secondary: #5A5C5F;
--opener-text-tertiary: #8C857B;
--opener-rule: rgba(60, 50, 35, 0.10);
/* Fills the viewport on load so the entire partnership story is the
first thing the reader sees. The CREAM SURFACE is full-bleed so the
"brand canvas" reads as the whole viewport — only the inner content
respects the 1440px max-width (constrained on the children below). */
min-height: 100vh;
width: 100%;
padding: clamp(var(--space-4), 2.6vh, var(--space-6)) var(--space-6) clamp(var(--space-5), 4vh, var(--space-7));
display: grid;
grid-template-rows: auto 1fr;
gap: clamp(var(--space-5), 3.5vh, var(--space-7));
position: relative;
isolation: isolate;
background: var(--opener-surface);
color: var(--opener-text-primary);
}
/* Constrain the inner content to the same 1440px container as .page below,
so layout reads consistently between cream and dark surfaces — while the
cream background itself spans the full viewport. */
.opener-masthead,
.opener-content {
width: 100%;
max-width: 1440px;
margin-left: auto;
margin-right: auto;
}
/* Subtle warm atmosphere — keeps the cream from feeling flat without
competing with the cards. Cream-on-cream radial wash + a faint cool
accent in the opposite corner. */
.opener::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(ellipse 60% 42% at 18% 20%, rgba(252, 228, 222, 0.45), transparent 65%),
radial-gradient(ellipse 50% 38% at 84% 88%, rgba(80, 152, 163, 0.06), transparent 65%);
}
.opener-masthead {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-5);
}
/* ── Masthead overrides inside the opener ──
Wordmark dot keeps its peach (pops on cream), but text + separator
need dark variants to be readable. */
.opener .wordmark-text { color: var(--opener-text-primary); }
.opener .wordmark-sep { background: rgba(60, 50, 35, 0.20); }
.opener .wordmark-product { color: var(--opener-text-tertiary); }
.opener-skip {
font-size: 12px;
letter-spacing: 0.2px;
color: var(--opener-text-tertiary);
padding: 6px 0;
text-decoration: none;
transition: color 0.2s var(--ease-soft);
}
.opener-skip:hover { color: var(--opener-text-primary); }
.opener-skip:focus-visible { outline-offset: 4px; }
.opener-content {
display: grid;
grid-template-rows: auto 1fr auto;
gap: clamp(var(--space-5), 4vh, var(--space-7));
align-content: center;
min-height: 0;
}
/* Hero — brief, declarative. No filler. */
.opener-hero {
max-width: 1100px;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.opener-eyebrow {
margin: 0;
font-size: 12px;
font-weight: 600;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--signal-stroke); /* deeper coral reads well on cream */
}
.opener-headline {
margin: 0;
font-size: clamp(22px, 2.9vw, 40px);
font-weight: 600;
letter-spacing: -0.4px;
line-height: 1.12;
color: var(--opener-text-primary);
white-space: nowrap;
}
.opener-headline-soft {
color: var(--opener-text-secondary);
font-weight: 400;
}
@media (max-width: 720px) {
.opener-headline {
white-space: normal;
}
}
.opener-sub {
margin: 0;
max-width: 640px;
font-size: clamp(14px, 1.05vw, 16px);
line-height: 1.55;
color: var(--opener-text-secondary);
}
/* ─── Motion cards (horizontal trio) ──────────────────────────────────
Three side-by-side cards at desktop widths. Each card carries a
numbered colored badge, a title, a one-line tagline, and a three-
bullet description. Stacks vertically below ~960px. */
.opener-cards {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(var(--space-4), 1.6vw, var(--space-6));
align-items: stretch;
min-height: 0;
}
.motion-card {
/* Per-card accent driven by modifier classes below. Default to coral
so a card without a modifier still reads coherently on cream. */
--motion-accent: var(--signal-stroke);
--motion-accent-soft: rgba(201, 126, 107, 0.10);
--motion-accent-edge: rgba(201, 126, 107, 0.32);
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: clamp(var(--space-5), 2.4vh, var(--space-6)) clamp(var(--space-5), 1.6vw, var(--space-6));
background: var(--opener-card);
border: 1px solid var(--opener-card-border);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(60, 50, 35, 0.04);
transition:
transform 0.35s var(--ease-soft),
border-color 0.25s var(--ease-soft),
box-shadow 0.25s var(--ease-soft);
}
/* Thin colored rule along the top edge — keyed to the card's accent so
each motion has its own visual signature. */
.motion-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: var(--motion-accent);
opacity: 0.85;
}
.motion-card:hover {
border-color: var(--motion-accent-edge);
box-shadow: 0 6px 18px rgba(60, 50, 35, 0.08);
transform: translateY(-2px);
}
/* Per-motion accent palette ────────────────────────────────────────
Darker variants chosen for cream contrast. Diagnose mid-teal,
Amplify deep navy, Measure deep coral. The same three families as
the dark canvas below — but tuned to sit on light. */
.motion-card--diagnose {
--motion-accent: var(--score); /* #5098A3 — mid teal */
--motion-accent-soft: rgba(80, 152, 163, 0.10);
--motion-accent-edge: rgba(80, 152, 163, 0.32);
}
.motion-card--amplify {
--motion-accent: var(--action-stroke); /* #18486E — deep navy */
--motion-accent-soft: rgba(24, 72, 110, 0.08);
--motion-accent-edge: rgba(24, 72, 110, 0.28);
}
.motion-card--measure {
--motion-accent: var(--signal-stroke); /* #C97E6B — deep coral */
--motion-accent-soft: rgba(201, 126, 107, 0.10);
--motion-accent-edge: rgba(201, 126, 107, 0.32);
}
.motion-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 999px;
background: var(--motion-accent-soft);
border: 1px solid var(--motion-accent);
color: var(--motion-accent);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.4px;
line-height: 1;
font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.motion-title {
margin: 0;
font-size: clamp(20px, 1.8vw, 26px);
font-weight: 600;
letter-spacing: -0.2px;
line-height: 1.1;
color: var(--opener-text-primary);
}
.motion-tagline {
margin: 0 0 var(--space-2);
font-size: 13.5px;
font-weight: 500;
letter-spacing: 0.1px;
line-height: 1.4;
color: var(--motion-accent);
}
/* Section label inside a motion card — "GOAL" / "HOW". Small uppercase
letterspaced subhead in the card's accent, sized down from the
tagline so it reads as a quieter divider, not a competing heading.
The .motion-card column gap (~space-3) provides natural spacing. */
.motion-section-label {
margin: var(--space-2) 0 calc(var(--space-2) * -0.5);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 1.8px;
text-transform: uppercase;
color: var(--motion-accent);
opacity: 0.85;
}
/* Tighten the first label (Goal) so it doesn't push too far from
the tagline, and ensure visual rhythm between Goal block → How label. */
.motion-section-label:first-of-type {
margin-top: 0;
}
/* Bullet list — short, scannable. Colored dot left-aligned, body text
warm gray. Reads like the deep-dive timeline bullets but tighter. */
.motion-bullets {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.motion-bullets li {
position: relative;
padding-left: 18px;
font-size: clamp(13px, 0.95vw, 14.5px);
line-height: 1.55;
color: var(--opener-text-secondary);
}
.motion-bullets li::before {
content: '';
position: absolute;
left: 2px;
top: 0.55em;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--motion-accent);
opacity: 0.95;
}
/* Cadence names inside How bullets read as primary-weight scan anchors. */
.motion-bullets li strong {
color: var(--opener-text-primary);
font-weight: 600;
}
/* CTA — dark outlined pill on cream. Reads as the "enter Kai" handoff. */
.opener-cta {
align-self: center;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
font-size: 13px;
letter-spacing: 0.3px;
color: var(--opener-text-primary);
text-decoration: none;
border: 1px solid rgba(60, 50, 35, 0.22);
border-radius: 999px;
background: transparent;
transition:
color 0.2s var(--ease-soft),
border-color 0.2s var(--ease-soft),
background 0.2s var(--ease-soft),
transform 0.2s var(--ease-soft);
}
.opener-cta:hover {
color: var(--opener-surface);
border-color: var(--opener-text-primary);
background: var(--opener-text-primary);
}
.opener-cta:hover svg { transform: translateY(2px); }
.opener-cta:focus-visible { outline-offset: 4px; }
.opener-cta svg { transition: transform 0.2s var(--ease-soft); }
/* ─── Opener: responsive ───────────────────────────────────────────── */
@media (max-width: 960px) {
.opener-cards {
grid-template-columns: 1fr;
gap: var(--space-4);
}
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.motion-card,
.motion-card:hover,
.opener-cta,
.opener-cta:hover svg { transition: none; transform: none; }
}
/* ─── Stage spread (caption left, figure right) ────────────────────── */
.stage {
display: grid;
grid-template-columns: minmax(200px, 248px) minmax(480px, 1fr);
gap: clamp(var(--space-5), 3vw, var(--space-7));
align-items: stretch;
min-height: 0;
}
/* Deep dive: pair a product shot → collapse stage caption column (left only).
Flex + animated caption width replaces grid-template-columns interpolation (major layout jank source).
Immersive pill + bullets stay in .learn-immersive-copy on the right. */
@media (min-width: 861px) {
.page[data-mode="deepDive"] .stage {
display: flex;
flex-direction: row;
align-items: stretch;
min-height: 0;
gap: clamp(var(--space-5), 3vw, var(--space-7));
/* Gap snaps when pairing toggles — animating gap + flex-basis doubled layout work each frame. */
}
/* Mirror walkthrough .stage column widths (base, stage 1, laptop breakpoint). */
.page[data-mode="deepDive"] .caption {
--stage-caption-w: clamp(200px, 22vw, 248px);
flex-grow: 0;
flex-shrink: 0;
flex-basis: var(--stage-caption-w);
box-sizing: border-box;
min-width: 0;
overflow: hidden;
transform: translateZ(0);
contain: layout;
transition:
flex-basis var(--dd-focus-duration) var(--dd-layout-ease),
opacity var(--dd-focus-duration) var(--dd-focus-ease) var(--dd-caption-delay-in);
}
/* GPU-friendly drift while the caption column narrows — reads smoother than flex-basis alone.
Width is LOCKED to the caption's default width so the heading + body
text inside don't re-wrap when the .caption flex-basis collapses to 0
on Stage Manager focus. .caption has overflow: hidden, so the
fixed-width track is simply clipped from the right edge — text keeps
its line breaks and just slides off behind the clip mask. */
.page[data-mode="deepDive"] .caption-track {
width: var(--stage-caption-w);
min-width: var(--stage-caption-w);
flex-shrink: 0;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
transition: transform var(--dd-focus-duration) var(--dd-slide-ease);
}
@media (min-width: 1101px) {
.page[data-mode="deepDive"][data-stage="1"] .caption {
--stage-caption-w: clamp(252px, 26vw, 320px);
}
}
@media (max-width: 1100px) {
.page[data-mode="deepDive"] .caption {
--stage-caption-w: clamp(208px, 19vw, 272px);
}
}
.page[data-mode="deepDive"] .stage .visual {
transform: translateZ(0);
backface-visibility: hidden;
flex: 1 1 auto;
min-width: 0;
contain: layout;
isolation: isolate;
}
.page[data-mode="deepDive"] .learn-shot-stack {
transform: translateZ(0);
isolation: isolate;
}
}
/* Stage 1 opener: long copy + flywheel — give the caption more room without page scroll */
.page[data-stage="1"] {
gap: clamp(var(--space-3), 2.2vh, var(--space-5));
}
.page[data-stage="1"] .stage {
grid-template-columns: minmax(252px, 320px) minmax(360px, 1fr);
gap: clamp(var(--space-4), 2.5vw, var(--space-6));
}
.page[data-stage="1"] .caption::before {
height: 8%;
}
.page[data-stage="1"] .caption-card {
gap: var(--space-2);
}
.page[data-stage="1"] .caption-headline {
font-size: clamp(20px, 2.1vw, 23px);
line-height: 1.3;
margin-top: var(--space-1);
}
.page[data-stage="1"] .caption-body {
font-size: 13px;
line-height: 1.52;
margin-top: var(--space-2);
}
.page[data-stage="1"] .caption-hint {
margin-top: var(--space-2);
padding-top: var(--space-2);
font-size: 11.5px;
}
/* ─── Caption ──────────────────────────────────────────────────────── */
/* Caption sits left of the figure. The figure has ~14.7% empty space above
its visible chart content (top timeline lives at viewBox y≈147 of 998).
The ::before pseudo pushes the caption-card down by exactly that fraction
of the column height, so the eyebrow lands at the chart's visible top. */
.caption {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.caption::before {
content: '';
display: block;
flex: 0 0 auto;
height: 14.1%;
}
/* Wraps caption-card so deep-dive pairing can add compositor-friendly motion
alongside flex-basis on .caption (layout). */
.caption-track {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-width: 0;
width: 100%;
}
.caption-card {
display: flex;
flex-direction: column;
gap: var(--space-3);
width: 100%;
transition:
opacity 0.32s var(--ease-soft),
transform 0.45s var(--ease);
}
.caption-card.is-leaving {
opacity: 0;
transform: translateY(-6px);
}
.caption-card.is-entering {
opacity: 0;
transform: translateY(8px);
}
/* Deep dive pairing: shorter inner transitions so .caption opacity/flex-basis doesn’t stack with long card fades. */
.page[data-mode="deepDive"] .caption-card:not(.is-leaving):not(.is-entering) {
transition:
opacity 0.2s var(--ease-soft),
transform 0.28s var(--ease);
}
.caption-rule {
display: block;
width: 36px;
height: 1px;
background: var(--ink-tertiary);
margin-bottom: var(--space-3);
}
.caption-eyebrow {
margin: 0;
font-size: 11px;
font-weight: 600;
letter-spacing: 2.6px;
text-transform: uppercase;
color: var(--ink-tertiary);
}
.caption-card.eyebrow-is-empty .caption-eyebrow,
.caption-card.eyebrow-is-empty .caption-rule {
display: none;
}
.caption-card.eyebrow-is-learn-stage .caption-eyebrow,
.caption-card.eyebrow-is-build-stage .caption-eyebrow,
.caption-card.eyebrow-is-measure-stage .caption-eyebrow {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 var(--space-3);
}
.caption-eyebrow-strong {
font-size: 11px;
letter-spacing: 2.6px;
font-weight: 600;
}
.caption-eyebrow-learn {
color: var(--score-label);
font-weight: 600;
}
.caption-eyebrow-measure {
color: var(--signal-label);
font-weight: 600;
}
.caption-eyebrow-sep {
color: var(--ink-tertiary);
font-weight: 600;
}
.caption-card.eyebrow-is-learn-stage .caption-eyebrow-strong {
color: var(--score-label);
}
.caption-card.eyebrow-is-build-stage .caption-eyebrow-strong {
color: var(--action-label);
}
.caption-card.eyebrow-is-measure-stage .caption-eyebrow-strong {
color: var(--signal-label);
}
/* Deep-dive caption: pillar name (Learn / Build / Measure) becomes the
visual anchor of the left pane — sits ABOVE the accent rule, large
and bold. The rule then reads as a tinted underscore beneath the
pillar name rather than a separator above a tiny eyebrow.
Caption-card is flex-column, so order:-1 lifts the eyebrow above the
rule without touching the HTML. The accent rule picks up the pillar
tint and grows to a more present 56px × 2px. */
.page[data-mode="deepDive"] .caption-eyebrow {
order: -1;
margin: 0;
letter-spacing: -0.02em;
text-transform: none;
color: var(--ink-primary);
}
.page[data-mode="deepDive"] .caption-eyebrow-strong {
font-size: clamp(28px, 3vw, 36px);
font-weight: 700;
letter-spacing: -0.02em;
text-transform: none;
line-height: 1.05;
}
.page[data-mode="deepDive"] .caption-card.eyebrow-is-learn-stage .caption-eyebrow,
.page[data-mode="deepDive"] .caption-card.eyebrow-is-build-stage .caption-eyebrow,
.page[data-mode="deepDive"] .caption-card.eyebrow-is-measure-stage .caption-eyebrow {
align-items: baseline;
gap: var(--space-2) var(--space-3);
}
.page[data-mode="deepDive"] .caption-eyebrow-aside {
font-size: 12px;
letter-spacing: 1.6px;
font-weight: 500;
text-transform: uppercase;
color: var(--ink-tertiary);
}
.page[data-mode="deepDive"] .caption-rule {
width: 56px;
height: 2px;
margin-bottom: 0;
border-radius: 2px;
opacity: 0.95;
}
.page[data-mode="deepDive"] .caption-card.eyebrow-is-learn-stage .caption-rule {
background: var(--score-label);
}
.page[data-mode="deepDive"] .caption-card.eyebrow-is-build-stage .caption-rule {
background: var(--action-label);
}
.page[data-mode="deepDive"] .caption-card.eyebrow-is-measure-stage .caption-rule {
background: var(--signal-label);
}
.caption-eyebrow-aside {
font-size: 11px;
letter-spacing: 2.2px;
font-weight: 500;
text-transform: uppercase;
color: var(--ink-tertiary);
}
.caption-headline {
margin: 0;
margin-top: var(--space-2);
font-size: 24px;
line-height: 1.28;
font-weight: 400;
letter-spacing: -0.3px;
color: var(--ink-primary);
text-wrap: balance;
}
.caption-body {
margin: 0;
margin-top: var(--space-3);
font-size: 14px;
line-height: 1.62;
color: var(--ink-secondary);
text-wrap: pretty;
}
.caption-body:empty { display: none; }
/* Talk-track italics: stay in the same color scale, italic only.
No bold, no color pop — restraint over flash. */
.caption-card em {
font-style: italic;
font-weight: inherit;
}
.caption-card strong {
font-weight: 600;
color: var(--ink-primary);
}
/* ─── Visual ───────────────────────────────────────────────────────── */
.visual {
width: 100%;
min-width: 0;
min-height: 0;
display: flex;
justify-content: center;
align-items: center;
padding-inline-start: var(--space-3);
position: relative;
}
/* The figure must FIT the available column AND the available height.
aspect-ratio keeps the SVG from distorting; whichever of max-width or
max-height is the tighter constraint wins, and the other dimension
shrinks proportionally. */
.figure {
display: block;
width: 100%;
max-width: min(1400px, 100%);
max-height: 100%;
height: auto;
aspect-ratio: 1400 / 1040;
}
/* SVG color tokens */
.t-eyebrow { fill: var(--ink-tertiary); }
.t-eyebrow-blue { fill: var(--action-label); }
.t-eyebrow-teal { fill: var(--score-label); }
.t-eyebrow-coral { fill: var(--signal-label); }
.t-eyebrow-muted { fill: var(--ink-tertiary); }
.t-time { fill: var(--ink-tertiary); }
.t-axis { stroke: var(--ink-tertiary); }
.t-axis-faint { stroke: var(--ink-quaternary); }
.t-axis-vert { stroke: var(--ink-quaternary); }
.t-axis-cue { fill: var(--ink-tertiary); }
.t-divider { stroke: var(--ink-quaternary); }
.t-framework { fill: var(--ink-primary); letter-spacing: 2.4px; }
.signal-dot { fill: var(--signal-fill); stroke: var(--signal-stroke); stroke-width: 1.2; }
.signal-dot-sm { stroke-width: 1; }
.signal-dot-faint { opacity: 0.78; }
.signal-label { fill: var(--signal-label); }
.signal-label-faint { opacity: 0.78; }
.signal-meta { fill: var(--ink-tertiary); }
/* Timeline CRM signals align with Learn (teal); wordmark/nav still use --signal-* corals */
.figure .signal-dot {
fill: rgba(232, 250, 252, 0.92);
stroke: var(--score);
stroke-width: 1.35;
filter:
drop-shadow(0 0 8px rgba(149, 199, 207, 0.55))
drop-shadow(0 2px 5px rgba(0, 0, 0, 0.28));
}
.figure .signal-dot.signal-dot-faint {
/* Override global .signal-dot-faint opacity + thin fill — they read as darker on this canvas */
opacity: 1;
fill: rgba(232, 250, 252, 0.92);
stroke: var(--score);
stroke-width: 1.35;
filter:
drop-shadow(0 0 8px rgba(149, 199, 207, 0.55))
drop-shadow(0 2px 5px rgba(0, 0, 0, 0.28));
}
.figure .signal-dot-sm {
stroke-width: 1.12;
}
.figure .signal-dot-sm:not(.signal-dot-faint) {
filter:
drop-shadow(0 0 6px rgba(149, 199, 207, 0.48))
drop-shadow(0 1px 4px rgba(0, 0, 0, 0.24));
}
.timeline-bottom-cluster {
pointer-events: none;
}
/* Same strip weight as top timeline (scaled + r=7 → ~8.8px on screen) */
.figure .signal-dot-timeline-mirror {
stroke-width: 1.42;
}
.figure .signal-label {
fill: var(--score-label);
}
.figure .signal-label-faint {
opacity: 0.78;
}
.silence-dots { fill: var(--ink-quaternary); }
.action-dot { fill: var(--action-fill); stroke: var(--action-stroke); stroke-width: 1.5; }
.action-dot-sm { stroke-width: 1; }
.action-connector { stroke: var(--action-fill); }
.action-label { fill: var(--action-label); }
.action-label-sub { fill: var(--action-sub); }
.legend-label { fill: var(--ink-tertiary); }
.legend-line { stroke: var(--signal-stroke); }
/* Five K-scores — vertical shift-style dials (beside chart) */
.k-dial-stack {
pointer-events: none;
}
.k-dial-column-title {
fill: var(--ink-secondary);
font-size: 14px;
font-weight: 600;
letter-spacing: 2.8px;
text-transform: uppercase;
}
.k-dial-abbr {
fill: var(--ink-primary);
font-size: 14px;
font-weight: 700;
letter-spacing: 1.4px;
}
.k-dial-track-bed {
stroke: rgba(230, 218, 198, 0.14);
stroke-width: 14;
stroke-linecap: round;
}
.k-dial-dot-hollow {
fill: var(--bg);
stroke-width: 2.5;
}
.k-dial-dot-solid {
stroke-width: 1.75;
}
.k-dial-bar {
stroke-linecap: round;
stroke-width: 5;
fill: none;
}
.k-dial-str-kbi .k-dial-bar { stroke: var(--kbi-dark); }
.k-dial-str-kbi .k-dial-dot-hollow { stroke: var(--kbi-dark); }
.k-dial-str-kbi .k-dial-dot-solid {
fill: var(--kbi-dark);
stroke: var(--kbi-light);
}
.k-dial-str-kes .k-dial-bar { stroke: var(--kes-dark); }
.k-dial-str-kes .k-dial-dot-hollow { stroke: var(--kes-dark); }
.k-dial-str-kes .k-dial-dot-solid {
fill: var(--kes-dark);
stroke: var(--kes-light);
}
.k-dial-str-kai .k-dial-bar { stroke: var(--kai-dark); }
.k-dial-str-kai .k-dial-dot-hollow { stroke: var(--kai-dark); }
.k-dial-str-kai .k-dial-dot-solid {
fill: var(--kai-dark);
stroke: var(--kai-light);
}
.k-dial-str-kms .k-dial-bar { stroke: var(--kms-dark); }
.k-dial-str-kms .k-dial-dot-hollow { stroke: var(--kms-dark); }
.k-dial-str-kms .k-dial-dot-solid {
fill: var(--kms-dark);
stroke: var(--kms-light);
}
.k-dial-str-kcs .k-dial-bar { stroke: var(--kcs-dark); }
.k-dial-str-kcs .k-dial-dot-hollow { stroke: var(--kcs-dark); }
.k-dial-str-kcs .k-dial-dot-solid {
fill: var(--kcs-dark);
stroke: var(--kcs-light);
}
/* Opening flywheel (stage 1 only) */
.open-flywheel-ring {
fill: none;
stroke: rgba(247, 249, 250, 0.08);
stroke-width: 0.8;
}
.open-flywheel-inner {
fill: none;
stroke: rgba(247, 249, 250, 0.052);
stroke-width: 0.7;
}
.open-flywheel-inner-soft {
stroke: rgba(247, 249, 250, 0.028);
stroke-width: 0.55;
}
.open-flywheel-arc {
fill: none;
stroke-linecap: round;
stroke-width: 2;
opacity: 0.95;
}
.open-flywheel-arc-learn { stroke: var(--score-label); }
.open-flywheel-arc-build { stroke: var(--action-label); }
.open-flywheel-arc-measure { stroke: var(--signal-label); }
.open-flywheel-node {
stroke-width: 1.4;
}
.open-flywheel-seat {
fill: none;
stroke: rgba(247, 249, 250, 0.18);
stroke-width: 0.9;
pointer-events: none;
}
.open-flywheel-node-learn {
fill: var(--bg);
stroke: var(--score-label);
}
.open-flywheel-node-build {
fill: var(--bg);
stroke: var(--action-label);
}
.open-flywheel-node-measure {
fill: var(--bg);
stroke: var(--signal-label);
}
.open-flywheel-hub {
fill: rgba(253, 228, 222, 0.04);
stroke: rgba(253, 228, 222, 0.22);
stroke-width: 1;
}
.open-flywheel-hub-label {
fill: var(--ink-primary);
font-weight: 600;
}
.open-flywheel-hub-sub {
fill: var(--ink-tertiary);
letter-spacing: 0.4px;
}
.open-flywheel-tag {
font-weight: 600;
text-transform: uppercase;
}
.open-flywheel-tag-learn { fill: var(--score-label); }
.open-flywheel-tag-build { fill: var(--action-label); }
.open-flywheel-tag-measure { fill: var(--signal-label); }
/* ─── Reveal mechanics ─────────────────────────────────────────────── */
[data-show-from] {
opacity: 0;
transition: opacity var(--reveal);
transition-delay: 0s;
}
[data-show-from].is-visible {
opacity: 1;
transition-delay: var(--reveal-delay, 0s);
}
/* The faint stage-1 axis settles softer than the full-strength axis */
.t-axis-faint.is-visible { opacity: 0.55; }
/* K-score curve: stroke-dashoffset draw-on */
.kscore-path {
stroke: var(--signal-stroke);
stroke-dasharray: 930;
stroke-dashoffset: 930;
transition:
stroke-dashoffset 1.6s var(--ease) 0.15s,
opacity 0.4s var(--ease);
}
.kscore-path.is-visible {
stroke-dashoffset: 0;
}
/* Stage 5 — recovery arcs (coral) draw on after each action moment.
No glow, no flash; just a slightly thicker, brighter overlay tracing
the recovery path — clean, crisp, on brand. */
.kscore-recovery {
stroke: var(--signal-label);
stroke-dasharray: 288;
stroke-dashoffset: 288;
opacity: 0;
transition:
opacity 0.3s var(--ease),
stroke-dashoffset 0.8s var(--ease);
}
.kscore-recovery.is-visible {
opacity: 0.95;
stroke-dashoffset: 0;
transition:
opacity 0.3s var(--ease) 0.1s,
stroke-dashoffset 0.8s var(--ease) 0.15s;
}
.kscore-recovery-late.is-visible {
transition:
opacity 0.3s var(--ease) 0.7s,
stroke-dashoffset 0.8s var(--ease) 0.75s;
}
/* ─── Controls ─────────────────────────────────────────────────────── */
.controls {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-4);
padding: var(--space-3) 0 var(--space-2);
}
.step-count {
margin-right: auto;
font-size: 12px;
font-feature-settings: "tnum";
letter-spacing: 1px;
color: var(--ink-tertiary);
}
.step-count [data-step-current] { color: var(--ink-primary); font-weight: 500; }
.step-sep { margin: 0 4px; color: var(--ink-quaternary); }
.nav-arrow {
appearance: none;
background: transparent;
border: 1px solid var(--ink-quaternary);
border-radius: 50%;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-secondary);
cursor: pointer;
transition:
background 0.2s var(--ease-soft),
border-color 0.2s var(--ease-soft),
color 0.2s var(--ease-soft),
transform 0.15s var(--ease-soft);
}
.nav-arrow:hover {
border-color: var(--ink-tertiary);
color: var(--ink-primary);
}
.nav-arrow:active { transform: translateY(1px); }
.nav-arrow:disabled,
.nav-arrow[aria-disabled="true"] {
opacity: 0.3;
pointer-events: none;
}
.nav-next {
background: var(--ink-primary);
border-color: var(--ink-primary);
color: var(--bg);
}
.nav-next:hover {
background: #fff;
border-color: #fff;
color: var(--bg);
}
.progress {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 10px;
}
.progress-dot {
appearance: none;
background: transparent;
border: 1px solid var(--ink-quaternary);
width: 7px;
height: 7px;
border-radius: 50%;
padding: 0;
cursor: pointer;
transition:
background 0.3s var(--ease-soft),
border-color 0.3s var(--ease-soft),
width 0.3s var(--ease-soft),
transform 0.3s var(--ease-soft);
}
.progress-dot:hover {
border-color: var(--ink-secondary);
}
.progress-dot.is-visited {
background: var(--ink-quaternary);
border-color: var(--ink-quaternary);
}
.progress-dot.is-current {
border-color: var(--signal-stroke);
background: var(--signal-fill);
width: 18px;
border-radius: 999px;
}
.restart-link {
appearance: none;
background: transparent;
border: 0;
cursor: pointer;
margin-left: auto;
font-size: 12px;
letter-spacing: 0.2px;
color: var(--ink-tertiary);
padding: 6px 0;
transition: color 0.2s var(--ease-soft);
}
.restart-link:hover { color: var(--ink-secondary); }
.restart-link[hidden] { display: none; }
/* ════════════════════════════════════════════════════════════════════
DEEP DIVES — mode swap, clickable arcs, product screenshots, cross-links
════════════════════════════════════════════════════════════════════ */
/* ─── Mode swap: hide walkthrough scope when in deepDive, vice versa ── */
/* Walkthrough figure (entire SVG) fades out in deepDive — HTML screenshot layer shows instead */
.page[data-mode="deepDive"] .figure {
opacity: 0;
pointer-events: none;
transition: opacity 0.25s var(--ease);
}
/* Product screenshots — one active .deep-dive-panel at a time */
.deep-dive-screens {
position: absolute;
inset: 0;
padding-inline-start: var(--space-3);
display: none;
flex-direction: column;
align-items: stretch;
justify-content: center;
min-height: 0;
z-index: 1;
}
.page[data-mode="deepDive"] .deep-dive-screens {
display: flex;
}
.deep-dive-panel {
display: none;
flex-direction: column;
gap: var(--space-4);
min-height: 0;
flex: 1;
max-height: 100%;
/* overflow:visible — paired with the per-pillar overrides below; lets
the focus-scaled fan card paint past the panel edges without clipping. */
overflow: visible;
}
.deep-dive-panel.is-active {
display: flex;
}
.product-shot-frame {
flex: 1;
min-height: 120px;
border-radius: 14px;
border: none;
background: var(--bg-elevated);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-4) var(--space-5);
overflow: hidden;
}
.product-shot-img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: min(75vh, 880px);
object-fit: contain;
border-radius: 12px;
box-shadow: none;
}
.product-shot-placeholder {
padding: var(--space-6) var(--space-5);
text-align: center;
color: var(--ink-tertiary);
font-size: 13px;
line-height: 1.55;
max-width: 380px;
width: 100%;
}
.product-shot-placeholder-title {
margin: 0 0 var(--space-2);
color: var(--ink-secondary);
font-weight: 500;
}
.product-shot-placeholder-path {
margin: 0;
}
.product-shot-placeholder code {
font-size: 12px;
color: var(--score-label);
word-break: break-all;
}
.dd-see-in-action--after-shot {
font-size: 12px;
font-weight: 500;
font-style: italic;
letter-spacing: 0.2px;
color: var(--score-label);
text-decoration: none;
}
.deep-dive-panel-build .dd-see-in-action--after-shot {
color: var(--action-label);
}
.deep-dive-panel-measure .dd-see-in-action--after-shot {
color: var(--signal-label);
}
.dd-see-in-action--after-shot:hover {
color: var(--ink-primary);
text-decoration: underline;
}
/* Under timeline bullets (right column), right-aligned — stays clear when shots scale up. */
.learn-copy-see-action {
padding-top: var(--space-4);
margin-top: var(--space-2);
border-top: 1px solid rgba(149, 199, 207, 0.14);
text-align: right;
align-self: stretch;
}
.learn-copy-see-action--build {
border-top-color: rgba(154, 195, 227, 0.18);
}
.learn-copy-see-action--measure {
border-top-color: rgba(247, 198, 186, 0.22);
}
.deep-dive-panel-learn .learn-copy-see-action .dd-see-in-action--after-shot:focus-visible {
outline: 2px solid var(--learn-teal-bright);
outline-offset: 3px;
border-radius: 2px;
}
.deep-dive-panel-build .learn-copy-see-action .dd-see-in-action--after-shot:focus-visible {
outline: 2px solid var(--action-label);
outline-offset: 3px;
border-radius: 2px;
}
.deep-dive-panel-measure .learn-copy-see-action .dd-see-in-action--after-shot:focus-visible {
outline: 2px solid var(--signal-label);
outline-offset: 3px;
border-radius: 2px;
}
/* ─── Learn deep dive: fanned screenshots + clean timeline ─────────── */
/* Two columns inside the Learn panel: left = fanned product shots,
right = teal pill header + bullet timeline. No middle ribbon column,
no duplicate lead — left .caption-card holds the framing copy. */
.deep-dive-panel-learn,
.deep-dive-panel-build,
.deep-dive-panel-measure {
/* overflow:visible so the focus-scaled image can grow past the panel
boundaries (otherwise it gets clipped where the visual meets the
left caption column). The page itself has overflow:hidden, so
anything that wanders past the viewport is still contained.
Laptop spacing is tuned to fit all bullets without needing scroll. */
overflow: visible;
padding-right: var(--space-2);
gap: clamp(var(--space-4), 2.5vh, var(--space-6));
}
.deep-dive-panel-build .learn-immersive,
.deep-dive-panel-measure .learn-immersive {
padding-bottom: var(--space-4);
}
/* Pillar accent tokens: must use .learn-immersive.pillar-immersive--* so these
win over the shared .learn-immersive layout block (same element, two classes). */
.learn-immersive.pillar-immersive--learn {
--learn-teal: var(--score);
--learn-teal-bright: var(--score-glow);
--learn-rail: rgba(149, 199, 207, 0.22);
--pillar-glow-mid: rgba(149, 199, 207, 0.45);
--pillar-glow-soft: rgba(149, 199, 207, 0.18);
--pillar-cadence-tint-a: rgba(149, 199, 207, 0.11);
--pillar-cadence-tint-b: rgba(149, 199, 207, 0.04);
--pillar-cadence-border: rgba(149, 199, 207, 0.2);
--pillar-cadence-rail: rgba(149, 199, 207, 0.32);
--pillar-cadence-dot: rgba(149, 199, 207, 0.55);
--pillar-cadence-kick-glow: rgba(149, 199, 207, 0.6);
}
.learn-immersive.pillar-immersive--build {
--learn-teal: var(--action-label);
--learn-teal-bright: #c9ddf5;
--learn-rail: rgba(154, 195, 227, 0.26);
--pillar-glow-mid: rgba(154, 195, 227, 0.48);
--pillar-glow-soft: rgba(154, 195, 227, 0.2);
--pillar-cadence-tint-a: rgba(154, 195, 227, 0.12);
--pillar-cadence-tint-b: rgba(154, 195, 227, 0.05);
--pillar-cadence-border: rgba(154, 195, 227, 0.22);
--pillar-cadence-rail: rgba(154, 195, 227, 0.32);
--pillar-cadence-dot: rgba(154, 195, 227, 0.58);
--pillar-cadence-kick-glow: rgba(154, 195, 227, 0.65);
}
.learn-immersive.pillar-immersive--measure {
--learn-teal: var(--signal-label);
--learn-teal-bright: #ffd4c9;
--learn-rail: rgba(247, 198, 186, 0.28);
--pillar-glow-mid: rgba(247, 198, 186, 0.42);
--pillar-glow-soft: rgba(247, 198, 186, 0.16);
--pillar-cadence-tint-a: rgba(247, 198, 186, 0.12);
--pillar-cadence-tint-b: rgba(247, 198, 186, 0.04);
--pillar-cadence-border: rgba(247, 198, 186, 0.22);
--pillar-cadence-rail: rgba(247, 198, 186, 0.32);
--pillar-cadence-dot: rgba(247, 198, 186, 0.55);
--pillar-cadence-kick-glow: rgba(247, 198, 186, 0.58);
}
.learn-immersive {
/* dot diameter and rail offset are derived from one number so they
cannot drift apart. */
--learn-dot-size: 14px;
--learn-rail-x: 18px; /* center of rail = center of every dot */
display: grid;
/* Right column carries pill + bullets + cadence cards. Wide enough that
bullet text wraps to no more than two short lines and an expanded
"How we work" card doesn't read as a long thin column. Locked width
(rather than fr) so the right side is predictable across viewports. */
grid-template-columns: minmax(0, 1fr) minmax(0, clamp(380px, 32vw, 460px));
/* Slightly more air between shots and copy than the default --space-6 */
gap: clamp(var(--space-5), 3vw, var(--space-7));
align-items: center;
min-height: 0;
flex: 1;
}
/* Pairing the stage resizes this grid; keep reflow scoped to the immersive block. */
.page[data-mode="deepDive"] .learn-immersive {
contain: layout;
}
/* Learn fan uses absolutely positioned layers — layout containment can clip overflow;
scoped removal so Build/Measure keep containment. */
.page[data-mode="deepDive"][data-pillar="learn"] .deep-dive-panel-learn .learn-immersive {
contain: none;
}
.page[data-mode="deepDive"][data-pillar="learn"] .stage .visual {
contain: none;
}
/* Laptop / short viewports: bias further toward the screenshot column.
Right column stays generous so bullet text doesn't get squeezed; height
savings come from tightening the timeline rhythm instead. */
@media (min-width: 900px) and (max-height: 920px) {
.learn-immersive {
grid-template-columns: minmax(0, 1fr) minmax(0, clamp(360px, 28vw, 420px));
gap: clamp(var(--space-4), 2.5vw, var(--space-6));
}
/* Build & Measure carry 4 bullets + tabs + pill + "see in action". The
defaults are tuned for Learn's 3 bullets, so we collapse vertical
rhythm here just enough that the 4th bullet lands above the fold. */
.deep-dive-panel-build .learn-immersive-copy,
.deep-dive-panel-measure .learn-immersive-copy {
gap: var(--space-2);
}
.deep-dive-panel-build .learn-immersive-copy > .learn-timeline,
.deep-dive-panel-measure .learn-immersive-copy > .learn-timeline {
margin-top: var(--space-2);
}
.deep-dive-panel-build .learn-timeline,
.deep-dive-panel-measure .learn-timeline {
font-size: 13.5px;
line-height: 1.5;
}
.deep-dive-panel-build .learn-timeline-item,
.deep-dive-panel-measure .learn-timeline-item {
padding-top: 2px;
padding-bottom: 2px;
}
.deep-dive-panel-build .learn-timeline-item + .learn-timeline-item,
.deep-dive-panel-measure .learn-timeline-item + .learn-timeline-item {
margin-top: var(--space-3);
}
.deep-dive-panel-build .learn-timeline-affordance,
.deep-dive-panel-measure .learn-timeline-affordance {
margin-top: 2px;
}
/* Pill: trim vertical padding so it doesn't dominate the column at
short heights. */
.deep-dive-panel-build .learn-living-pill,
.deep-dive-panel-measure .learn-living-pill {
padding-top: var(--space-3);
padding-bottom: var(--space-3);
font-size: 14px;
line-height: 1.35;
}
.deep-dive-panel-build .build-beat-tabs {
margin-bottom: var(--space-2);
}
}
/* Tight padding around the immersive grid so the stack can use more vertical room. */
.deep-dive-panel-learn .learn-immersive {
padding-bottom: var(--space-2);
}
/* ── Left column: cascaded screenshots ───────────────────────────── */
.learn-immersive-visual {
min-width: 0;
display: flex;
justify-content: center;
align-items: center;
padding: var(--space-3) 0 var(--space-5);
overflow: visible;
}
/* Learn: drop the visual padding so the stack can fill the visual cell. */
.deep-dive-panel-learn .learn-immersive-visual {
padding: var(--space-2) 0 0;
}
.learn-shot-stack {
position: relative;
/* Height driven by --learn-stack-cap (CSS default + JS from panel height).
No fixed aspect-ratio so tall caps aren’t squeezed by width. */
--learn-stack-cap: 520px;
/* Stage Manager–style hover (bullet ↔ shot): front vs back scale */
--stage-focus-front: 1.22;
--stage-focus-back: 1.06;
width: min(680px, 100%, calc(var(--learn-stack-cap) * 1.35));
height: min(var(--learn-stack-cap), 56vh);
max-height: min(var(--learn-stack-cap), 56vh);
min-height: 220px;
margin: 0 auto;
}
/* Build & Measure use Learn's same square-aspect / viewport-bound sizing
pattern (overrides the generic rule above). Limits are bumped a bit
higher so landscape product shots read meaningfully larger when
centered as the Stage Manager active layer. */
.deep-dive-panel-build .learn-shot-stack,
.deep-dive-panel-measure .learn-shot-stack {
width: 100%;
max-width: min(820px, 80vh);
height: auto;
aspect-ratio: 1 / 1;
max-height: min(78vh, 720px);
min-height: 0;
margin: 0 auto;
overflow: visible;
contain: layout style;
}
/* Measure-specific shift: the cohorts layer (left:30% + width:78%) extends
8% past the stack's right edge, which on most viewports overlapped the
bullet column. Translating the whole stack ~6vw to the left puts that
overflow into the gap between image and bullets instead. The fan stays
the same size — only the stack's position moves. The clamp keeps the
shift between 40px (small laptops) and 72px (desktop) so the stack
never wanders too far into the caption pane. */
.deep-dive-panel-measure .learn-shot-stack {
translate: clamp(-72px, -6vw, -40px) 0;
}
/* Build-only stack envelope: bigger ceiling (820 → 960 width, 78vh →
88vh height) so the now-wider visual cell fills with a substantially
larger fan. Measure keeps its tighter 820/78vh bounds because its
cohorts portrait layer would overflow on laptop heights otherwise. */
.deep-dive-panel-build .learn-shot-stack {
max-width: min(960px, 88vh);
max-height: min(85vh, 780px);
}
/* ════════════════════════════════════════════════════════════════════
LEARN deep dive — static fan
Three product screenshots cascade top-left → bottom-right at fixed
positions. No hover-driven re-arrangement; the fan is the whole story.
Aspect-ratio 1/1 keeps the rituals layer (top: 32%) inside the box.
════════════════════════════════════════════════════════════════════ */
.deep-dive-panel-learn .learn-shot-stack {
position: relative;
width: 100%;
/* Slightly larger envelope than Build/Measure (820 → 920, 80vh → 88vh)
so that Learn’s portrait screenshots paint with more presence than the
landscape Measure ones, not just equal to. */
max-width: min(920px, 88vh);
height: auto;
aspect-ratio: 1 / 1;
max-height: min(86vh, 800px);
min-height: 0;
margin: 0 auto;
overflow: visible;
contain: layout style;
}
.deep-dive-panel-learn .learn-shot-stack .learn-shot-layer {
position: absolute;
/* Slightly smaller than the original 86% — drops layer footprint by
~7% so portrait Learn cards don’t feel oversized next to the
intro copy and bullet column. */
width: 80%;
margin: 0;
}
/* Per-layer FAN position: tighter vertical step than Measure’s 22-step
because Learn layers are taller (portrait), so each new card needs less
vertical drop to feel cleanly fanned. */
.deep-dive-panel-learn .learn-shot-layer--data {
top: 0%;
left: 0%;
z-index: 1;
rotate: -4deg;
}
.deep-dive-panel-learn .learn-shot-layer--templates {
top: 12%;
left: 8%;
z-index: 2;
rotate: -0.5deg;
}
.deep-dive-panel-learn .learn-shot-layer--rituals {
top: 24%;
left: 14%;
z-index: 3;
rotate: 4deg;
}
.learn-shot-layer {
position: absolute;
left: 0;
top: 0;
width: 78%;
margin: 0;
}
/* Fan order matches the slide: Data Fields back, Templates middle,
Rituals front. Each next layer drops down ~22% and right ~11%, so
the whole top-left edge of every screenshot remains visible. */
.learn-shot-layer--data {
top: 0%;
left: 0%;
z-index: 1;
}
.learn-shot-layer--templates {
top: 22%;
left: 11%;
z-index: 2;
}
.learn-shot-layer--rituals {
top: 44%;
left: 22%;
z-index: 3;
}
/* Build beat 1 — two fanned layers: roster (back) + student profile (front).
Layer widths bumped aggressively (82→96, 78→92) so each card paints
noticeably larger inside the existing visual cell. Cascade tightens
from 0/26 to 0/20 so the front detail layer still fits inside the
stack envelope at the new wider footprint. */
.build-shot-b1--roster {
top: 0%;
left: 0%;
z-index: 1;
width: 96%;
rotate: -2deg;
}
.build-shot-b1--detail {
top: 20%;
left: 6%;
z-index: 2;
width: 92%;
rotate: 2deg;
}
/* Build beat 2 — three fanned layers: queue → mobile nudge → ritual/template.
Same idea as beat 1: queue/ritual widths bumped aggressively (78→92,
74→88) and the cascade tightens (0/22/44 → 0/16/36) so the bottom
ritual layer doesn't overflow the now-larger envelope. The mobile
phone stays at 44% (set in the override below) — its portrait shape
shouldn't compete in size with the landscape cards on either side. */
.build-shot-b2--queue {
top: 0%;
left: 0%;
z-index: 1;
width: 92%;
rotate: -3deg;
}
.build-shot-b2--mobile {
top: 16%;
left: 8%;
z-index: 2;
width: 76%;
/* Portrait phone reads better upright — no fan tilt on this one. */
rotate: 0deg;
}
.build-shot-b2--ritual {
top: 36%;
left: 16%;
z-index: 3;
width: 88%;
rotate: 3deg;
}
/* Portrait phone UI in beat 2.
The Student-Nudge screenshot is a tall portrait (~2.24 H/W). The
previous rule set figure width: 44% and capped IMG max-height:
340px with object-fit: contain — which clipped the natural height
and centred a tiny phone inside a much wider IMG box, giving the
phone a "sitting inside a box" feel.
New approach: narrow the figure to 32% so the IMG renders the
image at its natural aspect (no contain padding) and the phone
reads as a substantially taller card. Repositioned top/left so
the phone’s top-half sits above the ritual layer (z 3) and is
fully visible to the viewer. */
.deep-dive-panel-build .build-shot-b2--mobile.learn-shot-layer {
top: 3%;
left: 33%;
width: 32%;
z-index: 2;
}
.deep-dive-panel-build .build-shot-b2--mobile .learn-shot-img {
width: 100%;
height: auto;
}
/* Measure — four fanned layers, fanned-deck tilt across the cascade.
Three of the four screenshots are portrait (adoption 1.27 H/W,
cohorts 1.17 H/W, kscores ~1.06 H/W); only effectiveness is landscape.
At 78% layer width the front cohorts card extends past the bottom of
the stack on laptop viewports (1366×768, 1280×800) and overflows the
page. Two-part fix: reduce layer width to 70%, and tighten the
vertical cascade to 0/7/14/21 so cohorts.top (21%) + cohorts.height
(70 × 1.17 ≈ 82%) = 103% of the stack — a ≤3% bleed which sits inside
the visual cell’s bottom padding even on the shortest laptop. */
.deep-dive-panel-measure .learn-shot-layer {
width: 70%;
}
.measure-shot--effectiveness {
top: 0%;
left: 0%;
z-index: 1;
rotate: -3.5deg;
}
.measure-shot--adoption {
top: 7%;
left: 8%;
z-index: 2;
rotate: -1deg;
}
.measure-shot--kscores {
top: 14%;
left: 16%;
z-index: 3;
rotate: 1.5deg;
}
.measure-shot--cohorts {
top: 21%;
left: 24%;
z-index: 4;
rotate: 4deg;
}
.learn-shot-img {
display: block;
width: 100%;
height: auto;
max-width: 100%;
/* slightly squarer corners per slide reference */
border-radius: 8px;
/* white halo: thin bright ring + soft bloom + crisp depth shadow */
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.22),
0 0 18px rgba(255, 255, 255, 0.12),
0 12px 28px rgba(0, 0, 0, 0.42);
}
/* In-image annotation ─────────────────────────────────────────────────
When several bullets reference the same screenshot (Build beat 1:
bullets 2-4 all point at the Zoey profile), each bullet declares
data-highlight-region="…". The corresponding
inside the figure’s pin overlay is positioned with inline % top/left
coordinates and rendered as a small pulsing dot. JS then draws a
dashed SVG leader line from that dot to the bullet that referenced
it, so the connection between bullet and feature is unambiguous. */
.product-shot-pins {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 5;
}
.product-shot-pin {
position: absolute;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--region-accent, #fff);
/* The inline top/left positions the centre of the dot on a feature. */
transform: translate(-50%, -50%);
box-shadow:
0 0 0 3px var(--region-glow, rgba(255, 255, 255, 0.30)),
0 0 14px var(--region-glow, rgba(255, 255, 255, 0.40));
opacity: 0;
transition: opacity 0.20s var(--ease-soft);
}
.product-shot-pin.is-region-active {
opacity: 1;
animation: region-pin-pulse 1.6s var(--ease-soft) infinite;
}
@keyframes region-pin-pulse {
0%, 100% {
box-shadow:
0 0 0 3px var(--region-glow, rgba(255, 255, 255, 0.30)),
0 0 14px var(--region-glow, rgba(255, 255, 255, 0.40));
}
50% {
box-shadow:
0 0 0 9px var(--region-glow-soft, rgba(255, 255, 255, 0.10)),
0 0 22px var(--region-glow, rgba(255, 255, 255, 0.50));
}
}
/* Leader line container — JS injects this into every .learn-immersive
and writes screen-pixel coordinates onto the on hover. The
SVG sits on top of both the visual cell and the copy cell so the
line can bridge them. overflow:visible so the line isn’t clipped
by the SVG’s own bounding box if the geometry briefly exceeds it. */
.region-leader-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: visible;
z-index: 6;
opacity: 0;
transition: opacity 0.22s var(--ease-soft);
}
.region-leader-svg.is-active {
opacity: 1;
}
.region-leader-line {
fill: none;
stroke: var(--region-accent, #fff);
stroke-width: 1.25;
stroke-dasharray: 4 5;
stroke-linecap: round;
}
/* Pillar accents for pins + leader line. */
.deep-dive-panel-build {
--region-accent: var(--action-label);
--region-glow: rgba(154, 195, 227, 0.45);
--region-glow-soft: rgba(154, 195, 227, 0.14);
}
.deep-dive-panel-learn {
--region-accent: var(--score-label);
--region-glow: rgba(149, 199, 207, 0.45);
--region-glow-soft: rgba(149, 199, 207, 0.14);
}
.deep-dive-panel-measure {
--region-accent: var(--signal-label);
--region-glow: rgba(247, 198, 186, 0.45);
--region-glow-soft: rgba(247, 198, 186, 0.14);
}
.learn-shot-placeholder:not([hidden]) {
position: absolute;
inset: 0;
background: var(--bg-elevated);
border-radius: 8px;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Layer fan + focus model.
Each layer has a static base rotation (the fan tilt) plus a focus state.
We use the individual transform properties (CSS Transforms 2):
- `rotate` for the fan tilt
- `scale` for the focus pop and idle breathe
- `translate` for the entry animation (in @keyframes)
This way each property animates independently and they COMPOSE — the
focus scale doesn't wipe out the base rotation, and the entry slide
doesn't fight the breathe scale. The per-layer rotations are set
below in the per-pillar fan position rules.
Hover-focus: matched figure straightens (rotate→0) and scales up 12%;
siblings fade to 32% opacity. */
.learn-shot-layer {
transform-origin: center center;
transition:
opacity 0.28s var(--ease-soft),
rotate 0.42s cubic-bezier(0.22, 1, 0.36, 1),
scale 0.42s cubic-bezier(0.22, 1, 0.36, 1),
translate 0.42s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform, opacity;
backface-visibility: hidden;
}
.learn-shot-stack[data-focus] .learn-shot-layer:not(.is-pillar-focus-active) {
opacity: 0.32;
}
.learn-shot-stack[data-focus] .learn-shot-layer.is-pillar-focus-active {
rotate: 0deg;
scale: 1.12;
z-index: 12;
}
.learn-shot-stack[data-focus] .learn-shot-layer.is-pillar-focus-active::after {
opacity: 1;
}
/* Multi-shot focus: Learn bullet 1 highlights both the rituals and
templates layers simultaneously. Without help, the rituals layer
(front, on top) completely covers templates. Nudge templates up-left
and rituals down-right so both fan out and stay readable side-by-side.
The [data-focus~="..."] selector matches when the keyword is one of
the space-separated values JS writes into data-focus. */
.deep-dive-panel-learn
.learn-shot-stack[data-focus~="rituals"][data-focus~="templates"]
.learn-shot-layer--templates.is-pillar-focus-active {
translate: -10% -8%;
}
.deep-dive-panel-learn
.learn-shot-stack[data-focus~="rituals"][data-focus~="templates"]
.learn-shot-layer--rituals.is-pillar-focus-active {
translate: 6% 4%;
}
/* Tinted bloom that appears under the active screenshot.
Keep bottom inset modest so glow doesn’t spill onto the footer link. */
.learn-shot-layer::after {
content: "";
position: absolute;
inset: -6% -6% -6% -6%;
background: radial-gradient(
closest-side,
var(--pillar-glow-mid),
var(--pillar-glow-soft) 40%,
transparent 75%
);
filter: blur(18px);
opacity: 0;
pointer-events: none;
z-index: -1;
border-radius: inherit;
transition: opacity 0.32s var(--ease-soft);
}
/* Idle breathe — only the front (top-z) layer in each fan, and only when
nothing is focused (otherwise the breathe scale would override the
focus scale on the front layer). Subtle ambient motion so the visual
feels alive without competing with the copy. */
@media (prefers-reduced-motion: no-preference) {
.learn-shot-stack:not([data-focus]) .learn-shot-layer.pillar-shot-breathe {
animation: learn-breathe 6.5s var(--ease-soft) infinite;
}
}
@keyframes learn-breathe {
0%, 100% { scale: 1; }
50% { scale: 1.006; }
}
/* ── Right column: pill + timeline ──────────────────────────────── */
.learn-immersive-copy {
min-width: 0;
display: flex;
flex-direction: column;
/* Tight stack for tabs → pill; extra air before the timeline below */
gap: var(--space-3);
/* When a "How we work" dropdown expands and pushes the bullets past the
row height, the column becomes its own scroll surface. `safe center`
keeps the column vertically centered when content fits and falls back
to top-alignment when it overflows (so the trigger stays reachable). */
align-self: stretch;
min-height: 0;
overflow-y: auto;
overflow-x: clip;
justify-content: safe center;
scroll-padding-block: var(--space-3);
padding-right: 6px;
scrollbar-width: thin;
scrollbar-color: rgba(154, 195, 227, 0.35) transparent;
}
.learn-immersive-copy::-webkit-scrollbar {
width: 6px;
}
.learn-immersive-copy::-webkit-scrollbar-thumb {
background: rgba(154, 195, 227, 0.3);
border-radius: 4px;
}
.learn-immersive-copy::-webkit-scrollbar-thumb:hover {
background: rgba(154, 195, 227, 0.55);
}
.learn-immersive-copy::-webkit-scrollbar-track {
background: transparent;
}
.learn-immersive-copy > .learn-timeline {
margin-top: clamp(var(--space-5), 4vh, var(--space-8));
}
/* Measure: leadership note sits directly above the timeline — drop the
large default margin meant for living-pill → timeline breathing room. */
.deep-dive-panel-measure .learn-immersive-copy > .measure-leadership-note + .learn-timeline {
margin-top: var(--space-2);
}
/* Workshops / Software pill toggle (applied inside each deep dive's right rail).
Splits bullets by primary delivery mode so viewers can see the services
layer and the platform layer of the partnership distinctly. Toggling
swaps the visible below the pill row. */
.ws-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0 0 clamp(8px, 1.5vh, var(--space-3));
}
.ws-pill {
appearance: none;
cursor: pointer;
font: inherit;
font-size: 11px;
font-weight: 600;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--ink-tertiary);
padding: 8px 14px;
border-radius: 999px;
border: 1px solid rgba(247, 249, 250, 0.12);
background: rgba(0, 0, 0, 0.12);
transition:
color 0.2s var(--ease-soft),
border-color 0.2s var(--ease-soft),
background 0.2s var(--ease-soft),
box-shadow 0.2s var(--ease-soft);
}
.ws-pill:hover {
color: var(--ink-primary);
border-color: rgba(154, 195, 227, 0.45);
}
.ws-pill[aria-pressed="true"] {
color: var(--ink-primary);
border-color: rgba(154, 195, 227, 0.55);
background: rgba(154, 195, 227, 0.14);
box-shadow: 0 0 0 1px rgba(154, 195, 227, 0.12) inset;
}
.ws-pill:focus-visible {
outline: 2px solid var(--action-label);
outline-offset: 2px;
}
/* Hidden sections collapse fully so they don't reserve layout space. */
[data-ws-section][hidden] { display: none !important; }
/* Empty-state stub shown while a column's bullets are still being staged. */
.ws-empty {
margin: var(--space-3) 0 0;
padding: var(--space-3) var(--space-4);
border-radius: 10px;
border: 1px dashed rgba(247, 249, 250, 0.16);
color: var(--ink-tertiary);
font-size: 13px;
font-style: italic;
line-height: 1.55;
}
/* Build deep dive: Segmentation vs Next-best-action (hash #build / #build-2) */
.build-beat-tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0 0 clamp(8px, 1.5vh, var(--space-3));
}
.build-beat-tab {
appearance: none;
cursor: pointer;
font: inherit;
font-size: 11px;
font-weight: 600;
letter-spacing: 1.2px;
text-transform: uppercase;
text-decoration: none;
color: var(--ink-tertiary);
padding: 8px 12px;
border-radius: 999px;
border: 1px solid rgba(247, 249, 250, 0.12);
background: rgba(0, 0, 0, 0.12);
transition:
color 0.2s var(--ease-soft),
border-color 0.2s var(--ease-soft),
background 0.2s var(--ease-soft);
}
.build-beat-tab:hover {
color: var(--ink-primary);
border-color: rgba(154, 195, 227, 0.45);
}
.page[data-beat="1"] .build-beat-tab[href="#build"],
.page[data-beat="2"] .build-beat-tab[href="#build-2"] {
color: var(--ink-primary);
border-color: rgba(154, 195, 227, 0.55);
background: rgba(154, 195, 227, 0.14);
box-shadow: 0 0 0 1px rgba(154, 195, 227, 0.12) inset;
}
.build-beat-tab:focus-visible {
outline: 2px solid var(--action-label);
outline-offset: 2px;
}
.learn-living-pill {
position: relative;
margin: 0;
padding: var(--space-4) var(--space-5)
var(--space-4) calc(var(--space-5) + 18px);
border-radius: 14px;
text-align: center;
font-size: 15px;
line-height: 1.4;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--ink-primary);
background: linear-gradient(
180deg,
color-mix(in srgb, var(--learn-teal) 18%, transparent),
color-mix(in srgb, var(--learn-teal) 10%, transparent)
);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--learn-teal) 20%, transparent) inset;
isolation: isolate;
}
/* Tiny pulsing teal dot at the pill's left edge — visual hand-off to
the bullet timeline below. */
.learn-pill-pulse {
position: absolute;
left: var(--space-4);
top: 50%;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--learn-teal-bright);
box-shadow:
0 0 0 3px color-mix(in srgb, var(--learn-teal) 20%, transparent),
0 0 16px color-mix(in srgb, var(--learn-teal) 55%, transparent);
transform: translateY(-50%);
z-index: 1;
}
@media (prefers-reduced-motion: no-preference) {
.learn-pill-pulse {
animation: learn-pill-pulse 2.6s var(--ease-soft) infinite;
}
}
@keyframes learn-pill-pulse {
0%, 100% { transform: translateY(-50%) scale(1); opacity: 1; }
50% { transform: translateY(-50%) scale(1.22); opacity: 0.78; }
}
.learn-pill-text {
position: relative;
z-index: 1;
}
/* Single touch of color pop — the words that name the idea. */
.learn-pill-accent {
background: linear-gradient(180deg, #ffffff 0%, var(--learn-teal-bright) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 700;
letter-spacing: 0;
}
/* Slow shimmer sweep across the pill background. */
.learn-living-pill::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(
115deg,
transparent 35%,
rgba(255, 255, 255, 0.10) 50%,
transparent 65%
);
background-size: 250% 100%;
background-position: 200% 0;
pointer-events: none;
z-index: 0;
}
@media (prefers-reduced-motion: no-preference) {
.learn-living-pill::before {
animation: learn-pill-shimmer 9s linear infinite;
}
}
@keyframes learn-pill-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -100% 0; }
}
/* ─── Partnership-altitude callouts (Build kickoff + Measure SC) ──────
Small bars that sit ABOVE the operational pill/timeline content on a
pillar deep dive, naming the partnership moment that anchors all the
operational work below. Each is color-keyed to its pillar (Build →
blue, Measure → coral). Same shape, parallel architecture. */
.measure-leadership-note,
.build-kickoff-note {
margin: 0;
padding: var(--space-3) var(--space-4);
border-radius: 0 8px 8px 0;
font-size: 13px;
line-height: 1.55;
color: var(--ink-secondary);
letter-spacing: 0.05px;
}
.deep-dive-panel-measure .measure-leadership-note {
margin-bottom: var(--space-1);
}
.measure-leadership-note strong,
.build-kickoff-note strong { font-weight: 600; }
.measure-leadership-note em,
.build-kickoff-note em { font-style: italic; }
/* Measure — Steering Committee briefings (coral) */
.measure-leadership-note {
background: rgba(247, 198, 186, 0.045);
border-left: 2px solid var(--signal-label);
}
.measure-leadership-note strong { color: var(--signal-label); }
/* Build — 3-day partnership kickoff, Build portion (blue) */
.build-kickoff-note {
background: rgba(154, 195, 227, 0.045);
border-left: 2px solid var(--action-label);
}
.build-kickoff-note strong { color: var(--action-label); }
.learn-timeline {
list-style: none;
margin: 0;
padding: 0;
position: relative;
font-size: 14px;
line-height: 1.55;
font-weight: 500;
color: var(--ink-secondary);
}
/* Vertical rail: center sits exactly at --learn-rail-x. */
.learn-timeline::before {
content: "";
position: absolute;
left: var(--learn-rail-x);
transform: translateX(-50%);
top: 1.05em;
bottom: 1.05em;
width: 1px;
background: linear-gradient(
180deg,
transparent,
var(--learn-rail) 6%,
var(--learn-rail) 94%,
transparent
);
}
.learn-timeline-item {
position: relative;
margin: 0;
/* leave room for the rail+dot, then a comfortable text gutter */
padding: var(--space-2) 0 var(--space-2)
calc(var(--learn-rail-x) + var(--space-5));
border-radius: 8px;
cursor: default;
transition:
color 0.2s var(--ease-soft),
padding-left 0.25s var(--ease-soft);
}
/* The bullet itself is now a button (so the whole row is clickable to
expand the cadence card). Reset all browser button chrome so it reads
as text. */
.learn-timeline-trigger {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
appearance: none;
background: none;
border: 0;
margin: 0;
padding: 0;
text-align: left;
font: inherit;
color: inherit;
letter-spacing: inherit;
cursor: pointer;
border-radius: 6px;
transition: color 0.2s var(--ease-soft);
}
.learn-timeline-text {
display: block;
}
.learn-timeline-affordance {
align-self: flex-end;
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 6px;
font-size: 10px;
font-weight: 600;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--ink-tertiary);
opacity: 0.55;
transition:
opacity 0.2s var(--ease-soft),
color 0.2s var(--ease-soft);
}
.learn-timeline-chevron {
display: block;
color: currentColor;
transition: transform 0.25s var(--ease-soft);
}
.learn-timeline-item:hover .learn-timeline-affordance,
.learn-timeline-trigger:focus-visible .learn-timeline-affordance,
.learn-timeline-item[data-expanded="true"] .learn-timeline-affordance {
opacity: 1;
color: var(--learn-teal-bright);
}
.learn-timeline-item[data-expanded="true"] .learn-timeline-chevron {
transform: rotate(180deg);
}
.learn-timeline-trigger:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--learn-teal-bright);
}
/* Dot: center sits exactly at --learn-rail-x, on the rail. */
.learn-timeline-item::before {
content: "";
position: absolute;
left: var(--learn-rail-x);
transform: translateX(-50%);
top: calc(0.85em - (var(--learn-dot-size) / 2) + 0.25em);
width: var(--learn-dot-size);
height: var(--learn-dot-size);
border-radius: 50%;
background: var(--learn-teal);
box-shadow:
0 0 0 3px color-mix(in srgb, var(--learn-teal) 22%, transparent),
0 0 12px color-mix(in srgb, var(--learn-teal) 35%, transparent);
z-index: 2;
transition:
width 0.22s var(--ease-soft),
height 0.22s var(--ease-soft),
top 0.22s var(--ease-soft),
background 0.22s var(--ease-soft),
box-shadow 0.22s var(--ease-soft);
}
/* Local rail bloom — vertical glow that lights up the rail around the
active dot when its bullet is hovered/focused. */
.learn-timeline-item::after {
content: "";
position: absolute;
left: var(--learn-rail-x);
top: calc(0.85em + 0.25em);
width: 5px;
height: 56px;
transform: translate(-50%, -50%);
background: radial-gradient(
ellipse at center,
color-mix(in srgb, var(--learn-teal) 55%, transparent),
transparent 75%
);
filter: blur(3px);
opacity: 0;
pointer-events: none;
z-index: 1;
transition: opacity 0.22s var(--ease-soft);
}
.learn-timeline-item + .learn-timeline-item {
margin-top: var(--space-6);
}
.learn-timeline-item strong {
font-weight: 600;
color: var(--ink-primary);
/* Underline that sweeps in on hover — left-to-right. */
background-image: linear-gradient(
90deg,
var(--learn-teal-bright),
var(--learn-teal)
);
background-repeat: no-repeat;
background-size: 0% 1px;
background-position: 0 100%;
padding-bottom: 1px;
transition: background-size 0.45s var(--ease-soft);
}
.learn-timeline-item:hover,
.learn-timeline-item:focus-within,
.learn-timeline-item[data-expanded="true"] {
color: var(--ink-primary);
padding-left: calc(var(--learn-rail-x) + var(--space-5) + 4px);
}
.learn-timeline-item:hover strong,
.learn-timeline-item:focus-within strong {
background-size: 100% 1px;
}
.learn-timeline-item:hover::before,
.learn-timeline-item:focus-within::before,
.learn-timeline-item[data-expanded="true"]::before {
width: 16px;
height: 16px;
/* re-anchor center: top = baseline center − dot/2 */
top: calc(0.85em - 8px + 0.25em);
background: var(--learn-teal-bright);
box-shadow:
0 0 0 4px color-mix(in srgb, var(--learn-teal) 30%, transparent),
0 0 22px color-mix(in srgb, var(--learn-teal) 65%, transparent);
}
.learn-timeline-item:hover::after,
.learn-timeline-item:focus-within::after,
.learn-timeline-item[data-expanded="true"]::after {
opacity: 1;
}
/* ── Engagement-model cadence card (per-bullet expand) ─────────────── */
/* Smooth expand/collapse via grid-template-rows: 0fr → 1fr.
Why not max-height: animating max-height to a fixed upper bound (e.g.
720px) interpolates linearly past the actual content height (~300px),
so the visible reveal finishes at ~40% of the duration and then the
text just sits there for the remaining 60% — that's what reads as
"choppy / doesn't smoothly come back to place". 1fr resolves to the
natural content height, so the track ends exactly when the content
is fully visible. Pair with opacity on the inner so the content
cross-fades while the track grows. */
.learn-engagement-card {
display: grid;
grid-template-rows: 0fr;
margin-top: 0;
transition:
grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1),
margin-top 0.45s cubic-bezier(0.22, 1, 0.36, 1);
will-change: grid-template-rows;
}
.learn-timeline-item[data-expanded="true"] .learn-engagement-card {
grid-template-rows: 1fr;
margin-top: var(--space-3);
}
.learn-engagement-inner {
/* Grid item: clip overflow + allow shrink to 0. Together with the
parent's grid-template-rows this is what makes the reveal smooth. */
overflow: hidden;
min-height: 0;
opacity: 0;
transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1);
background: linear-gradient(
180deg,
var(--pillar-cadence-tint-a),
var(--pillar-cadence-tint-b)
);
border: 1px solid var(--pillar-cadence-border);
border-radius: 12px;
padding: var(--space-4) var(--space-5);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
.learn-timeline-item[data-expanded="true"] .learn-engagement-inner {
opacity: 1;
}
/* ── Cadence track (mini timeline) ────────────────────────────────── */
/* Single 5-column grid drives both the dots row and the labels row.
Every column is 1fr, so a dot at column-center and a label at
column-center always sit on the same vertical axis. */
.cadence-track {
margin-bottom: var(--space-4);
}
.cadence-rail-row,
.cadence-labels-row {
display: grid;
grid-template-columns: repeat(5, 1fr);
align-items: center;
}
.cadence-rail-row {
position: relative;
height: 14px;
}
.cadence-rail-row::before {
content: "";
position: absolute;
top: 50%;
/* span between the centers of the first and last columns */
left: 10%;
right: 10%;
height: 1.5px;
background: var(--pillar-cadence-rail);
border-radius: 2px;
transform: translateY(-50%);
}
.cadence-dot {
margin: 0 auto;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--pillar-cadence-dot);
position: relative;
z-index: 1;
}
.cadence-dot--kickoff {
width: 12px;
height: 12px;
background: var(--learn-teal-bright);
box-shadow: 0 0 10px var(--pillar-cadence-kick-glow);
}
.cadence-labels-row {
margin-top: 6px;
font-size: 10px;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--ink-tertiary);
font-weight: 600;
}
.cadence-labels-row span {
text-align: center;
}
/* Meta rows */
.cadence-meta {
margin: 0;
padding: 0;
display: grid;
gap: 12px;
}
.cadence-row {
display: grid;
grid-template-columns: 64px 1fr;
gap: var(--space-3);
align-items: baseline;
}
.cadence-key {
margin: 0;
font-size: 10px;
letter-spacing: 1.6px;
text-transform: uppercase;
font-weight: 700;
color: var(--ink-tertiary);
}
.cadence-row:first-child .cadence-key {
color: var(--learn-teal-bright);
}
.cadence-row:last-child .cadence-key {
color: var(--learn-teal);
}
.cadence-val {
margin: 0;
font-size: 13px;
line-height: 1.5;
color: var(--ink-secondary);
font-weight: 500;
}
/* Highlight the artifact / method name without going full-bold heavy */
.cadence-val strong {
color: var(--ink-primary);
font-weight: 600;
letter-spacing: 0.005em;
}
/* Learn + Build + Measure: tighter cadence copy + comfortable line length */
.deep-dive-panel-learn .cadence-meta,
.deep-dive-panel-build .cadence-meta,
.deep-dive-panel-measure .cadence-meta {
gap: 14px;
}
.deep-dive-panel-learn .cadence-val,
.deep-dive-panel-build .cadence-val,
.deep-dive-panel-measure .cadence-val {
font-size: 12.75px;
line-height: 1.62;
max-width: 62ch;
}
@media (min-width: 960px) {
.deep-dive-panel-learn .cadence-val,
.deep-dive-panel-build .cadence-val,
.deep-dive-panel-measure .cadence-val {
font-size: 12.5px;
line-height: 1.65;
}
}
/* Deep-dive entry choreography: stack assembles, then copy fades.
Triggered by display-toggle when .is-active is added. Uses transform
only (breathe lives on the `scale` property, so no conflict). */
@media (prefers-reduced-motion: no-preference) {
.deep-dive-panel-learn.is-active .learn-shot-layer {
animation: learn-stack-in 0.55s var(--ease) backwards;
}
.deep-dive-panel-learn.is-active .learn-shot-layer--data {
animation-delay: 0.05s;
}
.deep-dive-panel-learn.is-active .learn-shot-layer--templates {
animation-delay: 0.13s;
}
.deep-dive-panel-learn.is-active .learn-shot-layer--rituals {
animation-delay: 0.21s;
}
.deep-dive-panel-learn.is-active .learn-immersive-copy {
animation: learn-copy-in 0.5s var(--ease) backwards;
animation-delay: 0.32s;
}
.deep-dive-panel-build.is-active .learn-shot-layer,
.deep-dive-panel-measure.is-active .learn-shot-layer {
animation: learn-stack-in 0.55s var(--ease) backwards;
}
.deep-dive-panel-build.is-active .learn-shot-layer:nth-child(1) {
animation-delay: 0.05s;
}
.deep-dive-panel-build.is-active .learn-shot-layer:nth-child(2) {
animation-delay: 0.11s;
}
.deep-dive-panel-build.is-active .learn-shot-layer:nth-child(3) {
animation-delay: 0.17s;
}
.deep-dive-panel-build.is-active .learn-shot-layer:nth-child(4) {
animation-delay: 0.23s;
}
.deep-dive-panel-build.is-active .learn-shot-layer:nth-child(5) {
animation-delay: 0.29s;
}
.deep-dive-panel-measure.is-active .learn-shot-layer:nth-child(1) {
animation-delay: 0.05s;
}
.deep-dive-panel-measure.is-active .learn-shot-layer:nth-child(2) {
animation-delay: 0.11s;
}
.deep-dive-panel-measure.is-active .learn-shot-layer:nth-child(3) {
animation-delay: 0.17s;
}
.deep-dive-panel-measure.is-active .learn-shot-layer:nth-child(4) {
animation-delay: 0.23s;
}
.deep-dive-panel-build.is-active .learn-immersive-copy,
.deep-dive-panel-measure.is-active .learn-immersive-copy {
animation: learn-copy-in 0.5s var(--ease) backwards;
animation-delay: 0.32s;
}
}
/* Use the individual `translate` property (CSS Transforms 2) so the stack
entry slide composes with each layer's static `rotate` (the fan tilt)
instead of overriding it. */
@keyframes learn-stack-in {
from {
opacity: 0;
translate: 0 -14px;
}
}
@keyframes learn-copy-in {
from {
opacity: 0;
translate: 0 8px;
}
}
@media (prefers-reduced-motion: reduce) {
/* Snap any deep-dive entrance / cadence-card / pulse animations off so
reduced-motion users see static composed states immediately. */
.learn-immersive,
.learn-immersive-copy,
.learn-shot-stack,
.page[data-mode="deepDive"] .stage,
.caption,
.learn-shot-layer,
.learn-timeline-item,
.learn-timeline-item::before,
.learn-timeline-item::after,
.learn-timeline-item strong,
.learn-living-pill::before,
.learn-pill-pulse,
.learn-engagement-card,
.page::before {
animation: none !important;
transition: none !important;
}
}
/* ─── Stage 1 hub: clickable flywheel arcs ───────────────────────────── */
.open-flywheel-target {
cursor: pointer;
}
.open-flywheel-target-hit {
fill: transparent;
stroke: transparent;
}
.open-flywheel-targets {
/* Hit areas only respond on stage 1 of walkthrough mode.
Walkthrough mode hides the flywheel on stage >=2 via [data-hide-from],
so pointer-events naturally fall away with opacity:0; we still belt-and-brace
here for mode safety. */
pointer-events: auto;
}
.page[data-mode="deepDive"] .open-flywheel-targets {
pointer-events: none;
}
/* Hover & focus state — JS toggles .is-hover-learn/-build/-measure on .open-flywheel */
.open-flywheel.is-hover-learn .open-flywheel-arc-learn,
.open-flywheel.is-hover-build .open-flywheel-arc-build,
.open-flywheel.is-hover-measure .open-flywheel-arc-measure {
stroke-width: 2.8;
opacity: 1;
filter: drop-shadow(0 0 10px currentColor);
}
.open-flywheel.is-hover-learn .open-flywheel-tag-learn,
.open-flywheel.is-hover-build .open-flywheel-tag-build,
.open-flywheel.is-hover-measure .open-flywheel-tag-measure {
font-weight: 700;
letter-spacing: 3px;
}
.open-flywheel.is-hover-learn .open-flywheel-node-learn,
.open-flywheel.is-hover-build .open-flywheel-node-build,
.open-flywheel.is-hover-measure .open-flywheel-node-measure {
r: 7.5;
stroke-width: 2;
}
.open-flywheel-target:focus-visible .open-flywheel-target-hit {
fill: rgba(247, 249, 250, 0.03);
stroke: var(--ink-secondary);
stroke-width: 1.2;
stroke-dasharray: 4 4;
}
.open-flywheel-arc,
.open-flywheel-tag,
.open-flywheel-node {
transition:
stroke-width 0.2s var(--ease-soft),
opacity 0.2s var(--ease-soft),
letter-spacing 0.2s var(--ease-soft),
r 0.2s var(--ease-soft),
filter 0.2s var(--ease-soft);
}
/* First-visit pulse hint — JS toggles .pulse-hint on .open-flywheel briefly
on initial Stage 1 reveal, to suggest the arcs are clickable. We pulse the
stationary "seat" rings, not the traveling nodes, so the handoff animation
doesn't get visually clobbered. */
@keyframes flywheel-seat-pulse {
0%, 100% { r: 6; opacity: 1; }
50% { r: 14; opacity: 0.35; }
}
.open-flywheel.pulse-hint .open-flywheel-seat {
animation: flywheel-seat-pulse 1.6s var(--ease-soft) 2;
}
/* ─── Stage 1 hint paragraph (in caption body) ───────────────────────── */
.caption-hint {
margin: var(--space-3) 0 0;
padding-top: var(--space-3);
border-top: 1px dashed rgba(247, 249, 250, 0.08);
font-size: 12px;
letter-spacing: 0.2px;
color: var(--ink-tertiary);
font-style: italic;
}
.caption-hint .caption-hint-sep {
margin: 0 6px;
color: var(--ink-quaternary);
font-style: normal;
}
/* ─── Build beat indicator (footer) ──────────────────────────────────── */
.build-beat-indicator {
display: none;
align-items: center;
gap: 8px;
font-size: 12px;
letter-spacing: 0.4px;
color: var(--ink-tertiary);
font-feature-settings: "tnum";
}
.build-beat-indicator[hidden] { display: none !important; }
.page[data-mode="deepDive"][data-pillar="build"] .build-beat-indicator {
/* Beat choice lives in-page above the pill; keep footer for prev/next only. */
display: none;
}
.build-beat-num [data-build-beat-current] {
color: var(--action-label);
font-weight: 600;
}
.build-beat-sep {
color: var(--ink-quaternary);
}
.build-beat-label {
color: var(--ink-secondary);
text-transform: uppercase;
letter-spacing: 1.4px;
}
/* In deep-dive mode hide the walkthrough step counter and progress dots
(the new beat indicator + back button replace them as the orientation cue). */
.page[data-mode="deepDive"] .step-count,
.page[data-mode="deepDive"] .progress {
visibility: hidden;
}
/* In deep-dive mode, hide global prev/next arrows entirely. Build’s
beat-tabs (Segmentation / Next-best-action) at the top of the right
column already cover navigation, so the arrows in the bottom-right
were a redundant control. */
.page[data-mode="deepDive"] .nav-prev,
.page[data-mode="deepDive"] .nav-next {
visibility: hidden;
}
/* ─── Stage 5 cross-link cards (HTML overlay, position:absolute on .visual) ─ */
.stage5-cross-links {
position: absolute;
bottom: 6%;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: var(--space-4);
z-index: 2;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s var(--ease) 0.2s;
}
.stage5-cross-links[hidden] { display: none; }
.page[data-mode="walkthrough"][data-stage="5"] .stage5-cross-links {
opacity: 1;
pointer-events: auto;
}
.cross-link-card {
display: inline-flex;
flex-direction: column;
gap: 2px;
align-items: flex-start;
padding: 12px 18px 12px 16px;
border-radius: 12px;
background: rgba(247, 249, 250, 0.04);
border: 1px solid rgba(247, 249, 250, 0.10);
color: var(--ink-primary);
text-decoration: none;
position: relative;
transition:
background 0.2s var(--ease-soft),
border-color 0.2s var(--ease-soft),
transform 0.18s var(--ease-soft);
}
.cross-link-card:hover {
background: rgba(247, 249, 250, 0.07);
transform: translateY(-1px);
}
.cross-link-card-build:hover { border-color: rgba(154, 195, 227, 0.6); }
.cross-link-card-measure:hover { border-color: rgba(247, 198, 186, 0.6); }
.cross-link-card-eyebrow {
font-size: 10px;
font-weight: 600;
letter-spacing: 2.4px;
color: var(--ink-tertiary);
}
.cross-link-card-build .cross-link-card-eyebrow { color: var(--action-label); }
.cross-link-card-measure .cross-link-card-eyebrow { color: var(--signal-label); }
.cross-link-card-title {
font-size: 14px;
font-weight: 500;
letter-spacing: 0.2px;
}
.cross-link-card-arrow {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--ink-tertiary);
font-size: 16px;
transition: transform 0.18s var(--ease-soft);
padding-left: var(--space-3);
}
.cross-link-card:hover .cross-link-card-arrow {
color: var(--ink-primary);
transform: translateY(-50%) translateX(2px);
}
/* ─── Reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
transition: none !important;
animation: none !important;
}
.kscore-path { stroke-dashoffset: 0; }
.kscore-recovery { stroke-dashoffset: 0; opacity: 0; }
.page[data-stage="5"] .kscore-recovery,
.page[data-stage="6"] .kscore-recovery { opacity: 0.9; }
.open-flywheel.pulse-hint .open-flywheel-seat { animation: none; }
}
/* ─── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 1100px) {
.page {
padding: clamp(var(--space-4), 2.6vh, var(--space-6)) var(--space-6);
}
.stage {
grid-template-columns: minmax(208px, 272px) minmax(380px, 1fr);
gap: var(--space-6);
}
}
/* Below this width we stack vertically and let the page scroll naturally. */
@media (max-width: 860px) {
.page {
min-height: 100vh;
max-height: none;
overflow: visible;
padding: var(--space-5);
gap: var(--space-5);
grid-template-rows: auto auto auto;
}
.stage {
grid-template-columns: 1fr;
gap: var(--space-5);
align-items: start;
}
.visual {
padding-inline-start: 0;
}
.deep-dive-screens {
position: relative;
inset: auto;
padding-inline-start: 0;
min-height: min(55vh, 420px);
}
.product-shot-img {
max-height: min(70vh, 720px);
border-radius: 12px;
}
.learn-shot-img {
border-radius: 8px;
}
.learn-immersive {
grid-template-columns: 1fr;
gap: var(--space-5);
align-items: stretch;
}
.learn-shot-stack {
--learn-stack-cap: 360px;
width: min(100%, 480px, calc(var(--learn-stack-cap) * 1.3));
height: min(var(--learn-stack-cap), 44vh);
max-height: min(var(--learn-stack-cap), 44vh);
min-height: 200px;
}
.learn-immersive-copy {
gap: var(--space-4);
}
.learn-immersive-copy > .learn-timeline {
margin-top: var(--space-5);
}
.figure {
max-width: min(1400px, 100%);
max-height: none;
margin: 0 auto;
}
.controls { flex-wrap: wrap; row-gap: var(--space-3); }
.step-count { order: -1; }
.restart-link { margin-left: auto; }
}
/* Shorter viewports (e.g. laptops in split-screen, or longer-caption
stages that push past available height): unlock vertical scroll so
nothing gets clipped. */
@media (min-width: 861px) and (max-height: 760px) {
.page {
min-height: 100vh;
max-height: none;
overflow: visible;
}
.figure { max-height: 70vh; }
}
@media (max-width: 520px) {
.page { padding: var(--space-4); }
.caption-headline {
font-size: 20px;
line-height: 1.3;
}
.caption-body { font-size: 13px; }
}