/* ============================================================================
marketing.css — Stripe-inspired LIGHT marketing site
Self-contained: own reset, tokens, base, components. Loads WITHOUT app.css.
Everything namespaced under .mkt so it cannot touch the dark app.
============================================================================ */
/* ── minimal reset (scoped) ───────────────────────────────────────────── */
.mkt *, .mkt *::before, .mkt *::after { box-sizing: border-box; }
.mkt { margin: 0; }
.mkt h1, .mkt h2, .mkt h3, .mkt h4, .mkt p, .mkt figure, .mkt ul, .mkt ol {
margin: 0; padding: 0;
}
.mkt ul, .mkt ol { list-style: none; }
.mkt img, .mkt svg { display: block; max-width: 100%; }
.mkt a { color: inherit; text-decoration: none; }
.mkt button { font: inherit; color: inherit; }
/* ── tokens ───────────────────────────────────────────────────────────── */
.mkt {
/* ── Brand / color ─────────────────────────────────────────────── */
--mkt-primary: #635BFF; /* Stripe blurple */
--mkt-primary-hover: #5851EA; /* darken ~6% for hover */
--mkt-primary-press: #4F46E5; /* active/pressed */
--mkt-primary-tint: #EEF0FF; /* pale blurple fill (chips, soft blocks) */
--mkt-primary-border: #D7D9FF; /* pale blurple border */
--mkt-ink: #0A2540; /* headings — deep navy */
--mkt-ink-2: #3C4257; /* strong body / subheads */
--mkt-slate: #425466; /* default body text */
--mkt-muted: #697386; /* secondary / captions */
--mkt-faint: #8792A2; /* faintest labels, SVG hints */
--mkt-hairline: #E6EBF1; /* default divider */
--mkt-border: #E3E8EE; /* card/control border */
--mkt-border-strong: #D5DBE6; /* hover / emphasized border */
--mkt-bg: #FFFFFF;
--mkt-bg-tint: #F6F9FC; /* Stripe near-white blue */
--mkt-bg-tint-2: #EEF3F9; /* slightly deeper tint */
--mkt-success: #0E9F6E; /* AA-safe green for "Yes" text/checks */
--mkt-success-soft: #3ECF8E; /* decorative green (SVG only, not text) */
--mkt-warn-ink: #B54708; /* amber caution text (DRAFT / placeholder) */
--mkt-warn-bg: #FFFAEB;
--mkt-warn-border: #FEDF89;
/* ── Signature hero gradient ───────────────────────────────────────
Full-spectrum cool→warm sweep: mint-teal → cyan → blue → blurple →
violet → magenta → peach. Tunable; keep blurple #635BFF at the core. */
--mkt-gradient: linear-gradient(105deg,
#57E5C4 0%,
#24C6DC 14%,
#4B7BFF 34%,
#635BFF 50%,
#9A5CFF 64%,
#E85CC6 80%,
#FF8A63 100%);
/* Subtle pastel version — safe under dark ink text (hero backdrop, soft bands) */
--mkt-gradient-soft: linear-gradient(160deg,
#FFFFFF 0%, #F4F7FE 38%, #F2EEFF 68%, #FFF1F6 100%);
/* ── Type ──────────────────────────────────────────────────────── */
--mkt-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Helvetica, Arial, sans-serif;
--mkt-font-mono: ui-monospace, 'SF Mono', Menlo, Monaco, 'Roboto Mono', monospace;
--mkt-w-regular: 400;
--mkt-w-medium: 500;
--mkt-w-semi: 600;
--mkt-w-bold: 700;
--mkt-w-x: 800;
/* fluid, Stripe-large + tight */
--mkt-fs-display: clamp(2.5rem, 1.6rem + 3.6vw, 4rem); /* 40 → 64 hero H1 */
--mkt-fs-h1: clamp(2rem, 1.5rem + 2.2vw, 3rem); /* 32 → 48 doc H1 */
--mkt-fs-h2: clamp(1.6rem, 1.25rem + 1.6vw, 2.25rem); /* 26 → 36 */
--mkt-fs-h3: 1.25rem; /* 20 */
--mkt-fs-lead: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); /* 18 → 22 sub/lead */
--mkt-fs-read: 1.125rem; /* 18 body reading */
--mkt-fs-ui: 1rem; /* 16 */
--mkt-fs-sm: 0.875rem; /* 14 */
--mkt-fs-tiny: 0.75rem; /* 12 */
--mkt-fs-micro: 0.6875rem; /* 11 */
--mkt-lh-head: 1.12;
--mkt-lh-read: 1.65;
--mkt-lh-ui: 1.5;
--mkt-ls-display: -0.03em;
--mkt-ls-head: -0.02em;
--mkt-ls-caps: 0.06em;
/* ── Space scale (8pt) ─────────────────────────────────────────── */
--mkt-s1: 4px; --mkt-s2: 8px; --mkt-s3: 12px; --mkt-s4: 16px;
--mkt-s5: 24px; --mkt-s6: 32px; --mkt-s7: 48px; --mkt-s8: 64px;
--mkt-pad-card: 32px;
/* section rhythm + layout */
--mkt-container: 1080px;
--mkt-read: 680px; /* legal/about comfortable measure */
--mkt-gap: clamp(64px, 9vw, 120px); /* vertical section rhythm */
--mkt-pad-x: clamp(20px, 5vw, 40px);
/* ── Radii ─────────────────────────────────────────────────────── */
--mkt-radius-sm: 8px;
--mkt-radius: 12px;
--mkt-radius-lg: 16px;
--mkt-radius-pill: 999px;
/* ── Shadows (Stripe navy-tinted, soft, layered) ───────────────── */
--mkt-shadow-sm: 0 1px 2px rgba(10,37,64,.06), 0 1px 3px rgba(10,37,64,.10);
--mkt-shadow: 0 2px 5px -1px rgba(50,50,93,.18), 0 1px 3px -1px rgba(10,37,64,.18);
--mkt-shadow-md: 0 13px 27px -5px rgba(50,50,93,.20), 0 8px 16px -8px rgba(10,37,64,.20);
--mkt-shadow-lg: 0 30px 60px -12px rgba(50,50,93,.22), 0 18px 36px -18px rgba(10,37,64,.22);
--mkt-shadow-xl: 0 50px 100px -20px rgba(50,50,93,.25), 0 30px 60px -30px rgba(10,37,64,.30);
--mkt-shadow-primary: 0 4px 12px rgba(99,91,255,.35);
--mkt-shadow-primary-hover: 0 8px 20px rgba(99,91,255,.42);
/* ── Legacy token compatibility ────────────────────────────────────
Alias the app's dark token names to the new light values, so no inline
SVG or legacy utility class needs editing. */
--accent: var(--mkt-primary);
--accent-bg: var(--mkt-primary-tint);
--accent-bd: var(--mkt-primary-border);
--text: var(--mkt-ink);
--text2: var(--mkt-ink-2);
--text-read: var(--mkt-slate);
--muted: var(--mkt-muted);
--faint: var(--mkt-faint);
--hairline: var(--mkt-hairline);
--border: var(--mkt-border);
--border-hi: var(--mkt-border-strong);
--bg: var(--mkt-bg);
--bg2: var(--mkt-bg-tint);
--panel: var(--mkt-bg-tint);
--card: #FFFFFF;
--card-hi: #FFFFFF;
--float: #FFFFFF; /* floating chips/cards inside SVGs */
--pos: var(--mkt-success);
--warn: var(--mkt-warn-ink);
/* life-phase band colors (Feature-1 SVG) — soft, cool */
--c-azure: #4C9AFF;
--c-moss: #3ECF8E;
--c-iris: #8B7FF5;
/* fonts: everything on the marketing site is Inter now */
--font-read: var(--mkt-font);
--font-ui: var(--mkt-font);
--font-mono: var(--mkt-font-mono); /* date chips / year labels stay mono */
/* weights */
--w-read-b: var(--mkt-w-bold);
--w-ui-md: var(--mkt-w-medium);
--w-ui-sb: var(--mkt-w-semi);
/* font sizes referenced by legacy classes */
--fs-h2: var(--mkt-fs-h2);
--fs-h3: var(--mkt-fs-h3);
--fs-read: var(--mkt-fs-read);
--fs-ui: var(--mkt-fs-ui);
--fs-sm: var(--mkt-fs-sm);
--fs-tiny: var(--mkt-fs-tiny);
--fs-micro: var(--mkt-fs-micro);
/* space + radii + shadow aliases */
--s2: var(--mkt-s2); --s3: var(--mkt-s3); --s4: var(--mkt-s4);
--s5: var(--mkt-s5); --s6: var(--mkt-s6); --s7: var(--mkt-s7); --s8: var(--mkt-s8);
--pad-card: var(--mkt-pad-card);
--radius: var(--mkt-radius);
--radius-sm: var(--mkt-radius-sm);
--lift: var(--mkt-shadow-sm);
--shadow: var(--mkt-shadow-md);
--shadow-sm: var(--mkt-shadow-sm);
/* line-height / letter-spacing aliases */
--lh-head: var(--mkt-lh-head);
--lh-read: var(--mkt-lh-read);
--lh-ui: var(--mkt-lh-ui);
--ls-display: var(--mkt-ls-display);
--ls-head: var(--mkt-ls-head);
--ls-caps: var(--mkt-ls-caps);
/* base page paint */
font-family: var(--mkt-font);
font-size: 16px;
line-height: var(--mkt-lh-read);
color: var(--mkt-slate);
background: var(--mkt-bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-feature-settings: 'cv02','cv03','cv04','cv11';
}
/* ── base typography ──────────────────────────────────────────────────── */
.mkt h1, .mkt h2, .mkt h3 {
font-family: var(--mkt-font);
color: var(--mkt-ink);
font-weight: var(--mkt-w-bold);
letter-spacing: var(--mkt-ls-head);
line-height: var(--mkt-lh-head);
text-wrap: balance;
}
.mkt p { text-wrap: pretty; }
.mkt strong { color: var(--mkt-ink); font-weight: var(--mkt-w-semi); }
/* shared blurple inline links (prose / legal / faq / inline anchors) */
.mkt-prose a, .mkt-legal a, .mkt-faq__item a,
.mkt-trust a, .mkt-ai__link a, .mkt-hard__small a,
.mkt-doc__lead a, .mkt-price__notes a {
color: var(--mkt-primary);
font-weight: var(--mkt-w-medium);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color .15s ease, color .15s ease;
}
.mkt-prose a:hover, .mkt-legal a:hover, .mkt-faq__item a:hover,
.mkt-trust a:hover, .mkt-ai__link a:hover, .mkt-hard__small a:hover,
.mkt-doc__lead a:hover, .mkt-price__notes a:hover {
color: var(--mkt-primary-hover);
border-bottom-color: currentColor;
}
/* ── layout helpers ───────────────────────────────────────────────────── */
.mkt-container { max-width: var(--mkt-container); margin: 0 auto; padding: 0 var(--mkt-pad-x); }
.mkt-main { display: block; }
.mkt-svg { display: block; width: 100%; height: auto; }
.mkt-vh {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* eyebrow / section label */
.mkt-eyebrow, .mkt .eyebrow {
display: inline-block;
font-size: var(--mkt-fs-sm);
font-weight: var(--mkt-w-semi);
letter-spacing: var(--mkt-ls-caps);
text-transform: uppercase;
color: var(--mkt-primary);
margin: 0 0 var(--mkt-s4);
}
/* shared section heading */
.mkt-section-h {
font-size: var(--mkt-fs-h2);
color: var(--mkt-ink);
margin: 0 0 var(--mkt-s6);
}
.mkt-h3 { font-size: var(--mkt-fs-h3); font-weight: var(--mkt-w-semi); margin: 0 0 var(--mkt-s3); }
/* ── BUTTONS ──────────────────────────────────────────────────────────── */
.mkt-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-family: var(--mkt-font); font-size: var(--mkt-fs-ui); font-weight: var(--mkt-w-semi);
line-height: 1; white-space: nowrap; cursor: pointer;
padding: 12px 22px; border-radius: var(--mkt-radius-pill);
border: 1px solid transparent; text-decoration: none;
transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease,
border-color .15s ease, color .15s ease;
}
.mkt-btn:focus-visible { outline: 3px solid var(--mkt-primary-border); outline-offset: 2px; }
.mkt-btn--primary {
background: var(--mkt-primary); color: #fff;
box-shadow: var(--mkt-shadow-primary);
}
.mkt-btn--primary:hover {
background: var(--mkt-primary-hover); color: #fff;
transform: translateY(-1px); box-shadow: var(--mkt-shadow-primary-hover);
}
.mkt-btn--primary:active { background: var(--mkt-primary-press); transform: translateY(0); }
.mkt-btn--secondary {
background: #fff; color: var(--mkt-ink);
border-color: var(--mkt-border); box-shadow: var(--mkt-shadow-sm);
}
.mkt-btn--secondary:hover {
background: #fff; color: var(--mkt-primary);
border-color: var(--mkt-border-strong); transform: translateY(-1px);
box-shadow: var(--mkt-shadow);
}
/* ghost (nav "Sign in", inline) */
.mkt-btn--ghost {
background: transparent; color: var(--mkt-ink-2); padding: 12px 12px; box-shadow: none;
}
.mkt-btn--ghost:hover { color: var(--mkt-primary); background: transparent; }
.mkt-btn--lg { padding: 14px 28px; font-size: 1.0625rem; }
.mkt-btn--sm { padding: 8px 16px; font-size: var(--mkt-fs-sm); }
.mkt-btn--block { width: 100%; }
/* arrow link — blurple text + "→" that nudges on hover.
Usage: Read how it's stored (NO literal arrow) */
.mkt-arrow {
display: inline-flex; align-items: center; gap: 6px;
color: var(--mkt-primary); font-weight: var(--mkt-w-semi);
text-decoration: none;
}
.mkt-arrow::after {
content: "\2192"; /* → */
transition: transform .15s ease;
}
.mkt-arrow:hover { color: var(--mkt-primary-hover); }
.mkt-arrow:hover::after { transform: translateX(4px); }
/* legacy .btn / .card compatibility shim (so un-migrated markup still looks right) */
.mkt .btn { /* falls back to secondary look */
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-weight: var(--mkt-w-semi); line-height: 1; cursor: pointer; text-decoration: none;
padding: 12px 22px; border-radius: var(--mkt-radius-pill);
background: #fff; color: var(--mkt-ink);
border: 1px solid var(--mkt-border); box-shadow: var(--mkt-shadow-sm);
transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.mkt .btn:hover { transform: translateY(-1px); box-shadow: var(--mkt-shadow); color: var(--mkt-primary); }
.mkt .btn.primary {
background: var(--mkt-primary); color: #fff; border-color: transparent;
box-shadow: var(--mkt-shadow-primary);
}
.mkt .btn.primary:hover { background: var(--mkt-primary-hover); color: #fff; box-shadow: var(--mkt-shadow-primary-hover); }
.mkt-btn-lg { padding: 14px 28px; font-size: 1.0625rem; border-radius: var(--mkt-radius-pill); }
.mkt .card {
background: #fff; border: 1px solid var(--mkt-border);
border-radius: var(--mkt-radius); box-shadow: var(--mkt-shadow-sm);
padding: var(--mkt-pad-card);
}
/* ── NAV ──────────────────────────────────────────────────────────────── */
.mkt-nav {
position: sticky; top: 0; z-index: 50;
background: rgba(255,255,255,.80);
backdrop-filter: saturate(180%) blur(16px);
-webkit-backdrop-filter: saturate(180%) blur(16px);
border-bottom: 1px solid var(--mkt-hairline);
}
.mkt-nav__inner {
max-width: var(--mkt-container); margin: 0 auto;
display: flex; align-items: center; gap: var(--mkt-s5);
padding: 0 var(--mkt-pad-x); min-height: 72px;
}
.mkt-nav__links { display: flex; align-items: center; gap: var(--mkt-s6); margin: 0 auto; }
.mkt-nav__links a {
color: var(--mkt-slate); font-size: var(--mkt-fs-ui); font-weight: var(--mkt-w-medium);
transition: color .15s ease;
}
.mkt-nav__links a:hover { color: var(--mkt-primary); }
.mkt-nav__cta { display: flex; align-items: center; gap: var(--mkt-s3); }
.mkt-nav__signin {
color: var(--mkt-ink-2); font-size: var(--mkt-fs-ui); font-weight: var(--mkt-w-medium);
padding: 8px 6px; transition: color .15s ease;
}
.mkt-nav__signin:hover { color: var(--mkt-primary); }
/* wordmark */
.mkt-wordmark { display: inline-flex; align-items: center; gap: var(--mkt-s2); }
.mkt-wordmark__mark { width: 26px; height: 26px; flex: none; }
.mkt-wordmark__text {
font-family: var(--mkt-font); font-weight: var(--mkt-w-bold);
font-size: 1.2rem; letter-spacing: -0.02em; color: var(--mkt-ink);
}
/* ── HERO (gradient + floating card) ──────────────────────────────────── */
.mkt-hero-wrap {
position: relative; overflow: hidden;
background: var(--mkt-gradient-soft);
}
/* the signature angled saturated gradient band, skewed with a diagonal edge */
.mkt-hero-band {
position: absolute; left: -8%; right: -8%;
top: clamp(300px, 40vw, 460px); height: clamp(320px, 46vw, 520px);
background: var(--mkt-gradient);
transform: skewY(-8deg); transform-origin: 0 0;
opacity: .92; z-index: 0; pointer-events: none;
}
.mkt-hero {
position: relative; z-index: 2;
max-width: var(--mkt-container); margin: 0 auto;
padding: clamp(56px, 8vw, 104px) var(--mkt-pad-x) 0;
text-align: center;
}
.mkt-hero__inner { max-width: 760px; margin: 0 auto; }
.mkt-hero__eyebrow { color: var(--mkt-primary); }
.mkt-hero__h1 {
font-size: var(--mkt-fs-display); font-weight: var(--mkt-w-x);
letter-spacing: var(--mkt-ls-display); line-height: 1.05;
color: var(--mkt-ink); margin: 0 0 var(--mkt-s5);
}
.mkt-hero__sub {
font-size: var(--mkt-fs-lead); line-height: var(--mkt-lh-read);
color: var(--mkt-slate); max-width: 62ch; margin: 0 auto var(--mkt-s6);
}
.mkt-hero__cta {
display: flex; flex-wrap: wrap; gap: var(--mkt-s3);
justify-content: center; align-items: center; margin-bottom: var(--mkt-s4);
}
.mkt-hero__micro { font-size: var(--mkt-fs-sm); color: var(--mkt-muted); }
/* floating white product card holding the timeline SVG motif */
.mkt-hero__motif {
position: relative; z-index: 2;
max-width: 960px; margin: clamp(40px, 6vw, 72px) auto 0;
padding: 0 var(--mkt-pad-x);
}
.mkt-hero__card {
background: #fff; border: 1px solid var(--mkt-border);
border-radius: var(--mkt-radius-lg); box-shadow: var(--mkt-shadow-xl);
padding: clamp(20px, 4vw, 40px);
}
.mkt-svg--rail { filter: none; } /* drop the amber glow; the card shadow carries it now */
/* ── TRUST STRIP ──────────────────────────────────────────────────────── */
.mkt-trust {
max-width: 720px; margin: clamp(48px, 7vw, 80px) auto 0;
padding: 0 var(--mkt-pad-x); text-align: center;
}
.mkt-trust__line {
font-size: var(--mkt-fs-read); line-height: var(--mkt-lh-read); color: var(--mkt-ink-2);
}
.mkt-trust__sub { margin-top: var(--mkt-s3); font-size: var(--mkt-fs-sm); }
/* ── FEATURE SECTIONS ─────────────────────────────────────────────────── */
.mkt-features {
max-width: var(--mkt-container); margin: 0 auto;
padding: var(--mkt-gap) var(--mkt-pad-x) 0;
display: flex; flex-direction: column; gap: var(--mkt-gap);
}
.mkt-feature {
display: grid; grid-template-columns: 1fr 1fr;
gap: clamp(32px, 6vw, 72px); align-items: center;
}
.mkt-feature__h {
font-size: var(--mkt-fs-h2); color: var(--mkt-ink); margin: 0 0 var(--mkt-s4);
}
.mkt-feature__text p {
font-size: var(--mkt-fs-read); line-height: var(--mkt-lh-read);
color: var(--mkt-slate); max-width: 46ch;
}
.mkt-feature__art {
background: var(--mkt-bg-tint);
border: 1px solid var(--mkt-border);
border-radius: var(--mkt-radius-lg);
box-shadow: var(--mkt-shadow-md);
padding: clamp(24px, 4vw, 40px);
}
.mkt-feature--flip .mkt-feature__text { order: 2; }
.mkt-feature--flip .mkt-feature__art { order: 1; }
/* ── HOW IT WORKS ─────────────────────────────────────────────────────── */
.mkt-how {
margin-top: var(--mkt-gap);
padding: var(--mkt-gap) var(--mkt-pad-x);
scroll-margin-top: 84px;
background: var(--mkt-bg-tint);
border-top: 1px solid var(--mkt-hairline);
border-bottom: 1px solid var(--mkt-hairline);
}
.mkt-how__inner { max-width: var(--mkt-container); margin: 0 auto; text-align: center; }
.mkt-steps {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: clamp(24px, 4vw, 40px); text-align: left;
}
.mkt-step {
background: #fff; border: 1px solid var(--mkt-border);
border-radius: var(--mkt-radius); box-shadow: var(--mkt-shadow-sm);
padding: var(--mkt-pad-card);
transition: transform .18s ease, box-shadow .18s ease;
}
.mkt-step:hover { transform: translateY(-3px); box-shadow: var(--mkt-shadow-md); }
.mkt-step__art {
background: var(--mkt-bg-tint); border: 1px solid var(--mkt-hairline);
border-radius: var(--mkt-radius-sm); padding: var(--mkt-s4); margin-bottom: var(--mkt-s4);
}
.mkt-step__n { color: var(--mkt-primary); margin-bottom: var(--mkt-s2); }
.mkt-step__h { font-size: var(--mkt-fs-h3); font-weight: var(--mkt-w-semi); color: var(--mkt-ink); margin: 0 0 var(--mkt-s2); }
.mkt-step__body { font-size: var(--mkt-fs-ui); line-height: var(--mkt-lh-read); color: var(--mkt-slate); }
/* ── HARD-MEMORIES BAND (quieter, no CTA) ─────────────────────────────── */
.mkt-hard {
margin-top: var(--mkt-gap);
padding: clamp(72px, 10vw, 128px) var(--mkt-pad-x);
background:
radial-gradient(ellipse 70% 90% at 50% 0%, var(--mkt-bg-tint-2), transparent 70%),
var(--mkt-bg-tint);
border-top: 1px solid var(--mkt-hairline);
border-bottom: 1px solid var(--mkt-hairline);
}
.mkt-hard__inner { max-width: var(--mkt-read); margin: 0 auto; }
.mkt-hard__h {
font-size: var(--mkt-fs-h2); color: var(--mkt-ink);
margin: 0 0 var(--mkt-s6); text-align: center;
}
.mkt-hard__body p {
font-size: var(--mkt-fs-lead); line-height: 1.7; color: var(--mkt-ink-2);
margin: 0 0 var(--mkt-s5);
}
.mkt-hard__small {
margin-top: var(--mkt-s7); padding-top: var(--mkt-s5);
border-top: 1px solid var(--mkt-hairline);
font-size: var(--mkt-fs-sm); line-height: var(--mkt-lh-ui);
color: var(--mkt-muted); text-align: center;
}
/* ── AI + PRIVACY ─────────────────────────────────────────────────────── */
.mkt-ai { padding: var(--mkt-gap) var(--mkt-pad-x); }
.mkt-ai__inner { max-width: var(--mkt-read); margin: 0 auto; text-align: center; }
.mkt-ai__body { text-align: left; }
.mkt-ai__body p {
font-size: var(--mkt-fs-read); line-height: var(--mkt-lh-read);
color: var(--mkt-slate); margin: 0 0 var(--mkt-s5);
}
.mkt-ai__link { margin-top: var(--mkt-s5); font-size: var(--mkt-fs-ui); }
/* ── FINAL CTA BAND (gradient, white text, AA scrim) ──────────────────── */
.mkt-final { margin: var(--mkt-gap) 0; padding: 0 var(--mkt-pad-x); }
.mkt-final__inner {
position: relative; overflow: hidden;
max-width: var(--mkt-container); margin: 0 auto;
border-radius: var(--mkt-radius-lg); box-shadow: var(--mkt-shadow-lg);
padding: clamp(48px, 7vw, 88px) clamp(24px, 5vw, 64px);
text-align: center; color: #fff;
background: var(--mkt-gradient);
}
/* dark scrim guarantees AA for white text over the saturated gradient */
.mkt-final__inner::before {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(10,37,64,.28), rgba(10,37,64,.42));
z-index: 0;
}
.mkt-final__inner > * { position: relative; z-index: 1; }
.mkt-final__h { color: #fff; font-size: var(--mkt-fs-h2); margin: 0 0 var(--mkt-s3); }
.mkt-final__body {
color: rgba(255,255,255,.92); font-size: var(--mkt-fs-lead);
line-height: var(--mkt-lh-read); margin: 0 auto var(--mkt-s6); max-width: 46ch;
}
.mkt-final__cta { display: flex; flex-wrap: wrap; gap: var(--mkt-s3); justify-content: center; margin-bottom: var(--mkt-s4); }
.mkt-final__micro { font-size: var(--mkt-fs-sm); color: rgba(255,255,255,.82); }
/* the final CTA reuses the hero micro/cta classes in markup — keep them legible on the band */
.mkt-final .mkt-hero__micro { color: rgba(255,255,255,.82); }
/* on the gradient band, the secondary button becomes a translucent white pill */
.mkt-final .mkt-btn--secondary,
.mkt-final .btn:not(.primary) {
background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.5);
box-shadow: none; backdrop-filter: blur(4px);
}
.mkt-final .mkt-btn--secondary:hover,
.mkt-final .btn:not(.primary):hover { background: rgba(255,255,255,.24); color: #fff; }
/* primary stays white-on-... make it a solid white pill with ink text for punch */
.mkt-final .mkt-btn--primary,
.mkt-final .btn.primary {
background: #fff; color: var(--mkt-primary); box-shadow: var(--mkt-shadow-md);
}
.mkt-final .mkt-btn--primary:hover,
.mkt-final .btn.primary:hover { background: #fff; color: var(--mkt-primary-press); }
/* ── DOC PAGES (pricing / about / legal shell) ────────────────────────── */
.mkt-doc { padding: clamp(48px, 6vw, 80px) var(--mkt-pad-x) var(--mkt-gap); }
.mkt-doc__inner { max-width: var(--mkt-container); margin: 0 auto; }
.mkt-doc__inner--prose { max-width: var(--mkt-read); }
.mkt-doc__head { margin-bottom: var(--mkt-s7); }
.mkt-doc__h1 {
font-size: var(--mkt-fs-h1); font-weight: var(--mkt-w-x);
letter-spacing: var(--mkt-ls-display); line-height: 1.1;
color: var(--mkt-ink); margin: 0 0 var(--mkt-s4);
}
.mkt-doc__lead {
font-size: var(--mkt-fs-lead); line-height: var(--mkt-lh-read);
color: var(--mkt-slate); max-width: 60ch;
}
.mkt-doc__meta { font-size: var(--mkt-fs-ui); color: var(--mkt-muted); margin-top: var(--mkt-s2); }
.mkt-doc__cta { margin-top: var(--mkt-s7); text-align: center; }
/* prose (about) */
.mkt-prose p {
font-size: var(--mkt-fs-read); line-height: var(--mkt-lh-read);
color: var(--mkt-slate); margin: 0 0 var(--mkt-s5);
}
/* optional in-page TOC (sticky sidebar or top list on legal pages) */
.mkt-toc {
border: 1px solid var(--mkt-border); border-radius: var(--mkt-radius);
background: var(--mkt-bg-tint); padding: var(--mkt-s5); margin: 0 0 var(--mkt-s7);
}
.mkt-toc__h {
font-size: var(--mkt-fs-tiny); font-weight: var(--mkt-w-semi);
letter-spacing: var(--mkt-ls-caps); text-transform: uppercase;
color: var(--mkt-muted); margin: 0 0 var(--mkt-s3);
}
.mkt-toc a { display: block; padding: 4px 0; color: var(--mkt-slate); font-size: var(--mkt-fs-sm); }
.mkt-toc a:hover { color: var(--mkt-primary); }
/* ── PRICING: plan cards ──────────────────────────────────────────────── */
.mkt-plans {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: clamp(20px, 3vw, 32px); margin: 0 0 var(--mkt-s8);
align-items: start;
}
.mkt-plan {
background: #fff; border: 1px solid var(--mkt-border);
border-radius: var(--mkt-radius-lg); box-shadow: var(--mkt-shadow-sm);
padding: clamp(28px, 4vw, 40px);
display: flex; flex-direction: column; gap: var(--mkt-s4);
}
.mkt-plan--pro {
border-color: var(--mkt-primary-border);
box-shadow: var(--mkt-shadow-lg);
position: relative;
}
.mkt-plan__badge {
position: absolute; top: 16px; right: 16px;
font-size: var(--mkt-fs-tiny); font-weight: var(--mkt-w-semi);
letter-spacing: var(--mkt-ls-caps); text-transform: uppercase;
color: var(--mkt-primary); background: var(--mkt-primary-tint);
border-radius: var(--mkt-radius-pill); padding: 4px 12px;
}
.mkt-plan__name { font-size: var(--mkt-fs-h3); font-weight: var(--mkt-w-semi); color: var(--mkt-ink); }
.mkt-plan__price { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: var(--mkt-w-x);
letter-spacing: var(--mkt-ls-head); color: var(--mkt-ink); line-height: 1.05; }
.mkt-plan__price small { font-size: var(--mkt-fs-ui); font-weight: var(--mkt-w-medium); color: var(--mkt-muted); }
.mkt-plan__desc { font-size: var(--mkt-fs-ui); line-height: var(--mkt-lh-read); color: var(--mkt-slate); }
.mkt-plan__list { display: flex; flex-direction: column; gap: var(--mkt-s2); margin: var(--mkt-s2) 0; }
.mkt-plan__list li {
position: relative; padding-left: 26px;
font-size: var(--mkt-fs-ui); color: var(--mkt-slate); line-height: 1.5;
}
.mkt-plan__list li::before {
content: "\2713"; /* ✓ */ position: absolute; left: 0; top: 0;
color: var(--mkt-success); font-weight: var(--mkt-w-bold);
}
.mkt-plan .mkt-btn { margin-top: auto; }
/* ── PRICING: comparison table ────────────────────────────────────────── */
.mkt-price-wrap { overflow-x: auto; margin: 0 0 var(--mkt-s6); }
.mkt-price { width: 100%; min-width: 520px; border-collapse: collapse; font-size: var(--mkt-fs-ui); }
.mkt-price th, .mkt-price td {
padding: var(--mkt-s3) var(--mkt-s4); text-align: left;
border-bottom: 1px solid var(--mkt-hairline); vertical-align: middle;
}
.mkt-price thead th {
font-size: var(--mkt-fs-h3); font-weight: var(--mkt-w-semi); color: var(--mkt-ink);
border-bottom: 2px solid var(--mkt-border);
}
.mkt-price thead th:first-child { width: 46%; }
.mkt-price tbody th[scope="row"] { font-weight: var(--mkt-w-medium); color: var(--mkt-ink-2); }
.mkt-price td { color: var(--mkt-ink); font-variant-numeric: tabular-nums; }
.mkt-price td.yes { color: var(--mkt-success); font-weight: var(--mkt-w-semi); }
.mkt-price td.no { color: var(--mkt-faint); }
.mkt-price__price td { font-size: var(--mkt-fs-h3); font-weight: var(--mkt-w-semi); }
.mkt-price__price td strong { color: var(--mkt-primary); }
.mkt-price tfoot th, .mkt-price tfoot td { border-bottom: none; padding-top: var(--mkt-s4); }
.mkt-price__notes { margin-bottom: var(--mkt-s7); }
.mkt-price__notes p { font-size: var(--mkt-fs-sm); color: var(--mkt-muted); line-height: var(--mkt-lh-ui); max-width: 66ch; margin: 0 0 var(--mkt-s3); }
.mkt-price__pro { margin-bottom: var(--mkt-s8); }
.mkt-price__pro p { color: var(--mkt-slate); margin: 0 0 var(--mkt-s4); max-width: 60ch; line-height: var(--mkt-lh-read); }
/* ── FAQ ──────────────────────────────────────────────────────────────── */
.mkt-faq { max-width: var(--mkt-read); }
.mkt-faq__item { padding: var(--mkt-s5) 0; border-top: 1px solid var(--mkt-hairline); }
.mkt-faq__q { font-size: var(--mkt-fs-h3); font-weight: var(--mkt-w-semi); color: var(--mkt-ink); margin: 0 0 var(--mkt-s3); }
.mkt-faq__item p { font-size: var(--mkt-fs-read); line-height: var(--mkt-lh-read); color: var(--mkt-slate); margin: 0 0 var(--mkt-s3); }
.mkt-faq__item p:last-child { margin-bottom: 0; }
/* optional accordion form: …
…