/* SUBTXT brand layer v0.2: tokens from Figma "SUBTXT Website Page" > Landing (node 36:4013).
   Design width 1512px; --u converts design px to fluid units. */
@font-face {
  font-family: "Special Gothic Expanded One";
  src: url("../assets/fonts-sx/special-gothic-expanded-one.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
:root {
  --sx-bg: #000;
  --sx-fg: #fff;
  --sx-mute: #8d8d8d;          /* Figma caption grey */
  --sx-tile: #d9d9d9;          /* Figma bento tiles */
  --sx-raise: #0d0d0d;
  --sx-line: #ffffff1f;
  --sx-display: "Special Gothic Expanded One", "Helvetica Neue", Arial, sans-serif;
  --sx-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --u: calc(100vw / 1512);
  --sx-h: clamp(34px, calc(66.246 * var(--u)), 66px);  /* Figma headline 66.246px */
  /* retint the base tokens so inherited components go dark */
  --bg: #000; --bg-warm: #000; --bg-warm-2: #0a0a0a; --card: #0d0d0d; --card-2: #141414;
  --ink: #fff; --ink-soft: #e6e6e6; --line: #ffffff14; --line-2: #ffffff24;
  --sx-ink: #fff; --sx-card: #0d0d0d; --sx-ph: repeating-linear-gradient(135deg, #ffffff06 0 12px, #ffffff0d 12px 24px);
}
html, body { background: var(--sx-bg) !important; color: var(--sx-fg); }
body, .fl-home, main { font-family: var(--sx-sans); background: var(--sx-bg); color: var(--sx-fg); }

/* ---------- headline system: Helvetica Neue Bold, uppercase, lh .82, tracking -.045em ---------- */
.sx-h, .fl-h2, .fl-h1, .lps__title, .pr__title, .faq__title, .spotlight__title, .race__line, .sx-engine__title, .ov2 h2, .lpx-formats h2 {
  font-family: var(--sx-sans) !important; font-weight: 700 !important; text-transform: uppercase;
  font-size: var(--sx-h) !important; line-height: .82 !important; letter-spacing: -.045em !important;
  color: var(--sx-fg) !important; background: none !important; -webkit-text-fill-color: currentColor !important;
}
.sx-h, .sx-engine__title, .lps__title, .pr__title, .ov2 h2, .lpx-formats h2 { text-align: center; }
.sx-sub, .sx-subline {
  font: 700 clamp(18px, calc(40 * var(--u)), 40px)/1.001 var(--sx-sans); letter-spacing: -.045em; text-transform: uppercase;
  color: var(--sx-fg); opacity: 1; max-width: 1257px; margin: 28px auto 0; text-align: center;
}
.fl-lead, .lps-step__body, .pr__note, .pr-card__tag, .sx-engine__note { color: var(--sx-mute) !important; font-family: var(--sx-sans); }
.fl-eyebrow, .fl-pill { background: #ffffff10 !important; color: var(--sx-fg) !important; border-color: var(--sx-line) !important; }

/* ---------- nav ---------- */
.sx-nav {
  position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 14px;
  padding: 22px clamp(14px, 1vw, 20px); mix-blend-mode: difference; color: #fff;
  font: 700 13.057px/1.231 var(--sx-sans); letter-spacing: -.01em; pointer-events: none;
}
.sx-nav a, .sx-nav p { pointer-events: auto; color: inherit; margin: 0; }
.sx-nav__brand { text-decoration: none; }
.sx-nav__brief { margin-left: auto !important; text-align: right; }
.sx-nav__brief a { text-decoration: underline; }
.sx-nav__corner { width: clamp(28px, calc(56 * var(--u)), 56px); height: auto; }
.sx-nav__corner--l { transform: scaleX(-1) rotate(157.65deg); }
.sx-nav__corner--r { transform: rotate(-157.65deg); width: clamp(24px, calc(48 * var(--u)), 48px); }

/* ---------- hero: stacked wordmark ---------- */
.sx-hero { position: relative; height: calc(1100 * var(--u)); min-height: 360px; overflow: hidden; background: var(--sx-bg); }
.sx-hero__ghost {
  position: absolute; left: calc(-3 * var(--u)); width: 101.5vw; white-space: nowrap; pointer-events: none; user-select: none;
  font: 400 calc(307.284 * var(--u))/1.4 var(--sx-display); letter-spacing: -.01em; color: rgba(255,255,255,.2);
}
.sx-hero__ghost--a { top: calc(-256 * var(--u)); background: radial-gradient(ellipse at center, #fff, #ccc 50%, #999); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .09; }
.sx-hero__ghost--b { top: calc(-10 * var(--u)); }
.sx-hero__ghost--c { top: calc(472 * var(--u)); }
.sx-hero__ghost--d { top: calc(717 * var(--u)); color: rgba(255,255,255,.06); }
.sx-hero__mark { position: absolute; left: calc(1.61 * var(--u)); top: calc(333 * var(--u)); width: calc(1501.36 * var(--u)); margin: 0; line-height: 0; z-index: 2; }
.sx-hero__mark img { width: 100%; height: auto; display: block; }
.sx-hero__star {
  position: absolute; z-index: 3; left: calc(50% + 113.84 * var(--u) + (719.163 - 572.857) / 2 * var(--u));
  top: calc(117.18 * var(--u) + (719.163 - 444.194) / 2 * var(--u));
  width: calc(572.857 * var(--u)); height: auto; transform: rotate(45deg); transform-origin: center;
}

/* ---------- scale: headline + card row ---------- */
.sx-scale { padding: calc(40 * var(--u)) 0 clamp(64px, calc(140 * var(--u)), 140px); text-align: center; overflow: hidden; }
.sx-cards { display: flex; justify-content: center; align-items: center; gap: calc(52 * var(--u)); margin: calc(110 * var(--u)) 0 calc(70 * var(--u)); }
.sx-card { margin: 0; flex: none; text-align: center; }
.sx-card img { display: block; width: 100%; height: auto; border-radius: 17px; }
.sx-card--sm { width: calc(235 * var(--u)); opacity: .9; }
.sx-card--md { width: calc(282 * var(--u)); }
.sx-card--lg { width: calc(338 * var(--u)); margin-top: calc(-40 * var(--u)); }
.sx-card--lg img { aspect-ratio: 338 / 478; object-fit: cover; }
.sx-card figcaption { margin: 18px auto 0; max-width: 243px; color: var(--sx-mute); font: 500 clamp(11px, calc(16.62 * var(--u)), 16.62px)/1.231 var(--sx-sans); }
.sx-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 999px;
  background: var(--sx-fg); color: var(--sx-bg) !important; font: 700 15px/1 var(--sx-sans); text-transform: uppercase; letter-spacing: -.02em; text-decoration: none;
}
.sx-btn:hover { background: var(--sx-tile); }

/* ---------- logo wall ---------- */
.logowall { background: var(--sx-bg) !important; border-color: var(--sx-line) !important; }
.sx-logo { color: #fff; opacity: .4; font-family: var(--sx-display); font-size: clamp(16px, calc(24 * var(--u)), 24px); }

/* ---------- formats rows + engine bento (Figma grey tiles, radius 50) ---------- */
.ov2, .lpx-formats, .lpx-claim, .sx-engine { background: var(--sx-bg) !important; }
.sx-bento__tile { background: var(--sx-tile) !important; border: 0 !important; border-radius: 50px !important; color: #000; }
.sx-bento__tile strong { font-family: var(--sx-sans); font-weight: 700; text-transform: uppercase; letter-spacing: -.045em; }
.sx-bento__tile span { color: #000; opacity: .6; }
.sx-engine__note .sx-src { color: var(--sx-mute); }
.lpx-claim__cta { background: var(--sx-fg) !important; color: var(--sx-bg) !important; }

/* ---------- pipeline (circuit) ---------- */
.lps, .lps__sticky, .lps__frame { background: var(--sx-bg) !important; }
.lps-step__title { color: var(--sx-fg) !important; font-family: var(--sx-sans) !important; text-transform: uppercase; letter-spacing: -.04em; }
.lps-step__title-2 { color: var(--sx-mute) !important; }
.lps__car .sx-star, .race__car.sx-star { width: 100%; height: auto; transform: rotate(45deg); filter: drop-shadow(0 0 12px #ffffff55); }

/* ---------- spotlight / why / offerings / faq / footer ---------- */
.spotlight, .tw, .race, .pr, .faq, .fl-darkzone { background: var(--sx-bg) !important; color: var(--sx-fg); }
.spotlight__quote, .pr-card, .faq-item, .sx-why__col { background: var(--sx-raise) !important; border: 1px solid var(--sx-line) !important; color: var(--sx-fg) !important; box-shadow: none !important; }
.pr-card--feat { background: var(--sx-tile) !important; color: #000 !important; }
.pr-card--feat .pr-card__name, .pr-card--feat .pr-card__tag, .pr-card--feat .sx-offer__tag { color: #000 !important; }
.pr-card__name, .faq-item__q, .faq-item__q span { color: var(--sx-fg) !important; font-family: var(--sx-sans); }
.faq-item__a { color: var(--sx-mute) !important; }
.sx-why__col--us { background: var(--sx-tile) !important; color: #000 !important; }
.sx-why__col--us li { border-color: #0000001f !important; }
.fl-darkzone__grad, .fl-footer__grad, .fl-footer__glow { display: none !important; }
.fl-footer, .fl-footer__hero { background: var(--sx-bg) !important; }
.race__line { color: var(--sx-fg) !important; }
.sx-ph { border-color: #ffffff2e; color: #ffffff80; }
.sx-contact { border-color: #ffffff2e; color: #ffffff99; }

@media (max-width: 860px) {
  .sx-nav__brief { display: none; }
  .sx-cards { gap: 12px; }
  .sx-card--sm { display: none; }
  .sx-card--md { width: 28vw; } .sx-card--lg { width: 36vw; }
}

/* consent banner: base pill is light; force SUBTXT dark */
.consent-banner { background: #0d0d0d !important; border: 1px solid var(--sx-line) !important; color: var(--sx-fg) !important; box-shadow: 0 10px 40px #0009 !important; }
.consent-banner, .consent-banner * { color: var(--sx-fg) !important; -webkit-text-fill-color: currentColor !important; }
.consent-banner__btn { background: transparent !important; border: 1px solid var(--sx-line) !important; }
.consent-banner__btn--primary { background: var(--sx-fg) !important; }
.consent-banner__btn--primary, .consent-banner__btn--primary * { color: #000 !important; }

/* Figma layer order: diamond logomark sits below the wordmark + ghost lines */
.sx-hero__star { z-index: 1; }
.sx-hero__ghost, .sx-hero__mark { z-index: 2; }
.sx-hero__ghost { position: absolute; }
@media (max-width: 860px) { .sx-nav__corner--r { margin-left: auto; } }

/* strip remaining Fastlane red/orange accents */
.pr-card--feat:before, .pr-card--feat:after, .sx-offer:before, .sx-offer:after { display: none !important; }
.pr-card--feat { border: 0 !important; box-shadow: none !important; }
.lpx-glow, [class*="glow-sep"], .lpx-sep, .fl-glowsep { display: none !important; }
.sx-why__col--us h3 { color: #000 !important; opacity: .55 !important; }
.pr__note { margin: 18px 0 8px !important; text-align: center; }
.lps__marker-label { background: #0d0d0d !important; color: var(--sx-fg) !important; border: 1px solid var(--sx-line) !important; }
.lps__marker.is-on .lps__marker-label { background: var(--sx-fg) !important; color: #000 !important; }
.lps__marker-label i { background: currentColor !important; }
.lpx-claim__cta, .lpx-claim__cta:hover { box-shadow: none !important; border-radius: 999px !important; height: auto !important; padding: 18px 34px !important; }
.lps__car .sx-star { width: 140%; }
/* logomark has a black square body: screen-blend so only the star shows over content */
.race__car.sx-star, .lps__car .sx-star { mix-blend-mode: screen; }

/* ---------- pipeline rail (replaces the circuit loop) ---------- */
.lps__grid { grid-template-columns: 1fr !important; max-width: 980px; margin: 0 auto; }
.lps__steps { position: relative; padding-left: 230px; }
.sx-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 200px; pointer-events: none; }
.sx-rail__track, .sx-rail__fill {
  position: absolute; left: 32px; width: 28px; border-radius: 14px;
  background: radial-gradient(circle, var(--dot) 1.05px, transparent 1.35px) 0 0 / 7px 7px;
}
.sx-rail__track { --dot: rgba(255,255,255,.18); }
.sx-rail__fill { --dot: #fff; height: 0; will-change: height; }
.lps-step { position: relative; }
.sx-node {
  position: absolute; left: -230px; top: calc(16vh + .2em); transform: translateY(-50%) translateY(18px);
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; z-index: 2;
  background: #0d0d0d; border: 1px solid var(--sx-line); color: var(--sx-fg);
  font: 600 15px/1 var(--sx-sans); white-space: nowrap; transition: background .3s, color .3s, box-shadow .3s;
}
.sx-node i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sx-node.is-on { border-color: #ffffff40; }
.sx-node.is-current { background: var(--sx-fg); color: #000; box-shadow: 0 0 24px #ffffff40; }
@media (max-width: 860px) {
  .lps__steps { padding-left: 64px; }
  .sx-rail { width: 48px; }
  .sx-rail__track, .sx-rail__fill { left: 14px; width: 20px; }
  .sx-node { left: -64px; top: calc(8vh + .2em); padding: 0; width: 48px; height: 26px; justify-content: center; font-size: 0; gap: 0; }
  .sx-node i { width: 8px; height: 8px; }
}

/* hero strap line: sits over the bottom ghost line, pinned to the fold */
.sx-hero { height: min(100svh, calc(1100 * var(--u))) !important; min-height: 360px; }
.sx-hero__strap {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: clamp(28px, 6vh, 72px); margin: 0 auto; padding: 0 16px;
  text-align: center; color: var(--sx-fg) !important;
}
@media (max-width: 860px) { .sx-hero__strap { font-size: clamp(22px, 6.4vw, 34px) !important; bottom: 22px; } }
@media (max-width: 860px) { .sx-scale { padding-top: 56px; } }