/* ==========================================================================
stratosX — Homepage Wireframe
--------------------------------------------------------------------------
Purpose: visualize the planned homepage scroll, density, and responsive
behavior. Real layout, real spacing, real type. Placeholder copy is
marked with [brackets] or labelled as such.
--------------------------------------------------------------------------
Sections (vertical order):
0. Nav
1. Hero (mesh-prototype lite)
2. The problem, as operators experience it
3. Bridge line
4. Platform / Modules
5. What changes (measurement themes — moved up in v42)
6. Stat punctuation 2
7. Why now (renamed from "case for orchestration")
8. Designed by operators
9. Quiet CTA
10. Footer
MOVED to /platform in v42:
- Persona overlay
- Framework triangle (closed loop)
--------------------------------------------------------------------------
Responsive breakpoints:
- Wide: 1280px+ (design target)
- Mid: 768-1279 (laptop / narrow desktop)
- Mobile: <768 (phone — significant rework)
========================================================================== */
:root {
/* Color tokens — lifted from pitch site & mesh prototype */
--navy-deep: #0B1631;
--navy: #152847;
--navy-bright: #1F3864;
--navy-soft: #2A4A7D;
--navy-mid: #213C6A;
--navy-bg: #1A305A;
--blue: #4FB4F1;
--blue-soft: #8DC8E8;
--pink: #F999FF;
--pink-soft: #F299D8;
--sky: #A3E3FE;
--yellow: #F5FAA2;
--text: #F4F7FB;
--text-muted: #9DB1CC;
--text-faint: #5E7898;
--border: rgba(255,255,255,0.08);
--border-strong: rgba(255,255,255,0.14);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--navy-deep); color: var(--text); }
html {
/* Push every anchor-jump landing position down by the nav height + a
little breathing room. Without this, jumping to #problem or #why-now
puts the section title flush against the bottom of the fixed nav.
Module rows have a stronger 25vh override (see .module-row) for a
more centered landing on the targeted card. */
scroll-padding-top: 96px;
}
body {
font-family: 'Inter', sans-serif;
font-weight: 300;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
letter-spacing: -0.005em;
overflow-x: hidden;
}
/* ============================================================
AURORA — slow-moving radial color blooms behind everything.
Lifted from the pitch site. Gives the page atmospheric depth
and keeps the brand "smart but colorful" without painting flat
color fields. Lives at z-index 0; content sits above at z-index 2.
============================================================ */
.aurora {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.aurora::before, .aurora::after {
content: "";
position: absolute;
border-radius: 50%;
filter: blur(120px);
opacity: 0.28;
}
.aurora::before {
width: 900px; height: 900px;
top: -20%; left: -10%;
background: radial-gradient(circle, var(--blue) 0%, transparent 60%);
animation: aurora-1 24s ease-in-out infinite alternate;
}
.aurora::after {
width: 800px; height: 800px;
bottom: -15%; right: -10%;
background: radial-gradient(circle, var(--pink) 0%, transparent 60%);
animation: aurora-2 28s ease-in-out infinite alternate;
}
.aurora-third {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.aurora-third::before {
content: "";
position: absolute;
width: 700px; height: 700px;
top: 40%; left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
filter: blur(140px);
opacity: 0.18;
background: radial-gradient(circle, var(--sky) 0%, transparent 60%);
animation: aurora-3 32s ease-in-out infinite alternate;
}
@keyframes aurora-1 {
from { transform: translate(0, 0) scale(1); }
to { transform: translate(120px, 90px) scale(1.1); }
}
@keyframes aurora-2 {
from { transform: translate(0, 0) scale(1); }
to { transform: translate(-100px, 70px) scale(1.15); }
}
@keyframes aurora-3 {
from { transform: translate(-50%, -50%) scale(1); }
to { transform: translate(-30%, -60%) scale(1.2); }
}
/* GRAIN — fine noise texture across the page for warmth */
.grain {
position: fixed;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: 0.04;
background-image: url("data:image/svg+xml;utf8,");
}
/* ============================================================
SCROLL PROGRESS RAIL — restored in v52 (was dropped in an
earlier cleanup along with wireframe utilities). Thin 3px
gradient bar on the left edge that fills blue→pink as the
reader scrolls. Gives a sense of total page length and
where they are in it.
============================================================ */
.scroll-rail {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 3px;
z-index: 49; /* below nav (z-50), above content-shell (z-2) */
background: rgba(255, 255, 255, 0.04);
pointer-events: none;
}
.scroll-rail-fill {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 0%;
background: linear-gradient(to bottom, var(--blue), var(--pink));
transition: height 0.05s linear;
}
/* CONTENT SHELL — sits above aurora and grain */
.content-shell { position: relative; z-index: 2; }
/* GLASS — the foundational card style from the pitch site.
Subtle gradient surface, soft border, blur backdrop. Used wherever
we want a contained block to feel like material, not a flat box. */
.glass {
background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
border: 1px solid var(--border);
border-radius: 16px;
backdrop-filter: blur(8px);
transition: all 0.4s;
position: relative;
}
.glass:hover {
border-color: var(--border-strong);
transform: translateY(-4px);
box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
/* GLOW VARIANTS — tinted inner glow; pairs with .glass.
The pillar variants additionally tint the gradient surface itself. */
.glow-blue { box-shadow: inset 0 0 30px -15px rgba(79,180,241,0.15); }
.glow-pink { box-shadow: inset 0 0 30px -15px rgba(249,153,255,0.15); }
.glow-sky { box-shadow: inset 0 0 30px -15px rgba(163,227,254,0.15); }
.glow-yellow { box-shadow: inset 0 0 30px -15px rgba(245,250,162,0.15); }
.pillar.glass.glow-blue {
background: linear-gradient(160deg, rgba(79,180,241,0.10) 0%, rgba(255,255,255,0.025) 40%, rgba(255,255,255,0.015) 100%);
}
.pillar.glass.glow-pink {
background: linear-gradient(160deg, rgba(249,153,255,0.10) 0%, rgba(255,255,255,0.025) 40%, rgba(255,255,255,0.015) 100%);
}
.pillar.glass.glow-sky {
background: linear-gradient(160deg, rgba(163,227,254,0.10) 0%, rgba(255,255,255,0.025) 40%, rgba(255,255,255,0.015) 100%);
}
.pillar.glass.glow-yellow {
background: linear-gradient(160deg, rgba(245,250,162,0.10) 0%, rgba(255,255,255,0.025) 40%, rgba(255,255,255,0.015) 100%);
}
/* SECTION DIVIDER — fine horizontal hairline that fades at the edges */
.section-divider {
height: 1px;
width: 100%;
background: linear-gradient(90deg, transparent, var(--border-strong) 20%, var(--border-strong) 80%, transparent);
margin: 0 auto;
max-width: 1100px;
}
/* SCROLL REVEAL — content fades up as it enters the viewport */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
.reveal-stagger > * {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-stagger.visible > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.05s; }
.reveal-stagger.visible > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.15s; }
.reveal-stagger.visible > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.25s; }
.reveal-stagger.visible > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.35s; }
@media (prefers-reduced-motion: reduce) {
.reveal, .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
}
/* ============================================================
NAV — sticky, blurred backdrop
============================================================ */
nav.site-nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 50;
padding: 14px 48px;
display: flex;
justify-content: space-between;
align-items: center;
backdrop-filter: blur(20px) saturate(1.4);
background: rgba(11, 22, 49, 0.55);
border-bottom: 1px solid var(--border);
}
nav.site-nav .nav-logo {
display: flex;
align-items: center;
text-decoration: none;
height: 38px;
}
nav.site-nav .nav-logo svg {
height: 38px;
width: auto;
display: block;
}
nav.site-nav .links {
display: flex;
gap: 36px;
font-size: 16px;
}
nav.site-nav .links a {
color: var(--text-muted);
text-decoration: none;
transition: color 0.2s;
}
nav.site-nav .links a:hover { color: var(--text); }
nav.site-nav .cta {
padding: 10px 22px;
background: var(--blue);
color: var(--navy-deep);
border-radius: 999px;
font-weight: 600;
font-size: 13px;
text-decoration: none;
transition: transform 0.2s, box-shadow 0.2s;
}
nav.site-nav .cta:hover {
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(79, 180, 241, 0.3);
}
.mobile-menu-btn { display: none; background: none; border: none; color: var(--text); cursor: pointer; }
/* ============================================================
HERO — mesh-prototype lite. Inherits the prototype's visual
identity but with a reduced strand count for performance and
a structure ready to receive the full prototype mesh.
============================================================ */
section.hero {
position: relative;
min-height: 100vh;
width: 100%;
/* Hero's own background is just transparent — the lit-from-upper-right
atmosphere lives in .hero-backdrop below, which extends past the hero
and fades out smoothly to match the mesh and veil. */
background: transparent;
}
/* Atmospheric backdrop — the lit-from-upper-right radial wash plus the
bottom-fade to navy. Lives in a separate layer that extends 28vh past
the hero (same as .mesh-bg and .hero-veil) and uses the same dissolve mask,
so all three atmospheric layers fade out in unison rather than terminating
at the hero boundary. */
.hero-backdrop {
position: absolute;
top: 0; left: 0; right: 0;
height: calc(100% + 28vh);
pointer-events: none;
z-index: 0;
background: radial-gradient(ellipse at 72% 38%, var(--navy-soft) 0%, var(--navy-mid) 55%, var(--navy-bg) 100%);
-webkit-mask-image: linear-gradient(to bottom,
rgba(0,0,0,1.000) 0%,
rgba(0,0,0,1.000) 40%,
rgba(0,0,0,0.985) 50%,
rgba(0,0,0,0.940) 60%,
rgba(0,0,0,0.860) 70%,
rgba(0,0,0,0.720) 78%,
rgba(0,0,0,0.540) 85%,
rgba(0,0,0,0.330) 91%,
rgba(0,0,0,0.140) 96%,
rgba(0,0,0,0) 100%);
mask-image: linear-gradient(to bottom,
rgba(0,0,0,1.000) 0%,
rgba(0,0,0,1.000) 40%,
rgba(0,0,0,0.985) 50%,
rgba(0,0,0,0.940) 60%,
rgba(0,0,0,0.860) 70%,
rgba(0,0,0,0.720) 78%,
rgba(0,0,0,0.540) 85%,
rgba(0,0,0,0.330) 91%,
rgba(0,0,0,0.140) 96%,
rgba(0,0,0,0) 100%);
}
/* Veil over the mesh on the left side — keeps the longer text block readable.
Extended past the hero (same +28vh as .mesh-bg) and given the same fade-out
mask so the dark wash dissolves smoothly into the section below rather than
cutting at the hero boundary. */
.hero-veil {
position: absolute;
top: 0; left: 0; right: 0;
height: calc(100% + 28vh);
pointer-events: none;
z-index: 1;
background: linear-gradient(100deg,
rgba(11, 22, 49, 0.78) 0%,
rgba(11, 22, 49, 0.62) 35%,
rgba(11, 22, 49, 0.25) 60%,
rgba(11, 22, 49, 0) 78%);
-webkit-mask-image: linear-gradient(to bottom,
rgba(0,0,0,1.000) 0%,
rgba(0,0,0,1.000) 40%,
rgba(0,0,0,0.985) 50%,
rgba(0,0,0,0.940) 60%,
rgba(0,0,0,0.860) 70%,
rgba(0,0,0,0.720) 78%,
rgba(0,0,0,0.540) 85%,
rgba(0,0,0,0.330) 91%,
rgba(0,0,0,0.140) 96%,
rgba(0,0,0,0) 100%);
mask-image: linear-gradient(to bottom,
rgba(0,0,0,1.000) 0%,
rgba(0,0,0,1.000) 40%,
rgba(0,0,0,0.985) 50%,
rgba(0,0,0,0.940) 60%,
rgba(0,0,0,0.860) 70%,
rgba(0,0,0,0.720) 78%,
rgba(0,0,0,0.540) 85%,
rgba(0,0,0,0.330) 91%,
rgba(0,0,0,0.140) 96%,
rgba(0,0,0,0) 100%);
}
/* ============================================================
MESH BACKGROUND — lifted from the stratosX hero prototype.
Strands sweep in from off-canvas, converge on the X logo, kite
accent flashes last. Total reveal cascade ~4.4s.
The mesh sits at z-index 0 inside .hero; content sits above at z-index 3.
============================================================ */
.mesh-bg {
position: absolute;
top: 0; left: 0; right: 0;
/* Total mesh height = hero height + 28vh buffer for strand tails to fade in */
height: calc(100% + 28vh);
pointer-events: none;
overflow: visible;
z-index: 0;
/* Soft strand fade-out using a single uniform gradient with no abrupt slope
changes. The fade starts at 40% (well above the hero bottom) and continues
all the way to 100%, giving a long gentle ramp instead of a concentrated
transition zone. The intermediate stops approximate an ease-in curve
(slow at the start, accelerating at the bottom), which hides any
perceptible "line" because the slope changes smoothly. */
-webkit-mask-image: linear-gradient(to bottom,
rgba(0,0,0,1.000) 0%,
rgba(0,0,0,1.000) 40%,
rgba(0,0,0,0.985) 50%,
rgba(0,0,0,0.940) 60%,
rgba(0,0,0,0.860) 70%,
rgba(0,0,0,0.720) 78%,
rgba(0,0,0,0.540) 85%,
rgba(0,0,0,0.330) 91%,
rgba(0,0,0,0.140) 96%,
rgba(0,0,0,0) 100%);
mask-image: linear-gradient(to bottom,
rgba(0,0,0,1.000) 0%,
rgba(0,0,0,1.000) 40%,
rgba(0,0,0,0.985) 50%,
rgba(0,0,0,0.940) 60%,
rgba(0,0,0,0.860) 70%,
rgba(0,0,0,0.720) 78%,
rgba(0,0,0,0.540) 85%,
rgba(0,0,0,0.330) 91%,
rgba(0,0,0,0.140) 96%,
rgba(0,0,0,0) 100%);
}
.mesh-bg svg {
width: 100%;
/* SVG fills only the hero portion of the container so the viewBox slice
scale stays consistent. Strands rendering past the SVG's box are visible
because of overflow: visible on the SVG. */
height: calc(100% / 1.28);
display: block;
overflow: visible;
}
/* Mesh strands — fade in as a single group rather than per-strand.
Per-strand cascade (whether stroke-dashoffset or opacity) was jerky
because SVG paths aren't reliably GPU-composited; a single opacity
transition on the parent animates one element and one property,
which browsers DO composite cleanly. */
.mesh-strands {
opacity: 0;
transition: opacity 1s ease-out;
}
.mesh-strands.ready {
opacity: 1;
}
/* Per-strand gradients still vary stroke colors + alpha along the path —
that's set up by JS at load time and doesn't animate. */
/* In-SVG X logo — sits inside the mesh SVG and shares its coordinate system,
which locks the logo's spatial relationship to the strand convergence point.
Sequenced AFTER the mesh strands finish fading in (mesh transition: 1s),
so the X appears once the web of lines is settled. */
.x-logo-svg {
opacity: 0;
transform-origin: 5000px 5000px;
animation: x-pop 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1.1s forwards;
}
@keyframes x-pop {
from { opacity: 0; transform: scale(0.92); }
to { opacity: 1; transform: scale(1); }
}
/* X body — clip-path rect held at translate(0,0) so the body is visible.
Prior diagonal wipe animation (translate(-12000,-12000) → (0,0)) was
removed; the X body now appears via the parent .x-logo-svg fade. */
.x-body-wipe-rect {
transform: translate(0px, 0px);
}
/* Pink kite accent — final beat of the entrance, fires after the X is
fully settled. opacity 0→1, scale 2→1 (over-shoot), fill hot→brand pink. */
.x-logo-kite {
opacity: 0;
transform-origin: 6516px 7591px;
animation: kite-flash 0.6s cubic-bezier(0.34, 1.2, 0.64, 1) 1.7s forwards;
}
@keyframes kite-flash {
0% { opacity: 0; transform: scale(2); fill: #FF44BB; }
20% { opacity: 1; transform: scale(2); fill: #FF44BB; }
100% { opacity: 1; transform: scale(1); fill: #F999FF; }
}
.hero-content {
position: relative;
z-index: 3;
max-width: 1320px;
margin: 0 auto;
padding: 180px 48px 160px;
/* Asymmetric: text block sits left of center, mesh and X-mark live on the right */
max-width: min(1320px, 100%);
}
.hero-content h1 {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: clamp(48px, 7vw, 104px);
line-height: 0.96;
letter-spacing: -0.035em;
margin-bottom: 36px;
margin-top: 0;
max-width: 920px;
opacity: 0;
animation: fade-up 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.4s forwards;
}
.hero-content h1 em {
font-style: normal;
font-weight: 700;
background: linear-gradient(135deg, var(--blue) 20%, var(--pink) 60%, var(--yellow) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Tier 2: company-level claim — larger, lighter, color-anchored */
.hero-content .hero-tier.company {
max-width: 720px;
font-size: clamp(20px, 2vw, 24px);
font-weight: 300;
color: var(--text);
line-height: 1.45;
margin-bottom: 22px;
letter-spacing: -0.005em;
opacity: 0;
animation: fade-up 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.7s forwards;
}
.hero-content .hero-tier.company b {
color: var(--blue-soft);
font-weight: 500;
}
/* Tier 3: product-level claim — smaller, slightly tighter */
.hero-content .hero-tier.product {
max-width: 680px;
font-size: 17px;
font-weight: 300;
color: var(--text-muted);
line-height: 1.55;
margin-bottom: 44px;
opacity: 0;
animation: fade-up 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.9s forwards;
}
.hero-content .hero-tier.product b {
color: var(--text);
font-weight: 500;
}
.hero-content .hero-tier.product .product-tail {
display: inline;
color: var(--text);
font-weight: 400;
font-style: italic;
letter-spacing: -0.005em;
}
.hero-content .cta-row {
display: flex; gap: 20px; flex-wrap: wrap;
opacity: 0;
animation: fade-up 1.2s cubic-bezier(0.16, 1, 0.3, 1) 2.1s forwards;
}
/* Scroll pointer — quiet directional cue at the bottom of the hero */
.hero-scroll-pointer {
position: absolute;
bottom: 40px;
right: 48px;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--text-faint);
text-decoration: none;
opacity: 0;
animation: fade-up 1.2s cubic-bezier(0.16, 1, 0.3, 1) 3.0s forwards,
scroll-bounce 2.2s ease-in-out 4.2s infinite;
transition: color 0.2s;
}
.hero-scroll-pointer:hover { color: var(--text); }
.hero-scroll-pointer .arrow { font-size: 18px; line-height: 1; }
@keyframes scroll-bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(6px); }
}
.btn-primary {
padding: 16px 36px;
background: var(--text);
color: var(--navy-deep);
border-radius: 999px;
font-weight: 600;
font-size: 15px;
text-decoration: none;
display: inline-flex; align-items: center; gap: 8px;
transition: all 0.3s;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(255,255,255,0.15); }
.btn-secondary {
padding: 16px 28px;
color: var(--text);
text-decoration: none;
font-weight: 500; font-size: 15px;
display: inline-flex; align-items: center; gap: 10px;
}
.btn-secondary::after { content: "→"; color: var(--blue-soft); font-weight: 300; }
@keyframes fade-up {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
/* ============================================================
SECTION SCAFFOLDING (shared between non-hero sections)
============================================================ */
section.block {
position: relative;
max-width: 1320px;
margin: 0 auto;
padding: 140px 48px;
}
.eyebrow {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--blue-soft);
margin-bottom: 24px;
display: inline-flex;
align-items: center;
gap: 12px;
}
.eyebrow::before {
content: ""; width: 28px; height: 1px; background: var(--blue-soft);
}
h2.block-title {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: clamp(34px, 4.8vw, 60px);
line-height: 1.05;
letter-spacing: -0.03em;
margin-bottom: 28px;
max-width: 880px;
}
h2.block-title b { color: var(--blue-soft); font-weight: 700; }
h2.block-title em {
font-style: normal;
background: linear-gradient(135deg, var(--blue) 20%, var(--pink) 80%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
}
.lede {
font-size: 18px;
color: var(--text-muted);
max-width: 720px;
margin-bottom: 56px;
line-height: 1.6;
}
.lede b { color: var(--text); font-weight: 500; }
/* ============================================================
STAT PUNCTUATION — single big number used as scroll rhythm.
Brief, full-bleed, breaks up content sections.
============================================================ */
section.stat-punct {
position: relative;
padding: 120px 48px;
text-align: center;
overflow: hidden;
}
section.stat-punct::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 50% 50%, rgba(79,180,241,0.08) 0%, transparent 60%);
pointer-events: none;
}
.stat-punct-inner {
position: relative;
max-width: 880px;
margin: 0 auto;
}
.stat-punct .stat-number {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: clamp(60px, 9vw, 132px);
line-height: 0.95;
letter-spacing: -0.04em;
margin-bottom: 24px;
background: linear-gradient(135deg, var(--blue) 0%, var(--pink) 60%, var(--yellow) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.stat-punct .stat-context {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: clamp(20px, 2.4vw, 28px);
line-height: 1.3;
letter-spacing: -0.015em;
margin-bottom: 20px;
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
.stat-punct .stat-source {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-faint);
}
/* Variant: pink-led palette for the second occurrence */
section.stat-punct.alt::before {
background: radial-gradient(ellipse at 50% 50%, rgba(249,153,255,0.08) 0%, transparent 60%);
}
section.stat-punct.alt .stat-number {
background: linear-gradient(135deg, var(--pink) 0%, var(--sky) 60%, var(--blue) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ============================================================
SECTION CLOSER — reusable component for end-of-section beats
that aren't section headers but are weightier than a caption.
Currently used for the ~60% beat that closes Section 2.
v47: Strand removed. Hero mesh strands are reserved to the hero
only for now. Closer is now plain typography — gradient-filled
stat numeral on the left, supporting text on the right.
============================================================ */
.section-closer {
position: relative;
margin: 96px 0 0 0;
padding: 56px 48px 0 48px;
max-width: 920px;
}
/* v59: closer-60 specific treatment.
Now that closer-60 sits as a section-lead-in beat (above the graph)
rather than a section-end beat, it needs a stronger architectural
marker: a full-width strip with hairlines top and bottom, and a soft
radial halo centered behind the stat to break the wording flow. The
strip escapes the section's max-width using viewport-relative margins
so the hairlines run page-wide; inner content stays aligned to the
section's normal padding edges via matching viewport-relative padding. */
.section-closer.closer-60 {
position: relative;
/* Reset base spacing — closer-60 controls its own */
margin: 80px 0 0 0;
padding: 0;
max-width: none;
/* Page-width escape: pull strip out to viewport edges via negative
margins, then pad content back in to the section's padding line
(48px). This avoids the width:100vw + scrollbar gotcha. */
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
/* Hairlines top + bottom, matching the .problem-diagnostic strip pattern */
border-top: 1px solid var(--border-strong);
border-bottom: 1px solid var(--border-strong);
/* Equal vertical breathing room above and below the stat */
padding: 88px calc(50vw - 50% + 48px);
/* Subtle radial halo centered on the stat — breaks the wording flow,
reads as "this is a beat" without feeling decorative. */
background:
radial-gradient(ellipse 600px 280px at 32% 50%, rgba(79, 180, 241, 0.10), transparent 65%),
radial-gradient(ellipse 800px 320px at 32% 50%, rgba(163, 227, 254, 0.05), transparent 70%);
overflow: hidden;
}
.closer-line {
position: relative;
margin: 0;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: clamp(20px, 2.2vw, 28px);
line-height: 1.35;
letter-spacing: -0.015em;
color: var(--text);
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0 18px;
}
/* Cap the line width within the closer-60 strip so the text doesn't
stretch across the full viewport on wide screens. Inherits its
left edge from the section's content column. */
.section-closer.closer-60 .closer-line {
max-width: 920px;
}
.closer-stat {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: clamp(48px, 6vw, 76px);
line-height: 1;
letter-spacing: -0.04em;
background: linear-gradient(135deg, var(--sky) 0%, var(--blue) 50%, var(--pink) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
flex: 0 0 auto;
}
.closer-stat-unit {
font-size: 0.55em;
font-weight: 700;
/* v59.1: give the % glyph a touch of right padding so its
antialiased right edge doesn't get clipped by the
background-clip:text bbox. */
padding-right: 0.08em;
}
.closer-text {
flex: 1 1 320px;
max-width: 540px;
}
.closer-text em {
font-style: normal;
background: linear-gradient(120deg, var(--blue) 0%, var(--pink) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
}
@media (max-width: 760px) {
.section-closer {
padding: 40px 24px 0 24px;
margin-top: 64px;
}
.closer-line { gap: 8px 16px; }
/* closer-60 strip — tighter padding on mobile, narrower halo */
.section-closer.closer-60 {
margin-top: 56px;
padding: 56px calc(50vw - 50% + 24px);
background:
radial-gradient(ellipse 320px 200px at 28% 50%, rgba(79, 180, 241, 0.10), transparent 65%),
radial-gradient(ellipse 480px 240px at 28% 50%, rgba(163, 227, 254, 0.05), transparent 70%);
}
}
@media (max-width: 480px) {
.section-closer {
padding: 32px 18px 0 18px;
margin-top: 48px;
}
.closer-stat { font-size: clamp(44px, 13vw, 60px); }
.section-closer.closer-60 {
padding: 44px calc(50vw - 50% + 18px);
}
}
/* ============================================================
IMPACT (themes + numbers + soft-wins, merged in v47)
v47 merged Sections 5 (What Changes) and 6 (Impact) into a single
section so the page is shorter and the argument is continuous:
1. Theme tiles establish what we measure ourselves on
2. Connector sentence ("What X360 is built to deliver.") pivots
from themes to numbers — slightly bolder, gradient on "deliver"
3. Stat strip (15% / 4+ / <5min) — what we deliver
4. Soft-wins rail-list — what the numbers don't show
The .changes-impact section uses the standard .block container; no
custom section background or wrapper. Strands removed in v47 — only
hero mesh keeps strands for now.
============================================================ */
/* ---------- Connector sentence between themes and stats ---------- */
/* Sits between the theme tiles and the stat strip. Pivot from "what
we measure" to "what we deliver." Slightly bolder than body, gradient
on the em key word ("deliver") to match the existing em treatment used
throughout the page. Substantial vertical padding so it reads as a
structural beat, not a label for the strip below. */
.impact-connector {
margin: 96px 0 48px 0;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: clamp(24px, 2.6vw, 34px);
line-height: 1.25;
letter-spacing: -0.02em;
color: var(--text);
max-width: 720px;
}
.impact-connector em {
font-style: normal;
font-weight: 700;
background: linear-gradient(120deg, var(--blue) 0%, var(--pink) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ---------- Three-number stat strip ---------- */
.impact-strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 56px;
max-width: 1100px;
}
/* v59.3: stripped the card chrome (was: bordered translucent panels with
2px top edge + ::before gradient strip — same as the theme cards above).
Two consecutive rows of identical cards read as "tiles on tiles," and
the impact strip is a different beat (quantitative, not qualitative)
that should look different too. Numerals do the visual work; a short
colored hairline above each acts as a category anchor without
reasserting the card metaphor. */
.impact-stat {
position: relative;
padding: 24px 0 0 0;
}
.impact-stat::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 56px;
height: 2px;
border-radius: 1px;
opacity: 0.85;
}
.impact-stat.is-blue::before { background: var(--blue-soft); }
.impact-stat.is-pink::before { background: var(--pink); }
.impact-stat.is-sky::before { background: var(--sky); }
.impact-num {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: clamp(56px, 7vw, 92px);
line-height: 0.95;
letter-spacing: -0.04em;
margin-bottom: 14px;
}
.impact-stat.is-blue .impact-num {
background: linear-gradient(135deg, var(--blue) 0%, var(--blue-soft) 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.impact-stat.is-pink .impact-num {
background: linear-gradient(135deg, var(--pink) 0%, var(--pink-soft) 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.impact-stat.is-sky .impact-num {
background: linear-gradient(135deg, var(--sky) 0%, var(--blue-soft) 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.impact-num-unit {
font-size: 0.55em;
font-weight: 700;
letter-spacing: -0.02em;
margin-left: 2px;
}
.impact-cap {
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 15px;
line-height: 1.45;
color: var(--text);
letter-spacing: -0.005em;
}
/* Bracketed sub-line under the numeral — used for "(not 50)" on the
<5min stat. Sits inside .impact-num as a block, immediately under
the digits. */
.impact-num-bracket {
display: block;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 400;
font-style: italic;
letter-spacing: 0;
color: var(--text-faint);
margin-top: 4px;
-webkit-text-fill-color: var(--text-faint);
background: none;
}
/* ---------- Soft-wins rail-list (v47: strands removed) ---------- */
.soft-wins {
margin-top: 80px;
max-width: 820px;
}
.soft-wins-lead {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: clamp(18px, 1.9vw, 22px);
line-height: 1.35;
letter-spacing: -0.01em;
color: var(--text);
margin: 0 0 28px 0;
}
.soft-wins-list {
list-style: none;
margin: 0;
padding: 0;
position: relative;
border-left: 1.5px solid var(--border-strong);
}
.soft-win {
padding: 20px 0 20px 28px;
position: relative;
}
.soft-win + .soft-win {
border-top: 1px solid var(--border);
}
/* Static coloured bullet tick on the rail — colour from data-strand */
.soft-win::before {
content: "";
position: absolute;
left: -1.5px;
top: 30px;
width: 22px;
height: 1.5px;
background: var(--border-strong);
}
.soft-win[data-strand="blue"]::before { background: var(--blue); }
.soft-win[data-strand="pink"]::before { background: var(--pink); }
.soft-win[data-strand="sky"]::before { background: var(--sky); }
.soft-win[data-strand="yellow"]::before { background: var(--yellow); }
.soft-win-content { max-width: 640px; }
.soft-win-head {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 1.35;
letter-spacing: -0.005em;
color: var(--text);
margin-bottom: 6px;
}
.soft-win-body {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 14.5px;
line-height: 1.55;
color: var(--text-muted);
margin: 0;
}
/* Mobile / narrow viewport. Strip collapses to single column;
soft-wins keep their rail layout (already vertical). */
@media (max-width: 880px) {
.impact-connector { margin: 72px 0 36px 0; }
.impact-strip {
grid-template-columns: 1fr;
gap: 40px;
}
.impact-stat { padding: 22px 0 0 0; }
.soft-wins { margin-top: 64px; }
.soft-win { padding: 16px 0 16px 22px; }
}
@media (max-width: 480px) {
.impact-connector {
margin: 56px 0 28px 0;
font-size: clamp(20px, 6vw, 24px);
}
.impact-stat { padding: 20px 0 0 0; }
.impact-num { font-size: clamp(48px, 14vw, 64px); }
.impact-num-bracket { font-size: 12.5px; }
.soft-wins { margin-top: 48px; }
.soft-win { padding: 14px 0 14px 18px; }
.soft-wins-lead { font-size: 17px; }
.soft-win-head { font-size: 15.5px; }
.soft-win-body { font-size: 14px; }
}
/* ============================================================
COST CURVE BEAT — attached as Section 2's closing visual,
not its own section. Stripped down: small cap with eyebrow +
one-line headline, then the chart. No bubbles, no closer.
Right-anchored: the closer line ("that's where X360 closes the gap")
sits left in Section 2's flow; this beat lives in the right two-thirds
of the column, so the eye tracks closer-line → chart visually rather
than vertically through center.
============================================================ */
.cost-curve-beat {
/* v59: top margin reduced (was 80px). With the closer-60 strip
above providing strong separation via hairlines + halo, the chart
doesn't need as much breathing room above its caption. */
margin: 56px 0 0 auto;
max-width: 880px;
}
.cost-curve-cap {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 32px;
margin-bottom: 28px;
flex-wrap: wrap;
}
.cap-text {
display: flex;
flex-direction: column;
gap: 10px;
flex: 1 1 auto;
min-width: 0;
}
.cost-curve-tag {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--blue-soft);
}
.cost-curve-line {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: clamp(20px, 2.4vw, 28px);
line-height: 1.25;
letter-spacing: -0.015em;
color: var(--text);
margin: 0;
}
.cost-curve-line b {
background: linear-gradient(135deg, var(--pink), #FF5C8A);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
}
.cost-curve-beat[data-view="operator"] .cost-curve-line b {
background: linear-gradient(135deg, var(--blue), var(--pink));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Chart frame */
.step-chart-wrapper {
position: relative;
margin: 0;
/* Left padding holds y-axis label AND tick numbers without overlap.
Y-tick anchors right (right: calc(100% + 8px)) and text grows left.
Longest tick is "Buffer gone" (~80px) — but in v22 operator view
blanks all y-tick labels, so cost view ($) is the binding case.
Total left buffer = 130px. */
padding: 32px 32px 64px 130px;
background: linear-gradient(160deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
border: 1px solid var(--border);
border-radius: 20px;
}
/* View toggle — sits in the cap row, right of the headline.
No absolute positioning; flows in normal layout so it never overlaps
the chart's internal labels. */
.view-toggle {
display: inline-flex;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border);
border-radius: 999px;
padding: 3px;
gap: 0;
flex-shrink: 0;
}
.view-btn {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-faint);
background: transparent;
border: none;
padding: 7px 14px;
border-radius: 999px;
cursor: pointer;
transition: color 0.25s, background 0.25s;
}
.view-btn:hover {
color: var(--text-muted);
}
.view-btn.is-active {
color: var(--navy-deep);
background: var(--text);
}
/* When in operator view, the toggle's active pill picks up the operator-view
accent (a warmer brand color) so the toggle itself reflects the state. */
.cost-curve-beat[data-view="operator"] .view-btn.is-active {
background: linear-gradient(135deg, var(--pink), #FF5C8A);
color: #FFFFFF;
}
.step-chart {
position: relative;
height: 320px;
border-left: 1px solid rgba(255,255,255,0.18);
border-bottom: 1px solid rgba(255,255,255,0.18);
}
/* Axis titles */
.step-chart .y-axis-title,
.step-chart .x-axis-title {
position: absolute;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-faint);
white-space: nowrap;
}
/* Y-axis label sits to the LEFT of the tick labels (rotated -90°).
Right-anchored at right:100%+96px so it always clears the longest
tick label, regardless of view (cost ticks like "$60K" or operator
ticks like "Buffer gone"). */
.step-chart .y-axis-title {
right: calc(100% + 96px);
top: 50%;
transform: rotate(-90deg) translateX(50%);
transform-origin: right center;
}
.step-chart .x-axis-title {
bottom: -36px;
left: 50%;
transform: translateX(-50%);
}
/* Y-axis ticks + faint gridlines */
.step-chart .y-tick {
position: absolute;
right: calc(100% + 8px);
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--text-muted);
transform: translateY(50%);
text-align: right;
white-space: nowrap;
}
.step-chart .y-gridline {
position: absolute;
left: 0;
right: 0;
border-top: 1px dashed rgba(255,255,255,0.06);
}
/* X-axis ticks */
.step-chart .x-tick {
position: absolute;
bottom: -22px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--text-muted);
transform: translateX(-50%);
}
/* Step function segments. Each plateau gets:
- a thin horizontal line at the top (the "step")
- a faint filled area underneath (visual mass)
Vertical cliffs are dashed to suggest "you're crossing a threshold". */
.step-line {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
.step-line .seg-h {
position: absolute;
height: 3px;
border-radius: 2px;
filter: drop-shadow(0 0 6px currentColor);
transition: background 0.6s ease, color 0.6s ease, opacity 0.6s ease;
}
.step-line .seg-v {
position: absolute;
width: 0;
border-left: 2px dashed;
opacity: 0.55;
transition: border-color 0.6s ease;
}
.step-line .seg-fill {
position: absolute;
bottom: 0;
opacity: 0.08;
transition: background 0.6s ease, opacity 0.6s ease;
}
/* ============================================================
PLATEAU PALETTE — two distinct color schemes per view.
Cost view (default): multi-color (sky / yellow / pink / hot pink)
each plateau is a different category of cost cliff.
Operator view: single hue (pink) escalating in brightness across
plateaus. Reads as one thing intensifying — pressure compounding
on the same operator, not different categories of cost.
============================================================ */
/* Cost view plateau colors (apply by default; .cost-curve-beat[data-view="cost"] is also default) */
.step-line .seg-h.p1 { background: var(--sky); color: var(--sky); }
.step-line .seg-fill.p1 { background: var(--sky); }
.step-line .seg-v.p2 { border-color: var(--yellow); }
.step-line .seg-h.p2 { background: var(--yellow); color: var(--yellow); }
.step-line .seg-fill.p2 { background: var(--yellow); }
.step-line .seg-v.p3 { border-color: var(--pink); }
.step-line .seg-h.p3 { background: var(--pink); color: var(--pink); }
.step-line .seg-fill.p3 { background: var(--pink); }
.step-line .seg-v.p4 { border-color: #FF5C8A; }
.step-line .seg-h.p4 { background: #FF5C8A; color: #FF5C8A; }
.step-line .seg-fill.p4 { background: #FF5C8A; }
/* Operator view: single pink hue at climbing brightness/saturation.
Plateau 1 (Watching) — desaturated soft pink
Plateau 2 (Reacting) — brand pink at moderate intensity
Plateau 3 (Buffer gone) — brighter, hotter pink
Plateau 4 (Triage) — full hot pink with extra glow */
.cost-curve-beat[data-view="operator"] .step-line .seg-h.p1 { background: #F999FF; color: #F999FF; opacity: 0.5; }
.cost-curve-beat[data-view="operator"] .step-line .seg-fill.p1 { background: #F999FF; opacity: 0.05; }
.cost-curve-beat[data-view="operator"] .step-line .seg-v.p2 { border-color: #F999FF; opacity: 0.65; }
.cost-curve-beat[data-view="operator"] .step-line .seg-h.p2 { background: #F999FF; color: #F999FF; opacity: 0.7; }
.cost-curve-beat[data-view="operator"] .step-line .seg-fill.p2 { background: #F999FF; opacity: 0.08; }
.cost-curve-beat[data-view="operator"] .step-line .seg-v.p3 { border-color: #F87BD8; opacity: 0.75; }
.cost-curve-beat[data-view="operator"] .step-line .seg-h.p3 { background: #F87BD8; color: #F87BD8; opacity: 0.9; }
.cost-curve-beat[data-view="operator"] .step-line .seg-fill.p3 { background: #F87BD8; opacity: 0.12; }
.cost-curve-beat[data-view="operator"] .step-line .seg-v.p4 { border-color: #FF5C8A; opacity: 0.9; }
.cost-curve-beat[data-view="operator"] .step-line .seg-h.p4 { background: #FF5C8A; color: #FF5C8A; opacity: 1; }
.cost-curve-beat[data-view="operator"] .step-line .seg-fill.p4 { background: #FF5C8A; opacity: 0.18; }
/* Plateau badges follow the same view-conditional palette as the segments.
Cost view: matches the multi-color plateau of its segment.
Operator view: pink intensifying across plateaus. */
.step-cost-badge.p1 { color: var(--sky); }
.step-cost-badge.p2 { color: var(--yellow); }
.step-cost-badge.p3 { color: var(--pink); }
.step-cost-badge.p4 { color: #FF5C8A; }
.cost-curve-beat[data-view="operator"] .step-cost-badge.p1 { color: #F999FF; }
.cost-curve-beat[data-view="operator"] .step-cost-badge.p2 { color: #F999FF; }
.cost-curve-beat[data-view="operator"] .step-cost-badge.p3 { color: #F87BD8; }
.cost-curve-beat[data-view="operator"] .step-cost-badge.p4 { color: #FF5C8A; }
.step-cost-badge { transition: color 0.6s ease, left 0.45s ease; }
/* Operator view position overrides — shift p2/p3/p4 leftward so the wider
state-name labels ("Reacting", "Buffer gone", "Triage") don't bump into
the cliff trigger labels which begin at the next riser. p1 stays mid-
plateau (no conflict — there's no riser to its right inside its plateau).
Cost view keeps its mid-plateau positioning since dollar badges are short. */
.cost-curve-beat[data-view="operator"] .step-cost-badge.p2 { left: 38% !important; }
.cost-curve-beat[data-view="operator"] .step-cost-badge.p3 { left: 56% !important; }
.cost-curve-beat[data-view="operator"] .step-cost-badge.p4 { left: 74% !important; }
/* X360 intervention zone — the calm window where X360 lives.
A subtle vertical band in sky blue + a vertical line at the action moment. */
.x360-zone {
position: absolute;
top: 0; bottom: 0;
background: linear-gradient(to right,
rgba(163, 227, 254, 0.12),
rgba(163, 227, 254, 0.04) 80%,
transparent);
pointer-events: none;
}
.x360-marker {
position: absolute;
top: 0;
bottom: 0;
border-left: 2px solid var(--sky);
opacity: 0.85;
}
.x360-marker .x360-tag {
position: absolute;
top: 12px;
left: 12px;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--navy-deep);
background: var(--sky);
padding: 4px 10px;
border-radius: 4px;
white-space: nowrap;
box-shadow: 0 4px 16px rgba(163, 227, 254, 0.35);
}
/* X-mark below the x-axis where the X360 line meets it.
Translates the SVG width to land centered on the X360 line position.
Sits just below the x-axis tick numbers. */
.x360-axis-mark {
position: absolute;
top: 100%;
margin-top: 10px;
width: 28px;
height: 28px;
transform: translateX(-50%);
pointer-events: none;
filter: drop-shadow(0 0 8px rgba(163, 227, 254, 0.4));
}
.x360-axis-mark svg {
width: 100%;
height: 100%;
display: block;
}
/* Threshold trigger labels — sit above each cliff */
.step-trigger-label {
position: absolute;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
padding: 4px 8px;
border-radius: 4px;
/* No translateX — left value places the label start at the riser line.
The label extends to the right of the cliff. */
}
.step-trigger-label {
transition: color 0.6s ease, background 0.6s ease;
}
.step-trigger-label.trigger-yellow {
color: var(--navy-deep);
background: var(--yellow);
}
.step-trigger-label.trigger-pink {
color: var(--navy-deep);
background: var(--pink);
}
.step-trigger-label.trigger-hot {
color: #FFFFFF;
background: #FF5C8A;
}
/* Operator view trigger labels — single-pink scheme intensifying across cliffs */
.cost-curve-beat[data-view="operator"] .step-trigger-label.trigger-yellow {
color: var(--navy-deep);
background: #F999FF;
}
.cost-curve-beat[data-view="operator"] .step-trigger-label.trigger-pink {
color: var(--navy-deep);
background: #F87BD8;
}
.cost-curve-beat[data-view="operator"] .step-trigger-label.trigger-hot {
color: #FFFFFF;
background: #FF5C8A;
}
/* Cost badges at each plateau */
.step-cost-badge {
position: absolute;
font-family: 'Montserrat', sans-serif;
font-size: 18px;
font-weight: 700;
letter-spacing: -0.01em;
white-space: nowrap;
filter: drop-shadow(0 0 8px currentColor);
}
/* Label-swap transition — applied during view change.
JS adds .label-swap to swap participants, waits for fade-out,
updates the text, removes .label-swap to fade back in.
This makes the label change feel like a smooth read rather than
a jarring text swap. */
.y-tick, .y-axis-title, .step-trigger-label, .step-cost-badge, .x360-tag {
transition: opacity 0.22s ease;
}
.label-swap {
opacity: 0;
}
/* Two context notes below the chart — DEPRECATED in v20.
The chart now lives inside Section 2 as a sub-beat without
the contextual notes. CSS retained in case we reuse on a
detail page. */
.cost-curve-notes {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 40px;
}
.cost-note {
padding: 22px 24px;
background: rgba(255,255,255,0.025);
border: 1px solid var(--border);
border-radius: 14px;
border-left-width: 3px;
}
.cost-note.note-blue {
border-left-color: var(--sky);
}
.cost-note.note-pink {
border-left-color: var(--pink);
}
.cost-note .note-tag {
display: block;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
margin-bottom: 10px;
}
.cost-note.note-blue .note-tag { color: var(--sky); }
.cost-note.note-pink .note-tag { color: var(--pink); }
.cost-note p {
font-size: 14px;
color: var(--text-muted);
line-height: 1.6;
margin: 0;
}
/* Closing line */
.cost-curve-close {
text-align: center;
font-size: clamp(17px, 1.4vw, 20px);
color: var(--text-muted);
line-height: 1.5;
max-width: 720px;
margin: 0 auto;
letter-spacing: -0.005em;
}
.cost-curve-close b {
color: var(--text);
font-weight: 500;
}
/* ============================================================
BRIDGE SECTION — standalone declarative moment between the
problem section and the platform. Content-shaped rhythm break,
not a number. Single line in two halves: parallel claims that
carry the company's thesis.
============================================================ */
section.bridge {
position: relative;
/* v59: padding reduced (was 160px 48px 180px). Combined with the
problem section's reduced bottom padding above, the graph→bridge
handoff is no longer a dead-air zone. */
padding: 110px 48px 130px;
text-align: center;
overflow: hidden;
background:
radial-gradient(ellipse at 50% 50%, rgba(79, 180, 241, 0.06), transparent 60%),
radial-gradient(ellipse at 30% 80%, rgba(249, 153, 255, 0.04), transparent 55%);
}
.bridge-inner {
max-width: 1100px;
margin: 0 auto;
}
.bridge-line {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: clamp(36px, 5.5vw, 76px);
line-height: 1.05;
letter-spacing: -0.03em;
color: var(--text);
margin: 0;
}
.bridge-line em {
font-style: normal;
font-weight: 700;
background: linear-gradient(135deg, var(--blue) 20%, var(--pink) 60%, var(--yellow) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.bridge-line br {
/* Smaller line gap so the two halves read as a couplet, not separate lines */
line-height: 0.6;
}
/* ============================================================
PLATFORM SECTION — quiet intro + module logo strip + loop carousel.
The loop visual is the section's centerpiece, not a headline.
Bridge above already does the verbal peak.
============================================================ */
section.platform {
position: relative;
padding: 140px 48px 160px;
background:
radial-gradient(ellipse at 50% 50%, rgba(79, 180, 241, 0.04), transparent 70%),
radial-gradient(ellipse at 80% 30%, rgba(249, 153, 255, 0.03), transparent 60%);
}
.platform-inner {
max-width: 1200px;
margin: 0 auto;
}
/* Intro: small eyebrow + quiet body-weight lede paragraph (NOT a display
headline — the bridge above is the rhythmic peak; this section breathes
after it). The orchestration claim sits inside a declarative sentence. */
.platform-intro {
max-width: 760px;
margin: 0 0 80px;
}
.platform-intro .eyebrow {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--blue-soft);
margin-bottom: 24px;
}
.platform-lede {
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: clamp(20px, 2.2vw, 26px);
line-height: 1.45;
letter-spacing: -0.01em;
color: var(--text-muted);
margin: 0;
}
.platform-lede .lede-accent {
color: var(--text);
font-weight: 600;
}
/* Connector sentence — bridges the lede paragraph to the chip strip below.
Reads as the structural intro: three modules + the loop concept.
Body weight (not display); accented inline emphasis on the count + loop
names without leaning into a display headline. */
.platform-connector {
margin: 24px 0 0;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: clamp(17px, 1.6vw, 20px);
line-height: 1.55;
letter-spacing: -0.005em;
color: var(--text-muted);
}
.platform-connector em {
font-style: normal;
font-weight: 600;
background: linear-gradient(135deg, var(--sky) 0%, var(--pink) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ============================================================
MODULE STRIP — three brand icons + names + temporal phase tags.
Vertical layout per chip (icon on top, name + temporal phase
stacked below). Each chip is clickable to drive the loop
carousel below to that module.
Temporal phase tags map module to operational time:
- Horizon → Pre-ops (the work before disruption)
- Tower → Day-of-ops (the live recovery moment)
- Hangar → Post-ops (the learning that follows)
This layer is complementary to the loop arcs (which carry the
action verb: ANTICIPATE / RECOVER / LEARN). Two readings of the
same modules — when in time, vs. what cognitive action.
============================================================ */
.module-strip {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
margin-bottom: 72px;
flex-wrap: wrap;
}
.module-strip-divider {
width: 1px;
height: 80px;
background: var(--border);
flex-shrink: 0;
align-self: center;
}
.module-chip {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding: 24px 28px;
background: transparent;
border: 1px solid transparent;
border-radius: 16px;
cursor: pointer;
font-family: inherit;
color: inherit;
text-align: center;
transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.module-chip:hover {
background: rgba(255, 255, 255, 0.03);
border-color: var(--border);
transform: translateY(-2px);
}
.module-chip.is-active {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.14);
}
.chip-icon {
width: 56px;
height: 56px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
opacity: 0.6;
transition: opacity 0.3s ease, filter 0.3s ease;
}
.chip-icon img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.module-chip.is-active .chip-icon,
.module-chip:hover .chip-icon {
opacity: 1;
filter: drop-shadow(0 0 10px rgba(163, 227, 254, 0.35));
}
.chip-body {
display: inline-flex;
flex-direction: column;
gap: 6px;
align-items: center;
}
.chip-name {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 19px;
color: var(--text-muted);
letter-spacing: -0.01em;
transition: color 0.3s ease;
}
.module-chip.is-active .chip-name,
.module-chip:hover .chip-name {
color: var(--text);
}
.chip-phase {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-faint);
transition: color 0.3s ease;
}
.module-chip[data-module="horizon"].is-active .chip-phase { color: var(--blue-soft); }
.module-chip[data-module="tower"].is-active .chip-phase { color: var(--pink-soft); }
.module-chip[data-module="hangar"].is-active .chip-phase { color: var(--yellow); }
/* ============================================================
LOOP STAGE — the section's visual centerpiece. Three brand-colored
arcs forming a continuous circle. A module card sits centered inside.
Active phase's arc glows; others sit quiet.
============================================================ */
.loop-stage {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 56px;
}
.loop-frame {
position: relative;
/* Frame width scales to keep the arc circle (600 SVG units across the
loop's geometric circle) at roughly 480px on screen. ViewBox extends
beyond the arcs to make room for phase labels (top/sides) and the
Wingman aura + label (bottom). */
width: min(768px, 100%);
aspect-ratio: 960 / 880;
}
.loop-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* Arcs — quiet by default, active arc lights up via opacity + filter glow.
The transition is on opacity and filter; stroke-width stays constant
so the geometric ring doesn't shift size as state changes. */
.loop-arc {
opacity: 0.25;
transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.loop-stage[data-active="horizon"] .arc-anticipate,
.loop-stage[data-active="tower"] .arc-recover,
.loop-stage[data-active="hangar"] .arc-learn {
opacity: 1;
filter: url(#loop-glow);
}
/* Phase labels — small mono caps, quiet by default, brighten on active */
.loop-phase-label {
font-family: 'JetBrains Mono', monospace;
font-size: 22px;
font-weight: 600;
letter-spacing: 0.22em;
fill: var(--text-faint);
transition: fill 0.6s ease;
}
.loop-stage[data-active="horizon"] .phase-anticipate { fill: var(--sky); }
.loop-stage[data-active="tower"] .phase-recover { fill: var(--pink); }
.loop-stage[data-active="hangar"] .phase-learn { fill: var(--yellow); }
/* The card sits centered within the loop frame. Width is constrained so it
never bleeds into the arcs even at the loop's narrowest geometry.
At a 600x600 SVG, the inscribed square (where 4-corner content fits without
touching the circle) has side ≈ 396px. We give the card max-width 360px
for breathing room. */
.loop-card {
position: absolute;
/* Loop circle is centered at SVG y=300 within a viewBox spanning
y=-80 to y=800 (height 880). Card sits at the circle's center, which
is (300-(-80))/880 ≈ 43% from the top of the frame, not 50%. */
top: 43%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
max-width: calc(100% - 200px);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
transition: opacity 0.28s ease;
}
.loop-card.is-swapping {
opacity: 0;
}
.card-icon {
width: 72px;
height: 72px;
display: flex;
align-items: center;
justify-content: center;
filter: drop-shadow(0 0 24px rgba(163, 227, 254, 0.3));
flex-shrink: 0;
}
.card-icon img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
/* Card phase tag — now hidden in markup; CSS retained as no-op for safety */
.card-phase[hidden] { display: none; }
.card-name {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: clamp(40px, 5vw, 54px);
letter-spacing: -0.025em;
color: var(--text);
margin: 0;
line-height: 1;
}
.card-role {
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: clamp(18px, 1.6vw, 22px);
letter-spacing: -0.005em;
color: var(--text);
margin: 0;
line-height: 1.3;
}
.card-description {
font-size: 15.5px;
line-height: 1.6;
color: var(--text-muted);
margin: 0;
max-width: 360px;
}
/* Small mono-caps stat tag below the description. Color matches the active
module's brand. Sits separated from the description by a small visual gap. */
.card-stat {
margin-top: 4px;
padding-top: 14px;
border-top: 1px solid var(--border);
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--blue-soft);
transition: color 0.6s ease, border-color 0.6s ease;
width: 100%;
max-width: 360px;
text-align: center;
}
.loop-stage[data-active="tower"] .card-stat { color: var(--pink-soft); }
.loop-stage[data-active="hangar"] .card-stat { color: var(--yellow); }
.card-link {
margin-top: 8px;
font-family: 'JetBrains Mono', monospace;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--blue-soft);
text-decoration: none;
border-bottom: 1px solid rgba(141, 200, 232, 0.3);
padding-bottom: 3px;
transition: color 0.3s ease, border-color 0.3s ease;
}
.loop-stage[data-active="tower"] .card-link {
color: var(--pink-soft);
border-bottom-color: rgba(249, 153, 255, 0.35);
}
.loop-stage[data-active="hangar"] .card-link {
color: var(--yellow);
border-bottom-color: rgba(255, 199, 0, 0.35);
}
.card-link:hover { border-bottom-color: currentColor; }
/* ============================================================
WINGMAN CONTINUATION — sentence below the loop, right-offset.
Picks up the connector sentence above ("X360 spans the operational
day in three modules. One continuous improvement loop.") after the
loop has done its visual work. The leading ellipsis signals
"we paused for the visual; now we resume the thought."
Spatial composition: the connector above is at the top-left of the
platform section, the loop is centered, this sentence is at the
bottom-right. Eye flows diagonally — left → center → right.
Brand pink gradient on "Wingman" matches the gradient on
"three modules" / "One continuous improvement loop" above.
============================================================ */
.wingman-continuation {
/* The '...' starts at the intersection of two lines:
- Vertical line straight down from the cup's right tail (SVG x=543)
- Horizontal line straight right from the cup's apex (SVG y=740)
Intersection in frame coordinates: x=578px, y=656px (frame is 768×704).
Maps to: 66% of container width from left, 93% down the frame.
Frame natural bottom is at 100% (704px). Sentence appears AFTER the
loop-stage in DOM, so margin-top: -104px pulls it up so its top
sits at frame y=656px (704 - 104 + small adjustment for loop-stage
margin-bottom). */
margin-top: -104px;
width: 360px;
max-width: calc(100% - 32px);
margin-left: 66%;
position: relative;
z-index: 2;
}
.wingman-line {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: clamp(17px, 1.6vw, 20px);
line-height: 1.55;
letter-spacing: -0.005em;
color: var(--text-muted);
margin: 0 0 14px;
text-align: left;
}
.wingman-line em {
font-style: normal;
font-weight: 600;
background: linear-gradient(135deg, var(--pink) 0%, var(--pink-soft) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Link sits as a block, text-aligned right within the parent column,
so it appears at the right end of the sentence's column. */
.wingman-meet-link-wrap {
display: block;
text-align: right;
}
.wingman-meet-link {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--pink-soft);
text-decoration: none;
border-bottom: 1px solid rgba(249, 153, 255, 0.35);
padding-bottom: 3px;
transition: color 0.3s ease, border-color 0.3s ease;
display: inline-block;
}
.wingman-meet-link:hover {
color: var(--text);
border-bottom-color: var(--pink-soft);
}
/* ============================================================
LOOP CLOSURE ANIMATION — when the carousel auto-cycles past
Hangar back to Horizon, a brief white-ish trace runs around
the entire circle. Visual payoff for "the loop closes."
The .loop-closure circle's stroke-dashoffset starts at 100
(entire circle hidden). When .is-closing is added to the stage,
the offset animates to 0 (entire circle revealed) then back to 100
over 1.5s, creating a single sweep and fade.
============================================================ */
.loop-closure {
opacity: 0;
transition: opacity 0.3s ease;
}
.loop-stage.is-closing .loop-closure {
opacity: 0.5;
animation: loop-closure-trace 1.5s ease-out forwards;
}
@keyframes loop-closure-trace {
0% { stroke-dashoffset: 100; opacity: 0; }
20% { opacity: 0.5; }
60% { stroke-dashoffset: 0; opacity: 0.5; }
100% { stroke-dashoffset: 0; opacity: 0; }
}
/* Hidden module data templates — JS reads these for content swap */
template { display: none; }
/* ============================================================
FRAMEWORK — the closed-loop triangle (Anticipate / Decide / Learn)
Ported from the pitch deck. The most architecturally distinctive
visual on the homepage after the hero.
============================================================ */
section.framework {
background:
radial-gradient(ellipse at 50% 60%, rgba(249,153,255,0.05) 0%, transparent 70%),
var(--navy-deep);
padding: 160px 48px 180px;
}
.framework-inner {
max-width: 1100px;
margin: 0 auto;
}
.framework-header {
margin-bottom: 80px;
max-width: 720px;
}
.framework-stage {
position: relative;
height: 480px;
margin: 0 auto;
max-width: 900px;
}
/* The three nodes — positioned as triangle vertices */
.fw-node {
position: absolute;
text-align: center;
width: 280px;
transform: translate(-50%, -50%);
}
.fw-node .fw-num {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 38px;
color: rgba(255,255,255,0.18);
letter-spacing: -0.02em;
line-height: 1;
margin-bottom: 12px;
}
.fw-node .fw-icon {
width: 56px;
height: 56px;
margin: 0 auto 16px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
position: relative;
background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
border: 1px solid var(--border-strong);
}
.fw-node h3 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 22px;
letter-spacing: -0.01em;
margin-bottom: 12px;
}
.fw-node p {
font-size: 13.5px;
color: var(--text-muted);
line-height: 1.6;
}
.fw-node p b { color: var(--text); font-weight: 500; }
.fw-node.fw-anticipate {
top: 80%;
left: 22%;
}
.fw-node.fw-anticipate h3 { color: var(--sky); }
.fw-node.fw-anticipate .fw-icon {
color: var(--sky);
background: linear-gradient(160deg, rgba(163,227,254,0.12), rgba(255,255,255,0.02));
}
.fw-node.fw-decide {
top: 14%;
left: 50%;
}
.fw-node.fw-decide h3 { color: var(--pink); }
.fw-node.fw-decide .fw-icon {
color: var(--pink);
background: linear-gradient(160deg, rgba(249,153,255,0.12), rgba(255,255,255,0.02));
}
.fw-node.fw-learn {
top: 80%;
left: 78%;
}
.fw-node.fw-learn h3 { color: var(--yellow); }
.fw-node.fw-learn .fw-icon {
color: var(--yellow);
background: linear-gradient(160deg, rgba(245,250,162,0.12), rgba(255,255,255,0.02));
}
/* SVG triangle connecting the three nodes — drawn behind */
.fw-edges {
position: absolute;
inset: 0;
pointer-events: none;
width: 100%;
height: 100%;
}
.fw-edges svg { width: 100%; height: 100%; overflow: visible; }
.fw-edges path {
fill: none;
stroke: var(--border-strong);
stroke-width: 1;
stroke-dasharray: 4 6;
opacity: 0.65;
}
.fw-edges .fw-arrow {
fill: var(--text-muted);
opacity: 0.55;
}
.fw-loop-note {
position: relative;
margin: 60px auto 0;
text-align: center;
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
letter-spacing: 0.14em;
color: var(--text-faint);
padding-top: 28px;
border-top: 1px dashed var(--border-strong);
max-width: 880px;
}
.fw-loop-note::before {
content: "↻";
position: absolute;
top: 12px; left: 50%;
transform: translate(-50%, -50%);
background: var(--navy-deep);
padding: 0 12px;
font-size: 18px;
color: var(--blue-soft);
letter-spacing: 0;
}
/* ============================================================
SECTION 2 — THE PROBLEM (operator-shaped)
Three pillar cards using the pitch site's glass+glow pattern.
Background is transparent so the hero's mesh strands fading down
from above remain visible. The body's --navy-deep provides the
continuous dark base; no tonal seam at the hero boundary. */
section.problem {
background: transparent;
/* v59: tighten bottom padding so the gap between the graph and the
bridge section ("Instinct can be codified...") doesn't read as
dead air. Combined with bridge's reduced top padding below, the
graph→bridge handoff is now ~210px instead of 300px. */
padding-bottom: 100px;
}
.problem-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 56px;
}
/* Diagnostic block — sits between the visceral lede and the failure-mode cards.
Names the architectural diagnosis explicitly. Two short paragraphs in a
restrained block, set apart from prose above and grid below by hairline rules. */
.problem-diagnostic {
margin: 56px 0 16px;
padding: 32px 0;
border-top: 1px solid var(--border-strong);
border-bottom: 1px solid var(--border-strong);
max-width: 880px;
}
.problem-diagnostic p {
font-size: 16px;
color: var(--text-muted);
line-height: 1.7;
margin: 0;
}
.problem-diagnostic p + p {
margin-top: 16px;
}
.problem-diagnostic p b {
color: var(--text);
font-weight: 500;
}
.problem-card {
position: relative;
padding: 36px 32px 40px;
border-radius: 20px;
overflow: hidden;
min-height: 240px;
display: flex;
flex-direction: column;
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.35s ease,
border-color 0.35s ease,
background 0.35s ease;
cursor: default;
}
/* Card hover — slight scale + sharpened accent glow + border tint.
Each glow variant brightens to its own color so the cards feel alive
in their own register. The base .glass hover already lifts; this adds
the color-specific intensification on top. */
.problem-card:hover {
transform: translateY(-6px) scale(1.015);
}
.problem-card.glow-blue:hover {
border-color: rgba(79, 180, 241, 0.55);
box-shadow:
inset 0 0 60px -15px rgba(79, 180, 241, 0.35),
0 24px 48px rgba(79, 180, 241, 0.18),
0 8px 16px rgba(0, 0, 0, 0.3);
}
.problem-card.glow-pink:hover {
border-color: rgba(249, 153, 255, 0.55);
box-shadow:
inset 0 0 60px -15px rgba(249, 153, 255, 0.35),
0 24px 48px rgba(249, 153, 255, 0.18),
0 8px 16px rgba(0, 0, 0, 0.3);
}
.problem-card.glow-sky:hover {
border-color: rgba(163, 227, 254, 0.55);
box-shadow:
inset 0 0 60px -15px rgba(163, 227, 254, 0.35),
0 24px 48px rgba(163, 227, 254, 0.18),
0 8px 16px rgba(0, 0, 0, 0.3);
}
.problem-card .num {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
margin-bottom: 18px;
display: inline-flex;
align-items: center;
gap: 10px;
}
.problem-card .num::before {
content: ""; width: 24px; height: 1px; display: inline-block;
}
.problem-card.glow-blue .num { color: var(--blue-soft); }
.problem-card.glow-blue .num::before { background: var(--blue-soft); }
.problem-card.glow-pink .num { color: var(--pink-soft); }
.problem-card.glow-pink .num::before { background: var(--pink-soft); }
.problem-card.glow-sky .num { color: var(--sky); }
.problem-card.glow-sky .num::before { background: var(--sky); }
.problem-card h3 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 24px;
letter-spacing: -0.015em;
margin-bottom: 14px;
line-height: 1.15;
}
.problem-card p {
font-size: 15px;
color: var(--text-muted);
line-height: 1.65;
}
/* Closing line — sits below the cards as the section's outgoing claim */
.problem-close {
margin-top: 64px;
max-width: 760px;
font-size: clamp(18px, 1.6vw, 22px);
line-height: 1.5;
letter-spacing: -0.01em;
color: var(--text-muted);
font-weight: 300;
padding-top: 32px;
border-top: 1px solid var(--border-strong);
}
.problem-close b {
color: var(--text);
font-weight: 500;
display: block;
margin-top: 8px;
}
/* ============================================================
PERSONA OVERLAY — lightweight "what's in this for me" section.
Comes AFTER the platform section. Modules/features only —
no agents, no substrate. Two personas only. Operator picks
highlight Horizon + Tower features; Executive highlights
Hangar features.
============================================================ */
section.persona {
background:
radial-gradient(ellipse at 30% 20%, rgba(79,180,241,0.05), transparent 60%),
radial-gradient(ellipse at 80% 80%, rgba(249,153,255,0.04), transparent 60%),
var(--navy-deep);
padding-top: 140px;
padding-bottom: 140px;
}
.persona-inner {
max-width: 1320px;
margin: 0 auto;
padding: 0 48px;
}
.persona-header {
max-width: 760px;
margin-bottom: 48px;
}
.persona-header .lede {
margin-top: 18px;
}
/* Toggles row — horizontal, two pills */
.persona-toggles {
display: flex;
gap: 12px;
margin-bottom: 40px;
flex-wrap: wrap;
}
.persona-toggle {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 24px;
background: rgba(255,255,255,0.025);
border: 1px solid var(--border);
border-radius: 999px;
color: var(--text-muted);
cursor: pointer;
transition: all 0.25s;
font-family: inherit;
font-size: 14.5px;
}
.persona-toggle:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.persona-toggle .pt-prefix {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-faint);
}
.persona-toggle .pt-role { font-weight: 500; color: var(--text); }
.persona-toggle.active {
background: linear-gradient(135deg, rgba(79,180,241,0.15), rgba(249,153,255,0.1));
border-color: var(--blue-soft);
color: var(--text);
}
.persona-toggle.active .pt-prefix { color: var(--blue-soft); }
.persona-toggle[data-persona="executive"].active {
background: linear-gradient(135deg, rgba(249,153,255,0.15), rgba(245,250,162,0.08));
border-color: var(--pink-soft);
}
.persona-toggle[data-persona="executive"].active .pt-prefix { color: var(--pink-soft); }
/* The lightweight feature map — modules across the top, features inside */
.feature-map {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.feature-col {
padding: 24px 20px 20px;
background: rgba(255,255,255,0.02);
border: 1px solid var(--border);
border-radius: 16px;
transition: all 0.4s;
}
.feature-col h4 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 18px;
letter-spacing: -0.01em;
margin-bottom: 4px;
}
.feature-col .feature-tag {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-faint);
margin-bottom: 16px;
}
.feature-col ul {
list-style: none;
padding: 0; margin: 0;
}
.feature-col ul li {
padding: 9px 0;
font-size: 13.5px;
color: var(--text-muted);
border-bottom: 1px solid rgba(255,255,255,0.04);
transition: color 0.3s, padding 0.3s;
display: flex;
align-items: center;
gap: 8px;
}
.feature-col ul li::before {
content: "";
width: 4px; height: 4px;
border-radius: 50%;
background: var(--text-faint);
flex-shrink: 0;
transition: background 0.3s, transform 0.3s;
}
.feature-col ul li:last-child { border-bottom: none; }
/* Persona-driven highlight states */
.feature-map[data-persona="all"] .feature-col { opacity: 1; }
.feature-map[data-persona="operator"] .feature-col.col-hangar { opacity: 0.4; }
.feature-map[data-persona="operator"] .feature-col.col-horizon,
.feature-map[data-persona="operator"] .feature-col.col-tower {
border-color: rgba(79,180,241,0.45);
background: linear-gradient(160deg, rgba(79,180,241,0.08), rgba(255,255,255,0.02));
}
.feature-map[data-persona="operator"] .feature-col.col-horizon ul li::before,
.feature-map[data-persona="operator"] .feature-col.col-tower ul li::before {
background: var(--blue-soft);
transform: scale(1.5);
}
.feature-map[data-persona="operator"] .feature-col.col-horizon ul li,
.feature-map[data-persona="operator"] .feature-col.col-tower ul li {
color: var(--text);
}
.feature-map[data-persona="executive"] .feature-col.col-horizon,
.feature-map[data-persona="executive"] .feature-col.col-tower { opacity: 0.4; }
.feature-map[data-persona="executive"] .feature-col.col-hangar {
border-color: rgba(249,153,255,0.45);
background: linear-gradient(160deg, rgba(249,153,255,0.08), rgba(255,255,255,0.02));
}
.feature-map[data-persona="executive"] .feature-col.col-hangar ul li::before {
background: var(--pink-soft);
transform: scale(1.5);
}
.feature-map[data-persona="executive"] .feature-col.col-hangar ul li {
color: var(--text);
}
.persona-deeper {
margin-top: 32px;
font-size: 13.5px;
color: var(--text-muted);
display: flex;
align-items: center;
gap: 8px;
}
.persona-deeper a {
color: var(--text);
text-decoration: none;
border-bottom: 1px solid var(--border-strong);
padding-bottom: 2px;
margin-left: 6px;
transition: border-color 0.2s;
}
.persona-deeper a:hover { border-color: var(--blue-soft); }
/* ============================================================
WHY NOW — moved here in v48 from after Impact. Pressure stats
above, capability claim below. The "and" between the two halves
is the whole point: pressure justifies urgency, capability
justifies that we can answer it now. Sits between bridge (verbal
peak) and platform (product reveal).
============================================================ */
/* ============================================================
PAGE OUTRO WRAPPER (v54)
Wraps Why Now + the contact line so the X-mark watermark can
bleed across both. Relative positioning anchors the absolutely-
positioned watermark; overflow clipping happens here, not on
the why-now section itself.
============================================================ */
.page-outro {
position: relative;
overflow: hidden;
}
section.why-now {
position: relative;
padding: 140px 48px 100px;
background:
radial-gradient(ellipse at 30% 20%, rgba(79,180,241,0.05), transparent 55%),
radial-gradient(ellipse at 80% 80%, rgba(249,153,255,0.04), transparent 55%);
}
/* X-mark brand watermark (v53; v54 hoisted to .page-outro so it can
span both why-now and the contact line). Anchored bottom-left of the
wrapper, lowered so it sits behind the contact line as well as the
bottom of why-now — re-asserts the brand mark across the whole page
close-out, not just one section. Strokes at low opacity, kite slightly
brighter so the brand accent still pops. */
.why-now-x-mark {
position: absolute;
/* v57: was left: -40px (clipped at viewport edge), then 24px (still close).
Now 56px so the X reads as held cleanly off the corner with breathing room. */
left: 56px;
bottom: 40px;
width: clamp(280px, 32vw, 480px);
height: auto;
pointer-events: none;
z-index: 0;
}
.x-mark-stroke {
fill: var(--sky);
opacity: 0.18;
}
.x-mark-kite {
fill: var(--pink);
opacity: 0.55; /* brighter than the strokes — brand accent moment */
}
/* Closing-column content sits above the X-mark watermark */
.why-now-inner {
position: relative;
z-index: 1;
max-width: 1200px;
margin: 0 auto;
}
.why-now h2.block-title {
max-width: 880px;
}
/* ---------- Pressure strip ---------- */
.pressure-strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 64px;
}
.pressure-stat {
position: relative;
padding: 36px 28px 32px;
border-radius: 14px;
background: rgba(255,255,255,0.025);
border: 1px solid var(--border);
border-top-width: 2px;
transition: border-color 0.3s ease, background 0.3s ease;
}
.pressure-stat::before {
content: "";
position: absolute;
inset: -1px -1px auto -1px;
height: 2px;
border-radius: 14px 14px 0 0;
opacity: 0.7;
}
.pressure-stat.is-blue::before { background: linear-gradient(90deg, var(--blue-soft), transparent); }
.pressure-stat.is-pink::before { background: linear-gradient(90deg, var(--pink-soft), transparent); }
.pressure-stat.is-yellow::before { background: linear-gradient(90deg, var(--yellow), transparent); }
.pressure-num {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: clamp(48px, 5.5vw, 72px);
line-height: 0.95;
letter-spacing: -0.04em;
margin-bottom: 16px;
}
.pressure-stat.is-blue .pressure-num {
background: linear-gradient(135deg, var(--blue) 0%, var(--blue-soft) 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.pressure-stat.is-pink .pressure-num {
background: linear-gradient(135deg, var(--pink) 0%, var(--pink-soft) 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.pressure-stat.is-yellow .pressure-num {
background: linear-gradient(135deg, var(--yellow) 0%, #FCE889 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.pressure-num-unit {
font-size: 0.55em;
font-weight: 700;
letter-spacing: -0.02em;
margin-left: 2px;
}
.pressure-head {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 16px;
letter-spacing: -0.005em;
color: var(--text);
margin-bottom: 10px;
}
.pressure-body {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 14.5px;
line-height: 1.55;
color: var(--text-muted);
margin: 0;
}
/* ---------- Connector — names the catastrophic-event consequence
of stacked pressure. v50: demoted from display-weight to body-weight
prose (was competing with the capability headline below it; two
display-weight beats stacked read as three competing claims rather
than one continuing thought). Now reads as connective tissue between
the stats above and the capability beat below. Gradient still on
"hundreds of millions" so the consequence still pops.
v51: right-anchored — block sits on the right side of the section
(margin-left: auto), text inside still left-aligns. The connector
and capability together now form a closing-argument column on the
right, visually distinct from the H2/stats group on the left. ---------- */
.why-now-connector {
margin: 64px 0 0 auto;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: clamp(16px, 1.5vw, 18px);
line-height: 1.55;
letter-spacing: -0.005em;
color: var(--text-muted);
max-width: 720px;
}
.why-now-connector em {
font-style: normal;
font-weight: 600;
background: linear-gradient(120deg, var(--pink) 0%, var(--yellow) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ---------- Capability claim — the "and..." beat. Headline-weight
line + a single supporting paragraph. The em on "orchestration
layer" is the key term being landed. v50: now the only display-
weight beat below the H2 in this section. v51: right-anchored to
match the connector above. ---------- */
.why-now-capability {
margin: 32px 0 0 auto;
max-width: 880px;
}
.capability-line {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: clamp(28px, 3vw, 40px);
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--text);
margin: 0 0 20px 0;
/* v59.2: right-aligned so the line lands at the page's right edge,
mirroring the right-anchored .why-now-capability block. Reads as
a closing beat that drives the eye toward the contact pill below. */
text-align: right;
}
.capability-line em {
font-style: normal;
background: linear-gradient(135deg, var(--blue) 0%, var(--pink) 60%, var(--yellow) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.capability-body {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: clamp(15px, 1.4vw, 17px);
line-height: 1.6;
color: var(--text-muted);
margin: 0;
max-width: 720px;
}
/* ---------- Mobile ---------- */
@media (max-width: 880px) {
section.why-now { padding: 96px 24px; }
.pressure-strip {
grid-template-columns: 1fr;
gap: 16px;
margin-top: 48px;
}
.pressure-stat { padding: 28px 24px 24px; }
/* Undo the desktop right-anchoring — full-width on mobile reads cleaner
than a right-shifted block in a narrow viewport. */
.why-now-connector { margin: 48px 0 0 0; max-width: none; }
.why-now-capability { margin: 24px 0 0 0; max-width: none; }
/* Hide the X-mark watermark on mobile — closing argument goes
full-width and the X would compete with it. */
.why-now-x-mark { display: none; }
}
@media (max-width: 480px) {
section.why-now { padding: 72px 18px; }
.pressure-stat { padding: 24px 20px 22px; }
.pressure-num { font-size: clamp(40px, 12vw, 56px); }
.pressure-head { font-size: 15px; }
.pressure-body { font-size: 14px; }
.why-now-connector {
margin-top: 36px;
font-size: 15px;
}
.capability-line { font-size: clamp(22px, 7vw, 28px); }
}
/* ============================================================
WHAT CHANGES — measurement themes section.
Sits between platform teaser and "why now". Four tiles, each
carrying a question a COO actually asks. Reuses .pillar.glass
.glow-* vocabulary so it feels native to the system. Discipline
line under the grid earns the "and we report adoption with it"
point that the pilot framework lives by.
============================================================ */
.themes-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin: 56px 0 32px;
text-align: left;
}
.theme {
position: relative;
padding: 28px 24px;
border-radius: 14px;
display: flex;
flex-direction: column;
/* v59.2: match the pressure-stat treatment in the why-now section
above — thicker top border + gradient accent strip per theme. Gives
the cards the same architectural "this is a beat" feel. The strip
is colored per theme via the .t-{colour} modifier below. */
border-top: 2px solid transparent;
/* v59.4: hover treatment lifted from .problem-card so the four
theme cards respond on hover with the same lift + colored inset
glow that the problem cards in section 2 have. Cards feel alive
in their own register; the t-{colour} modifier picks the glow. */
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.35s ease,
border-color 0.35s ease,
background 0.35s ease;
cursor: default;
}
.theme:hover {
transform: translateY(-6px) scale(1.015);
}
.theme.t-blue:hover {
border-color: rgba(79, 180, 241, 0.55);
box-shadow:
inset 0 0 60px -15px rgba(79, 180, 241, 0.35),
0 24px 48px rgba(79, 180, 241, 0.18),
0 8px 16px rgba(0, 0, 0, 0.3);
}
.theme.t-pink:hover {
border-color: rgba(249, 153, 255, 0.55);
box-shadow:
inset 0 0 60px -15px rgba(249, 153, 255, 0.35),
0 24px 48px rgba(249, 153, 255, 0.18),
0 8px 16px rgba(0, 0, 0, 0.3);
}
.theme.t-sky:hover {
border-color: rgba(163, 227, 254, 0.55);
box-shadow:
inset 0 0 60px -15px rgba(163, 227, 254, 0.35),
0 24px 48px rgba(163, 227, 254, 0.18),
0 8px 16px rgba(0, 0, 0, 0.3);
}
.theme.t-yellow:hover {
border-color: rgba(245, 250, 162, 0.55);
box-shadow:
inset 0 0 60px -15px rgba(245, 250, 162, 0.30),
0 24px 48px rgba(245, 250, 162, 0.15),
0 8px 16px rgba(0, 0, 0, 0.3);
}
.theme::before {
content: "";
position: absolute;
inset: -1px -1px auto -1px;
height: 2px;
border-radius: 14px 14px 0 0;
opacity: 0.7;
}
.theme.t-blue::before { background: linear-gradient(90deg, var(--blue-soft), transparent); }
.theme.t-pink::before { background: linear-gradient(90deg, var(--pink), transparent); }
.theme.t-sky::before { background: linear-gradient(90deg, var(--sky), transparent); }
.theme.t-yellow::before { background: linear-gradient(90deg, var(--yellow), transparent); }
.theme .theme-num {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.22em;
margin-bottom: 14px;
}
.theme.t-blue .theme-num { color: var(--blue-soft); }
.theme.t-pink .theme-num { color: var(--pink-soft); }
.theme.t-sky .theme-num { color: var(--sky); }
.theme.t-yellow .theme-num { color: var(--yellow); }
.theme h4 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 17px;
margin-bottom: 10px;
letter-spacing: -0.01em;
line-height: 1.2;
}
.theme .theme-quote {
font-size: 15px;
color: var(--text);
line-height: 1.45;
margin-bottom: 12px;
font-style: italic;
font-weight: 400;
}
.theme p {
font-size: 13.5px;
color: var(--text-muted);
line-height: 1.6;
}
.themes-discipline {
margin-top: 8px;
padding: 18px 22px;
border-left: 2px solid var(--border-strong);
font-size: 14px;
color: var(--text-muted);
line-height: 1.6;
max-width: 720px;
}
.themes-discipline strong {
color: var(--text);
font-weight: 500;
}
/* Mid breakpoint: 4 columns become 2x2 */
@media (max-width: 1100px) {
.themes-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.themes-grid { grid-template-columns: 1fr; gap: 12px; }
.theme { padding: 22px 20px; }
}
.manifesto a.deeper:hover { border-color: var(--blue-soft); }
/* ============================================================
SECTION 6 — TEAM STRIP
============================================================ */
section.team {
background: var(--navy);
padding-top: 120px;
padding-bottom: 120px;
}
.team-inner { max-width: 1320px; margin: 0 auto; padding: 0 48px; }
.team-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: 48px;
}
.team-card {
padding: 28px 24px;
}
.team-card .avatar {
width: 60px; height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, var(--navy-bright), var(--navy-mid));
border: 1px solid var(--border-strong);
margin-bottom: 16px;
}
.team-card h4 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 16px;
margin-bottom: 4px;
}
.team-card .role {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--blue-soft);
margin-bottom: 8px;
}
.team-card .prov {
font-size: 13px;
color: var(--text-muted);
line-height: 1.5;
}
.team-cta {
margin-top: 40px;
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--text);
text-decoration: none;
font-size: 15px;
border-bottom: 1px solid var(--border-strong);
padding-bottom: 4px;
transition: border-color 0.2s;
}
.team-cta:hover { border-color: var(--blue-soft); }
.team-cta::after { content: "→"; color: var(--blue-soft); }
/* ============================================================
SECTION 7 — QUIET CTA
============================================================ */
/* ============================================================
CONTACT OUTRO PILL (v54→v55→v57)
Pink-tinted pill that breaks the prose flow and gives the page-
close a clear point of focus. Two-part layout — soft prompt on
the left ("Want to give your control room the edge?"), bright
CTA on the right ("Get in touch →") — separated by a hairline
so the eye lands on the right side. The pink pill rhymes with
the pink kite in the X-mark watermark behind it.
v57: pill now nests at the apex of the X-mark (where the two
strokes meet) via absolute positioning, so the X visually holds
the pill rather than the pill floating loose below the X. The
.contact-outro itself just reserves the space; the pill sits
over the X bottom-left area.
============================================================ */
.contact-outro {
position: relative;
z-index: 1;
/* Reserve enough vertical space for the X + pill composition. The
pill is absolutely positioned to .page-outro (same containing block
as the X-mark watermark), so this padding is just floor space to
push the footer down past the X-mark watermark. */
padding: 60px 48px 240px;
}
.contact-outro-inner {
max-width: 1200px;
margin: 0 auto;
}
.contact-pill {
/* v57: absolutely positioned to nest at the X-mark apex. The X anchors
bottom-left of .page-outro (left: 56px, bottom: 40px). The right-pointing
apex of the X (where the descending and ascending strokes cross/meet on
the right side) sits at ~screen x: 356, ~190px above page-outro bottom.
The pill is placed so its LEFT-EDGE VERTICAL CENTRE sits on the apex
point — the tip of the X visually pokes into the rounded left edge of
the pill at its centre. */
position: absolute;
left: clamp(340px, 28vw, 402px);
bottom: 248px;
display: inline-flex;
align-items: center;
gap: 18px;
padding: 14px 14px 14px 28px;
border-radius: 999px;
background: linear-gradient(
90deg,
rgba(249, 153, 255, 0.08) 0%,
rgba(249, 153, 255, 0.14) 100%
);
border: 1px solid rgba(249, 153, 255, 0.32);
text-decoration: none;
color: var(--text);
font-family: 'Montserrat', sans-serif;
font-size: clamp(15px, 1.4vw, 17px);
letter-spacing: -0.005em;
transition: background 0.25s, border-color 0.25s, transform 0.25s;
box-shadow:
0 0 0 1px rgba(249, 153, 255, 0.06),
0 8px 32px -12px rgba(249, 153, 255, 0.35);
}
.contact-pill:hover {
background: linear-gradient(
90deg,
rgba(249, 153, 255, 0.14) 0%,
rgba(249, 153, 255, 0.22) 100%
);
border-color: rgba(249, 153, 255, 0.55);
transform: translateY(-1px);
}
.contact-pill-prompt {
color: var(--text-muted);
font-weight: 400;
}
.contact-pill-cta {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--pink);
color: var(--navy-deep);
padding: 8px 18px;
border-radius: 999px;
font-weight: 600;
letter-spacing: 0;
transition: background 0.25s;
}
.contact-pill:hover .contact-pill-cta {
background: #FFB1FF;
}
.contact-pill-arrow {
display: inline-block;
transition: transform 0.25s;
}
.contact-pill:hover .contact-pill-arrow {
transform: translateX(3px);
}
/* Mobile overrides for contact pill — placed after the default rules
so they take precedence in the cascade. The earlier @media block
(~line 2602) handles the why-now stats; this one handles the pill. */
@media (max-width: 880px) {
.contact-outro { padding: 40px 24px 100px; }
.contact-outro-inner { padding-left: 0; min-height: 0; }
.contact-pill {
/* Reset desktop absolute positioning — flow layout on mobile */
position: static;
left: auto;
bottom: auto;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 14px;
padding: 18px;
border-radius: 22px;
text-align: center;
width: 100%;
max-width: 420px;
margin: 0 auto;
}
.contact-pill-cta { justify-content: center; }
}
/* ============================================================
FOOTER
============================================================ */
/* ============================================================
FOOTER — two-row layout (v61).
v60 stripped this down to a thin meta+brand strip, but that lost
the site map. The links matter — visitors need to see where
pages will live, even when those pages don't exist yet. Now
structured as two rows separated by a hairline:
ROW 1 (footer-top): three nav columns left (Platform / Company /
Legal), brand stack right (tagline + logo + LinkedIn icon).
Logo + LinkedIn are the rightmost marks; tagline sits to their
left. Real links resolve to real pages or anchors; the rest
are placeholder "#" until pages ship.
ROW 2 (footer-bottom): meta strip left (© + location), nothing
on the right — the page-right anchor lives in row 1 with the
brand stack.
Wider than v60 (more vertical breathing room), but still much
slimmer than the original 4-column-block-plus-bottom-strip.
============================================================ */
footer {
border-top: 1px solid var(--border);
padding: 44px 48px 26px;
background: var(--navy-deep);
}
.footer-inner {
max-width: 1320px;
margin: 0 auto;
}
/* ROW 1 — nav + brand stack */
.footer-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 64px;
}
/* Nav: three columns, equal width, left-aligned. Compact gap so the
columns feel like a single map block. */
.footer-nav {
display: grid;
grid-template-columns: repeat(3, minmax(120px, 1fr));
gap: 48px;
flex: 1 1 auto;
max-width: 640px;
}
.footer-col h5 {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--text-faint);
margin: 0 0 18px 0;
}
.footer-col a {
display: block;
color: var(--text-muted);
text-decoration: none;
font-size: 14px;
line-height: 1;
margin-bottom: 12px;
transition: color 0.2s;
}
.footer-col a:last-child { margin-bottom: 0; }
.footer-col a:hover { color: var(--text); }
/* Brand stack on the right. Tagline sits above the marks row on
wide screens, but if there's enough room they go inline. Logo +
LinkedIn are the rightmost marks. */
.footer-brand {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 14px;
flex: 0 0 auto;
}
.footer-tagline {
font-family: 'Montserrat', sans-serif;
font-size: 12.5px;
font-weight: 400;
font-style: italic;
letter-spacing: 0.005em;
/* Subtle gradient pickup matching the page's em treatment, dialed
down so the tagline reads as a quiet signoff. */
background: linear-gradient(120deg, var(--blue-soft) 0%, var(--pink) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
opacity: 0.85;
}
.footer-brand-marks {
display: flex;
align-items: center;
gap: 16px;
}
.footer-brand .nav-logo {
display: flex;
align-items: center;
text-decoration: none;
height: 35px;
}
.footer-brand .nav-logo svg {
height: 35px;
width: auto;
display: block;
}
/* LinkedIn icon — sized to balance the now-larger logo. Same visual
register as the nav links (text-muted), hovers to text-blue-soft to
signal external. */
.footer-social {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
color: var(--text-muted);
transition: color 0.2s;
}
.footer-social svg {
width: 100%;
height: 100%;
display: block;
}
.footer-social:hover { color: var(--blue-soft); }
/* ROW 2 — meta strip, separated by a hairline. */
.footer-bottom {
margin-top: 32px;
padding-top: 20px;
border-top: 1px solid var(--border);
}
.footer-meta {
display: flex;
align-items: center;
gap: 12px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--text-faint);
letter-spacing: 0.1em;
}
.footer-divider {
opacity: 0.4;
}
/* ============================================================
WINGMAN CALL-OUT — short focused section.
Two-column: copy left, simple visual right (animated orb +
data-stripes — placeholder for a richer Wingman illustration).
============================================================ */
section.wingman-callout {
background:
radial-gradient(ellipse at 75% 50%, rgba(249,153,255,0.07), transparent 60%),
var(--navy);
padding: 120px 48px;
}
.wingman-inner {
max-width: 1320px;
margin: 0 auto;
}
.wingman-tag {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--pink-soft);
margin-bottom: 28px;
display: inline-flex;
align-items: center;
gap: 12px;
}
.wingman-tag::before {
content: ""; width: 28px; height: 1px; background: var(--pink-soft);
}
.wingman-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 80px;
align-items: center;
}
.wingman-text h2 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: clamp(36px, 4.6vw, 56px);
line-height: 1.05;
letter-spacing: -0.03em;
margin-bottom: 16px;
}
.wingman-text h2 em {
font-style: normal;
background: linear-gradient(135deg, var(--pink), var(--sky));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
}
.wingman-lede {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 20px;
color: var(--pink-soft);
margin-bottom: 20px;
letter-spacing: -0.01em;
}
.wingman-text p {
font-size: 16px;
color: var(--text-muted);
line-height: 1.7;
margin-bottom: 28px;
max-width: 540px;
}
.wingman-link {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--text);
text-decoration: none;
font-size: 15px;
border-bottom: 1px solid var(--border-strong);
padding-bottom: 4px;
transition: border-color 0.2s, gap 0.3s;
}
.wingman-link:hover {
border-color: var(--pink-soft);
gap: 16px;
}
/* Wingman visual — placeholder. A real version replaces this with
the actual Wingman illustration from the customer decks. */
.wingman-visual {
position: relative;
height: 320px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.wm-orb {
position: relative;
width: 160px;
height: 160px;
display: flex;
align-items: center;
justify-content: center;
}
.wm-pulse {
position: absolute;
inset: 0;
border-radius: 50%;
border: 1px solid rgba(249,153,255,0.3);
animation: wm-pulse-anim 3s ease-out infinite;
}
.wm-pulse-2 { animation-delay: 1.5s; }
@keyframes wm-pulse-anim {
0% { transform: scale(0.6); opacity: 1; }
100% { transform: scale(1.6); opacity: 0; }
}
.wm-core {
width: 88px;
height: 88px;
border-radius: 50%;
background: linear-gradient(135deg, var(--pink), var(--sky));
display: flex;
align-items: center;
justify-content: center;
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: 36px;
color: var(--navy-deep);
box-shadow: 0 0 40px rgba(249,153,255,0.4);
position: relative;
z-index: 1;
}
.wm-strip {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 32px;
width: 240px;
}
.wm-stripe {
height: 4px;
border-radius: 2px;
background: linear-gradient(90deg, transparent, rgba(249,153,255,0.5), transparent);
animation: wm-stripe-flow 4s linear infinite;
background-size: 200% 100%;
}
.wm-stripe:nth-child(2) { animation-delay: 0.4s; opacity: 0.7; }
.wm-stripe:nth-child(3) { animation-delay: 0.8s; opacity: 0.5; }
.wm-stripe:nth-child(4) { animation-delay: 1.2s; opacity: 0.3; }
@keyframes wm-stripe-flow {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ============================================================
PERSONA IMPACT STATEMENT — what changes for the role.
Sits below the feature map, swaps content with persona toggle.
============================================================ */
.persona-impact {
margin-top: 32px;
padding: 28px 32px;
border-radius: 16px;
background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
border: 1px solid var(--border);
transition: all 0.4s;
}
.persona-impact .impact-tag {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-faint);
margin-bottom: 10px;
transition: color 0.3s;
}
.persona-impact .impact-line {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: clamp(20px, 2.2vw, 26px);
line-height: 1.3;
letter-spacing: -0.015em;
color: var(--text);
}
.persona-impact[data-persona="operator"] {
background: linear-gradient(135deg, rgba(79,180,241,0.12), rgba(79,180,241,0.02));
border-color: rgba(79,180,241,0.3);
}
.persona-impact[data-persona="operator"] .impact-tag { color: var(--blue-soft); }
.persona-impact[data-persona="executive"] {
background: linear-gradient(135deg, rgba(249,153,255,0.12), rgba(249,153,255,0.02));
border-color: rgba(249,153,255,0.3);
}
.persona-impact[data-persona="executive"] .impact-tag { color: var(--pink-soft); }
/* ============================================================
OPERATOR-CREDIBILITY — replaces the team strip on the homepage.
Aggregates collective experience: years in ops, hubs, etc.
Three big numbers + one narrative paragraph + link to /team.
============================================================ */
/* ============================================================
SECTION 10 — DESIGNED BY OPERATORS
Two-column: text on the left, face-cluster on the right.
Cluster is a relatively-positioned box where each face is
absolutely placed by % so it scales fluidly with the column.
The mesh SVG is the same size as the cluster (inset:0); JS
draws lines between face centres in pixel coords matched to
viewBox.
Tokens used: --blue / --sky (mesh + accent ring), --navy
(face background), --text-muted (narrative copy).
============================================================ */
section.operator-cred {
background:
radial-gradient(ellipse at 50% 50%, rgba(79,180,241,0.04), transparent 70%),
var(--navy);
padding: 140px 48px;
position: relative;
}
.operator-cred-inner {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
gap: 80px;
align-items: center;
}
/* ----- Text column ----- */
.cred-text {
max-width: 560px;
}
.cred-h2 {
font-family: 'Montserrat', sans-serif;
font-size: clamp(28px, 3vw, 42px);
line-height: 1.15;
font-weight: 600;
letter-spacing: -0.02em;
margin: 0 0 28px;
color: var(--text);
}
.cred-h2 em {
font-style: normal;
background: linear-gradient(120deg, var(--sky) 0%, var(--blue) 60%, var(--blue-soft) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}
.cred-narrative {
font-size: 17px;
line-height: 1.7;
color: var(--text-muted);
margin: 0 0 32px;
}
.cred-narrative b { color: var(--text); font-weight: 500; }
.cred-link {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--text);
text-decoration: none;
font-size: 15px;
border-bottom: 1px solid var(--border-strong);
padding-bottom: 4px;
transition: border-color 0.2s, gap 0.3s, color 0.2s;
}
.cred-link::after { content: "→"; transition: transform 0.2s; }
.cred-link:hover { border-color: var(--blue-soft); color: var(--blue-soft); gap: 16px; }
/* ----- Cluster ----- */
.cluster {
position: relative;
aspect-ratio: 1 / 0.85;
width: 100%;
max-width: 560px;
margin: 0 auto;
}
/* Soft glow halo behind the founders */
.cluster::before {
content: "";
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 62%;
aspect-ratio: 1;
background: radial-gradient(circle, rgba(79,180,241,0.18) 0%, transparent 65%);
filter: blur(8px);
z-index: 0;
pointer-events: none;
}
/* Background sphere of orbs — fills the volume between the inner founders
and the outer team faces, so the cluster reads as the front face of a 3D
sphere of people. Three depth tiers (front/mid/back) for atmospheric
perspective: closer = larger, lighter, sharper; further = smaller, darker,
blurrier. Tones are pulled from the navy palette (deep navy → mid-navy)
so the sphere reads as depth rather than colour, letting the founders'
blue accent ring remain the focal point. */
.cluster .bg-people {
position: absolute;
inset: -2% 0%;
z-index: 0;
pointer-events: none;
/* Soft circular mask: gentle falloff at the very edge only, so orbs are
visible across most of the cluster region. */
-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 65%, rgba(0,0,0,.7) 82%, transparent 95%);
mask-image: radial-gradient(circle at 50% 50%, #000 65%, rgba(0,0,0,.7) 82%, transparent 95%);
}
/* Faint spherical halo — defines the sphere's silhouette so the orbs read
as a clustered volume rather than scattered dots. */
.cluster .bg-people::before {
content: "";
position: absolute;
left: 50%; top: 50%;
width: 96%; aspect-ratio: 1;
transform: translate(-50%, -50%);
border-radius: 50%;
background:
radial-gradient(circle at 38% 32%, rgba(79,180,241,0.10) 0%, transparent 55%),
radial-gradient(circle at 50% 50%, rgba(21,40,71,0.40) 0%, rgba(11,22,49,0.20) 55%, transparent 78%);
filter: blur(10px);
}
.cluster .bg-people .ghost {
position: absolute;
border-radius: 50%;
}
/* FRONT TIER — large, lightest, sharpest. Just behind the team faces.
Tone bumped lighter (was #2d3a5e — too close to section bg, disappeared).
Now reads as clearly visible orbs without competing with the founder ring. */
.cluster .bg-people .g1 { width: 13%; aspect-ratio: 1; left: 16%; top: 34%; opacity: .75; filter: blur(1.5px); background: #4a5680; }
.cluster .bg-people .g2 { width: 12%; aspect-ratio: 1; left: 73%; top: 34%; opacity: .75; filter: blur(1.5px); background: #4a5680; }
.cluster .bg-people .g7 { width: 11%; aspect-ratio: 1; left: 25%; top: 54%; opacity: .70; filter: blur(1.5px); background: #4a5680; }
.cluster .bg-people .g8 { width: 11%; aspect-ratio: 1; left: 64%; top: 54%; opacity: .70; filter: blur(1.5px); background: #4a5680; }
/* MID TIER — medium size, medium tone, slightly more blur. */
.cluster .bg-people .g3 { width: 10%; aspect-ratio: 1; left: 30%; top: 8%; opacity: .65; filter: blur(2px); background: #353f65; }
.cluster .bg-people .g4 { width: 10%; aspect-ratio: 1; left: 60%; top: 8%; opacity: .65; filter: blur(2px); background: #353f65; }
.cluster .bg-people .g9 { width: 9%; aspect-ratio: 1; left: 19%; top: 86%; opacity: .60; filter: blur(2px); background: #353f65; }
.cluster .bg-people .g10 { width: 9%; aspect-ratio: 1; left: 71%; top: 86%; opacity: .60; filter: blur(2px); background: #353f65; }
.cluster .bg-people .g5 { width: 9%; aspect-ratio: 1; left: 4%; top: 40%; opacity: .60; filter: blur(2.5px); background: #353f65; }
.cluster .bg-people .g6 { width: 9%; aspect-ratio: 1; left: 88%; top: 40%; opacity: .60; filter: blur(2.5px); background: #353f65; }
/* BACK TIER — smaller, darker, most blurred. Deep in the volume. */
.cluster .bg-people .g11 { width: 7%; aspect-ratio: 1; left: 47%; top: 50%; opacity: .50; filter: blur(3px); background: #252c4d; }
.cluster .bg-people .g12 { width: 6%; aspect-ratio: 1; left: 10%; top: 22%; opacity: .45; filter: blur(3px); background: #252c4d; }
.cluster .bg-people .g13 { width: 6%; aspect-ratio: 1; left: 84%; top: 22%; opacity: .45; filter: blur(3px); background: #252c4d; }
.cluster .bg-people .g14 { width: 7%; aspect-ratio: 1; left: 48%; top: 84%; opacity: .50; filter: blur(2.5px); background: #252c4d; }
/* Mesh layer — sits between glow and faces. Lines drawn by JS. */
.cluster .mesh {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
overflow: visible;
}
.cluster .mesh line {
stroke: url(#mesh-gradient);
stroke-width: 1;
opacity: 0.55;
}
.cluster .mesh circle.node {
fill: var(--blue);
opacity: 0.7;
}
/* Face wrapper holds the round portrait; positioned absolutely
inside the cluster. The .circle child has overflow:hidden so the
image is clipped to a circle. */
.cluster .face {
position: absolute;
z-index: 2;
}
.cluster .face .circle {
width: 100%;
aspect-ratio: 1;
border-radius: 50%;
overflow: hidden;
background: #1a2540;
box-shadow:
0 8px 24px rgba(0,0,0,0.35),
inset 0 0 0 2px rgba(180,200,230,0.18);
transition: transform 0.3s ease;
position: relative;
}
.cluster .face .circle img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.cluster .face .circle::after {
/* Subtle inner vignette so faces feel embedded in the dark, not floating */
content: "";
position: absolute; inset: 0;
border-radius: 50%;
box-shadow: inset 0 -20px 40px rgba(11,22,49,0.35);
pointer-events: none;
}
/* Founders: larger circles, accent ring, brighter glow. */
.cluster .face.founder .circle {
box-shadow:
0 14px 36px rgba(0,0,0,0.45),
0 0 0 3px var(--navy), /* dark separator */
0 0 0 5px rgba(79,180,241,0.45), /* blue accent ring */
0 0 32px rgba(79,180,241,0.25); /* glow */
}
.cluster .face.founder { z-index: 5; }
/* Cluster positions — founders centred and overlapping; team faces
all the same size, scattered around the founders to suggest "team
behind founders" as visual texture, not a hierarchy chart. */
.cluster .face.ghislain { width: 32%; left: 24%; top: 24%; } /* front-left founder */
.cluster .face.kaitlin { width: 32%; left: 48%; top: 24%; } /* front-right founder */
.cluster .face.team { width: 19%; }
.cluster .face.josh { left: 3%; top: 10%; z-index: 3; }
.cluster .face.charles { left: 78%; top: 10%; z-index: 3; }
.cluster .face.simon { left: 10%; top: 64%; z-index: 3; }
.cluster .face.louis-philippe{ left: 41%; top: 72%; z-index: 3; }
.cluster .face.dalia { left: 71%; top: 64%; z-index: 3; }
/* Subtle hover lift */
.cluster .face:hover .circle { transform: translateY(-2px) scale(1.03); }
.cluster .face:hover { z-index: 10; }
/* ============================================================
RESPONSIVE — three meaningful breakpoints
============================================================ */
/* MID — laptop / narrow desktop (768-1279px) */
@media (max-width: 1279px) {
nav.site-nav { padding: 16px 32px; }
nav.site-nav .links { gap: 28px; }
section.block { padding: 110px 32px; }
.platform-grid, .feature-map { grid-template-columns: repeat(3, 1fr); }
.persona-inner, .team-inner, .footer-inner, .framework-inner, .wingman-inner, .operator-cred-inner { padding-left: 32px; padding-right: 32px; }
.hero-content { padding: 180px 32px 100px; }
.wingman-grid { gap: 56px; }
.framework-stage { height: 440px; max-width: 800px; }
.team-grid { grid-template-columns: repeat(2, 1fr); }
/* Operator-cred two-column → tighten gap on narrower screens */
.operator-cred-inner { gap: 56px; }
}
/* MOBILE — phone (<768px) */
@media (max-width: 767px) {
nav.site-nav { padding: 14px 20px; }
nav.site-nav .links { display: none; }
nav.site-nav .cta { padding: 8px 16px; font-size: 12px; }
.mobile-menu-btn { display: block; }
section.block { padding: 80px 20px; }
.persona-inner, .team-inner, .footer-inner, .framework-inner, .wingman-inner, .operator-cred-inner { padding-left: 20px; padding-right: 20px; }
section.stat-punct { padding: 80px 20px; }
section.wingman-callout { padding: 80px 20px; }
section.framework { padding: 80px 20px 100px; }
section.operator-cred { padding: 80px 20px; }
section.bridge { padding: 100px 20px 120px; }
.bridge-line { font-size: clamp(28px, 8vw, 44px); }
/* View toggle on mobile — sits in cap row already; just shrink padding */
.view-toggle { padding: 2px; }
.view-btn { padding: 6px 12px; font-size: 9px; letter-spacing: 0.16em; }
/* Cost-curve is now a sub-beat inside Section 2; mobile sizing for chart only.
On mobile, drop the right-aligned offset — full width is better when there's
no left negative space to flow into. */
.cost-curve-beat { margin: 56px 0 0; max-width: none; }
.cost-curve-cap { gap: 12px; margin-bottom: 20px; }
.cost-curve-line { font-size: 18px; }
.step-chart-wrapper { padding: 16px 12px 56px 100px; }
.step-chart { height: 260px; }
.step-chart .y-axis-title { right: calc(100% + 64px); font-size: 9px; }
.step-chart .y-tick { font-size: 10px; }
.step-cost-badge { font-size: 14px; }
.step-trigger-label { font-size: 9px; padding: 3px 6px; }
.x360-marker .x360-tag { font-size: 9px; padding: 3px 7px; top: 8px; left: 8px; }
/* Hero — text takes full width, mesh becomes a static gradient backdrop */
.hero-content { padding: 130px 20px 80px; }
.hero-content h1 { font-size: clamp(38px, 10vw, 56px); margin-bottom: 24px; }
.hero-content .hero-tier.company { font-size: 17px; margin-bottom: 16px; }
.hero-content .hero-tier.product { font-size: 15px; margin-bottom: 32px; }
/* Mesh on mobile: dimmer, kite muted; the prototype animation still runs
but the mesh competes less with the text */
.mesh-bg { opacity: 0.55; }
.hero-veil {
background: linear-gradient(180deg, rgba(11,22,49,0.78) 0%, rgba(11,22,49,0.6) 100%);
}
.hero-scroll-pointer { display: none; }
/* Problem grid — stack */
.problem-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 36px; }
/* Platform — mobile: stack chips vertically, replace loop with simple
stacked cards. The loop visual makes sense at 600px+ widths; on phone
the integration argument moves into the lede text. */
section.platform { padding: 80px 20px 100px; }
.platform-intro { margin-bottom: 48px; }
.platform-lede { font-size: 18px; }
.module-strip {
flex-direction: column;
align-items: stretch;
gap: 12px;
margin-bottom: 40px;
}
.module-strip-divider { display: none; }
.module-chip { padding: 14px 16px; }
/* Loop hidden on mobile — module cards become the standalone visual.
Card stays visible; SVG container collapses; cards display as a
vertical stack of three rather than one-at-a-time. */
.loop-stage { margin-bottom: 32px; }
.loop-frame {
width: 100%;
aspect-ratio: auto;
}
.loop-svg { display: none; }
.loop-card {
position: relative;
top: auto;
left: auto;
transform: none;
width: 100%;
max-width: none;
padding: 24px 20px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border);
border-radius: 16px;
}
.card-name { font-size: 32px; }
.card-role { font-size: 16px; }
/* Wingman — stack, visual on top */
.wingman-grid { grid-template-columns: 1fr; gap: 36px; }
.wingman-grid .wingman-visual { order: -1; height: 220px; }
.wm-orb { width: 120px; height: 120px; }
.wm-core { width: 64px; height: 64px; font-size: 26px; }
.wm-strip { width: 200px; }
/* Persona overlay — stack feature columns */
.feature-map { grid-template-columns: 1fr; gap: 12px; }
.persona-toggles { gap: 8px; }
.persona-toggle { padding: 10px 16px; font-size: 13px; }
.persona-impact { padding: 20px 22px; margin-top: 24px; }
/* Framework — collapse to vertical stack on mobile, no triangle */
.framework-stage { height: auto; }
.framework-stage .fw-edges { display: none; }
.framework-stage {
display: flex;
flex-direction: column;
gap: 32px;
padding: 20px 0;
}
.fw-node {
position: static;
transform: none;
width: 100%;
text-align: left;
padding-left: 60px;
position: relative;
}
.fw-node .fw-icon { position: absolute; left: 0; top: 12px; margin: 0; }
.fw-node .fw-num {
position: absolute;
right: 0; top: 8px;
font-size: 28px;
}
.fw-loop-note { font-size: 11px; padding: 24px 20px 0; margin-top: 32px; }
/* Operator credibility — stack columns, drop gap, shrink cluster */
.operator-cred-inner {
grid-template-columns: 1fr;
gap: 48px;
}
.cred-text { max-width: none; }
.cluster { max-width: 460px; }
/* Team — single column (still defined for /team page reuse) */
.team-grid { grid-template-columns: 1fr; gap: 12px; }
/* Footer — on mobile, stack the top row vertically: nav columns
above, brand stack below (still right-aligned so the logo
continues to anchor the right edge). Nav itself collapses to
two columns first, then one at the narrowest. */
.footer-top {
flex-direction: column;
gap: 36px;
}
.footer-nav {
grid-template-columns: repeat(2, 1fr);
gap: 32px;
max-width: none;
width: 100%;
}
.footer-brand {
align-items: flex-start;
width: 100%;
}
.footer-meta { font-size: 10.5px; }
}
@media (max-width: 480px) {
.footer-nav { grid-template-columns: 1fr; gap: 24px; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
/* Wipe-rect explicitly translated to its final position so the X body
stays visible without animation. */
.x-body-wipe-rect {
animation: none;
transform: translate(0px, 0px);
}
}
/* ==========================================================================
PLATFORM PAGE — page hero, breadcrumb, module placeholder cards
========================================================================== */
.page-hero {
position: relative; z-index: 2;
max-width: 1320px; margin: 0 auto;
padding: 100px 48px 60px;
}
.breadcrumb {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--text-faint);
margin-bottom: 18px;
}
.breadcrumb a {
color: var(--text-faint); text-decoration: none;
transition: color 0.2s;
}
.breadcrumb a:hover { color: var(--text-muted); }
.breadcrumb .sep { margin: 0 10px; color: var(--text-faint); }
.page-hero h1 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: clamp(40px, 6vw, 72px);
line-height: 1.02;
letter-spacing: -0.03em;
margin-bottom: 22px;
}
.page-hero h1 em {
font-style: normal;
background: linear-gradient(135deg, var(--blue) 20%, var(--pink) 80%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.page-hero .lede {
font-size: 18px;
color: var(--text-muted);
line-height: 1.55;
max-width: 720px;
}
/* Module placeholder strip (3-column on desktop, 1-column on mobile) */
/* ==========================================================================
MODULES SECTION
--------------------------------------------------------------------------
Four full-width module rows. Each row is a 2-column grid:
left column (head): phase tag, name, tagline, blurb.
right column (body): 4-bullet capabilities list + "AI Applied" tags.
Color-coded via .mod-{horizon|tower|hangar|wingman} modifiers
that color the module-tag, the name's accent dot, and the left-edge rail.
========================================================================== */
.modules {
position: relative;
z-index: 1;
padding: 80px 48px 120px;
}
.modules-inner {
max-width: 1280px;
margin: 0 auto;
}
.modules-intro {
max-width: 780px;
margin-bottom: 56px;
}
.modules-intro .eyebrow {
margin-bottom: 18px;
}
/* Module row — desktop layout: head + body side by side. */
.module-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
gap: 48px;
padding: 36px 36px 36px 36px;
border: 1px solid var(--border);
border-radius: 14px;
margin-bottom: 16px;
position: relative;
overflow: hidden; /* arcs poke beyond card; let them clip cleanly */
background: rgba(255, 255, 255, 0.012);
/* Soft frame glow at rest. The glow intensity is set per-module
via the .mod-* classes so each card glows in its own color. */
transition: box-shadow 0.4s ease, background 0.3s ease, border-color 0.3s ease;
/* When an anchor jump targets this card (e.g. platform.html#horizon
from the homepage loop or footer), push the landing position down
by ~25% of viewport height so the card lands centered-ish in view
rather than hidden under the fixed nav. 25vh handles the variable
card heights well across desktop and tablet sizes. */
scroll-margin-top: 25vh;
}
.module-row:hover {
background: rgba(255, 255, 255, 0.025);
}
/* The decorative arc — sits in the top-right of each card,
partially extending beyond the card's edge so it reads as "part
of a larger loop poking through" rather than a contained
ornament. All four modules use the same arc position and shape;
the color is the module identifier. This keeps the arcs visually
consistent (they're all from "the same loop") while leaving color
to do the per-module work.
Arc geometry: r=50, stroke-width=4, dasharray "105 210" exposes
~33% of the circle's circumference (one third of 314.16). The
rotation places the visible arc segment in the lower-left of the
SVG, which sits in the top-right corner of the card — so the
arc curves down-and-into the card from the upper-right corner. */
.module-arc {
position: absolute;
top: -36px;
right: -36px;
width: 180px;
height: 180px;
pointer-events: none;
opacity: 0.85;
/* All modules share rotation; only color differs per .mod-* class. */
transform: rotate(35deg);
transition: opacity 0.4s ease, transform 0.4s ease;
}
.module-arc circle {
stroke: currentColor;
}
.mod-horizon .module-arc { color: var(--sky); }
.mod-tower .module-arc { color: var(--pink); }
.mod-hangar .module-arc { color: var(--yellow); }
.mod-wingman .module-arc { color: var(--pink-soft); opacity: 0.5; }
/* Hover lift: arc brightens, slight rotation tweak suggests the
arc is "moving" — connects to the animated loop in the hero. */
.module-row:hover .module-arc {
opacity: 1;
transform: rotate(40deg);
}
.mod-wingman:hover .module-arc {
opacity: 0.8;
}
/* Head column */
.module-row-head {
min-width: 0;
position: relative;
z-index: 1; /* above the arc */
}
.module-tag {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-faint);
margin-bottom: 14px;
}
.module-name {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 32px;
letter-spacing: -0.02em;
margin: 0 0 14px 0;
color: var(--text);
}
.module-tagline {
font-size: 18px;
line-height: 1.4;
color: var(--text);
margin: 0 0 14px 0;
font-weight: 400;
}
.module-tagline em {
font-style: italic;
color: var(--text-muted);
font-weight: 400;
}
.module-blurb {
font-size: 14px;
color: var(--text-muted);
line-height: 1.6;
margin: 0;
}
/* Body column */
.module-row-body {
min-width: 0;
display: flex;
flex-direction: column;
gap: 24px;
}
.module-caps {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.module-caps li {
position: relative;
padding-left: 22px;
font-size: 14px;
color: var(--text-muted);
line-height: 1.5;
}
.module-caps li::before {
/* Per-module bullet — small filled circle in the module's color.
Set via the parent .mod-* class. */
content: "";
position: absolute;
left: 0;
top: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--text-faint); /* default; mod-* overrides below */
}
.module-ai {
border-top: 1px solid var(--border);
padding-top: 18px;
}
.module-ai-label {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-faint);
margin-bottom: 12px;
}
.module-ai-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.ai-tag {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.04em;
color: var(--text-muted);
padding: 5px 10px;
border: 1px solid var(--border);
border-radius: 4px;
background: rgba(255, 255, 255, 0.015);
white-space: nowrap;
}
/* PER-MODULE COLOR ACCENTS
The arc visual handles primary identification; these rules
handle the secondary color cues (tag, bullet dots) and the
per-card frame glow that intensifies on hover. */
.mod-horizon .module-tag { color: var(--sky); }
.mod-horizon .module-caps li::before { background: var(--sky); }
.mod-horizon { box-shadow: 0 0 0 1px rgba(163, 227, 254, 0) inset, 0 0 30px -10px rgba(163, 227, 254, 0); }
.mod-horizon:hover {
border-color: rgba(163, 227, 254, 0.35);
box-shadow: 0 0 0 1px rgba(163, 227, 254, 0.15) inset, 0 0 40px -8px rgba(163, 227, 254, 0.25);
}
.mod-tower .module-tag { color: var(--pink-soft); }
.mod-tower .module-caps li::before { background: var(--pink-soft); }
.mod-tower { box-shadow: 0 0 0 1px rgba(249, 153, 255, 0) inset, 0 0 30px -10px rgba(249, 153, 255, 0); }
.mod-tower:hover {
border-color: rgba(249, 153, 255, 0.35);
box-shadow: 0 0 0 1px rgba(249, 153, 255, 0.15) inset, 0 0 40px -8px rgba(249, 153, 255, 0.25);
}
.mod-hangar .module-tag { color: var(--yellow); }
.mod-hangar .module-caps li::before { background: var(--yellow); }
.mod-hangar { box-shadow: 0 0 0 1px rgba(255, 199, 0, 0) inset, 0 0 30px -10px rgba(255, 199, 0, 0); }
.mod-hangar:hover {
border-color: rgba(255, 199, 0, 0.35);
box-shadow: 0 0 0 1px rgba(255, 199, 0, 0.15) inset, 0 0 40px -8px rgba(255, 199, 0, 0.2);
}
/* WINGMAN — softer treatment to mark it as the assistant that
threads through, not a phase-owning module. */
.mod-wingman .module-tag { color: var(--pink-soft); }
.mod-wingman .module-caps li::before { background: var(--pink-soft); }
.mod-wingman { box-shadow: 0 0 0 1px rgba(255, 159, 203, 0) inset, 0 0 30px -10px rgba(255, 159, 203, 0); }
.mod-wingman:hover {
border-color: rgba(255, 159, 203, 0.3);
box-shadow: 0 0 0 1px rgba(255, 159, 203, 0.1) inset, 0 0 40px -8px rgba(255, 159, 203, 0.18);
}
/* Responsive — stack head over body at narrower widths. */
@media (max-width: 900px) {
.modules {
padding: 60px 24px 80px;
}
.module-row {
grid-template-columns: 1fr;
gap: 28px;
padding: 28px 24px;
}
.module-name {
font-size: 28px;
}
.module-tagline {
font-size: 16px;
}
}
/* ==========================================================================
STACK FIT CALLOUT — the "our solvers / yours / human gate" claim
--------------------------------------------------------------------------
Sits between Modules and Persona. A single card with three labeled rows.
Each row's label gets the brand blue→pink gradient so the three claims
read as headline statements, with the body copy supporting them.
========================================================================== */
.stack-fit {
position: relative;
z-index: 1;
padding: 16px 48px 80px;
}
.stack-fit-inner {
max-width: 1080px;
margin: 0 auto;
}
.stack-fit-card {
/* Glass-style treatment, distinct from the module rows above. */
background:
linear-gradient(135deg,
rgba(79, 180, 241, 0.05) 0%,
rgba(249, 153, 255, 0.035) 100%),
rgba(255, 255, 255, 0.018);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 36px 44px 44px;
position: relative;
overflow: hidden;
}
.stack-fit-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: 16px;
pointer-events: none;
box-shadow: 0 0 80px -30px rgba(79, 180, 241, 0.18) inset;
}
.stack-fit-eyebrow {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-faint);
margin-bottom: 14px;
}
.stack-fit-title {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 26px;
letter-spacing: -0.015em;
line-height: 1.25;
color: var(--text);
margin: 0 0 36px 0;
max-width: 720px;
}
.stack-fit-title em {
font-style: italic;
background: linear-gradient(135deg, var(--blue) 0%, var(--pink) 70%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
}
/* The flow. Three nodes + two arrows in a horizontal sequence. */
.stack-fit-flow {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
gap: 0;
align-items: stretch;
}
.sf-node {
padding: 22px 22px 24px;
border: 1px solid var(--border);
border-radius: 12px;
background: rgba(255, 255, 255, 0.018);
display: flex;
flex-direction: column;
gap: 10px;
position: relative;
}
.sf-node-step {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-faint);
}
.sf-node-headline {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 19px;
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--text);
margin-bottom: 4px;
}
.sf-node-points {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 7px;
}
.sf-node-points li {
font-size: 13px;
line-height: 1.5;
color: var(--text-muted);
padding-left: 14px;
position: relative;
}
.sf-node-points li::before {
content: "";
position: absolute;
left: 0;
top: 9px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--text-faint);
}
/* Approve node — visually emphasized. The middle of the flow is
the differentiating claim, so it gets a brighter frame and a
brand-color glow. The headline gets the gradient. */
.sf-node-approve {
border-color: rgba(79, 180, 241, 0.35);
background:
linear-gradient(135deg,
rgba(79, 180, 241, 0.08) 0%,
rgba(249, 153, 255, 0.05) 100%),
rgba(255, 255, 255, 0.02);
box-shadow: 0 0 40px -10px rgba(79, 180, 241, 0.25);
}
.sf-node-approve .sf-node-headline {
background: linear-gradient(135deg, var(--blue) 0%, var(--pink) 70%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.sf-node-approve .sf-node-points li::before {
background: var(--blue);
}
/* Outer nodes — quieter, blue accent on Propose, pink on Push. */
.sf-node-propose .sf-node-step { color: var(--sky); }
.sf-node-push .sf-node-step { color: var(--pink-soft); }
/* Arrows between nodes. Use currentColor so the SVG inherits color. */
.sf-arrow {
display: flex;
align-items: center;
justify-content: center;
padding: 0 14px;
color: var(--text-faint);
}
/* Responsive: collapse to vertical at narrower widths. The arrows
rotate 90deg so they read as down-arrows. */
@media (max-width: 1000px) {
.stack-fit-flow {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto auto auto;
gap: 0;
}
.sf-arrow {
padding: 14px 0;
transform: rotate(90deg);
}
}
@media (max-width: 720px) {
.stack-fit {
padding: 8px 24px 60px;
}
.stack-fit-card {
padding: 28px 24px 32px;
}
.stack-fit-title {
font-size: 22px;
}
.sf-node {
padding: 20px 20px 22px;
}
.sf-node-headline {
font-size: 18px;
}
}
/* ==========================================================================
WORKED EXAMPLE — TSC638 YQB→HOG
--------------------------------------------------------------------------
Default: typographic intro + 4-card stage grid + difference strip.
Expanded (via native ): full stage-by-stage tables, three
recovery options, Option C cost breakdown.
========================================================================== */
.example {
position: relative;
z-index: 1;
padding: 80px 48px 40px;
}
.example-inner {
max-width: 1280px;
margin: 0 auto;
}
.example-intro {
max-width: 820px;
margin-bottom: 48px;
}
.example-intro .eyebrow {
margin-bottom: 18px;
}
/* ---------- Default state: 4 stage cards in a row ---------- */
.example-stages {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-bottom: 32px;
}
.stage-card {
padding: 24px 22px 22px;
border: 1px solid var(--border);
border-radius: 12px;
background: rgba(255, 255, 255, 0.015);
display: flex;
flex-direction: column;
gap: 14px;
/* Color rail at the top, set per-stage below. */
border-top: 2px solid var(--border);
}
.stage-head {
display: flex;
flex-direction: column;
gap: 4px;
}
.stage-num {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-faint);
}
.stage-name {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 22px;
letter-spacing: -0.01em;
color: var(--text);
}
.stage-mod {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-faint);
}
.stage-line {
font-size: 13.5px;
line-height: 1.55;
color: var(--text-muted);
margin: 0;
flex: 1;
}
.stage-figure {
padding: 14px 0 4px;
border-top: 1px dashed var(--border);
}
.stage-fig-num {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 28px;
letter-spacing: -0.02em;
color: var(--text);
line-height: 1;
margin-bottom: 6px;
}
.stage-fig-cap {
font-size: 12px;
color: var(--text-muted);
line-height: 1.4;
}
.stage-today {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--text-faint);
line-height: 1.5;
letter-spacing: 0.02em;
padding-top: 10px;
border-top: 1px solid var(--border);
}
/* Per-stage color accents on the top rail + figure number. */
.stage-detect { border-top-color: var(--sky); }
.stage-detect .stage-mod { color: var(--sky); }
.stage-detect .stage-fig-num { color: var(--sky); }
.stage-assess { border-top-color: var(--pink); }
.stage-assess .stage-mod { color: var(--pink-soft); }
.stage-assess .stage-fig-num { color: var(--pink-soft); }
.stage-decide { border-top-color: var(--pink); }
.stage-decide .stage-mod { color: var(--pink-soft); }
.stage-decide .stage-fig-num { color: var(--pink-soft); }
.stage-learn { border-top-color: var(--yellow); }
.stage-learn .stage-mod { color: var(--yellow); }
.stage-learn .stage-fig-num { color: var(--yellow); }
/* ---------- The X360 Difference strip ---------- */
.example-diff {
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 24px 32px;
margin-bottom: 32px;
background:
linear-gradient(135deg,
rgba(79, 180, 241, 0.04) 0%,
rgba(249, 153, 255, 0.03) 100%),
rgba(255, 255, 255, 0.012);
}
.diff-eyebrow {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-faint);
margin-bottom: 18px;
}
/* ---------- Difference strip — two paired time comparisons ---------- */
/* Stats here describe how the system operates (which holds across
cases). Per-event dollar figures live inside the worked example
itself, never as anchored "platform stats". */
.diff-times {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
}
.diff-time {
display: flex;
flex-direction: column;
gap: 4px;
}
.diff-time-now {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 32px;
letter-spacing: -0.02em;
background: linear-gradient(135deg, var(--blue) 0%, var(--pink) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
}
.diff-time-vs {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--text-faint);
letter-spacing: 0.04em;
margin-top: 6px;
}
.diff-time-label {
font-size: 13px;
color: var(--text-muted);
margin-top: 6px;
line-height: 1.5;
}
/* ---------- The expand-to-detail mechanism (native ) ---------- */
/* Hide the default disclosure marker; style summary as a button. */
.example-deep {
margin-top: 16px;
}
.example-deep summary {
list-style: none;
}
.example-deep summary::-webkit-details-marker {
display: none;
}
.example-deep-summary {
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 24px;
border: 1px solid var(--border);
border-radius: 10px;
background: rgba(255, 255, 255, 0.02);
transition: background 0.2s, border-color 0.2s;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 14px;
color: var(--text);
user-select: none;
}
.example-deep-summary:hover {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(79, 180, 241, 0.4);
}
.ed-summary-text { display: inline-flex; }
.ed-summary-state-closed { display: inline; }
.ed-summary-state-open { display: none; }
.example-deep[open] .ed-summary-state-closed { display: none; }
.example-deep[open] .ed-summary-state-open { display: inline; }
.ed-summary-icon {
display: inline-block;
width: 12px;
height: 12px;
border-right: 2px solid var(--text-muted);
border-bottom: 2px solid var(--text-muted);
transform: rotate(45deg) translate(-2px, -2px);
transition: transform 0.25s;
}
.example-deep[open] .ed-summary-icon {
transform: rotate(-135deg) translate(-3px, -3px);
}
/* ---------- The expanded body: condensed table + options ---------- */
.example-deep-body {
margin-top: 28px;
padding: 32px 0 8px;
border-top: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 36px;
}
/* Condensed capabilities table. 4 columns:
Stage (pill) / Capability / Operational impact / Estimated savings */
.deep-table {
display: grid;
grid-template-columns: 1fr;
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
}
.deep-row {
display: grid;
grid-template-columns: 90px 1.3fr 1.6fr 0.9fr 1.2fr;
gap: 16px;
padding: 14px 20px;
font-size: 13px;
line-height: 1.5;
color: var(--text-muted);
border-bottom: 1px solid var(--border);
align-items: center;
}
.deep-row:last-child {
border-bottom: none;
}
.deep-row-head {
background: rgba(255, 255, 255, 0.025);
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-faint);
padding: 12px 20px;
}
.deep-row > div:nth-child(2) {
/* The capability name column — slightly more emphasis. */
color: var(--text);
font-weight: 500;
}
.deep-row > div:nth-child(4) {
/* The savings column — monospace for numeric vibe. */
font-family: 'JetBrains Mono', monospace;
font-size: 12.5px;
color: var(--text);
}
.deep-row > div:nth-child(5) {
/* Soft benefit — italic, slightly faint, reads as context not a fact-value. */
font-style: italic;
font-size: 12.5px;
color: var(--text-muted);
}
/* Stage pills — color-coded per phase, used inside the table to
group rows visually without explicit row separators. */
.deep-stage-pill {
display: inline-block;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 4px 8px;
border-radius: 4px;
border: 1px solid currentColor;
white-space: nowrap;
}
.deep-pill-detect { color: var(--sky); }
.deep-pill-assess { color: var(--pink-soft); }
.deep-pill-decide { color: var(--pink-soft); }
.deep-pill-learn { color: var(--yellow); }
/* ---------- The three options block ---------- */
.deep-options-block {
border: 1px solid var(--border);
border-radius: 12px;
padding: 24px 28px 26px;
background: rgba(255, 255, 255, 0.012);
}
.deep-options-head {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border);
}
.deep-options-title {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 16px;
color: var(--text);
}
.deep-options-sub {
font-size: 13px;
color: var(--text-muted);
line-height: 1.5;
}
.deep-options {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.deep-option {
padding: 18px 20px;
border: 1px solid var(--border);
border-radius: 10px;
background: rgba(255, 255, 255, 0.015);
display: grid;
grid-template-columns: 32px 1fr auto;
grid-template-rows: auto auto;
gap: 4px 12px;
align-items: center;
}
.deep-option-letter {
grid-row: 1 / span 2;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 22px;
color: var(--text-faint);
text-align: center;
padding-top: 4px;
}
.deep-option-name {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 14px;
color: var(--text);
}
.deep-option-cost {
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
font-weight: 600;
color: var(--text);
}
.deep-option-detail {
grid-column: 2 / span 2;
font-size: 12.5px;
line-height: 1.5;
color: var(--text-muted);
}
.deep-option-rec {
border-color: rgba(79, 180, 241, 0.4);
background:
linear-gradient(135deg,
rgba(79, 180, 241, 0.06) 0%,
rgba(79, 180, 241, 0.02) 100%);
}
.deep-option-rec .deep-option-letter {
color: var(--blue);
}
.deep-option-rec .deep-option-cost {
color: var(--blue);
}
.deep-options-note {
font-size: 13px;
line-height: 1.55;
color: var(--text-muted);
margin: 16px 0 0 0;
padding-top: 14px;
border-top: 1px solid var(--border);
}
/* ---------- Worked example responsive ---------- */
@media (max-width: 1100px) {
.example-stages {
grid-template-columns: repeat(2, 1fr);
}
.deep-options {
grid-template-columns: 1fr;
}
}
@media (max-width: 900px) {
.example {
padding: 60px 24px 40px;
}
.deep-row {
grid-template-columns: 1fr;
gap: 6px;
padding: 14px 16px;
}
.deep-row-head {
display: none;
}
.deep-row > div:first-child {
margin-bottom: 4px;
}
.deep-row > div:nth-child(2) {
font-weight: 600;
color: var(--text);
}
.deep-options-block {
padding: 20px 18px;
}
.deep-options-head {
gap: 4px;
}
}
@media (max-width: 600px) {
.example-stages {
grid-template-columns: 1fr;
}
.diff-times {
grid-template-columns: 1fr;
gap: 20px;
}
}
/* ==========================================================================
ROI POINTER — single-line bubble handoff to /roi
--------------------------------------------------------------------------
Used to be a full section (eyebrow + h3 + body + link). Now it's a one-
sentence transition cue with an inline arrow link. The economics page
itself is where the argument actually unfolds; this is just the bridge.
========================================================================== */
.roi-pointer {
position: relative; z-index: 2;
max-width: 1080px;
margin: 0 auto;
padding: 56px 48px 80px;
display: block;
}
.roi-pointer-line {
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 17px;
line-height: 1.6;
color: var(--text-muted);
margin: 0;
max-width: 760px;
}
.roi-pointer-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 17px;
color: var(--blue);
text-decoration: none;
margin-left: 6px;
border-bottom: 1px solid transparent;
transition: border-color 0.2s, gap 0.2s;
}
.roi-pointer-link:hover {
border-bottom-color: var(--blue);
gap: 10px;
}
.roi-pointer-arrow {
display: inline-block;
transition: transform 0.2s;
}
.roi-pointer-link:hover .roi-pointer-arrow {
transform: translateX(2px);
}
@media (max-width: 720px) {
.roi-pointer {
padding: 36px 24px 56px;
}
.roi-pointer-line {
font-size: 15.5px;
}
.roi-pointer-link {
font-size: 15.5px;
}
}
/* ==========================================================================
PLATFORM HERO — single-column text over a massive watermark loop
--------------------------------------------------------------------------
The loop is positioned absolutely behind the hero, sized larger than the
viewport, and bleeds past the section boundary into the orchestration
section below. Animation: a glow head travels clockwise around the loop,
painting each arc as it crosses, then arc settles to a dim watermark.
Cycle repeats indefinitely while the hero is in viewport (paused via JS
on scroll-out — see site.js).
========================================================================== */
.platform-hero {
position: relative;
/* The hero needs to allow the watermark to bleed below it, so no
overflow clipping. */
overflow: visible;
/* Generous top padding to give breathing room under the nav, and
bottom padding tall enough that the watermark's bottom curve sits
under the section break, not above it. */
padding-top: 100px;
padding-bottom: 120px;
min-height: 80vh;
max-width: 1320px;
margin: 0 auto;
}
/* The watermark wrapper — sized to roughly span the hero plus extend
below it. Anchored to the right side so the loop sits behind and
slightly overhanging the text column. */
.hero-watermark {
position: absolute;
/* Pin to top of the hero (under nav) and stretch down past the
bottom — values tuned so the bottom of the watermark crosses
into the next section by ~20% of its height. */
top: -20px;
right: -8%;
width: 920px;
height: 920px;
pointer-events: none;
z-index: 0;
/* Soft mask so the loop edges fade rather than cut hard at the
watermark's bounding box. */
mask-image: radial-gradient(ellipse at center,
rgba(0,0,0,1) 55%,
rgba(0,0,0,0.85) 70%,
rgba(0,0,0,0.4) 88%,
rgba(0,0,0,0) 100%);
-webkit-mask-image: radial-gradient(ellipse at center,
rgba(0,0,0,1) 55%,
rgba(0,0,0,0.85) 70%,
rgba(0,0,0,0.4) 88%,
rgba(0,0,0,0) 100%);
}
.hero-watermark-svg {
width: 100%;
height: 100%;
display: block;
}
/* The dim base layer — defines the static loop shape that's always
visible. Low opacity so it reads as a watermark behind text. */
.hw-arc-base {
opacity: 0.15;
}
/* The paint layer — animated. Each arc has length ~838 (r=400, theta=120°).
We use stroke-dasharray to "draw in" the arc as the glow head travels
along it, then drop opacity after the head leaves.
Stroke-dasharray pattern: [arc-length] [2x arc-length] — start with
offset = arc-length so nothing's drawn, animate offset to 0 to draw
the arc fully in.
Cycle is 10.5s (3 arcs × 3.5s of paint per arc). The cycle is tuned
so that each arc's paint completes at the exact moment the NEXT arc
flashes on. The previous arc then fades over ~8% (~840ms) WHILE the
next arc is already painting in — clean baton-pass at the junction
rather than the fade-then-restart pattern of the earlier 14s version.
For each arc the timeline within the 10.5s cycle is:
0% : invisible (opacity=0, dashoffset=838)
0.5% : flash on at full opacity (the junction handoff moment)
33% : fully painted (dashoffset=0). NEXT arc flashes on now.
41% : faded out (opacity=0). 8% fade = ~840ms.
41.5% : dashoffset reset to 838 (invisible, ready for restart)
100% : remains invisible until cycle restarts. */
.hw-arc-paint {
fill: none;
stroke-dasharray: 838 1676;
stroke-dashoffset: 838;
opacity: 0;
}
@keyframes hw-arc-paint {
/* 0-33%: paint in. Opacity flashes to 0.85 instantly at 0.5% (so
the arc snaps on at full glow at the junction handoff), then
dashoffset travels from 838 → 0 to paint the head along the arc.
33-41%: fade. Opacity 0.85 → 0 over 8% of cycle (~840ms). The
dashoffset stays at 0 — the painted arc dims uniformly, doesn't
"un-draw."
41-100%: invisible. The dashoffset resets at 41.5% so the next
cycle starts from a clean state. */
0% { stroke-dashoffset: 838; opacity: 0; }
0.5% { opacity: 0.9; }
33% { stroke-dashoffset: 0; opacity: 0.9; }
41% { stroke-dashoffset: 0; opacity: 0; }
41.5%{ stroke-dashoffset: 838; opacity: 0; }
100% { stroke-dashoffset: 838; opacity: 0; }
}
/* Staggers tuned so each arc's 0% (paint start) lines up with the
PREVIOUS arc's 33% mark (paint complete). With a 10.5s cycle and
three arcs at 3.5s paint each:
- Anticipate: 0s delay → paints wall 0-3.5s
- Decide: -7s delay → at wall=0 it's at 7/10.5 = 66.7% (invisible
range), loops to 0% at wall=3.5s and starts painting
exactly when anticipate's head reaches the junction.
- Learn: -3.5s delay → at wall=0 it's at 33.3% (mid-fade, briefly
visible at very first paint — this is a one-time stale-
state at viewport-entry that resolves within ~840ms). */
.hw-arc-paint-anticipate { animation: hw-arc-paint 10.5s linear infinite; }
.hw-arc-paint-decide { animation: hw-arc-paint 10.5s linear infinite -7s; }
.hw-arc-paint-learn { animation: hw-arc-paint 10.5s linear infinite -3.5s; }
/* When the hero leaves the viewport, JS adds .hero-watermark-paused
on the wrapper. We pause all child SVG animations to spare paint. */
.hero-watermark.hero-watermark-paused .hw-arc-paint {
animation-play-state: paused;
}
/* Respect reduced-motion preference — no chase animation, just the
static dim watermark. The paint arcs disappear; the base arcs
carry the loop shape on their own. */
@media (prefers-reduced-motion: reduce) {
.hw-arc-paint {
animation: none !important;
display: none;
}
}
/* Hero text content — sits over the watermark, single column. */
.platform-hero-text {
position: relative;
z-index: 1;
max-width: 720px;
/* Slight left bias so text isn't fighting the loop center for
attention. */
margin-right: auto;
}
.platform-hero-text .eyebrow {
margin-bottom: 18px;
}
.platform-hero .lede-accent {
background: linear-gradient(135deg, var(--blue) 0%, var(--pink) 60%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 500;
}
/* Frosted-glass band wraps both h1 and lede. As the loop's animated
glow head passes under either, the arc segment is softened by
backdrop-filter — the "passing under glass" effect. Without this
the loop reads too starkly behind dense headline copy.
Tuning notes:
- backdrop-filter: blur(5px) softens the arc cleanly without
dissolving it.
- 2.5% white tint gives the band surface presence (not a hole).
- Negative outer margins cancel the padding so layout matches
the unframed flow.
- Max-width keeps the band sized to the text column (not the
full hero width) so the watermark to the right stays visible. */
.h1-frost {
position: relative;
display: block;
max-width: 720px;
padding: 16px 22px 18px;
margin: -16px -22px 28px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.025);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
.h1-frost h1 {
margin: 0 0 18px 0; /* spacing between h1 and lede inside the band */
}
.h1-frost .lede {
margin: 0; /* the band carries outer spacing */
}
/* Module marks row — three brand logos sit beneath the lede.
Logos act as visual anchors for the modules being introduced
throughout the page. Wingman gets a text-only treatment beside
the trio since it's the assistant, not a phase-owning module. */
.hero-modules {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 28px 36px;
margin-top: 8px;
}
.hero-mod-trio {
display: flex;
align-items: center;
gap: 28px;
}
.hero-mod {
display: flex;
align-items: center;
gap: 10px;
}
.hero-mod img {
width: 36px;
height: 36px;
object-fit: contain;
display: block;
}
.hero-mod-name {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 15px;
color: var(--text);
letter-spacing: -0.005em;
}
/* Wingman aux line. Plus sign + name + a brief role descriptor.
Visually quieter than the logo trio; reads as continuation. */
.hero-mod-aux {
display: flex;
align-items: center;
gap: 10px;
/* Subtle vertical separator on the left when there's room. */
padding-left: 28px;
border-left: 1px solid var(--border);
}
.hero-mod-aux-plus {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 18px;
color: var(--text-faint);
}
.hero-mod-aux-name {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 15px;
color: var(--text);
}
.hero-mod-aux-desc {
font-size: 12.5px;
color: var(--text-muted);
font-style: italic;
line-height: 1.4;
max-width: 280px;
}
/* On narrow widths, the aux line wraps below the trio — drop the
left border + padding so the layout reflows cleanly. */
@media (max-width: 720px) {
.hero-modules {
gap: 22px 24px;
}
.hero-mod-trio {
gap: 20px;
}
.hero-mod img {
width: 30px;
height: 30px;
}
.hero-mod-aux {
padding-left: 0;
border-left: none;
flex-wrap: wrap;
}
}
/* Responsive: shrink and reposition the watermark on narrow viewports
so it stays a presence behind the text rather than dominating it. */
@media (max-width: 1100px) {
.hero-watermark {
width: 720px;
height: 720px;
right: -25%;
}
}
@media (max-width: 980px) {
.platform-hero {
padding-top: 70px;
padding-bottom: 80px;
min-height: 0;
}
.hero-watermark {
width: 640px;
height: 640px;
right: -35%;
top: 40px;
/* On narrow viewports the loop sits more behind/below the text
so it doesn't clash with the type. */
opacity: 0.7;
}
}
/* ==========================================================================
ORCHESTRATION SECTION — typographic intro + layered stack
--------------------------------------------------------------------------
Three horizontal layers, stacked vertically:
Top — Operator surfaces (Horizon, Tower, Hangar, Wingman)
Middle — X360 orchestration plane (the new layer — what we add)
Bottom — Your existing systems (chips: crew, MX, PSS, ACARS, ...)
Each row has a left-side label column and a right-side content
column. On narrow viewports the label collapses above the content.
========================================================================== */
.orchestration {
position: relative;
z-index: 1; /* sits over the watermark loop's bleed from the hero */
padding: 80px 48px 120px;
}
.orchestration-inner {
max-width: 1280px;
margin: 0 auto;
}
.orchestration-intro {
max-width: 820px;
margin-bottom: 64px;
}
.orchestration-intro .eyebrow {
margin-bottom: 18px;
}
/* The stack — three rows, vertical separation.
Each row uses a 2-column grid: label / content. */
.stack {
display: flex;
flex-direction: column;
gap: 14px; /* tight spacing — rows visually stack as one composition */
position: relative;
}
/* Connecting lines between layers (decorative). Shows data/decisions
flowing up and down through the orchestration plane. Drawn as
pseudo-elements on the middle row so they're contextual to the
stack and disappear cleanly on narrow viewports. */
.stack-plane::before,
.stack-plane::after {
content: "";
position: absolute;
left: calc(180px + 5%); /* skip past the label column */
right: 5%;
height: 14px;
pointer-events: none;
background-image:
repeating-linear-gradient(to right,
var(--border) 0,
var(--border) 2px,
transparent 2px,
transparent 12px);
opacity: 0.5;
}
.stack-plane::before { top: -14px; }
.stack-plane::after { bottom: -14px; }
/* Row layout — label on the left, content on the right. */
.stack-row {
display: grid;
grid-template-columns: 180px 1fr;
gap: 32px;
align-items: stretch;
padding: 28px 32px;
border: 1px solid var(--border);
border-radius: 14px;
position: relative;
}
/* Row label — small monospace eyebrow + larger row name. Vertically
centered. */
.stack-row-label {
display: flex;
flex-direction: column;
justify-content: center;
border-right: 1px solid var(--border);
padding-right: 28px;
}
/* Row label — small monospace eyebrow + larger row name + optional
sub-line. Vertically centered. */
.stack-row-eyebrow {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-faint);
margin-bottom: 6px;
display: block;
}
.stack-row-name {
font-family: 'Montserrat', sans-serif;
font-size: 17px;
font-weight: 600;
color: var(--text);
line-height: 1.25;
display: block;
}
.stack-row-sub {
font-size: 12px;
color: var(--text-muted);
margin-top: 6px;
display: block;
line-height: 1.4;
}
/* LAYER 03 — OUTPUT. Three tiles in a row, slightly higher
visual emphasis than systems below — these are what X360
produces, the "output" of the whole stack. */
.stack-output {
background: rgba(255, 255, 255, 0.018);
}
.stack-output-tiles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.stack-output-tile {
padding: 16px 18px;
border-radius: 10px;
border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.02);
}
.stack-out-name {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 15px;
color: var(--text);
margin-bottom: 4px;
}
.stack-out-desc {
font-size: 12px;
color: var(--text-muted);
line-height: 1.4;
}
/* LAYER 02 — STRATOSX CORE PLATFORM. The hero of the architecture.
Glass treatment + directional gradient. Now 4 components instead
of 3. */
.stack-plane {
background:
linear-gradient(135deg,
rgba(79, 180, 241, 0.06) 0%,
rgba(249, 153, 255, 0.04) 50%,
rgba(255, 199, 0, 0.04) 100%),
rgba(255, 255, 255, 0.02);
border-color: rgba(255, 255, 255, 0.12);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.04) inset,
0 0 60px -20px rgba(79, 180, 241, 0.15);
}
.stack-plane-body {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
align-items: start;
}
.stack-plane-fn {
padding: 4px 0;
}
.stack-plane-fn-name {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 15px;
color: var(--text);
margin-bottom: 6px;
background: linear-gradient(135deg, var(--blue) 0%, var(--pink) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.stack-plane-fn-desc {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.04em;
color: var(--text-muted);
line-height: 1.5;
}
/* INTEGRATION LAYER — the bridge. A slim row between layers 1
and 2. Distinctive treatment to read as "connective tissue" —
not a destination, just the path between source and engine. */
.stack-bridge {
display: grid;
grid-template-columns: 180px 1fr;
gap: 32px;
padding: 14px 32px;
align-items: center;
/* Slim, no border — it's a connector, not a container. The
pulse track gives it visual presence. */
margin: -2px 0;
}
.stack-bridge-label {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--blue);
text-align: right;
padding-right: 28px;
}
.stack-bridge-track {
position: relative;
height: 2px;
background: linear-gradient(to right,
transparent 0%,
rgba(79, 180, 241, 0.35) 15%,
rgba(249, 153, 255, 0.35) 50%,
rgba(79, 180, 241, 0.35) 85%,
transparent 100%);
border-radius: 2px;
overflow: hidden;
}
/* A subtle moving pulse along the bridge track — "data is flowing." */
.stack-bridge-pulse {
position: absolute;
top: 0; left: -20%;
width: 20%;
height: 100%;
background: linear-gradient(to right,
transparent 0%,
rgba(255, 255, 255, 0.7) 50%,
transparent 100%);
animation: bridge-pulse 4s ease-in-out infinite;
filter: blur(1px);
}
@keyframes bridge-pulse {
0% { left: -20%; }
100% { left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.stack-bridge-pulse { animation: none; }
}
/* LAYER 01 — AIRLINE SYSTEMS. Eight system tiles, each pairing a
system name with its protocol. Grid of 4 columns × 2 rows on
desktop. */
.stack-systems {
background: rgba(255, 255, 255, 0.01);
}
.stack-systems-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.stack-sys {
padding: 12px 14px;
border: 1px solid var(--border);
border-radius: 8px;
background: rgba(255, 255, 255, 0.015);
}
.stack-sys-name {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 13px;
color: var(--text);
margin-bottom: 3px;
line-height: 1.2;
}
.stack-sys-proto {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.05em;
color: var(--text-faint);
}
/* Responsive — collapse the label column above the content at
narrower widths. */
@media (max-width: 900px) {
.orchestration {
padding: 60px 24px 80px;
}
.orchestration-intro {
margin-bottom: 40px;
}
.stack-row {
grid-template-columns: 1fr;
gap: 16px;
padding: 22px 22px;
}
.stack-row-label {
border-right: none;
border-bottom: 1px solid var(--border);
padding-right: 0;
padding-bottom: 14px;
}
.stack-output-tiles {
grid-template-columns: 1fr;
}
.stack-plane-body {
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
.stack-systems-grid {
grid-template-columns: repeat(2, 1fr);
}
.stack-bridge {
grid-template-columns: 1fr;
gap: 12px;
padding: 14px 22px;
}
.stack-bridge-label {
text-align: left;
padding-right: 0;
}
.stack-plane::before,
.stack-plane::after {
display: none;
}
}
@media (max-width: 560px) {
.stack-plane-body {
grid-template-columns: 1fr;
}
.stack-systems-grid {
grid-template-columns: 1fr;
}
}
/* Mobile breakpoints for platform-page elements */
@media (max-width: 768px) {
.page-hero { padding: 70px 24px 40px; }
.platform-hero { padding: 70px 24px 100px; }
.hero-watermark {
width: 480px;
height: 480px;
right: -50%;
top: 80px;
opacity: 0.55;
}
}
/* ==========================================================================
/roi PAGE
--------------------------------------------------------------------------
All rules below are scoped to the /roi page. Nothing here should affect
the homepage, /platform, or /team. Class names are namespaced by
section (.roi-*, .cost-cliff-*, .metrics-*, .impact-*, .calc-*, .path-*).
========================================================================== */
/* ---------- HERO — the metrics gap ---------- */
.roi-hero {
position: relative;
z-index: 1;
padding: 80px 48px 48px;
}
.roi-hero-inner {
max-width: 1080px;
margin: 0 auto;
}
.roi-hero-h1 {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: clamp(40px, 5.4vw, 78px);
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--text);
margin: 18px 0 28px;
}
/* The two coloured spans: green-ish "good" (OTP) and red "bad" (cost). */
.roi-hero-good {
color: var(--sky);
font-style: normal;
}
.roi-hero-bad {
background: linear-gradient(135deg, #ff8888 0%, #cc2222 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-style: normal;
}
.roi-hero .lede {
max-width: 720px;
margin-bottom: 18px;
}
.roi-hero .lede + .lede {
margin-top: 0;
}
/* Jump-link strip under the hero. Reads as a TOC, not as buttons. */
.roi-hero-jumps {
display: flex;
flex-wrap: wrap;
gap: 18px 26px;
margin-top: 32px;
padding-top: 22px;
border-top: 1px solid var(--border);
}
.roi-jump {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
letter-spacing: 0.04em;
color: var(--text-muted);
text-decoration: none;
transition: color 0.2s ease;
}
.roi-jump:hover {
color: var(--blue);
}
/* ---------- COST CLIFF ---------- */
.cost-cliff {
position: relative;
z-index: 1;
padding: 60px 48px 80px;
}
.cost-cliff-inner {
max-width: 1080px;
margin: 0 auto;
}
.cost-cliff-intro {
max-width: 780px;
margin-bottom: 44px;
}
.cliff-vis {
background: rgba(255, 255, 255, 0.012);
border: 1px solid var(--border);
border-radius: 14px;
padding: 36px 32px 24px;
/* The SVG carries its own padding; this wrapper just frames it. */
}
.cliff-vis svg {
width: 100%;
height: auto;
/* Allow the threshold text above the top step to render outside
the viewBox without clipping. We give the SVG some headroom. */
overflow: visible;
}
/* SVG sub-elements — styled via class selectors so colours can
theme cleanly. */
.cliff-grid line {
stroke: rgba(255, 255, 255, 0.06);
stroke-dasharray: 3 5;
}
.cliff-baseline {
stroke: rgba(255, 255, 255, 0.2);
stroke-width: 1.5;
}
.cliff-y-tick text,
.cliff-x-tick text {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
fill: var(--text-muted);
}
.cliff-axis-title {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
fill: var(--text-faint);
}
.cliff-trigger text {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
letter-spacing: 0.05em;
fill: var(--text);
font-weight: 600;
}
.cliff-x360 line {
stroke: var(--blue);
opacity: 0.85;
}
.cliff-x360 rect {
fill: rgba(79, 180, 241, 0.18);
stroke: var(--blue);
stroke-width: 1;
}
.cliff-x360 text {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
fill: var(--blue);
font-weight: 600;
}
.cliff-caption {
margin-top: 22px;
max-width: 680px;
font-size: 14px;
line-height: 1.6;
color: var(--text-muted);
font-style: italic;
}
/* ---------- THREE METRICS ---------- */
.metrics {
position: relative;
z-index: 1;
padding: 60px 48px 80px;
}
.metrics-inner {
max-width: 1080px;
margin: 0 auto;
}
.metrics-intro {
max-width: 780px;
margin-bottom: 44px;
}
.metrics-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.metric-card {
position: relative;
padding: 32px 28px 30px;
border: 1px solid var(--border);
border-radius: 14px;
background: rgba(255, 255, 255, 0.012);
display: flex;
flex-direction: column;
gap: 8px;
transition: border-color 0.3s ease, background 0.3s ease;
}
.metric-card:hover {
background: rgba(255, 255, 255, 0.025);
}
.metric-tag {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-faint);
margin-bottom: 6px;
}
.metric-value {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: 64px;
line-height: 1;
letter-spacing: -0.03em;
background: linear-gradient(135deg, var(--blue) 0%, var(--pink) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 8px;
}
/* TPI text variant — narrower letters, a bit smaller so it doesn't
over-shout the numeric ones. */
.metric-value.tpi {
font-size: 52px;
letter-spacing: -0.02em;
}
.metric-name {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 20px;
letter-spacing: -0.01em;
color: var(--text);
margin: 0;
}
.metric-question {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 14px;
color: var(--text-muted);
font-style: italic;
margin: 0;
}
.metric-def {
font-size: 13.5px;
line-height: 1.55;
color: var(--text-muted);
margin: 6px 0 12px 0;
}
/* The example — visually quieter, sits at card foot. */
.metric-example {
margin-top: auto;
padding-top: 14px;
border-top: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 6px;
}
.metric-eg-label {
font-family: 'JetBrains Mono', monospace;
font-size: 9.5px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-faint);
}
.metric-eg-text {
font-size: 12.5px;
line-height: 1.5;
color: var(--text-muted);
font-style: italic;
}
/* Per-card colour accent on hover — each card glows in its own
distinguishing colour. */
.metric-prop:hover { border-color: rgba(163, 227, 254, 0.35); box-shadow: 0 0 40px -12px rgba(163, 227, 254, 0.20); }
.metric-yield:hover { border-color: rgba(249, 153, 255, 0.35); box-shadow: 0 0 40px -12px rgba(249, 153, 255, 0.22); }
.metric-tpi:hover { border-color: rgba(255, 199, 0, 0.30); box-shadow: 0 0 40px -12px rgba(255, 199, 0, 0.18); }
/* ---------- IMPACT AREAS ---------- */
.impact-areas {
position: relative;
z-index: 1;
padding: 60px 48px 80px;
}
.impact-areas-inner {
max-width: 1080px;
margin: 0 auto;
}
.impact-intro {
max-width: 780px;
margin-bottom: 44px;
}
.impact-rows {
display: flex;
flex-direction: column;
gap: 14px;
}
.impact-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
gap: 36px;
padding: 28px 32px;
border: 1px solid var(--border);
border-radius: 14px;
background: rgba(255, 255, 255, 0.012);
align-items: center;
}
.impact-row-head {
display: grid;
grid-template-columns: 56px 1fr;
grid-template-areas:
"num name"
"num desc";
gap: 4px 16px;
align-items: start;
}
.impact-row-num {
grid-area: num;
font-family: 'JetBrains Mono', monospace;
font-size: 36px;
font-weight: 600;
color: var(--text-faint);
line-height: 1;
}
.impact-row-name {
grid-area: name;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 19px;
letter-spacing: -0.01em;
color: var(--text);
margin: 0 0 6px 0;
}
.impact-row-desc {
grid-area: desc;
font-size: 13.5px;
line-height: 1.55;
color: var(--text-muted);
margin: 0;
}
/* Stats: before → after | savings */
.impact-row-stats {
display: grid;
grid-template-columns: 1fr auto 1fr 1fr;
gap: 14px;
align-items: center;
}
.impact-stat {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.impact-stat-label {
font-family: 'JetBrains Mono', monospace;
font-size: 9.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-faint);
}
.impact-stat-val {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 22px;
letter-spacing: -0.01em;
color: var(--text);
line-height: 1.1;
}
.impact-stat-before .impact-stat-val { color: rgba(255, 200, 200, 0.85); }
.impact-stat-after .impact-stat-val { color: var(--sky); }
.impact-stat-cap {
font-size: 11.5px;
line-height: 1.45;
color: var(--text-muted);
}
.impact-stat-arrow {
color: var(--text-faint);
font-size: 16px;
text-align: center;
}
.impact-stat-saving {
padding-left: 16px;
border-left: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 4px;
}
.impact-stat-saving-num {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: 26px;
letter-spacing: -0.02em;
background: linear-gradient(135deg, var(--blue) 0%, var(--pink) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
}
.impact-stat-saving-cap {
font-size: 11.5px;
line-height: 1.45;
color: var(--text-muted);
}
/* ---------- CALCULATOR ---------- */
.calculator {
position: relative;
z-index: 1;
padding: 60px 48px 80px;
background:
radial-gradient(ellipse at 50% 0%, rgba(79, 180, 241, 0.04) 0%, transparent 60%);
}
.calculator-inner {
max-width: 1080px;
margin: 0 auto;
}
.calc-intro {
max-width: 780px;
margin-bottom: 36px;
}
/* Two-column: inputs (left) + output funnel (right). */
.calc-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
gap: 20px;
margin-bottom: 24px;
}
/* Inputs panel. */
.calc-inputs {
padding: 28px;
border: 1px solid var(--border);
border-radius: 14px;
background: rgba(255, 255, 255, 0.018);
display: flex;
flex-direction: column;
gap: 18px;
}
.calc-inputs-head {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-faint);
margin-bottom: 4px;
}
.calc-input {
display: grid;
grid-template-columns: 130px 1fr auto;
align-items: center;
gap: 14px;
}
.calc-input label {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 13.5px;
color: var(--text);
}
.calc-input input,
.calc-input select {
width: 100%;
padding: 10px 12px;
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
color: var(--text);
background: rgba(0, 0, 0, 0.3);
border: 1px solid var(--border);
border-radius: 6px;
outline: none;
transition: border-color 0.2s ease, background 0.2s ease;
}
.calc-input input:focus,
.calc-input select:focus {
border-color: var(--blue);
background: rgba(0, 0, 0, 0.45);
}
.calc-input-unit {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--text-faint);
white-space: nowrap;
}
.calc-profile-desc {
margin-top: 8px;
padding-top: 16px;
border-top: 1px solid var(--border);
font-family: 'JetBrains Mono', monospace;
font-size: 11.5px;
line-height: 1.6;
color: var(--text-muted);
}
/* Output funnel. Three rows, each with label / value / progress bar.
The bar widths are absolute (representing the cascade: 100% / 60% / 9%
relative to total exposure); they shrink to make the relative scale
visible at a glance. */
.calc-output {
padding: 28px;
border: 1px solid var(--border);
border-radius: 14px;
background: rgba(255, 255, 255, 0.018);
display: flex;
flex-direction: column;
gap: 22px;
}
.calc-funnel {
display: flex;
flex-direction: column;
gap: 18px;
}
.calc-funnel-row {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
gap: 4px 16px;
align-items: baseline;
}
.calc-funnel-label {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 13.5px;
color: var(--text-muted);
}
.calc-funnel-pct {
font-family: 'JetBrains Mono', monospace;
font-weight: 400;
font-size: 11px;
color: var(--text-faint);
margin-left: 4px;
}
.calc-funnel-val {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: 30px;
letter-spacing: -0.02em;
line-height: 1;
color: var(--text);
}
.calc-funnel-bar {
grid-column: 1 / -1;
height: 4px;
border-radius: 2px;
margin-top: 4px;
}
.calc-bar-total { width: 100%; background: linear-gradient(90deg, rgba(255, 200, 200, 0.6) 0%, rgba(204, 34, 34, 0.6) 100%); }
.calc-bar-addr { width: 60%; background: linear-gradient(90deg, rgba(255, 153, 51, 0.6) 0%, rgba(255, 99, 99, 0.6) 100%); }
.calc-bar-savings { width: 9%; background: linear-gradient(90deg, var(--blue) 0%, var(--pink) 100%); }
/* Highlight the savings row. */
.calc-funnel-row-savings .calc-funnel-val {
background: linear-gradient(135deg, var(--blue) 0%, var(--pink) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 36px;
}
.calc-output-note {
font-size: 12.5px;
line-height: 1.55;
color: var(--text-muted);
margin: 0;
font-style: italic;
}
/* Calculation chain — the "show the calculation" reveal. */
.calc-chain {
margin-bottom: 24px;
}
.calc-chain summary {
list-style: none;
}
.calc-chain summary::-webkit-details-marker {
display: none;
}
.calc-chain-summary {
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 22px;
border: 1px solid var(--border);
border-radius: 10px;
background: rgba(255, 255, 255, 0.02);
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 13.5px;
color: var(--text);
transition: background 0.2s ease, border-color 0.2s ease;
}
.calc-chain-summary:hover {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(79, 180, 241, 0.4);
}
.calc-chain-icon {
display: inline-block;
width: 10px;
height: 10px;
border-right: 2px solid var(--text-muted);
border-bottom: 2px solid var(--text-muted);
transform: rotate(45deg) translate(-2px, -2px);
transition: transform 0.25s ease;
}
.calc-chain[open] .calc-chain-icon {
transform: rotate(-135deg) translate(-3px, -3px);
}
.calc-chain-body {
padding: 22px 24px;
border: 1px solid var(--border);
border-top: none;
border-radius: 0 0 10px 10px;
margin-top: -10px;
background: rgba(255, 255, 255, 0.012);
display: flex;
flex-direction: column;
gap: 10px;
}
.calc-chain-row {
display: grid;
grid-template-columns: 1.2fr 1.4fr auto;
gap: 18px;
align-items: baseline;
font-size: 13px;
padding: 6px 0;
}
.calc-chain-label {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
color: var(--text);
}
.calc-chain-formula {
font-family: 'JetBrains Mono', monospace;
font-size: 11.5px;
color: var(--text-faint);
}
.calc-chain-val {
font-family: 'JetBrains Mono', monospace;
font-weight: 600;
color: var(--text);
text-align: right;
}
.calc-chain-divider {
border-top: 1px dashed var(--border);
padding-top: 14px !important;
margin-top: 6px;
}
.calc-chain-final {
border-top: 1px solid var(--border);
padding-top: 14px !important;
margin-top: 6px;
}
.calc-chain-final .calc-chain-label,
.calc-chain-final .calc-chain-val {
font-weight: 700;
background: linear-gradient(135deg, var(--blue) 0%, var(--pink) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Cost component breakdown. */
.calc-breakdown {
padding: 24px 28px;
border: 1px solid var(--border);
border-radius: 14px;
background: rgba(255, 255, 255, 0.012);
}
.calc-breakdown-head {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 14px;
}
.calc-breakdown-title {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 15px;
color: var(--text);
}
.calc-breakdown-sub {
font-size: 12.5px;
color: var(--text-muted);
font-style: italic;
}
.calc-breakdown-bar {
display: flex;
height: 36px;
border-radius: 6px;
overflow: hidden;
margin-bottom: 14px;
}
.calc-seg {
display: flex;
align-items: center;
justify-content: center;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: rgba(0, 0, 0, 0.7);
font-weight: 600;
transition: width 0.4s ease;
white-space: nowrap;
overflow: hidden;
}
.calc-seg-fuel { background: #ffd166; }
.calc-seg-crew { background: #f99dc8; }
.calc-seg-maint { background: #88e0ef; }
.calc-seg-pax { background: #b8b3ff; }
.calc-seg-other { background: rgba(255, 255, 255, 0.18); color: var(--text-muted); }
.calc-breakdown-legend {
display: flex;
flex-wrap: wrap;
gap: 14px 22px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--text-muted);
}
.calc-legend-item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.calc-legend-swatch {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 2px;
}
/* ---------- ENGAGEMENT PATH (3 tiers) ---------- */
.path {
position: relative;
z-index: 1;
padding: 60px 48px 100px;
}
.path-inner {
max-width: 1080px;
margin: 0 auto;
}
.path-intro {
max-width: 780px;
margin-bottom: 44px;
}
.path-tiers {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.path-tier {
padding: 28px 28px 24px;
border: 1px solid var(--border);
border-radius: 14px;
background: rgba(255, 255, 255, 0.012);
display: flex;
flex-direction: column;
gap: 14px;
transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
.path-tier:hover {
background: rgba(255, 255, 255, 0.025);
border-color: rgba(79, 180, 241, 0.25);
}
.path-tier-tag {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-faint);
}
.path-tier-name {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: 28px;
letter-spacing: -0.02em;
color: var(--text);
margin: 0;
}
.path-tier-meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.path-tier-meta-item {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.04em;
color: var(--text-muted);
padding: 4px 9px;
border: 1px solid var(--border);
border-radius: 4px;
background: rgba(255, 255, 255, 0.015);
white-space: nowrap;
}
.path-tier-pitch {
font-size: 13.5px;
line-height: 1.6;
color: var(--text-muted);
margin: 0;
}
.path-tier-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.path-tier-list li {
font-size: 12.5px;
line-height: 1.5;
color: var(--text-muted);
padding-left: 18px;
position: relative;
}
.path-tier-list li::before {
content: "";
position: absolute;
left: 4px;
top: 7px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--text-faint);
}
.path-tier-foot {
margin-top: auto;
padding-top: 14px;
border-top: 1px solid var(--border);
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 12.5px;
font-style: italic;
color: var(--text-muted);
}
/* Recommended tier — visually emphasized. */
.path-tier-rec {
border-color: rgba(79, 180, 241, 0.4);
background:
linear-gradient(135deg, rgba(79, 180, 241, 0.06) 0%, rgba(249, 153, 255, 0.04) 100%),
rgba(255, 255, 255, 0.018);
box-shadow: 0 0 50px -10px rgba(79, 180, 241, 0.25);
}
.path-tier-rec .path-tier-tag {
background: linear-gradient(135deg, var(--blue) 0%, var(--pink) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.path-tier-rec .path-tier-name {
background: linear-gradient(135deg, var(--blue) 0%, var(--pink) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.path-tier-rec .path-tier-list li::before {
background: var(--blue);
}
/* Demo CTA at foot. Full button treatment — the nav .cta rule
is scoped to .site-nav only, so we restyle from scratch here. */
.path-demo {
margin-top: 40px;
text-align: center;
}
.path-demo .cta {
display: inline-block;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 16px;
color: #0a0e17;
text-decoration: none;
padding: 14px 32px;
border-radius: 100px;
background: linear-gradient(135deg, var(--blue) 0%, var(--pink-soft) 100%);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.path-demo .cta:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px -8px rgba(79, 180, 241, 0.5);
}
/* ==========================================================================
/roi RESPONSIVE
========================================================================== */
@media (max-width: 1100px) {
.metrics-grid { grid-template-columns: 1fr 1fr; }
.metrics-grid .metric-card:nth-child(3) { grid-column: span 2; }
.impact-row { grid-template-columns: 1fr; gap: 22px; }
.calc-grid { grid-template-columns: 1fr; }
.path-tiers { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.roi-hero,
.cost-cliff,
.metrics,
.impact-areas,
.calculator,
.path { padding-left: 24px; padding-right: 24px; }
.roi-hero { padding-top: 56px; }
.roi-hero-h1 { font-size: clamp(34px, 9vw, 50px); }
.roi-hero-jumps { gap: 12px 18px; }
.metrics-grid { grid-template-columns: 1fr; }
.metrics-grid .metric-card:nth-child(3) { grid-column: auto; }
.impact-row { padding: 22px 22px; }
.impact-row-stats { grid-template-columns: 1fr; gap: 18px; }
.impact-stat-arrow { display: none; }
.impact-stat-saving { padding-left: 0; padding-top: 14px; border-left: none; border-top: 1px solid var(--border); }
.calc-input { grid-template-columns: 1fr; gap: 6px; }
.calc-input-unit { display: none; }
.calc-funnel-row-savings .calc-funnel-val { font-size: 28px; }
.calc-chain-row { grid-template-columns: 1fr; gap: 2px; }
.calc-chain-formula { font-size: 11px; }
.calc-chain-val { text-align: left; }
.cliff-vis { padding: 22px 16px 16px; }
.cliff-trigger text { font-size: 9px; }
.path-tier-name { font-size: 22px; }
}
/* ==========================================================================
/roi PAGE — v2 additions (2026-05-01)
--------------------------------------------------------------------------
New sections after the v2 holistic rebuild:
- .metrics-gap (in-hero "Dashboard vs Reality" block)
- .assumptions (methodology cards)
- .talk (single contact CTA replacing the old three-tier path)
Also note: the ROI page no longer renders .cost-cliff-*, .cliff-*,
.impact-areas, .impact-row*, .path-tier*, or .path-demo classes —
the corresponding sections were removed. The CSS rules above remain
in place but are unused by /roi.html. Safe to keep (they don't
collide with anything else); remove later when convenient.
========================================================================== */
/* ---------- HERO METRICS GAP — Dashboard vs Reality ---------- */
/* Two-column block beneath the hero h1+lede. Left col: dashboard
numbers (looks fine, neutral/positive treatment). Right col:
reality numbers (the cost it hides, brand-red treatment). A "vs"
divider sits between them. The block makes the metrics gap
geometric — the reader sees the contradiction before reading it. */
.metrics-gap {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 24px;
margin: 36px 0 24px 0;
align-items: stretch;
}
.gap-col {
padding: 24px 28px 28px;
border: 1px solid var(--border);
border-radius: 14px;
background: rgba(255, 255, 255, 0.012);
display: flex;
flex-direction: column;
gap: 14px;
}
.gap-col-label {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-faint);
margin-bottom: 4px;
}
.gap-stat {
display: flex;
flex-direction: column;
gap: 2px;
}
.gap-stat-num {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 38px;
line-height: 1;
letter-spacing: -0.02em;
display: flex;
align-items: baseline;
}
.gap-stat-unit {
font-size: 22px;
font-weight: 600;
margin-left: 1px;
}
.gap-stat-plus {
font-size: 24px;
font-weight: 600;
margin-left: 2px;
}
/* Dashboard col: the numbers look fine. Sky/blue treatment so they
read as "passing", not concerning. */
.gap-stat-good {
background: linear-gradient(135deg, var(--sky) 0%, var(--blue-soft) 70%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Reality col: the cost it hides. Red gradient using the same
color the hero h1's $61M uses, so the page's "cost = red"
convention is consistent. */
.gap-stat-bad {
background: linear-gradient(135deg, #ff6363 0%, #cc2222 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.gap-stat-name {
font-size: 13px;
color: var(--text-muted);
line-height: 1.4;
}
.gap-col-foot {
margin-top: auto;
padding-top: 14px;
border-top: 1px solid var(--border);
font-size: 12.5px;
font-style: italic;
color: var(--text-faint);
}
.gap-reality .gap-col-foot {
color: var(--text-muted);
}
/* The "vs" divider in the middle. Just a small mono label
between the two columns. */
.gap-divider {
align-self: center;
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
color: var(--text-faint);
letter-spacing: 0.2em;
text-transform: uppercase;
padding: 0 4px;
}
/* The reality column gets a subtle warm tint to set it apart
visually — makes the "gap" feel like two different worlds,
not just two card variants. */
.gap-reality {
background:
linear-gradient(135deg,
rgba(204, 34, 34, 0.05) 0%,
rgba(255, 99, 99, 0.02) 100%),
rgba(255, 255, 255, 0.012);
border-color: rgba(204, 34, 34, 0.18);
}
/* ---------- ASSUMPTIONS — methodology cards ---------- */
/* Three-card row beneath the calculator. Small, factual,
trust-building. Each card takes one assumption (rates,
addressable %, savings %) and explains it in 3-4 lines. */
.assumptions {
position: relative;
z-index: 1;
padding: 80px 48px 60px;
}
.assumptions-inner {
max-width: 1180px;
margin: 0 auto;
}
.assumptions-intro {
max-width: 720px;
margin-bottom: 36px;
}
.assumptions-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.assumption-card {
padding: 24px 24px 22px;
border: 1px solid var(--border);
border-radius: 12px;
background: rgba(255, 255, 255, 0.012);
display: flex;
flex-direction: column;
gap: 10px;
}
.assumption-num {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-faint);
}
.assumption-name {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 19px;
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--text);
margin: 0;
}
.assumption-body {
font-size: 13.5px;
line-height: 1.6;
color: var(--text-muted);
margin: 0;
}
.assumption-foot {
margin-top: auto;
padding-top: 14px;
border-top: 1px solid var(--border);
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.05em;
color: var(--text-faint);
}
/* ---------- TALK — single contact CTA ---------- */
/* Replaces the old three-tier path section. One block, centered,
with a short framing line, mailto button, and a tiny foot note
with the email + city. */
.talk {
position: relative;
z-index: 1;
padding: 60px 48px 100px;
}
.talk-inner {
max-width: 760px;
margin: 0 auto;
text-align: center;
padding: 56px 48px 48px;
border: 1px solid var(--border);
border-radius: 18px;
background:
linear-gradient(135deg,
rgba(79, 180, 241, 0.05) 0%,
rgba(249, 153, 255, 0.04) 100%),
rgba(255, 255, 255, 0.018);
}
.talk-h2 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 32px;
letter-spacing: -0.02em;
line-height: 1.2;
color: var(--text);
margin: 14px 0 18px 0;
}
.talk-h2 em {
font-style: italic;
background: linear-gradient(135deg, var(--blue) 0%, var(--pink) 70%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
}
.talk-body {
font-size: 15px;
line-height: 1.65;
color: var(--text-muted);
margin: 0 auto 28px auto;
max-width: 560px;
}
.talk-cta {
/* Full button treatment. The bare .cta class has no standalone
styling in site.css (it's scoped to .site-nav and .path-demo
elsewhere), so we restyle from scratch here. Same gradient
pill pattern used by the path-demo button so all CTAs across
the site read consistently. */
display: inline-block;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 15px;
color: #0a0e17;
text-decoration: none;
padding: 14px 32px;
border-radius: 100px;
background: linear-gradient(135deg, var(--blue) 0%, var(--pink-soft) 100%);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.talk-cta:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px -8px rgba(79, 180, 241, 0.5);
}
.talk-foot {
margin: 22px 0 0 0;
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
color: var(--text-faint);
letter-spacing: 0.06em;
}
/* ---------- /roi v2 additions — responsive ---------- */
@media (max-width: 1000px) {
.metrics-gap {
grid-template-columns: 1fr;
gap: 14px;
}
.gap-divider {
padding: 4px 0;
}
.assumptions-grid {
grid-template-columns: 1fr;
gap: 14px;
}
}
@media (max-width: 720px) {
.gap-stat-num { font-size: 32px; }
.gap-stat-unit { font-size: 19px; }
.gap-col { padding: 20px 22px 22px; }
.assumptions { padding: 60px 24px 40px; }
.talk { padding: 40px 24px 80px; }
.talk-inner { padding: 40px 24px 32px; }
.talk-h2 { font-size: 25px; }
}
/* ==========================================================================
/roi PAGE — v3 additions (Cost-Aware Recovery + Cost Wizard + Path to X360)
--------------------------------------------------------------------------
Three additions in this pass:
- .cost-aware (Hard costs / Soft costs split inside calculator)
- .cost-wizard (one-paragraph callout in methodology section)
- .path-x360 (3-step engagement flow between methodology and talk)
========================================================================== */
/* ---------- Cost-Aware Recovery — Hard costs vs Soft costs ---------- */
/* Lives inside the calculator section, after the cost-component bar.
Two-column block with three named line items per side and a
per-column note. Frame line on top establishes the thesis (most
OCCs see cost only in the monthly report); foot note ties the
block back to the calculator's number. */
.cost-aware {
margin-top: 36px;
padding: 28px 32px 30px;
border: 1px solid var(--border);
border-radius: 14px;
background: rgba(255, 255, 255, 0.012);
}
.cost-aware-head {
margin-bottom: 26px;
}
.cost-aware-head .eyebrow {
margin-bottom: 10px;
}
.cost-aware-title {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 22px;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--text);
margin: 0 0 12px 0;
max-width: 760px;
}
.cost-aware-title em {
font-style: italic;
background: linear-gradient(135deg, var(--blue) 0%, var(--pink) 70%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
}
.cost-aware-lede {
font-size: 14px;
line-height: 1.6;
color: var(--text-muted);
margin: 0;
max-width: 720px;
}
.cost-aware-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin-bottom: 22px;
}
.cost-aware-col {
padding: 22px 22px 22px;
border: 1px solid var(--border);
border-radius: 10px;
background: rgba(255, 255, 255, 0.02);
}
/* Hard costs col — slight red accent (matches the page's "cost = red"
convention in the hero metrics-gap). */
.cost-aware-hard {
border-color: rgba(204, 34, 34, 0.18);
background:
linear-gradient(135deg,
rgba(204, 34, 34, 0.04) 0%,
rgba(255, 99, 99, 0.02) 100%),
rgba(255, 255, 255, 0.012);
}
/* Soft costs col — blue accent. Soft = downstream/brand, less acute,
cooler color. */
.cost-aware-soft {
border-color: rgba(79, 180, 241, 0.18);
background:
linear-gradient(135deg,
rgba(79, 180, 241, 0.04) 0%,
rgba(163, 227, 254, 0.02) 100%),
rgba(255, 255, 255, 0.012);
}
.cost-aware-col-head {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 16px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border);
}
.cost-aware-col-tag {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-faint);
}
.cost-aware-col-name {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 17px;
letter-spacing: -0.01em;
color: var(--text);
}
.cost-aware-list {
list-style: none;
margin: 0 0 14px 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.cost-aware-list li {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
font-size: 14px;
}
.cost-aware-item {
color: var(--text-muted);
}
.cost-aware-range {
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
color: var(--text);
font-weight: 500;
white-space: nowrap;
}
.cost-aware-hard .cost-aware-range {
color: #ff6363;
}
.cost-aware-note {
font-size: 12.5px;
line-height: 1.55;
color: var(--text-faint);
margin: 0;
padding-top: 12px;
border-top: 1px solid var(--border);
font-style: italic;
}
.cost-aware-foot {
font-size: 13px;
line-height: 1.6;
color: var(--text-muted);
margin: 0;
padding-top: 18px;
border-top: 1px solid var(--border);
}
/* ---------- Cost Wizard — one-paragraph callout ---------- */
/* Lives at the bottom of the methodology section, after the three
assumption cards. Single panel, low-key visual, just enough to
signal "and here's how the calculator's benchmarks become your
actual numbers when we deploy." Not a feature page. */
.cost-wizard {
margin-top: 24px;
padding: 22px 26px 24px;
border: 1px solid var(--border);
border-radius: 12px;
background: rgba(255, 255, 255, 0.012);
display: flex;
flex-direction: column;
gap: 10px;
}
.cost-wizard-head {
display: flex;
align-items: baseline;
gap: 14px;
flex-wrap: wrap;
}
.cost-wizard-tag {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-faint);
}
.cost-wizard-name {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 17px;
letter-spacing: -0.01em;
background: linear-gradient(135deg, var(--blue) 0%, var(--pink-soft) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.cost-wizard-body {
font-size: 14px;
line-height: 1.65;
color: var(--text-muted);
margin: 0;
max-width: 760px;
}
/* ---------- Your Path to X360 — 3-step flow ---------- */
/* Same horizontal-flow pattern as /platform's .stack-fit-flow.
Three step nodes + two arrows. Collapses vertically on narrow
viewports with arrows rotated 90deg. */
.path-x360 {
position: relative;
z-index: 1;
padding: 60px 48px 60px;
}
.path-x360-inner {
max-width: 1180px;
margin: 0 auto;
}
.path-x360-intro {
max-width: 720px;
margin-bottom: 40px;
}
.path-x360-steps {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
gap: 0;
align-items: stretch;
margin-bottom: 28px;
}
.path-x360-step {
padding: 24px 26px 26px;
border: 1px solid var(--border);
border-radius: 12px;
background: rgba(255, 255, 255, 0.012);
display: flex;
flex-direction: column;
gap: 10px;
}
.path-x360-step-num {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.22em;
color: var(--text-faint);
margin-bottom: 4px;
}
.path-x360-step-name {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 22px;
line-height: 1.2;
letter-spacing: -0.015em;
color: var(--text);
}
.path-x360-step-meta {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.06em;
color: var(--blue);
padding: 4px 10px;
border: 1px solid rgba(79, 180, 241, 0.25);
border-radius: 100px;
align-self: flex-start;
}
.path-x360-step-body {
font-size: 13.5px;
line-height: 1.6;
color: var(--text-muted);
margin: 6px 0 0 0;
}
.path-x360-arrow {
display: flex;
align-items: center;
justify-content: center;
padding: 0 14px;
color: var(--text-faint);
}
.path-x360-foot {
font-size: 13px;
line-height: 1.65;
color: var(--text-muted);
margin: 0;
padding: 18px 22px;
border: 1px solid var(--border);
border-radius: 10px;
background: rgba(255, 255, 255, 0.012);
}
.path-x360-foot-mode {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
font-weight: 500;
color: var(--text);
letter-spacing: 0.04em;
}
/* ---------- /roi v3 responsive ---------- */
@media (max-width: 1000px) {
.cost-aware-cols {
grid-template-columns: 1fr;
}
.path-x360-steps {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto auto auto;
gap: 0;
}
.path-x360-arrow {
padding: 14px 0;
transform: rotate(90deg);
}
}
@media (max-width: 720px) {
.cost-aware {
padding: 22px 20px 24px;
}
.cost-aware-title {
font-size: 19px;
}
.cost-aware-col {
padding: 18px 18px 18px;
}
.cost-wizard {
padding: 20px 22px;
}
.path-x360 {
padding: 40px 24px 50px;
}
.path-x360-step {
padding: 22px 22px 22px;
}
.path-x360-step-name {
font-size: 20px;
}
}
/* ==========================================================================
/roi PAGE — v4 additions (Show-Me CTA + standalone Cost Wizard)
--------------------------------------------------------------------------
Methodology section was cut in v4 (its content was redundant with the
calculator's inline methodology + the Cost Wizard callout). The Cost
Wizard now lives as a standalone panel after the calculator. A new
bright-pink "Show me" CTA bubble sits between calculator and Cost
Wizard.
Note: .assumptions, .assumption-card etc rules above are now orphaned
(no markup uses them). Safe to leave; remove later when convenient.
========================================================================== */
/* ---------- Show-me CTA bubble ---------- */
/* Bright solid pink. Deliberately bolder than the standard blue→pink
gradient .cta buttons — this CTA is the "see it in motion" offer
and should pop more than ambient site CTAs. */
.show-me {
position: relative;
z-index: 1;
padding: 24px 48px 28px;
}
.show-me-inner {
max-width: 1180px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
padding: 28px 36px 28px 40px;
border-radius: 18px;
/* Subtle pink-tinted glass card to host the bright button —
gives the CTA a color-coordinated background without making
the whole page suddenly pink. */
background:
linear-gradient(135deg,
rgba(249, 153, 255, 0.10) 0%,
rgba(249, 153, 255, 0.04) 100%),
rgba(255, 255, 255, 0.018);
border: 1px solid rgba(249, 153, 255, 0.22);
box-shadow: 0 0 60px -20px rgba(249, 153, 255, 0.18);
}
.show-me-line {
margin: 0;
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
max-width: 720px;
}
.show-me-lead {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 19px;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--text);
}
.show-me-sub {
font-size: 14px;
line-height: 1.5;
color: var(--text-muted);
}
.show-me-sub em {
font-style: italic;
}
/* Bright pink solid button. Uses --pink direct (not gradient) so it
reads as a deliberate, distinct CTA rather than another gradient
variant. Dark text on bright pink for contrast. */
.show-me-cta {
display: inline-block;
flex-shrink: 0;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 15px;
color: #0a0e17;
text-decoration: none;
padding: 14px 32px;
border-radius: 100px;
background: var(--pink);
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
box-shadow: 0 4px 20px -6px rgba(249, 153, 255, 0.5);
}
.show-me-cta:hover {
transform: translateY(-2px);
background: #fbb3ff; /* slightly brighter on hover */
box-shadow: 0 8px 28px -6px rgba(249, 153, 255, 0.7);
}
/* ---------- Cost Wizard — standalone wrapper ---------- */
/* The .cost-wizard inner rules above already define the panel
styling. This section just adds the standalone padding now
that it's no longer nested in a section. */
.cost-wizard-section {
position: relative;
z-index: 1;
padding: 16px 48px 40px;
}
.cost-wizard-section .cost-wizard {
max-width: 1180px;
margin: 0 auto;
}
/* ---------- /roi v4 responsive ---------- */
@media (max-width: 900px) {
.show-me-inner {
flex-direction: column;
align-items: flex-start;
gap: 20px;
padding: 24px 22px 24px;
}
.show-me-cta {
align-self: stretch;
text-align: center;
}
.show-me-lead {
font-size: 17px;
}
}
@media (max-width: 720px) {
.show-me {
padding: 16px 24px 24px;
}
.cost-wizard-section {
padding: 8px 24px 32px;
}
}
/* ==========================================================================
/roi PAGE — v5 additions (calculator disclaimer)
--------------------------------------------------------------------------
Cost-aware (hard/soft) section was cut in v5. Couldn't honestly defend
a 3-and-3 list as a full taxonomy of disruption costs, and the costs
we'd defend (the ones X360 actually moves) were already implicit in
the calculator's cost-component breakdown and in the three metrics
section.
In its place: .calc-note. A small disclaimer block at the foot of the
calculator section. Methodological honesty: the calculator is a
directional guide; onboarding calibrates the model to your numbers.
Note: .cost-aware* CSS rules above are now orphaned. Safe; flagged
for cleanup.
========================================================================== */
/* ---------- Calculator disclaimer / methodological note ---------- */
.calc-note {
margin-top: 36px;
padding: 22px 26px 24px;
border: 1px solid var(--border);
border-left: 3px solid rgba(79, 180, 241, 0.45); /* subtle sky-blue accent */
border-radius: 10px;
background: rgba(255, 255, 255, 0.012);
}
.calc-note-tag {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-faint);
margin-bottom: 12px;
}
.calc-note-body {
font-size: 13.5px;
line-height: 1.65;
color: var(--text-muted);
margin: 0 0 12px 0;
max-width: 880px;
}
.calc-note-body:last-child {
margin-bottom: 0;
}
@media (max-width: 720px) {
.calc-note {
padding: 18px 20px 20px;
}
.calc-note-body {
font-size: 13px;
}
}
/* ==========================================================================
/roi PAGE — v6 additions (Cost Wizard graphic, reframed toggle)
--------------------------------------------------------------------------
The Cost Wizard panel now carries a visual: a single blended industry
number on the left (the calculator's $103/min default) fans out into a
4-row × 4-cell grid of granular calibrated rates. The "Show X360 reach"
toggle dims STRUCTURAL cells (Captain salary, Fuel, Maint, etc.) when ON,
leaving recoverable cells sharp. This visually communicates what X360
can and can't move, without claiming rate cuts on cells where the real
mechanic is incidence reduction.
Pattern reused from the standalone preview (cost-wizard-preview.html);
namespaces with cw- prefix to avoid colliding with any future class.
v7: toggle removed — the section is now a static blended-vs-granular
visual. Toggle/state/footnote rules cleaned out.
========================================================================== */
/* Main graphic — 2-column: blended hero | granular grid, with an
absolutely-positioned SVG fan bridging them visually. */
.cw-graphic {
display: grid;
grid-template-columns: 240px 1fr;
gap: clamp(40px, 5vw, 72px);
align-items: stretch;
position: relative;
margin: 0 auto;
max-width: 1180px;
}
.cw-fan {
position: absolute;
top: 0;
bottom: 0;
left: 240px;
width: clamp(40px, 5vw, 72px);
pointer-events: none;
overflow: visible;
}
/* LEFT — blended industry-average hero. Dashed border because it's a
placeholder for "what the rest of the world gives you." */
.cw-blended {
background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012));
border: 1px dashed rgba(141, 200, 232, 0.35);
border-radius: 16px;
padding: 28px 24px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 14px;
backdrop-filter: blur(8px);
position: relative;
}
.cw-blended-tag {
font-family: 'JetBrains Mono', monospace;
align-self: flex-start;
padding: 4px 10px;
border-radius: 999px;
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
background: rgba(141, 200, 232, 0.10);
color: var(--blue-soft);
border: 1px solid rgba(141, 200, 232, 0.25);
}
.cw-blended-label {
font-size: 13px;
font-weight: 500;
color: var(--text-muted);
margin: 0;
letter-spacing: 0.01em;
}
.cw-blended-value {
font-family: 'Montserrat', sans-serif;
font-size: clamp(48px, 6vw, 68px);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 0.95;
background: linear-gradient(135deg, var(--blue-soft) 0%, var(--text-faint) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-feature-settings: "tnum";
}
.cw-blended-unit {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--text-faint);
letter-spacing: 0.06em;
margin-top: 4px;
}
/* RIGHT — 4×6 grid (label · 4 cells · extension hint). */
.cw-grid {
display: grid;
grid-template-columns: 96px repeat(4, 1fr) 56px;
grid-template-rows: repeat(4, 1fr);
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
border-radius: 16px;
overflow: hidden;
backdrop-filter: blur(8px);
}
.cw-row-label {
background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
padding: 12px 14px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
}
.cw-row-eyebrow {
font-family: 'JetBrains Mono', monospace;
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.cw-row-label.is-blue .cw-row-eyebrow { color: var(--blue); }
.cw-row-label.is-pink .cw-row-eyebrow { color: var(--pink); }
.cw-row-label.is-sky .cw-row-eyebrow { color: var(--sky); }
.cw-row-label.is-yellow .cw-row-eyebrow { color: var(--yellow); }
.cw-cell {
background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012));
padding: 12px 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 6px;
transition: opacity 0.4s ease, background 0.4s ease;
position: relative;
min-height: 78px;
}
.cw-cell-label {
font-size: 11px;
color: var(--text-muted);
line-height: 1.25;
font-weight: 400;
transition: color 0.4s ease, text-decoration-color 0.4s ease;
}
.cw-cell-value {
font-family: 'Montserrat', sans-serif;
font-size: 22px;
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1;
color: var(--text);
font-feature-settings: "tnum";
display: flex;
align-items: baseline;
gap: 4px;
transition: color 0.4s ease, text-decoration-color 0.4s ease;
}
.cw-cell-unit {
font-family: 'JetBrains Mono', monospace;
font-size: 9.5px;
color: var(--text-faint);
letter-spacing: 0.04em;
font-weight: 400;
text-transform: lowercase;
}
.cw-cell.is-blue .cw-cell-value { color: var(--blue); }
.cw-cell.is-pink .cw-cell-value { color: var(--pink); }
.cw-cell.is-sky .cw-cell-value { color: var(--sky); }
.cw-cell.is-yellow .cw-cell-value { color: var(--yellow); }
/* SCOREBOARD ROLL — when a cell's number gets nudged by the
ambient script, it animates as a two-phase roll:
Phase 1 (out): translates up (if value rose) or down (if value
dropped), fades to 0 — over 300ms.
Phase 2 (in): text content swaps invisibly, element snaps to
the opposite off-screen position, then rolls
back to (0, full opacity) — over 350ms.
The .cw-cell-value parent is overflow:hidden so the rolling text
gets clipped at the value-row boundary instead of bleeding into
adjacent cells. The .cw-cell-num span is what actually animates;
the unit suffix (/hr, /pax, etc.) sits next to it and stays put.
Direction reads as a flight info board: rates going up scroll
upward, rates going down scroll downward. */
.cw-cell-value {
position: relative;
/* Clip rolling values at the value-row boundary so the outgoing
text fades cleanly out the top/bottom. */
overflow: hidden;
padding: 1px 0;
}
.cw-cell-num {
display: inline-block;
font-feature-settings: "tnum";
/* Will-change hints to the browser that this element animates,
so it gets its own compositing layer. */
will-change: transform, opacity;
}
.cw-roll-out-up {
animation: cw-roll-out-up 0.30s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}
.cw-roll-out-down {
animation: cw-roll-out-down 0.30s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}
.cw-roll-in-up {
animation: cw-roll-in-up 0.35s cubic-bezier(0.2, 0, 0.2, 1);
}
.cw-roll-in-down {
animation: cw-roll-in-down 0.35s cubic-bezier(0.2, 0, 0.2, 1);
}
@keyframes cw-roll-out-up {
from { transform: translateY(0); opacity: 1; }
to { transform: translateY(-110%); opacity: 0; }
}
@keyframes cw-roll-out-down {
from { transform: translateY(0); opacity: 1; }
to { transform: translateY(110%); opacity: 0; }
}
@keyframes cw-roll-in-up {
from { transform: translateY(110%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes cw-roll-in-down {
from { transform: translateY(-110%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* Extension hint cells — last column, suggests "more fields under here." */
.cw-ext {
background: linear-gradient(160deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
color: var(--text-faint);
}
.cw-ext-plus {
font-family: 'JetBrains Mono', monospace;
font-size: 18px;
font-weight: 400;
line-height: 1;
color: var(--text-faint);
letter-spacing: 0.05em;
}
.cw-ext-count {
font-family: 'JetBrains Mono', monospace;
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-faint);
line-height: 1;
}
/* ---------- /roi v6 responsive ---------- */
@media (max-width: 880px) {
.cw-graphic {
grid-template-columns: 1fr;
gap: 20px;
}
.cw-fan { display: none; }
.cw-grid {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.cw-row-label { padding: 8px 14px; }
.cw-cell {
min-height: auto;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.cw-ext {
flex-direction: row;
gap: 8px;
padding: 8px 14px;
}
}
@media (max-width: 520px) {
.cw-blended-value { font-size: 44px; }
.cw-cell-value { font-size: 20px; }
}