/* ==========================================================================
   Brasa — marketing site stylesheet
   Tokens are copied verbatim from theaterFIT-prototype.html (:root), which is
   the visual source of truth. Do not invent colors here: if a value is wrong,
   it is wrong in the prototype and both must change together.
   See docs/conventions.md -> "Visual identity".
   ========================================================================== */

/* ---------- Fonts (self-hosted, subset; no third-party CDN) ---------- */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-900.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* From the prototype's :root — canonical values */
  --bg: #F6F1E8;
  --surface: #FFFFFF;
  --surface-alt: #EDE6D8;
  --ink: #1A1412;
  --ink-mid: #3D3733;
  --ink-dim: #6B6157;
  --ink-faint: #A89D8F;
  --curtain: #971413;          /* canonical brand red, sRGB (2026-08-03) */
  --curtain-soft: #740F0F;
  --curtain-tint: #F6E3E3;
  --line: rgba(26, 20, 18, 0.10);
  --line-strong: #1A1412;
  --success: #4A7C5A;
  /* Accent ON the inverted Pro card. That card is painted with var(--ink), so
     it is dark in light mode and light in dark mode — a fixed hex is legible in
     exactly one of them. Foreground text there uses var(--bg), which flips with
     it; this covers the accent that cannot. */
  --pro-accent: #E5A3A2;
  /* Accent used as small TEXT rather than as a fill. --curtain is picked for
     white-on-maroon buttons; the same red as text on a dark surface lands
     around 3:1, under AA. This is the text-safe variant per theme. */
  --accent-text: #971413;
  /* Body copy on the inverted Pro card. Two values, because the card itself
     flips: cream on the near-black card in light mode, and the brand maroon on
     the cream card in dark mode (owner's pick, 2026-08-18 — warmer than the
     neutral it replaced). Swapping either literal into the other theme drops it
     to roughly 1.6:1. */
  --pro-body: color-mix(in srgb, var(--bg) 74%, transparent);
  --skipped: #B5772E;

  /* The site's display font: wordmark, marquee and step numerals. Michroma
     until 2026-08-18, bold Inter since (owner). The logo is the B mark — the
     typeface is a styling choice, not part of the brand lockup. */
  --brand-font: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Site-only tokens (layout scaffolding the prototype has no need for) */
  --shell: 1140px;
  --gutter: 24px;
  --radius-card: 24px;
  --radius-pill: 100px;
  --shadow-sm: 0 1px 2px rgba(26, 20, 18, 0.06), 0 4px 12px rgba(26, 20, 18, 0.05);
  --shadow-md: 0 2px 6px rgba(26, 20, 18, 0.07), 0 18px 44px rgba(26, 20, 18, 0.10);
  --shadow-lg: 0 4px 10px rgba(26, 20, 18, 0.08), 0 32px 80px rgba(26, 20, 18, 0.16);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F0D0C;
    --surface: #191513;
    --surface-alt: #241E1B;
    --ink: #F4EFE7;
    --ink-mid: #CFC6BA;
    --ink-dim: #9C9184;
    --ink-faint: #6B6157;
    --curtain: #D03A39;
    --curtain-soft: #971413;
    --curtain-tint: rgba(208, 58, 57, 0.18);
    --pro-accent: #971413;
  --accent-text: #F2AFAE;
  --pro-body: color-mix(in srgb, #971413 74%, transparent);
    --accent-text: #F2AFAE;
    --pro-body: color-mix(in srgb, #971413 74%, transparent);
    --line: rgba(244, 239, 231, 0.12);
    --line-strong: #F4EFE7;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.45), 0 18px 44px rgba(0, 0, 0, 0.42);
    --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.5), 0 32px 80px rgba(0, 0, 0, 0.55);
  }
}

:root[data-theme="dark"] {
  --bg: #0F0D0C;
  --surface: #191513;
  --surface-alt: #241E1B;
  --ink: #F4EFE7;
  --ink-mid: #CFC6BA;
  --ink-dim: #9C9184;
  --ink-faint: #6B6157;
  --curtain: #D03A39;
  --curtain-soft: #971413;
  --curtain-tint: rgba(208, 58, 57, 0.18);
  --pro-accent: #971413;
  --line: rgba(244, 239, 231, 0.12);
  --line-strong: #F4EFE7;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.45), 0 18px 44px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.5), 0 32px 80px rgba(0, 0, 0, 0.55);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

h1, h2, h3, h4 { margin: 0; line-height: 1.08; letter-spacing: -0.02em; font-weight: 900; }
p { margin: 0; }

::selection { background: var(--curtain); color: #fff; }

:focus-visible {
  outline: 2.5px solid var(--curtain);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--curtain); color: #fff; padding: 12px 20px;
  border-radius: var(--radius-pill); font-weight: 700; font-size: 14px;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 16px; }

/* ---------- Layout ---------- */
.shell {
  width: 100%; max-width: var(--shell);
  margin: 0 auto; padding: 0 var(--gutter);
}
.section { padding: clamp(72px, 11vw, 132px) 0; }
.section--tight { padding: clamp(56px, 8vw, 92px) 0; }
.section--alt { background: var(--surface-alt); }

/* ---------- Brand marks ---------- */
.wordmark {
  font-family: var(--brand-font);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1;
}
.mark {
  width: 40px; height: 40px; border-radius: 11px;
  display: block; flex: none;
}
.mark--lg { width: 76px; height: 76px; border-radius: 20px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--line); }
.site-header__inner {
  display: flex; align-items: center; gap: 20px;
  height: 72px;
}
.site-header__brand { display: flex; align-items: center; gap: 11px; }
/* Sized against the 40px mark beside it: at 19px Inter's cap height was about
   13px against a 40px tile, which read as an undersized word next to the logo.
   24px puts the cap height near 17px and balances the lockup. Same rule serves
   the footer, which reuses this class. */
.site-header__brand .wordmark { font-size: 24px; }
.site-nav {
  margin-left: auto;
  display: flex; align-items: center; gap: 6px;
}
.site-nav a {
  padding: 9px 15px; border-radius: var(--radius-pill);
  font-size: 15px; font-weight: 600; color: var(--ink-mid);
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
}
.site-nav a:hover { color: var(--ink); background: var(--surface-alt); }
/* --curtain as text on the translucent header lands at 4.01:1 in dark mode.
   Same fix as the eyebrow: the text-safe accent. */
.site-nav a[aria-current="page"] { color: var(--accent-text); }
/* The header CTA is a button first and a nav link second: restore its own
   colors, which the `.site-nav a` rule above would otherwise outrank. */
.site-nav a.btn--primary { color: #fff; }
.site-nav a.btn--primary:hover { color: #fff; background: var(--curtain-soft); }

/* The nav has to survive a 390px viewport. Three things give way, in order of
   how little they cost: the secondary link, then the long labels, then the
   wordmark text (the mark alone still identifies the header). */
.site-nav .lbl-short { display: none; }

@media (max-width: 720px) {
  .site-header__inner { height: 64px; }
  .site-nav .site-nav__hide-sm { display: none; }
  .site-nav { gap: 2px; }
  .site-nav a { padding: 9px 11px; font-size: 14.5px; }
  .site-nav .lbl-full { display: none; }
  .site-nav .lbl-short { display: inline; }
  .site-nav .btn--sm { padding: 9px 17px; }
}

@media (max-width: 560px) {
  :root { --gutter: 18px; }
  .site-header__brand .wordmark { display: none; }
  .site-header__brand { gap: 0; }
}

/* ---------- Buttons (pill, from the prototype) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 28px; border-radius: var(--radius-pill);
  font-size: 15px; font-weight: 700; letter-spacing: 0.005em;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform 0.18s var(--ease), background 0.18s var(--ease),
              box-shadow 0.18s var(--ease), color 0.18s var(--ease);
  will-change: transform;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn--primary { background: var(--curtain); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--curtain-soft); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--bg); transform: translateY(-2px); }
.btn--ghost { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.btn--ghost:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--sm { padding: 10px 20px; font-size: 14px; }
.btn--wide { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 520px) {
  .btn-row { flex-direction: column; }
  .btn-row .btn { width: 100%; }
}

/* ---------- Eyebrow / pill label ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--curtain-tint); color: var(--accent-text);
  padding: 7px 15px; border-radius: var(--radius-pill);
  font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
}
.eyebrow--ink { background: var(--surface-alt); color: var(--ink-mid); }

/* ---------- Type scale ---------- */
.display {
  font-size: clamp(40px, 7.2vw, 78px);
  letter-spacing: -0.035em;
  font-weight: 900;
}
.display em {
  font-style: normal;
  color: var(--curtain);
}
.h2 { font-size: clamp(30px, 4.6vw, 46px); letter-spacing: -0.028em; }
.h3 { font-size: clamp(20px, 2.4vw, 24px); letter-spacing: -0.018em; font-weight: 700; }
.lede {
  font-size: clamp(17px, 2vw, 20px);
  color: var(--ink-dim);
  line-height: 1.55;
  max-width: 56ch;
}
.muted { color: var(--ink-dim); }
.small { font-size: 14.5px; }

.section-head { max-width: 60ch; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head .h2 { margin: 16px 0 14px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: clamp(56px, 8vw, 96px) 0 clamp(64px, 9vw, 108px);
  overflow: hidden;
}
.hero__grid {
  display: grid; grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(32px, 5vw, 64px); align-items: center;
}
.hero__copy > * + * { margin-top: 22px; }
.hero__stats {
  display: flex; flex-wrap: wrap; gap: 30px 44px;
  margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--line);
}
.stat__num {
  font-size: clamp(28px, 3.6vw, 38px); font-weight: 900;
  letter-spacing: -0.03em; line-height: 1; color: var(--ink);
}
.stat__label {
  font-size: 13.5px; color: var(--ink-dim); margin-top: 7px;
  font-weight: 600; letter-spacing: 0.01em;
}

/* Ember glow — the one decorative flourish, tied to the brand red */
.ember {
  position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(70px); opacity: 0.5; z-index: -1;
}
.ember--a {
  width: 460px; height: 460px; top: -140px; right: -110px;
  background: radial-gradient(circle, var(--curtain) 0%, transparent 68%);
  animation: drift 22s var(--ease) infinite alternate;
}
.ember--b {
  width: 380px; height: 380px; bottom: -170px; left: -130px;
  background: radial-gradient(circle, var(--skipped) 0%, transparent 70%);
  opacity: 0.32;
  animation: drift 28s var(--ease) infinite alternate-reverse;
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-46px, 40px, 0) scale(1.16); }
}
@media (prefers-reduced-motion: reduce) {
  .ember { animation: none; }
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  /* The art must NOT lead on a narrow screen: at 390px the mockup fills the
     whole first viewport and the headline never gets seen. Copy first, art
     after the call to action. */
  .hero__art { order: 0; margin-top: 12px; }
}
@media (max-width: 620px) {
  .phone { width: min(244px, 64vw); border-width: 7px; border-radius: 38px; }
  .phone::before { width: 78px; height: 18px; }
  .hero__stats { gap: 24px 30px; }
}

/* ---------- Phone mockup ---------- */
.phone {
  position: relative;
  width: min(300px, 78vw);
  aspect-ratio: 300 / 620;
  margin: 0 auto;
  background: var(--surface);
  border: 9px solid var(--ink);
  border-radius: 46px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transition: transform 0.5s var(--ease);
}
.phone::before {
  content: ''; position: absolute; top: 9px; left: 50%;
  transform: translateX(-50%);
  width: 96px; height: 22px; border-radius: 100px;
  background: var(--ink); z-index: 4;
}
.phone__screen {
  position: absolute; inset: 0;
  padding: 44px 18px 18px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--bg);
  font-size: 13px;
}
.phone-stack {
  display: grid; place-items: center;
  perspective: 1400px;
}
.phone-stack .phone { transform: rotateY(-11deg) rotateX(3deg) translateZ(0); }
.phone-stack .phone:hover { transform: rotateY(0deg) rotateX(0deg) scale(1.02); }
@media (prefers-reduced-motion: reduce) {
  .phone-stack .phone, .phone-stack .phone:hover { transform: none; }
}

/* Miniature UI inside the phone — deliberately simplified, not a pixel copy */
.ui-bar {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10.5px; color: var(--ink-faint); font-weight: 600;
}
.ui-title { font-size: 20px; font-weight: 900; letter-spacing: -0.03em; }
.ui-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 13px 14px;
  box-shadow: var(--shadow-sm);
}
.ui-card--accent { background: var(--curtain); color: #fff; border-color: transparent; }
.ui-card--accent .ui-sub { color: rgba(255,255,255,0.78); }
.ui-card--accent .ui-progress { background: rgba(255, 255, 255, 0.26); }
.ui-card--accent .ui-progress span { background: #fff; }
.ui-row { display: flex; align-items: center; gap: 10px; }
.ui-name { font-weight: 700; font-size: 13.5px; letter-spacing: -0.01em; }
.ui-sub { font-size: 11.5px; color: var(--ink-dim); margin-top: 2px; }
.ui-dot {
  width: 30px; height: 30px; border-radius: 10px; flex: none;
  background: var(--curtain-tint);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 900; color: var(--curtain);
}
.ui-bars { display: flex; align-items: flex-end; gap: 5px; height: 52px; margin-top: 10px; }
.ui-bars i {
  flex: 1; background: var(--curtain); border-radius: 4px 4px 2px 2px;
  opacity: 0.28; display: block;
  animation: grow 1.1s var(--ease) both;
}
.ui-bars i:nth-child(5) { opacity: 1; }
@keyframes grow { from { height: 0 !important; } }
.ui-progress {
  height: 7px; border-radius: 100px; background: var(--line);
  overflow: hidden; margin-top: 10px;
}
.ui-progress span {
  display: block; height: 100%; border-radius: 100px;
  background: var(--curtain);
}
.ui-spacer { flex: 1; }
.ui-tabs {
  display: flex; justify-content: space-around;
  border-top: 1px solid var(--line); padding-top: 10px;
  font-size: 10px; color: var(--ink-faint); font-weight: 700;
}
.ui-tabs b { color: var(--curtain); font-weight: 700; }

/* ---------- Path cards (the two doors) ---------- */
.paths {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.4vw, 26px);
}
@media (max-width: 860px) { .paths { grid-template-columns: 1fr; } }

.path {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 18px;
  padding: clamp(28px, 3.4vw, 40px);
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform 0.32s var(--ease), box-shadow 0.32s var(--ease),
              border-color 0.32s var(--ease);
}
.path:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.path::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 0%),
              color-mix(in srgb, var(--curtain) 12%, transparent), transparent 42%);
  opacity: 0; transition: opacity 0.32s var(--ease);
}
.path:hover::after { opacity: 1; }
.path__head { display: flex; align-items: center; gap: 14px; }
.path__title { font-size: clamp(23px, 2.7vw, 29px); font-weight: 900; letter-spacing: -0.03em; }
.path__for {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--accent-text);
}
.path__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.path__list li {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 15.5px; color: var(--ink-mid);
}
.path__list li::before {
  content: '✓'; flex: none; color: var(--curtain);
  font-weight: 900; font-size: 13px; line-height: 1.5;
}
.path__cta { margin-top: auto; padding-top: 6px; }
.path--pro { background: var(--ink); border-color: transparent; }
.path--pro .path__title,
.path--pro .path__list li { color: var(--bg); }
.path--pro .path__list li { color: color-mix(in srgb, var(--bg) 78%, transparent); }
.path--pro .path__for { color: var(--pro-accent); }
/* The check glyph inherits var(--curtain) from .path__list, which lands at
   roughly 1.3:1 on the ink card. Lift it to the accent that tracks the theme. */
.path--pro .path__list li::before { color: var(--pro-accent); }
/* Body copy on the Pro card. This was an inline rgba() cream, which survived
   into dark mode as cream-on-cream — invisible, and it read as a spacing bug
   rather than a color one. --pro-body carries one value per theme. */
.path--pro > p { color: var(--pro-body); }
.path--pro .btn--outline { color: var(--bg); border-color: var(--bg); }
.path--pro .btn--outline:hover { background: var(--bg); color: var(--ink); }

/* ---------- Feature grid ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.2vw, 24px); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2.2vw, 24px); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: clamp(24px, 2.8vw, 32px);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card__icon {
  width: 46px; height: 46px; border-radius: 14px;
  background: var(--curtain-tint); color: var(--curtain);
  display: grid; place-items: center; margin-bottom: 18px;
}
.card__icon svg { width: 23px; height: 23px; }
.card h3 { font-size: 19px; margin-bottom: 9px; letter-spacing: -0.02em; }
.card p { color: var(--ink-dim); font-size: 15.5px; line-height: 1.55; }

/* ---------- Steps ---------- */
.steps { counter-reset: step; display: grid; gap: clamp(18px, 2.4vw, 26px); }
.step {
  display: grid; grid-template-columns: 56px 1fr; gap: 20px;
  align-items: start; padding-bottom: 26px; border-bottom: 1px solid var(--line);
}
.steps .step:last-child { border-bottom: none; padding-bottom: 0; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--brand-font); font-size: 16px;
  font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
  color: var(--curtain); padding-top: 4px;
}
.step h3 { font-size: 19px; margin-bottom: 7px; }
.step p { color: var(--ink-dim); font-size: 15.5px; }

/* ---------- Pricing ---------- */
.price {
  display: flex; align-items: baseline; gap: 7px;
  margin: 6px 0 4px;
}
.price b { font-size: 40px; font-weight: 900; letter-spacing: -0.035em; }
.price span { color: var(--ink-dim); font-size: 15px; font-weight: 600; }
.price-note { font-size: 14px; color: var(--ink-dim); }
/* Reserves the badge row on every card in a comparison pair, so a card
   without a badge still aligns its heading and figure with the one that has. */
.badge-slot { min-height: 25px; margin-bottom: 14px; }

.badge {
  display: inline-block; background: var(--success); color: #fff;
  padding: 4px 11px; border-radius: var(--radius-pill);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; }
.faq details {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; padding: 4px 22px;
  transition: border-color 0.2s var(--ease);
}
.faq details[open] { border-color: color-mix(in srgb, var(--curtain) 40%, transparent); }
.faq summary {
  cursor: pointer; list-style: none; padding: 18px 0;
  font-weight: 700; font-size: 16.5px; letter-spacing: -0.015em;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; flex: none; font-size: 22px; font-weight: 400;
  color: var(--curtain); transition: transform 0.24s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { padding: 0 0 20px; color: var(--ink-dim); font-size: 15.5px; max-width: 66ch; }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative; overflow: hidden;
  background: var(--ink); color: var(--bg);
  border-radius: clamp(24px, 3vw, 34px);
  padding: clamp(40px, 6vw, 72px);
  text-align: center;
}
.cta-band .h2 { color: var(--bg); }
.cta-band .lede { color: color-mix(in srgb, var(--bg) 70%, transparent); margin: 16px auto 30px; }
.cta-band .btn-row { justify-content: center; }
.cta-band .btn--outline { color: var(--bg); border-color: var(--bg); }
.cta-band .btn--outline:hover { background: var(--bg); color: var(--ink); }

/* ---------- Marquee ---------- */
.marquee {
  overflow: hidden; border-block: 1px solid var(--line);
  padding: 20px 0; background: var(--bg);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex; gap: 46px; width: max-content;
  animation: slide 34s linear infinite;
}
.marquee__track span {
  font-family: var(--brand-font); font-size: 25px;
  font-weight: 700; letter-spacing: -0.02em;
  color: var(--ink-faint); white-space: nowrap;
}
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: clamp(44px, 6vw, 64px) 0 40px;
}
.site-footer__grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 32px; margin-bottom: 44px;
}
@media (max-width: 760px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
.site-footer h4 {
  font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-dim); margin-bottom: 15px; font-weight: 700;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer a { color: var(--ink-mid); font-size: 15px; }
.site-footer a:hover { color: var(--curtain); }
.site-footer__legal {
  display: flex; flex-wrap: wrap; gap: 12px 24px;
  justify-content: space-between; align-items: center;
  padding-top: 26px; border-top: 1px solid var(--line);
  font-size: 14px; color: var(--ink-dim);
}

/* ---------- Scroll reveal ---------- */
/* Hidden ONLY when scripting is confirmed alive (boot.js adds .js to <html>).
   Without JS there is nothing to un-hide them, so they must start visible. */
.js .reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}