/* ═══════════════════════════════════════════════════════════════════════════
Kwintely Intelligence — Main Stylesheet
Dark engineering aesthetic. Precision over decoration.
═══════════════════════════════════════════════════════════════════════════ */
/* ── Variables ──────────────────────────────────────────────────────────── */
:root {
--bg: #0a0f1e;
--surface: #111827;
--surface-2: #1a2436;
--border: #1f2d45;
--border-2: #111827;
--accent: #2563eb;
--accent-h: #1d4ed8;
--accent-glow: rgba(37,99,235,.3);
--purple: #7c3aed;
--purple-muted:rgba(124,58,237,.15);
--positive: #10b981;
--warn: #f59e0b;
--text: #f0f6ff;
--text-muted: #8ba3c4;
--text-subtle: #4a6080;
--font: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--mono: 'Geist Mono', ui-monospace, 'Cascadia Code', monospace;
--max-w: 1200px;
--r: 10px;
--r-lg: 18px;
--r-xl: 24px;
--sh: 0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
--sh-md: 0 8px 32px rgba(0,0,0,.5);
--sh-lg: 0 20px 60px rgba(0,0,0,.6);
--sh-glow: 0 0 0 3px var(--accent-glow);
--gradient: linear-gradient(135deg, var(--accent), var(--purple));
--gradient-text: linear-gradient(135deg, #60a5fa, #a78bfa);
--noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
/* Clip (not hidden) is preferred — `clip` prevents horizontal scroll
without establishing a scroll container. `hidden` on body alone is
not enough because the scroll context lives on . */
overflow-x: clip;
}
body {
font-family: var(--font);
background: var(--bg);
color: var(--text);
line-height: 1.65;
min-height: 100vh;
display: flex;
flex-direction: column;
-webkit-font-smoothing: antialiased;
overflow-x: clip;
}
/* Long-word safety net: long mono words like "Braunschweig" or
"Universitätsmedizin" won't push the viewport wider on small phones. */
h1, h2, h3, p { overflow-wrap: break-word; word-break: normal; }
main { flex: 1; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }
/* ── Layout ─────────────────────────────────────────────────────────────── */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem; }
/* Mobile-first vertical rhythm. Each section grows roomier as the viewport
widens: 4rem on phones (the fold is precious), 5rem on tablets, 6rem on
desktop. Sections that need a different rhythm (hero, anchor) override
below — but most sections inherit this scale. */
section { padding: 4rem 0; }
@media (min-width: 641px) { section { padding: 5rem 0; } }
@media (min-width: 1025px) { section { padding: 6rem 0; } }
.section-tag {
display: inline-block;
font-size: .75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--accent);
margin-bottom: 1rem;
background: rgba(37,99,235,.1);
border: 1px solid rgba(37,99,235,.2);
border-radius: 999px;
padding: .25rem .875rem;
}
.section-title {
font-family: var(--mono);
font-size: clamp(1.5rem, 2.6vw, 2.125rem);
font-weight: 500;
letter-spacing: -.04em; /* mono is wide by default — tighten aggressively */
line-height: 1.15;
margin-bottom: .75rem;
}
.section-sub {
font-size: clamp(.95rem, 1.1vw + .55rem, 1.0625rem);
color: var(--text-muted);
max-width: 580px;
line-height: 1.7;
}
/* Mobile-first: tighter header → grid spacing on phones, looser on desktop. */
.section-header { margin-bottom: 2.5rem; }
@media (min-width: 641px) { .section-header { margin-bottom: 3rem; } }
@media (min-width: 1025px) { .section-header { margin-bottom: 3.5rem; } }
.section-header.centered { text-align: center; }
.section-header.centered .section-sub { margin: 0 auto; }
.divider { border: none; border-top: 1px solid var(--border); }
/* ── Nav ────────────────────────────────────────────────────────────────── */
.site-header {
background: rgba(10,15,30,.92);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid transparent;
background-clip: padding-box;
box-shadow: 0 1px 0 0 rgba(255,255,255,.05), 0 4px 24px rgba(0,0,0,.4);
padding: .875rem 0;
position: sticky;
top: 0;
z-index: 200;
}
.nav { display: flex; justify-content: space-between; align-items: center; gap: 2rem; }
.nav-logo {
display: flex;
align-items: center;
gap: .5rem;
color: #fff;
font-size: 1.125rem;
font-weight: 800;
letter-spacing: -.03em;
white-space: nowrap;
/* Negative margin cancels the internal whitespace on the left edge of the
Kwintely wordmark SVG so the visible "K" lines up with the left edge of
body text inside .container. */
margin-left: -14px;
}
.nav-logo:hover { text-decoration: none; opacity: .9; }
.nav-logo-wordmark {
height: 56px;
width: auto;
flex-shrink: 0;
display: block;
}
.nav-links {
display: flex;
align-items: center;
flex: 1;
/* Distribute the 3 dropdown triggers evenly across the middle band of the
nav: equal gaps before, between, and after each item. With only 3 items,
`space-evenly` gives a balanced rhythm that fills the negative space
between the logo and the CTA buttons. `gap` removed so it doesn't
stack with the space-evenly distribution. */
justify-content: space-evenly;
}
.nav-links > li { position: relative; }
.nav-links > li > a {
display: block;
padding: .5rem .75rem;
color: var(--text-muted);
font-size: .9rem;
font-weight: 500;
border-radius: 6px;
transition: color .15s, background .15s;
white-space: nowrap;
}
.nav-links > li > a:hover { color: var(--text); background: var(--surface); text-decoration: none; }
.nav-links > li > a.active { color: var(--text); }
/* Active-section indicator — highlights the dropdown trigger that contains
the current URL. Brighter text + a 2px accent underline beneath the link.
The chevron `::after` is on the link, so the underline lives on `::before`
so they don't collide. */
.nav-links > li.is-active > a {
color: var(--text);
position: relative;
}
.nav-links > li.is-active > a::before {
content: '';
position: absolute;
left: .75rem;
right: .75rem;
bottom: .15rem;
height: 2px;
background: var(--accent);
border-radius: 2px;
pointer-events: none;
}
/* Has-dropdown chevron — Lucide-style 2-stroke V rendered via CSS mask so
it inherits text color, scales crisply at any DPR, and doesn't depend on
the system unicode glyph. Rotates 180° on hover/focus-within. */
.nav-links .has-dropdown > a::after {
content: '';
display: inline-block;
width: 14px;
height: 14px;
margin-left: .35rem;
vertical-align: -2px;
background-color: currentColor;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
opacity: .7;
transform-origin: center;
transition: transform .2s, opacity .15s;
}
.nav-links .has-dropdown:hover > a::after,
.nav-links .has-dropdown:focus-within > a::after {
transform: rotate(180deg);
opacity: 1;
}
/* Dropdown */
.nav-dropdown {
position: absolute;
top: calc(100% + .5rem);
left: 0;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
padding: .5rem;
min-width: 220px;
box-shadow: var(--sh-md);
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity .15s, transform .15s, visibility .15s;
z-index: 300;
}
.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-dropdown a {
display: block;
padding: .5rem .875rem;
font-size: .875rem;
color: var(--text-muted);
border-radius: 6px;
transition: color .1s, background .1s;
}
.nav-dropdown a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
/* Industries dropdown — rows get a mini periodic cell coloured by the
industry's own accent, plus a hover state that reveals the accent tint. */
.nav-dropdown-industries { min-width: 240px; }
.nav-industry {
display: flex !important;
align-items: center;
gap: .625rem;
}
.nav-industry:hover .nav-ind-cell {
background: var(--ind-accent);
color: #fff;
}
.nav-ind-cell {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: 1.5px solid var(--ind-accent, var(--border));
background: var(--ind-accent-muted, transparent);
color: var(--text);
font-family: var(--mono);
font-size: 12px;
font-weight: 500;
letter-spacing: -.01em;
line-height: 1;
flex-shrink: 0;
transition: background .12s, color .12s;
}
.nav-industry-name { line-height: 1.35; }
.nav-dropdown .drop-label {
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--text-subtle);
padding: .5rem .875rem .25rem;
}
.nav-cta { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
/* ── Status indicator in the header ────────────────────────────────────────
Hosts the KITT scanner viz (.viz-kitt). Sits to the left of "Sign in".
Click → /status. Tooltip via title attr on the link. */
.nav-status {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.nav-status:hover { text-decoration: none; opacity: .85; }
.nav-signin {
font-size: .875rem;
color: var(--text-muted);
text-decoration: none;
font-weight: 500;
transition: color .15s;
white-space: nowrap;
}
.nav-signin:hover { color: var(--text); text-decoration: none; }
/* Mobile hamburger */
.nav-toggle {
display: none;
background: none;
border: 1px solid var(--border);
border-radius: 6px;
padding: .4rem .6rem;
color: var(--text-muted);
font-size: 1.25rem;
line-height: 1;
}
/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .625rem 1.375rem;
border-radius: var(--r);
font-weight: 600;
font-size: .9375rem;
line-height: 1;
transition: background .15s, border-color .15s, box-shadow .15s, opacity .15s;
cursor: pointer;
border: 1.5px solid transparent;
white-space: nowrap;
text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn-primary {
background: var(--gradient);
color: #fff;
border-color: transparent;
box-shadow: 0 2px 6px rgba(0,0,0,.35);
position: relative;
z-index: 0;
overflow: hidden;
}
.btn-primary::after {
content: '';
position: absolute;
inset: -2px;
background: var(--gradient);
border-radius: inherit;
filter: blur(12px);
opacity: 0;
z-index: -1;
transition: opacity .3s;
}
.btn-primary:hover::after { opacity: .7; }
.btn-primary:hover {
background: linear-gradient(135deg, var(--accent-h), #6d28d9);
box-shadow: 0 4px 28px rgba(37,99,235,.5), 0 0 0 1px rgba(37,99,235,.2);
transform: translateY(-1px);
}
.btn-primary:focus-visible { outline: none; box-shadow: var(--sh-glow); }
.btn-ghost { background: transparent; color: var(--text-muted); border-color: var(--border); }
.btn-ghost:hover { color: var(--text); border-color: var(--text-subtle); background: var(--surface); }
.btn-outline-light { background: transparent; color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.3); }
.btn-outline-light:hover { color: #fff; border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.05); }
.btn-lg { padding: .875rem 2rem; font-size: 1.0625rem; }
.btn-sm { padding: .4rem .875rem; font-size: .8125rem; }
.btn-arrow::after { content: '→'; margin-left: .25rem; }
/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero {
background: var(--bg);
padding: 4rem 0 3rem;
overflow: hidden;
position: relative;
}
.hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 80% 50% at 60% -10%, rgba(37,99,235,.2) 0%, transparent 65%),
radial-gradient(ellipse 60% 40% at 80% 60%, rgba(124,58,237,.14) 0%, transparent 60%),
radial-gradient(ellipse 40% 30% at 10% 80%, rgba(37,99,235,.09) 0%, transparent 55%);
pointer-events: none;
z-index: 0;
}
.hero::after {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(148,163,184,.065) 1px, transparent 1px);
background-size: 28px 28px;
pointer-events: none;
z-index: 0;
mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 90%);
-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 90%);
}
/* Aurora blobs */
.hero-aurora {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.hero-aurora-blob {
position: absolute;
border-radius: 50%;
filter: blur(80px);
will-change: transform;
}
.hero-aurora-blob:nth-child(1) {
width: 600px; height: 400px;
background: rgba(37,99,235,.12);
top: -100px; left: 30%;
animation: aurora-1 18s ease-in-out infinite alternate;
}
.hero-aurora-blob:nth-child(2) {
width: 500px; height: 500px;
background: rgba(124,58,237,.1);
top: 50%; right: -100px;
animation: aurora-2 22s ease-in-out infinite alternate;
}
.hero-aurora-blob:nth-child(3) {
width: 400px; height: 300px;
background: rgba(37,99,235,.08);
bottom: -60px; left: 5%;
animation: aurora-3 16s ease-in-out infinite alternate;
}
@keyframes aurora-1 {
0% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-60px, 40px) scale(1.1); }
100% { transform: translate(80px, -30px) scale(.95); }
}
@keyframes aurora-2 {
0% { transform: translate(0, 0) scale(1); }
60% { transform: translate(50px, -60px) scale(1.15); }
100% { transform: translate(-40px, 70px) scale(.9); }
}
@keyframes aurora-3 {
0% { transform: translate(0, 0) scale(1); }
40% { transform: translate(70px, -40px) scale(1.2); }
100% { transform: translate(-30px, 50px) scale(.85); }
}
/* Hero spans full viewport width — overrides the 1200px container cap.
Hero text stays centred with a readable max-width; screen-brief widens
to fill the screen with comfortable side padding. */
.hero > .container {
position: relative;
z-index: 1;
max-width: none;
width: 100%;
padding: 0 2.5rem;
}
@media (max-width: 1024px) {
.hero > .container { padding: 0 1.25rem; }
}
/* Centered single-column hero — Evertrace pattern. H1 + sub + CTAs + logos
stack centred. Product screenshot sits full-width below the text. */
.hero-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 3rem;
}
.hero-text {
width: 100%;
max-width: 1280px; /* fits longest H1 beat on one line at clamp upper bound */
margin: 0 auto;
text-align: center;
}
.hero-text .hero-badge { margin-left: auto; margin-right: auto; }
.hero-text .hero-actions { justify-content: center; }
.hero-text .hero-tagline {
margin-left: auto;
margin-right: auto;
border-left: 0;
padding-left: 0;
text-align: center;
display: inline-block;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: .5rem;
background: rgba(37,99,235,.1);
border: 1px solid rgba(37,99,235,.25);
border-radius: 999px;
padding: .3rem .875rem;
font-size: .8rem;
font-weight: 600;
color: #93c5fd;
margin-bottom: 1.5rem;
letter-spacing: .03em;
text-transform: uppercase;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.hero-badge .dot {
width: 8px; height: 8px;
background: var(--positive);
border-radius: 50%;
flex-shrink: 0;
box-shadow: 0 0 0 0 rgba(16,185,129,.5);
animation: pulse-dot 2.5s ease-out infinite;
}
@keyframes pulse-dot {
0% { box-shadow: 0 0 0 0 rgba(16,185,129,.5); }
70% { box-shadow: 0 0 0 8px rgba(16,185,129,0); }
100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
.hero h1 {
font-family: var(--mono);
font-size: clamp(1.625rem, 1.25rem + 2.6vw, 3.25rem);
font-weight: 500;
letter-spacing: -.04em;
line-height: 1.15;
margin-bottom: 1.5rem;
color: var(--text);
max-width: 100%;
/* Long-word safety: prevent any single token (e.g. "Don't lose your product")
from forcing horizontal scroll on small phones if normal word wrap fails. */
overflow-wrap: break-word;
hyphens: auto;
}
/* Three H1 beats — each line stays on one row at desktop widths.
Mobile drops nowrap so beats wrap naturally on small viewports. */
.hero h1 .hero-beat {
display: block;
white-space: nowrap;
}
@media (max-width: 1024px) {
.hero h1 .hero-beat { white-space: normal; }
}
.hero h1 em {
font-style: normal;
background: var(--gradient-text);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-sub {
font-size: 1.0625rem;
color: var(--text-muted);
line-height: 1.75;
margin-bottom: 2.5rem;
max-width: 500px;
}
.hero-actions { display: flex; gap: .875rem; flex-wrap: wrap; align-items: center; }
.hero-canvas-wrap {
position: relative;
height: 420px;
display: flex;
align-items: center;
justify-content: center;
}
#hero-canvas {
width: 100%;
height: 100%;
border-radius: var(--r-lg);
background: var(--surface);
border: 1px solid var(--border);
display: block;
}
.canvas-label {
position: absolute;
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
font-size: .75rem;
color: var(--text-subtle);
background: rgba(15,23,42,.8);
padding: .25rem .75rem;
border-radius: 999px;
white-space: nowrap;
pointer-events: none;
}
/* ── Proof Strip / Bento ────────────────────────────────────────────────── */
.proof-strip {
background: var(--surface);
border-top: none;
border-bottom: 1px solid var(--border);
padding: 2.5rem 0;
position: relative;
}
.proof-strip::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent), var(--purple), transparent);
opacity: .5;
}
/* Mobile-first: default is the phone layout. Tablet (≥641) adds the
half-stack with cell 1 spanning; desktop (≥1025) restores the 5-col
editorial layout. Same convention used for .industry-grid, .eng-grid,
and .home-trust-grid below — write the smallest viewport first, layer up. */
.proof-bento {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
border-radius: var(--r-lg);
overflow: hidden;
}
@media (min-width: 641px) {
.proof-bento { grid-template-columns: 1fr 1fr; }
.proof-cell:first-child { grid-column: 1 / -1; }
}
@media (min-width: 1025px) {
.proof-bento { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; }
.proof-cell:first-child { grid-column: auto; }
}
.proof-cell {
background: var(--bg);
padding: 1.75rem 1.75rem;
display: flex;
flex-direction: column;
gap: .5rem;
}
/* First cell is wider (2fr column) but uses the same vertical rhythm — no
center-justify and no bigger padding, so the big number sits on the same
horizontal line as the other numbers. */
.proof-cell:first-child {
padding: 1.75rem 2rem;
}
.proof-num {
font-size: clamp(1.75rem, 2.5vw, 2.25rem);
font-weight: 900;
letter-spacing: -.05em;
line-height: 1;
margin-bottom: .25rem;
background: var(--gradient-text);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.proof-num-big {
font-size: clamp(2rem, 3vw, 2.75rem);
}
.proof-label {
font-size: .8125rem;
color: var(--text-muted);
line-height: 1.45;
}
.proof-sublabel {
font-size: .75rem;
color: var(--text-subtle);
margin-top: auto; /* pin sublabel to bottom so all cells share a baseline */
padding-top: .5rem;
}
/* fallback proof-items for small screens */
.proof-items {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
flex-wrap: wrap;
}
.proof-item {
display: flex;
align-items: center;
gap: .5rem;
padding: .4rem 1.75rem;
font-size: .875rem;
font-weight: 600;
color: var(--text-muted);
border-right: 1px solid var(--border);
white-space: nowrap;
}
.proof-item:last-child { border-right: none; }
.proof-item strong { color: var(--text); font-weight: 700; }
.proof-item .pi-dot {
width: 5px; height: 5px;
background: var(--positive);
border-radius: 50%;
flex-shrink: 0;
}
/* ── Problem Section ────────────────────────────────────────────────────── */
.problem { background: var(--bg); }
.problem-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5px;
background: var(--border);
border-radius: var(--r-lg);
overflow: hidden;
margin-top: 3rem;
}
.problem-col {
background: var(--surface);
padding: 2.5rem 2rem;
}
.problem-col:first-child { border-radius: var(--r-lg) 0 0 var(--r-lg); }
.problem-col:last-child {
background: var(--surface-2);
border-radius: 0 var(--r-lg) var(--r-lg) 0;
border-left: none;
}
.problem-col-header {
display: flex;
align-items: center;
gap: .75rem;
margin-bottom: 1.25rem;
}
.problem-icon {
width: 3rem; height: 3rem;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.1rem;
flex-shrink: 0;
}
.problem-icon.bad { background: rgba(239,68,68,.12); color: #ef4444; }
.problem-icon.good { background: rgba(37,99,235,.15); color: var(--accent); }
/* Mirrors .uc-habit-glyph--svg from use-case sub-pages: round chip,
1.5px stroke Lucide-style icon, accent-coloured stroke. */
.problem-icon--svg svg { width: 1.5rem; height: 1.5rem; }
.problem-col h3 {
font-size: 1rem;
font-weight: 700;
color: var(--text);
}
.problem-col.good-col h3 { color: var(--accent); }
.problem-col p {
font-size: .9375rem;
color: var(--text-muted);
line-height: 1.75;
}
/* ── How it Works ───────────────────────────────────────────────────────── */
.how-it-works { background: var(--surface); }
.steps-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
position: relative;
margin-top: 3rem;
}
.steps-grid::before {
content: '';
position: absolute;
top: 26px; /* exact center of the 52px circle */
left: calc((100% - 4rem) / 6); /* center of col 1 */
right: calc((100% - 4rem) / 6); /* center of col 3 */
height: 1px;
background: linear-gradient(90deg,
rgba(37,99,235,.5) 0%,
rgba(124,58,237,.5) 50%,
rgba(37,99,235,.5) 100%
);
pointer-events: none;
z-index: 0;
}
.steps-grid::after { display: none; }
.step {
text-align: center;
padding: 0 1rem;
}
.step-num {
width: 52px; height: 52px;
border-radius: 50%;
background: linear-gradient(var(--bg), var(--bg)) padding-box,
var(--gradient) border-box;
border: 2px solid transparent;
display: flex; align-items: center; justify-content: center;
font-size: 1.125rem;
font-weight: 900;
color: #60a5fa;
margin: 0 auto 1.5rem;
position: relative;
z-index: 1;
}
.step h3 {
font-size: 1.0625rem;
font-weight: 700;
margin-bottom: .625rem;
color: var(--text);
}
.step p { font-size: .9375rem; color: var(--text-muted); line-height: 1.7; }
/* ── Use Cases ──────────────────────────────────────────────────────────── */
.use-cases { background: var(--bg); }
.uc-tabs {
display: flex;
gap: .25rem;
border-bottom: 1px solid var(--border);
margin-bottom: 3rem;
overflow-x: auto;
scrollbar-width: none;
}
.uc-tabs::-webkit-scrollbar { display: none; }
.uc-tab {
padding: .75rem 1.25rem;
background: none;
border: none;
border-bottom: 2px solid transparent;
color: var(--text-muted);
font-size: .9rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: color .15s, border-color .15s;
margin-bottom: -1px;
}
.uc-tab:hover { color: var(--text); }
.uc-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.uc-panel { display: none; }
.uc-panel.active { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.uc-content h3 { font-size: 1.5rem; font-weight: 800; margin-bottom: 1rem; letter-spacing: -.02em; }
.uc-content p { color: var(--text-muted); line-height: 1.8; margin-bottom: 1.25rem; }
.uc-benefits { margin: 1.5rem 0; }
.uc-benefit {
display: flex;
align-items: flex-start;
gap: .75rem;
padding: .6rem 0;
border-bottom: 1px solid var(--border-2);
font-size: .9375rem;
}
.uc-benefit:last-child { border-bottom: none; }
.uc-benefit::before {
content: '✓';
color: var(--positive);
font-weight: 800;
flex-shrink: 0;
margin-top: .05rem;
}
.uc-screen {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 1.5rem;
min-height: 280px;
display: flex;
flex-direction: column;
gap: .75rem;
}
.uc-screen-bar {
display: flex;
align-items: center;
gap: .5rem;
padding-bottom: .75rem;
border-bottom: 1px solid var(--border);
}
.uc-screen-dot { width: 10px; height: 10px; border-radius: 50%; }
.uc-screen-row {
background: var(--surface-2);
border-radius: 6px;
padding: .75rem 1rem;
font-size: .8125rem;
color: var(--text-muted);
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.uc-screen-row strong { color: var(--text); font-size: .875rem; font-weight: 600; }
.uc-tag {
font-size: .7rem;
font-weight: 700;
padding: .2rem .5rem;
border-radius: 4px;
white-space: nowrap;
}
.uc-tag.risk { background: rgba(239,68,68,.15); color: #f87171; }
.uc-tag.clear { background: rgba(16,185,129,.15); color: #34d399; }
.uc-tag.watch { background: rgba(245,158,11,.15); color: #fbbf24; }
/* ── Social Proof ───────────────────────────────────────────────────────── */
.social-proof { background: var(--surface); }
.clients-strip {
display: flex;
align-items: center;
gap: 2rem 2.5rem;
flex-wrap: wrap;
justify-content: space-around;
margin-bottom: 3rem;
padding-bottom: 2.5rem;
border-bottom: 1px solid var(--border);
}
.client-logo {
display: inline-flex;
align-items: center;
justify-content: center;
height: 56px;
padding: 0 .5rem;
font-size: .8125rem;
font-weight: 700;
color: var(--text-subtle);
letter-spacing: .06em;
text-transform: uppercase;
opacity: .85;
}
.client-logo img,
.client-logo svg {
height: 44px;
max-width: 160px;
width: auto;
object-fit: contain;
display: block;
filter: brightness(0) invert(1);
}
/* Skip the white-invert for logos whose source is a solid-bg raster (JPG/WebP) */
.client-logo--preserve { opacity: 1; }
.client-logo--preserve img,
.client-logo--preserve svg { filter: none; }
/* Grayscale treatment: preserves internal detail (text-in-box, multi-region) but
matches the dark-theme visual language. Used for colored transparent logos where
`brightness(0) invert(1)` would flatten detail. */
.client-logo--gray { opacity: .9; }
.client-logo--gray img,
.client-logo--gray svg { filter: grayscale(1) invert(1) brightness(1.1) contrast(.95); }
/* Crisp black/white: black source artwork inverts to pure white on the dark roster. */
.client-logo--bw { opacity: 1; }
.client-logo--bw img,
.client-logo--bw svg { filter: grayscale(1) invert(1); }
/* Tropic AI logo: solid white instead of greyscale-dimmed. */
img[src$="tropic-ai.svg"] { filter: brightness(0) invert(1) !important; }
/* Invert + screen blend: flips white-bg JPG to black-bg, then screen blend-mode
makes the now-black background transparent against the dark page bg. Perfect
for removing unwanted white backgrounds from JPGs without touching the file. */
.client-logo--invert { opacity: .95; }
.client-logo--invert img,
.client-logo--invert svg {
filter: invert(1);
mix-blend-mode: screen;
}
/* Wide aspect logos: relax the max-width so wordmark-heavy logos render at full height */
.client-logo--wide img,
.client-logo--wide svg { max-width: 260px; }
/* Larger rendering for specific logos that need more visual presence (2x default) */
.client-logo--lg { height: 88px; }
.client-logo--lg img,
.client-logo--lg svg { height: 88px; max-width: 240px; }
/* Secondary strip: more, smaller logos; tighter row */
.clients-strip--secondary {
gap: 1.25rem 2rem;
padding-bottom: 0;
border-bottom: none;
margin-bottom: 0;
justify-content: center;
}
.clients-strip--secondary .client-logo { height: 40px; opacity: .65; }
.clients-strip--secondary .client-logo img,
.clients-strip--secondary .client-logo svg { max-height: 32px; max-width: 120px; }
/* Supporters strip — matches clients-strip sizing */
.supporters-strip {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
gap: 2rem 2.5rem;
margin: 2rem 0 0;
}
/* Supporters section container — framed top and bottom */
.supporters-section {
padding: 5rem 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.supporters-section .section-header { text-align: center; margin-bottom: 2.5rem; }
.supporters-section .section-title { font-size: 1.75rem; }
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.testimonial {
background: rgba(10,15,30,.7);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 2rem;
position: relative;
}
.testimonial-quote {
font-size: .9375rem;
color: var(--text-muted);
line-height: 1.8;
margin-bottom: 1.5rem;
font-style: italic;
}
.testimonial-quote::before { content: '"'; color: var(--accent); font-size: 1.5rem; line-height: 0; vertical-align: -.4rem; margin-right: .15rem; }
.testimonial-author {
display: flex;
align-items: center;
gap: .875rem;
}
.author-avatar {
width: 88px; height: 88px;
border-radius: 50%;
background: var(--surface-2);
border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
font-size: 1.25rem;
font-weight: 700;
color: var(--accent);
flex-shrink: 0;
overflow: hidden;
}
.author-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.author-name { font-size: .9rem; font-weight: 700; color: var(--text); }
.author-title { font-size: .8rem; color: var(--text-subtle); }
/* ── Data Sovereignty ───────────────────────────────────────────────────── */
.data-sovereignty { background: var(--bg); }
.sovereignty-inner {
display: grid;
grid-template-columns: 1fr 1.35fr;
gap: 4rem;
align-items: center;
}
.sovereignty-diagram {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 2.5rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
}
.sov-node {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r);
padding: .875rem 1.5rem;
text-align: center;
width: 100%;
max-width: 260px;
position: relative;
}
.sov-node-label { font-size: .8125rem; font-weight: 700; color: var(--text-muted); margin-bottom: .25rem; }
.sov-node-title { font-size: .9375rem; font-weight: 700; color: var(--text); }
.sov-node.kwintely { border-color: var(--accent); background: rgba(37,99,235,.08); }
.sov-node.kwintely .sov-node-label { color: var(--accent); }
.sov-arrow {
width: 2px;
height: 2rem;
background: var(--border);
position: relative;
margin: .25rem 0;
}
.sov-arrow::after {
content: '↓';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
color: var(--text-subtle);
font-size: .875rem;
background: var(--surface);
padding: 0 .25rem;
}
.sov-badge {
display: inline-flex;
align-items: center;
gap: .4rem;
background: rgba(16,185,129,.1);
border: 1px solid rgba(16,185,129,.25);
border-radius: 999px;
padding: .3rem .875rem;
font-size: .75rem;
font-weight: 700;
color: var(--positive);
margin-top: 1rem;
text-transform: uppercase;
letter-spacing: .05em;
max-width: 100%;
text-align: center;
}
.sovereignty-points { list-style: none; display: flex; flex-direction: column; gap: 1.25rem; margin-top: 2rem; }
.sovereignty-points li {
display: flex;
align-items: flex-start;
gap: 1rem;
font-size: .9375rem;
color: var(--text-muted);
line-height: 1.65;
}
.sovereignty-points li::before {
content: '✓';
color: var(--positive);
font-weight: 800;
flex-shrink: 0;
margin-top: .05rem;
font-size: 1rem;
}
/* ── Founders ───────────────────────────────────────────────────────────── */
.founders { background: var(--surface); }
.founders-inner {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 5rem;
align-items: start;
}
.founders-photos { display: flex; flex-direction: column; gap: 1rem; }
.founder-photo {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 1.5rem;
display: flex;
align-items: center;
gap: 1rem;
}
.founder-avatar {
width: 52px; height: 52px;
border-radius: 50%;
background: var(--surface-2);
border: 2px solid var(--accent);
display: flex; align-items: center; justify-content: center;
font-size: .9375rem;
font-weight: 800;
color: var(--accent);
flex-shrink: 0;
overflow: hidden;
}
.founder-avatar--portrait {
width: 64px; height: 64px;
background: transparent;
padding: 0;
}
.founder-avatar--portrait img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.founder-info-name { font-weight: 700; font-size: .9375rem; color: var(--text); }
.founder-info-title { font-size: .8125rem; color: var(--text-subtle); margin-top: .1rem; }
.founders-story blockquote {
font-size: 1.0625rem;
color: var(--text-muted);
line-height: 1.85;
border-left: 3px solid var(--accent);
padding-left: 1.5rem;
margin-bottom: 1.5rem;
}
.founders-story cite {
font-size: .875rem;
color: var(--text-subtle);
font-style: normal;
}
.founders-since {
margin-top: 1.5rem;
font-size: .9375rem;
font-weight: 600;
color: var(--accent);
letter-spacing: .01em;
}
/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq { background: var(--bg); }
.faq-list { max-width: 800px; margin: 3rem auto 0; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-question {
width: 100%;
background: none;
border: none;
text-align: left;
padding: 1.5rem 0;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
font-size: 1rem;
font-weight: 600;
color: var(--text);
cursor: pointer;
transition: color .15s;
}
.faq-question:hover { color: var(--accent); }
.faq-icon {
width: 24px; height: 24px;
border-radius: 50%;
border: 1.5px solid var(--border);
display: flex; align-items: center; justify-content: center;
font-size: .875rem;
color: var(--text-subtle);
flex-shrink: 0;
transition: transform .2s, border-color .15s, color .15s;
}
.faq-item.open .faq-icon {
transform: rotate(45deg);
border-color: var(--accent);
color: var(--accent);
}
.faq-answer {
overflow: hidden;
max-height: 0;
transition: max-height .3s ease, padding .3s ease;
}
.faq-item.open .faq-answer { max-height: 500px; }
.faq-answer-inner {
padding-bottom: 1.5rem;
font-size: .9375rem;
color: var(--text-muted);
line-height: 1.8;
}
/* ── Final CTA ──────────────────────────────────────────────────────────── */
.final-cta {
background: var(--surface);
text-align: center;
/* padding inherits from the mobile-first section scale */
}
.final-cta .section-title { color: var(--text); margin-bottom: 1rem; }
.final-cta .section-sub { margin: 0 auto 2.5rem; }
.final-cta-footnote {
max-width: 640px;
margin: 2.5rem auto 0;
padding-top: 1.5rem;
border-top: 1px solid var(--border);
text-align: center;
font-size: .875rem;
color: var(--text-muted);
line-height: 1.6;
}
.final-cta-footnote strong { color: var(--text); }
.final-cta-footnote a { color: var(--accent); }
/* ── About page ────────────────────────────────────────────────────────── */
.about-story { padding: 5rem 0; }
.about-story-inner {
max-width: 720px;
margin: 0 auto;
}
.about-story-inner .section-title { margin-bottom: 2rem; }
.about-story-inner p {
font-size: 1rem;
line-height: 1.75;
color: var(--text-muted);
margin-bottom: 1.25rem;
}
.about-story-inner p strong { color: var(--text); font-weight: 600; }
.about-story-inner p:last-child { margin-bottom: 0; }
.about-beacon {
padding: 3rem 0 5rem;
}
.about-beacon-inner {
max-width: 820px;
margin: 0 auto;
padding: 2.5rem 2.75rem;
background: linear-gradient(135deg, rgba(124,58,237,.08), rgba(34,211,238,.05));
border: 1px solid var(--border);
border-left: 3px solid var(--accent);
border-radius: var(--r-lg);
position: relative;
}
.about-beacon-tag {
display: inline-block;
font-family: var(--mono);
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .14em;
color: var(--accent);
margin-bottom: 1rem;
}
.about-beacon-headline {
font-size: 1.375rem;
line-height: 1.45;
color: var(--text);
margin: 0 0 1rem;
font-weight: 500;
text-wrap: pretty;
}
.about-beacon-headline strong {
background: var(--gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 700;
}
.about-beacon-sub {
font-size: .9375rem;
line-height: 1.7;
color: var(--text-muted);
margin: 0;
}
.about-beacon-kicker {
margin: 1.5rem 0 0;
padding-top: 1.25rem;
border-top: 1px solid var(--border);
font-size: .9375rem;
color: var(--text-muted);
line-height: 1.55;
}
.about-beacon-kicker strong {
color: var(--text);
font-weight: 600;
}
/* Story pullquote — emphasises the turning point of the origin narrative */
.story-pullquote {
margin: 2rem 0;
padding: 0 0 0 1.5rem;
border-left: 3px solid var(--accent);
font-family: var(--mono);
font-size: 1.0625rem;
line-height: 1.55;
color: var(--text);
font-style: normal;
}
/* Mid-page mini CTA — catches readers who are ready to convert mid-scroll */
.about-midcta {
padding: 2.5rem 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background: rgba(17,24,39,.25);
}
.about-midcta-inner {
display: flex;
align-items: center;
justify-content: center;
gap: 1.5rem 2rem;
flex-wrap: wrap;
text-align: center;
}
.about-midcta p {
margin: 0;
font-size: 1rem;
color: var(--text-muted);
font-family: var(--mono);
letter-spacing: -.01em;
}
.about-stats {
padding: 3.5rem 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background: rgba(17,24,39,.4);
margin: 1rem 0;
}
.about-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
}
.about-stats-item { text-align: center; }
.about-stats-metric {
font-size: 2.25rem;
font-weight: 800;
letter-spacing: -.03em;
background: var(--gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
line-height: 1;
margin-bottom: .5rem;
}
.about-stats-label {
font-size: .8125rem;
color: var(--text-muted);
line-height: 1.4;
max-width: 22ch;
margin: 0 auto;
}
.about-stats-note {
text-align: center;
font-family: var(--mono);
font-size: .75rem;
color: var(--text-subtle);
margin: 2rem 0 0;
letter-spacing: .04em;
}
/* Featured usage metric sitting below the 4-stat grid — emphasises real usage volume */
.about-stats-kicker {
margin-top: 2.75rem;
padding-top: 2rem;
border-top: 1px solid var(--border);
text-align: center;
}
.about-stats-kicker-number {
font-size: 3.25rem;
font-weight: 800;
letter-spacing: -.03em;
background: var(--gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
line-height: 1;
margin-bottom: .75rem;
font-variant-numeric: tabular-nums;
}
.about-stats-kicker-label {
font-size: .9375rem;
color: var(--text-muted);
max-width: 52ch;
margin: 0 auto;
line-height: 1.55;
}
.about-proof { padding: 5rem 0; }
.about-proof .section-header { text-align: center; margin-bottom: 3rem; }
.about-proof .section-title { font-size: 1.75rem; }
.about-proof .clients-strip { margin-bottom: 4rem; justify-content: space-around; }
.founder-portrait {
width: 128px;
height: 128px;
border-radius: 50%;
overflow: hidden;
border: 2px solid var(--border);
background: var(--surface-2);
margin: 0 0 1.25rem;
flex-shrink: 0;
}
.founder-portrait img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.founder-role {
font-family: var(--mono);
font-size: .75rem;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--accent);
margin: -.5rem 0 .5rem !important;
font-weight: 500;
}
.founder-link { margin-top: 1rem !important; }
.founder-link a { color: var(--accent); font-weight: 500; font-size: .875rem; }
.about-stances { padding: 5rem 0; }
.about-stances-inner { max-width: 760px; margin: 0 auto; }
.about-stances-list {
list-style: none;
padding: 0;
margin: 2rem 0 0;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.about-stances-list li {
padding: 1.25rem 1.5rem;
background: rgba(17,24,39,.6);
border: 1px solid var(--border);
border-left: 3px solid var(--accent);
border-radius: var(--r-lg);
font-size: .9375rem;
line-height: 1.65;
color: var(--text-muted);
}
.about-stances-list strong { color: var(--text); font-weight: 600; display: block; margin-bottom: .25rem; }
.about-stances-list code { font-family: var(--mono); font-size: .85em; background: rgba(255,255,255,.05); padding: .1rem .3rem; border-radius: 3px; color: var(--text); }
@media (max-width: 1024px) {
.about-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
.cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; align-items: center; }
.cta-secondary-link {
font-size: .9rem;
color: var(--text-subtle);
transition: color .15s;
}
.cta-secondary-link:hover { color: var(--text-muted); }
/* ── Articles Hub ───────────────────────────────────────────────────────── */
.articles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; }
.article-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 1.75rem;
display: flex;
flex-direction: column;
gap: .75rem;
transition: border-color .2s, box-shadow .2s;
}
.article-card:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); text-decoration: none; }
.article-tag {
font-size: .75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--accent);
}
.article-card h2 { font-size: 1.125rem; font-weight: 700; color: var(--text); line-height: 1.4; }
.article-card p { font-size: .9rem; color: var(--text-muted); line-height: 1.7; flex: 1; }
.article-meta { font-size: .8125rem; color: var(--text-subtle); display: flex; gap: .75rem; flex-wrap: wrap; }
.article-card .read-more { font-size: .875rem; font-weight: 600; color: var(--accent); margin-top: .25rem; }
/* ── Article Post ───────────────────────────────────────────────────────── */
.post-hero { background: var(--surface); border-bottom: 1px solid var(--border); padding: 4rem 0; }
.post-hero h1 { font-family: var(--mono); font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.2; margin-bottom: 1rem; }
.post-meta { font-size: .875rem; color: var(--text-subtle); display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.post-kw { background: var(--surface-2); padding: .2rem .625rem; border-radius: 999px; font-size: .75rem; font-weight: 600; color: var(--text-muted); }
.post-body { padding: 3.5rem 0 5rem; }
.post-content { max-width: 720px; margin: 0 auto; }
.post-content h2 { font-size: 1.625rem; font-weight: 800; margin: 2.75rem 0 1rem; color: var(--text); letter-spacing: -.025em; }
.post-content h3 { font-size: 1.25rem; font-weight: 700; margin: 2rem 0 .75rem; color: var(--text); }
.post-content h4 { font-size: 1.0625rem; font-weight: 700; margin: 1.5rem 0 .5rem; color: var(--text-muted); }
.post-content p { margin-bottom: 1.25rem; line-height: 1.85; color: var(--text-muted); }
.post-content a { color: var(--accent); }
.post-content strong { color: var(--text); }
.post-content ul, .post-content ol { margin: 1rem 0 1.5rem 1.5rem; list-style: revert; }
.post-content li { margin-bottom: .5rem; line-height: 1.75; color: var(--text-muted); }
.post-content blockquote { border-left: 3px solid var(--accent); padding: 1rem 1.5rem; margin: 1.5rem 0; background: var(--surface); border-radius: 0 var(--r) var(--r) 0; color: var(--text-muted); }
.post-content code { background: var(--surface-2); padding: .15rem .4rem; border-radius: 4px; font-size: .875em; font-family: var(--mono); color: var(--text); }
.post-content pre { background: var(--surface); border: 1px solid var(--border); padding: 1.5rem; border-radius: var(--r); overflow-x: auto; margin: 1.5rem 0; }
.post-content pre code { background: none; padding: 0; font-size: .875em; }
.post-content img { border-radius: var(--r); margin: 1.5rem auto; border: 1px solid var(--border); }
.post-content hr { border: none; border-top: 1px solid var(--border); margin: 2.5rem 0; }
.post-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .9375rem; }
.post-content th { text-align: left; padding: .625rem 1rem; background: var(--surface); color: var(--text); font-weight: 700; border-bottom: 2px solid var(--border); }
.post-content td { padding: .625rem 1rem; border-bottom: 1px solid var(--border); color: var(--text-muted); }
/* ── Demo Page ──────────────────────────────────────────────────────────── */
.demo-page { min-height: 80vh; display: flex; align-items: center; padding: 5rem 0; }
.demo-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.demo-form-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 2.5rem;
}
.demo-form-card h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: .5rem; letter-spacing: -.025em; }
.demo-form-card p { color: var(--text-muted); font-size: .9375rem; margin-bottom: 2rem; }
.form-field { margin-bottom: 1.25rem; }
.form-field label { display: block; font-size: .8125rem; font-weight: 600; color: var(--text-muted); margin-bottom: .4rem; text-transform: uppercase; letter-spacing: .05em; }
.form-field input {
width: 100%;
padding: .75rem 1rem;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--r);
color: var(--text);
font-size: .9375rem;
font-family: var(--font);
transition: border-color .15s, box-shadow .15s;
}
.form-field input:focus { outline: none; border-color: var(--accent); box-shadow: var(--sh-glow); }
.form-field input::placeholder { color: var(--text-subtle); }
.form-submit { width: 100%; padding: .875rem; margin-top: .5rem; }
.form-privacy { font-size: .75rem; color: var(--text-subtle); margin-top: .875rem; text-align: center; }
.demo-trust { display: flex; flex-direction: column; gap: 1.5rem; }
.demo-trust-item { display: flex; align-items: flex-start; gap: 1rem; }
.demo-trust-icon {
width: 40px; height: 40px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
display: flex; align-items: center; justify-content: center;
font-size: 1.125rem;
flex-shrink: 0;
}
.demo-trust-text strong { display: block; font-size: .9375rem; font-weight: 700; color: var(--text); margin-bottom: .2rem; }
.demo-trust-text span { font-size: .875rem; color: var(--text-muted); }
/* ── Static Page ────────────────────────────────────────────────────────── */
.page-header { background: var(--surface); border-bottom: 1px solid var(--border); padding: 4rem 0; }
.page-header h1 { font-family: var(--mono); font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.2; }
.page-body { padding: 3rem 0; }
.page-content { max-width: 740px; color: var(--text-muted); }
.page-content h2 { font-size: 1.75rem; font-weight: 700; margin: 2rem 0 1rem; color: var(--text); }
.page-content h3 { font-size: 1.375rem; font-weight: 700; margin: 1.5rem 0 .75rem; color: var(--text); }
.page-content p { margin-bottom: 1.25rem; line-height: 1.8; }
.page-content ul, .page-content ol { margin: 1rem 0 1.5rem 1.5rem; list-style: revert; }
.page-content a { color: var(--accent); }
/* ── Pricing page ─────────────────────────────────────────────────────────── */
.pricing-cards-section { padding: 4rem 0 3rem; }
.pricing-intro {
max-width: 760px;
margin: 0 auto 2rem;
padding: 0 1rem;
font-size: .95rem;
color: var(--text-muted);
line-height: 1.65;
text-align: center;
}
.faq-group-heading {
font-family: var(--mono);
font-size: .875rem;
font-weight: 500;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--text);
margin: 3rem 0 1.25rem;
padding-left: .875rem;
position: relative;
}
.faq-group-heading::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 1em;
background: var(--accent);
border-radius: 2px;
}
.faq-group-heading:first-child { margin-top: 0; }
.pricing-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
/* 7 rows match the 7 card children: name, tagline, outcome, price, gets (1fr, grows),
trigger, cta. Subgrid keeps them aligned across all cards. */
grid-template-rows: auto auto auto auto 1fr auto auto;
gap: 1rem;
column-gap: 1rem;
align-items: stretch;
}
.pricing-card {
position: relative;
background: rgba(17,24,39,.8);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 1.75rem 1.5rem;
display: grid;
grid-template-rows: subgrid;
grid-row: span 7;
row-gap: 1rem;
}
.pricing-card-featured {
border-color: rgba(37,99,235,.6);
box-shadow: 0 0 0 1px rgba(37,99,235,.35), 0 12px 40px rgba(37,99,235,.18);
}
.pricing-featured-badge {
position: absolute;
top: -.75rem;
left: 50%;
transform: translateX(-50%);
background: var(--gradient);
color: #fff;
font-size: .7rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
padding: .25rem .75rem;
border-radius: 999px;
white-space: nowrap;
}
.pricing-name { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.pricing-tagline { font-size: .875rem; color: var(--text-muted); line-height: 1.5; margin: 0; min-height: 2.6em; }
.pricing-price { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: .875rem 0; }
.pricing-price-main { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; color: var(--text); line-height: 1.1; }
.pricing-price-unit { font-size: .9rem; font-weight: 500; color: var(--text-muted); margin-left: .1rem; }
.pricing-price-custom { font-size: 1.5rem; }
.pricing-price-yearly { font-size: .8125rem; color: var(--text-subtle); margin-top: .25rem; }
.pricing-desc { font-size: .85rem; color: var(--text-muted); line-height: 1.55; }
.pricing-outcome {
font-size: .875rem; line-height: 1.45; color: var(--text);
background: rgba(37,99,235,.08);
border-left: 2px solid var(--accent);
padding: .5rem .75rem; margin: 0; border-radius: 4px;
}
.pricing-gets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .45rem; font-size: .875rem; color: var(--text-muted); line-height: 1.5; }
.pricing-gets li { padding-left: 1.25rem; position: relative; }
.pricing-gets li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.pricing-trigger {
font-size: .8125rem; color: var(--text-subtle); font-style: italic;
margin: 0; padding-top: .5rem; border-top: 1px dashed var(--border-2);
}
.pricing-trigger:empty, .pricing-outcome:empty { border: 0; padding: 0; }
.pricing-quick-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .35rem; font-size: .875rem; color: var(--text-muted); }
.pricing-quick-features li { padding-left: 1.25rem; position: relative; }
.pricing-quick-features li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.pricing-quick-features strong { color: var(--text); font-weight: 700; }
.pricing-cta { margin-top: auto; text-align: center; }
.pricing-cta-secondary {
display: block;
text-align: center;
font-size: .8125rem;
color: var(--text-subtle);
text-decoration: none;
margin-top: .6rem;
transition: color .15s;
}
.pricing-cta-secondary:hover { color: var(--accent); text-decoration: none; }
/* Try-free strip — zero-friction entry point above the paid tiers */
.pricing-free-strip {
padding: 1.25rem 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background: linear-gradient(90deg, rgba(16,185,129,.06), rgba(37,99,235,.06));
}
.pricing-free-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
/* no max-width — inherits the 1200px container via its parent */
}
.pricing-free-text {
font-size: .9375rem;
color: var(--text-muted);
line-height: 1.55;
flex: 1;
min-width: 0;
}
.pricing-free-text strong { color: var(--text); font-weight: 600; margin-right: .4rem; }
.pricing-free-text code {
font-family: var(--mono); font-size: .85em;
background: rgba(255,255,255,.05); padding: .1rem .35rem; border-radius: 4px; color: var(--text);
}
.pricing-free-cta { flex-shrink: 0; white-space: nowrap; }
/* Proof strip below the cards. Mobile-first: 2-col on phones, 4-col on
tablet+. The 4 metrics' min-content (large gradient numbers) won't fit
four-up on a 360px viewport. */
.pricing-proof { padding: 3rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: rgba(17,24,39,.4); }
.pricing-proof-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.pricing-proof-grid > * { min-width: 0; }
@media (min-width: 641px) {
.pricing-proof-grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
}
.pricing-proof-item { text-align: center; }
.pricing-proof-metric {
font-size: 2rem; font-weight: 800; letter-spacing: -.03em;
background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
line-height: 1; margin-bottom: .4rem;
}
.pricing-proof-label { font-size: .8125rem; color: var(--text-muted); line-height: 1.4; max-width: 22ch; margin: 0 auto; }
.pricing-proof-note { text-align: center; font-size: .8125rem; color: var(--text-subtle); font-style: italic; margin: 1.5rem 0 0; }
/* "What you're actually buying" section */
.pricing-switch { padding: 4.5rem 0; }
.pricing-switch-header { text-align: center; max-width: 720px; margin: 0 auto 2.5rem; }
.pricing-switch-header .section-title { text-wrap: balance; }
.pricing-switch-header .section-sub { text-align: center; margin: 0 auto; }
.pricing-switch-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem;
/* no max-width — uses full container, so each column has room */
}
.pricing-switch-item {
background: rgba(17,24,39,.6);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 1.5rem;
}
.pricing-switch-item h3 { font-size: 1.0625rem; font-weight: 700; color: var(--text); margin: 0 0 .5rem; letter-spacing: -.015em; }
.pricing-switch-item p { font-size: .875rem; color: var(--text-muted); line-height: 1.6; margin: 0; }
/* Comparison table */
.pricing-compare-section { padding: 4.5rem 0; }
.pricing-compare-wrap { overflow-x: auto; margin-top: 2rem; border: 1px solid var(--border); border-radius: var(--r-lg); }
.pricing-compare-table {
width: 100%;
border-collapse: collapse;
min-width: 680px;
font-size: .9rem;
}
.pricing-compare-table thead th {
position: sticky; top: 0;
background: var(--surface);
padding: 1rem .875rem;
text-align: center;
font-weight: 700;
color: var(--text);
border-bottom: 1px solid var(--border);
}
.pricing-compare-table thead th.pct-label { text-align: left; }
.pricing-compare-table thead th.pct-tier-featured { color: var(--accent); }
.pricing-compare-table td { padding: .625rem .875rem; border-bottom: 1px solid var(--border-2); }
.pricing-compare-table .pct-label { color: var(--text-muted); font-weight: 500; white-space: nowrap; }
.pricing-compare-table .pct-val { text-align: center; color: var(--text); }
.pricing-compare-table .pct-check { color: #10b981; font-weight: 700; }
.pricing-compare-table .pct-dash { color: var(--text-subtle); }
.pricing-compare-table .pct-custom { color: var(--text-muted); font-style: italic; font-size: .8125rem; }
.pricing-compare-table .pct-section-row td {
background: var(--surface);
font-weight: 700;
font-size: .75rem;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--text-subtle);
padding: .75rem .875rem;
}
.pricing-faq { padding: 4.5rem 0; }
@media (max-width: 1024px) {
.pricing-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.pricing-cards { grid-template-columns: 1fr; }
}
/* ── Homepage pricing teaser ──────────────────────────────────────────────── */
.pricing-teaser { padding: 5rem 0; }
.pricing-teaser-header { text-align: center; margin-bottom: 2rem; }
.pricing-teaser-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: .875rem;
max-width: 1100px;
margin: 0 auto 1.75rem;
}
.pricing-teaser-card {
background: rgba(17,24,39,.75);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 1.25rem 1rem;
text-align: center;
transition: border-color .25s, transform .25s, box-shadow .25s;
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
gap: .4rem;
}
.pricing-teaser-card:hover {
border-color: rgba(37,99,235,.45);
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(37,99,235,.12);
text-decoration: none;
}
.pricing-teaser-card.featured { border-color: rgba(37,99,235,.5); }
.pricing-teaser-name { font-size: 1rem; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.pricing-teaser-price { font-size: 1.5rem; font-weight: 800; color: var(--text); letter-spacing: -.02em; line-height: 1.1; }
.pricing-teaser-tagline { font-size: .8125rem; color: var(--text-muted); line-height: 1.5; }
.pricing-teaser-cta { text-align: center; }
@media (max-width: 1024px) {
.pricing-teaser-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.pricing-teaser-grid { grid-template-columns: 1fr; }
}
/* ── Imprint (two-column on wide screens) ───────────────────────────────── */
.page-header-tight { padding: 2rem 0 1.25rem; }
.page-header-tight h1 { font-size: clamp(1.75rem, 3vw, 2.25rem); margin: 0; }
.page-header-tight .page-lede { margin: .25rem 0 0; color: var(--text-muted); font-size: .95rem; }
.page-body-tight { padding: 1.5rem 0 2.5rem; }
.imprint {
display: flex;
flex-direction: column;
gap: 1.25rem;
color: var(--text-muted);
}
.imprint-row { display: flex; flex-direction: column; gap: .35rem; padding: 0; }
.imprint-row > h2 {
font-size: 1.25rem;
font-weight: 700;
color: var(--text);
letter-spacing: -.02em;
margin: 0;
hyphens: auto;
}
.imprint-row-body { max-width: 760px; }
.imprint-row-body p { margin: 0 0 .5rem; line-height: 1.55; }
.imprint-row-body p:last-child { margin-bottom: 0; }
.imprint-row-body a { color: var(--accent); }
.imprint-row-body h3 {
font-size: 1rem;
font-weight: 600;
color: var(--text);
margin: .9rem 0 .25rem;
letter-spacing: -.01em;
}
.imprint-row-body h3:first-child { margin-top: 0; }
.imprint-data {
display: grid;
grid-template-columns: max-content 1fr;
gap: .2rem 1.25rem;
margin: 0;
}
.imprint-data dt { color: var(--text); font-weight: 600; }
.imprint-data dd { margin: 0; }
@media (min-width: 900px) {
.imprint-row {
display: grid;
grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
gap: 3rem;
align-items: start;
}
.imprint-row > h2 { padding-top: .125rem; }
}
/* ── 404 ────────────────────────────────────────────────────────────────── */
.error-page {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 60vh;
text-align: center;
padding: 3rem 1.5rem;
gap: 1rem;
}
.error-page h1 { font-size: clamp(5rem, 15vw, 9rem); font-weight: 900; color: var(--border); line-height: 1; }
.error-page h2 { font-size: 1.75rem; font-weight: 700; color: var(--text); }
.error-page p { color: var(--text-muted); margin-bottom: 1rem; }
/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer {
background: var(--surface);
border-top: 1px solid var(--border);
padding: 4rem 0 2rem;
}
/* Footer logo (wordmark) — same SVG asset as the header nav so brand
continuity is preserved. The wordmark SVG has a small inset before the
K glyph, so we offset the image with a negative margin-left to align
the K with the tagline / badges / LinkedIn-CTA stacked below. */
.footer-logo {
display: block;
width: max-content;
max-width: 100%;
margin: 0 0 1.25rem;
padding: 0;
line-height: 0;
}
.footer-logo img {
height: 40px;
width: auto;
display: block;
margin-left: -.5rem; /* compensate the wordmark's left inset */
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
gap: 3rem;
padding-bottom: 3rem;
border-bottom: 1px solid var(--border);
margin-bottom: 2rem;
}
.footer-tagline { font-size: .875rem; color: var(--text-subtle); line-height: 1.7; margin-bottom: 1.25rem; max-width: 280px; }
/* Brand-column LinkedIn CTA — inline icon + label, sits below the badges.
Replaces the previous standalone icon at the bottom of the footer. */
.footer-linkedin-cta {
display: inline-flex;
align-items: center;
gap: .6rem;
margin-top: 1.25rem;
padding: .5rem .85rem;
border: 1px solid var(--border);
border-radius: 999px;
font-size: .8125rem;
color: var(--text-muted);
transition: color .2s, border-color .2s, background .2s;
}
.footer-linkedin-cta svg { flex-shrink: 0; }
.footer-linkedin-cta:hover {
color: var(--accent);
border-color: var(--accent);
background: rgba(37,99,235,.08);
text-decoration: none;
}
.footer-badges { display: flex; flex-wrap: wrap; gap: .5rem; }
.footer-badge {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .25rem .75rem;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 999px;
font-size: .7rem;
font-weight: 700;
color: var(--text-subtle);
text-transform: uppercase;
letter-spacing: .05em;
}
.footer-badge.green { color: var(--positive); border-color: rgba(16,185,129,.3); background: rgba(16,185,129,.06); }
.footer-col h4 { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-subtle); margin-bottom: 1.25rem; }
.footer-col ul { display: flex; flex-direction: column; gap: .625rem; }
.footer-col a { font-size: .875rem; color: var(--text-muted); transition: color .15s; }
.footer-col a:hover { color: var(--text); text-decoration: none; }
/* "View all 12 →" affordance at the bottom of the use-cases column —
bold so it reads as a navigation extender, but no accent colour so it
doesn't compete visually with the active conversion CTAs elsewhere. */
.footer-col-more { margin-top: .5rem; padding-top: .75rem; border-top: 1px solid var(--border); }
.footer-col-more a { font-weight: 600; }
.footer-funding { margin-top: 1.5rem; }
.footer-funding img { width: 120px; height: auto; }
/* "Ask AI about us" — moved into the brand column directly under the
LinkedIn chip. Compact icon row of AI-tool chips, same prompt
pre-filled into each. Subline removed — the heading is enough at this
size; scaled to fit a single column width. */
.footer-ask-ai {
margin-top: 1.25rem;
}
.footer-ask-ai h4 {
font-size: .75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--text-subtle);
margin: 0 0 .75rem;
}
.footer-ask-ai-icons {
display: flex;
align-items: center;
gap: .75rem;
flex-wrap: wrap;
}
.footer-ask-ai-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 8px;
border: 1px solid var(--border);
color: var(--text-subtle);
background: var(--bg);
transition: color .2s, border-color .2s, background .2s, transform .2s;
}
.footer-ask-ai-link:hover {
color: var(--text);
border-color: var(--text-subtle);
background: rgba(255,255,255,.04);
transform: translateY(-1px);
text-decoration: none;
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.footer-bottom p { font-size: .8125rem; color: var(--text-subtle); margin: 0; }
.footer-since { color: var(--text-muted) !important; font-weight: 500; }
.footer-copyright { color: var(--text-subtle); }
/* Footer status pill — sits between the "since 2018" line and the copyright.
Hosts the KITT scanner + text label + 30-day uptime. */
.footer-status {
display: inline-flex;
align-items: center;
gap: .65rem;
font-size: .8125rem;
color: var(--text-muted);
padding: .35rem .9rem;
border: 1px solid var(--border);
border-radius: 999px;
transition: color .2s, border-color .2s, background .2s;
}
.footer-status:hover {
color: var(--text);
border-color: var(--text-subtle);
background: rgba(255,255,255,.04);
text-decoration: none;
}
.footer-status .viz-kitt { width: 56px; height: 12px; flex-shrink: 0; }
.footer-status-label { font-weight: 500; }
.footer-status-uptime { color: var(--text-subtle); }
/* ── Reveal animations ──────────────────────────────────────────────────── */
.reveal {
opacity: 0;
transform: translateY(28px);
filter: blur(4px);
transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1), filter .7s cubic-bezier(.16,1,.3,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); filter: blur(0); }
.reveal-delay-1 { transition-delay: .12s; }
.reveal-delay-2 { transition-delay: .24s; }
.reveal-delay-3 { transition-delay: .36s; }
/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
.footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 2rem; }
.footer-brand { grid-column: 1 / -1; }
.hero-inner { gap: 2.5rem; }
.hero-canvas-wrap { height: 340px; }
}
@media (max-width: 1024px) {
.hero-inner { grid-template-columns: 1fr; }
.hero-canvas-wrap { display: none; }
.problem-grid { grid-template-columns: 1fr; gap: 1px; }
.problem-col:first-child { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.problem-col:last-child { border-radius: 0 0 var(--r-lg) var(--r-lg); }
.steps-grid { grid-template-columns: 1fr; gap: 2rem; }
.steps-grid::before, .steps-grid::after { display: none; }
.uc-panel.active { grid-template-columns: 1fr; }
.testimonials-grid { grid-template-columns: 1fr; }
.sovereignty-inner { grid-template-columns: 1fr; gap: 2.5rem; }
.founders-inner { grid-template-columns: 1fr; gap: 2rem; }
.demo-inner { grid-template-columns: 1fr; }
/* section padding now lives at the top of the file as mobile-first scale */
}
@media (max-width: 1024px) {
.nav-links { display: none; }
.nav-toggle { display: flex; align-items: center; justify-content: center; }
.nav-signin { display: none; } /* keep nav compact — sign-in accessible via hamburger */
.nav-links.open {
display: flex;
flex-direction: column;
position: absolute;
top: 100%;
left: 0; right: 0;
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 1rem 1.5rem;
gap: .25rem;
z-index: 200;
max-height: calc(100vh - 5rem);
overflow-y: auto;
}
.nav-dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; background: transparent; padding-left: 1rem; }
/* Collapse the desktop mega-dropdowns into a single stacked column inside the
burger menu. The Use Cases dropdown is a 760px-wide 3-col grid shifted with
translateX(-50%); left unchecked it blows off-screen and the menu is unusable. */
.nav-links.open .nav-dropdown-wide { display: block; min-width: 0; padding: 0; left: auto; transform: none; }
.nav-links.open .nav-dropdown-industries { min-width: 0; }
.nav-links.open .drop-col { padding: .4rem 0; }
.nav-links.open .drop-col + .drop-col { border-left: none; }
/* Compact + fat-thumb open menu (was too bulky on phones). Tighten the
container, section eyebrows, column padding and toggle chrome, while
giving every tappable row a comfortable flex tap target: 44px toggles,
40px links. Height now comes from min-height, not airy padding. */
.nav-links.open { padding: .5rem 1rem .75rem; gap: 0; }
.nav-links.open > li > a { display: flex; align-items: center; min-height: 44px; padding-top: 0; padding-bottom: 0; font-size: 1rem; }
.nav-links.open .nav-dropdown a { display: flex; align-items: center; min-height: 40px; padding-top: 0; padding-bottom: 0; }
.nav-links.open .drop-label { padding: .5rem .875rem .1rem; }
.nav-links.open .drop-col { padding: .15rem 0; }
/* Accordion: each section dropdown is collapsed until its toggle is tapped
(see base.html mobile-accordion JS); single-open. Chevron flips when open. */
.nav-links.open .has-dropdown > .nav-dropdown { display: none; }
.nav-links.open .has-dropdown.expanded > .nav-dropdown { display: block; }
.nav-links.open .has-dropdown.expanded > a::after { transform: rotate(180deg); opacity: 1; }
/* In the accordion the current-page underline reads as a stuck selection when
another section is expanded; hide it (the expand state is the cue). */
.nav-links.open > li.is-active > a::before { display: none; }
.articles-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem 1.25rem; }
.proof-items { gap: 0; }
.proof-item { padding: .5rem 1rem; font-size: .8rem; }
.clients-strip { gap: .75rem; }
}
@media (max-width: 640px) {
.hero h1 { letter-spacing: -.03em; }
.hero-actions { flex-direction: column; align-items: center; }
.hero-actions .btn { justify-content: center; text-align: center; }
.footer-bottom { flex-direction: column; text-align: center; }
/* Phase-1 mobile-collapse fixes — kept for the two grids that still use
desktop-down rules. .proof-bento is now mobile-first (above) and lives
by min-width breakpoints, so its rule has been removed from here. */
.tech-proof-grid { grid-template-columns: 1fr; }
.uc-personas-grid { grid-template-columns: 1fr; }
}
/* ── Nav dropdown wide (3-col for use cases) ─────────────────────────────── */
/* Wider layout (was 560px) + colour-coded columns matching the use-case
page palette: Case = green (#10b981), Operational = blue (#2563eb),
Strategy = purple (#7c3aed). Centered under its trigger so it doesn't
anchor flush-left and risk overflowing the viewport on narrow desktops. */
.nav-dropdown-wide {
display: grid;
grid-template-columns: repeat(3, minmax(220px, 1fr));
gap: 0;
min-width: 760px;
padding: 1.75rem;
left: 50%;
transform: translateX(-50%) translateY(-6px);
}
.has-dropdown:hover .nav-dropdown-wide,
.has-dropdown:focus-within .nav-dropdown-wide {
transform: translateX(-50%) translateY(0);
}
.drop-col { padding: 0 1.25rem; min-width: 0; }
.drop-col + .drop-col { border-left: 1px solid var(--border); }
/* Per-column accent colour on the heading + a 2px top-border so the column
reads as level-coded at a glance. Matches the badges on /use-cases. */
.drop-col--case { --drop-accent: #10b981; }
.drop-col--ops { --drop-accent: #2563eb; }
.drop-col--strategy { --drop-accent: #7c3aed; }
.drop-col[class*="drop-col--"] {
border-top: 2px solid var(--drop-accent);
padding-top: .75rem;
}
.drop-col[class*="drop-col--"] .drop-label {
color: var(--drop-accent);
}
.drop-col[class*="drop-col--"] a:hover {
color: var(--drop-accent);
background: color-mix(in srgb, var(--drop-accent) 8%, transparent);
}
/* ── Product dropdown ──────────────────────────────────────────────────── */
.nav-dropdown-product {
min-width: 220px;
}
/* ── Use case card grid ──────────────────────────────────────────────────── */
.uc-level-legend {
display: flex;
align-items: center;
gap: .625rem;
flex-wrap: wrap;
font-size: .8125rem;
color: var(--text-subtle);
margin-bottom: 2.5rem;
}
.uc-lvl-sep { color: var(--border); }
.uc-lvl-badge {
display: inline-block;
font-size: .6875rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
padding: .2em .6em;
border-radius: 4px;
}
.uc-lvl-badge.strategy { background: rgba(139,92,246,.15); color: #a78bfa; border: 1px solid rgba(139,92,246,.3); }
.uc-lvl-badge.ops { background: rgba(37,99,235,.12); color: #60a5fa; border: 1px solid rgba(37,99,235,.3); }
.uc-lvl-badge.case { background: rgba(16,185,129,.1); color: #34d399; border: 1px solid rgba(16,185,129,.3); }
.uc-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.25rem;
}
/* Mobile-first: 1 → 2 → 3 cards per row. Flex-basis is the working knob
here (the .uc-grid grid-template-columns rules elsewhere are no-ops on a
flex parent and are kept only for legacy callers). */
.uc-grid > .uc-card {
flex: 0 1 100%;
min-width: 0;
}
@media (min-width: 641px) {
.uc-grid > .uc-card { flex-basis: calc((100% - 1.25rem) / 2); }
}
@media (min-width: 1025px) {
.uc-grid > .uc-card { flex-basis: calc((100% - 2.5rem) / 3); }
}
.uc-card {
background: rgba(17,24,39,.8);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 1.75rem;
display: flex;
flex-direction: column;
gap: .875rem;
text-decoration: none;
color: inherit;
transition: border-color .3s, box-shadow .3s, transform .3s, background .3s;
position: relative;
}
.uc-card::after {
content: '';
position: absolute;
inset: -1px;
border-radius: calc(var(--r-lg) + 1px);
background: var(--gradient);
opacity: 0;
z-index: -1;
transition: opacity .3s;
}
.uc-card:hover {
border-color: transparent;
background: rgba(37,99,235,.07);
box-shadow: 0 12px 40px rgba(37,99,235,.18);
transform: translateY(-4px);
text-decoration: none;
}
.uc-card:hover::after { opacity: 1; }
/* ── Hover readability: force high-contrast text when a gradient reveals ── */
.uc-card:hover h3,
.uc-card:hover p,
.uc-card:hover .uc-card-cta,
.uc-card:hover .founder-role,
.uc-card:hover .founder-link a { color: #fff; }
.uc-card:hover .founder-link a { text-decoration: underline; text-underline-offset: 3px; }
.uc-card:hover .uc-lvl-badge {
color: #fff;
background: rgba(0,0,0,.18);
border-color: rgba(255,255,255,.45);
}
.industry-card:hover .industry-card-name,
.industry-card:hover .industry-card-teaser,
.industry-card:hover .industry-card-cta { color: #fff; }
/* Periodic cell contrast rescue on card hover — the accent border + accent
numerals get lost against the gradient wash that reveals on hover. Flip
the border, number and atomic weight to white. Symbol stays white (already). */
.industry-card:hover .ind-element {
border-color: #fff;
background: rgba(255, 255, 255, .08);
}
.industry-card:hover .ind-element-num,
.industry-card:hover .ind-element-weight {
color: #fff;
opacity: 1;
}
.industry-card:hover .ind-element-symbol { color: #fff; }
/* Per-card customer logo micro-strip on /industries listing + homepage.
`flex: 0 0 auto` on each logo prevents the browser from silently shrinking
items past their content (which collapsed the third/fourth logo when the
row was tight). Width: 100% + flex-wrap lets a tall row drop to a second
visible line. `min-width: 0` on the strip itself (inside the column-flex
card parent) prevents it from being squeezed below its intrinsic content. */
.industry-card-logos {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .5rem;
margin: .75rem 0 1rem;
width: 100%;
min-width: 0;
}
.industry-card-logo {
display: inline-flex;
align-items: center;
justify-content: center;
height: 26px;
flex: 0 0 auto;
padding: 0;
opacity: 1;
}
.industry-card-logo img,
.industry-card-logo svg {
height: 22px;
width: auto;
max-width: 80px;
object-fit: contain;
display: block;
filter: brightness(0) invert(1);
}
.industry-card-logo.client-logo--gray img,
.industry-card-logo.client-logo--gray svg { filter: grayscale(1) invert(1) brightness(1.1); }
.industry-card-logo.client-logo--invert img,
.industry-card-logo.client-logo--invert svg { filter: invert(1); mix-blend-mode: screen; }
/* Neutralise the global `--2x` and `--wide` modifiers inside the mini-strip
context — those rules are intended for the hero strip and ind-proof bands,
not the card thumbnails. Without these overrides their max-width values
leak in (equal selector specificity, declaration-order coin-flip) and the
wide logos eat the row, pushing siblings off the strip. */
.industry-card-logo.client-logo--2x img,
.industry-card-logo.client-logo--2x svg,
.industry-card-logo.client-logo--wide img,
.industry-card-logo.client-logo--wide svg,
.industry-card-logo.client-logo--lg img,
.industry-card-logo.client-logo--lg svg {
max-width: 80px;
height: 22px;
width: auto;
}
.industry-card-logo.client-logo--2x,
.industry-card-logo.client-logo--wide,
.industry-card-logo.client-logo--lg {
height: 26px;
}
.industry-card-logos-more {
font-family: var(--mono);
font-size: .7rem;
color: var(--text-subtle);
padding: .15rem .5rem;
background: rgba(255,255,255,.06);
border-radius: 999px;
}
/* Industry detail — customer-proof band (logos + VOC) */
.ind-proof {
padding: 4.5rem 0;
background: rgba(17,24,39,.25);
border-bottom: 1px solid var(--border);
}
.ind-proof .section-header { margin-bottom: 2.5rem; }
.ind-proof .clients-strip { margin-bottom: 3rem; padding-bottom: 0; border-bottom: 0; }
.ind-voc-grid { max-width: 1180px; margin: 0 auto; }
/* Industry pages render customer logos 1.5x larger than the global default for
more visual weight on the trust band. Scoped to .ind-proof so /about,
homepage, and /platform strips keep their original sizing. */
.ind-proof .client-logo { height: 84px; }
.ind-proof .client-logo img,
.ind-proof .client-logo svg { height: 66px; max-width: 240px; }
/* Flagship 2x modifier — currently TU Darmstadt. Applied via the third tuple
element in _INDUSTRY_CUSTOMERS. */
.ind-proof .client-logo--2x { height: 168px; }
.ind-proof .client-logo--2x img,
.ind-proof .client-logo--2x svg { height: 132px; max-width: 480px; }
/* Industry detail — releases & case-studies slot */
.ind-releases {
padding: 4.5rem 0;
border-bottom: 1px solid var(--border);
}
.ind-releases .section-header { margin-bottom: 2rem; }
/* ── Managing Directors (Founders) ──────────────────────────────────────── */
.founders-section { padding: 5rem 0; }
.founders-section > .container > .section-title {
text-align: center;
margin-bottom: 3rem;
}
/* Centered 2-column grid, capped width */
.founders-section .uc-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 920px;
margin: 0 auto;
gap: 2rem;
}
/* Card: flex column so LinkedIn pins to bottom regardless of bio length */
.founders-section .uc-card {
display: flex;
flex-direction: column;
padding: 2.5rem 2rem 2rem;
cursor: default;
transition: none;
}
/* Portrait, name, role: centered at top; LinkedIn centered at bottom */
.founders-section .founder-portrait { margin: 0 auto 1.5rem; }
.founders-section .uc-card h3 { text-align: center; margin: 0 0 .4rem; }
.founders-section .founder-role {
text-align: center;
margin: 0 auto 1.75rem !important;
}
/* Bio paragraph: left-aligned, grows to push LinkedIn to bottom */
.founders-section .uc-card > p:not(.founder-role):not(.founder-link) {
text-align: left;
max-width: none;
flex: 1;
margin-bottom: 1.5rem;
}
.founders-section .founder-link {
text-align: center;
margin: auto 0 0 !important;
}
/* No hover effects on founder cards */
.founders-section .uc-card::after { display: none !important; }
.founders-section .uc-card:hover {
border-color: var(--border);
background: transparent;
box-shadow: none;
transform: none;
}
.founders-section .uc-card:hover h3 { color: var(--text); }
.founders-section .uc-card:hover > p:not(.founder-role):not(.founder-link) { color: var(--text-muted); }
.founders-section .uc-card:hover .founder-role { color: var(--accent); }
.founders-section .uc-card:hover .founder-link a { color: var(--accent); text-decoration: none; }
.uc-card h3 {
font-size: 1rem;
font-weight: 700;
letter-spacing: -.02em;
color: var(--text);
line-height: 1.3;
}
.uc-card p {
font-size: .875rem;
color: var(--text-muted);
line-height: 1.65;
flex: 1;
}
.uc-card-cta {
font-size: .8125rem;
font-weight: 600;
color: var(--accent);
margin-top: auto;
}
/* ── Engagement models ───────────────────────────────────────────────────── */
.engagement-models { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
/* Mobile-first: 1 → 2 → 3 columns. Tablet/desktop overrides below. */
.eng-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
border-radius: var(--r-lg);
overflow: hidden;
margin-bottom: 1.5rem;
}
@media (min-width: 641px) {
.eng-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1025px) {
.eng-grid { grid-template-columns: repeat(3, 1fr); }
}
.eng-journey {
max-width: 820px;
margin: 0 auto 2rem;
text-align: center;
font-size: .9375rem;
color: var(--text-muted);
line-height: 1.65;
font-style: italic;
}
.eng-card {
background: var(--surface);
padding: 2rem 1.75rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.eng-icon {
font-size: 1.5rem;
font-weight: 900;
letter-spacing: -.06em;
color: var(--accent);
line-height: 1;
}
.eng-icon.api { color: #a78bfa; }
.eng-card h3 {
font-size: 1rem;
font-weight: 700;
letter-spacing: -.02em;
color: var(--text);
line-height: 1.3;
}
.eng-card p {
font-size: .875rem;
color: var(--text-muted);
line-height: 1.65;
flex: 1;
}
.eng-for {
font-size: .8rem !important;
color: var(--text-subtle) !important;
border-top: 1px solid var(--border-2);
padding-top: .875rem;
flex: none !important;
}
.eng-cta { text-align: center; display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.eng-cta-help {
text-align: center;
font-size: .9375rem;
color: var(--text-muted);
max-width: 620px;
margin: 1.75rem auto .75rem;
line-height: 1.6;
}
/* ── Demo page ───────────────────────────────────────────────────────────── */
.demo-page { padding: 5rem 0 6rem; min-height: 70vh; }
.demo-layout {
display: grid;
grid-template-columns: 1fr 420px;
gap: 5rem;
align-items: start;
}
.demo-eyebrow {
font-size: .8125rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 1.25rem;
}
.demo-headline {
font-family: var(--mono);
font-size: clamp(1.5rem, 2.4vw, 2.125rem);
font-weight: 500;
letter-spacing: -.04em;
line-height: 1.2;
margin-bottom: 1.25rem;
}
.demo-sub {
color: var(--text-muted);
font-size: 1.0625rem;
line-height: 1.7;
max-width: 520px;
margin-bottom: 2.5rem;
}
.demo-proof {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
margin-bottom: 2.5rem;
}
.demo-proof li {
display: flex;
flex-direction: column;
gap: .25rem;
}
.demo-proof-num {
font-size: 1.75rem;
font-weight: 800;
color: var(--accent);
letter-spacing: -.04em;
line-height: 1;
}
.demo-proof-label {
font-size: .8125rem;
color: var(--text-muted);
line-height: 1.4;
}
.demo-trust {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 1.5rem;
margin-bottom: 1.5rem;
}
.demo-trust-label {
font-size: .8125rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--text-muted);
margin-bottom: .875rem;
}
.demo-trust-list li {
position: relative;
padding-left: 1.25rem;
color: var(--text-muted);
font-size: .9375rem;
line-height: 1.6;
margin-bottom: .5rem;
}
.demo-trust-list li::before {
content: '→';
position: absolute;
left: 0;
color: var(--accent);
font-size: .75rem;
top: .25em;
}
.demo-founders-note {
border-left: 2px solid var(--border);
padding-left: 1rem;
}
.demo-founders-note p {
font-size: .9rem;
color: var(--text-subtle);
line-height: 1.6;
}
/* Conversion-moment confidentiality block — sits between the "What you'll
see" list and the founders note. Accent border-left so it reads as a
reassurance callout, not a paragraph among paragraphs. */
.demo-confidential {
border-left: 2px solid var(--accent);
background: rgba(37,99,235,.05);
padding: 1rem 1.25rem;
border-radius: 0 var(--r) var(--r) 0;
margin: 1.5rem 0;
}
.demo-confidential p {
font-size: .9375rem;
color: var(--text-muted);
line-height: 1.6;
margin: 0;
}
.demo-confidential strong { color: var(--text); font-weight: 700; }
/* Disqualifier line — KB late-funnel pattern. Quiet styling so it doesn't
compete with the form CTA. */
.demo-disqualifier {
font-size: .8125rem;
color: var(--text-subtle);
line-height: 1.55;
margin: 1.25rem 0 .5rem;
font-style: italic;
}
.demo-disqualifier a { color: var(--text-muted); border-bottom: 1px solid var(--border); }
.demo-disqualifier a:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }
/* Pre-commit lead-magnet link — for the not-ready-yet buyer. Tight, single
line, low visual weight so it doesn't distract from the form. */
.demo-pre-commit {
font-size: .9rem;
color: var(--text-muted);
margin: .25rem 0 0;
}
.demo-pre-commit a {
color: var(--accent);
font-weight: 600;
border-bottom: 1px solid transparent;
transition: border-color .2s;
}
.demo-pre-commit a:hover { border-color: var(--accent); text-decoration: none; }
.demo-form-wrap { position: sticky; top: 7rem; }
.demo-form-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 2rem;
}
.demo-form-title {
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -.02em;
margin-bottom: .375rem;
}
.demo-form-sub {
font-size: .875rem;
color: var(--text-muted);
margin-bottom: 1.75rem;
}
.demo-form .form-field { margin-bottom: 1.25rem; }
.demo-form label {
display: block;
font-size: .875rem;
font-weight: 500;
color: var(--text-muted);
margin-bottom: .4rem;
}
.demo-form input {
width: 100%;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--r);
padding: .75rem 1rem;
color: var(--text);
font-size: .9375rem;
font-family: var(--font);
transition: border-color .15s, box-shadow .15s;
outline: none;
}
.demo-form input:focus {
border-color: var(--accent);
box-shadow: var(--sh-glow);
}
.demo-form input::placeholder { color: var(--text-subtle); }
.field-error {
font-size: .8125rem;
color: var(--warn);
margin-top: .35rem;
}
.form-error-global {
font-size: .875rem;
color: var(--warn);
margin-bottom: 1rem;
}
.btn-demo-submit {
width: 100%;
padding: .875rem;
font-size: 1rem;
justify-content: center;
margin-bottom: 1rem;
}
.form-privacy {
font-size: .8rem;
color: var(--text-subtle);
text-align: center;
line-height: 1.5;
}
/* Secondary instant-book path — a soft "or" divider followed by a Cal.com
button. Quiet styling so it doesn't fight the primary form for attention. */
.demo-form-alt {
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px dashed var(--border);
text-align: center;
}
.demo-form-alt-sep {
display: block;
font-size: .75rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--text-subtle);
margin-bottom: 1rem;
}
.btn-demo-alt {
width: 100%;
padding: .75rem;
font-size: .9375rem;
justify-content: center;
}
.demo-form-alt-note {
font-size: .75rem;
color: var(--text-subtle);
text-align: center;
margin: .75rem 0 0;
line-height: 1.5;
}
/* Conversion-moment testimonial — sits below the form card on the right
column, pinned next to the form so the trust signal is visible the moment
the buyer is hesitating about whether to fill it in. */
.demo-testimonial {
margin: 1.5rem 0 0;
padding: 1.5rem;
background: rgba(17,24,39,.4);
border: 1px solid var(--border);
border-left: 3px solid var(--accent);
border-radius: var(--r-lg);
}
.demo-testimonial blockquote {
font-size: .9375rem;
color: var(--text);
line-height: 1.65;
margin: 0 0 1rem;
font-style: italic;
}
.demo-testimonial-author {
display: flex;
align-items: center;
gap: .75rem;
font-style: normal;
}
.demo-testimonial-author img {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
display: block;
flex-shrink: 0;
}
.demo-testimonial-name { font-size: .875rem; font-weight: 700; color: var(--text); }
.demo-testimonial-role { font-size: .8125rem; color: var(--text-subtle); margin-top: .1rem; }
.demo-success {
background: rgba(16,185,129,.08);
border: 1px solid rgba(16,185,129,.3);
border-radius: var(--r);
padding: 1.5rem;
}
.demo-success-title {
font-size: 1.125rem;
font-weight: 700;
color: var(--positive);
margin-bottom: .5rem;
}
.demo-success p:last-child { color: var(--text-muted); font-size: .9375rem; }
/* ── Articles hub ────────────────────────────────────────────────────────── */
.articles-hero {
padding: 5rem 0 3.5rem;
border-bottom: 1px solid var(--border);
}
.articles-hero-inner { max-width: 640px; }
.articles-eyebrow {
font-size: .8125rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 1rem;
}
.articles-hero h1 {
font-family: var(--mono);
font-size: clamp(1.625rem, 3vw, 2.375rem);
font-weight: 500;
letter-spacing: -.04em;
line-height: 1.2;
margin-bottom: 1rem;
}
.articles-sub {
font-size: 1.0625rem;
color: var(--text-muted);
line-height: 1.7;
}
.articles-body { padding: 3.5rem 0 6rem; }
/* ── Featured card ───────────────────────────────────────────────────────── */
.articles-featured {
position: relative;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-xl);
padding: 2.5rem 3rem;
margin-bottom: 2.5rem;
transition: border-color .3s, box-shadow .3s;
overflow: hidden;
}
.articles-featured::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--gradient);
}
.articles-featured:hover {
border-color: rgba(37,99,235,.5);
box-shadow: 0 16px 48px rgba(37,99,235,.12);
}
.articles-featured-link {
position: absolute;
inset: 0;
border-radius: var(--r-xl);
z-index: 1;
}
.articles-featured-meta {
display: flex;
align-items: center;
gap: .875rem;
margin-bottom: 1rem;
font-size: .8125rem;
color: var(--text-subtle);
}
.articles-featured-label {
background: rgba(37,99,235,.15);
border: 1px solid rgba(37,99,235,.3);
color: #93c5fd;
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
padding: .2rem .625rem;
border-radius: 999px;
}
.articles-featured-title {
font-size: clamp(1.25rem, 2.5vw, 1.75rem);
font-weight: 800;
letter-spacing: -.035em;
line-height: 1.25;
color: var(--text);
margin-bottom: .875rem;
max-width: 740px;
}
.articles-featured-excerpt {
font-size: 1rem;
color: var(--text-muted);
line-height: 1.7;
max-width: 660px;
margin-bottom: 1.25rem;
}
.articles-featured-cta {
font-size: .9375rem;
font-weight: 600;
color: var(--accent);
position: relative;
z-index: 2;
}
/* ── Article list ────────────────────────────────────────────────────────── */
.articles-list {
display: flex;
flex-direction: column;
border: 1px solid var(--border);
border-radius: var(--r-lg);
overflow: hidden;
}
.articles-list-item {
position: relative;
display: grid;
grid-template-columns: 72px 1fr auto;
gap: 1.5rem;
align-items: center;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--border);
background: var(--bg);
transition: background .18s;
}
.articles-list-item:last-child { border-bottom: none; }
.articles-list-item:hover { background: var(--surface); }
.articles-list-link {
position: absolute;
inset: 0;
z-index: 1;
}
.articles-list-date {
flex-shrink: 0;
text-align: center;
}
.articles-list-date time {
display: flex;
flex-direction: column;
align-items: center;
line-height: 1;
gap: .15rem;
}
.aldate-month {
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--accent);
}
.aldate-day {
font-size: 1.375rem;
font-weight: 800;
letter-spacing: -.04em;
color: var(--text);
line-height: 1.1;
}
.aldate-year {
font-size: .7rem;
color: var(--text-subtle);
}
.articles-list-body { min-width: 0; }
.articles-list-title {
font-size: .9375rem;
font-weight: 600;
letter-spacing: -.02em;
line-height: 1.4;
color: var(--text);
margin-bottom: .25rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.articles-list-excerpt {
font-size: .8125rem;
color: var(--text-subtle);
line-height: 1.55;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.articles-list-arrow {
font-size: .875rem;
color: var(--text-subtle);
flex-shrink: 0;
transition: color .15s, transform .15s;
position: relative;
z-index: 2;
}
.articles-list-item:hover .articles-list-arrow {
color: var(--accent);
transform: translateX(3px);
}
.articles-empty {
padding: 4rem 0;
text-align: center;
color: var(--text-muted);
}
.articles-empty a { color: var(--accent); }
/* ── Filter + sort toolbar ──────────────────────────────────────────────── */
.articles-toolbar {
padding: 1.75rem 0;
border-bottom: 1px solid var(--border);
background: rgba(17,24,39,.25);
}
/* Search input (client-side, self-hosted, no dependency) */
.articles-search-wrap {
position: relative;
max-width: 520px;
margin: 0 0 1.25rem;
}
.articles-search-icon {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
color: var(--text-subtle);
pointer-events: none;
}
.articles-search-input {
width: 100%;
background: rgba(255,255,255,.04);
border: 1px solid var(--border);
border-radius: 999px;
color: var(--text);
font-family: var(--font);
font-size: .9375rem;
padding: .75rem 2.75rem .75rem 2.75rem;
transition: border-color .15s, background .15s;
}
.articles-search-input::placeholder { color: var(--text-subtle); }
.articles-search-input:focus {
outline: none;
border-color: var(--accent);
background: rgba(255,255,255,.06);
}
/* Remove Safari/Chrome default "x" so our custom clear button shows alone */
.articles-search-input::-webkit-search-cancel-button,
.articles-search-input::-webkit-search-decoration { -webkit-appearance: none; }
.articles-search-clear {
position: absolute;
right: .5rem;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: 0;
color: var(--text-subtle);
font-size: 1.375rem;
line-height: 1;
padding: .25rem .6rem;
cursor: pointer;
border-radius: 999px;
}
.articles-search-clear:hover { color: var(--text); background: rgba(255,255,255,.06); }
/* Result counter — sits inside the pill, left of the clear button */
.articles-search-count {
position: absolute;
right: 2.75rem;
top: 50%;
transform: translateY(-50%);
font-family: var(--mono);
font-size: .7rem;
font-weight: 500;
letter-spacing: .04em;
color: var(--text);
background: rgba(37,99,235,.18);
padding: .2rem .55rem;
border-radius: 4px;
pointer-events: none;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.articles-search-count.is-empty { background: rgba(239,68,68,.18); color: #fecaca; }
/* Extend input padding when the counter is visible so text doesn't collide */
.articles-search-wrap:has(.articles-search-count:not([hidden])) .articles-search-input {
padding-right: 7rem;
}
.articles-toolbar-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
}
.articles-chips {
display: flex;
flex-wrap: wrap;
gap: .5rem .625rem;
}
.articles-chip {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .45rem .9rem;
font-family: var(--mono);
font-size: .8125rem;
font-weight: 500;
letter-spacing: .01em;
color: var(--text-muted);
background: rgba(255,255,255,.03);
border: 1px solid var(--border);
border-radius: 999px;
text-decoration: none;
transition: color .15s, border-color .15s, background .15s;
}
.articles-chip:hover {
color: var(--text);
border-color: var(--text-subtle);
text-decoration: none;
}
.articles-chip.is-active {
color: #fff;
background: var(--accent);
border-color: var(--accent);
}
.articles-chip-count {
font-size: .75rem;
opacity: .65;
font-variant-numeric: tabular-nums;
}
.articles-chip.is-active .articles-chip-count { opacity: .85; }
.articles-sort {
display: inline-flex;
align-items: center;
gap: .625rem;
font-family: var(--mono);
font-size: .8125rem;
color: var(--text-subtle);
}
.articles-sort-label {
text-transform: uppercase;
letter-spacing: .08em;
font-size: .7rem;
}
.articles-sort select {
font-family: var(--mono);
font-size: .8125rem;
background: rgba(255,255,255,.03);
color: var(--text);
border: 1px solid var(--border);
border-radius: 6px;
padding: .4rem .7rem;
cursor: pointer;
}
.articles-sort select:hover { border-color: var(--text-subtle); }
/* Category badges on featured + list items */
.articles-featured-cat,
.articles-list-cat {
display: inline-block;
font-family: var(--mono);
font-size: .7rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--accent);
padding: .2rem .55rem;
background: rgba(37,99,235,.12);
border-radius: 4px;
margin-left: .5rem;
vertical-align: middle;
}
.articles-list-cat {
margin: 0 0 .35rem;
margin-left: 0;
}
/* ── Platform page ──────────────────────────────────────────────────────── */
/* Capture-brief placeholders — visible dev-time cards describing what image
should live at a given slot. Once the real image is dropped in at the
`Save to:` path, the whole block is replaced
with a plain ![]()
. Intentionally visible: it's a content-team prompt,
not a hidden TODO comment. */
.img-brief {
margin: 2.5rem auto 0;
width: 100%;
max-width: 960px;
min-width: 0;
background: repeating-linear-gradient(
45deg,
rgba(37, 99, 235, .04),
rgba(37, 99, 235, .04) 12px,
rgba(17, 24, 39, .6) 12px,
rgba(17, 24, 39, .6) 24px
);
border: 2px dashed rgba(37, 99, 235, .5);
border-radius: var(--r-lg);
padding: 1.75rem 2rem;
position: relative;
overflow-wrap: break-word;
box-sizing: border-box;
}
.img-brief--hero {
aspect-ratio: 16 / 9;
display: flex;
flex-direction: column;
justify-content: center;
max-width: 1120px;
margin-top: 3rem;
}
.img-brief--thumb {
aspect-ratio: 16 / 10;
margin-top: 1.25rem;
padding: 1.25rem 1.25rem;
max-width: 100%; /* was: none — caused mobile overflow when this variant lived inside a wider grid track */
}
/* Real screenshot variant: image fills the 16:10 frame (no inner padding), so
the three engagement-card shots stay a uniform height regardless of the
source aspect ratio. object-position: top keeps the meaningful top of each
screenshot (toolbar / title / first results) in view. */
.img-brief--shot { padding: 0; overflow: hidden; }
.img-brief--shot img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
/* Long code blocks inside img-brief captions need to wrap on mobile, not
force horizontal scroll on the figure. */
.img-brief code,
.img-brief pre {
overflow-wrap: anywhere;
word-break: break-word;
max-width: 100%;
}
.img-brief-badge {
display: inline-block;
background: var(--accent);
color: #fff;
font-family: var(--mono);
font-size: .72rem;
font-weight: 500;
letter-spacing: .08em;
padding: .3rem .7rem;
border-radius: 4px;
margin-bottom: 1rem;
width: fit-content;
}
.img-brief-body p,
.img-brief > p {
font-size: .8125rem;
line-height: 1.55;
color: var(--text-muted);
margin: 0 0 .55rem;
}
.img-brief-body p:last-child,
.img-brief > p:last-child { margin-bottom: 0; }
.img-brief strong { color: var(--text); font-weight: 600; }
.img-brief code {
font-family: var(--mono);
font-size: .78rem;
background: rgba(0, 0, 0, .35);
color: var(--text);
padding: .12rem .4rem;
border-radius: 3px;
word-break: break-all;
}
.img-brief em { color: var(--text); font-style: italic; }
/* Compact variant for inside engagement cards — tighter typography */
.img-brief--thumb .img-brief-badge { font-size: .65rem; padding: .2rem .5rem; margin-bottom: .7rem; }
.img-brief--thumb > p { font-size: .75rem; margin-bottom: .4rem; line-height: 1.45; }
/* 2 · Interface preview */
.plat-preview {
padding: 3rem 0 5rem;
border-bottom: 1px solid var(--border);
}
.plat-preview-inner {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1.25rem;
max-width: 1120px;
margin: 0 auto;
}
.plat-preview-step {
position: relative;
background: rgba(17, 24, 39, .55);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 1.5rem 1.4rem 1.25rem;
display: flex;
flex-direction: column;
gap: .85rem;
}
.plat-preview-step-n {
position: absolute;
top: -.7rem; left: 1.1rem;
width: 1.75rem; height: 1.75rem;
border-radius: 50%;
background: var(--accent);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-family: var(--mono);
font-size: .75rem;
font-weight: 600;
border: 3px solid var(--bg);
}
.plat-preview-step h3 {
font-size: .8125rem;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--text-subtle);
font-weight: 500;
margin: 0;
}
.plat-preview-input {
background: rgba(0,0,0,.3);
border: 1px dashed var(--border);
border-radius: 6px;
padding: .75rem .9rem;
font-size: .8125rem;
line-height: 1.55;
color: var(--text-muted);
min-height: 120px;
font-family: var(--mono);
}
.plat-preview-input-label {
display: block;
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--text-subtle);
margin-bottom: .4rem;
}
.plat-preview-input p { margin: 0; }
.plat-preview-lenses {
display: flex;
flex-wrap: wrap;
gap: .35rem;
}
.plat-preview-lens {
font-family: var(--mono);
font-size: .7rem;
padding: .25rem .55rem;
background: rgba(255,255,255,.04);
color: var(--text-subtle);
border: 1px solid var(--border);
border-radius: 999px;
}
.plat-preview-lens.is-active {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.plat-preview-results {
display: flex;
flex-direction: column;
gap: .35rem;
font-family: var(--mono);
font-size: .72rem;
}
.plat-preview-row {
display: flex;
flex-direction: column;
gap: .2rem;
padding: .4rem .5rem;
background: rgba(0,0,0,.25);
border: 1px solid var(--border);
border-radius: 4px;
}
.plat-preview-row-head {
display: grid;
grid-template-columns: 1fr auto;
gap: .5rem;
align-items: center;
}
.plat-preview-row.is-hint {
color: var(--text-subtle);
font-style: italic;
border-style: dashed;
background: transparent;
}
.plat-preview-doc { color: var(--text); }
.plat-preview-title { color: var(--text-muted); font-size: .68rem; line-height: 1.3; }
.plat-preview-score { color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* Match strength carries the FTO-risk colour now (red = strong blocking hit). */
.plat-preview-score.is-high { color: #fca5a5; }
.plat-preview-score.is-med { color: #fcd34d; }
.plat-preview-score.is-low { color: #6ee7b7; }
@media (max-width: 1024px) {
.plat-preview-inner { grid-template-columns: 1fr; }
}
/* 3 · Lens rail */
.plat-lenses { padding: 5rem 0; border-bottom: 1px solid var(--border); }
.plat-lens-rail {
display: flex;
flex-wrap: wrap;
gap: .625rem;
justify-content: center;
max-width: 900px;
margin: 0 auto;
}
.plat-lens-pill {
display: inline-flex;
align-items: center;
gap: .45rem;
padding: .65rem 1.1rem;
font-family: var(--mono);
font-size: .875rem;
color: var(--text);
background: rgba(17,24,39,.65);
border: 1px solid var(--border);
border-radius: 999px;
text-decoration: none;
transition: border-color .15s, background .15s, transform .15s;
}
.plat-lens-pill span {
color: var(--text-subtle);
transition: transform .15s, color .15s;
}
.plat-lens-pill:hover {
border-color: var(--accent);
background: rgba(37,99,235,.08);
text-decoration: none;
transform: translateY(-1px);
}
.plat-lens-pill:hover span { color: var(--accent); transform: translateX(3px); }
/* 5 · Stances band (mirrors /about stances, scoped locally to avoid frozen-page cascade risk) */
.plat-stances { padding: 5rem 0; border-bottom: 1px solid var(--border); background: rgba(17,24,39,.25); }
.plat-stances-inner { max-width: 760px; margin: 0 auto; }
.plat-stances-list {
list-style: none;
padding: 0;
margin: 2rem 0 0;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.plat-stances-list li {
padding: 1.25rem 1.5rem;
background: rgba(17,24,39,.6);
border: 1px solid var(--border);
border-left: 3px solid var(--accent);
border-radius: var(--r-lg);
font-size: .9375rem;
line-height: 1.65;
color: var(--text-muted);
}
.plat-stances-list strong { color: var(--text); font-weight: 600; display: block; margin-bottom: .25rem; }
.plat-stances-list code { font-family: var(--mono); font-size: .85em; background: rgba(255,255,255,.05); padding: .1rem .3rem; border-radius: 3px; color: var(--text); }
/* 6 · Customer proof */
.plat-proof { padding: 4.5rem 0 3rem; }
.plat-proof .section-header { margin-bottom: 2.5rem; }
/* 6b · VOC band — wrapper only; the testimonial cards themselves use the
canonical .testimonial / .testimonial-quote / .testimonial-author /
.author-avatar / .author-name / .author-title classes from /about.
Any future testimonial surface on the site should reuse those classes. */
.plat-voc { padding: 3rem 0 5rem; border-bottom: 1px solid var(--border); }
/* Optional editorial gloss — "what changed:" one-liner under the quote.
Canonical across any testimonial block that wants to add it. */
.testimonial-gloss {
font-family: var(--mono);
font-size: .75rem;
color: var(--text-subtle);
margin: .75rem 0 1.25rem;
padding-top: .75rem;
border-top: 1px solid var(--border);
line-height: 1.55;
}
.testimonial:hover .testimonial-gloss { color: var(--text-muted); }
/* Name can be wrapped in an anchor (LinkedIn) — keep it subtle, reveal on hover */
.author-name a { color: inherit; text-decoration: none; }
.author-name a:hover { color: var(--accent); }
/* 7 · Differentiation claim */
.plat-diff { padding: 5rem 0; background: rgba(17,24,39,.4); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.plat-diff-inner { max-width: 780px; margin: 0 auto; text-align: center; }
.plat-diff-tag {
font-family: var(--mono);
font-size: .75rem;
text-transform: uppercase;
letter-spacing: .14em;
color: var(--accent);
margin: 0 0 1.25rem;
}
.plat-diff-headline {
font-family: var(--mono);
font-size: clamp(1.5rem, 3vw, 2.25rem);
font-weight: 500;
color: var(--text);
line-height: 1.3;
letter-spacing: -.02em;
margin: 0 0 1.75rem;
}
.plat-diff-sub {
font-size: 1rem;
line-height: 1.7;
color: var(--text-muted);
max-width: 640px;
margin: 0 auto;
}
/* ── Technology page ────────────────────────────────────────────────────── */
.img-brief--wide {
aspect-ratio: 14 / 5;
max-width: 1120px;
margin-top: 2rem;
}
/* 2 · Pipeline flow */
.tech-pipeline { padding: 4rem 0; border-bottom: 1px solid var(--border); }
.tech-flow {
display: flex;
align-items: stretch;
gap: 1rem;
max-width: 1180px;
margin: 2.5rem auto 0;
flex-wrap: nowrap;
}
.tech-flow-step {
flex: 1 1 0;
min-width: 0;
background: rgba(17,24,39,.6);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 1.5rem 1.25rem 1.25rem;
position: relative;
}
.tech-flow-badge {
position: absolute;
top: -.7rem; left: 1.1rem;
width: 1.85rem; height: 1.85rem;
border-radius: 50%;
background: var(--accent);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-family: var(--mono);
font-size: .75rem;
font-weight: 600;
border: 3px solid var(--bg);
}
.tech-flow-step h3 {
font-size: .95rem;
font-weight: 600;
color: var(--text);
margin: .2rem 0 .5rem;
}
.tech-flow-body {
font-size: .8125rem;
line-height: 1.55;
color: var(--text-muted);
margin: 0;
}
.tech-flow-arrow {
display: flex;
align-items: center;
color: var(--text-subtle);
font-size: 1.25rem;
flex-shrink: 0;
}
@media (max-width: 1024px) {
.tech-flow { flex-direction: column; gap: 1.75rem; }
.tech-flow-arrow { transform: rotate(90deg); align-self: center; }
/* The pipeline illustration only aligns under the in-a-row step boxes;
once they stack it is redundant + cramped, so hide it. */
.tech-pipeline-svg { display: none; }
}
/* Inline SVG pipeline illustration (replaces the old image placeholder). */
.tech-pipeline-svg { margin: .5rem auto 0; max-width: 1180px; }
.tech-pipeline-svg svg { width: 100%; height: auto; display: block; }
@keyframes techCaretBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.tech-pipeline-svg .tp-caret { animation: techCaretBlink 1.05s step-end infinite; }
@keyframes techQueryPulse { 0%, 100% { opacity: .35; } 50% { opacity: .7; } }
.tech-pipeline-svg .tp-pulse { animation: techQueryPulse 3s ease-in-out infinite; transform-origin: center; }
@media (prefers-reduced-motion: reduce) {
.tech-pipeline-svg .tp-caret,
.tech-pipeline-svg .tp-pulse { animation: none; }
}
/* 3 · Three pillars */
.tech-pillars { padding: 5rem 0; border-bottom: 1px solid var(--border); background: rgba(17,24,39,.25); }
.tech-pillar-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin-top: 3rem;
}
.tech-pillar {
background: rgba(10,15,30,.7);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 2rem 1.75rem 1.75rem;
position: relative;
display: flex;
flex-direction: column;
}
.tech-pillar-n {
font-family: var(--mono);
font-size: 2rem;
font-weight: 800;
letter-spacing: -.04em;
background: var(--gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
line-height: 1;
margin-bottom: 1rem;
}
.tech-pillar h3 {
font-size: 1.125rem;
font-weight: 700;
color: var(--text);
margin: 0 0 .5rem;
letter-spacing: -.01em;
}
.tech-pillar-lead {
font-size: .9375rem;
line-height: 1.55;
color: var(--text-muted);
margin: 0 0 1.25rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid var(--border);
}
.tech-pillar-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: .6rem;
}
.tech-pillar-list li {
font-size: .875rem;
line-height: 1.55;
color: var(--text-muted);
padding-left: 1.1rem;
position: relative;
}
.tech-pillar-list li::before {
content: '';
position: absolute;
left: 0; top: .55rem;
width: 4px; height: 4px;
border-radius: 50%;
background: var(--accent);
}
.tech-pillar-list strong { color: var(--text); font-weight: 600; }
@media (max-width: 1024px) { .tech-pillar-grid { grid-template-columns: 1fr; } }
/* 4 · LLM-RAG vs Kwintely */
/* No border-bottom: the following .tech-proof band has its own border-top, and
having both produced a double horizontal line between the two sections. */
.tech-versus { padding: 5rem 0; }
.tech-versus-table-wrap {
max-width: 1080px;
margin: 2.5rem auto 0;
overflow-x: auto;
}
.tech-versus-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: .9375rem;
min-width: 720px;
}
.tech-versus-table th,
.tech-versus-table td {
padding: 1rem 1.25rem;
text-align: left;
vertical-align: top;
line-height: 1.5;
border-bottom: 1px solid var(--border);
}
.tech-versus-table thead th {
font-family: var(--mono);
font-size: .75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--text-subtle);
background: rgba(17,24,39,.4);
border-bottom-width: 2px;
border-bottom-color: var(--text-subtle);
}
.tech-versus-table thead th.is-us {
color: var(--accent);
background: rgba(37,99,235,.12);
}
.tech-versus-table tbody th {
font-weight: 600;
color: var(--text);
width: 160px;
background: rgba(17,24,39,.25);
}
.tech-versus-table td { color: var(--text-muted); }
.tech-versus-table td.is-us {
background: rgba(37,99,235,.08);
color: var(--text);
border-left: 2px solid var(--accent);
}
.tech-versus-table td.is-us strong { color: var(--accent); }
@media (max-width: 1024px) {
.tech-versus-table { min-width: 0; }
.tech-versus-table thead { display: none; }
.tech-versus-table, .tech-versus-table tbody, .tech-versus-table tr, .tech-versus-table th, .tech-versus-table td { display: block; width: 100%; }
.tech-versus-table tr { margin-bottom: 1.25rem; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.tech-versus-table tbody th { border-bottom: 1px solid var(--border); }
.tech-versus-table td::before { content: attr(data-col) ':'; display: block; font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-subtle); margin-bottom: .4rem; }
}
/* 5 · Proof volume */
.tech-proof {
padding: 3.5rem 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background: rgba(17,24,39,.4);
margin: 1rem 0;
}
.tech-proof-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
}
.tech-proof-item { text-align: center; }
.tech-proof-metric {
font-size: 2.25rem;
font-weight: 800;
letter-spacing: -.03em;
background: var(--gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
line-height: 1;
margin-bottom: .5rem;
font-variant-numeric: tabular-nums;
}
.tech-proof-label {
font-size: .8125rem;
color: var(--text-muted);
line-height: 1.4;
max-width: 22ch;
margin: 0 auto;
}
@media (max-width: 1024px) { .tech-proof-grid { grid-template-columns: repeat(2, 1fr); } }
/* 6 · VOC quote — single column, centered */
.tech-voc { padding: 4rem 0; border-bottom: 1px solid var(--border); }
.tech-voc-grid.testimonials-grid {
grid-template-columns: minmax(0, 720px);
justify-content: center;
max-width: 720px;
margin: 0 auto;
}
/* 7 · Closer */
.tech-closer { padding: 5rem 0; background: rgba(17,24,39,.45); }
.tech-closer-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.tech-closer-tag {
font-family: var(--mono);
font-size: .72rem;
text-transform: uppercase;
letter-spacing: .14em;
color: var(--accent);
margin: 0 0 1rem;
}
.tech-closer-headline {
font-family: var(--mono);
font-size: clamp(1.75rem, 4vw, 2.75rem);
font-weight: 500;
color: var(--text);
line-height: 1.2;
letter-spacing: -.02em;
margin: 0 0 1.75rem;
background: var(--gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.tech-closer-sub {
font-size: 1rem;
line-height: 1.7;
color: var(--text-muted);
max-width: 640px;
margin: 0 auto;
}
/* legacy card styles kept for other uses */
.articles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
/* Grid items default to `min-width: auto` (= min-content), so a card with
long unbroken text inside will refuse to shrink below content width and
bleed past its grid track. min-width: 0 lets it shrink to track width. */
.articles-grid > * { min-width: 0; }
.article-card {
background: rgba(17,24,39,.75);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid var(--border);
border-radius: var(--r-lg);
position: relative;
transition: border-color .25s, box-shadow .25s, transform .25s;
display: flex;
flex-direction: column;
min-width: 0;
}
.article-card:hover {
border-color: rgba(37,99,235,.45);
box-shadow: 0 8px 32px rgba(37,99,235,.12), 0 0 0 1px rgba(37,99,235,.15);
transform: translateY(-2px);
}
.article-card-link { position: absolute; inset: 0; border-radius: var(--r-lg); }
.article-card-body { padding: 1.75rem; display: flex; flex-direction: column; flex: 1; }
.article-card-date { font-size: .8rem; color: var(--text-subtle); display: block; margin-bottom: .75rem; }
.article-card-title { font-size: 1.125rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.35; margin-bottom: .875rem; }
.article-card-title a { color: var(--text); position: relative; z-index: 1; }
.article-card-title a:hover { color: var(--accent); text-decoration: none; }
.article-card-excerpt { font-size: .9rem; color: var(--text-muted); line-height: 1.6; flex: 1; margin-bottom: 1.25rem; }
.article-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--border-2); padding-top: 1rem; }
.article-card-author { font-size: .8125rem; color: var(--text-subtle); }
.article-card-cta { font-size: .8125rem; font-weight: 600; color: var(--accent); position: relative; z-index: 1; }
/* ── Article post ────────────────────────────────────────────────────────── */
.post-header {
padding: 4rem 0 2.5rem;
border-bottom: 1px solid var(--border);
}
/* Article hero: a real ![]()
(.post-header-photo, for SEO/alt) behind a strong
dark scrim, so the (already light) header copy stays crisp over the photo. */
.post-header--photo {
position: relative;
isolation: isolate;
overflow: hidden;
border-bottom: none;
padding: 5rem 0 3.5rem;
}
.post-header-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
}
.post-header--photo::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(120deg, rgba(11,15,26,.93) 0%, rgba(11,15,26,.86) 50%, rgba(11,15,26,.70) 100%);
}
.post-header--photo .container { position: relative; z-index: 2; }
/* Same photo treatment inside the /articles "Latest" featured box. */
.articles-featured--photo { isolation: isolate; }
.articles-featured-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
}
.articles-featured--photo::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(120deg, rgba(11,15,26,.92) 0%, rgba(11,15,26,.78) 55%, rgba(11,15,26,.60) 100%);
}
.articles-featured--photo::before { z-index: 4; } /* keep the gradient top line on top */
.articles-featured--photo > :not(.articles-featured-photo):not(.articles-featured-link) { position: relative; z-index: 2; }
.articles-featured--photo .articles-featured-link { z-index: 3; }
.post-title {
font-family: var(--mono);
font-size: clamp(1.5rem, 2.6vw, 2.25rem);
font-weight: 500;
letter-spacing: -.04em;
line-height: 1.2;
margin-bottom: 1.25rem;
}
.post-meta-row {
display: flex;
gap: 1.25rem;
align-items: center;
flex-wrap: wrap;
margin-bottom: 1.25rem;
}
.post-date { font-size: .875rem; color: var(--text-subtle); }
.post-author { font-size: .875rem; color: var(--text-muted); }
.post-keywords { font-size: .8125rem; color: var(--text-subtle); }
.post-excerpt {
font-size: 1.125rem;
color: var(--text-muted);
line-height: 1.7;
max-width: 660px;
}
.post-body { padding: 3rem 0 5rem; }
.post-content {
max-width: 720px;
font-size: 1.0625rem;
line-height: 1.8;
color: var(--text-muted);
}
.post-content h2 { font-size: 1.5rem; font-weight: 700; color: var(--text); margin: 2.5rem 0 1rem; letter-spacing: -.03em; }
.post-content h3 { font-size: 1.1875rem; font-weight: 600; color: var(--text); margin: 2rem 0 .875rem; }
.post-content h4 { font-size: 1rem; font-weight: 600; color: var(--text); margin: 1.5rem 0 .625rem; }
.post-content p { margin-bottom: 1.25rem; }
.post-content ul, .post-content ol { list-style: revert; padding-left: 1.5rem; margin-bottom: 1.25rem; }
.post-content li { margin-bottom: .5rem; }
.post-content strong { color: var(--text); font-weight: 600; }
.post-content em { color: var(--text); font-style: italic; }
.post-content code {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 4px;
padding: .15em .4em;
font-family: var(--mono);
font-size: .875em;
color: #93c5fd;
}
.post-content pre {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 1.25rem;
overflow-x: auto;
margin-bottom: 1.5rem;
}
.post-content pre code { background: none; border: none; padding: 0; font-size: .875rem; color: var(--text-muted); }
.post-content blockquote {
border-left: 3px solid var(--accent);
padding: 1rem 1.5rem;
margin: 2rem 0;
background: var(--surface);
border-radius: 0 var(--r) var(--r) 0;
font-style: italic;
color: var(--text);
}
.post-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.post-content hr { border: none; border-top: 1px solid var(--border); margin: 2.5rem 0; }
.post-content table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: .9rem; }
.post-content th { background: var(--surface); padding: .75rem 1rem; text-align: left; font-weight: 600; color: var(--text); border-bottom: 2px solid var(--border); }
.post-content td { padding: .75rem 1rem; border-bottom: 1px solid var(--border); }
.post-footer-cta { margin-top: 4rem; max-width: 720px; }
.post-cta-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 2rem 2.5rem;
}
.post-cta-card h3 {
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -.02em;
margin-bottom: .625rem;
}
.post-cta-actions {
display: flex;
gap: .75rem;
flex-wrap: wrap;
align-items: center;
}
/* ── Article-level upgrades (category badge, TL;DR, TOC, share, related) ─ */
.post-category-badge {
display: inline-block;
font-family: var(--mono);
font-size: .7rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--accent);
padding: .25rem .65rem;
background: rgba(37,99,235,.14);
border-radius: 4px;
margin-bottom: 1rem;
}
.post-meta-row {
font-family: var(--mono);
font-size: .8125rem;
color: var(--text-subtle);
letter-spacing: .01em;
display: flex;
align-items: center;
gap: .5rem;
flex-wrap: wrap;
}
.post-meta-row a { color: var(--text-muted); }
.post-meta-row a:hover { color: var(--text); }
.post-meta-dot { opacity: .4; }
.post-reading-time { color: var(--text-subtle); }
.post-tldr {
margin: 2rem 0 0;
padding: 1.25rem 1.5rem 1.5rem;
background: linear-gradient(135deg, rgba(124,58,237,.09), rgba(34,211,238,.05));
border: 1px solid var(--border);
border-left: 3px solid var(--accent);
border-radius: var(--r-lg);
max-width: 760px;
}
.post-tldr-tag {
font-family: var(--mono);
font-size: .7rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .14em;
color: var(--accent);
margin: 0 0 .5rem;
}
.post-tldr-text {
font-size: 1.0625rem;
color: var(--text);
line-height: 1.55;
margin: 0;
}
/* Two-column body with sticky TOC on wide screens */
.post-body-grid {
display: grid;
grid-template-columns: 220px 1fr;
gap: 3rem;
align-items: start;
}
.post-toc {
position: sticky;
top: 5rem;
font-family: var(--mono);
font-size: .8125rem;
}
.post-toc-title {
text-transform: uppercase;
font-size: .7rem;
letter-spacing: .14em;
color: var(--text-subtle);
margin: 0 0 .75rem;
}
.post-toc-list {
list-style: none;
padding: 0 0 0 14px; /* space for the rail + fill */
margin: 0;
display: flex;
flex-direction: column;
gap: .45rem;
position: relative;
}
/* --toc-progress is set on #post-toc by the JS; it cascades here. The
`var(--toc-progress, 0%)` fallback keeps the fill invisible before JS runs. */
/* The rail — always-visible pale track on the left. */
.post-toc-list::after {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: rgba(255, 255, 255, .10);
border-radius: 2px;
pointer-events: none;
}
/* The fill — real DOM element injected by JS. Height is set via direct
element.style.height, no CSS variables involved (dodges cascade edge cases
that broke the previous implementation). */
.post-toc-rail-fill {
position: absolute;
left: 0;
top: 0;
width: 3px;
height: 0;
background: linear-gradient(180deg, #2563eb 0%, #7c3aed 100%);
border-radius: 2px;
transition: height .12s linear;
pointer-events: none;
z-index: 2;
box-shadow: 0 0 8px rgba(124, 58, 237, .35);
}
.post-toc-list li { padding: 0; }
.post-toc-list a {
display: block;
padding: .2rem 0;
color: var(--text-subtle);
text-decoration: none;
line-height: 1.45;
transition: color .15s, opacity .15s;
position: relative;
z-index: 3;
}
.post-toc-list a:hover { color: var(--text); }
/* Sections the reader has already scrolled past — subtle dim to pair with
the rail-fill that already covered this region. */
.post-toc-list a.is-passed {
color: var(--text-muted);
}
/* Current section — strongest signal (accent text, medium weight) */
.post-toc-list a.is-active {
color: var(--accent);
font-weight: 500;
}
@media (max-width: 1024px) {
.post-body-grid { grid-template-columns: 1fr; gap: 1.5rem; }
.post-toc { position: static; max-width: 760px; }
.post-toc-list { border-left: none; flex-direction: row; flex-wrap: wrap; gap: .375rem .75rem; }
.post-toc-list::before { display: none; } /* rail fill doesn't fit the pill layout */
.post-toc-list a {
padding: .3rem .7rem;
background: rgba(255,255,255,.04);
border-radius: 999px;
border-left: none;
}
.post-toc-list a.is-passed {
background: rgba(124,58,237,.12);
color: var(--text-muted);
}
.post-toc-list a.is-active {
background: rgba(37,99,235,.22);
color: var(--text);
border-left: none;
}
}
/* Inline fallback progress bar (articles with no H2s, so no TOC to decorate).
Placed inside rather than to avoid the
Firefox stacking-context issue with the backdrop-filtered sticky header. */
.reading-progress--inline {
position: sticky;
top: 0;
height: 3px;
z-index: 50;
margin-top: 0;
}
/* Share row — subtle, sits above footer CTA */
.post-share {
display: flex;
align-items: center;
gap: .75rem;
flex-wrap: wrap;
margin: 2.5rem 0 1.25rem;
padding: 1rem 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.post-share-label {
font-family: var(--mono);
font-size: .75rem;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--text-subtle);
margin-right: .25rem;
}
.post-share-btn {
font-family: var(--mono);
font-size: .8125rem;
color: var(--text-muted);
background: rgba(255,255,255,.03);
border: 1px solid var(--border);
border-radius: 999px;
padding: .4rem .9rem;
cursor: pointer;
text-decoration: none;
transition: color .15s, border-color .15s, background .15s;
}
.post-share-btn:hover {
color: var(--text);
border-color: var(--text-subtle);
text-decoration: none;
}
.post-share-btn.is-copied {
color: #fff;
background: var(--accent);
border-color: var(--accent);
}
/* Author bio card */
.post-author-card {
margin: 2.5rem 0;
padding: 1.75rem 2rem;
background: rgba(17,24,39,.55);
border: 1px solid var(--border);
border-radius: var(--r-lg);
max-width: 760px;
}
.post-author-card-name {
font-size: 1.0625rem;
font-weight: 700;
color: var(--text);
margin-bottom: .2rem;
}
.post-author-card-role {
font-family: var(--mono);
font-size: .75rem;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--accent);
margin-bottom: .8rem;
}
.post-author-card-bio {
font-size: .9375rem;
line-height: 1.65;
color: var(--text-muted);
margin: 0 0 .75rem;
}
.post-author-card-link {
font-size: .875rem;
color: var(--accent);
font-weight: 500;
}
/* Related articles row */
.post-related {
margin: 3rem 0 2rem;
}
.post-related-tag {
font-family: var(--mono);
font-size: .7rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .14em;
color: var(--text-subtle);
margin: 0 0 1rem;
}
.post-related-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.post-related-card {
display: flex;
flex-direction: column;
padding: 1.5rem 1.5rem 1.25rem;
background: rgba(17,24,39,.55);
border: 1px solid var(--border);
border-radius: var(--r-lg);
text-decoration: none;
color: inherit;
transition: border-color .2s, transform .2s, box-shadow .2s;
}
.post-related-card:hover {
border-color: rgba(37,99,235,.5);
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(37,99,235,.12);
text-decoration: none;
}
.post-related-cat {
display: inline-block;
font-family: var(--mono);
font-size: .65rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--accent);
background: rgba(37,99,235,.12);
padding: .15rem .5rem;
border-radius: 3px;
margin-bottom: .6rem;
align-self: flex-start;
}
.post-related-title {
font-size: 1rem;
font-weight: 600;
color: var(--text);
margin: 0 0 .5rem;
line-height: 1.35;
}
.post-related-excerpt {
font-size: .8125rem;
color: var(--text-muted);
line-height: 1.55;
margin: 0 0 .75rem;
flex: 1;
}
.post-related-cta {
font-family: var(--mono);
font-size: .75rem;
color: var(--accent);
margin-top: auto;
}
@media (max-width: 1024px) {
.post-related-grid { grid-template-columns: 1fr; }
}
/* ── Reading progress bar (appears only on article pages) ───────────────── */
/* Firefox-resilient: avoids nested CSS-var resolution, uses high z-index to
beat the backdrop-filtered sticky site-header's stacking context. */
.reading-progress {
position: fixed;
top: 0;
left: 0;
right: auto;
bottom: auto;
height: 3px;
width: 0;
background: #2563eb; /* solid fallback for any browser without gradient support */
background: linear-gradient(90deg, #2563eb 0%, #7c3aed 100%);
z-index: 9999;
transition: width .12s linear;
pointer-events: none;
will-change: width;
}
/* ── Print-only elements (visible only when printing) ───────────────────── */
/* Slim fixed reading-progress bar — mobile only (the TOC sidebar is hidden there). */
.reading-progress-fixed {
position: fixed; top: 0; left: 0;
height: 3px; width: 0;
background: linear-gradient(90deg, #2563eb 0%, #7c3aed 100%);
z-index: 9999; transition: width .1s linear; pointer-events: none;
display: none;
}
@media (max-width: 1024px) {
.reading-progress-fixed { display: block; }
.post-toc { display: none; }
}
.print-only { display: none; }
/* ── Print stylesheet (PDF export) ──────────────────────────────────────── */
@media print {
/* Page setup — Kwintely branding as running header + footer */
@page {
margin: 2.2cm 2cm 2.5cm;
@top-left {
content: "Kwintely Intelligence";
font-family: 'Geist', sans-serif;
font-size: 8.5pt;
color: #555;
letter-spacing: .05em;
}
@top-right {
content: "kwintely.com";
font-family: 'Geist', sans-serif;
font-size: 8.5pt;
color: #555;
}
@bottom-left {
content: "kontakt@kwintely.de";
font-family: 'Geist', sans-serif;
font-size: 8.5pt;
color: #555;
}
@bottom-right {
content: "Page " counter(page) " / " counter(pages);
font-family: 'Geist', sans-serif;
font-size: 8.5pt;
color: #555;
}
}
/* Hide everything that isn't article content */
.site-header, .site-footer, nav.nav, .footer,
.post-share, .post-footer-cta,
.post-author-card, .post-related, .post-nav, .post-toc,
.articles-toolbar, .reading-progress,
[class*="cookie"], [class*="Cookie"] {
display: none !important;
}
/* Reveal the print-only branding header + footer */
.print-only { display: block !important; }
/* Body reset: white background, black text, serif-free sans */
html, body { background: #fff !important; color: #111 !important; }
body { font-family: 'Geist', -apple-system, sans-serif; font-size: 11pt; line-height: 1.55; }
.container { max-width: none; padding: 0; margin: 0; }
.post-root { display: block; }
/* Print header — logo + brand on first page */
.post-print-header {
display: flex !important;
align-items: center;
gap: 1rem;
padding-bottom: 1rem;
margin-bottom: 1.5rem;
border-bottom: 1.5px solid #111;
}
.post-print-logo { height: 36px; width: auto; }
.post-print-brand-name { font-size: 11pt; font-weight: 700; color: #111; }
.post-print-brand-meta { font-size: 8.5pt; color: #555; margin-top: .2rem; }
/* Article body */
.post-category-badge {
display: inline-block !important;
background: #fff;
color: #555;
border: 1px solid #999;
padding: .15rem .55rem;
font-size: 8pt;
}
.post-title {
font-family: 'Geist', sans-serif !important;
font-size: 22pt !important;
color: #111 !important;
line-height: 1.2 !important;
margin: .3cm 0 .3cm !important;
page-break-after: avoid;
}
.post-meta-row {
color: #555 !important;
font-size: 9pt !important;
margin-bottom: 1rem !important;
}
.post-meta-row a { color: #555 !important; }
.post-tldr {
background: #f5f5f5 !important;
border: 1px solid #999 !important;
border-left-width: 3px !important;
border-left-color: #333 !important;
padding: .8rem 1rem !important;
margin: .5cm 0 !important;
page-break-inside: avoid;
}
.post-tldr-tag { color: #333 !important; }
.post-tldr-text { color: #111 !important; font-size: 10.5pt !important; }
.post-content {
max-width: none;
font-size: 11pt;
line-height: 1.55;
}
.post-content h2 {
font-size: 14pt !important;
color: #111 !important;
page-break-after: avoid;
margin-top: 1.2em !important;
}
.post-content h3 {
font-size: 12pt !important;
color: #111 !important;
page-break-after: avoid;
}
.post-content p, .post-content li {
font-size: 11pt;
color: #111;
orphans: 3;
widows: 3;
}
.post-content a {
color: #111 !important;
text-decoration: underline;
}
/* Expand external URLs inline so readers have the source in print. */
.post-content a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 8.5pt;
color: #666;
word-break: break-all;
}
.post-content a[href^="/"]::after { content: ""; }
/* Print footer (appears at end of content, last page) */
.post-print-footer {
display: block !important;
margin-top: 1.5cm;
padding-top: .6cm;
border-top: 1px solid #999;
font-size: 9pt;
color: #555;
text-align: center;
}
.post-print-footer p { margin: .15rem 0; }
}
.post-cta-card p {
color: var(--text-muted);
font-size: .9375rem;
line-height: 1.65;
margin-bottom: 1.25rem;
max-width: 520px;
}
.post-nav { margin: 2.5rem 0 5rem; padding-top: 2rem; border-top: 1px solid var(--border); max-width: 720px; }
.post-nav-back { font-size: .9rem; color: var(--text-muted); font-weight: 500; }
.post-nav-back:hover { color: var(--accent); text-decoration: none; }
/* ── Use case detail pages ───────────────────────────────────────────────── */
.uc-hero {
padding: 4rem 0 5rem;
border-bottom: 1px solid var(--border);
}
.uc-hero-inner {
display: grid;
grid-template-columns: 1fr 480px;
gap: 4rem;
align-items: center;
}
.uc-hero-content { padding-top: .5rem; }
.uc-hero-content .uc-lvl-badge { margin-bottom: 1.25rem; display: inline-block; }
.uc-hero-content h1 {
font-family: var(--mono);
font-size: clamp(1.75rem, 2.6vw, 2.5rem);
font-weight: 500;
letter-spacing: -.04em;
line-height: 1.2;
margin-bottom: 1.25rem;
}
.uc-hero-lead {
font-size: 1.0625rem;
color: var(--text-muted);
line-height: 1.75;
max-width: 540px;
margin-bottom: 2rem;
}
.uc-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.uc-hero-screen { position: sticky; top: 7rem; }
.uc-hero-screen .uc-screen { font-size: .875rem; }
.uc-screen-title-label { font-size: .75rem; color: var(--text-subtle); margin-left: .5rem; }
.uc-screen-footer { font-size: .75rem; color: var(--text-subtle); padding: .5rem 0 0; }
.uc-problem {
padding: 4rem 0;
background: var(--surface);
border-bottom: 1px solid var(--border);
}
.uc-problem-inner { max-width: 760px; }
.uc-problem-inner h2 {
font-size: 1.375rem;
font-weight: 700;
letter-spacing: -.03em;
margin-bottom: 1rem;
}
.uc-problem-inner p { font-size: 1.0625rem; color: var(--text-muted); line-height: 1.75; }
.uc-outputs { padding: 4.5rem 0; border-bottom: 1px solid var(--border); }
.uc-section-title {
font-family: var(--mono);
font-size: 1.375rem;
font-weight: 500;
letter-spacing: -.04em;
margin-bottom: 2rem;
}
.uc-outputs-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}
.uc-output-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 1.75rem;
}
.uc-output-card h3 {
font-size: 1rem;
font-weight: 700;
color: var(--text);
margin-bottom: .625rem;
letter-spacing: -.02em;
}
.uc-output-card p { font-size: .9rem; color: var(--text-muted); line-height: 1.65; }
.uc-steps-section { padding: 4.5rem 0; background: var(--surface); border-bottom: 1px solid var(--border); }
.uc-steps { display: flex; flex-direction: column; gap: 0; max-width: 720px; }
.uc-step {
display: grid;
grid-template-columns: 48px 1fr;
gap: 1.5rem;
padding: 2rem 0;
border-bottom: 1px solid var(--border-2);
align-items: start;
}
.uc-step:last-child { border-bottom: none; }
.uc-step-num {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--bg);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
font-weight: 800;
color: var(--accent);
flex-shrink: 0;
}
.uc-step-body h3 { font-size: 1rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: .5rem; }
.uc-step-body p { font-size: .9375rem; color: var(--text-muted); line-height: 1.65; }
.uc-personas { padding: 4.5rem 0; border-bottom: 1px solid var(--border); }
.uc-personas-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
border-radius: var(--r-lg);
overflow: hidden;
}
.uc-persona-card {
background: var(--surface);
padding: 1.5rem;
}
.uc-persona-title { font-size: .9375rem; font-weight: 700; color: var(--text); margin-bottom: .5rem; }
.uc-persona-context { font-size: .8125rem; color: var(--text-subtle); line-height: 1.5; }
/* Compared bridge — single text-line nudge to /compared on use-case detail. */
.uc-compared-bridge { padding: 1.25rem 0; border-bottom: 1px solid var(--border); background: rgba(17,24,39,.3); }
.uc-compared-bridge-text { margin: 0; text-align: center; color: var(--text-muted); font-size: .9375rem; }
.uc-compared-bridge-text a { color: var(--uc-accent, var(--accent, #3b82f6)); font-weight: 500; text-decoration: none; }
.uc-compared-bridge-text a:hover { text-decoration: underline; }
/* Compared bridge on industry detail — same pattern. */
.ind-hero-compared { margin: 1.25rem 0 0; color: var(--text-muted); font-size: .9375rem; }
.ind-hero-compared a { color: var(--ind-accent, var(--accent, #3b82f6)); font-weight: 500; text-decoration: none; }
.ind-hero-compared a:hover { text-decoration: underline; }
.uc-related { padding: 4.5rem 0; border-bottom: 1px solid var(--border); }
.uc-related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.uc-related-reason { font-size: .9375rem; color: var(--text-muted); line-height: 1.5; margin: .5rem 0 .75rem; }
/* ── Use case detail — JTBD additions ──────────────────────────────────────
Sections added in the JTBD/Bourgoin rewrite: screen-brief placeholder,
anchor moment, before/after compare table, proof band, FAQ, 3-CTA actions. */
/* Product screenshot placeholder — replaces the prior fake mock screen.
Lives in the hero next to the headline. Faint window-chrome bar above
the brief signals "screenshot pending" rather than "creative brief". */
.uc-screen-brief {
background: var(--surface);
border: 1px dashed var(--border);
border-radius: var(--r-lg);
position: relative;
margin: 0;
overflow: hidden;
}
.uc-screen-brief-bar {
display: flex;
align-items: center;
gap: .5rem;
padding: .65rem 1rem;
background: rgba(0,0,0,.3);
border-bottom: 1px dashed var(--border);
}
.uc-screen-brief-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
opacity: .55;
}
.uc-screen-brief-tab {
margin-left: .75rem;
font-family: var(--mono);
font-size: .75rem;
color: var(--text-subtle);
letter-spacing: -.005em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.uc-screen-brief-body { padding: 1.5rem; }
.uc-screen-brief-badge {
display: inline-block;
font-family: var(--mono);
font-size: .6875rem;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--accent, #2563eb);
background: rgba(37,99,235,.08);
padding: .25rem .5rem;
border-radius: .25rem;
margin-bottom: 1rem;
}
.uc-screen-brief-title {
font-family: var(--mono);
font-size: .9375rem;
color: var(--text);
margin: 0 0 .75rem;
letter-spacing: -.01em;
}
.uc-screen-brief-text {
font-size: .8125rem;
color: var(--text-muted);
line-height: 1.65;
margin: 0;
}
/* ── FTO / prior-art product-shot mockup (light "screenshot" that pops on the dark page) ── */
.uc-screen-brief--live {
border-style: solid;
border-color: #e2e8f0;
background: #fff;
box-shadow: 0 20px 55px -22px rgba(0,0,0,.6);
}
.uc-screen-brief--live .uc-screen-brief-bar {
border-bottom-style: solid;
background: #eef2f7;
border-bottom-color: #e2e8f0;
}
.uc-screen-brief--live .uc-screen-brief-tab { color: #475569; }
/* ── Real product screenshot in the hero card (dark analytics dashboard) ── */
.uc-screen-brief--shot {
border-style: solid;
border-color: #1e2733;
background: #0e1217;
box-shadow: 0 20px 55px -22px rgba(0,0,0,.7);
}
.uc-screen-brief--shot .uc-screen-brief-bar {
border-bottom-style: solid;
background: #161c24;
border-bottom-color: #1e2733;
}
.uc-screen-brief--shot .uc-screen-brief-tab { color: #94a3b8; }
.uc-screen-shot {
display: block;
width: 100%;
height: auto;
}
.uc-fto-shot {
/* Light theme: re-point the design tokens so every child flips to light. */
--surface: #ffffff;
--bg: #f3f6fb;
--text: #1e293b;
--text-muted: #475569;
--text-subtle: #64748b;
--border: #e2e8f0;
padding: 1rem;
font-size: .72rem;
line-height: 1.4;
background:
radial-gradient(circle at 85% 0%, rgba(37,99,235,.07) 0%, transparent 50%),
var(--surface);
}
/* Colored chips were tuned for a dark bg; darken for contrast on white. */
.uc-fto-shot .ftos-badge--high { background: rgba(220,38,38,.12); color: #dc2626; }
.uc-fto-shot .ftos-badge--med { background: rgba(180,83,9,.14); color: #b45309; }
.uc-fto-shot .ftos-badge--clear { background: rgba(4,120,87,.13); color: #047857; }
.uc-fto-shot .ftos-card--open { border-color: rgba(220,38,38,.3); background: rgba(220,38,38,.05); }
.uc-fto-shot .ftos-passage { background: rgba(220,38,38,.06); color: #475569; border-left-color: #dc2626; }
.uc-fto-shot .ftos-passage-tag { color: #dc2626; }
.ftos-kicker {
display: block;
font-family: var(--mono);
font-size: .6rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--text-subtle);
margin-bottom: .4rem;
}
.ftos-query {
display: flex;
align-items: flex-start;
gap: .6rem;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
padding: .6rem .7rem;
}
.ftos-query p { margin: 0; color: var(--text); font-size: .72rem; line-height: 1.45; }
.ftos-run {
flex-shrink: 0;
align-self: stretch;
display: flex;
align-items: center;
font-family: var(--mono);
font-size: .64rem;
font-weight: 600;
white-space: nowrap;
color: #fff;
background: var(--accent);
border-radius: 6px;
padding: 0 .55rem;
}
.ftos-bar {
display: flex;
align-items: center;
justify-content: space-between;
margin: .9rem 0 .55rem;
}
.ftos-bar-count { font-family: var(--mono); font-size: .64rem; color: var(--text-subtle); letter-spacing: .03em; }
.ftos-export {
font-family: var(--mono);
font-size: .64rem;
font-weight: 600;
color: var(--accent);
border: 1px solid rgba(37,99,235,.4);
border-radius: 6px;
padding: .2rem .5rem;
}
.ftos-list { display: flex; flex-direction: column; gap: .4rem; }
.ftos-card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
padding: .5rem .6rem;
}
.ftos-card--open { border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.05); }
.ftos-card-top {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
gap: .5rem;
}
.ftos-doc { font-family: var(--mono); font-size: .7rem; color: var(--text); white-space: nowrap; }
.ftos-badge {
font-family: var(--mono);
font-size: .56rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
padding: .12rem .4rem;
border-radius: 4px;
}
.ftos-badge--high { background: rgba(239,68,68,.16); color: #fca5a5; }
.ftos-badge--med { background: rgba(245,158,11,.16); color: #fcd34d; }
.ftos-badge--clear { background: rgba(16,185,129,.16); color: #6ee7b7; }
.ftos-score { font-family: var(--mono); font-size: .66rem; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ftos-meta { color: var(--text-muted); font-size: .66rem; line-height: 1.4; margin-top: .3rem; }
.ftos-passage {
margin-top: .5rem;
padding: .5rem .6rem;
border-left: 2px solid #fca5a5;
background: rgba(0,0,0,.25);
border-radius: 0 6px 6px 0;
color: var(--text-muted);
font-style: italic;
font-size: .66rem;
line-height: 1.5;
}
.ftos-passage-tag {
display: block;
font-style: normal;
font-family: var(--mono);
font-size: .56rem;
letter-spacing: .06em;
text-transform: uppercase;
color: #fca5a5;
margin-bottom: .3rem;
}
.ftos-more { font-family: var(--mono); font-size: .62rem; color: var(--text-subtle); padding: .2rem .2rem 0; }
.ftos-note {
margin: .7rem 0 0;
padding-top: .55rem;
border-top: 1px solid var(--border);
font-family: var(--mono);
font-size: .58rem;
letter-spacing: .04em;
color: var(--text-subtle);
text-align: center;
}
/* Anchor moment — Bourgoin Push intensifier.
Single italicised paragraph; reads like a scene-setter. */
.uc-anchor {
padding: 3rem 0;
background: rgba(17,24,39,.25);
border-bottom: 1px solid var(--border);
}
.uc-anchor-inner {
max-width: 780px;
margin: 0 auto;
text-align: center;
}
.uc-anchor-label {
display: inline-block;
font-family: var(--mono);
font-size: .75rem;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--text-subtle);
margin-bottom: 1rem;
}
.uc-anchor-text {
font-size: 1.1875rem;
font-style: italic;
color: var(--text);
line-height: 1.6;
margin: 0;
letter-spacing: -.005em;
}
/* Before / With Kwintely compare table — Bourgoin Push vs Pull side-by-side. */
.uc-compare {
padding: 4.5rem 0;
border-bottom: 1px solid var(--border);
}
.uc-compare-table {
max-width: 980px;
margin: 2rem auto 0;
border: 1px solid var(--border);
border-radius: var(--r-lg);
overflow: hidden;
}
.uc-compare-head,
.uc-compare-row {
display: grid;
grid-template-columns: 1fr 1fr;
}
.uc-compare-head {
background: rgba(17,24,39,.4);
border-bottom: 1px solid var(--border);
}
.uc-compare-col-label {
padding: .875rem 1.25rem;
font-family: var(--mono);
font-size: .8125rem;
letter-spacing: .08em;
text-transform: uppercase;
}
.uc-compare-col-before { color: var(--text-subtle); }
.uc-compare-col-after { color: #10b981; border-left: 1px solid var(--border); }
.uc-compare-row + .uc-compare-row { border-top: 1px solid var(--border); }
.uc-compare-cell {
padding: 1rem 1.25rem;
font-size: .9375rem;
line-height: 1.55;
}
.uc-compare-cell-before {
color: var(--text-muted);
}
.uc-compare-cell-after {
color: var(--text);
border-left: 1px solid var(--border);
background: rgba(16,185,129,.04);
}
@media (max-width: 1024px) {
/* Vertical cards: hide the detached Before/With headers; each before+after pair
becomes a bordered card (the X / check icons + green tint convey the contrast). */
.uc-compare-head { display: none; }
.uc-compare-row {
grid-template-columns: 1fr;
border: 1px solid var(--border);
border-radius: var(--r);
margin-bottom: .85rem;
overflow: hidden;
}
.uc-compare-cell-after, .uc-compare-col-after { border-left: 0; }
.uc-compare-cell-after { border-top: 1px solid var(--border); }
}
/* Use case proof band — mirrors .ind-proof from the industry pages. */
.uc-proof {
padding: 4.5rem 0;
background: rgba(17,24,39,.25);
border-bottom: 1px solid var(--border);
}
.uc-proof .section-header { margin-bottom: 2.5rem; }
.uc-proof .clients-strip { margin-bottom: 3rem; padding-bottom: 0; border-bottom: 0; }
.uc-voc-grid { max-width: 1180px; margin: 0 auto; }
/* Same 1.5x logo sizing as .ind-proof; same --2x flagship rule too. */
.uc-proof .client-logo { height: 84px; }
.uc-proof .client-logo img,
.uc-proof .client-logo svg { height: 66px; max-width: 240px; }
.uc-proof .client-logo--2x { height: 168px; }
.uc-proof .client-logo--2x img,
.uc-proof .client-logo--2x svg { height: 132px; max-width: 480px; }
/* FAQ — anxiety defusers + AIO/SEO FAQPage schema. */
.uc-faq {
padding: 4.5rem 0;
border-bottom: 1px solid var(--border);
}
.uc-faq-list {
max-width: 820px;
margin: 2rem auto 0;
}
.uc-faq-item {
border: 1px solid var(--border);
border-radius: var(--r-lg);
margin-bottom: .75rem;
background: var(--surface);
overflow: hidden;
}
.uc-faq-q {
cursor: pointer;
list-style: none;
padding: 1rem 1.25rem;
font-size: 1rem;
font-weight: 600;
color: var(--text);
position: relative;
padding-right: 2.5rem;
}
.uc-faq-q::-webkit-details-marker { display: none; }
.uc-faq-q::after {
content: "+";
position: absolute;
right: 1.25rem;
top: 50%;
transform: translateY(-50%);
font-family: var(--mono);
font-size: 1.25rem;
color: var(--text-subtle);
transition: transform .2s ease;
}
.uc-faq-item[open] .uc-faq-q::after { content: "−"; }
.uc-faq-a {
padding: 0 1.25rem 1.25rem;
font-size: .9375rem;
color: var(--text-muted);
line-height: 1.7;
}
.uc-faq-a p { margin: 0; }
/* 3-CTA action block — match the wider button row on industry hero / CTA. */
.uc-cta-actions {
display: flex;
flex-wrap: wrap;
gap: .75rem;
align-items: center;
}
/* 1-line product positioning under the headline — for Problem-aware
visitors landing from Google search. Reads as a tight product-fit promise
before the longer lead paragraph. */
.uc-positioning {
font-family: var(--mono);
font-size: .9375rem;
color: var(--text-muted);
letter-spacing: -.005em;
line-height: 1.55;
margin: .5rem 0 1rem;
padding-left: .75rem;
border-left: 2px solid var(--accent, #2563eb);
}
/* Habit-breaker (Bourgoin 4th force) — names the inertia of "we always
outsource this" and gives a low-friction path to the experiment. */
.uc-habit {
padding: 4.5rem 0;
border-bottom: 1px solid var(--border);
background: rgba(17,24,39,.25);
}
.uc-habit-inner {
max-width: 760px;
margin: 0 auto;
}
.uc-habit-lead {
font-size: 1.0625rem;
color: var(--text-muted);
line-height: 1.65;
margin: 1rem 0 1.5rem;
}
.uc-habit-list {
list-style: none;
padding: 0;
margin: 0;
}
.uc-habit-list li {
position: relative;
padding: .875rem 0 .875rem 1.75rem;
font-size: .9375rem;
color: var(--text-muted);
line-height: 1.65;
border-top: 1px solid var(--border);
}
.uc-habit-list li:last-child { border-bottom: 1px solid var(--border); }
.uc-habit-list li::before {
content: "→";
position: absolute;
left: 0;
top: .875rem;
color: var(--accent, #2563eb);
font-weight: 700;
}
.uc-habit-list strong { color: var(--text); font-weight: 600; }
/* ─── Use-case detail · Eye-candy upgrades (Tier 1 + 2 + 3) ─────────────────
All rules below are scoped via the --uc-accent / --uc-accent-muted CSS
variables set inline on each section. Same pattern as --ind-accent on the
/industries pages — visually consistent across the site. */
/* Hero — accent radial gradient backdrop, larger headline. ───────────────── */
.uc-hero {
position: relative;
padding: 4rem 0 4.5rem;
border-bottom: 1px solid var(--border);
background:
radial-gradient(circle at 12% 0%, var(--uc-accent-muted, transparent) 0%, transparent 55%),
radial-gradient(circle at 88% 30%, var(--uc-accent-muted, transparent) 0%, transparent 60%),
var(--bg);
overflow: hidden;
}
.uc-hero-inner {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 3rem;
align-items: stretch;
}
/* Left column fills the same height as the right (image + stat panel):
items distributed evenly between a top-aligned first item and a
bottom-aligned last item, so the gaps absorb the extra height. */
.uc-hero-content { display: flex; flex-direction: column; justify-content: space-between; }
/* CSS Grid items default to `min-width: auto` (= min-content), so a child
with non-wrapping content (e.g. a wide stat panel) can refuse to shrink
below its content width and overflow the column. Forcing min-width: 0
lets the item shrink to the grid track width. */
.uc-hero-inner > *,
.uc-hero-content,
.uc-hero-aside {
min-width: 0;
}
.uc-hero-aside {
display: flex;
flex-direction: column;
gap: 1rem;
}
@media (max-width: 1024px) {
.uc-hero-inner { grid-template-columns: 1fr; gap: 2.25rem; }
}
.uc-hero-h1 {
font-size: clamp(2rem, 4.2vw, 3.25rem);
font-weight: 800;
letter-spacing: -.035em;
line-height: 1.08;
margin: 1rem 0 .5rem;
}
/* Periodic-element-style block badge — use-case visual signature.
Mirrors .ind-element from /industries; different colour application. */
.uc-element {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
align-items: end;
gap: 0 .75rem;
width: max-content;
padding: .65rem .9rem .55rem;
border: 1px solid var(--uc-accent, var(--border));
border-radius: var(--r-md, .5rem);
background: var(--uc-accent-muted, transparent);
color: var(--uc-accent, var(--text));
font-family: var(--mono);
letter-spacing: -.01em;
}
.uc-element-num {
grid-column: 1; grid-row: 1;
font-size: .75rem;
letter-spacing: .15em;
opacity: .8;
align-self: start;
}
.uc-element-symbol {
grid-column: 1; grid-row: 2;
font-size: 2rem;
font-weight: 800;
line-height: 1;
}
.uc-element-tier {
grid-column: 2; grid-row: 1 / span 2;
align-self: center;
font-size: .8125rem;
letter-spacing: .12em;
text-transform: uppercase;
white-space: nowrap;
border-left: 1px solid currentColor;
padding-left: .75rem;
opacity: .85;
}
/* Hero stat panel — mirrors .ind-hero-stat-panel from /industries. */
.uc-hero-stat-panel {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: .85rem 1.25rem;
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
align-items: center;
gap: 1rem;
position: relative;
}
.uc-hero-stat-panel::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(135deg, var(--uc-accent-muted) 0%, transparent 60%);
opacity: .5;
}
.uc-stat { position: relative; text-align: center; }
.uc-stat-num {
font-family: var(--mono);
font-size: clamp(1.05rem, 1.5vw, 1.35rem);
font-weight: 700;
letter-spacing: -.02em;
color: var(--uc-accent, var(--text));
line-height: 1.05;
margin-bottom: .12rem;
white-space: nowrap;
}
.uc-stat-label {
font-size: .66rem;
color: var(--text-subtle);
letter-spacing: .04em;
line-height: 1.3;
}
.uc-stat-divider {
width: 1px;
align-self: stretch;
background: var(--border);
}
.uc-stat-badge {
grid-column: 1 / -1;
font-family: var(--mono);
font-size: .62rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--text-subtle);
text-align: center;
padding-top: .6rem;
margin-top: .1rem;
border-top: 1px dashed var(--border);
}
@media (max-width: 640px) {
.uc-hero-stat-panel { grid-template-columns: 1fr; }
.uc-stat-divider { display: none; }
.uc-stat-badge { padding-top: .75rem; }
}
/* Section tags inherit their colour inline via style="color: ..." — no rule needed,
but anchor + final-cta sections deserve their own accent treatment below. */
/* Anchor moment — accent left-rule + slight accent-muted backdrop. ──────── */
.uc-anchor {
background:
linear-gradient(90deg, var(--uc-accent-muted) 0%, transparent 35%),
rgba(17,24,39,.25);
border-bottom: 1px solid var(--border);
}
.uc-anchor-inner {
max-width: 820px;
border-left: 3px solid var(--uc-accent, var(--accent, #2563eb));
padding-left: 1.5rem;
text-align: left;
margin: 0 auto;
}
.uc-anchor-text { font-size: 1.25rem; }
/* Compare table — ✗/✓ icons + accent gradient on the With column. ──────── */
.uc-compare-col-after { color: var(--uc-accent, #10b981); }
.uc-compare-cell { display: flex; gap: .65rem; align-items: flex-start; }
.uc-compare-icon {
flex-shrink: 0;
width: 1.15rem;
height: 1.15rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: .8125rem;
font-weight: 700;
line-height: 1;
margin-top: .125rem;
}
.uc-compare-cell-before .uc-compare-icon {
background: rgba(239,68,68,.15);
color: #f87171;
}
.uc-compare-cell-after .uc-compare-icon {
background: var(--uc-accent-muted, rgba(16,185,129,.15));
color: var(--uc-accent, #10b981);
}
.uc-compare-cell-after {
background: linear-gradient(90deg, var(--uc-accent-muted, rgba(16,185,129,.06)) 0%, transparent 100%);
color: var(--text);
}
/* Outputs grid — chip pill in corner, accent border on hover. ──────────── */
.uc-output-card {
position: relative;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 1.5rem 1.5rem 1.25rem;
transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.uc-output-card:hover {
border-color: var(--uc-accent, var(--accent));
transform: translateY(-2px);
box-shadow: 0 8px 24px -8px var(--uc-accent-muted, rgba(0,0,0,.2));
}
.uc-output-chip {
position: absolute;
top: 1rem;
right: 1rem;
font-family: var(--mono);
font-size: .6875rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--uc-accent, var(--text-subtle));
background: var(--uc-accent-muted, rgba(255,255,255,.04));
padding: .25rem .5rem;
border-radius: .25rem;
}
.uc-output-card h3 { padding-right: 4.5rem; }
/* Steps — vertical pipeline. The connector lives INSIDE each step's rail
column as a flex-1 child, so it can never overshoot the first or last
circle (its height is bounded by the step's body height). The last step
omits the connector via a Jinja conditional in the template. */
/* FAQ accordion polish — accent border on hover, accent wash on open. ───── */
.uc-faq-item:hover { border-color: var(--uc-accent, var(--border)); }
.uc-faq-item[open] {
border-color: var(--uc-accent, var(--border));
background: linear-gradient(180deg, var(--uc-accent-muted) 0%, var(--surface) 70%);
}
.uc-faq-q::after { transition: transform .25s ease, color .25s ease; }
.uc-faq-item[open] .uc-faq-q::after { color: var(--uc-accent, var(--text-subtle)); }
/* Habit-breaker — 3-card horizontal grid (not a list). ─────────────────── */
.uc-habit { background: rgba(17,24,39,.25); border-bottom: 1px solid var(--border); padding: 4.5rem 0; }
.uc-habit-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
margin-top: 2.25rem;
}
/* Habit-breaker cards are explanatory, not clickable — no hover state to
avoid misleading visitors with a click affordance that doesn't exist. */
.uc-habit-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 1.75rem 1.5rem 1.5rem;
}
.uc-habit-glyph {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border-radius: 50%;
background: var(--uc-accent-muted, rgba(255,255,255,.04));
color: var(--uc-accent, var(--accent));
font-size: 1.5rem;
margin-bottom: 1rem;
}
/* SVG line-art glyph — Lucide-style 1.5px stroke icons in a round chip. */
.uc-habit-glyph--svg svg {
width: 1.5rem;
height: 1.5rem;
}
/* Vertical pipeline — circle on left, body on right, accent line connecting
consecutive circles. Line bounded by step body height = no overshoot. */
.uc-step-pl-num {
width: 4rem;
height: 4rem;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background:
radial-gradient(circle at 30% 30%, var(--uc-accent-muted) 0%, transparent 70%),
var(--surface);
border: 1.5px solid var(--uc-accent);
color: var(--uc-accent);
font-family: var(--mono);
font-size: 1.375rem;
font-weight: 700;
flex-shrink: 0;
}
.uc-steps--pipeline {
display: flex;
flex-direction: column;
max-width: 760px;
margin: 2.5rem auto 0;
}
.uc-step-pl {
display: flex;
align-items: stretch;
gap: 2.5rem;
}
.uc-step-pl-rail {
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;
width: 4rem;
}
.uc-step-pl-line {
width: 2px;
flex: 1;
background: var(--uc-accent);
opacity: .35;
border-radius: 2px;
margin: .5rem 0;
min-height: 2rem;
}
.uc-step-pl-body { padding: .75rem 0 2rem; }
.uc-step-pl-body h3 { font-size: 1rem; font-weight: 700; letter-spacing: -.015em; margin-bottom: .5rem; }
.uc-step-pl-body p { font-size: .9375rem; color: var(--text-muted); line-height: 1.65; margin: 0; }
.uc-step-pl:last-child .uc-step-pl-body { padding-bottom: 0; }
.uc-habit-card h3 {
font-size: 1rem;
font-weight: 700;
letter-spacing: -.015em;
margin-bottom: .65rem;
}
.uc-habit-card p { font-size: .9375rem; color: var(--text-muted); line-height: 1.65; margin: 0; }
@media (max-width: 1024px) {
.uc-habit-grid { grid-template-columns: 1fr; }
}
/* Hide the legacy bullet list inside .uc-habit (older template emitted it). */
.uc-habit .uc-habit-list { display: none; }
/* uc-card hover — white-contrast (mirror .industry-card:hover behaviour).
Already present from the global use-case grid; ensure it threads accent. */
.uc-related-grid .uc-card { transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.uc-related-grid .uc-card:hover {
border-color: var(--uc-accent, #fff);
box-shadow: 0 8px 24px -8px var(--uc-accent-muted, rgba(0,0,0,.2));
}
/* Final CTA — accent gradient band. ────────────────────────────────────── */
.uc-final-cta {
background:
radial-gradient(circle at 20% 20%, var(--uc-accent-muted) 0%, transparent 55%),
radial-gradient(circle at 80% 80%, var(--uc-accent-muted) 0%, transparent 55%),
var(--bg);
border-top: 1px solid var(--uc-accent, var(--border));
}
/* ─── /use-cases overview · JTBD-shaped (Tier 1+2+3) ──────────────────────
Hero, hero feature cards, search + filter chips, level-banded cards
with trigger sentences and stat chips. */
/* Overview hero — visitor-question-shaped, narrower copy column.
Flex centering both axes inside a viewport-height-sized section so the
tag + headline + sub-paragraph sit visually centered in the space below
the sticky nav. Top padding ensures the section-tag isn't cropped by
the sticky nav on initial page load. */
.uc-overview-hero {
display: flex;
align-items: center;
justify-content: center;
min-height: 42vh;
padding: 4rem 0 3rem;
border-bottom: 1px solid var(--border);
}
.uc-overview-hero .container { width: 100%; }
.uc-overview-hero-inner {
max-width: 820px;
margin: 0 auto;
text-align: center;
}
.uc-overview-hero-inner .section-sub { margin-left: auto; margin-right: auto; }
/* Tagline for cold-from-search visitors — factual product fit confirmation
right under the H1 question. Sits between H1 and the longer sub-paragraph. */
.uc-overview-hero-tagline {
font-family: var(--mono);
font-size: .875rem;
letter-spacing: -.005em;
color: var(--text-subtle);
margin: 0 auto 1.5rem;
max-width: 580px;
}
.uc-overview-hero h1 {
font-size: clamp(2rem, 4vw, 3rem);
letter-spacing: -.035em;
line-height: 1.1;
margin: .75rem 0 .85rem;
}
@media (max-width: 1024px) {
.uc-overview-hero { min-height: 32vh; padding: 3rem 0 2.25rem; }
}
/* Hero use-case feature row — 2 large cards above the grid. */
.uc-overview-heroes {
padding: 4.5rem 0 4.5rem;
border-bottom: 1px solid var(--border);
}
.uc-overview-heroes-label {
text-align: center;
margin-bottom: 2rem;
}
.uc-hero-card-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
max-width: 1180px;
margin: 0 auto;
}
@media (max-width: 1024px) {
.uc-hero-card-grid { grid-template-columns: 1fr; }
}
.uc-hero-card {
display: flex;
flex-direction: column;
align-items: stretch;
text-align: left;
gap: 1rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 1.75rem 1.75rem 1.5rem;
text-decoration: none;
color: var(--text);
transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
position: relative;
overflow: hidden;
}
.uc-hero-card::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 100% 0%, var(--uc-accent-muted) 0%, transparent 55%);
opacity: .55;
pointer-events: none;
}
.uc-hero-card > * { position: relative; }
.uc-hero-card:hover {
border-color: var(--uc-accent);
transform: translateY(-2px);
box-shadow: 0 12px 32px -12px var(--uc-accent-muted);
}
/* Suppress the global a:hover underline on the whole card; keep it only on
the .uc-card-cta so hover still nudges visitors to the click target. */
.uc-hero-card,
.uc-hero-card *,
.uc-hero-card:hover,
.uc-hero-card:hover * { text-decoration: none; }
.uc-hero-card:hover .uc-card-cta {
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-thickness: 1.5px;
}
.uc-hero-card-element { width: max-content; }
.uc-hero-card-title {
font-size: clamp(1.375rem, 2.25vw, 1.625rem);
font-weight: 800;
letter-spacing: -.025em;
margin: 0;
line-height: 1.15;
}
.uc-hero-card-trigger {
font-style: italic;
color: var(--uc-accent);
font-size: 1rem;
line-height: 1.45;
margin: 0;
padding-left: .75rem;
border-left: 2px solid var(--uc-accent);
/* Reserve space for 2 lines so both hero cards have matching heights even
when one trigger only fills one line. */
min-height: calc(1.45em * 2);
}
.uc-hero-card-lead {
color: var(--text-muted);
font-size: .9375rem;
line-height: 1.6;
margin: 0;
}
/* 3 equal-width columns so the stats line up uniformly across both hero cards. */
.uc-hero-card-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
margin-top: .25rem;
padding: .75rem 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
width: 100%;
}
.uc-hero-card-stat { display: flex; flex-direction: column; gap: .15rem; align-items: flex-start; }
.uc-hero-card-stat { display: flex; flex-direction: column; gap: .15rem; }
.uc-hero-card-stat-num {
font-family: var(--mono);
font-size: 1.0625rem;
font-weight: 700;
color: var(--uc-accent);
line-height: 1.1;
}
.uc-hero-card-stat-label {
font-size: .6875rem;
color: var(--text-subtle);
letter-spacing: .04em;
line-height: 1.3;
}
.uc-hero-card .uc-card-cta {
margin-top: auto;
color: var(--uc-accent);
font-weight: 600;
}
/* Filter chip + result counter row. */
.uc-overview-controls {
padding: 4rem 0 2.5rem;
}
.uc-search-row,
.uc-result-row {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 1rem;
max-width: 980px;
margin: 0 auto 1.25rem;
min-height: 1.25rem;
}
.uc-search {
flex: 1;
display: flex;
align-items: center;
gap: .65rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md, .5rem);
padding: .65rem 1rem;
transition: border-color .2s ease;
}
.uc-search:focus-within { border-color: var(--accent, #2563eb); }
.uc-search-icon { color: var(--text-subtle); flex-shrink: 0; }
.uc-search input {
flex: 1;
background: transparent;
border: 0;
outline: 0;
color: var(--text);
font-size: .9375rem;
font-family: inherit;
}
.uc-search input::placeholder { color: var(--text-subtle); }
.uc-result-count {
font-family: var(--mono);
font-size: .8125rem;
color: var(--text-subtle);
white-space: nowrap;
min-width: 11rem;
text-align: right;
}
/* Filter chips — scenario / persona based. */
.uc-filter-chips {
display: flex;
flex-wrap: wrap;
gap: .5rem;
max-width: 980px;
margin: 0 auto;
}
.uc-chip {
display: inline-flex;
align-items: center;
gap: .5rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 999px;
padding: .45rem .9rem;
font-size: .8125rem;
font-weight: 600;
color: var(--text-muted);
cursor: pointer;
transition: border-color .15s ease, color .15s ease, background .15s ease;
font-family: inherit;
}
.uc-chip:hover { color: var(--text); border-color: var(--text-subtle); }
.uc-chip.is-active {
background: var(--accent, #2563eb);
border-color: var(--accent, #2563eb);
color: #fff;
}
.uc-chip-count {
font-family: var(--mono);
font-size: .6875rem;
opacity: .75;
background: rgba(255,255,255,.08);
padding: 0 .35rem;
border-radius: 999px;
min-width: 1.25rem;
text-align: center;
}
.uc-chip.is-active .uc-chip-count { background: rgba(255,255,255,.18); opacity: 1; }
/* "I'm not sure yet" fallback chip — links straight to the clarity-call URL.
Styled as a chip but visually offset to read as a CTA, not a filter. */
.uc-chip--unsure {
text-decoration: none;
border-color: var(--accent, #2563eb);
color: var(--accent, #2563eb);
font-style: italic;
}
.uc-chip--unsure:hover {
background: var(--accent, #2563eb);
border-color: var(--accent, #2563eb);
color: #fff;
text-decoration: none;
}
/* 12-card grid — level-color side band, trigger sentence, stat chip. */
.uc-card { position: relative; }
.uc-card[data-uc-level] {
border-left: 3px solid var(--uc-accent);
}
.uc-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
margin-bottom: .75rem;
}
/* Compact monogram + position tile in card head — visual cohesion with the
periodic-element badge on the hero feature cards. */
.uc-card-mark {
display: inline-flex;
align-items: baseline;
gap: .35rem;
padding: .25rem .55rem;
background: var(--uc-accent-muted);
border: 1px solid var(--uc-accent);
border-radius: .25rem;
font-family: var(--mono);
color: var(--uc-accent);
}
.uc-card-pos {
font-size: .6875rem;
letter-spacing: .12em;
opacity: .8;
}
.uc-card-mono {
font-size: .8125rem;
font-weight: 700;
letter-spacing: .02em;
}
/* On hover the card border + glow take the accent colour, which can wash
out the accent-on-accent monogram tile. Flip to solid accent fill +
white text so the tile pops instead of disappearing. */
.uc-grid .uc-card:hover .uc-card-mark {
background: var(--uc-accent);
border-color: var(--uc-accent);
color: #fff;
}
.uc-grid .uc-card:hover .uc-card-pos,
.uc-grid .uc-card:hover .uc-card-mono { color: #fff; }
/* Same treatment on the hero feature cards' element badge — keeps the
monogram readable against the accent hover border. */
.uc-hero-card:hover .uc-element {
background: var(--uc-accent);
border-color: var(--uc-accent);
color: #fff;
}
.uc-hero-card:hover .uc-element-num,
.uc-hero-card:hover .uc-element-symbol,
.uc-hero-card:hover .uc-element-tier { color: #fff; }
.uc-hero-card:hover .uc-element-tier { border-left-color: rgba(255,255,255,.5); }
.uc-card-stat {
font-family: var(--mono);
font-size: .75rem;
font-weight: 700;
letter-spacing: .03em;
color: var(--uc-accent);
background: var(--uc-accent-muted);
padding: .25rem .55rem;
border-radius: .25rem;
white-space: nowrap;
}
.uc-card-trigger {
font-style: italic;
color: var(--text);
font-size: .9375rem;
line-height: 1.55;
margin: .35rem 0 .9rem;
position: relative;
padding-left: .75rem;
border-left: 2px solid var(--uc-accent);
}
.uc-card[hidden] { display: none; }
.uc-empty {
text-align: center;
color: var(--text-muted);
padding: 2rem 0;
font-size: .9375rem;
}
.link-btn {
background: transparent;
border: 0;
color: var(--accent, #2563eb);
font: inherit;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
padding: 0;
}
/* Related-cards CTA inherits each card's own level accent (each card has
its own --uc-accent set inline based on rel.accent in the template). */
.uc-related-grid .uc-card .uc-card-cta { color: var(--uc-accent); }
/* Suppress global a:hover underline on body content; only the mini CTA
gets the underline so visitors are nudged to the click target. */
.uc-related-grid .uc-card,
.uc-related-grid .uc-card *,
.uc-related-grid .uc-card:hover,
.uc-related-grid .uc-card:hover * { text-decoration: none; }
.uc-related-grid .uc-card:hover .uc-card-cta {
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-thickness: 1.5px;
}
/* Level-color hover override on cards (overrides the white-contrast that
the related-grid version sets). */
.uc-grid .uc-card:hover {
border-color: var(--uc-accent);
box-shadow: 0 12px 32px -12px var(--uc-accent-muted);
}
/* Suppress the global a:hover underline on body content; only the mini CTA
gets the underline so visitors are nudged to the click target. */
.uc-grid .uc-card,
.uc-grid .uc-card *,
.uc-grid .uc-card:hover,
.uc-grid .uc-card:hover * { text-decoration: none; }
/* CTA inherits the level accent — emerald for case, blue for ops,
purple for strategy. Overrides the global .uc-card-cta { color: --accent }. */
.uc-grid .uc-card .uc-card-cta { color: var(--uc-accent); }
.uc-grid .uc-card:hover .uc-card-cta {
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-thickness: 1.5px;
}
/* ─── Homepage · JTBD additions (hero tagline, screen-brief, anchor moment,
uc preview level-color, "browse all" link) ────────────────────────────── */
/* 1-line product-fit tagline under H1, for cold-from-search visitors. */
.hero-tagline {
font-family: var(--mono);
font-size: .9375rem;
letter-spacing: -.005em;
color: var(--accent);
margin: -.5rem 0 1rem;
padding-left: .75rem;
border-left: 2px solid var(--accent);
}
/* Hero screen-brief — placeholder card for the product screenshot pending.
Spans the full hero container width (no max-width cap), so it fills the
viewport with the same side padding as the hero text column. */
.hero-screen-brief {
background: var(--surface);
border: 1px dashed var(--border);
border-radius: var(--r-lg);
position: relative;
margin: 0 auto;
overflow: hidden;
width: 100%;
}
.hero-screen-brief-bar {
display: flex;
align-items: center;
gap: .5rem;
padding: .65rem 1rem;
background: rgba(0,0,0,.35);
border-bottom: 1px dashed var(--border);
}
.hero-screen-brief-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
opacity: .6;
}
.hero-screen-brief-tab {
margin-left: .75rem;
font-family: var(--mono);
font-size: .75rem;
color: var(--text-subtle);
letter-spacing: -.005em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hero-screen-brief-body { padding: 1.5rem; }
.hero-screen-brief-badge {
display: inline-block;
font-family: var(--mono);
font-size: .6875rem;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--accent);
background: rgba(37,99,235,.08);
padding: .25rem .5rem;
border-radius: .25rem;
margin-bottom: 1rem;
}
.hero-screen-brief-text {
font-size: .8125rem;
color: var(--text-muted);
line-height: 1.65;
margin: 0;
}
/* Vendor-switching strip — sits at the bottom of the FAQ section
"Compared to the tools you already use", answering its heading
with concrete side-by-side links. Card-style frame so it reads as
the section's resolution rather than a separator band. */
.home-compared-strip {
margin-top: 2.5rem;
padding: 1.5rem 1.75rem;
background: rgba(17,24,39,.5);
border: 1px solid var(--border);
border-radius: 12px;
}
.home-compared-strip-inner {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: center;
justify-content: center;
text-align: center;
gap: 1rem;
}
.home-compared-strip-text {
margin: 0;
font-size: .95rem;
color: var(--text-muted);
}
.home-compared-strip-text strong { color: var(--text); }
.home-compared-strip-links {
display: flex;
flex-wrap: wrap;
gap: 1rem 1.5rem;
align-items: center;
justify-content: center;
}
.home-compared-strip-links a {
font-size: .9rem;
color: var(--accent, #3b82f6);
text-decoration: none;
font-weight: 500;
}
.home-compared-strip-links a:hover { text-decoration: underline; }
.home-compared-strip-all { font-weight: 600; }
/* Anchor moment band — Bourgoin Push intensifier between hero and problem. */
.home-anchor {
padding: 3.5rem 0;
background: rgba(17,24,39,.3);
border-bottom: 1px solid var(--border);
}
.home-anchor-inner {
max-width: 820px;
margin: 0 auto;
border-left: 3px solid var(--accent);
padding-left: 1.5rem;
}
.home-anchor-label {
display: inline-block;
font-family: var(--mono);
font-size: .75rem;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--text-subtle);
margin-bottom: 1rem;
}
.home-anchor-text {
font-size: 1.25rem;
color: var(--text);
line-height: 1.55;
margin: 0 0 1rem;
font-style: italic;
}
.home-anchor-text em {
font-weight: 500;
font-style: italic;
color: var(--accent);
}
.home-anchor-followup {
font-size: .9375rem;
color: var(--text-muted);
line-height: 1.65;
margin: 0;
}
/* Use-case preview cards on home — left band + per-card accent CTA, mirrors
the standard cards on /use-cases. Class .uc-card--{level} carries no rules
itself; the inline --uc-accent does the work. */
.use-cases .uc-card[class*="uc-card--"] {
border-left: 3px solid var(--uc-accent, var(--border));
}
.use-cases .uc-card .uc-card-cta { color: var(--uc-accent, var(--accent)); }
/* Hover: keep underline only on the mini CTA, not on the body. */
.use-cases .uc-card,
.use-cases .uc-card *,
.use-cases .uc-card:hover,
.use-cases .uc-card:hover * { text-decoration: none; }
.use-cases .uc-card:hover .uc-card-cta {
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-thickness: 1.5px;
}
.uc-grid-footer {
text-align: center;
margin-top: 2.5rem;
}
/* Inline customer logos — Evertrace-style centered strip with footer line.
Logos centred in a row above the small "Used by..." footer label. */
.hero-trust-inline {
display: flex;
flex-direction: column;
align-items: center;
gap: .9rem;
margin-top: 2.75rem;
width: 100%;
}
.hero-trust-inline-logos {
width: 100%;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.hero-trust-track {
display: flex;
align-items: center;
gap: 2.5rem;
width: max-content;
animation: hero-trust-scroll var(--marquee-duration, 60s) linear infinite;
will-change: transform;
}
.hero-trust-inline-logos:hover .hero-trust-track,
.hero-trust-track:focus-within { animation-play-state: paused; }
.hero-trust-inline-logos .client-logo { height: 56px; opacity: .85; flex: 0 0 auto; }
.hero-trust-inline-logos .client-logo img,
.hero-trust-inline-logos .client-logo svg { height: 48px; max-width: 180px; }
/* Wide-aspect logos (Ewigbyte, A3DS): give them enough room so their natural
ratio renders at full hero-strip height instead of being clipped by max-width
and centered in a too-narrow box (which created visible rhythm breaks in the marquee). */
.hero-trust-inline-logos .client-logo--wide img,
.hero-trust-inline-logos .client-logo--wide svg { max-width: 320px; }
/* Specific logos that read visually heavier than the rest of the roster — render
at 3/4 height so their visual weight matches the strip rhythm. */
.hero-trust-inline-logos .client-logo img[src$="ewigbyte.svg"],
.hero-trust-inline-logos .client-logo img[src$="cfl-flooring.png"],
.hero-trust-inline-logos .client-logo img[src$="noise2zero.svg"],
.hero-trust-inline-logos .client-logo img[src$="jetbike.png"] { height: 36px; }
@keyframes hero-trust-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.hero-trust-inline-logos { -webkit-mask-image: none; mask-image: none; overflow: visible; }
.hero-trust-track {
animation: none;
flex-wrap: wrap;
justify-content: center;
width: 100%;
gap: 1.25rem 2.5rem;
}
}
.hero-trust-inline-footer {
font-size: .8125rem;
letter-spacing: .01em;
color: var(--text-subtle);
margin: 0;
text-align: center;
}
@media (max-width: 640px) {
.hero-trust-inline { margin-top: 2rem; gap: .75rem; }
.hero-trust-track { gap: 1.75rem; }
.hero-trust-inline-logos .client-logo { height: 26px; }
.hero-trust-inline-logos .client-logo img,
.hero-trust-inline-logos .client-logo svg { height: 22px; max-width: 100px; }
/* The "visually heavier" logos are pinned to 36px above; on the shorter mobile
strip that overflows the 26px row and clips top/bottom, so scale them down. */
.hero-trust-inline-logos .client-logo img[src$="ewigbyte.svg"],
.hero-trust-inline-logos .client-logo img[src$="cfl-flooring.png"],
.hero-trust-inline-logos .client-logo img[src$="noise2zero.svg"],
.hero-trust-inline-logos .client-logo img[src$="jetbike.png"] { height: 18px; }
.hero-trust-inline-footer { font-size: .75rem; }
/* Show the real product screenshot on mobile too, below the CTAs + logos. */
.hero-screen-brief { display: block; margin-top: 1.75rem; }
}
/* Proof bento — replace the flag-emoji blob with a clean mono "DE" mark
that matches the rest of the typographic system. */
.proof-num-mark {
font-family: var(--mono);
font-size: 1.75rem;
font-weight: 700;
letter-spacing: .04em;
color: var(--accent);
background: rgba(37,99,235,.08);
border: 1px solid rgba(37,99,235,.28);
border-radius: .375rem;
padding: .35rem .65rem;
display: inline-block;
}
/* ─── Homepage Tier 1 sections — Three-sources, all-logos, lead-magnet ──── */
/* Three sources differentiator grid (after hero, before anchor moment). */
.home-sources {
padding: 4.5rem 0 3.5rem;
border-bottom: 1px solid var(--border);
}
.home-sources-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin-top: 2.5rem;
max-width: 1180px;
margin-left: auto;
margin-right: auto;
}
.home-source-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 1.75rem 1.5rem;
position: relative;
transition: border-color .2s ease, transform .2s ease;
}
.home-source-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.home-source-tag {
display: inline-block;
font-family: var(--mono);
font-size: .6875rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--accent);
background: rgba(37,99,235,.08);
padding: .25rem .55rem;
border-radius: .25rem;
margin-bottom: 1rem;
}
.home-source-card h3 {
font-size: 1.375rem;
font-weight: 700;
letter-spacing: -.025em;
margin: 0 0 .65rem;
}
.home-source-card p { color: var(--text-muted); font-size: .9375rem; line-height: 1.65; margin: 0; }
@media (max-width: 1024px) {
.home-sources-grid { grid-template-columns: 1fr; }
}
/* All-logos section — concentrated trust band. Customers + supporters
in two clearly-separated sub-blocks. Larger logos than the hero strip. */
.home-all-logos {
/* padding inherits from the mobile-first section scale (4 / 5 / 6rem) */
background: rgba(17,24,39,.25);
border-bottom: 1px solid var(--border);
}
/* Merged trust grid — customers + supporters in one shuffled 6-col CSS grid.
The CTA card is explicitly placed at rows 3-4 / cols 3-4; `grid-auto-flow: dense`
lets logos fill every other cell, including those before the CTA's grid area.
Logos render at 1.5× the previous .home-all-logos-grid sizing for more visual weight. */
/* Mobile-first: 3 → 4 → 6 columns. CTA card moves from a full-row band
on mobile, to a 2x2 block centered on tablet/desktop. */
.home-trust-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 72px;
grid-auto-flow: dense;
gap: 1rem;
width: 100%;
max-width: 1180px;
margin-left: auto;
margin-right: auto;
place-items: center;
justify-content: center;
}
.home-trust-grid .client-logo {
height: 60px;
width: 100%;
opacity: .85;
padding: .25rem;
}
.home-trust-grid .client-logo img,
.home-trust-grid .client-logo svg {
height: 44px;
max-width: 130px;
}
.home-trust-grid .client-logo--preserve { opacity: .95; }
.home-trust-cta {
/* Mobile: full-width band on row 4. Tablet/desktop reposition below. */
grid-column: 1 / span 3;
grid-row: 4 / span 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 1.25rem;
border-radius: var(--r-lg);
background: linear-gradient(135deg, var(--accent), var(--purple));
color: #fff;
text-decoration: none;
gap: .15rem;
box-shadow: 0 12px 40px rgba(37,99,235,.22);
transition: transform .25s, box-shadow .25s;
}
.home-trust-cta:hover {
transform: translateY(-3px);
box-shadow: 0 16px 48px rgba(37,99,235,.32);
text-decoration: none;
color: #fff;
}
.home-trust-cta-eyebrow {
font-family: var(--mono);
font-size: .7rem;
letter-spacing: .15em;
text-transform: uppercase;
opacity: .85;
}
.home-trust-cta-title {
font-size: 1.25rem;
font-weight: 700;
line-height: 1.2;
margin-top: .35rem;
}
.home-trust-cta-sub {
font-size: .8125rem;
line-height: 1.45;
opacity: .9;
margin-top: .4rem;
max-width: 30ch;
}
/* Tablet (≥641): 4-col grid, CTA becomes a centered 2x2 block. */
@media (min-width: 641px) {
.home-trust-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 92px; gap: 1.25rem; }
.home-trust-cta { grid-column: 2 / span 2; grid-row: 3 / span 2; padding: 1.5rem 1.25rem; }
.home-trust-grid .client-logo { height: 70px; padding: .5rem; }
.home-trust-grid .client-logo img,
.home-trust-grid .client-logo svg { height: 54px; max-width: 170px; }
}
/* Desktop (≥1025): 6-col grid, CTA centered at cols 3-4. */
@media (min-width: 1025px) {
.home-trust-grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 110px; }
.home-trust-cta { grid-column: 3 / span 2; grid-row: 3 / span 2; }
.home-trust-grid .client-logo { height: 84px; }
.home-trust-grid .client-logo img,
.home-trust-grid .client-logo svg { height: 66px; max-width: 220px; }
}
/* Lead magnet — sample output offer (between sovereignty and founders). */
.home-lead-magnet {
/* padding inherits from the mobile-first section scale */
border-bottom: 1px solid var(--border);
background:
radial-gradient(circle at 80% 20%, rgba(37,99,235,.08) 0%, transparent 55%),
var(--bg);
}
.home-lead-magnet-inner {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 4rem;
max-width: 1180px;
margin: 0 auto;
align-items: center;
}
.home-lead-magnet-text .section-title { margin: .65rem 0 1rem; }
.home-lead-magnet-actions {
display: flex;
flex-direction: column;
gap: .85rem;
margin-top: 1.5rem;
align-items: flex-start;
}
.home-lead-magnet-note {
font-size: .8125rem;
color: var(--text-subtle);
font-style: italic;
}
.home-lead-magnet-list {
list-style: none;
padding: 1.5rem;
margin: 0;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
}
.home-lead-magnet-list li {
display: flex;
align-items: center;
gap: .85rem;
padding: .9rem 0;
font-size: .9375rem;
color: var(--text);
line-height: 1.45;
border-top: 1px solid var(--border);
}
.home-lead-magnet-list li:first-child { border-top: 0; padding-top: 0; }
.home-lead-magnet-list li:last-child { padding-bottom: 0; }
.lm-chip {
font-family: var(--mono);
font-size: .6875rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--accent);
background: rgba(37,99,235,.08);
border: 1px solid rgba(37,99,235,.22);
padding: .25rem .5rem;
border-radius: .25rem;
flex-shrink: 0;
min-width: 3.25rem;
text-align: center;
}
@media (max-width: 1024px) {
.home-lead-magnet-inner { grid-template-columns: 1fr; gap: 2.5rem; }
}
/* Comparison pages styling. */
.compared-hero {
padding: 4rem 0 2.5rem;
border-bottom: 1px solid var(--border);
}
.compared-hero-inner { max-width: 880px; margin: 0 auto; text-align: center; }
/* JTBD-named tagline rendered above the keyword H1 — keeps "Kwintely vs X"
for SEO match while the tagline carries the Bourgoin job-to-be-done. */
.compared-tagline {
font-size: 1rem;
color: var(--accent);
font-weight: 600;
letter-spacing: .005em;
line-height: 1.5;
margin: .5rem auto 1rem;
max-width: 720px;
}
.compared-positioning {
font-size: 1.0625rem;
color: var(--text-muted);
line-height: 1.7;
margin: 1rem auto 0;
max-width: 760px;
}
/* ── /compared overview decision-helper ─────────────────────────────────────
Late-funnel buyers arrive knowing one specific competitor name. The chips
let them jump straight to the relevant card; the cards have id="compared-{slug}"
anchors so the chips become hash links. */
.compared-picker {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
margin: 0 auto 2rem;
padding: 1.25rem 1.5rem;
background: rgba(17,24,39,.4);
border: 1px solid var(--border);
border-radius: var(--r-lg);
max-width: 880px;
}
.compared-picker-label {
font-family: var(--mono);
font-size: .8rem;
letter-spacing: .04em;
color: var(--text-subtle);
text-transform: uppercase;
}
.compared-picker-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.compared-picker-chip {
display: inline-block;
padding: .4rem .9rem;
border: 1px solid var(--border);
border-radius: 999px;
font-size: .875rem;
color: var(--text-muted);
text-decoration: none;
transition: border-color .2s, color .2s, background .2s;
}
.compared-picker-chip:hover {
border-color: var(--accent);
color: var(--text);
background: rgba(37,99,235,.08);
text-decoration: none;
}
/* Anchor-jump landing offset so the picked card isn't under the sticky nav. */
.uc-card[id^="compared-"] { scroll-margin-top: 6rem; }
/* ── Mid-funnel sample-pack block (/compared) ───────────────────────────────
For the still-evaluating buyer who isn't ready for a 15-min call. Mirrors
the homepage lead-magnet block. */
.compared-sample {
padding: 4rem 0;
border-bottom: 1px solid var(--border);
background:
radial-gradient(circle at 80% 20%, rgba(37,99,235,.06) 0%, transparent 55%),
var(--bg);
}
/* Co-creation invite band (e.g. Markush on the Derwent page). Warm, open
invitation rather than a hard CTA, so it gets its own accented band. */
.compared-cocreate {
padding: 4rem 0;
border-top: 1px solid var(--border);
background:
radial-gradient(circle at 20% 20%, rgba(37,99,235,.08) 0%, transparent 55%),
var(--surface);
}
.compared-cocreate-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.compared-cocreate-inner .section-title { margin: .5rem 0 1rem; }
.compared-cocreate-inner .section-sub { margin: 0 auto 1.75rem; }
.compared-cocreate .cta-actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.compared-sample-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
max-width: 1100px;
margin: 0 auto;
}
.compared-sample-inner > * { min-width: 0; }
.compared-sample-text .section-title { margin: .5rem 0 1rem; }
.compared-sample-text .section-sub { margin-bottom: 1.5rem; }
.compared-sample-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
}
.compared-sample-note {
font-size: .8125rem;
color: var(--text-subtle);
font-style: italic;
line-height: 1.5;
max-width: 32ch;
}
.compared-sample-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: .65rem;
}
.compared-sample-list li {
display: flex;
align-items: flex-start;
gap: .75rem;
font-size: .9375rem;
color: var(--text-muted);
line-height: 1.5;
padding: .65rem .75rem;
border: 1px solid var(--border);
border-radius: var(--r);
background: rgba(17,24,39,.4);
}
@media (max-width: 1024px) {
.compared-sample-inner { grid-template-columns: 1fr; gap: 2.25rem; }
}
.compared-table-section { padding: 4rem 0; }
.compared-table {
max-width: 1100px;
margin: 0 auto;
border: 1px solid var(--border);
border-radius: var(--r-lg);
overflow: hidden;
}
.compared-table-head {
display: grid;
grid-template-columns: 1.2fr 1.4fr 1.4fr;
background: rgba(17,24,39,.4);
border-bottom: 1px solid var(--border);
}
.compared-table-h {
padding: 1rem 1.25rem;
font-family: var(--mono);
font-size: .8125rem;
letter-spacing: .08em;
text-transform: uppercase;
}
.compared-table-h-criterion { color: var(--text-subtle); }
.compared-table-h-us { color: #10b981; border-left: 1px solid var(--border); }
.compared-table-h-them { color: var(--text-muted); border-left: 1px solid var(--border); }
.compared-table-row {
display: grid;
grid-template-columns: 1.2fr 1.4fr 1.4fr;
border-top: 1px solid var(--border);
}
.compared-table-row:first-of-type { border-top: 0; }
.compared-table-cell {
padding: 1.1rem 1.25rem;
font-size: .9375rem;
line-height: 1.6;
}
.compared-table-cell-criterion { color: var(--text); font-weight: 600; }
.compared-table-cell-us {
color: var(--text);
border-left: 1px solid var(--border);
background: rgba(16,185,129,.04);
}
.compared-table-cell-them { color: var(--text-muted); border-left: 1px solid var(--border); }
@media (max-width: 1024px) {
/* Vertical card layout: the 3-col table is unreadable stacked, so each row
becomes a card — criterion as a header, then the Kwintely + competitor
values each labelled (data-label) so their column stays clear. */
.compared-table { border: 0; overflow: visible; }
.compared-table-head { display: none; }
.compared-table-row {
grid-template-columns: 1fr;
border: 1px solid var(--border);
border-radius: var(--r);
margin-bottom: 1rem;
overflow: hidden;
}
.compared-table-cell { padding: .7rem 1rem; border-left: 0; }
.compared-table-cell-criterion {
background: rgba(17,24,39,.4);
border-bottom: 1px solid var(--border);
font-size: .95rem; font-weight: 700;
}
.compared-table-cell-them { border-top: 1px solid var(--border); }
.compared-table-cell-us::before,
.compared-table-cell-them::before {
content: attr(data-label);
display: block; font-family: var(--mono);
font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
margin-bottom: .2rem;
}
.compared-table-cell-us::before { color: #10b981; }
.compared-table-cell-them::before { color: var(--text-subtle); }
}
.compared-when { padding: 0 0 5rem; }
.compared-sources { padding: 0 0 4rem; }
.compared-sources-note { max-width: 1100px; margin: 0 auto; font-size: .8125rem; line-height: 1.6; color: var(--text-subtle); text-align: center; }
.compared-when-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
max-width: 1100px;
margin: 0 auto;
}
.compared-when-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 2rem 1.75rem;
}
.compared-when-card-us { border-color: rgba(16,185,129,.4); background: rgba(16,185,129,.04); }
.compared-when-card h2 {
font-size: 1.1875rem;
font-weight: 700;
letter-spacing: -.02em;
margin: 0 0 .85rem;
}
.compared-when-card-us h2 { color: #10b981; }
.compared-when-card p { color: var(--text-muted); font-size: .9375rem; line-height: 1.7; margin: 0; }
@media (max-width: 1024px) {
.compared-when-grid { grid-template-columns: 1fr; }
}
/* ── 404 page ────────────────────────────────────────────────────────────── */
.not-found { padding: 5rem 0 6rem; min-height: 65vh; }
.not-found-inner { max-width: 860px; }
.not-found-code {
font-size: 6rem;
font-weight: 900;
letter-spacing: -.08em;
color: var(--border);
line-height: 1;
margin-bottom: 1rem;
}
.not-found h1 { font-family: var(--mono); font-size: 1.625rem; font-weight: 500; letter-spacing: -.04em; margin-bottom: .875rem; }
.not-found-sub { font-size: 1.0625rem; color: var(--text-muted); margin-bottom: 3rem; max-width: 520px; }
.not-found-links {
display: grid;
grid-template-columns: 1fr 1fr 200px;
gap: 3rem;
margin-bottom: 3rem;
padding-bottom: 3rem;
border-bottom: 1px solid var(--border);
}
.nf-group-label {
font-size: .75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--text-subtle);
margin-bottom: 1rem;
}
.nf-group ul { display: flex; flex-direction: column; gap: .5rem; }
.nf-group li a {
display: flex;
align-items: center;
gap: .5rem;
font-size: .9rem;
color: var(--text-muted);
}
.nf-group li a:hover { color: var(--text); text-decoration: none; }
.nf-group-cta { display: flex; flex-direction: column; gap: 1rem; }
.nf-cta-sub { font-size: .8125rem; color: var(--text-subtle); line-height: 1.5; }
.not-found-home { font-size: .9rem; color: var(--text-subtle); }
.not-found-home:hover { color: var(--accent); text-decoration: none; }
/* ── Responsive additions ────────────────────────────────────────────────── */
/* .uc-grid and .eng-grid are now mobile-first (defined alongside their
default rules). Below: page-specific selectors that still use desktop-down. */
@media (max-width: 1024px) {
.uc-hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
.uc-hero-screen { position: static; }
.uc-personas-grid { grid-template-columns: repeat(2, 1fr); }
.not-found-links { grid-template-columns: 1fr 1fr; }
.nf-group-cta { grid-column: 1 / -1; }
}
@media (max-width: 1024px) {
.demo-layout { grid-template-columns: 1fr; gap: 3rem; }
.demo-form-wrap { position: static; }
.articles-grid { grid-template-columns: repeat(2, 1fr); }
.articles-featured { padding: 1.75rem 2rem; }
.nav-dropdown-wide { min-width: 100%; grid-template-columns: 1fr; }
.drop-col + .drop-col { border-left: none; border-top: 1px solid var(--border); }
}
@media (max-width: 640px) {
.articles-list-item { grid-template-columns: 56px 1fr auto; gap: 1rem; padding: 1rem 1.25rem; }
.articles-list-excerpt { display: none; }
.aldate-day { font-size: 1.125rem; }
.articles-featured { padding: 1.5rem; }
.articles-featured-title { font-size: 1.125rem; }
}
@media (max-width: 640px) {
.demo-proof { grid-template-columns: 1fr 1fr; }
.articles-grid { grid-template-columns: 1fr; }
.post-meta-row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .25rem .55rem; font-size: .8rem; }
.uc-level-legend { gap: .5rem; }
/* Mobile: each buyer-level pill + its description on its own line. The legend
is a wrapping flexbox whose bare text nodes are separate flex items, so it
wrapped mid-pair. Full-width zero-height separators force a break after each
pill+text pair without showing a stray dot. */
.uc-lvl-sep { flex: 0 0 100%; height: 0; margin: 0; overflow: hidden; }
/* Hero H1 (platform / industries): drop the desktop forced
breaks on
mobile so the headline wraps naturally instead of breaking mid-phrase. */
.industries-hero h1 br { display: none; }
.uc-outputs-grid { grid-template-columns: 1fr; }
.uc-personas-grid { grid-template-columns: 1fr 1fr; }
.uc-related-grid { grid-template-columns: 1fr; }
.not-found-links { grid-template-columns: 1fr; gap: 2rem; }
.not-found-code { font-size: 4rem; }
}
/* ═══════════════════════════════════════════════════════════════════════════
Industries
═══════════════════════════════════════════════════════════════════════════ */
/* ── Homepage section ────────────────────────────────────────────────────── */
.industries-section { background: var(--bg); border-top: 1px solid var(--border); }
/* Mobile-first: 1 → 2 → 3 columns. */
.industry-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
}
@media (min-width: 641px) {
.industry-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1025px) {
.industry-grid { grid-template-columns: repeat(3, 1fr); }
}
.industry-card {
/* The industry photo is a real ![]()
(.industry-card-img, for SEO/alt) under
a dark scrim (::after) that keeps the light card copy legible. */
background-color: rgba(17,24,39,.85);
isolation: isolate; /* scope the photo/scrim/copy z-index layering */
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 2rem 1.75rem;
display: flex;
flex-direction: column;
gap: .75rem;
text-decoration: none;
color: inherit;
position: relative;
overflow: hidden;
transition: border-color .3s, box-shadow .3s, transform .3s;
}
/* The tile photo as a real ![]()
, zoomed so the centre subject fills the card
and the verticals look distinct, not uniform. */
.industry-card-img {
position: absolute;
top: 50%; left: 50%;
width: 150%; height: 150%;
transform: translate(-50%, -50%);
object-fit: cover;
object-position: center;
z-index: 1;
}
/* Dark scrim over the photo, heavier toward the bottom where the copy sits. */
.industry-card::after {
content: '';
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background: linear-gradient(160deg, rgba(11,15,26,.46) 0%, rgba(11,15,26,.74) 56%, rgba(11,15,26,.90) 100%);
}
/* Accent wash that fades in on hover, above the scrim and below the copy. */
.industry-card::before {
content: '';
position: absolute;
inset: 0;
z-index: 3;
background: var(--ind-accent-muted, rgba(37,99,235,.08));
opacity: 0;
transition: opacity .3s;
pointer-events: none;
}
/* All card content sits above the photo, scrim, and hover wash. */
.industry-card > :not(.industry-card-img) { position: relative; z-index: 4; }
/* Keep card copy legible over the photo. */
.industry-card-name,
.industry-card-teaser,
.industry-card-cta { text-shadow: 0 1px 12px rgba(11,15,26,.65); }
.industry-card:hover {
border-color: var(--ind-accent, var(--accent));
box-shadow: 0 12px 40px rgba(0,0,0,.35);
transform: translateY(-4px);
text-decoration: none;
}
.industry-card:hover::before { opacity: 1; }
.industry-card-icon {
font-size: 2rem;
line-height: 1;
position: relative;
}
/* ── Periodic-element cell (industry visual marker) ─────────────────────── */
/* Reads like an entry in the periodic table of the elements: atomic number
top-left, symbol centered, "atomic weight" (= customer count) bottom-right.
Each industry gets its own accent color via --ind-accent. */
.ind-element {
--cell-size: 72px;
position: relative;
width: var(--cell-size);
height: var(--cell-size);
display: block;
border: 1.5px solid var(--ind-accent, var(--border));
background: var(--ind-accent-muted, rgba(255,255,255,.04));
color: var(--ind-accent, var(--text));
font-family: var(--mono);
flex-shrink: 0;
}
.ind-element-num {
position: absolute;
top: 6px; left: 8px;
font-size: .6rem;
font-weight: 500;
color: var(--ind-accent, var(--text-subtle));
opacity: .85;
letter-spacing: .04em;
}
.ind-element-symbol {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
font-size: 1.75rem;
font-weight: 500;
color: var(--text);
letter-spacing: -.02em;
line-height: 1;
}
.ind-element-weight {
position: absolute;
bottom: 6px; right: 8px;
font-size: .6rem;
font-weight: 500;
color: var(--ind-accent, var(--text-subtle));
opacity: .85;
letter-spacing: .04em;
font-variant-numeric: tabular-nums;
}
/* Hero-size variant for the detail page */
.ind-element--hero {
--cell-size: 128px;
border-width: 2px;
}
.ind-element--hero .ind-element-num,
.ind-element--hero .ind-element-weight {
font-size: .75rem;
top: 10px; left: 12px;
}
.ind-element--hero .ind-element-weight {
top: auto; left: auto;
bottom: 10px; right: 12px;
}
.ind-element--hero .ind-element-symbol {
font-size: 3.25rem;
font-weight: 500;
}
.industry-card-name {
font-size: 1.125rem;
font-weight: 800;
letter-spacing: -.03em;
color: var(--text);
position: relative;
}
.industry-card-teaser {
font-size: .875rem;
color: var(--text-muted);
line-height: 1.6;
flex: 1;
position: relative;
}
.industry-card-cta {
font-size: .8125rem;
font-weight: 700;
color: var(--ind-accent, var(--accent));
margin-top: auto;
position: relative;
transition: gap .15s;
}
/* ── Industries hub page ─────────────────────────────────────────────────── */
.industries-hero {
padding: 5rem 0 3.5rem;
border-bottom: 1px solid var(--border);
}
.industries-hero-inner { max-width: 820px; } /* fits 37-char mono H1 at 34px without wrap */
.industries-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-top: 1.75rem; }
/* On phones, long CTA labels overflow the nowrap button; stack full-width and
let the text wrap onto a second line instead of running off-screen. */
@media (max-width: 640px) {
.industries-hero-actions { flex-direction: column; align-items: stretch; }
.industries-hero-actions .btn { width: 100%; white-space: normal; justify-content: center; text-align: center; }
}
/* Breathing room between the hero buttons and the full-width product shot below
(platform page). Scoped to .industries-hero so the homepage hero — where the
shot sits beside the text in a grid — is unaffected. */
.industries-hero .hero-screen-brief { margin-top: 2.75rem; }
.industries-body { padding: 4rem 0 6rem; }
/* ── Industry detail page ────────────────────────────────────────────────── */
.ind-hero {
padding: 5rem 0 4rem;
border-bottom: 1px solid var(--border);
position: relative;
overflow: hidden;
}
.ind-hero::before {
content: '';
position: absolute;
top: -60px; right: -60px;
width: 500px; height: 500px;
border-radius: 50%;
background: var(--ind-accent-muted, rgba(37,99,235,.1));
filter: blur(80px);
pointer-events: none;
}
/* Industry detail pages: full-bleed photographic hero. The photo is a real
![]()
(.ind-hero-photo-img, for SEO/alt) sitting behind an accent-tinted dark
scrim (::after) so the copy stays legible and the overlay matches the accent. */
.ind-hero--photo .ind-hero-h1, .ind-hero--photo .ind-hero-lead { text-shadow: 0 1px 14px rgba(0,0,0,.55); }
.ind-hero--photo {
isolation: isolate; /* scope the photo/scrim z-index layering */
border-bottom: none; /* the photo fades into the section below instead */
padding-bottom: 6rem;
}
.ind-hero-photo-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center right;
z-index: 0;
}
.ind-hero--photo::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background-image:
linear-gradient(to top, var(--surface) 0%, rgba(9,16,13,0) 16%),
linear-gradient(105deg, color-mix(in srgb, var(--ind-accent) 40%, transparent) 0%, color-mix(in srgb, var(--ind-accent) 13%, transparent) 48%, transparent 82%),
linear-gradient(100deg, rgba(9,16,13,.82) 0%, rgba(9,16,13,.68) 38%, rgba(9,16,13,.38) 74%, rgba(9,16,13,.22) 100%);
}
.ind-hero--photo::before { opacity: .55; mix-blend-mode: screen; z-index: 1; }
.ind-hero--photo .ind-hero-h1 { color: #fff; }
.ind-hero--photo .ind-hero-lead { color: rgba(255,255,255,.85); }
.ind-hero--photo .ind-hero-compared { color: rgba(255,255,255,.72); }
.ind-hero--photo .ind-element { background: color-mix(in srgb, var(--ind-accent) 20%, transparent); }
.ind-hero--photo .ind-element-symbol { color: #fff; }
.ind-hero--photo .btn-ghost { color: #fff; border-color: rgba(255,255,255,.38); }
.ind-hero--photo .btn-ghost:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,.10); }
/* Mobile: the hero stacks (<=1024px); switch to a uniform, stronger scrim. */
@media (max-width: 1024px) {
.ind-hero--photo::after {
background-image:
linear-gradient(to top, var(--surface) 0%, rgba(9,16,13,0) 14%),
linear-gradient(180deg, color-mix(in srgb, var(--ind-accent) 24%, transparent), color-mix(in srgb, var(--ind-accent) 10%, transparent)),
linear-gradient(180deg, rgba(9,16,13,.74) 0%, rgba(9,16,13,.58) 100%);
}
.ind-hero-photo-img { object-position: center; }
}
.ind-hero-inner {
position: relative;
z-index: 2;
}
/* Single-column hero (the stats moved to a bar below), so the photo shows
through on the right; cap the copy width so it stays a readable column. */
.ind-hero-content { max-width: 600px; }
/* ── Stats bar under the hero (replaces the right-column stat panel) ──────── */
.ind-statbar {
background: var(--surface);
border-bottom: 1px solid var(--border);
}
.ind-statbar-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .85rem 2.25rem;
padding: 1.05rem 0;
}
.ind-statbar .ind-stat {
display: flex;
align-items: baseline;
gap: .5rem;
padding: 0;
}
.ind-statbar .ind-stat-num {
font-size: 1.2rem;
font-weight: 800;
letter-spacing: -.03em;
line-height: 1;
color: var(--ind-accent, var(--accent));
background: none;
-webkit-text-fill-color: currentColor;
}
.ind-statbar .ind-stat-label {
font-size: .8125rem;
color: var(--text-muted);
line-height: 1.2;
}
.ind-statbar-badge {
margin-left: auto;
display: inline-flex;
align-items: center;
background: rgba(16,185,129,.08);
border: 1px solid rgba(16,185,129,.22);
border-radius: 999px;
padding: .35rem 1rem;
font-size: .75rem;
font-weight: 600;
color: var(--positive);
letter-spacing: .02em;
}
@media (max-width: 640px) {
.ind-statbar-inner { display: grid; grid-template-columns: 1fr; gap: .55rem; }
.ind-statbar-badge { margin-left: 0; margin-top: .35rem; }
}
.ind-icon-badge {
font-size: 2.75rem;
line-height: 1;
margin-bottom: 1rem;
}
.ind-eyebrow {
font-size: .8125rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--ind-accent, var(--accent));
margin-bottom: .875rem;
}
.ind-hero-h1 {
font-family: var(--mono);
font-size: clamp(1.625rem, 2.8vw, 2.375rem);
font-weight: 500;
letter-spacing: -.04em;
line-height: 1.2;
margin-bottom: 1.25rem;
}
.ind-hero-lead {
font-size: 1.0625rem;
color: var(--text-muted);
line-height: 1.75;
max-width: 540px;
margin-bottom: 2rem;
}
.ind-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.ind-hero-stat-panel {
background: rgba(17,24,39,.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--border);
border-radius: var(--r-xl);
padding: 2rem;
display: flex;
flex-direction: column;
gap: 0;
}
.ind-stat { padding: 1.25rem 0; }
.ind-stat-num {
font-size: 2rem;
font-weight: 900;
letter-spacing: -.05em;
line-height: 1;
background: var(--gradient-text);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: .375rem;
}
.ind-stat-label { font-size: .8125rem; color: var(--text-muted); line-height: 1.4; }
.ind-stat-divider { height: 1px; background: var(--border); }
.ind-stat-badge {
margin-top: 1.25rem;
display: inline-flex;
align-items: center;
background: rgba(16,185,129,.08);
border: 1px solid rgba(16,185,129,.2);
border-radius: 999px;
padding: .35rem 1rem;
font-size: .75rem;
font-weight: 600;
color: var(--positive);
letter-spacing: .03em;
}
/* ── Challenges ──────────────────────────────────────────────────────────── */
.ind-challenges { background: var(--surface); border-bottom: 1px solid var(--border); padding: 5rem 0; }
.ind-challenges-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5rem;
align-items: start;
}
.ind-challenges-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
.ind-challenge-card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: .75rem;
}
.ind-challenge-icon {
width: 36px; height: 36px;
border-radius: var(--r);
display: flex; align-items: center; justify-content: center;
font-size: 1rem;
flex-shrink: 0;
}
.ind-challenge-card h3 { font-size: .9375rem; font-weight: 700; color: var(--text); letter-spacing: -.02em; }
.ind-challenge-card p { font-size: .875rem; color: var(--text-muted); line-height: 1.65; }
/* ── Workflows ───────────────────────────────────────────────────────────── */
.ind-workflows { background: var(--bg); border-bottom: 1px solid var(--border); padding: 5rem 0; }
.ind-uc-card:hover { border-color: var(--ind-accent, var(--accent)); box-shadow: 0 8px 32px rgba(0,0,0,.2); }
/* ── Knowledge base ──────────────────────────────────────────────────────── */
.ind-knowledge { background: var(--surface); border-bottom: 1px solid var(--border); padding: 5rem 0; }
/* ── Reports ─────────────────────────────────────────────────────────────── */
.ind-reports { background: var(--bg); border-bottom: 1px solid var(--border); padding: 5rem 0; }
.ind-reports-grid { display: flex; justify-content: center; padding: 2rem 0; }
.ind-report-placeholder {
max-width: 480px;
text-align: center;
background: var(--surface);
border: 1px dashed var(--border);
border-radius: var(--r-xl);
padding: 3rem 2.5rem;
display: flex;
flex-direction: column;
align-items: center;
}
.ind-report-icon {
width: 56px; height: 56px;
border-radius: var(--r-lg);
display: flex; align-items: center; justify-content: center;
font-size: 1.5rem;
margin-bottom: 1.25rem;
}
.ind-report-coming { font-size: .9375rem; color: var(--text-muted); line-height: 1.75; }
/* ── Industry responsive ─────────────────────────────────────────────────── */
/* .industry-grid is now mobile-first (defined alongside the homepage grids).
Industry-page-specific selectors stay desktop-down here for now. */
@media (max-width: 1024px) {
.ind-hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
.ind-hero-stat-panel { flex-direction: row; flex-wrap: wrap; gap: 1rem; padding: 1.5rem; }
.ind-stat { flex: 1; min-width: 120px; }
.ind-stat-divider { display: none; }
.ind-challenges-inner { grid-template-columns: 1fr; gap: 2.5rem; }
.ind-challenges-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.ind-hero-stat-panel { flex-direction: column; }
}
/* ═══════════════════════════════════════════════════════════════════════════
/status — system status page
═══════════════════════════════════════════════════════════════════════════ */
.status-page { padding: 4rem 0 5rem; }
.status-hero {
max-width: 760px;
margin: 0 auto 3rem;
text-align: center;
}
.status-headline {
font-family: var(--mono);
font-size: clamp(1.625rem, 2.4vw, 2.25rem);
font-weight: 500;
letter-spacing: -.03em;
line-height: 1.2;
margin: 1rem 0 .85rem;
}
.status-headline-scanner {
display: flex;
justify-content: center;
margin: 0 0 1rem;
}
.status-overall-dot {
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--status-color, #10b981);
flex-shrink: 0;
box-shadow: 0 0 0 0 var(--status-color, #10b981);
animation: status-pulse 2.4s ease-out infinite;
}
.status-overall-dot--operational { --status-color: #10b981; }
.status-overall-dot--degraded { --status-color: #f59e0b; }
.status-overall-dot--down { --status-color: #ef4444; }
.status-meta {
font-size: 1rem;
color: var(--text-muted);
line-height: 1.6;
margin: 0;
}
.status-meta strong { color: var(--text); font-weight: 600; }
/* ── Component cards ───────────────────────────────────────────────────── */
.status-components {
display: flex;
flex-direction: column;
gap: 1rem;
max-width: 880px;
margin: 0 auto;
}
.status-component {
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid var(--status-color, var(--border));
border-radius: var(--r-lg);
padding: 1.5rem 1.75rem;
}
.status-component--operational { --status-color: #10b981; }
.status-component--degraded { --status-color: #f59e0b; }
.status-component--down { --status-color: #ef4444; }
.status-component--coming-soon { --status-color: var(--text-subtle); border-left-style: dashed; }
.status-component-head {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: .75rem;
margin-bottom: .5rem;
}
.status-component-name {
font-size: 1.0625rem;
font-weight: 700;
letter-spacing: -.01em;
color: var(--text);
margin: 0;
}
.status-component-badge {
display: inline-flex;
align-items: center;
gap: .5rem;
font-size: .75rem;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
padding: .35rem .75rem;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--status-color) 50%, transparent);
background: color-mix(in srgb, var(--status-color) 10%, transparent);
color: var(--status-color);
}
.status-component-badge--coming-soon {
border-style: dashed;
}
.status-component-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
.status-component-desc {
font-size: .9375rem;
color: var(--text-muted);
line-height: 1.65;
margin: 0 0 .75rem;
}
.status-component-metric {
display: flex;
align-items: baseline;
gap: .65rem;
padding-top: .75rem;
border-top: 1px solid var(--border);
font-size: .8125rem;
}
.status-metric-label { color: var(--text-subtle); letter-spacing: .04em; text-transform: uppercase; font-size: .7rem; }
.status-metric-value { font-family: var(--mono); font-weight: 600; color: var(--text); font-size: 1rem; }
.status-note {
max-width: 720px;
margin: 3rem auto 0;
text-align: center;
font-size: .8125rem;
color: var(--text-subtle);
line-height: 1.65;
}
.status-note a { color: var(--text-muted); border-bottom: 1px solid var(--border); }
.status-note a:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }
@media (max-width: 640px) {
.status-component { padding: 1.25rem 1.25rem; }
.status-component-head { flex-direction: column; align-items: flex-start; }
}
/* ═══════════════════════════════════════════════════════════════════════════
Status — 6-hour stripe + legend
═══════════════════════════════════════════════════════════════════════════ */
.status-stripe-legend {
display: flex;
flex-wrap: wrap;
gap: 1rem 1.25rem;
justify-content: center;
margin-bottom: 1.5rem;
font-size: .75rem;
color: var(--text-subtle);
letter-spacing: .04em;
text-transform: uppercase;
}
.status-stripe-legend > span { display: inline-flex; align-items: center; gap: .4rem; }
.legend-swatch {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 2px;
}
.legend-swatch--operational { background: #10b981; }
.legend-swatch--degraded { background: #f59e0b; }
.legend-swatch--down { background: #ef4444; }
.legend-swatch--no-data { background: var(--surface-2); border: 1px solid var(--border); }
.status-stripe {
display: flex;
gap: 1px;
height: 28px;
margin: 1rem 0 .5rem;
}
.status-stripe-cell {
flex: 1 1 0;
min-width: 4px;
border-radius: 1px;
transition: transform .15s, opacity .15s;
}
.status-stripe-cell:hover { transform: scaleY(1.18); }
.status-stripe-cell--operational { background: #10b981; }
.status-stripe-cell--degraded { background: #f59e0b; }
.status-stripe-cell--down { background: #ef4444; }
.status-stripe-cell--no-data { background: var(--surface-2); border: 1px solid var(--border); }
.status-stripe-cell--coming-soon { background: var(--surface-2); border: 1px dashed var(--text-subtle); opacity: .6; }
.status-stripe-axis {
display: flex;
justify-content: space-between;
font-size: .7rem;
color: var(--text-subtle);
letter-spacing: .04em;
margin-bottom: .75rem;
}
/* ═══════════════════════════════════════════════════════════════════════════
Status-indicator visualization — KITT scanner (Knight Rider, 1982).
Used in the header, footer, and the /status hero. State colour via --vc.
═══════════════════════════════════════════════════════════════════════════ */
.viz { display: inline-block; --vc: #10b981; --vc-soft: #34d399; }
.viz.viz--operational { --vc: #10b981; --vc-soft: #34d399; }
.viz.viz--degraded { --vc: #f59e0b; --vc-soft: #fbbf24; }
.viz.viz--down { --vc: #ef4444; --vc-soft: #f87171; }
.viz.viz--no-data { --vc: #6b7280; --vc-soft: #9ca3af; }
.viz.viz--coming-soon { --vc: #6b7280; --vc-soft: #9ca3af; }
/* ── KITT scanner ───────────────────────────────────────────────────────────
Inspired by the iconic horizontal LED sweep on the front of K.I.T.T. (the
1982 Pontiac Trans Am from "Knight Rider"). 8 discrete cells; each cell
has its own keyframe with two peaks per 2.4 s cycle (forward sweep then
reverse), so the highlight scans 0→1→2→…→7→6→…→0 cell-by-cell. Edge
cells (1 + 8) collapse their two peaks into one bigger "bounce" at the
stroke endpoints. Cell colour comes from the status `--vc` token. */
.viz-kitt {
display: inline-flex;
align-items: stretch;
justify-content: space-between;
gap: 1px;
width: 64px;
height: 14px;
padding: 1px;
border-radius: 2px;
background: rgba(255,255,255,.04);
vertical-align: middle;
}
.viz-k-cell {
flex: 1;
border-radius: 1px;
background: var(--vc);
opacity: .12;
}
.viz-k-cell:nth-child(1) { animation: kitt-c1 2.4s linear infinite; }
.viz-k-cell:nth-child(2) { animation: kitt-c2 2.4s linear infinite; }
.viz-k-cell:nth-child(3) { animation: kitt-c3 2.4s linear infinite; }
.viz-k-cell:nth-child(4) { animation: kitt-c4 2.4s linear infinite; }
.viz-k-cell:nth-child(5) { animation: kitt-c5 2.4s linear infinite; }
.viz-k-cell:nth-child(6) { animation: kitt-c6 2.4s linear infinite; }
.viz-k-cell:nth-child(7) { animation: kitt-c7 2.4s linear infinite; }
.viz-k-cell:nth-child(8) { animation: kitt-c8 2.4s linear infinite; }
/* 14-step sweep encoded in one keyframe per cell. Cell N is "the head" at
step N (forward) and step 14-N (reverse). Snappy attack (3% wide) +
long phosphor-style decay (~14% wide) for trailing afterglow. */
@keyframes kitt-c1 {
/* Cell 1 — leftmost endpoint: peak at 0% (= 100% on loop). Tight envelope
so the cell only glows AFTER cell 2's reverse peak at 92.86%, and fades
before cell 2's forward peak at 7.14%. Symmetric to cell 8's bounce. */
0% { opacity: 1; box-shadow: 0 0 24px var(--vc); }
1% { opacity: .9; box-shadow: 0 0 18px var(--vc); }
3% { opacity: .6; box-shadow: 0 0 8px var(--vc); }
5% { opacity: .3; box-shadow: 0 0 3px var(--vc); }
7%, 93% { opacity: .12; box-shadow: none; }
95% { opacity: .3; box-shadow: 0 0 3px var(--vc); }
97% { opacity: .6; box-shadow: 0 0 8px var(--vc); }
99% { opacity: .9; box-shadow: 0 0 18px var(--vc); }
100% { opacity: 1; box-shadow: 0 0 24px var(--vc); }
}
@keyframes kitt-c2 {
/* Cell 2: peaks at 7.14% and 92.86% */
0%, 2% { opacity: .12; box-shadow: none; }
4% { opacity: .35; box-shadow: 0 0 3px var(--vc); }
6% { opacity: .75; box-shadow: 0 0 11px var(--vc); }
7.14% { opacity: 1; box-shadow: 0 0 16px var(--vc); }
9% { opacity: .9; box-shadow: 0 0 14px var(--vc); }
12% { opacity: .7; box-shadow: 0 0 9px var(--vc); }
15% { opacity: .5; box-shadow: 0 0 5px var(--vc); }
18% { opacity: .35; box-shadow: 0 0 3px var(--vc); }
22% { opacity: .2; box-shadow: 0 0 1px var(--vc); }
26%, 78% { opacity: .12; box-shadow: none; }
82% { opacity: .2; box-shadow: 0 0 1px var(--vc); }
85% { opacity: .35; box-shadow: 0 0 3px var(--vc); }
88% { opacity: .55; box-shadow: 0 0 6px var(--vc); }
90.5% { opacity: .8; box-shadow: 0 0 12px var(--vc); }
92.86% { opacity: 1; box-shadow: 0 0 16px var(--vc); }
95% { opacity: .9; box-shadow: 0 0 14px var(--vc); }
98% { opacity: .65; box-shadow: 0 0 8px var(--vc); }
100% { opacity: .45; box-shadow: 0 0 5px var(--vc); }
}
@keyframes kitt-c3 {
/* Cell 3: peaks at 14.29% and 85.71% */
0%, 9% { opacity: .12; box-shadow: none; }
11% { opacity: .35; box-shadow: 0 0 3px var(--vc); }
13% { opacity: .75; box-shadow: 0 0 11px var(--vc); }
14.29% { opacity: 1; box-shadow: 0 0 16px var(--vc); }
16% { opacity: .9; box-shadow: 0 0 14px var(--vc); }
19% { opacity: .7; box-shadow: 0 0 9px var(--vc); }
22% { opacity: .5; box-shadow: 0 0 5px var(--vc); }
25% { opacity: .35; box-shadow: 0 0 3px var(--vc); }
29% { opacity: .2; box-shadow: 0 0 1px var(--vc); }
33%, 79% { opacity: .12; box-shadow: none; }
82% { opacity: .25; box-shadow: 0 0 2px var(--vc); }
84% { opacity: .55; box-shadow: 0 0 6px var(--vc); }
85.71% { opacity: 1; box-shadow: 0 0 16px var(--vc); }
87% { opacity: .9; box-shadow: 0 0 14px var(--vc); }
90% { opacity: .7; box-shadow: 0 0 9px var(--vc); }
93% { opacity: .5; box-shadow: 0 0 5px var(--vc); }
96% { opacity: .35; box-shadow: 0 0 3px var(--vc); }
99% { opacity: .2; box-shadow: 0 0 1px var(--vc); }
100% { opacity: .15; box-shadow: none; }
}
@keyframes kitt-c4 {
/* Cell 4: peaks at 21.43% and 78.57% */
0%, 16% { opacity: .12; box-shadow: none; }
18% { opacity: .35; box-shadow: 0 0 3px var(--vc); }
20% { opacity: .75; box-shadow: 0 0 11px var(--vc); }
21.43% { opacity: 1; box-shadow: 0 0 16px var(--vc); }
23% { opacity: .9; box-shadow: 0 0 14px var(--vc); }
26% { opacity: .7; box-shadow: 0 0 9px var(--vc); }
29% { opacity: .5; box-shadow: 0 0 5px var(--vc); }
32% { opacity: .35; box-shadow: 0 0 3px var(--vc); }
36% { opacity: .2; box-shadow: 0 0 1px var(--vc); }
40%, 72% { opacity: .12; box-shadow: none; }
75% { opacity: .25; box-shadow: 0 0 2px var(--vc); }
77% { opacity: .55; box-shadow: 0 0 6px var(--vc); }
78.57% { opacity: 1; box-shadow: 0 0 16px var(--vc); }
80% { opacity: .9; box-shadow: 0 0 14px var(--vc); }
83% { opacity: .7; box-shadow: 0 0 9px var(--vc); }
86% { opacity: .5; box-shadow: 0 0 5px var(--vc); }
89% { opacity: .35; box-shadow: 0 0 3px var(--vc); }
93%, 100% { opacity: .12; box-shadow: none; }
}
@keyframes kitt-c5 {
/* Cell 5: peaks at 28.57% and 71.43% */
0%, 23% { opacity: .12; box-shadow: none; }
25% { opacity: .35; box-shadow: 0 0 3px var(--vc); }
27% { opacity: .75; box-shadow: 0 0 11px var(--vc); }
28.57% { opacity: 1; box-shadow: 0 0 16px var(--vc); }
30% { opacity: .9; box-shadow: 0 0 14px var(--vc); }
33% { opacity: .7; box-shadow: 0 0 9px var(--vc); }
36% { opacity: .5; box-shadow: 0 0 5px var(--vc); }
39% { opacity: .35; box-shadow: 0 0 3px var(--vc); }
43%, 65% { opacity: .2; box-shadow: 0 0 1px var(--vc); }
68% { opacity: .35; box-shadow: 0 0 3px var(--vc); }
70% { opacity: .75; box-shadow: 0 0 11px var(--vc); }
71.43% { opacity: 1; box-shadow: 0 0 16px var(--vc); }
73% { opacity: .9; box-shadow: 0 0 14px var(--vc); }
76% { opacity: .7; box-shadow: 0 0 9px var(--vc); }
79% { opacity: .5; box-shadow: 0 0 5px var(--vc); }
82% { opacity: .35; box-shadow: 0 0 3px var(--vc); }
86%, 100% { opacity: .12; box-shadow: none; }
}
@keyframes kitt-c6 {
/* Cell 6: peaks at 35.71% and 64.29% — gap is small enough that the decay
of peak 1 blends into the attack of peak 2 (sustained mid-glow). */
0%, 30% { opacity: .12; box-shadow: none; }
32% { opacity: .35; box-shadow: 0 0 3px var(--vc); }
34% { opacity: .75; box-shadow: 0 0 11px var(--vc); }
35.71% { opacity: 1; box-shadow: 0 0 16px var(--vc); }
37% { opacity: .9; box-shadow: 0 0 14px var(--vc); }
40% { opacity: .7; box-shadow: 0 0 9px var(--vc); }
44% { opacity: .55; box-shadow: 0 0 6px var(--vc); }
50% { opacity: .5; box-shadow: 0 0 5px var(--vc); }
56% { opacity: .55; box-shadow: 0 0 6px var(--vc); }
60% { opacity: .7; box-shadow: 0 0 9px var(--vc); }
62.5% { opacity: .85; box-shadow: 0 0 13px var(--vc); }
64.29% { opacity: 1; box-shadow: 0 0 16px var(--vc); }
66% { opacity: .9; box-shadow: 0 0 14px var(--vc); }
69% { opacity: .7; box-shadow: 0 0 9px var(--vc); }
73% { opacity: .5; box-shadow: 0 0 5px var(--vc); }
77% { opacity: .35; box-shadow: 0 0 3px var(--vc); }
82%, 100% { opacity: .12; box-shadow: none; }
}
@keyframes kitt-c7 {
/* Cell 7: peaks at 42.86% and 57.14% — peaks closest together, the
cell stays continuously glowing through both. */
0%, 36% { opacity: .12; box-shadow: none; }
38% { opacity: .3; box-shadow: 0 0 2px var(--vc); }
40% { opacity: .65; box-shadow: 0 0 8px var(--vc); }
42% { opacity: .9; box-shadow: 0 0 14px var(--vc); }
42.86% { opacity: 1; box-shadow: 0 0 16px var(--vc); }
44% { opacity: .9; box-shadow: 0 0 14px var(--vc); }
46% { opacity: .75; box-shadow: 0 0 10px var(--vc); }
50% { opacity: .65; box-shadow: 0 0 8px var(--vc); }
54% { opacity: .75; box-shadow: 0 0 10px var(--vc); }
56% { opacity: .9; box-shadow: 0 0 14px var(--vc); }
57.14% { opacity: 1; box-shadow: 0 0 16px var(--vc); }
58% { opacity: .9; box-shadow: 0 0 14px var(--vc); }
60% { opacity: .75; box-shadow: 0 0 10px var(--vc); }
63% { opacity: .55; box-shadow: 0 0 6px var(--vc); }
66% { opacity: .4; box-shadow: 0 0 4px var(--vc); }
70% { opacity: .25; box-shadow: 0 0 2px var(--vc); }
74%, 100% { opacity: .12; box-shadow: none; }
}
@keyframes kitt-c8 {
/* Cell 8 — rightmost endpoint: single peak at 50%. Lead-in stays tight
so the cell only glows AFTER cell 7's forward peak at 42.86%, and it
fades before cell 7's reverse peak at 57.14%. Tight envelope, brightest
halo of any cell to make the bounce feel anchored at the endpoint. */
0%, 43% { opacity: .12; box-shadow: none; }
45% { opacity: .3; box-shadow: 0 0 3px var(--vc); }
47% { opacity: .6; box-shadow: 0 0 8px var(--vc); }
49% { opacity: .9; box-shadow: 0 0 18px var(--vc); }
50% { opacity: 1; box-shadow: 0 0 24px var(--vc); }
51% { opacity: .9; box-shadow: 0 0 18px var(--vc); }
53% { opacity: .6; box-shadow: 0 0 8px var(--vc); }
55% { opacity: .3; box-shadow: 0 0 3px var(--vc); }
57%, 100% { opacity: .12; box-shadow: none; }
}
/* Sized variants — only the container is tuned; cells flex-fill. */
.nav-status .viz-kitt { width: 56px; height: 12px; }
.status-gallery-stage .viz-kitt { width: 96px; height: 18px; }
.status-hero .viz-kitt { width: 200px; height: 22px; }
/* ── Reduced motion respect ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.viz-k-cell { animation: none !important; opacity: .55; }
}