/* ============================================================
Jetscale homepage — v2 VISUAL CONCEPT (same content as site.css /
index.html, different design language entirely)
Direction: Apple × Cohere × Stripe
- Apple: huge confident type, generous whitespace, restrained
monochrome palette, cinematic full-bleed media, quiet motion.
- Cohere: warm cream alternate-section backgrounds, soft dark
mode, small mono "label" pills, friendly rounded geometry.
- Stripe: layered gradient-mesh blobs, tinted soft shadows,
glassy elevated cards, polished pill buttons with real depth.
Every selector below matches site.css 1:1 — index-v2.html is a
byte-identical copy of index.html except for the to this
file, a swapped font import, and a handful of aria-hidden
.mesh-blob decorative divs. No copy changed.
============================================================ */
/* ============================================================
FONTS — self-hosted, latin subset
============================================================
`--font-sans` and `--font-mono` below name Inter and JetBrains Mono. Before
this, neither was loaded anywhere except `pricing.html`, which pulled a
Google Fonts stylesheet for DM Sans (a family this stylesheet never
references) plus JetBrains Mono. So one page had real mono type and the other
53 fell back to Menlo, in both locales — the visible inconsistency between
the English and French pricing pages.
Self-hosted rather than loaded from Google Fonts for three reasons: the CSS
is shared, so one declaration fixes all 54 pages at once; Google Fonts
discloses the visitor's IP address to a third party on page load, before the
consent banner has asked anything, and it is not listed as a provider in
`public/v1/privacy.html`; and a same-origin woff2 is faster than a
cross-origin stylesheet that then fetches a font.
Latin subset only, which is sufficient: it covers every accented character
the French pages use, including the Œ/œ ligature at U+0152-0153. The three
glyphs on the site outside this range — → ↗ ▼ — are outside latin-ext too,
so they fall back to a system font either way, which renders them correctly.
Files come from the @fontsource-variable packages already in package.json;
both axes are variable, so one file covers every weight in use.
============================================================ */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("fonts/inter-latin-variable.woff2") format("woff2");
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: "JetBrains Mono";
font-style: normal;
font-weight: 100 800;
font-display: swap;
src: url("fonts/jetbrains-mono-latin-variable.woff2") format("woff2");
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root {
--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
/* Apple-esque neutrals */
--bg: #ffffff;
--bg-alt: #F7F3EC; /* Cohere-style warm cream, replaces cool grey */
--surface: #ffffff;
--surface-2: #FBF8F1;
--ink: #424242;
--ink-soft: rgba(66, 66, 66, 0.72);
--ink-faint: rgba(66, 66, 66, 0.52);
--line: rgba(10, 10, 12, 0.09);
--line-strong: rgba(10, 10, 12, 0.16);
/* Brand palette gradient: Jetscale hyperblue → deep blue → savings green */
--primary: #0D00DE;
--primary-hover: #0A00AA;
--primary-ink: #ffffff;
--link: #0D00DE;
--tint-1: #ECE9FC;
--tint-2: #D3CCF6;
--grad-1: #0D00DE; /* hyperblue */
--grad-2: #0A00AA; /* deep blue */
--grad-hero-green: #E1F4CB; /* savings green — hero background blobs only */
--mesh-gradient: linear-gradient(120deg, var(--grad-1) 0%, var(--grad-2) 100%);
--green: #1B8A5A;
--green-tint-1: #F1FBF5;
--green-tint-2: #DEF3E6;
--error: #E0442B;
--nav-bg: rgba(255, 255, 255, 0.72);
--shadow: 0 1px 2px rgba(10,10,12,0.04), 0 20px 45px -22px rgba(13,0,222,0.24);
--shadow-lg: 0 4px 10px rgba(10,10,12,0.05), 0 40px 80px -30px rgba(13,0,222,0.30);
--grid-line: rgba(13, 0, 222, 0.05);
--code-bg: #0c0c10;
--code-ink: #eeeef4;
--diff-add: #dcf5e6;
--diff-add-ink: #14663f;
--diff-del: #ffe3e0;
--diff-del-ink: #96271a;
--r-btn: 999px; /* Apple pill buttons */
--r-card: 26px; /* Stripe/Cohere generous soft-card radius */
--r-chip: 999px;
--max-w: 1680px;
--gutter: 64px;
}
[data-theme="dark"] {
--bg: #060608;
--bg-alt: #0E0D12;
--surface: #101016;
--surface-2: #17161d;
--ink: #F6F4F1;
--ink-soft: rgba(246, 244, 241, 0.72);
--ink-faint: rgba(246, 244, 241, 0.48);
--line: rgba(246, 244, 241, 0.12);
--line-strong: rgba(246, 244, 241, 0.22);
/* same hue family as light mode, lifted for contrast on near-black */
--primary: #3A6BFF;
--primary-hover: #5C85FF;
--primary-ink: #ffffff;
--link: #8AA4FF;
--tint-1: rgba(58, 107, 255, 0.14);
--tint-2: rgba(58, 107, 255, 0.26);
--grad-1: #3A6BFF; /* lifted hyperblue */
--grad-2: #6C56FF; /* lifted deep blue */
--grad-hero-green: #E1F4CB; /* savings green — hero background blobs only */
--green: #7FE0AE;
--green-tint-1: rgba(127, 224, 174, 0.10);
--green-tint-2: rgba(127, 224, 174, 0.20);
--error: #FF7A63;
--nav-bg: rgba(6, 6, 8, 0.72);
--shadow: 0 1px 2px rgba(0,0,0,0.5), 0 20px 45px -22px rgba(58,107,255,0.35);
--shadow-lg: 0 4px 10px rgba(0,0,0,0.5), 0 40px 90px -30px rgba(58,107,255,0.4);
--grid-line: rgba(58, 107, 255, 0.08);
--code-bg: #0b0b0f;
--code-ink: #eeeef4;
--diff-add: rgba(127, 224, 174, 0.16);
--diff-add-ink: #7FE0AE;
--diff-del: rgba(255, 122, 99, 0.14);
--diff-del-ink: #ffab9c;
}
/* ---------- reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font-sans);
background: var(--bg);
color: var(--ink);
font-size: 17px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
transition: background 0.3s ease, color 0.3s ease;
}
img, svg, video { display: block; max-width: 100%; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--tint-2); }
section { scroll-margin-top: 96px; position: relative; }
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 999;
background: var(--primary); color: var(--primary-ink);
padding: 10px 18px; border-radius: 0 0 12px 0; font-weight: 600;
}
.skip-link:focus { left: 0; }
.wrap {
max-width: var(--max-w);
margin: 0 auto;
padding-left: var(--gutter);
padding-right: var(--gutter);
position: relative;
z-index: 1;
}
.mono { font-family: var(--font-mono); }
/* ---------- decorative gradient-mesh blobs (Stripe/Cohere signature) ---------- */
.mesh-blob {
position: absolute;
z-index: 0;
border-radius: 50%;
filter: blur(64px);
pointer-events: none;
opacity: 0.55;
}
[data-theme="dark"] .mesh-blob { opacity: 0.4; }
.mesh-blob-1 { top: -12%; left: -8%; width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; background: radial-gradient(circle, var(--grad-1), transparent 70%); }
.mesh-blob-2 { top: -6%; right: -10%; width: 40vw; height: 40vw; max-width: 560px; max-height: 560px; background: radial-gradient(circle, var(--grad-2), transparent 70%); }
.mesh-blob-3 { bottom: -18%; left: 30%; width: 34vw; height: 34vw; max-width: 480px; max-height: 480px; background: radial-gradient(circle, var(--grad-2), transparent 70%); }
/* the hero background is the one place that keeps the savings-green accent */
.hero .mesh-blob-2 { background: radial-gradient(circle, var(--grad-hero-green), transparent 70%); }
.mesh-blob-dark-1 { top: -10%; left: 6%; width: 36vw; height: 36vw; max-width: 520px; max-height: 520px; background: radial-gradient(circle, var(--grad-2), transparent 70%); opacity: 0.28; }
.mesh-blob-dark-2 { bottom: -14%; right: 4%; width: 32vw; height: 32vw; max-width: 460px; max-height: 460px; background: radial-gradient(circle, var(--grad-1), transparent 70%); opacity: 0.24; }
@media (prefers-reduced-motion: no-preference) {
.mesh-blob { animation: mesh-drift 22s ease-in-out infinite alternate; }
.mesh-blob-2 { animation-duration: 26s; }
.mesh-blob-3 { animation-duration: 30s; }
}
@keyframes mesh-drift {
from { transform: translate(0, 0) scale(1); }
to { transform: translate(3%, 4%) scale(1.08); }
}
/* ---------- typographic scale ---------- */
.eyebrow {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--primary);
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px 6px 8px;
border-radius: var(--r-chip);
background: var(--tint-1);
}
[data-theme="dark"] .eyebrow { background: var(--tint-1); }
.eyebrow::before {
content: "";
width: 7px; height: 7px;
border-radius: 50%;
background: var(--mesh-gradient);
}
.h2 {
font-size: clamp(30px, 3.4vw, 50px);
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.03em;
margin: 20px 0 20px;
text-wrap: balance;
}
.lede {
font-size: clamp(17px, 1.3vw, 20px);
color: var(--ink-soft);
max-width: 720px;
text-wrap: pretty;
}
.section { padding: clamp(80px, 9vw, 144px) 0; }
.section-head { max-width: 860px; margin-bottom: clamp(40px, 4vw, 64px); }
/* ---------- buttons (Apple pill + Stripe depth) ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
height: 54px;
padding: 0 30px;
border-radius: var(--r-btn);
font-weight: 600;
font-size: 16px;
white-space: nowrap;
text-decoration: none;
transition: filter 0.18s ease, background 0.25s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.25s ease;
}
.btn:hover { text-decoration: none; }
.btn-primary {
background: var(--mesh-gradient);
background-size: 160% 160%;
background-position: 0% 50%;
color: #fff;
box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--primary) 55%, transparent);
}
.btn-primary:hover { background-position: 100% 50%; transform: translateY(-1px); box-shadow: 0 16px 36px -12px color-mix(in srgb, var(--primary) 60%, transparent); }
.btn-ghost {
background: color-mix(in srgb, var(--surface) 60%, transparent);
color: var(--ink);
border: 1.5px solid var(--line-strong);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
.btn-white {
background: #ffffff;
color: var(--primary);
border: 1.5px solid transparent;
box-shadow: var(--shadow);
}
.btn-white:hover { color: var(--primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.btn-sm { height: 44px; padding: 0 22px; font-size: 15px; }
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible {
outline: 2.5px solid var(--primary);
outline-offset: 3px;
border-radius: 6px;
}
.btn:focus-visible { border-radius: var(--r-btn); }
/* ---------- placeholder chips ---------- */
.ph-chip {
display: inline-flex;
align-items: flex-start;
gap: 8px;
padding: 8px 14px;
border: 1.5px dashed var(--line-strong);
border-radius: 12px;
background: var(--bg-alt);
font-family: var(--font-mono);
font-size: 12.5px;
line-height: 1.5;
color: var(--ink-soft);
text-align: left;
}
.ph-chip::before {
content: "◌";
color: var(--primary);
font-weight: 700;
flex: none;
}
/* ---------- badges ---------- */
.badge-verified {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 5px 12px;
border-radius: var(--r-chip);
background: var(--green-tint-2);
color: var(--green);
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
}
.badge-gate {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 5px 12px;
border-radius: var(--r-chip);
background: var(--tint-1);
color: var(--primary);
border: 1px solid var(--tint-2);
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
}
/* ---------- scroll reveal — Apple-style settle-in with a scale pop ---------- */
html.js .reveal {
opacity: 0;
transform: translateY(38px) scale(0.96);
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
transition-delay: var(--rd, 0ms);
}
html.js .reveal.in { opacity: 1; transform: none; }
/* ============================================================
NAV — glass bar, Apple minimalism + Stripe polish
============================================================ */
.site-nav {
position: sticky;
top: 0;
z-index: 100;
background: var(--nav-bg);
-webkit-backdrop-filter: blur(20px) saturate(1.4);
backdrop-filter: blur(20px) saturate(1.4);
border-bottom: 1px solid transparent;
transition: border-color 0.25s ease, background 0.3s ease;
}
.site-nav.scrolled { border-bottom-color: var(--line); }
.nav-inner {
display: flex;
align-items: center;
gap: 28px;
height: 76px;
}
.brand {
display: inline-flex;
align-items: center;
gap: 10px;
font-weight: 700;
font-size: 20px;
letter-spacing: -0.02em;
color: var(--ink);
}
.brand:hover { text-decoration: none; }
.brand-logo {
height: 26px;
width: auto;
display: block;
}
.nav-links {
display: flex;
align-items: center;
gap: 2px;
list-style: none;
margin-left: 12px;
}
.nav-links > li { position: relative; }
.nav-links a, .nav-links .drop-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 16px;
border-radius: var(--r-chip);
font-size: 15px;
font-weight: 500;
color: var(--ink-soft);
transition: color 0.15s ease, background 0.15s ease;
}
.nav-links a:hover, .nav-links .drop-btn:hover {
color: var(--ink);
background: var(--tint-1);
text-decoration: none;
}
.drop-btn svg { transition: transform 0.2s ease; }
.dropdown.open .drop-btn svg, .dropdown:focus-within .drop-btn svg { transform: rotate(180deg); }
.drop-menu {
position: absolute;
top: calc(100% + 10px);
left: 6px;
min-width: 200px;
background: color-mix(in srgb, var(--surface) 88%, transparent);
-webkit-backdrop-filter: blur(24px);
backdrop-filter: blur(24px);
border: 1px solid var(--line);
border-radius: 20px;
box-shadow: var(--shadow-lg);
padding: 10px;
list-style: none;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.dropdown:hover .drop-menu,
.dropdown:focus-within .drop-menu,
.dropdown.open .drop-menu {
opacity: 1;
visibility: visible;
transform: none;
}
.drop-menu a { display: block; padding: 10px 12px; width: 100%; border-radius: 12px; }
.nav-provider-logo { height: 16px; width: auto; max-width: 22px; display: inline-block; vertical-align: middle; margin-right: 8px; object-fit: contain; }
.drop-menu.wide { min-width: 252px; }
.drop-menu-label {
padding: 10px 12px 4px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-faint);
}
.drop-menu-divider { height: 1px; background: var(--line); margin: 6px 6px; }
.nav-actions {
margin-left: auto;
display: flex;
align-items: center;
gap: 10px;
}
.lang-toggle {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 600;
padding: 8px 12px;
border: 1.5px solid var(--line);
border-radius: var(--r-chip);
color: var(--ink-soft);
}
.lang-toggle:hover { color: var(--ink); border-color: var(--line-strong); text-decoration: none; }
.nav-burger {
display: none;
width: 44px; height: 44px;
border: 1.5px solid var(--line);
border-radius: 50%;
align-items: center;
justify-content: center;
}
.nav-burger span, .nav-burger span::before, .nav-burger span::after {
content: "";
display: block;
width: 18px; height: 2px;
background: var(--ink);
border-radius: 2px;
position: relative;
transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-burger span::before { position: absolute; top: -6px; }
.nav-burger span::after { position: absolute; top: 6px; }
.nav-burger[aria-expanded="true"] span { background: transparent; }
.nav-burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
.mobile-menu {
display: none;
border-top: 1px solid var(--line);
background: var(--bg);
padding: 18px var(--gutter) 28px;
max-height: calc(100dvh - 76px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.mobile-menu.open { display: block; }
.mobile-menu ul { list-style: none; }
.mobile-menu > ul > li > a, .mobile-group-label {
display: block;
padding: 13px 4px;
font-size: 17px;
font-weight: 600;
color: var(--ink);
border-bottom: 1px solid var(--line);
}
.mobile-group-label { color: var(--ink-faint); font-size: 13px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; border-bottom: none; padding-bottom: 4px; }
.mobile-sub a { display: block; padding: 10px 16px; color: var(--ink-soft); font-weight: 500; }
.mobile-cta-row { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.mobile-cta-row .btn { width: 100%; }
/* ============================================================
HERO — Apple scale headline over a Stripe/Cohere gradient mesh
============================================================ */
.hero {
position: relative;
overflow: hidden;
padding: clamp(110px, 13vw, 200px) 0 clamp(72px, 8vw, 128px);
background: var(--bg);
}
.hero-inner { position: relative; text-align: center; z-index: 1; transform-origin: 50% 0%; will-change: transform, opacity; }
.hero h1 {
font-size: clamp(50px, 7.6vw, 116px);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.04em;
margin: 28px auto 30px;
max-width: 13em;
text-wrap: balance;
}
.hero h1 .frag { display: inline-block; }
.hero h1 .frag:last-of-type {
background: var(--mesh-gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero-sub {
font-size: clamp(17px, 1.4vw, 21px);
color: var(--ink-soft);
max-width: 780px;
margin: 0 auto 40px;
text-wrap: pretty;
}
.hero-ctas {
display: flex;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
}
.proof-line {
margin-top: 26px;
font-family: var(--font-mono);
font-size: 13px;
color: var(--ink-faint);
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.proof-line .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-faint); }
/* pin-stage: gives the video-frame extra scroll runway so it can sit
position:sticky and stay in view while the page scrolls past it —
the Apple product-page "pinned media" moment. */
.pin-stage {
position: relative;
min-height: 145vh;
width: 100%;
display: flex;
justify-content: center;
}
.pin-stage .video-frame {
position: sticky;
top: clamp(88px, 11vh, 140px);
align-self: flex-start;
margin-top: 0;
}
/* demo video placeholder — cinematic Apple product-film framing, sized up */
.video-frame {
position: relative;
margin: clamp(48px, 5vw, 72px) auto 0;
width: 100%;
max-width: 1320px;
aspect-ratio: 16 / 9;
border-radius: 32px;
border: 1px solid var(--line);
background: var(--surface-2);
box-shadow: var(--shadow-lg);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 18px;
}
.video-frame::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(120% 130% at 50% 0%, var(--tint-1) 0%, transparent 60%);
pointer-events: none;
}
.demo-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
background: #000;
}
.video-scrim {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.16);
transition: opacity 0.25s ease;
pointer-events: none;
}
.video-frame.playing .video-scrim { opacity: 0; }
.video-frame.playing .play-btn { opacity: 0; pointer-events: none; transform: scale(0.9); }
.video-topbar {
position: absolute;
top: 0; left: 0; right: 0;
height: 42px;
border-bottom: 1px solid var(--line);
background: var(--surface);
display: flex;
align-items: center;
gap: 7px;
padding: 0 18px;
z-index: 2;
}
.video-topbar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.video-topbar .addr {
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--ink-faint);
margin-left: 10px;
background: var(--bg-alt);
border-radius: 999px;
padding: 3px 12px;
}
.play-btn {
position: relative;
z-index: 2;
width: 84px; height: 84px;
border-radius: 50%;
background: var(--mesh-gradient);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 16px 44px -10px color-mix(in srgb, var(--primary) 60%, transparent);
transition: filter 0.18s ease, transform 0.18s ease, opacity 0.2s ease;
cursor: pointer;
}
.play-btn:hover { filter: brightness(1.08); transform: scale(1.06); }
/* ============================================================
LOGO STRIP — Apple "trusted by" restraint
============================================================ */
.logo-strip { padding: clamp(40px, 4vw, 64px) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.logo-strip .strip-eyebrow {
text-align: center;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-faint);
margin-bottom: 30px;
}
.marquee {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
display: flex;
align-items: center;
width: max-content;
}
html.js .marquee-track { animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(calc(-100% / 3)); }
}
.logo-chip {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
height: 56px;
padding: 0 30px;
margin-right: 12px;
border: none;
border-radius: 14px;
background: transparent;
filter: grayscale(1);
transition: opacity 0.2s ease, filter 0.2s ease;
opacity: 0.55;
}
.logo-chip:hover { opacity: 1; filter: grayscale(0); }
.logo-chip img {
display: block;
height: auto;
width: auto;
max-height: 24px;
max-width: 128px;
}
/* ============================================================
PROBLEM — Apple minimal cards with gradient numerals
============================================================ */
.cards-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-card);
padding: 32px 30px;
transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.card-num {
font-family: var(--font-mono);
font-size: 22px;
font-weight: 700;
background: var(--mesh-gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
display: block;
margin-bottom: 16px;
}
.card h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 10px; }
.card p { color: var(--ink-soft); font-size: 15.5px; }
#problem { background: var(--bg-alt); }
#problem .card { background: var(--surface); }
[data-theme="dark"] #problem .card { background: var(--surface-2); }
.checklist-ribbon {
margin-top: 24px;
border: 1px solid var(--line);
border-radius: var(--r-card);
background: var(--surface);
padding: 24px 28px;
display: flex;
flex-wrap: wrap;
gap: 10px 22px;
align-items: center;
}
[data-theme="dark"] .checklist-ribbon { background: var(--surface-2); }
.checklist-ribbon li {
list-style: none;
display: inline-flex;
align-items: center;
gap: 9px;
font-size: 15px;
color: var(--ink-soft);
font-weight: 500;
background: var(--bg-alt);
padding: 7px 14px 7px 8px;
border-radius: var(--r-chip);
}
[data-theme="dark"] .checklist-ribbon li { background: var(--bg); }
.checklist-ribbon .ck {
flex: none;
width: 20px; height: 20px;
border-radius: 50%;
background: var(--green-tint-2);
color: var(--green);
display: inline-flex;
align-items: center;
justify-content: center;
}
.checklist-ribbon .ribbon-tail {
font-family: var(--font-mono);
font-size: 13px;
color: var(--green);
font-weight: 600;
margin-left: auto;
background: none;
padding: 0;
}
/* mockup frames (product screenshots / charts) — Stripe glass panel */
.mockup {
position: relative;
border: 1px solid var(--line);
border-radius: var(--r-card);
background: var(--surface);
box-shadow: var(--shadow);
overflow: hidden;
}
[data-theme="dark"] .mockup { background: var(--surface-2); }
.mockup-head {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 20px;
border-bottom: 1px solid var(--line);
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink-faint);
}
.mockup-head i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.mockup-head .mockup-title { margin-left: 8px; }
.mockup-body { padding: 26px; }
.mockup-ph-note { padding: 0 24px 20px; }
.drift-chart-wrap { margin-top: 26px; }
/* ============================================================
BUDGET CALCULATOR — Stripe split-panel with gradient result pane
============================================================ */
.jc-calc {
display: flex;
margin-top: clamp(32px, 4vw, 48px);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-card);
box-shadow: var(--shadow-lg);
overflow: hidden;
}
[data-theme="dark"] .jc-calc { background: var(--surface-2); }
.jc-calc-left { flex: 1; padding: clamp(28px, 4vw, 52px); min-width: 0; }
.jc-row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.jc-label { font-size: 18px; font-weight: 700; color: var(--ink); }
.jc-bill-value { font-family: var(--font-mono); font-size: 26px; font-weight: 700; color: var(--primary); letter-spacing: -0.01em; }
.jc-slider-wrap { margin-top: 28px; }
input.jc-bill { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; background: transparent; cursor: pointer; display: block; }
input.jc-bill:focus { outline: none; }
input.jc-bill::-webkit-slider-runnable-track { height: 3px; background: var(--line-strong); border-radius: 2px; }
input.jc-bill::-webkit-slider-thumb {
-webkit-appearance: none; width: 60px; height: 30px; border-radius: 999px; border: none;
margin-top: -14px;
background: url("data:image/svg+xml;utf8,") center/60px 30px no-repeat, var(--mesh-gradient);
box-shadow: var(--shadow);
}
input.jc-bill::-moz-range-track { height: 3px; background: var(--line-strong); border-radius: 2px; }
input.jc-bill::-moz-range-thumb {
width: 60px; height: 30px; border-radius: 999px; border: none;
background: url("data:image/svg+xml;utf8,") center/60px 30px no-repeat, var(--mesh-gradient);
box-shadow: var(--shadow);
}
.jc-slider-bounds { display: flex; justify-content: space-between; margin-top: 12px; font-family: var(--font-mono); font-size: 13px; color: var(--ink-faint); }
.jc-calc-left hr { border: none; border-top: 1px solid var(--line); margin: 30px 0; }
.jc-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.jc-pill {
border: 1.5px solid var(--line-strong); border-radius: 999px; padding: 10px 20px;
font-size: 14px; font-weight: 600; color: var(--ink); background: var(--surface);
cursor: pointer; user-select: none; transition: background .15s, color .15s, border-color .15s;
}
[data-theme="dark"] .jc-pill { background: var(--surface-2); }
.jc-pill.on { background: var(--mesh-gradient); color: #fff; border-color: transparent; }
.jc-calc-right {
width: 380px; flex: 0 0 380px;
background: var(--mesh-gradient);
color: #fff; padding: clamp(28px, 4vw, 46px);
}
.jc-res-label { font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.78); }
.jc-res-big { margin-top: 8px; font-size: 44px; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.jc-res-big.compact { font-size: 32px; }
.jc-res-big.compact .unit { font-size: 16px; }
.jc-res-big.neg { color: #ffd9d2; }
.jc-res-big .unit { font-size: 20px; font-weight: 700; }
.jc-res-sub { margin-top: 8px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.68); min-height: 18px; }
.jc-res-plan-label { margin-top: 32px; font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.78); }
.jc-res-plan { margin-top: 4px; font-size: 26px; font-weight: 700; color: #fff; }
.jc-calc-right hr { border: none; border-top: 1px solid rgba(255,255,255,0.28); margin: 26px 0 22px; }
.jc-rrow { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; gap: 12px; }
.jc-rrow:last-child { margin-bottom: 0; }
.jc-rrow .k { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.78); }
.jc-rrow .v { font-size: 17px; font-weight: 800; color: #fff; white-space: nowrap; }
.jc-rrow .v.soft { font-size: 14px; font-weight: 400; color: rgba(255,255,255,0.86); }
.jc-disc { margin-top: 6px; height: 22px; text-align: right; }
.jc-disc-badge {
visibility: hidden; display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px; border-radius: 999px;
background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.34);
color: #fff; font-size: 10.5px; font-weight: 600; white-space: nowrap;
}
.jc-res-cols { display: flex; }
.jc-res-col { flex: 1; }
.jc-res-col .k { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.78); }
.jc-res-col .v { margin-top: 6px; font-size: 20px; font-weight: 800; color: #fff; }
.jc-trees { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; margin-top: 6px; }
@media (max-width: 860px) {
.jc-calc { flex-direction: column; }
.jc-calc-right { width: 100%; flex: none; }
}
/* ============================================================
PRICING — plan cards + billing toggle
============================================================ */
.jp-cards { display: flex; gap: 20px; margin-top: clamp(32px, 4vw, 48px); align-items: stretch; flex-wrap: wrap; }
.jp-card {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
padding: 34px 30px 36px; flex: 1; min-width: 260px;
box-shadow: var(--shadow); position: relative;
transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease;
}
[data-theme="dark"] .jp-card { background: var(--surface-2); }
.jp-card:hover { transform: translateY(-4px); }
.jp-card.popular {
border: 1px solid transparent;
background:
linear-gradient(var(--surface), var(--surface)) padding-box,
var(--mesh-gradient) border-box;
border-width: 2px;
transform: scale(1.02);
}
[data-theme="dark"] .jp-card.popular {
background:
linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
var(--mesh-gradient) border-box;
}
.jp-badge {
position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
background: var(--mesh-gradient); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em;
padding: 7px 18px; border-radius: 999px; white-space: nowrap; text-transform: uppercase;
}
.jp-plan-label { font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: var(--primary); text-transform: uppercase; }
.jp-price-row { margin-top: 18px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.jp-price { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); white-space: nowrap; }
.jp-price-note { font-size: 13.5px; color: var(--ink-faint); font-weight: 500; }
.jp-plan-desc { margin-top: 12px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); font-weight: 500; }
.jp-card hr { border: none; border-top: 1px solid var(--line); margin: 22px 0 18px; }
.jp-feat { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 13px; }
.jp-feat:last-child { margin-bottom: 0; }
.jp-feat svg { flex: 0 0 auto; margin-top: 2px; color: var(--primary); }
.jp-feat span { font-size: 13.5px; color: var(--ink); font-weight: 500; line-height: 1.4; }
.jp-feat .hl { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--primary); }
.jp-card.institutional {
margin-top: 20px; flex: none; width: 100%;
display: flex; align-items: center; justify-content: space-between;
padding: 28px 36px; gap: 20px; flex-wrap: wrap;
}
.jp-card.institutional .jp-plan-desc { margin-top: 6px; }
.jp-contact-us { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
@media (max-width: 860px) {
.jp-cards { flex-direction: column; }
.jp-card.popular { transform: none; }
.jp-card.institutional { flex-direction: column; align-items: flex-start; }
}
/* ============================================================
HOW IT WORKS — gradient-filled numeral badges
============================================================ */
.timeline { position: relative; display: grid; gap: 0; }
.timeline::before {
content: "";
position: absolute;
left: 27px;
top: 10px;
bottom: 10px;
width: 2px;
background: linear-gradient(var(--tint-2), transparent);
}
.tl-step {
position: relative;
display: grid;
grid-template-columns: 56px minmax(0, 1fr) minmax(0, 480px);
gap: 28px;
padding: 36px 0;
align-items: start;
}
.tl-num {
position: relative;
z-index: 1;
width: 56px; height: 56px;
border-radius: 50%;
background: var(--mesh-gradient);
color: #fff;
font-family: var(--font-mono);
font-weight: 700;
font-size: 17px;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow);
}
.tl-step h3 { font-size: 24px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 10px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tl-step p { color: var(--ink-soft); max-width: 60ch; }
.tl-step .ph-chip { margin-top: 14px; }
.tl-media {
aspect-ratio: 16 / 10;
border: 1px solid var(--line);
border-radius: 22px;
background: var(--bg-alt);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 10px;
text-align: center;
padding: 18px;
overflow: hidden;
box-shadow: var(--shadow);
}
[data-theme="dark"] .tl-media { background: var(--surface-2); }
.tl-media .tl-media-icon { color: var(--primary); opacity: 0.85; }
.tl-media .tl-media-label { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.tl-media.has-shot { padding: 0; }
.tl-media.has-shot img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
display: block;
}
/* ---------- uncropped, enlargeable screenshots ---------- */
.tl-media.shot-fit {
aspect-ratio: 3 / 2;
margin: 0;
padding: 14px;
background: var(--bg-alt);
}
[data-theme="dark"] .tl-media.shot-fit { background: var(--surface-2); }
.tl-media.shot-fit .shot-zoom {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
border-radius: 13px;
cursor: zoom-in;
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.tl-media.shot-fit .shot-zoom:hover { transform: scale(1.012); }
.tl-media.shot-fit .shot-zoom img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 10px;
display: block;
/* a capture shorter than the frame reads as a panel floating on the canvas
rather than as a letterboxed image */
box-shadow: 0 10px 26px -12px rgba(15, 18, 45, 0.28);
}
[data-theme="dark"] .tl-media.shot-fit .shot-zoom img {
box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.65);
}
.shot-zoom-badge {
position: absolute;
right: 10px;
bottom: 10px;
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
border: 1px solid var(--line);
background: color-mix(in srgb, var(--bg) 88%, transparent);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
color: var(--primary);
opacity: 0.75;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.shot-zoom:hover .shot-zoom-badge,
.shot-zoom:focus-visible .shot-zoom-badge { opacity: 1; transform: scale(1.06); }
/* ---------- screenshot lightbox ---------- */
html.shot-lightbox-open, html.shot-lightbox-open body { overflow: hidden; }
.shot-lightbox {
position: fixed;
inset: 0;
z-index: 300;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(16px, 4vw, 48px);
background: color-mix(in srgb, #05060f 82%, transparent);
-webkit-backdrop-filter: blur(14px) saturate(1.1);
backdrop-filter: blur(14px) saturate(1.1);
cursor: zoom-out;
animation: shot-lightbox-in 0.22s ease-out both;
}
.shot-lightbox-figure {
margin: 0;
max-width: min(1400px, 100%);
display: flex;
flex-direction: column;
gap: 14px;
cursor: default;
}
.shot-lightbox-figure img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 82vh;
margin: 0 auto;
border-radius: 16px;
background: #fff;
box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
}
.shot-lightbox-figure figcaption {
color: rgba(255, 255, 255, 0.82);
font-family: var(--font-mono);
font-size: 12.5px;
text-align: center;
}
.shot-lightbox-close {
position: absolute;
top: clamp(12px, 2.4vw, 26px);
right: clamp(12px, 2.4vw, 26px);
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.28);
background: rgba(255, 255, 255, 0.12);
color: #fff;
cursor: pointer;
transition: background 0.2s ease;
}
.shot-lightbox-close:hover { background: rgba(255, 255, 255, 0.24); }
@keyframes shot-lightbox-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* narrow screens: let the enlarged screenshot exceed the viewport and pan sideways,
otherwise a wide console capture is no more readable enlarged than in the page */
@media (max-width: 720px) {
.shot-lightbox {
align-items: flex-start;
justify-content: flex-start;
overflow: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.shot-lightbox-figure { margin: auto; max-width: none; }
.shot-lightbox-figure img {
width: min(1100px, 240vw);
max-width: none;
max-height: none;
}
.shot-lightbox-figure figcaption { position: sticky; left: 0; max-width: 92vw; }
}
@media (prefers-reduced-motion: reduce) {
.tl-media.shot-fit .shot-zoom,
.tl-media.shot-fit .shot-zoom:hover,
.shot-zoom-badge { transition: none; transform: none; }
.shot-lightbox { animation: none; }
}
/* ============================================================
CAROUSEL — Apple product-page swipeable feature carousel
(iPad Air / iPhone page pattern: horizontal snap-scroll, big
cards, circular arrow controls, active-dot progress)
============================================================ */
.carousel { position: relative; }
.carousel-track {
display: flex;
gap: 24px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding: 4px 4px 12px;
margin: 0 -4px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
cursor: grab;
}
.carousel-track:active { cursor: grabbing; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * { scroll-snap-align: start; }
.carousel-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-top: clamp(28px, 3vw, 40px);
}
.carousel-arrow {
width: 52px; height: 52px;
border-radius: 50%;
border: 1.5px solid var(--line-strong);
background: var(--surface);
color: var(--ink);
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.carousel-arrow:hover { border-color: transparent; color: #fff; background: var(--mesh-gradient); transform: scale(1.06); box-shadow: var(--shadow); }
.carousel-arrow:disabled { opacity: 0.35; pointer-events: none; }
.carousel-dots { display: flex; align-items: center; gap: 8px; }
.carousel-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--line-strong);
transition: width 0.25s ease, border-radius 0.25s ease, background 0.25s ease;
padding: 0;
}
.carousel-dot.active { width: 26px; border-radius: 5px; background: var(--mesh-gradient); }
/* ============================================================
PILLARS — Stripe feature-card grid (Apple-carousel on this page)
============================================================ */
.pillar-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.carousel-track.pillar-grid {
display: flex;
grid-template-columns: none;
}
.carousel-track.pillar-grid .pillar-card {
flex: 0 0 clamp(320px, 42vw, 560px);
}
.pillar-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-card);
padding: 36px 34px;
transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
[data-theme="dark"] .pillar-card { background: var(--surface-2); }
.pillar-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.pillar-icon {
width: 60px; height: 60px;
border-radius: 18px;
background: var(--mesh-gradient);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 22px;
box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--primary) 55%, transparent);
}
.pillar-icon svg { width: 26px; height: 26px; }
.pillar-card h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 12px; text-wrap: balance; }
.pillar-card p { color: var(--ink-soft); font-size: 15.5px; }
.pillar-card .badge-verified { margin-top: 18px; }
.pillar-mockups {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 20px;
}
/* PR diff mockup */
.code-block {
font-family: var(--font-mono);
font-size: 13px;
line-height: 1.75;
background: var(--code-bg);
color: var(--code-ink);
border-radius: 14px;
padding: 18px 0;
overflow-x: auto;
}
.code-block .ln { display: block; padding: 0 20px; white-space: pre; }
.code-block .ln.ctx { color: rgba(238,238,244,0.55); }
.code-block .ln.del { background: rgba(224, 68, 43, 0.18); color: #ffb3a5; }
.code-block .ln.add { background: rgba(27, 138, 90, 0.2); color: #7fe0ae; }
.pr-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-top: 16px;
}
.chip-savings {
display: inline-flex;
align-items: center;
gap: 7px;
font-family: var(--font-mono);
font-size: 13px;
font-weight: 700;
color: var(--green);
background: var(--green-tint-2);
padding: 6px 13px;
border-radius: var(--r-chip);
}
.chip-savings small { font-weight: 500; opacity: 0.75; font-size: 11px; }
/* OptimizeSpot panel mockup */
.spot-rows { display: grid; gap: 12px; }
.spot-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
font-family: var(--font-mono);
font-size: 13px;
padding: 12px 14px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--bg-alt);
}
[data-theme="dark"] .spot-row { background: var(--bg); }
.spot-row .k { color: var(--ink-faint); }
.spot-row .v { font-weight: 600; }
.risk-meter { height: 8px; border-radius: 6px; background: var(--line); overflow: hidden; margin: 6px 0 2px; }
.risk-meter i { display: block; height: 100%; width: 9%; background: var(--green); border-radius: 6px; }
.spot-state {
margin-top: 16px;
display: flex;
align-items: center;
gap: 10px;
padding: 13px 16px;
border-radius: 14px;
background: var(--green-tint-1);
border: 1px solid var(--green-tint-2);
color: var(--green);
font-weight: 600;
font-size: 14.5px;
}
/* ============================================================
STATS BAND — dark, Apple-keynote gradient numerals
============================================================ */
#stats { background: var(--ink); color: var(--bg); overflow: hidden; }
[data-theme="dark"] #stats { background: var(--bg-alt); color: var(--ink); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
#stats .eyebrow { background: rgba(255,255,255,0.1); color: #fff; }
[data-theme="dark"] #stats .eyebrow { background: var(--tint-1); color: var(--primary); }
#stats .eyebrow::before { background: var(--mesh-gradient); }
#stats .lede { color: rgba(246,244,241,0.64); }
[data-theme="dark"] #stats .lede { color: var(--ink-soft); }
/* Light-background variant: same stats band on a light section background
instead of the dark default, so text needs to flip to dark/gray for
contrast regardless of the site's own light/dark theme toggle. */
#stats.stats-on-light { color: var(--ink); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
#stats.stats-on-light .eyebrow { background: var(--tint-1); color: var(--primary); }
#stats.stats-on-light .lede { color: var(--ink-soft); }
#stats.stats-on-light .stat-card { border-color: var(--line); background: var(--surface); }
#stats.stats-on-light .stat-num { color: var(--ink); }
#stats.stats-on-light .stat-desc { color: var(--ink-soft); }
.stat-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.stat-grid-3-col { grid-template-columns: repeat(3, 1fr); }
.stat-card {
border: 1px solid rgba(255,255,255,0.14);
border-radius: var(--r-card);
padding: 34px 30px;
background: rgba(255,255,255,0.045);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
[data-theme="dark"] .stat-card { border-color: var(--line); background: var(--surface-2); }
.stat-num {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-size: clamp(42px, 4.2vw, 68px);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.05;
color: #ffffff;
display: block;
min-height: 1.1em;
}
[data-theme="dark"] .stat-num { color: #ffffff; }
.stat-desc { margin-top: 12px; font-size: 15px; color: rgba(246,244,241,0.68); }
[data-theme="dark"] .stat-desc { color: var(--ink-soft); }
.stat-card .ph-chip {
border-color: rgba(255,255,255,0.3);
background: rgba(255,255,255,0.06);
color: rgba(246,244,241,0.7);
}
[data-theme="dark"] .stat-card .ph-chip { border-color: var(--line-strong); background: var(--bg); color: var(--ink-soft); }
.stat-footnote {
margin-top: 28px;
font-size: 13.5px;
color: rgba(246,244,241,0.5);
}
[data-theme="dark"] .stat-footnote { color: var(--ink-faint); }
.stat-footnote a { color: #B9C2FF; }
[data-theme="dark"] .stat-footnote a { color: var(--link); }
/* ============================================================
INTEGRATIONS
============================================================ */
.int-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.int-cat {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-card);
padding: 28px;
}
[data-theme="dark"] .int-cat { background: var(--surface-2); }
.int-cat h3 {
font-family: var(--font-mono);
font-size: 12.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--ink-faint);
margin-bottom: 18px;
}
.int-items { display: flex; flex-direction: column; gap: 10px; }
.int-item {
display: flex;
align-items: center;
gap: 12px;
padding: 13px 16px;
border: 1px solid var(--line);
border-radius: 14px;
background: var(--bg-alt);
font-weight: 600;
font-size: 15px;
}
[data-theme="dark"] .int-item { background: var(--bg); }
.int-item small { display: block; font-weight: 400; color: var(--ink-faint); font-size: 12.5px; }
.int-icon {
flex: none;
width: 38px; height: 38px;
border-radius: 12px;
background: var(--mesh-gradient);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
}
.flow-strip {
margin-top: 26px;
border: 1px solid var(--line);
border-radius: var(--r-card);
background: var(--surface);
padding: 28px 30px;
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
flex-wrap: wrap;
text-align: center;
}
[data-theme="dark"] .flow-strip { background: var(--surface-2); }
.flow-node {
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px 24px;
border-radius: 18px;
border: 1.5px solid var(--line-strong);
min-width: 190px;
}
.flow-node strong { font-size: 15.5px; }
.flow-node span { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faint); }
.flow-node.reads { border-color: var(--tint-2); background: var(--tint-1); }
.flow-node.reads span { color: var(--primary); }
.flow-node.writes { border-color: var(--green-tint-2); background: var(--green-tint-1); }
.flow-node.writes span { color: var(--green); }
.flow-strip.flow-strip-4 .flow-node { min-width: 160px; }
.flow-arrow {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
color: var(--ink-faint);
}
.flow-arrow span { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; }
/* ============================================================
TESTIMONIALS
============================================================ */
#testimonials { background: var(--bg-alt); }
.featured-quote {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-card);
padding: clamp(32px, 3.5vw, 56px);
margin-bottom: 20px;
}
[data-theme="dark"] .featured-quote { background: var(--surface-2); }
.featured-quote .qmark {
font-size: 68px;
line-height: 0.6;
font-weight: 700;
background: var(--mesh-gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
display: block;
margin-bottom: 20px;
font-family: Georgia, serif;
}
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.carousel-track.case-grid { display: flex; grid-template-columns: none; }
.carousel-track.case-grid .case-card { flex: 0 0 clamp(300px, 34vw, 440px); }
.case-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-card);
padding: 30px;
display: flex;
flex-direction: column;
gap: 14px;
transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.case-card:hover { transform: translateY(-4px); }
[data-theme="dark"] .case-card { background: var(--surface-2); }
.case-kind {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--primary);
}
.case-card h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.case-card p { color: var(--ink-soft); font-size: 14.5px; flex: 1; }
.case-metric {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-size: 26px;
font-weight: 700;
color: var(--green);
}
.tst-link-row { margin-top: 30px; text-align: center; }
.tst-link-row a { font-weight: 600; font-size: 16px; }
/* ============================================================
FAQ — Apple/Stripe minimal accordion
============================================================ */
.faq-list { max-width: 920px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-q {
width: 100%;
display: flex;
align-items: center;
gap: 22px;
padding: 28px 4px;
text-align: left;
font-size: clamp(17px, 1.4vw, 20px);
font-weight: 600;
letter-spacing: -0.01em;
transition: color 0.15s ease;
}
.faq-q:hover { color: var(--primary); }
.faq-num {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 600;
color: var(--ink-faint);
flex: none;
width: 30px;
}
.faq-q .chev { margin-left: auto; flex: none; color: var(--ink-faint); transition: transform 0.25s ease; }
.faq-item.open .faq-q .chev { transform: rotate(180deg); color: var(--primary); }
.faq-a {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s;
visibility: hidden;
}
.faq-item.open .faq-a { grid-template-rows: 1fr; visibility: visible; }
.faq-a-inner { overflow: hidden; }
.faq-a-inner p {
padding: 0 4px 30px 56px;
color: var(--ink-soft);
max-width: 72ch;
}
/* ============================================================
FINAL CTA + FORM — Apple centered close, gradient mesh backdrop
============================================================ */
#final-cta { overflow: hidden; background: var(--bg-alt); }
.cta-block { max-width: 880px; margin: 0 auto; text-align: center; }
.cta-block .h2 { max-width: 20ch; margin-left: auto; margin-right: auto; }
.cta-block .lede { margin: 0 auto; }
.demo-form {
margin: clamp(36px, 4vw, 56px) auto 0;
max-width: 760px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-card);
box-shadow: var(--shadow-lg);
padding: clamp(28px, 3vw, 48px);
text-align: left;
}
[data-theme="dark"] .demo-form { background: var(--surface-2); }
.demo-form-simple { max-width: 480px; }
.demo-form-simple .form-grid { grid-template-columns: 1fr; }
.form-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px 18px;
}
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 14px; font-weight: 600; }
.field label .req { color: var(--error); }
.field input, .field select {
height: 52px;
border: 1.5px solid var(--line-strong);
border-radius: 16px;
background: var(--bg);
color: var(--ink);
padding: 0 16px;
font: inherit;
font-size: 16px; /* ≥16px prevents iOS Safari auto-zoom on focus */
transition: border-color 0.15s ease, box-shadow 0.15s ease;
width: 100%;
appearance: none;
}
.field select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 42px;
}
.field textarea {
height: auto;
min-height: 140px;
border: 1.5px solid var(--line-strong);
border-radius: 16px;
background: var(--bg);
color: var(--ink);
padding: 14px 16px;
font: inherit;
font-size: 16px; /* ≥16px prevents iOS Safari auto-zoom on focus */
line-height: 1.5;
resize: vertical;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
width: 100%;
appearance: none;
}
.field input:focus, .field select:focus, .field textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 4px var(--tint-2);
}
.form-submit-row { grid-column: 1 / -1; margin-top: 6px; }
.form-submit-row .btn { width: 100%; }
.btn[disabled] { opacity: 0.65; cursor: wait; }
.form-trust {
grid-column: 1 / -1;
margin-top: 14px;
text-align: center;
font-family: var(--font-mono);
font-size: 12.5px;
color: var(--ink-faint);
}
.form-success {
display: none;
text-align: center;
padding: 40px 12px;
}
.form-success.show { display: block; }
.form-success .ok-ring {
width: 60px; height: 60px;
margin: 0 auto 18px;
border-radius: 50%;
background: var(--green-tint-2);
color: var(--green);
display: flex;
align-items: center;
justify-content: center;
}
.demo-form.done .form-grid { display: none; }
/* ============================================================
DEMO MODAL — "Book a Demo" on pages that carry no form of
their own. The markup is injected by assets/site.js, which
skips any page that already has #demo-form.
============================================================ */
.demo-modal {
position: fixed;
inset: 0;
z-index: 500;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
}
.demo-modal.open { display: flex; }
.demo-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(11, 15, 25, .55);
}
.demo-modal-panel {
position: relative;
width: 100%;
max-width: 480px;
max-height: calc(100vh - 40px);
overflow-y: auto;
}
/* .demo-form already carries the card surface, border, radius and shadow.
Inside the panel it only needs its page-flow margin dropped. */
.demo-modal .demo-form { margin: 0; }
.demo-modal-head { margin-bottom: 22px; padding-right: 26px; }
.demo-modal-head h2 {
font-size: clamp(21px, 2.3vw, 26px);
line-height: 1.25;
letter-spacing: -.02em;
margin-bottom: 10px;
}
.demo-modal-head p {
color: var(--ink-soft);
font-size: 14.5px;
line-height: 1.6;
}
.demo-modal-close {
position: absolute;
top: 13px;
right: 13px;
z-index: 1;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--ink-soft);
cursor: pointer;
}
.demo-modal-close:hover { background: var(--bg-alt); color: var(--ink); }
/* The page behind a dialog must not scroll with it. */
body.demo-modal-open { overflow: hidden; }
/* ============================================================
FOOTER — Apple restraint, small-caps labels
============================================================ */
.site-footer {
border-top: 1px solid var(--line);
background: var(--bg-alt);
padding: clamp(56px, 6vw, 88px) 0 40px;
}
.footer-top {
display: grid;
grid-template-columns: minmax(260px, 1.4fr) repeat(4, 1fr);
gap: 40px;
padding-bottom: 48px;
border-bottom: 1px solid var(--line);
}
.footer-brand p { color: var(--ink-soft); font-size: 15px; margin-top: 14px; max-width: 34ch; }
.footer-contact { margin-top: 18px; font-size: 14.5px; color: var(--ink-soft); display: grid; gap: 6px; }
.footer-contact a { color: var(--ink-soft); }
.footer-contact a:hover { color: var(--ink); }
.footer-col h3 {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--ink-faint);
margin-bottom: 16px;
}
.footer-col ul { list-style: none; display: grid; gap: 10px; }
.footer-col a { color: var(--ink-soft); font-size: 15px; }
.footer-col a:hover { color: var(--ink); }
.footer-mid {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
padding: 26px 0;
border-bottom: 1px solid var(--line);
}
.sustain-line {
color: var(--green);
font-size: 14.5px;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 9px;
}
.footer-badges {
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
/* Affiliations and attestations, not verified product claims — deliberately
neutral rather than reusing .badge-verified, whose green reads as "we checked
this claim" everywhere else on the site. */
.footer-badges span {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 11px;
border: 1px solid var(--line);
border-radius: var(--r-chip);
background: var(--bg-alt);
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--ink-soft);
white-space: nowrap;
}
.footer-badges svg { flex: none; color: var(--ink-faint); }
@media (max-width: 720px) {
.footer-badges { gap: 6px; }
.footer-badges span { font-size: 11px; padding: 4px 9px; }
}
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding-top: 26px;
font-size: 14px;
color: var(--ink-faint);
}
/* ============================================================
LINK-CARDS (Explore/Product-hub tiles — used on other pages,
kept here so this stylesheet is a drop-in for the same markup)
============================================================ */
a.card, a.pillar-card { display: block; text-decoration: none; color: inherit; }
a.card:hover, a.pillar-card:hover { text-decoration: none; }
.card-arrow, .pillar-card .card-arrow {
margin-top: 16px;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13.5px;
font-weight: 600;
color: var(--primary);
}
.mini-icon {
width: 40px; height: 40px;
border-radius: 12px;
background: var(--mesh-gradient);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.explore-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1080px) { .explore-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .explore-grid { grid-template-columns: 1fr; } }
/* ============================================================
BLOG: article grid, card tiles, and long-form article body
============================================================ */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 1080px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-card {
display: block;
border-radius: var(--r-card);
overflow: hidden;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--shadow);
transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease;
}
[data-theme="dark"] .blog-card { background: var(--surface-2); }
.blog-card:hover { transform: translateY(-6px); }
.blog-card-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.blog-card-body { padding: 22px 24px 26px; }
.blog-card-date { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; color: var(--ink-faint); letter-spacing: 0.02em; }
.blog-card h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; margin-top: 8px; }
.blog-hero-img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: var(--r-card);
display: block;
margin-bottom: clamp(32px, 4vw, 48px);
}
.blog-article { font-size: 17px; line-height: 1.75; color: var(--ink-soft); }
.blog-article h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); margin: 44px 0 16px; }
.blog-article h2:first-child { margin-top: 0; }
.blog-article p { margin-bottom: 20px; }
.blog-article strong { color: var(--ink); }
.blog-back { margin-top: 48px; font-weight: 600; }
/* ============================================================
PAGE HEADER (kept for parity with subpages sharing this file)
============================================================ */
.page-header {
padding: clamp(40px, 5vw, 64px) 0 clamp(32px, 4vw, 48px);
background: var(--bg-alt);
border-bottom: 1px solid var(--line);
}
.breadcrumb {
font-family: var(--font-mono);
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-faint);
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.breadcrumb a { color: var(--ink-faint); }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb .sep { opacity: 0.5; }
.page-header-inner {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
}
.page-header-copy { max-width: 720px; }
.page-header h1 {
font-size: clamp(32px, 3.6vw, 50px);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
margin: 4px 0 12px;
text-wrap: balance;
}
.page-header .lede { margin: 0; max-width: 62ch; }
.page-header-ctas { display: flex; gap: 12px; flex-wrap: wrap; flex: none; }
.page-header-proof {
margin-top: 22px;
font-family: var(--font-mono);
font-size: 13px;
color: var(--ink-faint);
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.page-header-proof .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-faint); }
@media (max-width: 720px) {
.page-header-inner { flex-direction: column; align-items: flex-start; }
.page-header-ctas .btn { flex: 1; }
}
/* ============================================================
CUSTOMER STORIES / INDUSTRY PAGES — KPI grid, progress rows,
detail stacks, and the hub page's big story-feature panels
============================================================ */
.kpi-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.kpi-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-card);
padding: 26px 28px;
}
[data-theme="dark"] .kpi-card { background: var(--surface-2); }
.kpi-label {
display: flex;
align-items: center;
gap: 9px;
font-size: 13.5px;
font-weight: 600;
color: var(--ink-soft);
}
.kpi-label svg { flex: none; color: var(--primary); }
.kpi-value { margin-top: 12px; font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; letter-spacing: -0.02em; }
.kpi-value .unit { font-size: 16px; font-weight: 600; color: var(--ink-soft); }
.kpi-sub { margin-top: 4px; font-size: 13px; color: var(--ink-faint); }
.progress-stack { display: grid; gap: 24px; margin-top: 4px; }
.progress-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.progress-row-head span:first-child { font-size: 15px; font-weight: 600; color: var(--ink); }
.progress-row-head span:last-child { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--primary); }
.progress-bar { height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; }
.progress-bar i { display: block; height: 100%; border-radius: 999px; background: var(--mesh-gradient); }
.detail-stack { display: grid; gap: 14px; }
.detail-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 20px;
padding: 22px 26px;
}
[data-theme="dark"] .detail-card { background: var(--surface-2); }
.detail-card p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.6; }
.detail-card strong { color: var(--ink); }
.detail-card.detail-eco { display: flex; align-items: center; gap: 12px; }
.detail-card.detail-eco svg { flex: none; color: var(--green); }
.result-big {
background: var(--bg-alt);
border-radius: var(--r-card);
padding: clamp(28px, 3vw, 40px);
margin-bottom: clamp(24px, 3vw, 36px);
}
.result-big-label { font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.result-big-value { margin-top: 8px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.result-big-value .num { font-size: clamp(36px, 4.4vw, 56px); font-weight: 800; letter-spacing: -0.03em; }
.result-big-value .unit { font-size: 18px; font-weight: 600; color: var(--ink-soft); }
.result-big-sub { margin-top: 4px; font-size: 14.5px; color: var(--ink-faint); }
.story-footnote { margin-top: clamp(28px, 3vw, 40px); font-size: 13px; color: var(--ink-faint); }
/* hub page: big alternating story-feature panels */
.story-feature {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: clamp(28px, 4vw, 56px);
align-items: center;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-card);
padding: clamp(32px, 4vw, 56px);
margin-bottom: 24px;
transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease;
}
[data-theme="dark"] .story-feature { background: var(--surface-2); }
.story-feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.story-feature.rev { grid-template-columns: 1fr 1.1fr; }
.story-feature.rev .story-feature-stat { order: 2; }
.story-feature-industry {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--primary);
margin-bottom: 14px;
}
.story-feature h3 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 14px; text-wrap: balance; }
.story-feature p.desc { color: var(--ink-soft); font-size: 15.5px; margin-bottom: 18px; }
.story-feature-meta { font-size: 13.5px; color: var(--ink-faint); margin-bottom: 22px; }
.story-feature-stat {
background: var(--mesh-gradient);
border-radius: 22px;
padding: clamp(26px, 3vw, 38px);
color: #fff;
text-align: center;
}
.story-feature-stat .big { font-size: clamp(34px, 4vw, 48px); font-weight: 800; letter-spacing: -0.02em; }
.story-feature-stat .cap { margin-top: 8px; font-size: 13.5px; color: rgba(255,255,255,0.82); }
.story-feature-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--primary); }
.story-feature.contact-panel { grid-template-columns: 1fr 1.2fr; align-items: start; }
.story-feature.founding-panel { grid-template-columns: 1.15fr 1fr; }
@media (max-width: 900px) {
.story-feature, .story-feature.rev, .story-feature.contact-panel, .story-feature.founding-panel { grid-template-columns: 1fr; }
.story-feature.rev .story-feature-stat { order: -1; }
}
/* ============================================================
TEAM — leadership cards (About page)
============================================================ */
.team-card { text-align: center; }
.team-avatar {
width: 96px; height: 96px;
border-radius: 50%;
background: var(--mesh-gradient);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
font-weight: 800;
letter-spacing: -0.02em;
margin: 0 auto 20px;
overflow: hidden;
}
.team-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-card h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 4px; }
.team-card .team-title { font-size: 14.5px; color: var(--ink-soft); margin-bottom: 16px; }
/* Our team page — real profiles.
Portraits are approved 360x360 WebP in assets/team/. The founders row uses
the same card with a larger portrait so leadership reads first without a
second component. */
.team-people {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.team-people-featured {
grid-template-columns: repeat(2, 1fr);
max-width: 860px;
margin: 0 auto;
}
.team-person {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-card);
padding: 30px 26px 26px;
display: flex;
flex-direction: column;
transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.team-person:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.team-portrait {
width: 88px; height: 88px;
border-radius: 50%;
background: var(--mesh-gradient);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: 800;
letter-spacing: -0.02em;
margin-bottom: 20px;
overflow: hidden;
flex: none;
}
.team-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-person-featured .team-portrait { width: 112px; height: 112px; font-size: 30px; }
.team-person h3 { font-size: 18.5px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 3px; text-wrap: balance; }
.team-person-featured h3 { font-size: 22px; }
.team-person .team-role { font-size: 14.5px; font-weight: 600; color: var(--primary); margin-bottom: 4px; }
.team-person .team-location {
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--ink-faint);
margin-bottom: 14px;
}
.team-person .team-summary { font-size: 15px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 18px; }
.team-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
list-style: none;
margin: 0 0 18px;
padding: 0;
}
.team-tags li {
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--ink-soft);
background: var(--bg-alt);
border: 1px solid var(--line);
border-radius: 999px;
padding: 4px 11px;
}
/* Pushed to the bottom so links align across cards of unequal copy length. */
.team-person .team-link {
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 6px;
align-self: flex-start;
font-weight: 600;
font-size: 14px;
color: var(--primary);
}
.team-person .team-link:hover { text-decoration: underline; }
@media (max-width: 1180px) { .team-people { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) {
.team-people { grid-template-columns: repeat(2, 1fr); }
.team-people-featured { max-width: none; }
}
@media (max-width: 620px) {
.team-people, .team-people-featured { grid-template-columns: 1fr; }
}
.team-card .team-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14.5px; color: var(--primary); }
/* ============================================================
CAREER PAGE — open roles list + empty state
============================================================ */
.role-list { display: grid; gap: 14px; }
.role-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-card);
padding: 24px 28px;
transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
[data-theme="dark"] .role-card { background: var(--surface-2); }
.role-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.role-card h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 8px; }
.role-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.role-tag {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
color: var(--ink-soft);
background: var(--bg-alt);
border: 1px solid var(--line);
border-radius: var(--r-chip);
padding: 5px 12px;
}
[data-theme="dark"] .role-tag { background: var(--bg); }
.role-card .btn { flex: none; }
.empty-state {
text-align: center;
background: var(--surface);
border: 1.5px dashed var(--line-strong);
border-radius: var(--r-card);
padding: clamp(40px, 5vw, 64px) clamp(24px, 4vw, 48px);
}
[data-theme="dark"] .empty-state { background: var(--surface-2); }
.empty-state .mini-icon {
width: 52px; height: 52px;
margin: 0 auto 20px;
background: var(--bg-alt);
color: var(--primary);
}
[data-theme="dark"] .empty-state .mini-icon { background: var(--bg); }
.empty-state h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 10px; }
.empty-state p { color: var(--ink-soft); font-size: 15.5px; max-width: 46ch; margin: 0 auto; }
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1280px) {
:root { --gutter: 32px; }
.tl-step { grid-template-columns: 56px minmax(0, 1fr); }
.tl-media { grid-column: 2; max-width: 620px; }
.footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1380px) {
/* keep "Book a Demo" as the one CTA next to the burger on mobile —
matched by href, not class, since the two nav buttons swapped
visual styles (blue/white) independently of which one this hides */
.nav-links, .nav-actions a[href="https://console.jetscale.ai/oco/onboard"], .nav-actions .lang-toggle { display: none; }
.nav-burger { display: inline-flex; }
}
@media (max-width: 1080px) {
.cards-3, .stat-grid, .stat-grid-3-col, .int-grid, .case-grid { grid-template-columns: repeat(2, 1fr); }
.pillar-grid, .pillar-mockups { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
:root { --gutter: 16px; }
.nav-inner { height: 66px; gap: 14px; }
.nav-actions .btn { height: 42px; padding: 0 16px; font-size: 14.5px; }
.cards-3, .stat-grid, .stat-grid-3-col, .int-grid, .case-grid, .form-grid, .kpi-grid { grid-template-columns: 1fr; }
.tl-step { grid-template-columns: 44px minmax(0, 1fr); gap: 18px; padding: 26px 0; }
.tl-num { width: 44px; height: 44px; font-size: 15px; }
.timeline::before { left: 21px; }
.hero-ctas .btn { width: 100%; }
.checklist-ribbon .ribbon-tail { margin-left: 0; }
.faq-a-inner p { padding-left: 4px; }
.footer-top { grid-template-columns: 1fr; gap: 30px; }
.mesh-blob { display: none; }
}
/* ============================================================
COMPETITOR COMPARISON TABLE
============================================================ */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.compare-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.compare-table {
width: 100%;
min-width: 640px;
border-collapse: collapse;
font-size: 15.5px;
}
.compare-table th,
.compare-table td {
padding: 16px 18px;
text-align: center;
vertical-align: middle;
}
.compare-table thead th {
padding-top: 0;
padding-bottom: 18px;
font-size: 17px;
font-weight: 700;
color: var(--ink);
border-bottom: 1px solid var(--line-strong);
}
.compare-table th:first-child,
.compare-table td:first-child {
text-align: left;
min-width: 260px;
position: sticky;
left: 0;
z-index: 1;
}
.compare-table thead th:first-child { background: var(--bg); }
.compare-table th:not(:first-child),
.compare-table td:not(:first-child) { width: 140px; }
.compare-table tbody tr:nth-child(even) th,
.compare-table tbody tr:nth-child(even) td { background: var(--bg-alt); }
.compare-table tbody tr:nth-child(odd) th,
.compare-table tbody tr:nth-child(odd) td { background: var(--bg); }
[data-theme="dark"] .compare-table tbody tr:nth-child(even) th,
[data-theme="dark"] .compare-table tbody tr:nth-child(even) td { background: var(--surface-2); }
.compare-feat-label { color: var(--ink); font-weight: 500; }
.compare-yes {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink);
}
.compare-note {
margin-top: 18px;
text-align: center;
color: var(--ink-soft);
font-size: 15px;
}
.compare-note strong { color: var(--ink); }
@media (max-width: 720px) {
.compare-table { font-size: 13.5px; }
.compare-table th, .compare-table td { padding: 12px 14px; }
.compare-table thead th { padding-bottom: 14px; font-size: 14.5px; }
.compare-table th:first-child, .compare-table td:first-child { min-width: 170px; }
.compare-table th:not(:first-child), .compare-table td:not(:first-child) { width: 96px; }
}
/* ============================================================
LEGAL PAGES
Long-form prose layout for privacy.html and cookies.html in both
locales. Lived in a per-page