/* =============================================================================
 turbolapper site - Brand Guidelines v2
 Three layers: Identity (ember) · Workspace (paper/graphite) · Confidence
 Hot brand, cool workspace. Light + dark themes.
 ============================================================================= */

/* - Theme tokens: Light (warm paper workspace) - */
:root,
[data-theme="light"] {
 color-scheme: light;

 /* Identity - ember (glows; never a confidence chip) */
 --ember: #ff5a1f;
 --ember-hot: #ffd37a;
 --ember-deep: #c2280f;
 --ember-tint: #ffe7d6;

 /* Workspace */
 --canvas: #faf8f4;
 --surface: #ffffff;
 --elevated: #f3efe7;
 --ink: #1a1d21;
 --ink-2: #5e6670;
 --line: #d8d2c6;

 /* Wordmark split (brand-v1): turbo = textPrimary, lapper = ember */
 --logo-turbo: #1a1d21;
 --logo-lapper: #ff5a1f;

 /* Graphite mass (major identity sections that stay dark on purpose) */
 --graphite: #0b0d10;
 --graphite-surface: #14181d;
 --graphite-elevated: #1c2128;
 --graphite-line: #262c33;
 --graphite-ink: #f4f1ea;
 --graphite-ink-2: #9aa0a8;

 /* Confidence (matte; never brand chrome) */
 --verified: #0b6e5f;
 --verified-bg: color-mix(in srgb, #0b6e5f 12%, #ffffff);
 --estimated: #b4690e;
 --estimated-bg: color-mix(in srgb, #b4690e 14%, #ffffff);
 --directional: #5b3a6e;
 --directional-bg: color-mix(in srgb, #5b3a6e 12%, #ffffff);
 --error: #8f3b2e;

 /* Header is always graphite — wordmark uses dark-ground colors */
 --header-bg: color-mix(in srgb, #0b0d10 92%, transparent);
 --header-solid: #0b0d10;
 --header-line: #262c33;
 --header-ink: #f4f1ea;
 --header-ink-2: #9aa0a8;
 --header-surface: #14181d;
 --header-logo-turbo: #f4f1ea;
 --header-logo-lapper: #ff6b24;
 --shadow: 0 12px 40px rgba(26, 29, 33, 0.08);
 --ember-glow: 0 0 28px color-mix(in srgb, var(--ember) 45%, transparent);
}

/* - Theme tokens: Dark (graphite workspace) - */
[data-theme="dark"] {
 color-scheme: dark;

 --ember: #ff6b24;
 --ember-hot: #ffdd8c;
 --ember-deep: #c2280f;
 --ember-tint: #2a1710;

 --canvas: #0b0d10;
 --surface: #14181d;
 --elevated: #1c2128;
 --ink: #f4f1ea;
 --ink-2: #9aa0a8;
 --line: #262c33;

 --logo-turbo: #f4f1ea;
 --logo-lapper: #ff6b24;

 --graphite: #050608;
 --graphite-surface: #0f1216;
 --graphite-elevated: #171b21;
 --graphite-line: #2a3038;
 --graphite-ink: #f4f1ea;
 --graphite-ink-2: #9aa0a8;

 --verified: #3fbfa6;
 --verified-bg: color-mix(in srgb, #3fbfa6 14%, #14181d);
 --estimated: #f0b35b;
 --estimated-bg: color-mix(in srgb, #f0b35b 14%, #14181d);
 --directional: #c69ade;
 --directional-bg: color-mix(in srgb, #c69ade 14%, #14181d);
 --error: #f07f72;

 --header-bg: color-mix(in srgb, #050608 92%, transparent);
 --header-solid: #050608;
 --header-line: #2a3038;
 --header-ink: #f4f1ea;
 --header-ink-2: #9aa0a8;
 --header-surface: #14181d;
 --header-logo-turbo: #f4f1ea;
 --header-logo-lapper: #ff6b24;
 --shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
 --ember-glow: 0 0 32px color-mix(in srgb, var(--ember) 40%, transparent);
}

/* System preference only when user has not chosen */
@media (prefers-color-scheme: dark) {
 :root:not([data-theme="light"]):not([data-theme="dark"]) {
 color-scheme: dark;
 --ember: #ff6b24;
 --ember-hot: #ffdd8c;
 --ember-deep: #c2280f;
 --ember-tint: #2a1710;
 --canvas: #0b0d10;
 --surface: #14181d;
 --elevated: #1c2128;
 --ink: #f4f1ea;
 --ink-2: #9aa0a8;
 --line: #262c33;
 --logo-turbo: #f4f1ea;
 --logo-lapper: #ff6b24;
 --graphite: #050608;
 --graphite-surface: #0f1216;
 --graphite-elevated: #171b21;
 --graphite-line: #2a3038;
 --graphite-ink: #f4f1ea;
 --graphite-ink-2: #9aa0a8;
 --verified: #3fbfa6;
 --verified-bg: color-mix(in srgb, #3fbfa6 14%, #14181d);
 --estimated: #f0b35b;
 --estimated-bg: color-mix(in srgb, #f0b35b 14%, #14181d);
 --directional: #c69ade;
 --directional-bg: color-mix(in srgb, #c69ade 14%, #14181d);
 --error: #f07f72;
 --header-bg: color-mix(in srgb, #050608 92%, transparent);
 --header-solid: #050608;
 --header-line: #2a3038;
 --header-ink: #f4f1ea;
 --header-ink-2: #9aa0a8;
 --header-surface: #14181d;
 --header-logo-turbo: #f4f1ea;
 --header-logo-lapper: #ff6b24;
 --shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
 --ember-glow: 0 0 32px color-mix(in srgb, var(--ember) 40%, transparent);
 }
}

:root {
 --max: 72rem;
 --prose: 40rem;
 --radius-sm: 6px;
 --radius: 10px;
 --radius-lg: 14px;
 --space-1: 4px;
 --space-2: 8px;
 --space-3: 12px;
 --space-4: 16px;
 --space-5: 24px;
 --space-6: 32px;
 --space-7: 48px;
 --font: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont,
 "Segoe UI", system-ui, sans-serif;
 --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
 "New York", Georgia, serif;
 --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
}

*,
*::before,
*::after {
 box-sizing: border-box;
}

html {
 scroll-behavior: smooth;
}

body {
 margin: 0;
 font-family: var(--font);
 font-size: 1.0625rem;
 line-height: 1.6;
 color: var(--ink);
 background: var(--canvas);
 -webkit-font-smoothing: antialiased;
 transition: background 0.2s ease, color 0.2s ease;
}

img {
 max-width: 100%;
 height: auto;
 display: block;
}

a {
 color: var(--ink);
 text-decoration-thickness: 1px;
 text-underline-offset: 0.15em;
}

a:hover {
 color: var(--ember);
}

:focus-visible {
 outline: 2px solid var(--ember);
 outline-offset: 3px;
}

/* - layout - */
.wrap {
 width: min(100% - 2.5rem, var(--max));
 margin-inline: auto;
}

.prose-width {
 max-width: var(--prose);
}

/* - Header (always graphite; wordmark uses dark-ground logo colors) - */
.site-header {
 position: sticky;
 top: 0;
 z-index: 50;
 background: var(--header-bg);
 backdrop-filter: blur(16px) saturate(1.15);
 border-bottom: 1px solid var(--header-line);
 box-shadow: 0 1px 0 color-mix(in srgb, var(--ember) 18%, transparent);
}

.site-header__inner {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1rem;
 min-height: 4.5rem;
 width: min(100% - 2.5rem, var(--max));
 margin-inline: auto;
}

.logo {
 display: inline-flex;
 align-items: center;
 gap: 0.55rem;
 text-decoration: none;
 color: inherit;
}

.logo:hover {
 color: inherit;
 text-decoration: none;
}

/* Icon (transparent drum+lock) + two-colour wordmark */
.logo-icon {
 display: block;
 width: 2.35rem;
 height: 2.35rem;
 flex-shrink: 0;
 object-fit: contain;
}

.logo-wordmark {
 display: inline-flex;
 align-items: baseline;
 font-family: var(--font);
 font-weight: 800;
 font-size: 1.2rem;
 letter-spacing: -0.04em;
 line-height: 1;
 white-space: nowrap;
 text-transform: lowercase;
}

.logo-wordmark__turbo {
 color: var(--logo-turbo);
}

.logo-wordmark__lapper {
 color: var(--logo-lapper);
}

/* Header: icon left of wordmark; dark-ground wordmark colors */
.logo--header {
 flex-direction: row;
 align-items: center;
 gap: 0.55rem;
}

.logo--header .logo-wordmark__turbo {
 color: var(--header-logo-turbo);
}

.logo--header .logo-wordmark__lapper {
 color: var(--header-logo-lapper);
}

.logo--header:hover .logo-wordmark__lapper {
 color: color-mix(in srgb, var(--header-logo-lapper) 88%, #fff);
}

.nav-main {
 display: none;
 align-items: center;
 gap: 1.25rem;
 font-size: 0.88rem;
}

.nav-main a {
 text-decoration: none;
 color: var(--header-ink-2);
 font-weight: 500;
}

.nav-main a:hover,
.nav-main a[aria-current="page"] {
 color: var(--header-ink);
}

.nav-main a[aria-current="page"] {
 box-shadow: inset 0 -2px 0 var(--ember);
}

.header-actions {
 display: flex;
 align-items: center;
 gap: 0.45rem;
}

/* Ghost buttons in header (if used) - no pill outline that flashes as a circle */
.site-header .btn-ghost {
 border-color: transparent;
 color: var(--header-ink-2);
 background: transparent;
 box-shadow: none;
}

.site-header .btn-ghost:hover {
 border-color: transparent;
 color: var(--header-ink);
 background: color-mix(in srgb, var(--header-ink) 8%, transparent);
}

.theme-toggle {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 2.4rem;
 height: 2.4rem;
 border: 1px solid var(--header-line);
 border-radius: var(--radius-sm);
 background: var(--header-surface);
 color: var(--header-ink);
 cursor: pointer;
 font-size: 1rem;
 line-height: 1;
 padding: 0;
}

.theme-toggle:hover {
 border-color: var(--ember);
 background: color-mix(in srgb, var(--ember) 14%, var(--header-surface));
 color: var(--header-ink);
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
 display: none;
}

/* Light UI → sun (currently light). Dark UI → moon (currently dark). */
html[data-theme="light"] .theme-toggle .icon-sun {
 display: block;
}
html[data-theme="dark"] .theme-toggle .icon-moon {
 display: block;
}

.nav-toggle {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 2.4rem;
 height: 2.4rem;
 border: 1px solid var(--header-line);
 border-radius: var(--radius-sm);
 background: var(--header-surface);
 color: var(--header-ink);
 cursor: pointer;
 font-size: 1.05rem;
}

.mobile-nav {
 display: none;
 border-top: 1px solid var(--header-line);
 background: var(--header-solid);
 padding: 0.75rem 1.25rem 1rem;
}

.mobile-nav.is-open {
 display: block;
}

.mobile-nav a {
 display: block;
 padding: 0.65rem 0.25rem;
 text-decoration: none;
 color: var(--header-ink);
 font-weight: 500;
 border-bottom: 1px solid var(--header-line);
}

.mobile-nav a:hover {
 color: var(--ember);
}

@media (min-width: 960px) {
 .nav-main {
 display: flex;
 }
 .nav-toggle {
 display: none;
 }
 .mobile-nav {
 display: none !important;
 }
}

/* - Buttons (ember = intent only) - */
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 0.4rem;
 padding: 0.62rem 1.1rem;
 border-radius: 999px;
 font-size: 0.9rem;
 font-weight: 600;
 text-decoration: none;
 border: 1px solid transparent;
 cursor: pointer;
 line-height: 1.2;
 transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.btn-primary {
 background: linear-gradient(
 180deg,
 color-mix(in srgb, var(--ember-hot) 32%, var(--ember)) 0%,
 var(--ember) 45%,
 var(--ember-deep) 100%
 );
 color: #fff;
 box-shadow: 0 1px 0 color-mix(in srgb, var(--ember-deep) 50%, transparent),
 0 0 16px color-mix(in srgb, var(--ember) 30%, transparent);
}

.btn-primary:hover {
 background: linear-gradient(180deg, var(--ember) 0%, var(--ember-deep) 100%);
 color: #fff;
 box-shadow: var(--ember-glow);
}

.btn-secondary {
 background: var(--surface);
 border-color: var(--line);
 color: var(--ink);
}

.btn-secondary:hover {
 border-color: var(--ember);
 color: var(--ink);
 background: var(--ember-tint);
}

.btn-ghost {
 background: transparent;
 border-color: var(--line);
 color: var(--ink-2);
}

.btn-ghost:hover {
 border-color: var(--ink-2);
 color: var(--ink);
}

/* On graphite sections, ghost/secondary invert */
.band-graphite .btn-secondary {
 background: transparent;
 border-color: var(--graphite-line);
 color: var(--graphite-ink);
}

.band-graphite .btn-secondary:hover {
 border-color: var(--ember);
 background: color-mix(in srgb, var(--ember) 12%, transparent);
 color: var(--graphite-ink);
}

.band-graphite .btn-ghost {
 border-color: var(--graphite-line);
 color: var(--graphite-ink-2);
}

.band-graphite .btn-ghost:hover {
 color: var(--graphite-ink);
 border-color: var(--graphite-ink-2);
}

.btn-lg {
 padding: 0.85rem 1.35rem;
 font-size: 1rem;
}

/* - Footer - */
.site-footer {
 margin-top: 0;
 border-top: 1px solid var(--line);
 background: var(--elevated);
 padding: 2.75rem 0 2rem;
 font-size: 0.9rem;
 color: var(--ink-2);
}

/* Article YouTube watch card */
.yt-watch-card {
  display: grid;
  gap: 1rem;
  margin: 0 0 1.75rem;
  padding: 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--elevated);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent);
}

@media (min-width: 640px) {
  .yt-watch-card {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
    gap: 1.25rem;
  }
}

.yt-watch-card__media {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #0b0d10;
}

.yt-watch-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.yt-watch-card__play {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--ember) 92%, #000);
  color: #fff;
  font-size: 0.95rem;
  box-shadow: 0 0 0 1px color-mix(in srgb, #fff 20%, transparent), var(--ember-glow);
}

.yt-watch-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.15rem 0.35rem 0.35rem;
}

.yt-watch-card__kicker {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ember);
  font-weight: 700;
}

.yt-watch-card__label {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.4;
  color: var(--ink);
  font-weight: 600;
}

.yt-watch-card .btn {
  align-self: flex-start;
  margin-top: 0.25rem;
}

/* Footer: 3 columns — brand | product links | company links */
.site-footer__grid {
 display: grid;
 gap: 2rem 2.5rem;
 grid-template-columns: 1fr;
 align-items: start;
}

@media (min-width: 720px) {
 .site-footer__grid {
  grid-template-columns: 1.5fr 1fr 1fr;
 }
}

.site-footer__brand {
 max-width: 22rem;
}

.site-footer a {
 color: var(--ink);
 text-decoration: none;
}

.site-footer a:hover {
 color: var(--ember);
}

.site-footer h3 {
 margin: 0 0 0.75rem;
 font-size: 0.72rem;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--ink-2);
 font-weight: 650;
}

.site-footer ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

.site-footer li {
 margin-bottom: 0.55rem;
}

.site-footer li:last-child {
 margin-bottom: 0;
}

.site-footer__col a {
 font-weight: 600;
 font-size: 0.95rem;
}

.footer-tag {
 font-family: var(--serif);
 font-style: italic;
 color: var(--ink);
 margin: 0.65rem 0 0;
 font-size: 1.05rem;
 line-height: 1.35;
}

.footer-bottom {
 margin-top: 2rem;
 padding-top: 1.25rem;
 border-top: 1px solid var(--line);
 display: flex;
 flex-wrap: wrap;
 gap: 0.75rem 1.5rem;
 justify-content: space-between;
 align-items: center;
 font-size: 0.85rem;
}

.footer-credit a {
 color: var(--ink-2);
 text-decoration: none;
 border-bottom: 1px solid color-mix(in srgb, var(--ember) 40%, transparent);
}

.footer-credit a:hover {
 color: var(--ember);
}

.green-words {
 letter-spacing: 0.06em;
 font-size: 0.85rem;
 font-family: var(--mono);
 color: var(--ink-2);
 font-weight: 500;
}

/* - Type - */
.eyebrow {
 font-family: var(--mono);
 font-size: 0.72rem;
 font-weight: 650;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: var(--ember);
 margin: 0 0 0.85rem;
}

h1,
.h1 {
 font-family: var(--serif);
 font-weight: 700;
 letter-spacing: -0.03em;
 line-height: 1.1;
 margin: 0 0 1rem;
 font-size: clamp(2.15rem, 5vw, 3.4rem);
}

h2,
.h2 {
 font-family: var(--serif);
 font-weight: 700;
 letter-spacing: -0.025em;
 line-height: 1.18;
 margin: 0 0 0.85rem;
 font-size: clamp(1.5rem, 2.8vw, 2.05rem);
}

h3,
.h3 {
 font-size: 1.08rem;
 font-weight: 650;
 letter-spacing: -0.015em;
 margin: 0 0 0.5rem;
 line-height: 1.3;
}

.lede {
 font-size: 1.2rem;
 color: var(--ink-2);
 line-height: 1.55;
 max-width: 38rem;
 margin: 0 0 1.5rem;
}

.muted {
 color: var(--ink-2);
}

/* =============================================================================
 MAJOR SECTION BANDS - the site’s visual rhythm
 ============================================================================= */

.section {
 padding: clamp(3.25rem, 6vw, 5rem) 0;
 position: relative;
}

.section-tight {
 padding: 1.35rem 0;
}

/* Homepage: product + Why now share canvas — don't stack full section padding twice */
.section--product {
 padding-top: clamp(1.75rem, 3.5vw, 2.5rem);
 padding-bottom: 0.75rem;
}

.section--after-product {
 padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* Default workspace band */
.band-canvas {
 background: var(--canvas);
 color: var(--ink);
}

.band-elevated {
 background: var(--elevated);
 color: var(--ink);
 border-block: 1px solid var(--line);
}

.band-surface {
 background: var(--surface);
 color: var(--ink);
 border-block: 1px solid var(--line);
}

/* Graphite mass - powerful / sealed (brand promise: not light SaaS) */
.band-graphite {
 background: var(--graphite);
 color: var(--graphite-ink);
 border-block: 1px solid var(--graphite-line);
}

.band-graphite .eyebrow {
 color: var(--ember);
}

.band-graphite h1,
.band-graphite h2,
.band-graphite h3,
.band-graphite .h1,
.band-graphite .h2 {
 color: var(--graphite-ink);
}

.band-graphite .lede,
.band-graphite .muted,
.band-graphite p {
 color: var(--graphite-ink-2);
}

.band-graphite strong {
 color: var(--graphite-ink);
}

.band-graphite a:not(.btn) {
 color: var(--graphite-ink);
}

.band-graphite a:not(.btn):hover {
 color: var(--ember);
}

/* Section label rail (works in .section-head and .page-band__head) */
.section-head {
 margin-bottom: 1.75rem;
 max-width: 40rem;
}

.section-kicker {
 display: inline-flex;
 align-items: center;
 gap: 0.5rem;
 font-family: var(--mono);
 font-size: 0.72rem;
 font-weight: 600;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--ink-2);
 margin: 0 0 0.75rem;
 line-height: 1.3;
}

.band-graphite .section-kicker {
 color: var(--graphite-ink-2);
}

.section-kicker::before {
 content: "";
 display: inline-block;
 flex-shrink: 0;
 width: 1.25rem;
 height: 2px;
 background: var(--ember);
 box-shadow: 0 0 8px var(--ember);
}

/* - Hero (theme-aware canvas + ember heat) - */
.hero {
 position: relative;
 overflow: hidden;
 padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
 background:
 radial-gradient(ellipse 80% 60% at 85% 10%, color-mix(in srgb, var(--ember) 18%, transparent), transparent 55%),
 radial-gradient(ellipse 50% 40% at 10% 90%, color-mix(in srgb, var(--ember-deep) 12%, transparent), transparent 50%),
 linear-gradient(165deg, var(--surface) 0%, var(--canvas) 55%, var(--elevated) 100%);
 color: var(--ink);
 border-bottom: 1px solid var(--line);
}

.hero::after {
 content: "";
 position: absolute;
 inset: auto 0 0 0;
 height: 1px;
 background: linear-gradient(90deg, transparent, var(--ember), transparent);
 opacity: 0.55;
 box-shadow: 0 0 20px var(--ember);
}

.hero .eyebrow {
 color: var(--ember);
}

/* Hero head (legacy / non-stack pages) */
.hero-head {
 width: 100%;
 margin: 0 0 1.75rem;
}

/* Apple-style stack: eyebrow → H1 → CTA → product → lede */
.hero--stack .hero-intro {
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 max-width: 46rem;
 margin: 0 auto 1.75rem;
 gap: 1rem;
}

.hero--stack .hero-intro .eyebrow {
 margin: 0;
}

.hero--stack .hero-title {
 text-align: center;
 text-wrap: balance;
}

.hero--stack .hero-actions {
 justify-content: center;
 margin-top: 0.15rem;
}

.hero--stack .hero-visual {
 width: 100%;
 max-width: min(100%, 68rem);
 margin: 0 auto;
}

/* Support copy under the product (Apple “introducing…” band) */
.hero--stack .hero-after__lede {
 max-width: 38rem;
 margin: 1.85rem auto 0;
 text-align: center;
 text-wrap: pretty;
}

.hero h1,
.hero .hero-title {
 color: var(--ink);
 max-width: none !important;
 width: 100%;
 margin: 0;
 display: block;
}

.hero .lede {
 color: var(--ink-2);
 max-width: none;
 margin: 0;
 font-size: 1.02rem;
 line-height: 1.55;
}

/* Hero intro: short paragraphs with air (legacy multi-para stack) */
.hero-lede-stack {
 display: flex;
 flex-direction: column;
 gap: 0.9rem;
 max-width: 36rem;
}

.hero-lede-stack .lede {
 margin: 0;
}

.hero-lede-stack .lede--close {
 color: var(--ink-2);
}

/* Default hero grid (other layouts / fallbacks) */
.hero-grid {
 display: grid;
 gap: 2rem;
 align-items: start;
}

.hero-grid--split {
 grid-template-columns: 1fr;
}

@media (min-width: 900px) {
 .hero-grid {
 grid-template-columns: 1.25fr 1fr;
 gap: 2.5rem;
 align-items: center;
 }

 .hero-grid--split {
 grid-template-columns: 1fr 1.15fr;
 gap: 1.75rem 2rem;
 align-items: start;
 }
}

.hero-copy {
 min-width: 0;
 display: flex;
 flex-direction: column;
 gap: 1.25rem;
}

.hero-visual {
 min-width: 0;
 width: 100%;
}

/* Product story reel (legacy path) */
.hero-visual .hero-reel {
 margin: 0;
 width: 100%;
 height: 100%;
 align-items: stretch;
 text-align: left;
}

.hero-visual .hero-reel .reel-shell {
 width: 100%;
 max-width: none;
 margin: 0;
 height: 100%;
 min-height: clamp(280px, 36vw, 480px);
 max-height: none;
 aspect-ratio: 16 / 10;
 border-color: var(--graphite-line);
 box-shadow: var(--shadow), var(--ember-glow);
 background: #0b0d10;
}

.hero-visual .hero-reel .reel-frame {
 background: #0b0d10;
}

@media (max-width: 899px) {
 .hero-visual .hero-reel .reel-shell {
 aspect-ratio: 16 / 10;
 min-height: 260px;
 max-height: 440px;
 }
}

@media (max-width: 639px) {
 .hero-visual .hero-reel .reel-shell {
 aspect-ratio: 4 / 5;
 min-height: 340px;
 max-height: 520px;
 }

 .hero--stack .hero-intro {
 margin-bottom: 1.35rem;
 gap: 0.85rem;
 }

 .hero--stack .hero-after__lede {
 margin-top: 1.35rem;
 }
}

.hero-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 0.65rem;
 margin-top: 0;
}

.trust-line {
 margin-top: 1.25rem;
 margin-bottom: 0;
 font-size: 0.95rem;
 color: var(--graphite-ink-2);
 max-width: 34rem;
}

.trust-line strong {
 display: block;
 margin-top: 0.4rem;
 font-family: var(--mono);
 font-size: 0.85rem;
 font-weight: 500;
 letter-spacing: 0.04em;
 color: var(--graphite-ink);
}

/* Hero receipt card - brand component language */
.hero-receipt {
 background: color-mix(in srgb, var(--surface) 92%, transparent);
 border: 1px solid var(--line);
 border-radius: var(--radius-lg);
 padding: 1.35rem 1.4rem;
 box-shadow: var(--shadow), var(--ember-glow);
 backdrop-filter: blur(8px);
}

.hero-receipt .receipt-claim {
 font-family: var(--serif);
 font-size: 1.15rem;
 line-height: 1.35;
 color: var(--ink);
 margin: 0 0 1rem;
}

.hero-receipt .receipt-meta {
 font-family: var(--mono);
 font-size: 0.72rem;
 color: var(--ink-2);
 line-height: 1.5;
 border-top: 1px solid var(--line);
 padding-top: 0.85rem;
}

.hero-receipt .receipt-row {
 display: flex;
 justify-content: space-between;
 gap: 1rem;
 margin-bottom: 0.35rem;
}

/* - Pedigree bar - */
.pedigree {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: center;
 gap: 0.75rem 1.75rem;
 font-size: 0.92rem;
 color: var(--ink-2);
 text-align: center;
}

.pedigree strong {
 color: var(--ink);
 font-weight: 600;
 font-size: 0.8rem;
 letter-spacing: 0.06em;
 text-transform: uppercase;
}

.pedigree-logos {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 0.5rem 1.5rem;
 font-weight: 650;
 color: var(--ink);
 letter-spacing: -0.02em;
}

/* - Grids - */
.grid-2 {
 display: grid;
 gap: 1.25rem;
}

@media (min-width: 800px) {
 .grid-2 {
 grid-template-columns: 1fr 1fr;
 gap: 1.5rem;
 align-items: stretch;
 }
}

.grid-3 {
 display: grid;
 gap: 1rem;
}

@media (min-width: 720px) {
 .grid-3 {
 grid-template-columns: repeat(3, 1fr);
 }
}

.grid-4 {
 display: grid;
 gap: 1rem;
}

@media (min-width: 900px) {
 .grid-4 {
 grid-template-columns: repeat(4, 1fr);
 }
}

/* - Cards - */
.card {
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: var(--radius-lg);
 padding: 1.4rem 1.45rem;
 box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent);
}

.band-elevated .card {
 background: var(--surface);
}

.band-graphite .card {
 background: var(--graphite-surface);
 border-color: var(--graphite-line);
 color: var(--graphite-ink);
 box-shadow: none;
}

.band-graphite .card .muted {
 color: var(--graphite-ink-2);
}

.card h3 {
 margin-top: 0.2rem;
}

.card p:last-child {
 margin-bottom: 0;
}

.card-quote {
 font-family: var(--serif);
 font-style: italic;
 color: var(--ink);
 margin-top: 0.9rem;
 font-size: 1.05rem;
 border-left: 2px solid var(--ember);
 padding-left: 0.85rem;
}

.band-graphite .card-quote {
 color: var(--graphite-ink);
}

.card-accent {
 position: relative;
 overflow: hidden;
}

.card-accent::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 2px;
 background: linear-gradient(90deg, var(--ember), var(--ember-hot));
 box-shadow: 0 0 12px var(--ember);
}

.wedge-num {
 font-family: var(--mono);
 font-size: 0.7rem;
 color: var(--ember);
 font-weight: 700;
 letter-spacing: 0.08em;
}

/* Tax / tension cards */
.tax-card {
 display: flex;
 gap: 1rem;
 align-items: flex-start;
}

.tax-num {
 flex-shrink: 0;
 width: 2.25rem;
 height: 2.25rem;
 border-radius: var(--radius-sm);
 display: grid;
 place-items: center;
 font-family: var(--mono);
 font-weight: 700;
 font-size: 0.85rem;
 background: var(--ember-tint);
 color: var(--ember-deep);
 border: 1px solid color-mix(in srgb, var(--ember) 25%, var(--line));
}

[data-theme="dark"] .tax-num {
 color: var(--ember);
}

/* - Stats / proof - */
.stat-row {
 display: grid;
 gap: 1rem;
}

@media (min-width: 720px) {
 .stat-row {
 grid-template-columns: repeat(3, 1fr);
 }
}

.stat {
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: var(--radius-lg);
 padding: 1.4rem 1.4rem 1.25rem;
 position: relative;
}

.band-graphite .stat {
 background: var(--graphite-elevated);
 border-color: var(--graphite-line);
}

.stat-value {
 font-family: var(--mono);
 font-size: clamp(1.85rem, 3vw, 2.25rem);
 font-weight: 700;
 letter-spacing: -0.04em;
 color: var(--ink);
 font-variant-numeric: tabular-nums;
 line-height: 1.1;
}

.band-graphite .stat-value {
 color: var(--graphite-ink);
 text-shadow: 0 0 24px color-mix(in srgb, var(--ember) 30%, transparent);
}

.stat-label {
 margin-top: 0.55rem;
 font-size: 0.95rem;
 color: var(--ink-2);
 line-height: 1.45;
}

.band-graphite .stat-label {
 color: var(--graphite-ink-2);
}

.stat-source {
 margin-top: 0.85rem;
 padding-top: 0.75rem;
 border-top: 1px solid var(--line);
 font-family: var(--mono);
 font-size: 0.7rem;
 color: var(--ink-2);
 letter-spacing: 0.02em;
}

.band-graphite .stat-source {
 border-color: var(--graphite-line);
 color: var(--graphite-ink-2);
}

/* - Steps - */
.steps {
 display: grid;
 gap: 0.85rem;
 counter-reset: step;
}

@media (min-width: 900px) {
 .steps {
 grid-template-columns: repeat(4, 1fr);
 }
}

.step {
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 padding: 1.2rem 1.2rem 1.3rem;
 counter-increment: step;
 position: relative;
}

.band-graphite .step {
 background: var(--graphite-surface);
 border-color: var(--graphite-line);
}

.step::before {
 content: counter(step, decimal-leading-zero);
 font-family: var(--mono);
 font-size: 0.72rem;
 color: var(--ember);
 font-weight: 700;
 letter-spacing: 0.06em;
 display: block;
 margin-bottom: 0.5rem;
}

/* - VS table - */
.vs-box {
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: var(--radius-lg);
 overflow: hidden;
}

.band-graphite .vs-box {
 background: var(--graphite-surface);
 border-color: var(--graphite-line);
}

.vs-box table {
 width: 100%;
 border-collapse: collapse;
 font-size: 0.9rem;
 margin: 0;
}

.vs-box th,
.vs-box td {
 padding: 0.75rem 1rem;
 border-bottom: 1px solid var(--line);
 text-align: left;
 vertical-align: top;
}

.band-graphite .vs-box th,
.band-graphite .vs-box td {
 border-color: var(--graphite-line);
 color: var(--graphite-ink-2);
}

.vs-box tr:last-child td {
 border-bottom: none;
}

.vs-box th {
 background: var(--elevated);
 font-size: 0.7rem;
 text-transform: uppercase;
 letter-spacing: 0.07em;
 color: var(--ink-2);
 font-weight: 650;
}

.band-graphite .vs-box th {
 background: var(--graphite-elevated);
 color: var(--graphite-ink-2);
}

.vs-box td:last-child {
 font-weight: 600;
 color: var(--ink);
}

.band-graphite .vs-box td:last-child {
 color: var(--graphite-ink);
}

/* - FAQ - */
.faq details {
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 padding: 0.95rem 1.15rem;
 margin-bottom: 0.55rem;
}

.faq summary {
 font-weight: 600;
 cursor: pointer;
 list-style: none;
}

.faq summary::-webkit-details-marker {
 display: none;
}

.faq details[open] summary {
 margin-bottom: 0.5rem;
 color: var(--ink);
}

.faq p {
 margin: 0;
 color: var(--ink-2);
 font-size: 0.98rem;
}

/* - CTA band - */
.cta-band {
 position: relative;
 overflow: hidden;
 background:
 radial-gradient(ellipse 70% 80% at 100% 0%, color-mix(in srgb, var(--ember) 28%, transparent), transparent 55%),
 linear-gradient(145deg, #14181d 0%, #0b0d10 100%);
 color: var(--graphite-ink);
 border: 1px solid var(--graphite-line);
 border-radius: var(--radius-lg);
 padding: clamp(1.75rem, 4vw, 2.5rem);
 box-shadow: var(--ember-glow);
}

.cta-band h2 {
 color: var(--graphite-ink);
 margin-bottom: 0.5rem;
}

.cta-band p {
 color: var(--graphite-ink-2);
 margin: 0 0 1.25rem;
 max-width: 36rem;
}

.cta-band .btn-primary {
 box-shadow: var(--ember-glow);
}

.cta-band .btn-secondary {
 background: transparent;
 border-color: var(--graphite-line);
 color: var(--graphite-ink);
}

.cta-band .btn-secondary:hover {
 border-color: var(--ember);
 color: var(--graphite-ink);
 background: color-mix(in srgb, var(--ember) 12%, transparent);
}

/* - Article cards - */
.article-cards {
 display: grid;
 gap: 1rem;
}

@media (min-width: 720px) {
 .article-cards {
 grid-template-columns: repeat(2, 1fr);
 }
}

.article-card {
 display: block;
 text-decoration: none;
 color: inherit;
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: var(--radius-lg);
 padding: 1.4rem 1.45rem;
 transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.article-card:hover {
 border-color: color-mix(in srgb, var(--ember) 50%, var(--line));
 box-shadow: var(--shadow);
 transform: translateY(-2px);
 color: inherit;
}

.article-card .eyebrow {
 margin-bottom: 0.45rem;
}

.band-graphite .article-card {
 background: var(--graphite-surface);
 border-color: var(--graphite-line);
 color: var(--graphite-ink);
}

.band-graphite .article-card h3 {
 color: var(--graphite-ink);
}

.band-graphite .article-card .muted {
 color: var(--graphite-ink-2);
}

.band-graphite .article-card:hover {
 border-color: color-mix(in srgb, var(--ember) 45%, var(--graphite-line));
}

.list-plain {
 list-style: none;
 padding: 0;
 margin: 0;
}

.list-plain li {
 padding: 0.65rem 0;
 border-bottom: 1px solid var(--line);
 display: flex;
 gap: 0.85rem;
 align-items: flex-start;
}

.list-plain li:last-child {
 border-bottom: none;
}

.check {
 color: var(--verified);
 font-weight: 700;
 flex-shrink: 0;
 font-family: var(--mono);
 font-size: 0.85rem;
}

.benchmark-callout {
 display: flex;
 flex-wrap: wrap;
 gap: 1.5rem 2.5rem;
 align-items: baseline;
 background: var(--elevated);
 border: 1px solid var(--line);
 border-radius: var(--radius-lg);
 padding: 1.5rem 1.6rem;
}

.benchmark-callout .big {
 font-family: var(--mono);
 font-size: clamp(2.2rem, 5vw, 3rem);
 font-weight: 700;
 letter-spacing: -0.04em;
 line-height: 1;
 color: var(--ink);
 text-shadow: 0 0 20px color-mix(in srgb, var(--ember) 25%, transparent);
}

.benchmark-callout .big small {
 font-size: 0.45em;
 color: var(--ink-2);
 font-weight: 600;
}

/* - Page template - */
.page-hero {
 padding: 2.75rem 0 1.5rem;
 background: var(--elevated);
 border-bottom: 1px solid var(--line);
}

.page-body {
 padding: 2.25rem 0 3.5rem;
 background: var(--canvas);
}

/* Download (and other banded pages): body is only a shell for full-bleed stacks */
.page-body:has(.page-stack) {
  padding-top: 0;
  padding-bottom: 0;
  overflow-x: clip;
}

.page-body:has(.page-stack) > .wrap {
  width: 100%;
  max-width: none;
  padding: 0;
}

.page-body .content > *:first-child {
 margin-top: 0;
}

.content h2 {
 margin-top: 2.25rem;
}

.content h3 {
 margin-top: 1.75rem;
}

.content ul,
.content ol {
 padding-left: 1.25rem;
}

.content li {
 margin-bottom: 0.4rem;
}

.content hr {
 border: none;
 border-top: 1px solid var(--line);
 margin: 2rem 0;
}

.content table {
 width: 100%;
 border-collapse: collapse;
 font-size: 0.95rem;
 margin: 1.25rem 0;
}

.content th,
.content td {
 text-align: left;
 padding: 0.55rem 0.65rem;
 border-bottom: 1px solid var(--line);
 vertical-align: top;
}

.content th {
 font-size: 0.72rem;
 text-transform: uppercase;
 letter-spacing: 0.06em;
 color: var(--ink-2);
 font-weight: 650;
}

.content pre {
 background: #14181d;
 color: #f3ede6;
 padding: 1rem 1.1rem;
 border-radius: var(--radius);
 overflow-x: auto;
 font-size: 0.85rem;
}

.content code {
 font-family: var(--mono);
 font-size: 0.88em;
}

.content :not(pre) > code {
 background: var(--elevated);
 padding: 0.12em 0.35em;
 border-radius: 4px;
}

/* - Article - */
.article-shell {
 background: var(--canvas);
 min-height: 50vh;
}

.article-layout {
 display: grid;
 gap: 2rem;
 padding: 2.5rem 0 3.5rem;
}

@media (min-width: 960px) {
 .article-layout {
 grid-template-columns: minmax(0, 1fr) 17.5rem;
 gap: 2.5rem;
 align-items: start;
 }
}

.article-meta {
 display: flex;
 flex-wrap: wrap;
 gap: 0.5rem 1rem;
 font-size: 0.82rem;
 color: var(--ink-2);
 margin-bottom: 1.35rem;
 font-family: var(--mono);
}

.article-main h1 {
 font-size: clamp(1.9rem, 3.5vw, 2.65rem);
}

.right-rail {
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: var(--radius-lg);
 padding: 1.3rem 1.35rem;
 box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent);
}

@media (min-width: 960px) {
 .right-rail {
 position: sticky;
 top: 5rem;
 }
}

.right-rail h3 {
 font-size: 0.7rem;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--ink-2);
 margin: 0 0 0.75rem;
 font-weight: 650;
 font-family: var(--mono);
}

.right-rail section + section {
 margin-top: 1.35rem;
 padding-top: 1.25rem;
 border-top: 1px solid var(--line);
}

.right-rail ul {
 margin: 0;
 padding: 0;
 list-style: none;
}

.right-rail li {
 margin-bottom: 0.55rem;
 font-size: 0.92rem;
}

.claim-list li {
 padding-left: 0.85rem;
 border-left: 2px solid var(--ember);
 margin-bottom: 0.65rem;
 font-size: 0.9rem;
 color: var(--ink-2);
}

/* - Confidence chips (matte; not ember) - */
.chip {
 display: inline-block;
 font-family: var(--mono);
 font-size: 0.68rem;
 font-weight: 650;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 padding: 0.2rem 0.45rem;
 border-radius: 4px;
 vertical-align: middle;
}

.chip-verified {
 background: var(--verified-bg);
 color: var(--verified);
}

.chip-estimated {
 background: var(--estimated-bg);
 color: var(--estimated);
}

.chip-directional {
 background: var(--directional-bg);
 color: var(--directional);
}

.sr-only {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 border: 0;
}

/* Hide Discord label on very small screens in header to reduce clutter */
@media (max-width: 480px) {
 .header-actions .btn-ghost {
 display: none;
 }
}

/* Header logo sizing */
@media (min-width: 960px) {
 .logo--header .logo-icon {
 width: 2.55rem;
 height: 2.55rem;
 }

 .logo--header .logo-wordmark {
 font-size: 1.35rem;
 }
}

/* Footer: icon stacked / centered above wordmark (theme-aware colors) */
.logo--footer {
 display: inline-flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 0.55rem;
 text-align: center;
 padding: 0;
 background: transparent;
 border: none;
 box-shadow: none;
}

.logo-icon--footer {
 width: 3.25rem;
 height: 3.25rem;
}

.logo--footer .logo-wordmark {
 font-size: 1.15rem;
}

.logo--footer .logo-wordmark__turbo {
 color: var(--logo-turbo);
}

.logo--footer .logo-wordmark__lapper {
 color: var(--logo-lapper);
}

.site-footer__brand {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
}

.site-footer__brand .footer-tag {
 text-align: left;
}

/* Hero charts use theme ink */
.hero .chart-label,
.hero .chart-caption,
.hero .chart-value {
 fill: var(--ink-2);
 font-family: var(--mono);
 font-size: 10px;
}

.hero .chart-value {
 fill: var(--ink);
 font-weight: 700;
 font-size: 12px;
}

.hero .bar-ember {
 fill: var(--ember);
}

.hero .bar-muted {
 fill: color-mix(in srgb, var(--ink) 28%, var(--canvas));
}

.hero .bar-muted-2 {
 fill: color-mix(in srgb, var(--ink) 18%, var(--canvas));
}

.hero .bar-muted-3 {
 fill: color-mix(in srgb, var(--ink) 12%, var(--canvas));
}

.mini-chart {
 margin: 0 0 0.85rem;
}

.mini-chart svg {
 width: 100%;
 height: auto;
 display: block;
}

.hero-visual {
 display: flex;
 flex-direction: column;
 gap: 1rem;
}

/* Hero bar animation (retail demo pattern · no third-party labels) */
.hero-anim__q {
 font-family: var(--serif);
 font-size: 1.05rem;
 line-height: 1.35;
 color: var(--graphite-ink);
 margin: 0 0 1rem;
}

.hero-anim__bars {
 display: flex;
 flex-direction: column;
 gap: 0.65rem;
 margin: 0 0 1rem;
}

.hero-anim__bar {
 display: grid;
 grid-template-columns: 5.5rem 1fr 2.5rem;
 gap: 0.55rem;
 align-items: center;
}

.hero-anim__label {
 font-family: var(--mono);
 font-size: 0.68rem;
 letter-spacing: 0.04em;
 color: var(--graphite-ink-2);
}

.hero-anim__track {
 height: 0.55rem;
 border-radius: 999px;
 background: color-mix(in srgb, var(--graphite-ink) 12%, transparent);
 overflow: hidden;
}

.hero-anim__fill {
 display: block;
 height: 100%;
 width: 0;
 border-radius: 999px;
 background: color-mix(in srgb, var(--graphite-ink) 28%, transparent);
 animation: hero-bar-grow 1.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-anim__bar--hot .hero-anim__fill {
 background: linear-gradient(90deg, var(--ember-deep), var(--ember), var(--ember-hot));
 box-shadow: 0 0 12px color-mix(in srgb, var(--ember) 45%, transparent);
}

.hero-anim__bar:nth-child(1) .hero-anim__fill { animation-delay: 0.1s; }
.hero-anim__bar:nth-child(2) .hero-anim__fill { animation-delay: 0.28s; }
.hero-anim__bar:nth-child(3) .hero-anim__fill { animation-delay: 0.46s; }
.hero-anim__bar:nth-child(4) .hero-anim__fill { animation-delay: 0.64s; }

.hero-anim__fill {
 width: var(--w, 50%);
 animation-name: hero-bar-grow;
}

@keyframes hero-bar-grow {
 from { width: 0; opacity: 0.4; }
 to { width: var(--w, 50%); opacity: 1; }
}

.hero-anim__val {
 font-family: var(--mono);
 font-size: 0.72rem;
 font-weight: 700;
 text-align: right;
 color: var(--graphite-ink);
 font-variant-numeric: tabular-nums;
}

/* Technology CSS benchmark illustration */
.bench-css-chart__plot {
 display: grid;
 grid-template-columns: 2.5rem 1fr;
 gap: 0.75rem 0.85rem;
 align-items: stretch;
 margin: 0.5rem 0 0.75rem;
}

.bench-css-chart__y {
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 font-family: var(--mono);
 font-size: 0.65rem;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: var(--ink-2);
 padding: 0.25rem 0 1.25rem;
}

.bench-css-chart__series {
 display: flex;
 flex-direction: column;
 gap: 0.85rem;
}

.bench-css-chart__row {
 display: grid;
 grid-template-columns: 9.5rem 1fr;
 gap: 0.75rem;
 align-items: center;
}

.bench-css-chart__name {
 font-size: 0.88rem;
 font-weight: 600;
 color: var(--ink);
}

.bench-css-chart__track {
 height: 0.7rem;
 border-radius: 999px;
 background: var(--canvas);
 border: 1px solid var(--line);
 overflow: hidden;
}

.bench-css-chart__fill {
 display: block;
 height: 100%;
 width: var(--end, 50%);
 border-radius: 999px;
}

.bench-css-chart__fill--warn {
 background: linear-gradient(90deg, color-mix(in srgb, var(--warn, #c45c26) 70%, #e8a87c), #d97706);
}

.bench-css-chart__fill--slate {
 background: color-mix(in srgb, var(--ink-2) 55%, var(--line));
}

.bench-css-chart__fill--ember {
 background: linear-gradient(90deg, var(--ember-deep), var(--ember), var(--ember-hot));
 box-shadow: 0 0 10px color-mix(in srgb, var(--ember) 35%, transparent);
}

.bench-css-chart__x {
 grid-column: 2;
 display: flex;
 justify-content: space-between;
 font-family: var(--mono);
 font-size: 0.65rem;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: var(--ink-2);
}

.price-card__annual,
.price-card__note {
 margin: 0.35rem 0 0;
 font-size: 0.84rem;
 color: var(--ink-2);
 line-height: 1.35;
}

.price-card__note[hidden],
.price-card__meta[hidden] {
 display: none;
}

/* Annual meta: struck monthly + save badge on one clean row */
.price-card__meta {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 0.45rem 0.55rem;
 margin: 0.55rem 0 0;
 min-height: 1.5rem;
}

.price-card__was {
 display: inline-flex;
 align-items: baseline;
 gap: 0.25rem;
 font-family: var(--mono);
 font-size: 0.88rem;
 font-weight: 500;
 color: var(--ink-2);
 opacity: 0.9;
 text-decoration: line-through;
 text-decoration-thickness: 1px;
 text-decoration-color: color-mix(in srgb, var(--ink-2) 70%, transparent);
}

.price-card__save {
 display: inline-flex;
 align-items: center;
 font-family: var(--mono);
 font-size: 0.65rem;
 letter-spacing: 0.05em;
 text-transform: uppercase;
 color: var(--ember-deep);
 font-weight: 700;
 padding: 0.18rem 0.45rem;
 border-radius: 999px;
 background: var(--ember-tint);
 border: 1px solid color-mix(in srgb, var(--ember) 28%, var(--line));
}

.price-card__save[hidden] {
 display: none;
}

.price-card__note {
 font-family: var(--mono);
 font-size: 0.78rem;
 letter-spacing: 0.02em;
 color: var(--ink-2);
}

.price-card__per {
 white-space: nowrap;
}

/* Monthly / annual billing toggle */
.pricing-bill-toggle {
 display: inline-flex;
 align-items: center;
 gap: 0.25rem;
 padding: 0.25rem;
 margin: 0 0 0.75rem;
 border: 1px solid var(--line);
 border-radius: 999px;
 background: var(--surface);
 box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent);
}

.pricing-bill-toggle__btn {
 appearance: none;
 border: 0;
 background: transparent;
 color: var(--ink-2);
 font: inherit;
 font-size: 0.92rem;
 font-weight: 600;
 padding: 0.5rem 1rem;
 border-radius: 999px;
 cursor: pointer;
 display: inline-flex;
 align-items: center;
 gap: 0.4rem;
 transition: background 0.15s, color 0.15s;
}

.pricing-bill-toggle__btn:hover {
 color: var(--ink);
}

.pricing-bill-toggle__btn.is-active {
 background: var(--ember);
 color: #fff;
}

.pricing-bill-toggle__btn.is-active .pricing-bill-toggle__save {
 background: color-mix(in srgb, #fff 22%, transparent);
 color: #fff;
}

.pricing-bill-toggle__save {
 font-family: var(--mono);
 font-size: 0.65rem;
 letter-spacing: 0.05em;
 text-transform: uppercase;
 font-weight: 650;
 padding: 0.15rem 0.4rem;
 border-radius: 999px;
 background: var(--ember-tint);
 color: var(--ember-deep);
}

.pricing-bill-hint {
 margin: 0 0 1.25rem;
 font-size: 0.9rem;
 max-width: 36rem;
}

html[data-theme="dark"] .pricing-bill-toggle__btn.is-active {
 color: #1a120e;
}

html[data-theme="dark"] .pricing-bill-toggle__btn.is-active .pricing-bill-toggle__save {
 color: #1a120e;
 background: color-mix(in srgb, #1a120e 12%, transparent);
}

/* - Chart system - */
.chart-card {
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: var(--radius-lg);
 padding: 1.15rem 1.2rem 1rem;
 margin: 0;
}

.band-graphite .chart-card {
 background: var(--graphite-surface);
 border-color: var(--graphite-line);
}

.chart-card__title {
 font-family: var(--mono);
 font-size: 0.72rem;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: var(--ink-2);
 margin: 0 0 0.75rem;
 font-weight: 650;
}

.band-graphite .chart-card__title {
 color: var(--graphite-ink-2);
}

.chart-svg {
 width: 100%;
 height: auto;
 display: block;
}

.chart-footnote {
 margin: 0.65rem 0 0;
 font-family: var(--mono);
 font-size: 0.7rem;
 color: var(--ink-2);
 line-height: 1.4;
}

.band-graphite .chart-footnote {
 color: var(--graphite-ink-2);
}

.chart-axis,
.chart-tick,
.chart-label-ink,
.chart-caption-ink {
 fill: var(--ink-2);
 font-family: var(--mono);
 font-size: 11px;
}

.chart-axis-line {
 stroke: var(--line);
 stroke-width: 1.25;
}

.chart-gridline {
 stroke: var(--line);
 stroke-width: 1;
 opacity: 0.65;
 stroke-dasharray: 3 4;
}

.chart-grid line {
 stroke: var(--line);
 stroke-width: 1.25;
}

.line-ember {
 stroke: var(--ember);
 stroke-width: 2.5;
 stroke-linecap: round;
 stroke-linejoin: round;
 fill: none;
}

.line-ember-dot {
 fill: var(--ember);
}

.line-ember-label,
.chart-ember-text {
 fill: var(--ember);
 font-family: var(--mono);
 font-size: 11px;
 font-weight: 650;
}

.line-warn {
 stroke: #c0392b;
 stroke-width: 2.25;
 stroke-linecap: round;
 stroke-linejoin: round;
 fill: none;
}

.line-warn-label {
 fill: #c0392b;
 font-family: var(--mono);
 font-size: 11px;
 font-weight: 650;
}

.line-slate {
 stroke: #6b7a90;
 stroke-width: 2;
 stroke-linecap: round;
 stroke-linejoin: round;
 fill: none;
}

.bar-ember-ink {
 fill: var(--ember);
}

.bar-warn {
 fill: color-mix(in srgb, #c0392b 75%, var(--ink-2));
}

.bar-slate {
 fill: #6b7a90;
}

html[data-theme="dark"] .bar-warn {
 fill: #e06b5c;
}

.grid-2-visual {
 display: grid;
 gap: 1.5rem;
 align-items: stretch;
}

@media (min-width: 900px) {
 .grid-2-visual {
 grid-template-columns: 1fr 1.1fr;
 gap: 2rem;
 }
}

.stack-gap {
 display: flex;
 flex-direction: column;
 gap: 1rem;
}

.proof-grid {
 display: grid;
 gap: 1.15rem;
}

@media (min-width: 900px) {
 .proof-grid {
 grid-template-columns: 1fr 1fr;
 }
}

.proof-card .btn {
 margin-top: 0;
}

.proof-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 0.55rem;
 margin-top: 0.85rem;
}

.proof-actions .btn {
 margin-top: 0;
}

.watch-banner {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 0.75rem 1rem;
 margin: 0 0 1.5rem;
 padding: 1rem 1.1rem;
 border-radius: var(--radius);
 border: 1px solid color-mix(in srgb, var(--ember) 35%, var(--line));
 background:
 linear-gradient(90deg, var(--ember-tint), var(--surface) 55%);
}

.watch-banner .btn {
 flex-shrink: 0;
}

@media (max-width: 639px) {
 .proof-actions {
 flex-direction: column;
 }

 .proof-actions .btn,
 .watch-banner .btn {
 width: 100%;
 justify-content: center;
 }

 .watch-banner {
 flex-direction: column;
 align-items: stretch;
 }
}

/* 2×2 community cards on home */
.band-graphite .article-cards {
 display: grid;
 gap: 1rem;
}

@media (min-width: 720px) {
 .band-graphite .article-cards {
 grid-template-columns: repeat(2, 1fr);
 }
}

.proof-context {
 font-size: 0.98rem;
 color: var(--ink-2);
 line-height: 1.55;
 margin: 0 0 0.75rem;
}

.receipt-kicker {
 font-family: var(--mono);
 font-size: 0.68rem;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--ember);
 margin: 0 0 0.5rem;
 font-weight: 650;
}

.chart-embed {
 margin: 0.85rem 0 1rem;
 padding: 0.75rem;
 background: var(--elevated);
 border-radius: var(--radius);
 border: 1px solid var(--line);
}

.chart-embed svg {
 width: 100%;
 height: auto;
 display: block;
}

.content-chart {
 margin: 1.5rem 0;
}

/* Pillar chips under enabler */
.pillar-chips {
 display: flex;
 flex-wrap: wrap;
 gap: 0.5rem;
 list-style: none;
 margin: 1rem 0 0;
 padding: 0;
}

.pillar-chips li {
 font-family: var(--mono);
 font-size: 0.72rem;
 letter-spacing: 0.04em;
 padding: 0.4rem 0.7rem;
 border-radius: 999px;
 border: 1px solid var(--graphite-line);
 color: var(--graphite-ink-2);
 background: color-mix(in srgb, var(--ember) 8%, transparent);
}

/* Pipeline */
.pipeline {
 margin: 0;
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
}

.pipeline-svg {
 width: 100%;
 min-width: 560px;
 height: auto;
 display: block;
}

.pipe-node {
 fill: var(--graphite-surface);
 stroke: var(--graphite-line);
 stroke-width: 1.5;
}

.pipe-node-hot {
 stroke: var(--ember);
 fill: color-mix(in srgb, var(--ember) 12%, var(--graphite-surface));
}

.pipe-text {
 fill: var(--graphite-ink);
 font-family: var(--font);
 font-size: 13px;
 font-weight: 650;
}

.pipe-line {
 stroke: var(--graphite-ink-2);
 stroke-width: 1.5;
}

.pipe-arrow {
 fill: var(--ember);
}

/* Shields */
.shield-grid {
 display: grid;
 gap: 1rem;
 margin: 1.25rem 0 1.75rem;
}

@media (min-width: 720px) {
 .shield-grid {
 grid-template-columns: repeat(3, 1fr);
 }
}

.shield-card {
 text-align: left;
}

.shield-icon {
 width: 2.25rem;
 height: 2.25rem;
 display: grid;
 place-items: center;
 border-radius: var(--radius-sm);
 background: var(--ember-tint);
 color: var(--ember);
 font-size: 1rem;
 margin-bottom: 0.75rem;
 border: 1px solid color-mix(in srgb, var(--ember) 25%, var(--line));
}

/* Content pages: FAQ details inherit site FAQ */
.content details {
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 padding: 0.9rem 1.1rem;
 margin: 0.55rem 0;
}

.content summary {
 font-weight: 600;
 cursor: pointer;
}

.content details[open] summary {
 margin-bottom: 0.45rem;
}

/* Stat source links */
.stat-source a {
 color: inherit;
 text-decoration: none;
 border-bottom: 1px solid color-mix(in srgb, var(--ember) 50%, transparent);
}

.stat-source a:hover {
 color: var(--ember);
}

/* - Product banner · Pricing · Waitlist - */
.product-banner {
 display: grid;
 gap: 1.5rem;
 padding: 1.75rem 1.75rem;
 border-radius: var(--radius-lg);
 border: 1px solid var(--line);
 background:
 radial-gradient(ellipse 80% 100% at 100% 0%, color-mix(in srgb, var(--ember) 12%, transparent), transparent 55%),
 var(--surface);
 box-shadow: var(--shadow);
}

@media (min-width: 800px) {
 .product-banner {
 grid-template-columns: 1.4fr 1fr;
 align-items: center;
 gap: 2rem;
 padding: 2rem 2.25rem;
 }
}

.product-banner h2 {
 margin-bottom: 0.65rem;
}

.product-banner__actions {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 0.75rem;
}

.product-meta {
 list-style: none;
 margin: 0.5rem 0 0;
 padding: 0;
 font-family: var(--mono);
 font-size: 0.78rem;
 color: var(--ink-2);
 line-height: 1.55;
}

.product-meta li::before {
 content: "→ ";
 color: var(--ember);
}

/* - Pricing page layout - */
.content--wide {
 max-width: var(--max);
}

.content--wide > h2,
.content--wide > .faq,
.content--wide > p,
.content--wide > ul {
 max-width: var(--prose);
}

.content--wide > .tech-intro,
.content--wide > .pricing-layout,
.content--wide > .waitlist-panel,
.content--wide > .proof-grid,
.content--wide > .practice-grid,
.content--wide > .community-hub,
.content--wide > .team-grid,
.content--wide > .steps,
.content--wide > .principle-row,
.content--wide > .tech-cta-band,
.content--wide > .reel-shell,
.content--wide > .reel-section,
.content--wide > .benchmark-callout,
.content--wide > .chart-card,
.content--wide > .yt-grid,
.content--wide > .benefit-grid,
.content--wide > .page-stack,
.content--wide > .shield-grid,
.content--wide > .bet-grid {
  max-width: none;
}

.pricing-layout {
 display: flex;
 flex-direction: column;
 gap: 1.25rem;
 margin: 0 0 2.5rem;
}

.pricing-tiers {
 display: grid;
 gap: 1rem;
 grid-template-columns: 1fr;
}

@media (min-width: 640px) {
 .pricing-tiers {
 grid-template-columns: repeat(2, 1fr);
 }
}

@media (min-width: 1100px) {
 .pricing-tiers {
 grid-template-columns: repeat(4, 1fr);
 align-items: stretch;
 }
}

/* Home teaser: horizontal snap on small screens */
.pricing-grid {
 display: grid;
 gap: 0.85rem;
 margin: 1.5rem 0 0;
 grid-template-columns: 1fr;
}

@media (min-width: 640px) {
 .pricing-grid {
 grid-template-columns: repeat(2, 1fr);
 }
}

@media (min-width: 1100px) {
 .pricing-grid,
 .pricing-grid--home {
 grid-template-columns: repeat(5, 1fr);
 }
}

@media (max-width: 639px) {
 .pricing-grid--home {
 display: flex;
 overflow-x: auto;
 scroll-snap-type: x mandatory;
 -webkit-overflow-scrolling: touch;
 gap: 0.75rem;
 padding-bottom: 0.5rem;
 margin-inline: -0.25rem;
 padding-inline: 0.25rem;
 }

 .pricing-grid--home .price-card {
 flex: 0 0 min(78vw, 16.5rem);
 scroll-snap-align: start;
 }
}

.pricing-grid--home .price-card .btn,
.pricing-grid--home .price-card__features {
 display: none;
}

.price-card {
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: var(--radius-lg);
 padding: 1.35rem 1.25rem 1.4rem;
 display: flex;
 flex-direction: column;
 gap: 0.35rem;
 position: relative;
 min-height: 100%;
 box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent);
}

.price-card__head {
 margin-bottom: 0.35rem;
}

.price-card--featured {
 border-color: color-mix(in srgb, var(--ember) 50%, var(--line));
 background:
 linear-gradient(180deg, var(--ember-tint) 0%, var(--surface) 42%);
 box-shadow: 0 0 0 1px color-mix(in srgb, var(--ember) 20%, transparent),
 var(--ember-glow);
}

@media (min-width: 1100px) {
 .price-card--featured {
 transform: translateY(-6px);
 }
}

.price-card__badge {
 position: absolute;
 top: 0.85rem;
 right: 0.85rem;
 font-family: var(--mono);
 font-size: 0.65rem;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: #1a1d21;
 background: linear-gradient(135deg, var(--ember-hot), var(--ember));
 padding: 0.22rem 0.5rem;
 border-radius: 999px;
 margin: 0;
 font-weight: 700;
 box-shadow: 0 0 12px color-mix(in srgb, var(--ember) 40%, transparent);
}

.price-card__tier {
 font-family: var(--mono);
 font-size: 0.72rem;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--ember);
 font-weight: 700;
 margin: 0;
}

.price-card__price {
 margin: 0.45rem 0 0;
 line-height: 1.1;
 display: flex;
 flex-wrap: wrap;
 align-items: baseline;
 gap: 0.15rem 0.2rem;
}

.price-card__amount {
 font-family: var(--mono);
 font-size: clamp(1.75rem, 3.2vw, 2.15rem);
 font-weight: 700;
 letter-spacing: -0.03em;
 color: var(--ink);
}

.price-card__per {
 font-size: 0.9rem;
 color: var(--ink-2);
 margin-left: 0.1rem;
 font-weight: 500;
}

.price-card__who {
 font-size: 0.92rem;
 color: var(--ink-2);
 margin: 0.65rem 0 0;
 min-height: 1.4em;
 padding-top: 0.55rem;
 border-top: 1px solid var(--line);
}

.price-card__features {
 list-style: none;
 margin: 0.5rem 0 1.1rem;
 padding: 0;
 flex: 1;
 font-size: 0.9rem;
 color: var(--ink-2);
}

.price-card__features li {
 padding: 0.4rem 0;
 border-bottom: 1px solid var(--line);
 padding-left: 0.9rem;
 position: relative;
}

.price-card__features li::before {
 content: "";
 position: absolute;
 left: 0;
 top: 0.75rem;
 width: 0.35rem;
 height: 0.35rem;
 border-radius: 50%;
 background: var(--ember);
 box-shadow: 0 0 6px color-mix(in srgb, var(--ember) 50%, transparent);
}

.price-card__features li:last-child {
 border-bottom: none;
}

.price-card .btn {
 align-self: stretch;
 margin-top: auto;
 width: 100%;
 box-sizing: border-box;
}

/* Enterprise full-width band */
.price-enterprise {
 display: grid;
 gap: 1.5rem;
 padding: 1.5rem 1.35rem;
 border-radius: var(--radius-lg);
 border: 1px solid var(--graphite-line);
 background:
 radial-gradient(ellipse 60% 80% at 100% 0%, color-mix(in srgb, var(--ember) 22%, transparent), transparent 55%),
 radial-gradient(ellipse 40% 60% at 0% 100%, color-mix(in srgb, var(--ember-deep) 25%, transparent), transparent 50%),
 linear-gradient(145deg, var(--graphite-surface) 0%, var(--graphite) 100%);
 color: var(--graphite-ink);
 box-shadow: var(--ember-glow);
}

@media (min-width: 800px) {
 .price-enterprise {
 grid-template-columns: 1.4fr 0.85fr;
 gap: 2rem;
 padding: 1.85rem 2rem;
 align-items: center;
 }
}

.price-enterprise .price-card__tier {
 color: var(--ember-hot);
}

.price-enterprise__title {
 font-family: var(--serif);
 font-size: clamp(1.35rem, 2.5vw, 1.75rem);
 color: var(--graphite-ink);
 margin: 0.35rem 0 0.65rem;
 letter-spacing: -0.02em;
}

.price-enterprise .muted {
 color: var(--graphite-ink-2);
}

.price-enterprise__list {
 list-style: none;
 margin: 1rem 0 0;
 padding: 0;
 display: grid;
 gap: 0.45rem;
}

@media (min-width: 520px) {
 .price-enterprise__list {
 grid-template-columns: 1fr 1fr;
 gap: 0.45rem 1.25rem;
 }
}

.price-enterprise__list li {
 font-size: 0.92rem;
 color: var(--graphite-ink-2);
 padding-left: 0.9rem;
 position: relative;
}

.price-enterprise__list li::before {
 content: "";
 position: absolute;
 left: 0;
 top: 0.45rem;
 width: 0.4rem;
 height: 0.4rem;
 border-radius: 50%;
 background: var(--verified);
}

.price-enterprise__cta {
 display: flex;
 flex-direction: column;
 align-items: stretch;
 gap: 0.65rem;
 padding: 1.15rem 1.2rem;
 border-radius: var(--radius);
 background: color-mix(in srgb, var(--graphite-elevated) 90%, transparent);
 border: 1px solid var(--graphite-line);
}

.price-enterprise__starts {
 display: block;
 font-size: 0.78rem;
 font-weight: 600;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: var(--ember-hot);
 margin-bottom: 0.15rem;
}

.price-enterprise__cta .price-card__price {
 display: flex;
 flex-wrap: wrap;
 align-items: baseline;
 gap: 0.15rem 0.35rem;
 margin: 0;
}

.price-enterprise__cta .price-card__amount {
 color: var(--graphite-ink);
}

.price-enterprise__cta .price-card__per {
 color: var(--graphite-ink-2);
 font-size: 0.95rem;
 font-weight: 500;
}

.price-enterprise__cap {
 margin: 0 0 0.25rem;
 font-size: 0.88rem;
 color: var(--graphite-ink-2);
 line-height: 1.35;
}

.price-enterprise__cta .btn-secondary {
 background: transparent;
 border-color: var(--graphite-line);
 color: var(--graphite-ink);
}

.price-enterprise__cta .btn-secondary:hover {
 border-color: var(--ember);
 background: color-mix(in srgb, var(--ember) 12%, transparent);
 color: var(--graphite-ink);
}

.price-enterprise__cta .chart-footnote {
 color: var(--graphite-ink-2);
 margin: 0;
}

.price-enterprise__cta .chart-footnote a {
 color: var(--ember-hot);
}

/* Principle chips under pricing */
.principle-row {
 display: grid;
 gap: 0.85rem;
 margin: 0 0 2.5rem;
 grid-template-columns: 1fr;
}

@media (min-width: 640px) {
 .principle-row {
 grid-template-columns: repeat(2, 1fr);
 }
}

@media (min-width: 1000px) {
 .principle-row {
 grid-template-columns: repeat(4, 1fr);
 }
}

/* Five “What we believe” cards: never 4+1 (default .principle-row is 4-col).
   Mobile 1-col → tablet 2-col → desktop 3+2 centered via a 6-col track. */
.principle-row--beliefs {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .principle-row--beliefs {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .principle-row--beliefs {
    grid-template-columns: repeat(6, 1fr);
  }

  .principle-row--beliefs > .principle-card:nth-child(1) {
    grid-column: 1 / 3;
  }

  .principle-row--beliefs > .principle-card:nth-child(2) {
    grid-column: 3 / 5;
  }

  .principle-row--beliefs > .principle-card:nth-child(3) {
    grid-column: 5 / 7;
  }

  .principle-row--beliefs > .principle-card:nth-child(4) {
    grid-column: 2 / 4;
  }

  .principle-row--beliefs > .principle-card:nth-child(5) {
    grid-column: 4 / 6;
  }
}

.principle-card {
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 padding: 1.1rem 1.15rem;
}

.principle-card h3 {
 margin: 0 0 0.45rem;
 font-size: 1rem;
 display: flex;
 align-items: center;
 gap: 0.5rem;
 line-height: 1.3;
}

.principle-dot {
 display: inline-block;
 width: 0.65rem;
 height: 0.65rem;
 border-radius: 50%;
 flex-shrink: 0;
}

.principle-dot--ember {
 background: var(--ember);
 box-shadow: 0 0 10px color-mix(in srgb, var(--ember) 55%, transparent);
}

.principle-dot--verified {
 background: var(--verified);
}

.principle-dot--estimated {
 background: var(--estimated);
}

.principle-dot--directional {
 background: var(--directional);
}

.waitlist-panel {
 margin: 1.5rem 0 2rem;
 padding: 1.5rem 1.25rem;
 border-radius: var(--radius-lg);
 border: 1px solid color-mix(in srgb, var(--ember) 40%, var(--line));
 background:
 radial-gradient(ellipse 70% 80% at 0% 0%, color-mix(in srgb, var(--ember) 16%, transparent), transparent 55%),
 radial-gradient(ellipse 50% 60% at 100% 100%, color-mix(in srgb, var(--ember-hot) 12%, transparent), transparent 50%),
 var(--elevated);
 box-shadow: var(--ember-glow);
}

@media (min-width: 640px) {
 .waitlist-panel {
 padding: 1.75rem 1.6rem;
 }
}

.waitlist-panel__title {
 font-family: var(--serif);
 font-size: clamp(1.35rem, 2.5vw, 1.75rem);
 margin: 0 0 0.5rem;
}

.waitlist-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 0.75rem;
 margin: 1.25rem 0 0.5rem;
}

.content .waitlist-panel h2 {
 margin-top: 0;
}

/* - Brand palette depth (restraint, not rainbow) - */
.section-kicker::before {
 background: linear-gradient(90deg, var(--ember), var(--ember-hot));
 box-shadow: 0 0 10px color-mix(in srgb, var(--ember-hot) 60%, transparent);
}

.card-accent::before {
 background: linear-gradient(90deg, var(--ember-deep), var(--ember), var(--ember-hot));
}

.band-elevated {
 background:
 linear-gradient(180deg, color-mix(in srgb, var(--ember-tint) 55%, var(--elevated)) 0%, var(--elevated) 28%);
}

/* Stat figures: ink with ember heat (readable, not pure flat) */
.stat-value {
 color: var(--ink);
 text-shadow: 0 0 24px color-mix(in srgb, var(--ember) 18%, transparent);
}

.band-graphite .stat-value {
 color: var(--graphite-ink);
 text-shadow: 0 0 28px color-mix(in srgb, var(--ember-hot) 35%, transparent);
}

.tax-num {
 background: var(--ember-tint);
 color: var(--ember-deep);
 border-color: color-mix(in srgb, var(--ember) 30%, var(--line));
 box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ember-hot) 25%, transparent);
}

.chip-verified {
 box-shadow: none; /* matte - no ember glow */
}

.hero {
 background:
 radial-gradient(ellipse 70% 55% at 90% 0%, color-mix(in srgb, var(--ember) 20%, transparent), transparent 55%),
 radial-gradient(ellipse 45% 40% at 10% 100%, color-mix(in srgb, var(--ember-deep) 14%, transparent), transparent 50%),
 radial-gradient(ellipse 30% 30% at 70% 60%, color-mix(in srgb, var(--ember-hot) 10%, transparent), transparent 45%),
 linear-gradient(165deg, var(--surface) 0%, var(--canvas) 55%, var(--elevated) 100%);
}

/* Confidence legend (matte tiers - not brand chrome) */
.confidence-legend {
 display: flex;
 flex-wrap: wrap;
 gap: 0.5rem 1rem;
 margin: 1rem 0 0;
 padding: 0.85rem 1rem;
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 font-size: 0.85rem;
 color: var(--ink-2);
}

.confidence-legend .chip {
 margin-right: 0.25rem;
}

/* - Mobile polish (sitewide) - */
@media (max-width: 639px) {
 .wrap {
 width: min(100% - 1.5rem, var(--max));
 }

 body {
 font-size: 1rem;
 }

 .section {
 padding: 2.5rem 0;
 }

 .hero {
 padding: 2.5rem 0 2.75rem;
 }

 .hero h1 {
 font-size: clamp(1.85rem, 8.5vw, 2.35rem);
 }

 .hero-actions,
 .waitlist-actions {
 flex-direction: column;
 align-items: stretch;
 }

 .hero-actions .btn,
 .waitlist-actions .btn,
 .cta-band .hero-actions .btn {
 width: 100%;
 justify-content: center;
 }

 .site-header .btn-ghost {
 display: none;
 }

 .logo--header .logo-icon {
 width: 2.1rem;
 height: 2.1rem;
 }

 .logo--header .logo-wordmark {
 font-size: 1.05rem;
 }

 .logo-img {
 height: 2.35rem;
 max-width: min(200px, 48vw);
 }

 .site-header__inner {
 min-height: 3.85rem;
 gap: 0.5rem;
 }

 .header-actions .btn-primary {
 padding: 0.55rem 0.85rem;
 font-size: 0.82rem;
 }

 .page-hero {
 padding: 2rem 0 1.25rem;
 }

 .page-body {
 padding: 1.5rem 0 2.75rem;
 }

 .prose-width,
 .content:not(.content--wide) {
 max-width: 100%;
 }

 .vs-box,
 .chart-card,
 .benchmark-callout {
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
 }

 .vs-box table {
 min-width: 28rem;
 }

 .content table {
 display: block;
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
 }

 .stat-row {
 grid-template-columns: 1fr;
 }

 .product-banner {
 padding: 1.25rem 1.15rem;
 }

 .product-banner__actions {
 width: 100%;
 }

 .product-banner__actions .btn {
 width: 100%;
 justify-content: center;
 }

 .cta-band {
 padding: 1.5rem 1.15rem;
 }

 .article-layout {
 padding: 1.75rem 0 2.5rem;
 }

 .right-rail .btn {
 width: 100%;
 justify-content: center;
 }

 .pedigree {
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 0.65rem;
 }

 .pipeline-svg {
 min-width: 520px;
 }

 .footer-bottom {
 flex-direction: column;
 gap: 0.35rem;
 }

 .site-footer .btn {
 width: 100%;
 justify-content: center;
 }
}

@media (max-width: 899px) {
 .hero-grid {
 gap: 1.5rem;
 }

 .grid-2-visual {
 gap: 1.25rem;
 }
}

/* - Technology page · lower sections - */
.tech-lede {
 font-size: 1.08rem;
 color: var(--ink-2);
 line-height: 1.55;
 max-width: 40rem;
 margin: 0 0 1.5rem;
}

/* Designed intro band (technology page) */
.tech-intro {
 display: grid;
 gap: 1.25rem;
 margin: 0 0 2.25rem;
 padding: 1.5rem 1.35rem;
 border-radius: var(--radius-lg);
 border: 1px solid var(--line);
 background:
 radial-gradient(ellipse 70% 90% at 100% 0%, color-mix(in srgb, var(--ember) 14%, transparent), transparent 55%),
 linear-gradient(165deg, var(--elevated) 0%, var(--surface) 55%);
 box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent),
 0 12px 32px color-mix(in srgb, var(--ink) 5%, transparent);
 position: relative;
 overflow: hidden;
}

.tech-intro::before {
 content: "";
 position: absolute;
 left: 0;
 top: 0;
 bottom: 0;
 width: 3px;
 background: linear-gradient(180deg, var(--ember-hot), var(--ember), var(--ember-deep));
 box-shadow: 0 0 12px color-mix(in srgb, var(--ember) 45%, transparent);
}

@media (min-width: 800px) {
 .tech-intro {
 grid-template-columns: 1.4fr 0.9fr;
 gap: 1.75rem;
 align-items: center;
 padding: 1.75rem 1.75rem 1.75rem 1.85rem;
 }

 .tech-intro--solo {
 grid-template-columns: 1fr;
 }
}

.tech-intro__main {
 min-width: 0;
}

.tech-intro .eyebrow {
 margin-bottom: 0.55rem;
}

.tech-intro__claim {
 font-family: var(--serif);
 font-size: clamp(1.35rem, 2.4vw, 1.75rem);
 font-weight: 700;
 letter-spacing: -0.025em;
 line-height: 1.2;
 color: var(--ink);
 margin: 0 0 0.65rem;
}

.tech-intro__body {
 margin: 0;
 font-size: 1.02rem;
 line-height: 1.55;
 color: var(--ink-2);
 max-width: 38rem;
}

.tech-intro__pillars {
 list-style: none;
 margin: 0;
 padding: 0;
 display: grid;
 gap: 0.55rem;
}

.tech-intro__pillars li {
 display: flex;
 flex-direction: column;
 gap: 0.15rem;
 padding: 0.7rem 0.85rem;
 border-radius: var(--radius);
 border: 1px solid var(--line);
 background: var(--surface);
}

.tech-intro__label {
 font-family: var(--mono);
 font-size: 0.68rem;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--ember);
 font-weight: 700;
}

.tech-intro__value {
 font-size: 0.98rem;
 font-weight: 650;
 color: var(--ink);
 letter-spacing: -0.01em;
}

@media (max-width: 799px) {
 .tech-intro__pillars {
 grid-template-columns: 1fr;
 }
}

@media (min-width: 480px) and (max-width: 799px) {
 .tech-intro__pillars {
 grid-template-columns: repeat(3, 1fr);
 }

 .tech-intro__pillars li {
 text-align: center;
 align-items: center;
 }
}

.content--wide > h2 {
 margin-top: 2.5rem;
 max-width: none;
}

.bet-grid {
 display: grid;
 gap: 1rem;
 margin: 1.25rem 0 0;
 grid-template-columns: 1fr;
}

@media (min-width: 800px) {
 .bet-grid {
 grid-template-columns: repeat(3, 1fr);
 }
}

.bet-card {
 min-height: 100%;
}

.bet-card .confidence-legend--compact {
 margin-top: 1rem;
 padding: 0.65rem 0.75rem;
 gap: 0.4rem;
 background: var(--elevated);
}

.confidence-legend--compact {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 0.4rem;
 border: 1px solid var(--line);
 border-radius: var(--radius-sm);
}

.benefit-grid {
  display: grid;
  gap: 1rem;
  margin: 1.25rem 0 0;
  grid-template-columns: 1fr;
}

@media (min-width: 800px) {
  .benefit-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.benefit-card {
  min-height: 100%;
}

/* Engage page — contact routing layout */
.engage-page {
  gap: 0;
}

.engage-hero-panel {
  display: grid;
  gap: 1.5rem;
  margin: 0;
  padding: 1.5rem 1.35rem;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--ember) 38%, var(--line));
  background:
    radial-gradient(ellipse 80% 90% at 0% 0%, color-mix(in srgb, var(--ember) 16%, transparent), transparent 55%),
    linear-gradient(165deg, var(--elevated) 0%, var(--surface) 58%);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent),
    0 14px 36px color-mix(in srgb, var(--ink) 6%, transparent),
    var(--ember-glow);
  position: relative;
  overflow: hidden;
}

.engage-hero-panel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--ember-hot), var(--ember), var(--ember-deep));
  box-shadow: 0 0 12px color-mix(in srgb, var(--ember) 45%, transparent);
}

@media (min-width: 900px) {
  .engage-hero-panel {
    grid-template-columns: 1.05fr 1fr;
    gap: 2rem;
    padding: 1.85rem 1.85rem 1.85rem 2rem;
    align-items: stretch;
  }
}

.engage-hero-panel__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.engage-hero-panel__main h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.55rem, 2.8vw, 1.95rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--ink);
}

.engage-hero-panel__lead {
  margin: 0;
  max-width: 32rem;
  font-size: 1.02rem;
  line-height: 1.5;
}

.engage-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
  margin: 0.35rem 0 0.15rem;
  padding: 0;
}

@media (min-width: 520px) {
  .engage-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
  }
}

.engage-facts__item {
  margin: 0;
  padding: 0.75rem 0.85rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.engage-facts__item dt {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ember);
  font-weight: 700;
}

.engage-facts__item dd {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.engage-hero-panel__main .btn {
  align-self: flex-start;
  margin-top: 0.35rem;
}

.engage-hero-panel__note {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.4;
}

.engage-hero-panel__topics {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.15rem 1.1rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 88%, var(--canvas));
}

.engage-hero-panel__topics-label {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-2);
}

.engage-topic-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
  grid-template-columns: 1fr;
}

@media (min-width: 520px) {
  .engage-topic-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.engage-topic-grid li {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 0.8rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  min-width: 0;
}

.engage-topic-grid strong {
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.engage-topic-grid span {
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--ink-2);
}

/* Support + Slack path cards */
.engage-paths {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .engage-paths {
    grid-template-columns: 1fr 1fr;
    gap: 1.15rem;
  }
}

.engage-path {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-height: 100%;
  padding: 1.4rem 1.3rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 3%, transparent);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.engage-path:hover {
  border-color: color-mix(in srgb, var(--ember) 40%, var(--line));
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.engage-path__title {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
}

.engage-path .muted {
  flex: 1;
  margin: 0;
  line-height: 1.5;
}

.engage-path .btn {
  align-self: flex-start;
  margin-top: 0.35rem;
}

/* See it work — quiet reading strip */
.engage-see {
  display: grid;
  gap: 1rem;
  padding: 0.15rem 0;
}

@media (min-width: 720px) {
  .engage-see {
    grid-template-columns: auto 1fr;
    gap: 2rem;
    align-items: start;
  }
}

.engage-see__title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2vw, 1.45rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
  white-space: nowrap;
}

.engage-see__links {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .engage-see__links {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}

.engage-see__link {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.95rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  color: inherit;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.engage-see__link:hover {
  border-color: color-mix(in srgb, var(--ember) 35%, var(--line));
  background: var(--surface);
  color: inherit;
}

.engage-see__name {
  font-weight: 650;
  font-size: 1rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.engage-see__link:hover .engage-see__name {
  color: var(--ember);
}

.engage-see__link .muted {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Legacy hooks still used elsewhere if needed */
.engage-meeting {
  display: grid;
  gap: 1.25rem;
}

.engage-async-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.engage-async-list li {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
}

.engage-async-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.engage-async-list a {
  font-weight: 650;
  text-decoration: none;
  color: var(--ink);
}

.engage-async-list a:hover {
  color: var(--ember);
}

@media (max-width: 639px) {
  .engage-hero-panel__main .btn,
  .engage-path .btn {
    width: 100%;
    justify-content: center;
  }

  .engage-see__title {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .engage-path,
  .engage-see__link {
    transition: none;
  }

  .engage-path:hover {
    transform: none;
  }
}

.tech-cta-band {
 display: grid;
 gap: 1.25rem;
 margin: 1.25rem 0 0;
 padding: 1.5rem 1.35rem;
 border-radius: var(--radius-lg);
 border: 1px solid var(--graphite-line);
 background:
 radial-gradient(ellipse 70% 80% at 100% 0%, color-mix(in srgb, var(--ember) 24%, transparent), transparent 55%),
 linear-gradient(145deg, var(--graphite-surface), var(--graphite));
 color: var(--graphite-ink);
 box-shadow: var(--ember-glow);
}

@media (min-width: 800px) {
 .tech-cta-band {
 grid-template-columns: 1.3fr auto;
 align-items: center;
 gap: 2rem;
 padding: 1.75rem 1.85rem;
 }
}

.tech-cta-band .eyebrow {
 color: var(--ember-hot);
}

.tech-cta-band__title {
 font-family: var(--serif);
 font-size: clamp(1.35rem, 2.4vw, 1.7rem);
 color: var(--graphite-ink);
 margin: 0.25rem 0 0.5rem;
 letter-spacing: -0.02em;
}

.tech-cta-band .muted {
 color: var(--graphite-ink-2);
 margin: 0;
 max-width: 36rem;
}

.tech-cta-band__actions {
 display: flex;
 flex-wrap: wrap;
 gap: 0.65rem;
}

.tech-cta-band .btn-secondary {
 background: transparent;
 border-color: var(--graphite-line);
 color: var(--graphite-ink);
}

.tech-cta-band .btn-secondary:hover {
 border-color: var(--ember);
 background: color-mix(in srgb, var(--ember) 12%, transparent);
 color: var(--graphite-ink);
}

.practice-grid {
 display: grid;
 gap: 1rem;
 margin: 1.25rem 0 0;
 grid-template-columns: 1fr;
}

@media (min-width: 640px) {
 .practice-grid {
 grid-template-columns: repeat(2, 1fr);
 }
}

@media (min-width: 1000px) {
 .practice-grid {
 grid-template-columns: repeat(3, 1fr);
 }
}

.practice-card {
 height: 100%;
 box-sizing: border-box;
}

.practice-card h3 {
 margin: 0.15rem 0 0.45rem;
}

@media (max-width: 639px) {
 .tech-cta-band__actions {
 flex-direction: column;
 }

 .tech-cta-band__actions .btn {
 width: 100%;
 justify-content: center;
 }

 .guardrail-list li {
 flex-direction: row;
 }
}

/* - Team (about) - */
.team-grid {
 display: grid;
 gap: 1.25rem;
 margin: 1.25rem 0 0;
 grid-template-columns: 1fr;
}

@media (min-width: 640px) {
 .team-grid {
 grid-template-columns: repeat(2, 1fr);
 }
}

@media (min-width: 1000px) {
 .team-grid {
 grid-template-columns: repeat(4, 1fr);
 }
}

.team-card {
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: var(--radius-lg);
 padding: 1.25rem 1.2rem 1.4rem;
 text-align: center;
 box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent);
}

.team-card__photo {
 width: 8.5rem;
 height: 8.5rem;
 object-fit: cover;
 border-radius: 50%;
 margin: 0 auto 1rem;
 border: 2px solid var(--line);
 box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 10%, transparent),
 0 0 0 3px color-mix(in srgb, var(--ember) 12%, transparent);
}

.team-card__name {
 margin: 0 0 0.45rem;
 font-size: 1.15rem;
}

.team-card .muted {
 margin: 0;
 font-size: 0.95rem;
}

/* - Community hub - */
.community-hub {
 display: grid;
 gap: 1rem;
 margin: 0 0 2rem;
 grid-template-columns: 1fr;
}

@media (min-width: 800px) {
 .community-hub {
 grid-template-columns: repeat(3, 1fr);
 }
}

.community-hub__card {
 display: flex;
 flex-direction: column;
 text-decoration: none;
 color: inherit;
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: var(--radius-lg);
 padding: 1.4rem 1.35rem 1.35rem;
 transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
 min-height: 100%;
}

.community-hub__card:hover {
 border-color: color-mix(in srgb, var(--ember) 45%, var(--line));
 box-shadow: var(--shadow);
 transform: translateY(-2px);
 color: inherit;
}

.community-hub__card h2 {
 font-family: var(--serif);
 font-size: 1.45rem;
 margin: 0.15rem 0 0.55rem;
 letter-spacing: -0.02em;
}

.community-hub__card .muted {
 flex: 1;
 margin: 0 0 1rem;
}

.community-hub__card--primary {
 border-color: color-mix(in srgb, var(--ember) 40%, var(--line));
 background:
 linear-gradient(165deg, var(--ember-tint) 0%, var(--surface) 55%);
 box-shadow: 0 0 0 1px color-mix(in srgb, var(--ember) 12%, transparent);
}

/* Homepage destination cards - map, don't mini-clone inner pages */
.home-path-grid {
 display: grid;
 gap: 1rem;
 grid-template-columns: 1fr;
}

@media (min-width: 700px) {
 .home-path-grid {
 grid-template-columns: repeat(2, 1fr);
 }

 .home-path-grid--3 {
 grid-template-columns: repeat(3, 1fr);
 }
}

.home-path-card {
 display: flex;
 flex-direction: column;
 text-decoration: none;
 color: inherit;
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: var(--radius-lg);
 padding: 1.25rem 1.3rem 1.2rem;
 transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
 min-height: 100%;
}

.home-path-card:hover {
 border-color: color-mix(in srgb, var(--ember) 45%, var(--line));
 box-shadow: var(--shadow);
 transform: translateY(-2px);
 color: inherit;
}

.home-path-card h3 {
 font-family: var(--serif);
 font-size: 1.28rem;
 margin: 0.15rem 0 0.45rem;
 letter-spacing: -0.02em;
}

.home-path-card .muted {
 flex: 1;
 margin: 0 0 0.85rem;
 font-size: 0.95rem;
}

.home-path-card__cta {
 font-size: 0.88rem;
 font-weight: 600;
 color: var(--ember);
}

.band-elevated .home-path-card {
 background: var(--canvas);
}

.community-hub__cta {
 font-family: var(--mono);
 font-size: 0.78rem;
 font-weight: 650;
 letter-spacing: 0.04em;
 color: var(--ember);
}

.community-hub__card:hover .community-hub__cta {
 color: var(--ember-deep);
}

html[data-theme="dark"] .community-hub__card:hover .community-hub__cta {
 color: var(--ember-hot);
}

.text-link {
 color: var(--ember);
 font-weight: 600;
}

/* Session format: one number (CSS counter) beside title — not stacked twice */
.session-steps .step {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  column-gap: 0.85rem;
  row-gap: 0.35rem;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.15rem 1.2rem 1.2rem;
}

.session-steps .step::before {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  border-radius: var(--radius-sm);
  background: var(--ember-tint);
  color: var(--ember-deep);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}

.session-steps .step h3 {
  grid-column: 2;
  grid-row: 1;
  margin: 0.15rem 0 0;
  align-self: center;
}

.session-steps .step .muted {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
}

.page-band--elevated .session-steps .step {
  background: var(--canvas);
}

.page-band--elevated .session-steps .step::before {
  background: color-mix(in srgb, var(--ember) 16%, var(--elevated));
}

.session-writeups {
 margin-top: 1.25rem;
}

.collab-card {
 margin-top: 1rem;
}

.collab-card .muted {
 margin: 0;
}

/* YouTube session cards */
.yt-section-lede {
 margin: 0 0 1rem;
 max-width: 40rem;
}

.yt-grid {
 display: grid;
 gap: 1rem;
 margin: 0;
 grid-template-columns: 1fr;
}

@media (min-width: 640px) {
 .yt-grid {
 grid-template-columns: repeat(2, 1fr);
 }
}

.yt-card {
 display: flex;
 flex-direction: column;
 text-decoration: none;
 color: inherit;
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: var(--radius-lg);
 overflow: hidden;
 transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
 min-height: 100%;
}

.yt-card:hover {
 border-color: color-mix(in srgb, var(--ember) 45%, var(--line));
 box-shadow: var(--shadow);
 transform: translateY(-2px);
 color: inherit;
}

.yt-card__thumb {
 position: relative;
 aspect-ratio: 16 / 9;
 background: var(--graphite);
 overflow: hidden;
}

.yt-card__thumb img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
}

.yt-card__play {
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 width: 3rem;
 height: 3rem;
 border-radius: 50%;
 display: grid;
 place-items: center;
 background: color-mix(in srgb, var(--ember) 92%, #000);
 color: #fff;
 font-size: 0.95rem;
 box-shadow: 0 0 0 3px color-mix(in srgb, #fff 35%, transparent),
 var(--ember-glow);
 pointer-events: none;
}

.yt-card:hover .yt-card__play {
 background: var(--ember);
}

.yt-card__body {
 padding: 1rem 1.15rem 1.15rem;
 display: flex;
 flex-direction: column;
 flex: 1;
}

.yt-card__body h3 {
 margin: 0.15rem 0 0.4rem;
 font-size: 1.05rem;
}

.yt-card__body .muted {
 flex: 1;
 margin: 0 0 0.75rem;
 font-size: 0.92rem;
}

.yt-card__cta {
 font-family: var(--mono);
 font-size: 0.75rem;
 font-weight: 650;
 letter-spacing: 0.04em;
 color: var(--ember);
}

.yt-card:hover .yt-card__cta {
 color: var(--ember-deep);
}

html[data-theme="dark"] .yt-card:hover .yt-card__cta {
 color: var(--ember-hot);
}

.content--wide > .yt-grid {
 max-width: none;
}

/* Full-bleed page sections (download and similar) */
.page-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  width: 100%;
}

.content--wide > .page-stack {
  max-width: none;
}

/* Pull bands edge-to-edge past the content wrap */
.page-band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: clamp(2.5rem, 5vw, 3.75rem) 0;
  border-top: 1px solid var(--line);
  box-sizing: border-box;
}

.page-band--last {
  border-bottom: none;
  padding-bottom: clamp(1.5rem, 3vw, 2rem);
}

.page-band__inner {
  width: min(100% - 2.5rem, var(--max));
  margin-inline: auto;
}

.page-band__head {
  margin-bottom: 1.5rem;
  max-width: 40rem;
}

.page-band__head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  max-width: 36rem;
}

.page-band__head h2 {
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.18;
  font-size: clamp(1.5rem, 2.8vw, 2.05rem);
  margin: 0.2rem 0 0.55rem;
  color: var(--ink);
}

.page-band__head .muted {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.5;
  max-width: 38rem;
}

.page-band__head .section-kicker {
  margin-bottom: 0.55rem;
}

.page-band .tech-subhead {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
  color: var(--ink);
}

.page-band .faq {
  width: 100%;
}

.page-band .steps {
  margin-top: 0;
}

.page-band--canvas {
  background: var(--canvas);
}

.page-band--elevated {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ember-tint) 45%, var(--elevated)) 0%, var(--elevated) 40%);
}

.page-band--graphite {
  background: var(--graphite);
  border-top-color: var(--graphite-line);
  color: var(--graphite-ink);
}

.page-band--graphite .muted,
.page-band--graphite .page-band__head .muted {
  color: var(--graphite-ink-2);
}

.page-band--graphite h2,
.page-band--graphite .section-kicker {
  color: var(--graphite-ink);
}

.page-band--graphite .section-kicker::before {
  background: linear-gradient(90deg, var(--ember), var(--ember-hot));
}

.page-band--waitlist {
  background:
    radial-gradient(ellipse 80% 70% at 100% 0%, color-mix(in srgb, var(--ember) 12%, transparent), transparent 55%),
    linear-gradient(180deg, var(--elevated) 0%, var(--surface) 100%);
  border-top: none;
  padding-top: clamp(1.75rem, 4vw, 2.5rem);
}

.download-split {
  display: grid;
  gap: 1.5rem;
  align-items: stretch;
}

@media (min-width: 860px) {
  .download-split {
    grid-template-columns: 1.25fr 0.9fr;
    gap: 2rem;
    align-items: center;
  }
}

.download-split__title {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  letter-spacing: -0.025em;
  margin: 0.25rem 0 0.75rem;
  line-height: 1.15;
}

.download-split__copy {
  margin: 0 0 1rem;
  max-width: 36rem;
  font-size: 1.05rem;
  line-height: 1.55;
}

/* Full-width requirements callout inside download-split (do not use .principle-row here —
   that grid becomes 4 columns on desktop and squeezes a single card to ~25% width). */
.download-req {
  margin: 1.25rem 0 0;
  max-width: 36rem;
  width: 100%;
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem 1.15rem;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent);
}

.download-req__title {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  line-height: 1.3;
}

.download-req__lede {
  margin: 0 0 0.65rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

.download-req__list {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.download-req__list li {
  margin: 0.2rem 0;
}

.download-req__list strong {
  color: var(--ink);
}

/* Sticky header clearance for page heroes (long titles should not sit under the nav) */
.page-hero {
  padding-top: clamp(3rem, 6vw, 3.75rem);
}

.download-chip-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.download-chip-row li {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ember) 30%, var(--line));
  background: var(--ember-tint);
  color: var(--ink);
}

.download-cta-card {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1.5rem 1.35rem;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--ember) 40%, var(--line));
  background:
    radial-gradient(ellipse 80% 80% at 0% 0%, color-mix(in srgb, var(--ember) 18%, transparent), transparent 55%),
    var(--surface);
  box-shadow: var(--ember-glow);
}

.download-cta-card__lead {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 0.35rem;
  color: var(--ink);
}

.download-cta-card .btn {
  width: 100%;
  justify-content: center;
}

.download-cta-card .chart-footnote {
  margin: 0.25rem 0 0;
}

.page-band--graphite .reel-section {
  margin-bottom: 0;
}

.page-band--graphite .reel-shell {
  border-color: var(--graphite-line);
  box-shadow: var(--ember-glow);
}

/* Product reel embed (download page) */
.reel-section {
  margin: 0 0 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

.reel-section h2 {
  max-width: none;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.download-reel-lede {
  margin: 0 auto 0.85rem;
  max-width: 40rem;
  text-align: center;
}

.reel-shell {
  margin: 0 auto 0;
  width: min(100%, 56rem);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--elevated);
  box-shadow: var(--shadow), 0 0 0 1px color-mix(in srgb, var(--ember) 10%, transparent);
  aspect-ratio: 16 / 10;
  min-height: 280px;
  max-height: 640px;
}

.reel-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #b8bdc8;
  margin: 0 auto;
}

.download-steps {
  margin-top: 1.25rem;
}

.content--wide > .reel-section {
  max-width: none;
}

@media (max-width: 639px) {
  .reel-shell {
    aspect-ratio: 9 / 12;
    max-height: 520px;
    width: 100%;
  }
}


/* layout harden: practice + youtube */
.practice-grid {
  display: grid !important;
  gap: 1rem;
  margin: 1.25rem 0 0;
  grid-template-columns: 1fr;
  width: 100%;
}

@media (min-width: 640px) {
  .practice-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .practice-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.practice-card {
  height: 100%;
  box-sizing: border-box;
  display: block;
}

.yt-grid {
  display: grid !important;
  gap: 1rem;
  margin: 0;
  grid-template-columns: 1fr;
  width: 100%;
}

@media (min-width: 640px) {
  .yt-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.page-band .practice-grid,
.page-band .yt-grid,
.page-band .principle-row,
.page-band .steps {
  width: 100%;
  max-width: none;
}

/* Community write-up cards under session grid */
.community-writeups {
  margin-top: 1.5rem !important;
  grid-template-columns: 1fr !important;
}

@media (min-width: 640px) {
  .community-writeups {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

.community-writeups .article-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.35rem 1.4rem 1.25rem;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.community-writeups .article-card:hover {
  border-color: color-mix(in srgb, var(--ember) 50%, var(--line));
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  color: inherit;
}

.community-writeups .article-card h3 {
  margin: 0.15rem 0 0.45rem;
  font-family: var(--serif);
  font-size: 1.28rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.community-writeups .article-card .eyebrow {
  margin: 0 0 0.4rem;
}

.community-writeups .article-card .muted {
  flex: 1;
  margin: 0 0 0.9rem;
  color: var(--ink-2);
}

.community-writeups__cta {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: var(--ember);
}

.community-writeups .article-card:hover .community-writeups__cta {
  color: var(--ember-deep);
}

/* Card titles inside .content must not inherit content heading top margins */
.content .article-card h3,
.content .practice-card h3,
.content .home-path-card h3,
.content .yt-card__body h3,
.page-band .article-card h3,
.page-band .home-path-card h3 {
  margin-top: 0.15rem;
}

.download-proof-links {
  margin-top: 1.25rem;
}

.page-band--canvas .page-band__head--center .section-kicker {
  justify-content: center;
}

.page-band__head--center .section-kicker {
  display: inline-flex;
}

/* =============================================================================
   Waitlist thank-you landing (conversion page — not standard site chrome)
   ============================================================================= */

.thanks-page {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, color-mix(in srgb, var(--ember) 22%, transparent), transparent 55%),
    radial-gradient(ellipse 60% 40% at 80% 100%, color-mix(in srgb, #ff0000 10%, transparent), transparent 50%),
    var(--graphite, #0b0d10);
  color: var(--graphite-ink, #f4f1ea);
  display: flex;
  flex-direction: column;
}

.thanks-page .logo-wordmark__turbo {
  color: var(--header-logo-turbo, #f4f1ea);
}

.thanks-page .logo-wordmark__lapper {
  color: var(--header-logo-lapper, #ff6b24);
}

.thanks-top {
  display: flex;
  justify-content: center;
  padding: 1.25rem 1.25rem 0;
}

.thanks-top .logo {
  opacity: 0.92;
}

.thanks-top .logo:hover {
  opacity: 1;
}

.thanks-landing {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem 3rem;
  text-align: center;
  max-width: 40rem;
  margin: 0 auto;
  width: 100%;
}

.thanks-hero {
  width: 100%;
}

.thanks-kicker {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ember);
  margin: 0 0 1rem;
}

.thanks-hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.75rem, 9vw, 4.25rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0 0 0.75rem;
  color: var(--graphite-ink, #f4f1ea);
}

.thanks-lead {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 3.5vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 1rem;
  color: var(--graphite-ink, #f4f1ea);
}

.thanks-copy {
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  line-height: 1.55;
  color: var(--graphite-ink-2, #9aa0a8);
  margin: 0 auto 2rem;
  max-width: 32rem;
}

.thanks-copy strong {
  color: var(--graphite-ink, #f4f1ea);
  font-weight: 650;
}

/* Large YouTube channel CTA */
.thanks-yt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.15rem;
  margin: 0 auto 1rem;
  padding: 1.75rem 2rem 1.5rem;
  max-width: 22rem;
  width: 100%;
  text-decoration: none;
  color: inherit;
  border-radius: 1.25rem;
  border: 1px solid color-mix(in srgb, #ff0000 35%, var(--graphite-line, #262c33));
  background:
    linear-gradient(165deg, color-mix(in srgb, #ff0000 18%, #14181d) 0%, #14181d 55%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, #ff0000 12%, transparent),
    0 24px 48px rgba(0, 0, 0, 0.35),
    0 0 60px color-mix(in srgb, #ff0000 18%, transparent);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.thanks-yt:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: color-mix(in srgb, #ff0000 55%, #fff);
  box-shadow:
    0 0 0 1px color-mix(in srgb, #ff0000 25%, transparent),
    0 28px 56px rgba(0, 0, 0, 0.4),
    0 0 80px color-mix(in srgb, #ff0000 28%, transparent);
}

.thanks-yt:focus-visible {
  outline: 2px solid #ff0000;
  outline-offset: 4px;
}

.thanks-yt__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  filter: drop-shadow(0 8px 20px rgba(255, 0, 0, 0.35));
}

.thanks-yt__logo svg {
  width: clamp(7.5rem, 28vw, 10rem);
  height: auto;
  display: block;
}

.thanks-yt__label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.thanks-yt__action {
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}

.thanks-yt__channel {
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, #fff 70%, #ff0000);
}

.thanks-hint {
  font-size: 0.92rem;
  color: var(--graphite-ink-2, #9aa0a8);
  margin: 0 0 0;
  line-height: 1.45;
}

.thanks-next {
  margin-top: 2.75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--graphite-line, #262c33);
  width: 100%;
  max-width: 28rem;
}

.thanks-next__text {
  margin: 0 0 0.85rem;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--graphite-ink-2, #9aa0a8);
}

.thanks-next__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 650;
  font-size: 1.05rem;
  color: var(--ember);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.thanks-next__link:hover {
  color: var(--ember-hot, #ffdd8c);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.thanks-foot {
  padding: 1rem 1.25rem 1.5rem;
  text-align: center;
}

.thanks-foot p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--graphite-ink-2, #9aa0a8);
}

.thanks-foot a {
  color: var(--graphite-ink-2, #9aa0a8);
  text-decoration: none;
}

.thanks-foot a:hover {
  color: var(--graphite-ink, #f4f1ea);
}

@media (min-width: 640px) {
  .thanks-yt {
    flex-direction: row;
    max-width: 28rem;
    padding: 1.5rem 1.75rem;
    gap: 1.35rem;
    text-align: left;
  }

  .thanks-yt__logo svg {
    width: 7.5rem;
  }

  .thanks-yt__action {
    font-size: 1.3rem;
  }
}

/* =============================================================================
   Hero product presentation (desktop Mac screens + reel-style timeline)
   Original phone reel backed up in assets/reel-original-backup/
   ============================================================================= */
  .pres {
    --pres-ease: cubic-bezier(.2, .85, .25, 1);
    position: relative;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .hero--stack .pres {
    gap: 0.85rem;
  }

  .pres-stage {
    position: relative;
    width: 100%;
    /* Soft field: caption + ~16:8.2 window + shadow room */
    aspect-ratio: 16 / 9.6;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    border: none;
    box-shadow: none;
    container-type: size;
    cursor: zoom-in;
  }
  .pres-stage:focus-visible {
    outline: 2px solid var(--ember);
    outline-offset: 3px;
  }
  /* Typography beats keep a soft surface without a hard second frame */
  .pres-layer:not(.pres-shot) {
    border-radius: 16px;
    background:
      radial-gradient(120% 90% at 50% -20%, color-mix(in srgb, var(--elevated) 70%, transparent) 0%, var(--canvas) 55%, var(--surface) 100%);
  }

  .pres-layer {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s var(--pres-ease);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4cqw 5cqw;
  }
  .pres-layer.is-on { opacity: 1; }
  .pres-layer .reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.48s var(--pres-ease), transform 0.48s var(--pres-ease);
  }
  .pres-layer.is-on .reveal { opacity: 1; transform: none; }
  .pres-layer.is-on .reveal.d2 { transition-delay: 0.35s; }
  .pres-layer.is-on .reveal.d3 { transition-delay: 0.7s; }

  /* Footer-style brand lockup at start of presentation */
  .pres-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 2.2cqh;
  }
  .pres-brand .logo-icon {
    width: clamp(40px, 5.5cqw, 56px);
    height: clamp(40px, 5.5cqw, 56px);
  }
  .pres-brand .logo-wordmark {
    font-size: clamp(1.35rem, 3.4cqw, 1.85rem);
    line-height: 1;
  }
  .pres-brand .logo-wordmark__turbo {
    color: var(--ink);
  }
  .pres-brand .logo-wordmark__lapper {
    color: var(--ember);
  }
  [data-theme="dark"] .pres-brand .logo-wordmark__turbo {
    color: #f4f1ea;
  }

  .pres-eye {
    font-size: clamp(0.65rem, 1.5cqw, 0.8rem);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ember);
    font-weight: 650;
    margin-bottom: 0.9cqh;
  }
  .pres-eye.warn { color: #c0392b; }
  .pres-h {
    font-family: var(--serif);
    font-size: clamp(1.35rem, 4.2cqw, 2.35rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.08;
    color: var(--ink);
    max-width: 18ch;
  }
  .pres-sub {
    margin-top: 1.1cqh;
    font-size: clamp(0.9rem, 2cqw, 1.15rem);
    color: var(--ink-2);
    max-width: 28ch;
  }
  .pres-sub--power {
    margin-top: 0.55cqh;
    font-weight: 600;
    color: var(--ink);
  }

  .pres-contrast {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3cqw;
    margin-top: 2.2cqh;
    width: 100%;
    max-width: 42rem;
  }
  .pres-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
  }
  .pres-col-lbl {
    font-size: clamp(0.62rem, 1.35cqw, 0.75rem);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-2);
  }
  .pres-col-num {
    font-size: clamp(1.6rem, 5.2cqw, 2.75rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    line-height: 1;
  }
  .pres-col-num.warn { color: #c0392b; }
  .pres-col-num.good { color: var(--ink); }
  .pres-col-tag {
    font-size: clamp(0.7rem, 1.5cqw, 0.85rem);
    font-weight: 650;
  }
  .pres-col-tag.warn { color: #c0392b; }
  .pres-col-tag.good { color: var(--ember); }
  .pres-vs {
    font-size: clamp(0.8rem, 1.8cqw, 1rem);
    font-weight: 700;
    color: var(--ink-2);
  }

  /* One Mac window + live caption — no plate, no second bezel */
  .pres-shot {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(0.55rem, 1.6cqh, 1rem);
    /* Space above for title bar breathing room; below for drop-shadow only */
    padding: 0.35rem 0.5rem 1.5rem;
    background: transparent;
  }
  .pres-shot-caption {
    margin: 0;
    max-width: 28ch;
    text-align: center;
    font-family: var(--serif);
    font-size: clamp(1.15rem, 3.2cqw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.16;
    color: var(--ink);
    text-wrap: balance;
    flex: 0 0 auto;
  }
  .pres-shot-frame {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: transparent;
    padding: 0 0.25rem 1rem;
  }
  .pres-shot-frame img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    object-position: top center;
    border-radius: 0;
    background: transparent;
    /*
      Bottom-weighted soft lift. Low lateral blur so the left chrome edge
      stays crisp (no soft “extra strip” aura on the sides).
    */
    filter:
      drop-shadow(0 2px 3px color-mix(in srgb, var(--ink) 8%, transparent))
      drop-shadow(0 10px 18px color-mix(in srgb, var(--ink) 9%, transparent))
      drop-shadow(0 22px 40px color-mix(in srgb, var(--ink) 8%, transparent));
  }

  .pres-close-mark {
    font-family: var(--serif);
    font-size: clamp(1.5rem, 4.6cqw, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--ink);
  }
  .pres-close-pay {
    margin-top: 1cqh;
    font-size: clamp(0.95rem, 2cqw, 1.15rem);
    color: var(--ink-2);
  }
  .pres-close-tag {
    margin-top: 1.6cqh;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ember);
  }
  .pres-close-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    justify-content: center;
    margin-top: 1.8cqh;
  }
  .pres-close-cta a { pointer-events: auto; }

  .pres-controls {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
  }
  .pres-controls button {
    appearance: none;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font-family: var(--mono, ui-monospace, monospace);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    cursor: pointer;
  }
  .pres-controls button:hover {
    border-color: color-mix(in srgb, var(--ember) 40%, var(--line));
  }
  .pres-dots {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    margin-left: 0.25rem;
  }
  .pres-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ink) 18%, transparent);
    border: 0;
    padding: 0;
    cursor: pointer;
  }
  .pres-dot.on {
    background: var(--ember);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ember) 22%, transparent);
  }

  .pres-thumbs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .pres-thumb {
    appearance: none;
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: 8px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    overflow: hidden;
    line-height: 0;
    opacity: 0.72;
    transition: opacity 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .pres-thumb img { display: block; width: 100%; height: auto; }
  .pres-thumb:hover,
  .pres-thumb.is-active {
    opacity: 1;
    border-color: color-mix(in srgb, var(--ember) 50%, var(--line));
  }
  .pres-thumb.is-active {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ember) 30%, transparent);
  }

  .pres-expand-hint {
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    color: var(--ink-2);
    margin: 0;
  }

  /* ---- Lightbox ---- */
  .pres-lightbox {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: none;
    flex-direction: column;
    background: color-mix(in srgb, var(--canvas) 92%, #0d1117 8%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .pres-lightbox.is-open { display: flex; }
  body.pres-lightbox-open { overflow: hidden; }

  .pres-lightbox__bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1.1rem;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
  }
  .pres-lightbox__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    color: inherit;
  }
  .pres-lightbox__brand .logo-icon {
    width: 36px;
    height: 36px;
  }
  .pres-lightbox__brand .logo-wordmark {
    font-size: 1.15rem;
  }
  /* Two-color wordmark always readable in lightbox (header-style split) */
  .pres-lightbox__brand .logo-wordmark__turbo {
    color: var(--ink);
  }
  .pres-lightbox__brand .logo-wordmark__lapper {
    color: var(--ember);
  }
  [data-theme="dark"] .pres-lightbox__brand .logo-wordmark__turbo {
    color: #f4f1ea;
  }

  .pres-lightbox__actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
  }
  .pres-lightbox__actions button {
    appearance: none;
    border: 1px solid var(--line);
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--mono, ui-monospace, monospace);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    cursor: pointer;
  }
  .pres-lightbox__actions button:hover {
    border-color: color-mix(in srgb, var(--ember) 45%, var(--line));
  }
  .pres-lightbox__actions button.is-primary {
    background: var(--ember);
    border-color: var(--ember);
    color: #fff;
  }

  .pres-lightbox__body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem 1.25rem 1.25rem;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
  }
  .pres-lightbox__body .pres-stage {
    flex: 1 1 auto;
    aspect-ratio: auto;
    min-height: 0;
    height: 100%;
    max-height: calc(100vh - 11rem);
    cursor: default;
  }
  .pres-lightbox__body .pres-thumbs {
    max-width: 52rem;
    margin: 0 auto;
    width: 100%;
  }

  /* Fullscreen: more stage room */
  .pres-lightbox:fullscreen,
  .pres-lightbox:-webkit-full-screen {
    background: var(--canvas);
  }
  .pres-lightbox:fullscreen .pres-lightbox__body .pres-stage,
  .pres-lightbox:-webkit-full-screen .pres-lightbox__body .pres-stage {
    max-height: calc(100vh - 9.5rem);
  }

  @media (max-width: 720px) {
    .pres-stage { aspect-ratio: 16 / 11; }
    .pres-shot { padding-bottom: 1rem; }
    .pres-lightbox__brand .logo-wordmark { font-size: 1rem; }
    .pres-lightbox__body { padding: 0.75rem; }
  }