/* ============================================================
Forge Fitness — Landing page
Swiss-industrial: near-black, sharp corners (radius 0 always),
heavy uppercase type, flame-red accent used sparingly.
============================================================ */
/* Fonts are loaded via in index.html (preconnected, non-blocking). */
:root {
/* Base palette */
--ink-900: #0a0a0b;
--ink-800: #0d0d0f;
--ink-700: #161619;
--ink-600: #1f1f24;
--line-1: #232327;
--line-2: #2a2a30;
--line-3: #34343c;
--white: #f4f4f5;
--grey-1: #b4b4ba;
--grey-2: #8a8a90;
--grey-3: #838389; /* min value that holds 4.5:1 for small labels on card surfaces */
--grey-4: #55555c;
/* Flame accent — the whole set is rewritten live by the accent picker */
--flame: #ff2026;
--flame-text: #ff5a5e;
--flame-hover: #e51820;
--flame-press: #c2141a;
--flame-dim: #3a1416;
--flame-line: #5c1d20;
--on-accent: #ffffff;
/* Fill for white-text CTAs. Flame #ff2026 is only 3.83:1 with white; this
slightly darker red clears WCAG AA (4.77:1). Kept off --flame so accent
marks/borders stay the vivid brand red. Re-derived per accent in main.js. */
--accent-cta: #e02028;
--accent-cta-hover: #c2141a;
--success: #2fbf71;
--surface-card: var(--ink-700);
--surface-raised: var(--ink-600);
/* Single typeface. Numerals that used to be set in JetBrains Mono now use
Barlow with font-variant-numeric: tabular-nums at each site, so timers,
count-ups and stat columns keep the fixed-width alignment the mono gave
them for free and don't jitter as digits change. */
--font-sans: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--ink-900);
color: var(--white);
font-family: var(--font-sans);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
::selection { background: var(--flame); color: #fff; }
a { color: inherit; }
button { border-radius: 0; }
/* Form controls don't inherit type from the page by default — that's how the
numpad's "." and "RPE" keys ended up rendering in the UA font while their
sibling ".num" (which sets font-family explicitly) looked correct. Inherit by
default so nothing can silently fall out of Barlow again. */
button, input, select, textarea { font-family: inherit; }
@keyframes ffpulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.2; }
}
/* Scroll reveal: elements start hidden ONLY when has .reveal-ready
(added pre-paint by an inline script, and only when motion is allowed), then
.is-visible fades them in. Because the gate depends on that class, a no-JS or
reduced-motion visit — or a failed script — leaves everything visible. */
html.reveal-ready [data-reveal] {
opacity: 0;
transform: translateY(24px);
transition: opacity .55s ease, transform .65s cubic-bezier(.16, 1, .3, 1);
}
html.reveal-ready [data-reveal].is-visible {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation: none !important; transition: none !important; }
[data-reveal] { opacity: 1 !important; transform: none !important; }
}
:focus-visible { outline: 2px solid var(--flame); outline-offset: 2px; }
/* Scroll targets get focus programmatically (see scrollToHash in main.js) so
keyboard and screen-reader users land where the page scrolled. They're whole
page sections rather than controls, so outlining them would be noise. */
.is-scroll-target:focus, .is-scroll-target:focus-visible { outline: none; }
.skip-link {
position: absolute;
top: -100px;
left: 16px;
z-index: 100;
padding: 12px 18px;
background: var(--flame);
color: var(--on-accent);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
}
.skip-link:focus { top: 16px; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
/* ============ Header ============ */
.site-header {
position: sticky;
top: 0;
z-index: 60;
background: var(--ink-900);
border-bottom: 1px solid var(--line-1);
}
.header-inner {
height: 72px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.logo-link { display: flex; align-items: center; gap: 13px; text-decoration: none; flex: none; }
.logo-svg { height: 36px; width: auto; display: block; }
.logo-svg--footer { height: 32px; }
.site-nav { display: flex; align-items: center; gap: 32px; }
.site-nav a {
text-decoration: none;
color: var(--grey-2);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
transition: color .12s ease;
}
.site-nav a:hover { color: var(--white); }
/* ============ Buttons (from the DS Button component) ============ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: var(--font-sans);
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
white-space: nowrap;
text-decoration: none;
transition: background .12s ease, border-color .12s ease, color .12s ease, transform .04s ease;
}
.btn:active { transform: translateY(1px); }
.btn .arrow { font-weight: 700; transform: translateY(-1px); }
.btn--sm { height: 40px; padding: 0 18px; font-size: 12px; }
.btn--md { height: 44px; padding: 0 24px; font-size: 13px; }
.btn--lg { height: 56px; padding: 0 32px; font-size: 15px; }
.btn--primary { background: var(--accent-cta); color: var(--on-accent); border: 2px solid var(--accent-cta); }
.btn--primary:hover { background: var(--accent-cta-hover); border-color: var(--accent-cta-hover); }
.btn--secondary { background: transparent; color: var(--white); border: 2px solid var(--line-2); }
.btn--secondary:hover { border-color: var(--line-3); }
/* ============ Shared section furniture ============ */
.section { border-top: 1px solid var(--line-1); }
.section--alt { background: var(--ink-800); border-bottom: 1px solid var(--line-1); }
.section-inner { padding: 100px 32px; }
section[id] { scroll-margin-top: 80px; }
.eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
height: 30px;
padding: 0 13px;
border: 1px solid var(--flame-line);
background: var(--flame-dim);
color: var(--flame-text);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 26px;
}
.eyebrow .dot { width: 6px; height: 6px; background: var(--flame); flex: none; }
.eyebrow .dot--pulse { animation: ffpulse 2s ease-in-out infinite; }
.section-head { max-width: 700px; }
.section-title {
margin: 0;
font-size: clamp(34px, 4.8vw, 60px);
font-weight: 900;
line-height: 0.95;
letter-spacing: -0.025em;
text-transform: uppercase;
color: var(--white);
}
.section-lead {
margin: 24px 0 0;
max-width: 560px;
font-size: 18px;
font-weight: 500;
line-height: 1.6;
color: var(--grey-1);
}
.micro-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--grey-3);
}
/* ============ Hero ============ */
.hero {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 56px;
padding: 84px 32px 96px;
}
.hero-copy { flex: 1 1 400px; min-width: 300px; }
.hero-copy .eyebrow { margin-bottom: 28px; }
.hero-title {
margin: 0;
font-size: clamp(48px, 6.6vw, 92px);
font-weight: 900;
line-height: 0.92;
letter-spacing: -0.03em; /* Barlow sets narrower than Inter; less negative tracking needed */
text-transform: uppercase;
color: var(--white);
}
.hero-lead {
margin: 28px 0 0;
max-width: 480px;
font-size: 18px;
font-weight: 500; /* Barlow 400 reads light at this size on dark */
line-height: 1.6;
color: var(--grey-1);
}
.hero-tagline {
display: flex;
align-items: center;
gap: 11px;
margin-top: 18px;
color: var(--grey-3);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
}
.hero-tagline::before { content: ""; width: 22px; height: 2px; background: var(--flame); flex: none; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.hero-stats {
display: flex;
gap: 36px;
margin-top: 48px;
border-top: 1px solid var(--line-1);
padding-top: 28px;
max-width: 480px;
}
.stat { display: flex; flex-direction: column; gap: 5px; }
.stat-value {
font-family: var(--font-sans); font-variant-numeric: tabular-nums;
font-size: 30px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--white);
}
.stat-value--flame { color: var(--flame-text); }
.stat-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--grey-3);
}
/* ============ Phone frames + mock app screens ============ */
.phone-wrap { flex: 1 1 330px; min-width: 300px; display: flex; justify-content: center; position: relative; }
.phone-stage { position: relative; width: 330px; }
.phone {
position: relative;
width: 330px;
height: 680px;
background: var(--ink-900);
border: 1px solid var(--line-2);
display: flex;
flex-direction: column;
overflow: hidden;
}
.phone--tall { height: 702px; }
.phone-statusbar {
height: 42px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
flex: none;
}
.phone-statusbar .clock { font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; color: var(--white); }
.phone-statusbar .glyphs { display: inline-flex; align-items: center; gap: 5px; color: var(--white); }
.phone-statusbar .glyphs svg { display: block; }
/* Always render as a left-aligned app screen, independent of any outer
section's text-align (e.g. the centred mobile hero). */
.phone-screen { flex: 1; min-height: 0; padding: 14px 16px 0; display: flex; flex-direction: column; gap: 12px; overflow: hidden; text-align: left; }
/* In-app elements for the mock screens */
.app-pill {
align-self: flex-start;
display: inline-flex;
align-items: center;
height: 24px;
padding: 0 10px;
border: 1px solid var(--flame-line);
color: var(--flame-text);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.app-title {
font-size: 24px;
font-weight: 900;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--white);
line-height: 1;
}
.app-sub { font-size: 11px; color: var(--grey-3); font-weight: 600; }
.app-card {
background: var(--surface-card);
border: 1px solid var(--line-2);
padding: 14px;
}
.app-card--accent { border-top: 2px solid var(--flame); }
.app-card .exercise-name { font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; color: var(--white); }
.app-card .lastbest { font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 700; color: var(--grey-2); margin-top: 5px; }
.app-card .lastbest b { color: var(--flame-text); font-weight: 700; }
.set-row {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 0;
border-top: 1px solid var(--line-1);
font-family: var(--font-sans); font-variant-numeric: tabular-nums;
font-size: 12px;
color: var(--grey-1);
}
.set-row:first-of-type { margin-top: 10px; }
.set-row .set-no { color: var(--grey-3); width: 22px; }
.set-row .set-val { flex: 1; font-weight: 700; color: var(--white); }
.set-row .set-rpe { color: var(--grey-3); }
.set-row .set-done { color: var(--success); font-weight: 700; }
.set-row--active .set-val, .set-row--active .set-no { color: var(--flame-text); }
.set-row--active .set-cursor { width: 8px; height: 14px; background: var(--flame); animation: ffpulse 1.2s ease-in-out infinite; }
.app-list-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 13px 14px;
background: var(--surface-card);
border: 1px solid var(--line-2);
}
.app-list-row--active { border-left: 2px solid var(--flame); }
.app-list-row .row-name { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; color: var(--white); }
.app-list-row .row-meta { font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: 10px; color: var(--grey-3); margin-top: 3px; }
.app-list-row .row-count { font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 700; color: var(--grey-2); }
.app-list-row .row-count--flame { color: var(--flame-text); }
.app-numpad {
margin-top: auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
padding-bottom: 16px;
}
.app-numpad .key {
height: 44px;
display: grid;
place-items: center;
background: var(--surface-raised);
border: 1px solid var(--line-1);
font-family: var(--font-sans); font-variant-numeric: tabular-nums;
font-size: 16px;
font-weight: 700;
color: var(--grey-1);
}
.app-numpad .key--go { background: var(--flame); border-color: var(--flame); color: var(--on-accent); font-family: var(--font-sans); font-weight: 800; }
/* Train phone — Live Workout screen */
.phone-screen--train { gap: 10px; }
.tr-toprow { display: flex; align-items: center; justify-content: space-between; }
.tr-elapsed {
display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px;
border: 1px solid var(--line-2); font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: 13px;
font-weight: 700; color: var(--white);
}
.tr-pause { display: flex; gap: 2px; }
.tr-pause i { width: 2px; height: 10px; background: var(--flame-text); border-radius: 1px; }
.tr-progress { display: flex; gap: 4px; }
.tr-progress-seg { flex: 1; height: 4px; background: var(--line-1); }
.tr-progress-seg.is-full { background: var(--flame); }
.tr-progress-seg.is-partial {
background: linear-gradient(to right, var(--flame-dim) 0%, var(--flame-dim) 66.66%, var(--line-1) 66.66%, var(--line-1) 100%);
}
.tr-meta { display: flex; gap: 14px; font-size: 10px; font-weight: 700; color: var(--grey-3); }
.tr-meta b { color: var(--white); font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-weight: 700; }
.tr-setcard { gap: 16px; }
.tr-setlines { display: flex; flex-direction: column; }
.tr-setline {
display: flex; align-items: center; gap: 10px; padding: 7px 0;
border-top: 1px solid var(--line-1); font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: 12px;
}
.tr-setline:first-child { border-top: none; padding-top: 0; }
.tr-setline .no { color: var(--grey-3); width: 12px; }
.tr-setline .val { flex: 1; color: var(--white); font-weight: 700; }
.tr-setline .edit-ico { color: var(--grey-2); display: flex; }
.tr-card-toprow { display: flex; align-items: center; gap: 8px; }
.tr-next-pill {
display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
background: var(--flame-dim); border: 1px solid var(--flame-line); color: var(--flame-text);
font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 700;
}
.tr-next-arrow { flex: none; }
.tr-set-badge { display: inline-flex; align-items: center; height: 26px; border: 1px solid var(--line-2); padding: 0 8px; }
.tr-more-ico { margin-left: auto; color: var(--grey-3); display: flex; }
.tr-ex-name { display: flex; align-items: center; gap: 8px; font-size: 21px; font-weight: 600; letter-spacing: -0.01em; color: var(--white); margin: 10px 0; }
.tr-info { color: var(--flame-text); display: flex; }
.tr-stats-row { display: flex; justify-content: space-between; font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: 10px; font-weight: 700; color: var(--grey-3); }
.tr-stats-row .k { letter-spacing: 0.06em; text-transform: uppercase; }
.tr-stats-row b { color: var(--grey-1); font-weight: 700; }
.tr-stats-row b.v--flame { color: var(--flame-text); }
.tr-entry-group { display: flex; flex-direction: column; gap: 8px; }
.tr-input-row { display: flex; gap: 8px; padding-top: 8px; }
.tr-input-col { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.tr-input-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-3); text-align: center; }
.tr-input-box {
width: 100%; height: 40px; display: grid; place-items: center; background: var(--ink-900);
border: 1px solid var(--line-2); font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: 18px;
font-weight: 800; color: var(--grey-4); cursor: pointer;
}
.tr-action-row { display: flex; gap: 10px; }
.tr-action-row button {
height: 40px; font-family: var(--font-sans); font-size: 11px; font-weight: 800;
letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
}
.tr-warmup-btn { flex: none; width: 84px; background: transparent; border: 1px solid var(--line-2); color: var(--grey-2); }
.tr-complete-btn {
flex: 1; background: transparent; border: 1px solid var(--line-2); color: var(--grey-2);
display: flex; align-items: center; justify-content: center; gap: 7px;
}
.tr-rest-card { border: 1.5px solid var(--flame); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.tr-rest-top { display: flex; align-items: baseline; justify-content: space-between; }
.tr-rest-label { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--flame-text); }
.tr-rest-time { font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: 19px; font-weight: 700; color: var(--white); }
.tr-rest-track { height: 3px; background: var(--line-1); }
.tr-rest-track i { display: block; height: 100%; background: var(--flame); }
.tr-rest-btns { display: flex; gap: 8px; }
.tr-rest-btns button {
flex: 1; height: 30px; background: transparent; border: 1px solid var(--line-2); color: var(--grey-2);
font-family: var(--font-sans); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
cursor: pointer; transition: color .12s ease, border-color .12s ease;
}
.tr-rest-btns button:hover { color: var(--white); border-color: var(--grey-2); }
.tr-exlist-label { font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--white); }
.tr-exlist { display: flex; flex-direction: column; gap: 6px; }
.tr-exrow { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); padding: 8px 10px; }
.tr-exrow--done, .tr-exrow--active { border: 1.5px solid var(--flame); }
.tr-exbadge {
flex: none; width: 18px; height: 18px; display: grid; place-items: center;
border: 1px solid var(--line-3); font-size: 10px; font-weight: 800; color: var(--grey-2);
}
.tr-exbadge--done { background: var(--flame); border-color: var(--flame); color: var(--on-accent); }
.tr-exbadge--active { border-color: var(--flame); color: var(--flame-text); }
.tr-exname { flex: 1; font-size: 11px; font-weight: 700; color: var(--grey-1); }
.tr-exrow--done .tr-exname, .tr-exrow--active .tr-exname { color: var(--flame-text); }
.tr-exname--pending { color: var(--grey-1); }
.tr-exsets { font-size: 10px; font-weight: 700; color: var(--flame-text); }
.tr-exsets--dim { color: var(--grey-3); }
.tr-exrow:not(.tr-exrow--done):not(.tr-exrow--active) .tr-exsets { color: var(--grey-3); }
.app-cta {
height: 46px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--accent-cta);
color: var(--on-accent);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* Dashboard mock screen (hero phone) */
.app-dashtop { display: flex; align-items: center; justify-content: space-between; }
.app-iconsq {
width: 30px;
height: 30px;
flex: none;
border: 1.5px solid var(--flame);
color: var(--flame);
display: grid;
place-items: center;
}
.app-greet { font-size: 12px; font-weight: 600; color: var(--grey-2); margin-bottom: 6px; }
.app-card .micro-label, .app-dashstat .micro-label { font-size: 10px; }
.app-card .session-name {
font-size: 20px;
font-weight: 900;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--white);
margin: 8px 0 10px;
}
.app-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.app-chips span {
background: var(--surface-raised);
color: var(--grey-1);
padding: 7px 10px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.app-card .app-cta { margin-top: 12px; }
.app-dashstats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.app-dashstat {
position: relative;
background: var(--surface-card);
border: 1px solid var(--line-2);
padding: 12px 14px;
}
.app-dashstat .ic { position: absolute; top: 12px; right: 12px; color: var(--flame); }
.app-dashstat .v {
font-family: var(--font-sans); font-variant-numeric: tabular-nums;
font-size: 24px;
font-weight: 700;
color: var(--white);
margin: 5px 0 2px;
}
.app-dashstat .k {
font-size: 8px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--grey-3);
}
.app-dashsec { display: flex; align-items: baseline; justify-content: space-between; }
.app-dashsec .t { font-size: 13px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--white); }
.app-dashsec .all { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--flame-text); }
.app-navbar {
margin: auto -16px 0;
flex: none;
height: 52px;
border-top: 1px solid var(--line-1);
background: var(--ink-800);
display: grid;
grid-template-columns: repeat(5, 1fr);
}
.app-navbar .tab { display: grid; place-items: center; color: var(--grey-4); position: relative; }
.app-navbar .tab--on { color: var(--flame); }
.app-navbar .tab--on::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 2px; background: var(--flame); }
/* Live Workout — slide-up numpad sheet */
.tr-numpad-sheet {
position: absolute; left: 0; right: 0; bottom: 0;
background: var(--ink-900);
border-top: 1px solid var(--line-2);
transform: translateY(100%);
transition: transform .34s cubic-bezier(.16, .84, .32, 1);
z-index: 5;
}
.tr-numpad-sheet.is-open { transform: translateY(0); }
.tr-numpad-tabs { display: flex; border-bottom: 1px solid var(--line-2); }
.tr-numpad-tab {
flex: 1; height: 38px; background: transparent; border: none; cursor: pointer;
font-family: var(--font-sans); font-size: 12px; font-weight: 800; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--grey-3);
}
.tr-numpad-tab.is-active { color: var(--white); box-shadow: inset 0 -2px 0 var(--flame); }
.tr-numpad-grid {
display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 54px);
gap: 1px; background: var(--line-1);
}
.tr-numpad-grid[hidden] { display: none; }
.tr-numpad-key {
position: relative; background: var(--ink-900); border: none; padding: 0; margin: 0;
display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer;
}
.tr-numpad-key .g { position: relative; z-index: 1; transition: transform .12s ease; }
.tr-numpad-key .num { font-family: var(--font-sans); font-size: 24px; font-weight: 700; color: var(--white); font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.tr-numpad-key .dot { font-size: 28px; font-weight: 900; color: var(--white); line-height: 0; padding-bottom: 10px; }
.tr-numpad-key .rpe { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--grey-2); }
.tr-numpad-key--submit { background: rgba(255, 32, 38, .13); }
.tr-numpad-key.is-flash::before {
content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .14); z-index: 0;
animation: trNumpadTap .28s ease-out;
}
.tr-numpad-key--submit.is-flash::before { background: rgba(255, 32, 38, .42); }
.tr-numpad-key.is-flash .g { transform: scale(.9); }
@keyframes trNumpadTap { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
.tr-input-col.is-highlighted .tr-input-box { border-color: var(--flame); }
.tr-numpad-toggle { flex: none; width: 330px; max-width: 100%; }
/* Floating overlay cards on the phones */
.float-card {
position: absolute;
z-index: 3;
background: var(--surface-card);
border: 1px solid var(--line-2);
padding: 11px 15px;
display: flex;
flex-direction: column;
gap: 4px;
white-space: nowrap;
}
.float-card .float-label {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--grey-3);
}
/* ============ Train section ============ */
.train-body { display: flex; flex-wrap: wrap; gap: 64px; align-items: flex-start; }
.train-body .train-copy { order: 2; }
.train-body .train-graphic { order: 1; }
.train-copy { flex: 1 1 400px; min-width: 300px; display: flex; flex-direction: column; gap: 60px; }
.train-points { flex: none; }
.train-graphic { flex: 1 1 330px; min-width: 300px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.train-graphic .phone-wrap { flex: none; width: 100%; justify-content: flex-start; }
.step { display: flex; gap: 20px; padding: 24px 0; border-top: 1px solid var(--line-1); }
.step:last-of-type { border-bottom: 1px solid var(--line-1); }
.step-num { font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 700; color: var(--flame-text); flex: none; }
.step-marker { width: 9px; height: 9px; background: var(--flame); flex: none; margin-top: 6px; }
.step h3 {
margin: 0 0 8px;
font-size: 16px;
font-weight: 800;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--white);
}
.step p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--grey-2); }
.step p .mono { font-family: var(--font-sans); font-variant-numeric: tabular-nums; color: var(--grey-1); }
/* ============ Analytics section ============ */
.analytics-grid { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 60px; align-items: stretch; }
.heatmap-card {
flex: 1 1 420px;
min-width: 320px;
background: var(--surface-card);
border: 1px solid var(--line-2);
padding: 28px;
display: flex;
flex-direction: column;
}
.card-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; }
.card-head .range { font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: 11px; color: var(--grey-3); }
.figures { display: flex; gap: 28px; justify-content: center; align-items: center; flex: 1; padding: 12px 0; }
.figure { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.figure svg { height: 440px; width: auto; max-width: 100%; display: block; overflow: visible; }
.figure-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--grey-2);
}
.heat-legend {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 24px;
padding-top: 18px;
border-top: 1px solid var(--line-1);
}
.heat-legend .micro-label { font-size: 10px; }
.legend-swatches { display: flex; gap: 4px; }
.legend-swatches span { width: 18px; height: 10px; background: var(--flame); }
.analytics-col { flex: 1 1 420px; min-width: 320px; display: flex; flex-direction: column; gap: 28px; }
/* Working-sets-by-muscle rank bars (pairs with the heatmap; rows built in main.js) */
.rank-card {
flex: 1;
background: var(--surface-card);
border: 1px solid var(--line-2);
padding: 24px;
display: flex;
flex-direction: column;
}
.rank-card .card-head { margin-bottom: 0; }
.rank-card .range { font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: 11px; color: var(--grey-3); }
.rank-rows { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.rank-row {
position: relative;
flex: 1 1 0;
min-height: 48px;
display: flex;
align-items: center;
overflow: hidden;
background: var(--ink-800);
border: 1px solid var(--line-1);
}
.rank-bar {
position: absolute;
left: 0; top: 0; bottom: 0;
transform-origin: left;
background: color-mix(in srgb, var(--flame) 26%, var(--surface-card));
border-right: 2px solid var(--flame);
}
.rank-mid { position: relative; display: flex; align-items: center; gap: 14px; padding-left: 16px; flex: 1; min-width: 0; }
.rank-pos { font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; color: var(--grey-3); flex: none; }
.rank-name { font-size: 15px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-val { position: relative; padding-right: 16px; white-space: nowrap; flex: none; }
.rank-num { font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 700; color: var(--white); }
.rank-unit { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: var(--grey-3); margin-left: 6px; }
.rank-more { margin: 14px 0 0; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-3); }
/* ============ Programs section ============ */
.program-flow {
display: flex;
flex-wrap: wrap;
gap: 56px;
justify-content: center;
align-items: flex-start;
margin-top: 64px;
}
/* Pinned scroll-scrub (desktop + motion only; JS adds .scrub). Elsewhere the
track/sticky are inert pass-throughs and the flow reveals on scroll instead. */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
.programs-track.scrub { height: 240vh; }
.programs-track.scrub .programs-sticky {
position: sticky;
top: 72px;
height: calc(100vh - 72px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
}
.programs-track.scrub .program-flow { margin-top: 0; width: 100%; }
}
.flow-col { flex: 0 1 302px; min-width: 240px; display: flex; flex-direction: column; gap: 18px; }
.flow-phone {
width: 100%;
aspect-ratio: 250 / 520;
background: var(--ink-900);
border: 1px solid var(--line-2);
display: flex;
flex-direction: column;
overflow: hidden;
}
.flow-phone .phone-statusbar { height: 38px; padding: 0 16px; }
.flow-phone .phone-statusbar .clock { font-size: 12px; }
.flow-phone .phone-statusbar .glyphs { transform: scale(0.85); transform-origin: right center; }
.flow-phone .phone-screen { padding: 10px 12px 0; gap: 9px; }
.flow-phone .app-title { font-size: 18px; }
.flow-phone .app-list-row { padding: 10px 11px; }
.flow-phone .app-list-row .row-name { font-size: 11px; }
.flow-phone .app-list-row .row-count { font-size: 10px; }
.flow-phone .app-cta { height: 40px; font-size: 11px; margin-bottom: 12px; }
/* Session list — animated app-screen recreation */
.session-screen { gap: 8px; padding-bottom: 12px; }
.session-head { display: flex; justify-content: space-between; align-items: center; }
.session-actions { display: flex; gap: 6px; }
.session-action {
position: relative;
width: 26px; height: 26px;
border: 1px solid var(--line-2);
display: grid; place-items: center;
color: var(--grey-1);
}
.session-action svg { width: 15px; height: 15px; display: block; }
.session-action--share { border-color: var(--flame); color: var(--flame-text); }
.session-action--share::after {
content: "";
position: absolute;
inset: -2px;
border: 2px solid var(--flame);
animation: sharePulse 1.7s ease-out infinite;
pointer-events: none;
}
@keyframes sharePulse { 0% { opacity: 0.75; transform: scale(1); } 100% { opacity: 0; transform: scale(1.55); } }
.session-title { font-size: 20px; font-weight: 900; letter-spacing: -0.02em; text-transform: uppercase; color: var(--white); margin-top: 2px; }
.session-active {
align-self: flex-start;
font-size: 9px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--flame-text);
background: color-mix(in srgb, var(--flame) 16%, var(--ink-900));
padding: 4px 8px;
}
.session-label { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); margin-top: 4px; }
.session-list { display: flex; flex-direction: column; gap: 8px; }
.session-card {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
border: 1px solid var(--line-2); background: var(--ink-900);
padding: 10px 11px;
}
.session-name { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; color: var(--white); }
.session-days { font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-top: 3px; }
.session-days .days-on { color: var(--flame-text); }
.session-days .days-meta { color: var(--grey-3); }
.session-chev { color: var(--grey-3); font-size: 15px; font-weight: 700; flex: none; }
.session-card--rest .session-name { color: var(--grey-1); }
.flow-step-head { display: flex; align-items: center; gap: 9px; }
.flow-step-head .step-num { font-size: 13px; }
.flow-step-head .step-title {
font-size: 13px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--white);
}
.flow-col > div > p { margin: 7px 0 0; font-size: 13px; line-height: 1.55; color: var(--grey-2); }
.share-stack-col { flex: 0 1 344px; min-width: 300px; }
.share-stack { display: flex; flex-direction: column; gap: 20px; }
.sheet-card {
background: var(--surface-card);
border: 1px solid var(--line-2);
padding: 18px 22px 20px;
display: flex;
flex-direction: column;
gap: 13px;
}
.sheet-grabber { width: 40px; height: 4px; background: var(--line-3); align-self: center; margin-bottom: 2px; }
.sheet-title { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; color: var(--white); }
.sheet-desc { margin: 0; font-size: 12px; line-height: 1.5; color: var(--grey-2); }
.qr-box { padding: 12px; background: var(--ink-900); border: 1px solid var(--line-2); }
.qr-box svg { width: 132px; height: 132px; display: block; shape-rendering: crispEdges; }
.share-reveal-card .qr-box { align-self: center; padding: 11px; }
.share-reveal-card .qr-box svg { width: 118px; height: 118px; }
.share-code-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.share-code-wrap .micro-label { font-size: 10px; letter-spacing: 0.16em; }
.share-code {
font-family: var(--font-sans); font-variant-numeric: tabular-nums;
font-size: 27px;
font-weight: 700;
letter-spacing: 0.17em;
color: var(--white);
padding-left: 0.17em;
}
.copy-btn {
width: 100%;
height: 40px;
background: transparent;
border: 2px solid var(--line-2);
color: var(--white);
font-family: var(--font-sans);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition: border-color .12s ease;
}
.copy-btn:hover { border-color: var(--line-3); }
.copy-btn.copied { color: var(--flame-text); }
/* Share code reveal — chars pop in one by one */
.share-code .code-char { display: inline-block; }
/* Type-code sheet */
.code-input {
display: flex;
align-items: center;
min-height: 52px;
padding: 13px 15px;
background: var(--ink-800);
border: 1px solid var(--line-2);
font-family: var(--font-sans); font-variant-numeric: tabular-nums;
font-size: 20px;
font-weight: 700;
letter-spacing: 0.28em;
color: var(--white);
}
.code-input .code-typed { white-space: nowrap; }
.code-caret { width: 2px; height: 22px; background: var(--flame); margin-left: 3px; flex: none; animation: ffpulse 1.1s ease-in-out infinite; }
.add-program-btn {
text-align: center;
padding: 13px;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--grey-2);
background: color-mix(in srgb, var(--flame) 34%, var(--ink-900));
transition: background .35s ease, color .35s ease;
}
.add-program-btn.is-ready { color: var(--on-accent); background: var(--flame); }
.program-features {
display: flex;
flex-wrap: wrap;
gap: 32px;
margin-top: 64px;
padding-top: 36px;
border-top: 1px solid var(--line-1);
}
.program-features > div { flex: 1 1 200px; min-width: 180px; }
.program-features h3 {
margin: 0 0 8px;
font-size: 14px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--white);
}
.program-features p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--grey-2); }
/* ============ Themes section ============ */
.themes-body { margin-top: 56px; }
.themes-layout { display: flex; flex-wrap: wrap; gap: 28px; align-items: stretch; }
.themes-left { flex: 1 1 380px; min-width: 300px; display: flex; flex-direction: column; gap: 28px; }
.accent-card { background: var(--surface-card); border: 1px solid var(--line-2); padding: 30px; }
.accent-head {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 22px;
}
.accent-head .micro-label { letter-spacing: 0.14em; }
.accent-hint { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 600; color: var(--grey-2); }
.accent-hint::before { content: ""; width: 9px; height: 9px; background: var(--flame); flex: none; }
.swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.swatch {
width: 100%;
aspect-ratio: 1;
border: none;
padding: 0;
cursor: pointer;
transition: transform .12s ease;
}
.swatch:hover { transform: translateY(-3px); }
.swatch.selected { box-shadow: 0 0 0 2px var(--ink-900), 0 0 0 4px var(--swatch-hex, var(--flame)); }
.pv-label-static {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--grey-3);
margin-bottom: 18px;
}
.themes-right { flex: 1 1 380px; min-width: 300px; display: flex; flex-direction: column; gap: 28px; }
.preview-card {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
background: var(--pv-card, #161619);
border: 1px solid var(--pv-border, #232327);
padding: 26px;
}
.pv-label-abs {
position: absolute;
top: 26px;
left: 26px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--pv-muted, #7a7a82);
}
.mmap-figs { flex: 1; display: flex; justify-content: center; align-items: stretch; gap: 28px; margin-top: 28px; }
.mmap-fig { display: flex; flex-direction: column; align-items: center; }
.mmap-svgbox { width: 100%; max-width: 130px; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.mmap-svgbox svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pv-session-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--pv-muted, #7a7a82);
}
.pv-session-name {
font-size: 26px;
font-weight: 900;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--pv-text, #f4f4f5);
margin: 6px 0 18px;
}
.pv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.pv-chips span {
background: var(--pv-bg, #0a0a0b);
border: 1px solid var(--pv-border, #232327);
color: var(--pv-text, #f4f4f5);
padding: 7px 10px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.pv-cta {
width: 100%;
height: 52px;
margin-top: auto;
background: var(--accent-cta);
color: var(--on-accent);
border: none;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: background .12s ease;
}
.pv-cta:hover { background: var(--accent-cta-hover); }
.theme-select-card {
flex: 1;
display: flex;
flex-direction: column;
background: var(--surface-card);
border: 1px solid var(--line-2);
padding: 30px;
}
.theme-col { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 14px; }
.theme-tile { display: flex; align-items: center; gap: 12px; cursor: pointer; border: 1px solid var(--line-2); padding: 12px; }
.theme-tile.selected { border-color: var(--flame); }
.theme-tile:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; flex-direction: column; align-items: stretch; gap: 10px; }
.theme-tile:nth-child(2) { grid-column: 2; grid-row: 1; }
.theme-tile:nth-child(3) { grid-column: 2; grid-row: 2; }
.theme-tile .tile-surface {
flex: none;
align-self: stretch;
width: 84px;
border: 1px solid var(--line-2);
padding: 8px;
display: flex;
flex-direction: column;
gap: 6px;
}
.theme-tile:nth-child(1) .tile-surface { width: auto; flex: 1; justify-content: center; }
.theme-tile:nth-child(1) .tile-card { padding: 14px; gap: 10px; }
.theme-tile:nth-child(1) .tile-card .bar { height: 10px; }
.theme-tile:nth-child(1) .tile-card .chip { width: 22px; height: 22px; }
.tile-card { padding: 8px; display: flex; flex-direction: column; gap: 5px; }
.tile-card .bar { height: 6px; }
.tile-card .chip { width: 14px; height: 14px; background: var(--flame); margin-top: 1px; }
.theme-tile .tile-foot { flex: 1; display: flex; align-items: center; }
.theme-tile:nth-child(1) .tile-foot { flex: none; }
.theme-tile .tile-name {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--white);
}
.theme-tile.selected .tile-name { color: var(--flame-text); }
/* ============ Feature grid ============ */
.features-head { margin-bottom: 52px; }
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1px;
background: var(--line-1);
border: 1px solid var(--line-1);
}
.feature-cell {
background: var(--ink-900);
padding: 32px;
display: flex;
flex-direction: column;
gap: 16px;
transition: background .12s ease;
}
.feature-cell:hover { background: #111115; }
.feature-cell .icon-box {
width: 46px;
height: 46px;
border: 1px solid var(--line-2);
display: grid;
place-items: center;
color: var(--grey-1);
flex: none;
}
.feature-cell h3 {
margin: 0 0 7px;
font-size: 15px;
font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--white);
}
.feature-cell p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--grey-2); }
/* ============ Waitlist ============ */
.waitlist-inner {
max-width: 780px;
margin: 0 auto;
padding: 112px 32px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.waitlist-inner .eyebrow { margin-bottom: 28px; }
.waitlist-title {
margin: 0;
font-size: clamp(40px, 5.8vw, 80px);
font-weight: 900;
line-height: 0.92;
letter-spacing: -0.03em;
text-transform: uppercase;
color: var(--white);
}
.waitlist-lead { margin: 26px 0 0; max-width: 520px; font-size: 18px; font-weight: 500; line-height: 1.6; color: var(--grey-1); }
.waitlist-form-wrap { width: 100%; max-width: 540px; margin-top: 38px; }
.waitlist-form { display: flex; flex-wrap: wrap; gap: 12px; }
.waitlist-form .select-wrap { flex: 1 1 100%; position: relative; }
.waitlist-form select {
width: 100%;
height: 58px;
background: var(--surface-raised);
border: 2px solid var(--line-2);
color: var(--white);
font-family: var(--font-sans);
font-size: 16px;
padding: 0 44px 0 18px;
outline: none;
transition: border-color .12s ease;
border-radius: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
}
.waitlist-form select:focus { border-color: var(--flame); }
/* Placeholder look while the empty (required) option is still selected. */
.waitlist-form select:invalid { color: var(--grey-2); }
.waitlist-form select[aria-invalid="true"] { border-color: var(--flame); }
.waitlist-form select option { background: var(--ink-700); color: var(--white); }
/* Custom chevron (native arrow is suppressed via appearance:none). */
.waitlist-form .select-wrap::after {
content: "";
position: absolute;
right: 20px;
top: 50%;
width: 9px;
height: 9px;
margin-top: -7px;
border-right: 2px solid var(--grey-1);
border-bottom: 2px solid var(--grey-1);
transform: rotate(45deg);
pointer-events: none;
}
.waitlist-form input[type="email"] {
flex: 1 1 240px;
min-width: 0;
height: 58px;
background: var(--surface-raised);
border: 2px solid var(--line-2);
color: var(--white);
font-family: var(--font-sans);
font-size: 16px;
padding: 0 18px;
outline: none;
transition: border-color .12s ease;
border-radius: 0;
}
.waitlist-form input[type="email"]:focus { border-color: var(--flame); }
.waitlist-form input[type="email"]::placeholder { color: var(--grey-2); }
.waitlist-form button {
flex: 0 0 auto;
height: 58px;
padding: 0 30px;
background: var(--accent-cta);
color: var(--on-accent);
border: 2px solid var(--accent-cta);
font-family: var(--font-sans);
font-size: 14px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: background .12s ease, border-color .12s ease;
}
.waitlist-form button:hover { background: var(--accent-cta-hover); border-color: var(--accent-cta-hover); }
.waitlist-form input[aria-invalid="true"] { border-color: var(--flame); }
.form-error { margin: 12px 0 0; font-size: 13px; font-weight: 600; color: var(--flame-text); }
.waitlist-fine { margin: 16px 0 0; font-size: 13px; color: var(--grey-3); }
.waitlist-success {
background: var(--surface-card);
border: 1px solid var(--line-2);
border-top: 2px solid var(--flame);
padding: 26px;
display: flex;
align-items: center;
gap: 16px;
text-align: left;
}
.waitlist-success .check {
width: 42px;
height: 42px;
flex: none;
background: var(--flame);
color: var(--on-accent);
display: grid;
place-items: center;
font-size: 20px;
font-weight: 800;
}
.waitlist-success .success-title {
font-size: 16px;
font-weight: 800;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--white);
}
.waitlist-success .success-body { font-size: 14px; color: var(--grey-2); margin-top: 3px; }
.waitlist-success .success-body .email { color: var(--flame-text); font-weight: 600; }
[hidden] { display: none !important; }
/* ============ Waitlist modal ============ */
/* Holds the same form as the #waitlist section so the header/hero CTAs don't
skip the page. Uses native